.online-pro-root,
.online-pro-page-root{
    --op-bg:#ffffff;
    --op-text:#202734;
    --op-muted:#7f8998;
    --op-border:#e8ecf1;
    --op-soft:#f6f8fa;
    --op-green:#28c76f;
    --op-blue:#3b82f6;
    --op-guest:#38aee8;
    --op-purple:#8b6ee8;
    --op-shadow:0 6px 22px rgba(31,42,58,.07);
    box-sizing:border-box;
    color:var(--op-text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-size:14px;
    line-height:1.4;
}
.online-pro-root{width:100%}
.online-pro-root *,
.online-pro-root *::before,
.online-pro-root *::after,
.online-pro-page-root *,
.online-pro-page-root *::before,
.online-pro-page-root *::after{box-sizing:border-box}
.online-pro-theme-dark,
.online-pro-page-theme-dark{
    --op-bg:#171d26;
    --op-text:#e8edf3;
    --op-muted:#96a0ae;
    --op-border:#2a3441;
    --op-soft:#202833;
    --op-green:#35d07f;
    --op-blue:#5a9df8;
    --op-guest:#4ab4e9;
    --op-purple:#9a82ec;
    --op-shadow:0 7px 22px rgba(0,0,0,.22);
}
.online-pro-card{
    padding:16px;
    color:var(--op-text);
    background:var(--op-bg);
    border:1px solid var(--op-border);
    border-radius:12px;
    box-shadow:var(--op-shadow);
}
.online-pro-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.online-pro-titlewrap{min-width:0}
.online-pro-title{display:flex;align-items:center;gap:9px;min-width:0;font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.online-pro-title>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-pro-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--op-green);box-shadow:0 0 0 4px rgba(40,199,111,.1)}
.online-pro-signal{width:19px;height:19px;flex:0 0 auto;fill:var(--op-muted);opacity:.72}
.online-pro-total{margin-top:4px;color:var(--op-muted);font-size:13px;font-weight:400}
.online-pro-total b{color:var(--op-text);font-weight:600}
.online-pro-metrics{display:flex;align-items:center;gap:11px;margin:15px 0 10px}
.online-pro-metric{display:flex;align-items:center;gap:6px;min-width:0;font-size:15px;font-weight:600;line-height:1}
.online-pro-metric svg{width:19px;height:19px;fill:currentColor}
.online-pro-metric--users{color:var(--op-blue)}
.online-pro-metric--guests{color:var(--op-guest)}
.online-pro-metric--bots{color:var(--op-purple)}
.online-pro-metric span{color:var(--op-text)}
.online-pro-sep{width:1px;height:17px;background:var(--op-border)}
.online-pro-bar{display:block;width:100%;height:4px;margin:0 0 16px;overflow:hidden;border-radius:999px;background:var(--op-soft)}
.online-pro-bar-users{fill:var(--op-green)}
.online-pro-bar-guests{fill:var(--op-guest)}
.online-pro-bar-bots{fill:var(--op-purple)}
.online-pro-section{padding-top:14px;border-top:1px solid var(--op-border)}
.online-pro-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:14px;font-weight:600}
.online-pro-all-link{color:var(--op-blue);font-size:12px;font-weight:500;text-decoration:none;white-space:nowrap}
.online-pro-all-link:hover,.online-pro-all-link:focus-visible{text-decoration:underline;outline:none}
.online-pro-user{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:7px 0}
.online-pro-avatar{display:block;width:40px;height:40px;object-fit:cover;border:1px solid var(--op-border);border-radius:50%;background:var(--op-soft)}
.online-pro-user-main{min-width:0}
.online-pro-user-name{display:flex;align-items:center;gap:6px;min-width:0}
.online-pro-user-name i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--op-green)}
.online-pro-user-name a{min-width:0;overflow:hidden;color:var(--op-text);font-size:13.5px;font-weight:600;line-height:1.25;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;transition:color .15s ease}
.online-pro-user-name a:hover,.online-pro-user-name a:focus-visible{color:var(--op-blue);outline:none}
.online-pro-action{margin-top:2px;overflow:hidden;color:var(--op-muted);font-size:12px;font-weight:400;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.online-pro-time{color:var(--op-muted);font-size:11.5px;font-weight:400;text-align:right;white-space:nowrap}
.online-pro-empty{padding:8px 0 2px;color:var(--op-muted);font-size:12.5px;font-weight:400}
.online-pro-more{display:block;width:100%;margin-top:11px;padding:9px 12px;color:var(--op-text);background:var(--op-soft);border:1px solid transparent;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.online-pro-more:hover,.online-pro-more:focus-visible{color:var(--op-blue);border-color:var(--op-border);outline:none}
.online-pro-arrow{margin-left:5px;color:var(--op-muted)}

.online-pro-page-root{width:100%;margin:0 auto}
.online-pro-page-shell{padding:20px;color:var(--op-text);background:var(--op-bg);border:1px solid var(--op-border);border-radius:14px;box-shadow:var(--op-shadow)}
.online-pro-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--op-border)}
.online-pro-page-heading{display:flex;align-items:center;gap:10px;margin:0;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.online-pro-page-heading .online-pro-dot{width:11px;height:11px}
.online-pro-page-subtitle{margin-top:5px;color:var(--op-muted);font-size:13px}
.online-pro-page-count{display:flex;align-items:center;justify-content:center;min-width:42px;height:32px;padding:0 11px;color:var(--op-blue);background:var(--op-soft);border-radius:999px;font-size:13px;font-weight:600}
.online-pro-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.online-pro-page-user{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;min-width:0;padding:13px;border:1px solid var(--op-border);border-radius:11px;background:var(--op-bg);transition:border-color .15s ease,background-color .15s ease}
.online-pro-page-user:hover{border-color:var(--op-blue)}
.online-pro-page-avatar-wrap{position:relative;width:52px;height:52px}
.online-pro-page-avatar{display:block;width:52px;height:52px;object-fit:cover;border:1px solid var(--op-border);border-radius:50%;background:var(--op-soft)}
.online-pro-page-presence{position:absolute;right:1px;bottom:2px;width:10px;height:10px;border:2px solid var(--op-bg);border-radius:50%;background:var(--op-green)}
.online-pro-page-user-body{min-width:0}
.online-pro-page-name-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.online-pro-page-name{min-width:0;overflow:hidden;color:var(--op-text);font-size:14px;font-weight:600;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.online-pro-page-name:hover,.online-pro-page-name:focus-visible{color:var(--op-blue);outline:none}
.online-pro-page-time{flex:0 0 auto;color:var(--op-muted);font-size:11.5px;font-weight:400;white-space:nowrap}
.online-pro-page-group{margin-top:2px;color:var(--op-muted);font-size:11.5px;line-height:1.35}
.online-pro-page-action{margin-top:5px;overflow:hidden;color:var(--op-muted);font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.online-pro-page-empty{margin-top:16px;padding:28px 16px;color:var(--op-muted);background:var(--op-soft);border-radius:11px;text-align:center;font-size:13px}
.online-pro-page-pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--op-border)}
.online-pro-page-pagination a,.online-pro-page-pagination span{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid var(--op-border);border-radius:8px;color:var(--op-text);background:var(--op-bg);font-size:12px;text-decoration:none}
.online-pro-page-pagination a:hover,.online-pro-page-pagination a:focus-visible{color:var(--op-blue);border-color:var(--op-blue);outline:none}
.online-pro-page-pagination .is-current{color:#fff;background:var(--op-blue);border-color:var(--op-blue)}
.online-pro-page-pagination .is-gap{min-width:auto;padding:0 4px;border-color:transparent;background:transparent;color:var(--op-muted)}

.online-pro-popover{--op-arrow-top:24px;position:fixed;left:0;top:0;z-index:2147483000;width:min(312px,calc(100vw - 20px));padding:13px;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(2px) scale(.985);transform-origin:right var(--op-arrow-top);border:1px solid #e4e9ef;border-radius:12px;background:#ffffff;color:#202734;box-shadow:0 14px 36px rgba(24,34,48,.16);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:12px;line-height:1.38;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}
.online-pro-popover.is-visible{visibility:visible;opacity:1;transform:translateY(0) scale(1)}
.online-pro-popover--dark{border-color:#303b49;background:#1c2430;color:#e8edf3;box-shadow:0 16px 40px rgba(0,0,0,.34)}
.online-pro-popover::before,.online-pro-popover::after{content:"";position:absolute;right:-7px;top:calc(var(--op-arrow-top) - 7px);width:0;height:0;border-style:solid}
.online-pro-popover::before{border-width:7px 0 7px 7px;border-color:transparent transparent transparent #e4e9ef}
.online-pro-popover::after{right:-6px;top:calc(var(--op-arrow-top) - 6px);border-width:6px 0 6px 6px;border-color:transparent transparent transparent #ffffff}
.online-pro-popover--dark::before{border-left-color:#303b49}
.online-pro-popover--dark::after{border-left-color:#1c2430}
.online-pro-popover-head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px}
.online-pro-popover-avatar{display:block;width:40px;height:40px;object-fit:cover;border:1px solid #e5e9ef;border-radius:50%;background:#f4f6f8}
.online-pro-popover--dark .online-pro-popover-avatar{border-color:#34404f;background:#252f3b}
.online-pro-popover-name{overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.online-pro-popover-status{display:flex;align-items:center;gap:5px;margin-top:3px;color:#28a962;font-size:11.5px}
.online-pro-popover-status::before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#2acb73}
.online-pro-popover-action{margin-top:10px;padding-top:9px;color:#667184;border-top:1px solid #edf0f4}
.online-pro-popover--dark .online-pro-popover-action{color:#a5afbc;border-top-color:#2c3744}
.online-pro-popover-details{display:grid;gap:0;margin-top:9px;padding-top:4px;border-top:1px solid #edf0f4}
.online-pro-popover--dark .online-pro-popover-details{border-top-color:#2c3744}
.online-pro-popover-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:5px 0;align-items:start}
.online-pro-popover-label{color:#8b95a4;font-size:11px}
.online-pro-popover-value{min-width:0;color:#364154;font-size:11.5px;font-weight:500;overflow-wrap:anywhere}
.online-pro-popover-value b,.online-pro-popover-value strong{font-weight:600}
.online-pro-popover--dark .online-pro-popover-label{color:#8f9baa}
.online-pro-popover--dark .online-pro-popover-value{color:#d5dce5}
.online-pro-popover [hidden]{display:none!important}

@media(max-width:760px){
    .online-pro-page-shell{padding:16px}
    .online-pro-page-grid{grid-template-columns:1fr}
    .online-pro-page-heading{font-size:20px}
}
@media(max-width:360px){
    .online-pro-card{padding:14px}
    .online-pro-title{font-size:17px}
    .online-pro-metrics{gap:8px}
    .online-pro-metric{font-size:14px}
    .online-pro-metric svg{width:18px;height:18px}
    .online-pro-user{grid-template-columns:38px minmax(0,1fr) auto;gap:9px}
    .online-pro-avatar{width:38px;height:38px}
    .online-pro-popover-row{grid-template-columns:92px minmax(0,1fr)}
    .online-pro-page-user{grid-template-columns:46px minmax(0,1fr);gap:10px;padding:11px}
    .online-pro-page-avatar-wrap,.online-pro-page-avatar{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
    .online-pro-user-name a,.online-pro-more,.online-pro-page-user,.online-pro-popover{transition:none}
}