:root { --sf-bg:#f5f5f5; --sf-surface:#fff; --sf-text:#242424; --sf-muted:#616161; --sf-line:#d1d1d1; --sf-primary:#0f6cbd; --sf-selected:#eff6fc; color-scheme:light; }
body.fluent-layout,body.fluent-auth { background:var(--sf-bg); color:var(--sf-text); font-family:"Segoe UI",system-ui,sans-serif; font-size:14px; line-height:1.5; margin:0; }
.fluent-layout *, .fluent-auth * { box-sizing:border-box; }
.fluent-layout [hidden],.fluent-auth [hidden] { display:none!important; }
.fluent-layout a,.fluent-auth a { color:var(--sf-primary); }
.fluent-layout :focus-visible,.fluent-auth :focus-visible { outline:2px solid var(--sf-primary); outline-offset:3px; }
body.fluent-layout > header { margin-left:220px; min-height:64px; padding:12px 28px; background:#fff; color:var(--sf-text); border-bottom:1px solid #e5e5e5; box-shadow:none; backdrop-filter:none; gap:12px; }
.fluent-layout > header h1 { font-size:19px; letter-spacing:0; font-weight:600; }
.fluent-layout > header .toolbar,.fluent-layout > header .actions { display:flex; flex-wrap:wrap; gap:8px; }
.fluent-layout > header .meta { color:var(--sf-muted); font-size:12px; }
.fluent-layout > header .meta code { color:var(--sf-muted); background:#f5f5f5; border-color:#e5e5e5; }
body.fluent-layout > main { max-width:1600px; margin:0 0 0 220px; padding:28px; width:calc(100% - 220px); }
.fluent-sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:220px; background:#fafafa; border-right:1px solid #e5e5e5; display:flex; flex-direction:column; padding:18px 12px; }
.fluent-brand { display:flex; align-items:center; gap:10px; text-decoration:none; padding:0 8px 24px; color:#242424!important; font-size:17px; font-weight:650; }
.fluent-brand small { display:block; font-size:11px; color:#616161; font-weight:400; }
.fluent-brand-mark { background:#0f6cbd; color:#fff; width:34px; height:34px; border-radius:7px; display:grid; place-items:center; font-size:19px; }
.fluent-nav-label { font-size:11px; color:#737373; text-transform:uppercase; letter-spacing:.08em; padding:10px; }
.fluent-sidebar nav { display:grid; gap:4px; }
.fluent-sidebar nav a { color:#424242; text-decoration:none; padding:11px 10px; border-radius:5px; display:flex; gap:10px; align-items:center; font-size:13px; position:relative; }
.fluent-sidebar nav a span { color:#616161; width:17px; font-size:17px; text-align:center; flex-shrink:0; }
.fluent-sidebar nav a:hover { background:#ebebeb; }
.fluent-sidebar nav a[aria-current] { background:#e7f0f9; color:#0f548c; font-weight:600; }
.fluent-sidebar nav a[aria-current]:before { content:""; position:absolute; left:0; height:22px; width:3px; background:#0f6cbd; border-radius:3px; }
.fluent-sidebar-footer { margin-top:auto; padding:18px 10px 0; font-size:12px; color:#424242; }
.fluent-sidebar-footer small { display:block; color:#737373; font-size:10px; margin-top:5px; }
.fluent-menu { display:none!important; }
.fluent-layout .card,.fluent-layout .stat,.fluent-layout .hero,.fluent-layout .section,.fluent-layout .change,.fluent-auth .card { background:#fff; color:#242424; border:1px solid #e0e0e0; border-radius:8px; box-shadow:0 1px 2px #00000006; padding:22px; }
.fluent-layout .card { margin-bottom:20px; min-width:0; }
.fluent-layout h2 { font-size:19px; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.fluent-layout h3 { font-size:16px; font-weight:600; }
.fluent-layout .muted,.fluent-layout .td-muted,.fluent-layout .fw-muted,.fluent-layout .empty,.fluent-layout .server-status-help,.fluent-layout .section__head span { color:#616161; }
.fluent-layout button,.fluent-layout .btn,.fluent-auth button { background:#0f6cbd; color:#fff; border:1px solid #0f6cbd; border-radius:5px; box-shadow:none; min-height:36px; font-family:inherit; font-size:13px; padding:8px 14px; font-weight:500; }
.fluent-layout button:hover,.fluent-layout .btn:hover,.fluent-auth button:hover { background:#115ea3; }
.fluent-layout button.secondary,.fluent-layout .btn.secondary,.fluent-layout .btn-secondary,.fluent-layout .btn--ghost { background:#fff; color:#242424; border-color:#c7c7c7; }
.fluent-layout button.kill,.fluent-layout .btn--red { background:#fff; color:#b10e1e; border-color:#e4b6bb; }
.fluent-layout input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.fluent-layout select,.fluent-layout textarea,.fluent-auth input { background:#fff; color:#242424; border:1px solid #b8b8b8; border-bottom-color:#616161; border-radius:5px; min-height:36px; box-shadow:none; font:inherit; padding:8px 11px; }
.fluent-layout input[type=checkbox],.fluent-layout input[type=radio] { accent-color:#0f6cbd; }
.fluent-layout code { color:#424242; background:#f5f5f5; border-color:#e0e0e0; overflow-wrap:anywhere; }
.fluent-layout table { background:#fff; color:#242424; border-color:#e0e0e0; }
.fluent-layout th { background:#fafafa; color:#616161; font-size:12px; font-weight:600; }
.fluent-layout td { border-color:#ebebeb; }
.fluent-layout tr:hover td { background:#f5f9fd; }
.fluent-layout .status-badge,.fluent-layout .badge,.fluent-layout .chip,.fluent-layout .ih-badge,.fluent-layout .fw-chip { border-radius:4px; font-weight:500; }
.fluent-layout .ok,.fluent-layout .enabled,.fluent-layout .chip--green,.fluent-layout .fw-chip--green { background:#dff6dd; color:#107c10; }
.fluent-layout .warn,.fluent-layout .chip--orange,.fluent-layout .fw-chip--orange { background:#fff4ce; color:#835b00; }
.fluent-layout .bad,.fluent-layout .disabled,.fluent-layout .chip--red,.fluent-layout .fw-chip--red { background:#fde7e9; color:#a4262c; }
.fluent-layout .monitor-topline { margin-bottom:20px; }
.fluent-layout .monitor-topline h2 { font-size:25px; font-weight:600; }
.fluent-layout .monitor-eyebrow { color:#616161; font-size:11px; letter-spacing:.05em; }
.fluent-layout .monitor-nav { border:0; background:transparent; border-bottom:1px solid #d1d1d1; padding:0; border-radius:0; gap:20px; }
.fluent-layout .monitor-nav a { border-radius:0; color:#424242; padding:11px 2px; font-size:13px; border-bottom:3px solid transparent; }
.fluent-layout .monitor-nav a[aria-current] { background:transparent; color:#0f6cbd; border-color:#0f6cbd; }
.fluent-layout .monitor-healthline { background:#fff; color:#616161; border-color:#e0e0e0; border-radius:6px; font-size:12px; }
.fluent-layout .monitor-healthline[data-state=error] { color:#a4262c; background:#fff5f5; border-color:#ecc5c8; }
.fluent-layout .monitor-healthline[data-state=stale],.fluent-layout .monitor-draft { color:#735b00; background:#fff9e6; border-color:#e9d89d; }
.fluent-layout .monitor-metric { background:#fff; color:#424242; border-color:#e0e0e0; border-radius:8px; padding:18px; }
.fluent-layout .monitor-metric strong { color:#242424; font-size:30px; }
.fluent-layout.monitor-workspace .summary-grid .stat strong { color:#242424; font-size:30px; font-weight:600; letter-spacing:normal; }
.fluent-layout.monitor-workspace .summary-grid .stat .muted { color:#616161; }
@media(max-width:760px) { .fluent-layout.monitor-workspace .summary-grid .stat strong { font-size:25px; } }
.fluent-layout .monitor-metric small { color:#616161; font-size:12px; }
.fluent-layout .monitor-task-list a { background:#fafafa; color:#0f6cbd; border-color:#e0e0e0; }
.fluent-layout .monitor-signal-list li { border-color:#ebebeb; }
.fluent-layout .monitor-section__toggle,.fluent-layout .user-summary { background:transparent; border:0; color:#242424; box-shadow:none; }
.fluent-layout .monitor-section__toggle:hover,.fluent-layout .user-summary:hover { background:#f5f9fd; }
.fluent-layout .monitor-section__body,.fluent-layout .user-details,.fluent-layout .monitor-role-body { border-color:#e5e5e5; }
.fluent-layout .monitor-role-card,.fluent-layout .permission-group,.fluent-layout .history-block,.fluent-layout .support-app-card,.fluent-layout .fw-details,.fluent-layout .fw-form,.fluent-layout .key-card,.fluent-layout .monitor-user { background:#fafafa; color:#242424; border-color:#e0e0e0; box-shadow:none; border-radius:6px; }
.fluent-layout .history-row,.fluent-layout .ip-chip { color:#424242; border-color:#e5e5e5; }
.fluent-layout .history-row .h-ip,.fluent-layout .history-row .h-pg { color:#0f6cbd; }
.fluent-layout .history-row .h-ts,.fluent-layout .key-card__title { color:#616161; }
.fluent-layout .server-status-option { color:#424242; background:#fafafa; border-color:#d1d1d1; }
.fluent-layout .server-status-option.is-active { color:#0f548c; background:#eff6fc; border-color:#0f6cbd; }
.fluent-layout .server-status-indicator { color:#424242; }
.fluent-layout .fw-stat,.fluent-layout .stat-card,.fluent-layout .pill { background:#fafafa; color:#424242; border-color:#e0e0e0; }
.fluent-layout .install-hub { --ih-border:#d1d1d1; --ih-muted:#616161; --ih-bg:#fafafa; }
.fluent-layout .install-hub .ih-eyebrow { color:#0f6cbd; }
.fluent-layout .install-hub .ih-stat,.fluent-layout .install-hub .ih-installation { border-radius:6px; }
.fluent-layout .monitor-filter { margin-top:5px; }
.fluent-layout .admin-modal__dialog { background:#fff; color:#242424; border:1px solid #d1d1d1; }
.fluent-layout .alert,.fluent-layout .message.error,.fluent-layout .fw-alert--error { background:#fff3f3; color:#a4262c; border-color:#ecc5c8; }
.fluent-layout .message.success,.fluent-layout .alert.success { background:#f1faf1; color:#107c10; }
.fluent-auth { min-height:100vh; display:grid; place-items:center; padding:32px 20px!important; }
.fluent-auth .wrap { width:100%; max-width:480px; margin:auto; padding:0; }
.fluent-auth > .card { width:100%; max-width:640px; margin:0; }
.fluent-auth .card { padding:32px; box-shadow:0 6px 24px #00000008; }
.fluent-auth h1 { color:#242424; font-size:25px; font-weight:600; margin-top:0; }
.fluent-auth .sub,.fluent-auth .hint,.fluent-auth .muted,.fluent-auth p { color:#616161; }
.fluent-auth .hint { font-size:12px; border-top:1px solid #e5e5e5; padding-top:16px; }
.fluent-auth label { color:#424242; }
.fluent-auth input { width:100%; }
.fluent-auth .captcha-box { background:#fafafa; border-color:#d1d1d1; }
.fluent-auth .captcha-refresh { background:#fff; color:#0f6cbd; border-color:#c7c7c7; }
.fluent-auth .errors { color:#a4262c; background:#fff3f3; border-color:#ecc5c8; }
.sf-chart-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:20px; margin-bottom:20px; }
.sf-chart-grid .card { margin:0; }
.sf-chart-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.sf-chart-header h2 { margin:0 0 4px; }
.sf-chart-controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:18px; }
.sf-chart-controls label { display:grid; gap:5px; color:#616161; font-size:12px; }
.sf-chart-controls select { max-width:260px; }
.sf-chart-note { color:#616161; font-size:12px; line-height:1.55; margin:8px 0 0; }
.sf-bars { display:flex; gap:8px; align-items:end; min-height:180px; padding:20px 0 0; border-bottom:1px solid #d1d1d1; }
.sf-bar-group { flex:1; min-width:0; text-align:center; }
.sf-bar-columns { display:flex; gap:3px; align-items:end; justify-content:center; height:135px; }
.sf-bar { width:26px; max-width:42%; background:#0f6cbd; border-radius:3px 3px 0 0; min-height:0; position:relative; }
.sf-bar.login { background:#8c6cce; }
.sf-bar-value { position:absolute; bottom:100%; font-size:10px; color:#424242; width:100%; left:0; padding-bottom:3px; }
.sf-bar-label { display:block; font-size:10px; color:#616161; margin:7px 0; overflow-wrap:anywhere; }
.sf-legend { display:flex; gap:18px; flex-wrap:wrap; color:#616161; font-size:12px; margin-top:14px; }
.sf-legend span:before { content:""; display:inline-block; width:9px; height:9px; border-radius:2px; background:#0f6cbd; margin-right:6px; }
.sf-legend span:last-child:before { background:#8c6cce; }
.sf-presence { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin:20px 0; }
.sf-donut { width:144px; height:144px; border-radius:50%; background:#e5e5e5; display:grid; place-items:center; flex-shrink:0; }
.sf-donut-center { width:108px; height:108px; border-radius:50%; background:#fff; display:grid; place-content:center; text-align:center; }
.sf-donut-center strong { font-size:30px; font-weight:600; }.sf-donut-center small { color:#616161; }
.sf-presence-list { flex:1; min-width:130px; display:grid; gap:12px; font-size:13px; }.sf-presence-list div { display:flex; justify-content:space-between; gap:12px; }
.sf-horizontal-bars { display:grid; gap:17px; }.sf-horizontal-row { min-width:0; }.sf-horizontal-label { display:flex; justify-content:space-between; gap:14px; font-size:12px; margin-bottom:5px; }.sf-horizontal-label span { overflow-wrap:anywhere; }.sf-horizontal-track { height:9px; background:#f0f0f0; border-radius:3px; overflow:hidden; }.sf-horizontal-fill { height:100%; background:#0f6cbd; border-radius:3px; }
.sf-data-details { margin-top:18px; color:#616161; font-size:12px; }.sf-data-details summary { cursor:pointer; padding:5px 0; }.sf-data-details table { width:100%; margin-top:10px; }.sf-data-details th,.sf-data-details td { padding:8px; text-align:left; }
.sf-empty { border:1px dashed #d1d1d1; padding:24px 16px; border-radius:6px; color:#616161; text-align:center; }
.sf-recent-list { list-style:none; margin:0; padding:0; }.sf-recent-list li { display:grid; grid-template-columns:85px minmax(0,1fr) auto; gap:12px; padding:12px 0; border-bottom:1px solid #ebebeb; font-size:12px; }.sf-recent-list strong { display:block; font-size:13px; font-weight:600; }.sf-recent-list time { color:#616161; }.sf-recent-list span { overflow-wrap:anywhere; }
@media(max-width:1000px) { .sf-chart-grid { grid-template-columns:1fr; }.fluent-layout > header .meta { display:none; } }
@media(max-width:760px) { body.fluent-layout > header { margin-left:0; padding:14px 16px 14px 96px; min-height:66px; }.fluent-layout > header h1 { font-size:17px; }body.fluent-layout > main { margin:0; width:100%; padding:20px 16px; }.fluent-sidebar { transform:translateX(-100%); top:66px; box-shadow:8px 0 24px #00000015; }.fluent-nav-open .fluent-sidebar { transform:none; }.fluent-menu { display:flex!important; position:absolute; top:15px; left:12px; z-index:60; background:#fff!important; color:#424242!important; border:1px solid #d1d1d1!important; padding:8px!important; min-height:36px; }.fluent-layout .monitor-nav { gap:12px; flex-wrap:wrap; }.fluent-layout .monitor-nav a { flex:0 1 auto; padding:10px 2px; font-size:12px; }.fluent-layout .card { padding:17px; }.fluent-layout .monitor-metrics { gap:10px; }.fluent-layout .monitor-metric { padding:14px; }.fluent-layout .monitor-metric strong { font-size:25px; }.sf-chart-controls select { max-width:100%; }.sf-recent-list li { grid-template-columns:70px minmax(0,1fr); }.sf-recent-list time { grid-column:2; }.fluent-auth .card { padding:24px; } }
@media print { .fluent-sidebar,.fluent-menu { display:none!important; }body.fluent-layout > header,body.fluent-layout > main { margin:0; width:100%; }.fluent-layout .card { break-inside:avoid; box-shadow:none; } }

.sf-chart-scroll { overflow-x:auto; }.sf-bar-group { min-width:62px; }.sf-bars { min-width:min-content; }
@media(max-width:1000px) { .fluent-layout [data-activity-lower-grid] { grid-template-columns:1fr!important; } }
@media(max-width:760px) { .fluent-sidebar { visibility:hidden; }.fluent-nav-open .fluent-sidebar { visibility:visible; }.fluent-layout button,.fluent-layout .btn,.fluent-layout input:not([type=checkbox]):not([type=radio]),.fluent-layout select { min-height:44px; }.fluent-sidebar nav a { min-height:44px; } }

.sf-dot { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; }.sf-dot.online { background:#107c10; }.sf-dot.stale { background:#c19c00; }.sf-dot.offline { background:#c8c8c8; }
.fluent-layout .tbl-wrap { max-width:100%; overflow-x:auto; }.fluent-layout .card-grid { min-width:0; }.fluent-layout .card-grid > * { min-width:0; }.fluent-layout table { max-width:none; }
.fluent-auth .container,.fluent-auth .panel { width:100%; max-width:640px; background:#fff; color:#242424; border-color:#e0e0e0; }.fluent-auth input[type=checkbox] { width:auto; min-height:auto; }

.sf-overview-bottom { display:grid; grid-template-columns:1.2fr 1fr; gap:32px; padding-top:16px; border-top:1px solid #ebebeb; }.sf-overview-actions h3 { margin-top:0; }.fluent-layout .server-overview .overview-stat { border-color:#e0e0e0; border-radius:6px; }.fluent-layout .server-overview .overview-links a { border-color:#c7c7c7; color:#0f6cbd; border-radius:5px; }
@media(max-width:800px) { .sf-overview-bottom { grid-template-columns:1fr; gap:20px; } }

.fluent-layout > header .btn,.fluent-layout > header button { background:#fff; color:#424242; border-color:#d1d1d1; }
.fluent-layout .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.fluent-layout .card-grid > .card:nth-child(2) { grid-column:1/-1; order:3; }
.fluent-layout .tbl-wrap table { min-width:600px; width:100%; }
.fluent-layout td code { white-space:nowrap; overflow-wrap:normal; }
.fluent-layout .admin-modal__panel { background:#fff; color:#242424; border:1px solid #d1d1d1; }
.fluent-layout .monitor-feature-card,.fluent-layout .monitor-permission-card,.fluent-layout .login-throttle-rule,.fluent-layout .login-throttle-example { background:#fff; color:#242424; border-color:#e0e0e0; }
.fluent-layout .monitor-permission-help,.fluent-layout .login-throttle-rule__label span,.fluent-layout .monitor-role-key { color:#616161; }
.fluent-layout .monitor-toggle-option__text,.fluent-layout .login-throttle-rule__label strong { color:#242424; }
@media(max-width:760px) {
    .fluent-layout .fluent-menu { width:auto!important; max-width:80px; flex:none; height:40px; }
    body.fluent-layout > header { position:relative; display:flex; flex-wrap:nowrap; gap:8px; padding:12px 12px 12px 96px; min-height:66px; }
    .fluent-layout > header h1 { font-size:16px; line-height:1.2; }
    .fluent-layout > header > div:first-child { min-width:0; }
    .fluent-layout > header .toolbar,.fluent-layout > header .actions,.fluent-layout > header .hdr-nav { display:flex; flex-direction:row; flex-wrap:nowrap; gap:0; width:auto; margin-left:auto; flex:0 0 auto; }
    .fluent-layout > header .toolbar > a,.fluent-layout > header .actions > a,.fluent-layout > header .hdr-nav > a { display:none; }
    .fluent-layout > header form { width:auto; margin:0; }
    .fluent-layout > header button { width:auto!important; padding:8px; white-space:nowrap; min-height:40px; }
    .fluent-layout .card-grid { grid-template-columns:1fr; }
    .fluent-layout .card-grid > .card:nth-child(2) { grid-column:auto; order:0; }
}

.fluent-layout .login-throttle-card { background:#fafafa; border-color:#e0e0e0; }
.fluent-layout .monitor-section__toggle .chev,.fluent-layout .monitor-role-toggle { background:#f5f5f5; color:#424242; border-color:#d1d1d1; }
.fluent-layout .history-row { background:#f5f5f5; }.fluent-layout .history-block h4,.fluent-layout .monitor-permission-card h4 { color:#424242; }
.fluent-layout .monitor-permission-option small { color:#616161; }
.fluent-layout .monitor-toggle-option__text { color:#424242; background:#fff; border-color:#c7c7c7; border-radius:5px; }
.fluent-layout .monitor-toggle-option__text::after { background:#e5e5e5; color:#424242; border-radius:4px; }
.fluent-layout .monitor-toggle-option input:checked + .monitor-toggle-option__text { color:#0f548c; background:#eff6fc; border-color:#0f6cbd; box-shadow:none; }
.fluent-layout .monitor-toggle-option input:checked + .monitor-toggle-option__text::after { background:#0f6cbd; color:#fff; }
.fluent-layout .monitor-toggle-option input:disabled + .monitor-toggle-option__text { opacity:.65; cursor:not-allowed; }
.fluent-layout .monitor-toggle-option input:focus-visible + .monitor-toggle-option__text { outline:2px solid #0f6cbd; }
.fluent-layout .support-alert { color:#107c10; background:#f1faf1; border-color:#bddfbd; }.fluent-layout .support-alert.error { color:#a4262c; background:#fff3f3; border-color:#ecc5c8; }
.fluent-layout .support-credential { color:#242424; background:#f5f5f5; border-color:#d1d1d1; }
.fluent-layout .support-status.active { color:#107c10; }.fluent-layout .support-status.inactive { color:#a4262c; }

.fluent-auth button.fluent-danger { background:#b10e1e; border-color:#b10e1e; color:#fff; }.fluent-auth button.fluent-danger:hover { background:#900b18; }
.fluent-auth button.captcha-refresh,.fluent-auth button.captcha-refresh:hover { color:#0f6cbd; background:#fff; border-color:#b8b8b8; }
.fluent-auth .captcha-refresh svg { color:#0f6cbd; stroke:#0f6cbd; width:18px; height:18px; opacity:1; }

.fluent-auth button.captcha-refresh { width:44px; min-width:44px; height:44px; padding:0; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.fluent-auth .captcha-refresh svg { flex-shrink:0; }