:root { --bg:#f5f7fb; --surface:#fff; --surface-2:#f8faff; --line:#e8ecf3; --ink:#172033; --muted:#8791a5; --muted-2:#aab2c2; --blue:#3e82f7; --purple:#9677ee; --mint:#2dbf99; --orange:#f3a44d; --shadow:0 14px 34px rgba(30,49,84,.055); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:13px 'DM Sans',sans-serif; letter-spacing:.005em; }
button, input, select { font:inherit; }
button { cursor:pointer; border:0; color:inherit; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:248px; flex:0 0 248px; background:#fff; border-right:1px solid var(--line); padding:0 14px 16px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; height:72px; flex:0 0 72px; margin:0 -14px; padding:0 20px; border-bottom:1px solid var(--line); }
.brand-mark { height:27px; width:30px; position:relative; transform:skew(-18deg); }
.brand-mark span { position:absolute; bottom:1px; width:7px; border-radius:5px; background:var(--blue); }
.brand-mark span:nth-child(1){height:13px;left:1px;background:#85b2fb}.brand-mark span:nth-child(2){height:21px;left:11px;background:#477ff2}.brand-mark span:nth-child(3){height:27px;left:21px;background:#264dbb}
.brand strong { display:block; font:700 18px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }.brand strong span { color:var(--blue); }.brand small { display:block; margin-top:2px; font-size:7px; color:#adb5c3; letter-spacing:.18em; font-weight:700; }
.workspace-switcher { margin:25px 6px 25px; border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; align-items:center; gap:9px; background:var(--surface-2); }.workspace-icon,.avatar { display:grid; place-items:center; background:#172948; color:#c8ddff; font-weight:700; border-radius:7px; }.workspace-icon { width:27px;height:27px;font-size:9px; }.workspace-copy { flex:1; }.workspace-copy small { display:block; font-size:8px; color:var(--muted); letter-spacing:.1em; }.workspace-copy strong { display:block; font-size:11px; margin-top:3px; }.chevron { width:14px; height:14px; fill:none; stroke:#9ba5b6; stroke-width:2; }
.nav-label { margin:0 12px 8px; color:#aeb6c5; font-size:9px; font-weight:700; letter-spacing:.12em; }.service-label { margin-top:23px; position:relative; }.plus-btn { float:right; background:none; color:#abb4c4; font-size:18px; line-height:10px; margin-top:-3px; }.nav-item { display:flex; align-items:center; width:100%; gap:12px; height:38px; padding:0 12px; margin:2px 0; border-radius:8px; background:none; color:#788398; font-size:12px; text-align:left; transition:.18s; }.nav-item:hover { background:#f5f8fd; color:#345da8; }.nav-item.active { background:#edf4ff; color:#2866d6; font-weight:700; }.nav-icon { display:grid; place-items:center; width:16px; height:17px; font-size:17px; line-height:1; color:#929db1; }.active .nav-icon { color:#3e82f7; }.key-icon { font-size:23px; transform:rotate(-35deg); }.nav-badge { margin-left:auto; background:#e5efff; color:#4d88ea; border-radius:20px; padding:2px 7px; font-size:10px; }.service-dot { width:9px;height:9px; border-radius:50%; margin:0 3px; }.headscale-dot { background:#4a81f1; }.wireguard-dot { background:#9c7ae9; }.l2tp-dot { background:#f0a14a; }.service-state { width:5px;height:5px; border-radius:50%; background:#4bc99c; margin-left:auto; }.muted-nav { color:#a7afbf; }.add-dot { border:1px dashed #b5bdcb; width:14px;height:14px; font-size:12px; display:grid;place-items:center; color:#a3acbc; }
.sidebar-bottom { margin-top:auto; }.usage-card { background:#f5f8ff; border:1px solid #e8effb; border-radius:10px; margin:24px 6px 17px; padding:13px; }.usage-title { display:flex; justify-content:space-between; color:#7282a2; font-size:8px; letter-spacing:.1em; font-weight:700; }.usage-title span:last-child { color:#477fe4; }.usage-track { height:5px; border-radius:6px; background:#dce7fa; margin:10px 0 8px; overflow:hidden; }.usage-track span { display:block; width:74%; height:100%; border-radius:6px; background:linear-gradient(90deg,#5598fc,#3e70e3); }.usage-card small { color:#8b98ae; font-size:9px; }.usage-card button { display:block; background:none; color:#3975db; font-size:10px; font-weight:700; padding:14px 0 0; }.usage-card button span { margin-left:4px; font-size:14px; }.profile-row { display:flex; align-items:center; gap:9px; padding:9px 9px 0; border-top:1px solid var(--line); }.avatar { width:30px;height:30px; font-size:9px; background:#dce8ff;color:#3976df; }.profile-copy { flex:1; }.profile-copy strong,.profile-copy small { display:block; }.profile-copy strong { font-size:10px; }.profile-copy small { color:#9aa4b4; font-size:9px; margin-top:3px; }.dots { color:#a8b0be; letter-spacing:1px; font-size:11px; }
.main-content { flex:1; min-width:0; }.topbar { height:72px; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 38px; justify-content:space-between; }.breadcrumbs { display:flex; gap:11px; align-items:center; color:#adb5c1; font-size:11px; }.breadcrumbs b { font-weight:400; color:#d1d7e0; }.breadcrumbs strong { color:#5e6a80; font-weight:600; }.top-actions { display:flex; align-items:center; gap:17px; }.system-pill { display:flex; gap:7px; align-items:center; font-size:10px; color:#8490a3; }.pulse-dot,.live-label i { width:7px;height:7px; border-radius:50%; background:#40c89f; box-shadow:0 0 0 4px #e8f8f3; }.icon-btn { background:none; color:#8e99ab; font-size:19px; width:24px;height:24px; position:relative; }.notification-btn i { position:absolute; width:5px;height:5px; border-radius:50%; background:#f36d74; right:1px; top:1px; border:1px solid #fff; }.top-avatar { width:30px;height:30px; display:grid;place-items:center; background:#152a4c; color:#b9d5ff; border-radius:50%; font-size:9px; font-weight:700; }.mobile-menu { display:none; background:none; font-size:22px; color:var(--muted); }
.content-wrap { max-width:1440px; margin:0 auto; padding:36px 38px 55px; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }.eyebrow { color:#a4adbc; letter-spacing:.16em; font-weight:700; font-size:9px; margin:0 0 9px; }.page-heading h1 { font:600 26px 'Space Grotesk',sans-serif; letter-spacing:-.04em; margin:0; }.page-heading h1 span { color:#f4af50; font-size:19px; vertical-align:2px; margin-left:4px; }.heading-subtitle { color:#929cad; font-size:12px; margin:9px 0 0; }.primary-btn { display:inline-flex; align-items:center; gap:9px; background:var(--blue); color:white; padding:11px 16px; border-radius:7px; font-size:11px; font-weight:700; box-shadow:0 6px 15px rgba(62,130,247,.19); transition:.18s; }.primary-btn:hover { transform:translateY(-1px); background:#3073e8; }.primary-btn span { font-size:17px; font-weight:400; line-height:10px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }.metric-card { background:var(--surface); border-radius:10px; padding:17px 18px 14px; border-top:2px solid var(--blue); box-shadow:var(--shadow); min-height:132px; }.accent-mint { border-color:var(--mint); }.accent-purple { border-color:var(--purple); }.accent-orange { border-color:var(--orange); }.metric-top,.metric-foot { display:flex; align-items:center; justify-content:space-between; }.metric-label { color:#9ca6b7; font-size:8px; letter-spacing:.11em; font-weight:700; }.trend { font-size:9px; font-weight:700; }.positive { color:#25ae87; }.neutral { color:#de9444; }.metric-value { margin:14px 0 12px; font:600 25px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }.metric-value em { color:#a0a9b7; font:500 13px 'DM Sans'; }.metric-foot { color:#a1aaba; font-size:9px; justify-content:flex-start; gap:8px; }.mini-bars { height:17px; display:flex; align-items:end; gap:2px; }.mini-bars i { display:block; width:3px; border-radius:2px; }.blue-bars i { background:#83b0fb; }.purple-bars i { background:#b8a5f4; }.mini-bars i:nth-child(1){height:5px}.mini-bars i:nth-child(2){height:8px}.mini-bars i:nth-child(3){height:7px}.mini-bars i:nth-child(4){height:12px}.mini-bars i:nth-child(5){height:9px}.mini-bars i:nth-child(6){height:14px}.mini-bars i:nth-child(7){height:11px}.mini-bars i:nth-child(8){height:17px}.metric-status { width:7px;height:7px;border-radius:50%; }.status-mint { background:#36c59d; box-shadow:0 0 0 3px #e7f8f3; }.status-orange { background:#f2a452; box-shadow:0 0 0 3px #fff2e2; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr); gap:16px; margin-bottom:16px; }.bottom-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr); gap:16px; }.panel { background:var(--surface); border-radius:10px; box-shadow:var(--shadow); padding:21px 22px; min-width:0; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; }.panel-heading h2 { margin:0; font:600 14px 'Space Grotesk',sans-serif; letter-spacing:-.02em; }.panel-heading p { margin:6px 0 0; color:#9ba5b5; font-size:10px; }.select-btn { color:#8190a7; background:#f7f9fc; border:1px solid #edf0f5; padding:7px 9px; border-radius:6px; font-size:9px; }.select-btn span { margin-left:8px; }.more-btn,.table-menu { background:none; color:#a7b0be; letter-spacing:2px; }.chart-summary { display:flex; align-items:flex-end; justify-content:space-between; margin-top:23px; }.chart-number { font:600 23px 'Space Grotesk'; letter-spacing:-.04em; }.chart-change { color:#25ae87; font-size:9px; margin-left:8px; font-weight:700; }.chart-summary small { display:block; color:#9aa4b2; font-size:9px; margin-top:3px; }.legend { display:flex; gap:15px; color:#8f9aad; font-size:9px; }.legend span { display:flex; align-items:center; gap:5px; }.legend i { width:6px;height:6px;border-radius:50%; }.legend-blue { background:#4284f7; }.legend-purple { background:#9d7def; }.chart-wrap { display:flex; height:187px; margin-top:10px; }.y-axis { width:31px; padding:0 8px 26px 0; display:flex; flex-direction:column; justify-content:space-between; color:#b2bac6; font-size:8px; text-align:right; }.chart { flex:1; position:relative; padding-bottom:24px; }.grid-line { position:absolute; left:0; right:0; border-top:1px dashed #edf0f5; }.l1{top:0}.l2{top:33%}.l3{top:66%}.l4{top:100%}.chart svg { position:absolute; inset:0 0 24px; width:100%; height:calc(100% - 24px); overflow:visible; }.area { stroke:none; }.line { fill:none; stroke-width:2.1; vector-effect:non-scaling-stroke; }.blue-line { stroke:#4488f8; }.purple-line { stroke:#a181ef; }.blue-area { fill:url(#areaBlue); }.purple-area { fill:url(#areaPurple); }.point { stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }.blue-point { fill:#4488f8; }.purple-point { fill:#a181ef; }.x-axis { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#afb7c4; font-size:8px; }
.services-panel { padding-bottom:15px; }.service-list { margin-top:20px; }.service-row { display:flex; align-items:center; padding:11px 0; border-bottom:1px solid #f0f2f6; gap:10px; }.service-logo { width:31px;height:31px;border-radius:8px;display:grid;place-items:center;font-size:20px; }.headscale-logo { color:#4081f3;background:#edf4ff; }.wg-logo { color:#916ee8;background:#f2edff; }.l2tp-logo { color:#e99d48;background:#fff4e7; font-size:14px; }.service-info { flex:1; min-width:0; }.service-info strong,.service-info small { display:block; }.service-info strong { font-size:11px; }.service-info small { color:#9aa4b4; font-size:9px; margin-top:4px; white-space:nowrap; }.online-tag,.warning-tag { padding:4px 7px; border-radius:4px; font-size:8px; font-weight:700; }.online-tag { color:#29aa87;background:#eaf8f3; }.warning-tag { color:#df9443;background:#fff3e4; }.row-arrow { color:#aab2c0; font-size:14px; margin-left:2px; }.add-service-btn { background:none; color:#407de4; font-weight:700; font-size:10px; padding:15px 0 0; }.add-service-btn span { font-size:16px; margin-right:5px; vertical-align:-1px; }
.secrets-panel { padding-bottom:10px; }.link-btn,.activity-link { background:none; color:#4680e8; font-size:10px; font-weight:700; }.link-btn span,.activity-link span { font-size:16px; margin-left:4px; vertical-align:-1px; }.table-wrap { overflow-x:auto; margin-top:18px; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th { color:#aeb6c3; letter-spacing:.11em; font-size:8px; font-weight:700; text-align:left; padding:0 10px 11px; border-bottom:1px solid #edf0f4; } th:first-child,td:first-child { padding-left:0; } td { color:#8a95a6; font-size:9px; padding:10px; border-bottom:1px solid #f0f2f6; } tr:last-child td { border-bottom:0; }.client-cell { display:flex; align-items:center; gap:8px; }.client-avatar { width:27px;height:27px; display:grid;place-items:center; color:#fff; border-radius:7px; font-size:8px; font-weight:700; }.client-avatar.orange { background:#efaa64; }.client-avatar.cyan { background:#51b7d2; }.client-avatar.pink { background:#dd7598; }.client-avatar.purple { background:#9979dd; }.client-cell strong,.client-cell small { display:block; }.client-cell strong { color:#425069; font-size:10px; }.client-cell small { color:#a3adbb; margin-top:3px; font-size:8px; }.service-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 7px; background:#f8f9fc; border-radius:5px; font-size:8px; font-weight:600; }.service-chip i { width:5px;height:5px;border-radius:50%; }.wg-chip i { background:#9675e9; }.hs-chip i { background:#4285f5; }.l2tp-chip i { background:#eaa04e; }.active-tag,.expired-tag { font-size:9px; display:inline-flex; align-items:center; gap:5px; }.active-tag { color:#28aa87; }.expired-tag { color:#d89296; }.active-tag i,.expired-tag i { width:5px;height:5px;border-radius:50%; }.active-tag i { background:#32c29b; }.expired-tag i { background:#e28790; }
.activity-panel { padding-bottom:16px; }.live-label { display:flex; align-items:center; gap:7px; color:#3ab693; font-size:8px; font-weight:700; letter-spacing:.09em; }.activity-list { margin-top:20px; }.activity-item { display:flex; gap:10px; margin-bottom:17px; }.activity-icon { width:27px;height:27px;border-radius:7px; display:grid;place-items:center; flex:0 0 auto; font-weight:700; }.blue-bg { background:#eaf2ff;color:#4887f6; }.purple-bg { background:#f2edff;color:#9a7bed; }.orange-bg { background:#fff2e2;color:#ed9f4b; }.green-bg { background:#e8f8f3;color:#32bd97; }.activity-item strong { font-size:10px; }.activity-item p { margin:3px 0; color:#7f8a9d; font-size:9px; }.activity-item small { color:#abb3bf; font-size:8px; }.activity-link { border-top:1px solid #f0f2f6; padding:15px 0 0; width:100%; text-align:left; }
#dashboardView:not(.visible) { display:none; }.headscale-view { display:none; }.headscale-view.visible { display:block; }.headscale-heading { align-items:center; }.headscale-heading h1 { display:flex; align-items:center; gap:10px; }.service-live-dot { width:8px; height:8px; border-radius:50%; background:#35c39b; box-shadow:0 0 0 4px #e7f8f2; display:inline-block; }.heading-actions { display:flex; align-items:center; gap:9px; }.secondary-outline-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid #e2e8f1; background:#fff; color:#718099; border-radius:7px; padding:10px 13px; font-size:10px; font-weight:700; }.secondary-outline-btn:hover { border-color:#bcd2f8; color:#3776df; }.control-plane-banner { display:flex; align-items:center; gap:13px; padding:14px 17px; margin-bottom:16px; }.control-icon { display:grid; place-items:center; width:35px; height:35px; background:#edf4ff; color:#4283f5; border-radius:9px; font-size:21px; }.control-copy { flex:1; }.control-copy strong,.control-copy small { display:block; }.control-copy strong { margin-top:4px; font:600 13px 'Space Grotesk'; }.control-copy small { color:#9ba6b6; font-size:9px; margin-top:4px; }.control-plane-banner .online-tag { margin-right:7px; }.online-tag i,.warning-tag i { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; margin-right:4px; }.headscale-metrics { margin-bottom:16px; }.status-blue { background:#4b87f7; box-shadow:0 0 0 3px #eaf2ff; }.status-purple { background:#9c7cea; box-shadow:0 0 0 3px #f2edff; }.headscale-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:16px; }.machines-panel { padding-bottom:14px; }.table-tools { display:flex; align-items:center; gap:8px; }.search-box { height:29px; width:155px; border:1px solid #edf0f5; border-radius:6px; display:flex; align-items:center; gap:5px; padding:0 8px; background:#fbfcfe; }.search-box span { color:#a0aabc; font-size:16px; line-height:1; }.search-box input { border:0; outline:0; width:100%; color:#657188; font-size:9px; background:transparent; }.headscale-tabs { display:flex; gap:20px; margin-top:24px; border-bottom:1px solid #edf0f4; }.headscale-tab { background:none; color:#9da7b7; font-size:10px; padding:0 0 10px; border-bottom:2px solid transparent; }.headscale-tab b { margin-left:4px; background:#f0f3f8; color:#8a96a8; border-radius:10px; padding:2px 5px; font-size:8px; }.headscale-tab.active { color:#3476e4; font-weight:700; border-color:#4487f7; }.headscale-tab.active b { background:#e8f1ff; color:#4b85e8; }.machine-table-wrap { overflow-x:auto; }.machine-table { margin-top:8px; }.machine-table th { padding-top:8px; }.machine-table td { padding-top:11px; padding-bottom:11px; }.machine-cell { display:flex; align-items:center; gap:8px; }.machine-avatar { width:27px; height:27px; border-radius:7px; display:grid; place-items:center; font-size:14px; font-weight:700; }.machine-avatar.laptop { background:#eaf2ff; color:#4a87f4; }.machine-avatar.phone { background:#e7f8f3; color:#36b892; }.machine-avatar.server { background:#f2edff; color:#9b7bea; }.machine-avatar.home { background:#fff3e5; color:#e8a053; }.machine-cell strong,.machine-cell small { display:block; }.machine-cell strong { color:#425069; font-size:10px; }.machine-cell small { color:#a3adbb; margin-top:3px; font-size:8px; }.user-cell { color:#768398; font-size:9px; }.user-dot { width:6px; height:6px; display:inline-block; border-radius:50%; margin-right:5px; }.user-dot.blue { background:#4b88f5; }.user-dot.purple { background:#9b7bea; }.user-dot.green { background:#35bd96; }.machine-table code { color:#6b7890; font:9px 'DM Sans'; background:#f7f9fc; border-radius:4px; padding:4px 5px; }.table-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #f0f2f6; padding-top:14px; color:#a1abba; font-size:9px; }.headscale-side-column { display:flex; flex-direction:column; gap:16px; }.users-panel,.routes-panel { padding-bottom:15px; }.hs-user-list { margin-top:17px; }.hs-user-row { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid #f0f2f6; }.hs-user-row:last-child { border-bottom:0; }.user-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; color:#fff; font-size:8px; font-weight:700; }.blue-avatar { background:#4a86f2; }.purple-avatar { background:#9a78e7; }.green-avatar { background:#32b991; }.orange-avatar { background:#efa253; }.hs-user-row div { flex:1; }.hs-user-row strong,.hs-user-row small { display:block; }.hs-user-row strong { color:#4a586d; font-size:10px; }.hs-user-row small { color:#a1abba; font-size:9px; margin-top:3px; }.user-online,.user-offline { font-size:9px; }.user-online { color:#32bd97; }.user-offline { color:#d4d9e1; }.route-list { margin-top:16px; }.route-row { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #f0f2f6; }.route-row:last-child { border-bottom:0; }.route-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:6px; background:#edf4ff; color:#4383f4; font-size:14px; }.route-row div { flex:1; }.route-row strong,.route-row small { display:block; }.route-row strong { color:#59677c; font:10px 'DM Sans'; }.route-row small { color:#a1abba; font-size:8px; margin-top:3px; }.route-state { font-size:8px; font-weight:700; }.route-state.approved { color:#2aae87; }.route-state.pending { color:#df9847; }.form-hint { display:flex; align-items:flex-start; gap:7px; color:#8995a8; background:#f5f8fd; border:1px solid #e9eff8; border-radius:7px; padding:9px; font-size:9px; line-height:1.5; }.form-hint span { color:#4785f1; font-size:14px; }.form-hint code { color:#5274ad; font-size:8px; }
.modal-backdrop { visibility:hidden; opacity:0; position:fixed; inset:0; background:rgba(17,28,49,.34); display:grid; place-items:center; z-index:10; transition:.2s; }.modal-backdrop.open { visibility:visible;opacity:1; }.modal { background:#fff; width:min(410px,calc(100% - 30px)); border-radius:14px; box-shadow:0 22px 70px rgba(18,33,62,.22); padding:26px; position:relative; transform:translateY(10px); transition:.2s; }.open .modal { transform:translateY(0); }.modal-close { position:absolute; right:18px; top:15px; width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:none; color:#a3acba; font-size:22px; line-height:1; transition:color .2s ease, background .2s ease, transform .2s ease; }.modal-close:hover { color:#b17a08; background:#fff0bd; transform:rotate(90deg) scale(1.04); }.modal-close:focus-visible { outline:2px solid #e3ad25; outline-offset:2px; }.modal-icon { width:38px;height:38px; display:grid;place-items:center; background:#edf4ff; color:#3e82f7; border-radius:10px; font-size:17px; margin-bottom:19px; }.modal h2 { margin:0; font:600 21px 'Space Grotesk'; letter-spacing:-.04em; }.modal-subtitle { margin:7px 0 23px; color:#929cad; font-size:11px; line-height:1.5; }.modal label { display:block; color:#657188; font-size:10px; font-weight:700; margin-bottom:14px; }.modal input,.modal select { display:block; width:100%; margin-top:7px; border:1px solid #e5eaf2; border-radius:7px; padding:10px 11px; outline:none; color:#405069; background:#fbfcfe; }.modal input:focus,.modal select:focus { border-color:#83adf6; box-shadow:0 0 0 3px #edf4ff; }.form-actions { border-top:1px solid #eef1f5; margin-top:24px; padding-top:17px; display:flex; justify-content:flex-end; gap:9px; }.secondary-btn { background:#f2f5f9; color:#7e899b; border-radius:7px; padding:11px 14px; font-size:11px; font-weight:700; }.toast { position:fixed; right:25px; bottom:25px; display:flex; align-items:center; gap:10px; background:#172b4b;color:#fff; padding:12px 15px; border-radius:9px; box-shadow:0 10px 30px rgba(20,41,75,.22); transform:translateY(20px); opacity:0; pointer-events:none; transition:.25s; z-index:20; }.toast.show { transform:translateY(0);opacity:1; }.toast > span { background:#3dc39c; width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px; }.toast strong,.toast small { display:block; }.toast strong { font-size:10px; }.toast small { margin-top:3px; color:#b9c9df; font-size:9px; }
body.dark { --bg:#101827; --surface:#172235; --surface-2:#1c2940; --line:#27364d; --ink:#eef4ff; --muted:#a2afc4; --shadow:0 14px 34px rgba(0,0,0,.12); }.dark .sidebar,.dark .topbar { background:#141f31; }.dark .workspace-switcher,.dark .select-btn { background:#1c2940; border-color:#2a3a53; }.dark .nav-item:hover { background:#1e2d45; }.dark .nav-item.active { background:#1d345d; }.dark .usage-card { background:#1a2a43; border-color:#294163; }.dark .panel,.dark .metric-card,.dark .modal { background:#172235; }.dark .page-heading h1,.dark .panel-heading h2,.dark .metric-value,.dark .client-cell strong,.dark .service-info strong,.dark .activity-item strong { color:#eef4ff; }.dark td,.dark .activity-item p { color:#aab6ca; }.dark .service-chip,.dark .modal input,.dark .modal select { background:#1c2940; border-color:#30415d; }.dark .modal-subtitle,.dark .heading-subtitle,.dark .panel-heading p { color:#9baac1; }.dark .form-actions { border-color:#2b3a51; }
@media (max-width:1100px) { .content-wrap { padding-left:25px;padding-right:25px; }.topbar { padding:0 25px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.bottom-grid,.headscale-layout { grid-template-columns:1fr; }.activity-panel { min-height:0; }.activity-list { display:grid;grid-template-columns:1fr 1fr;column-gap:25px; } }
@media (max-width:720px) { .sidebar { position:fixed; left:-260px; top:0; bottom:0; z-index:5; transition:.25s; box-shadow:10px 0 30px rgba(30,49,84,.1); }.sidebar.open { left:0; }.topbar { height:60px;padding:0 18px; }.mobile-menu { display:block; }.breadcrumbs { margin-left:8px; }.system-pill { display:none; }.top-actions { gap:9px; }.content-wrap { padding:25px 16px 40px; }.page-heading { display:block; }.page-heading h1 { font-size:23px; }.primary-btn { margin-top:20px; }.heading-actions { margin-top:20px; }.heading-actions .primary-btn { margin-top:0; }.metric-grid { gap:10px; }.metric-card { padding:14px; min-height:124px; }.metric-value { font-size:22px; }.panel { padding:18px 15px; }.chart-summary { display:block; }.legend { margin-top:13px; }.service-row .online-tag,.service-row .warning-tag { display:none; }.activity-list { display:block; }.x-axis span:nth-child(even) { display:none; }.top-avatar { display:none; }.control-plane-banner { align-items:flex-start; flex-wrap:wrap; }.control-plane-banner .online-tag { margin-left:48px; margin-top:-23px; }.table-tools { margin-top:15px; }.search-box { width:135px; }.headscale-heading .heading-actions { display:flex; }.headscale-heading .secondary-outline-btn { padding:10px; }.headscale-heading .primary-btn { padding:10px; }.machine-table { min-width:650px; } }
@media (max-width:390px) { .metric-grid { grid-template-columns:1fr; }.metric-card { min-height:115px; }.page-heading h1 { font-size:21px; }.select-btn { font-size:8px; }.panel-heading h2 { font-size:13px; } }

/* Readability pass: dashboard content is intentionally comfortable to scan. */
body { font-size:14px; }
.breadcrumbs { font-size:13px; }
.system-pill { font-size:12px; }
.nav-item { height:42px; font-size:13px; }
.nav-label { font-size:10px; }
.workspace-copy strong { font-size:12px; }
.workspace-copy small { font-size:9px; }
.profile-copy strong { font-size:11px; }
.profile-copy small { font-size:10px; }
.page-heading h1 { font-size:29px; }
.heading-subtitle { font-size:13px; }
.eyebrow { font-size:10px; }
.primary-btn { font-size:12px; padding:12px 17px; }
.metric-label { font-size:10px; }
.trend { font-size:11px; }
.metric-value { font-size:28px; }
.metric-value em { font-size:14px; }
.metric-foot { font-size:11px; }
.panel-heading h2 { font-size:16px; }
.panel-heading p { font-size:12px; }
.select-btn,.secondary-outline-btn { font-size:11px; }
.chart-number { font-size:25px; }
.chart-summary small { font-size:11px; }
.legend { font-size:11px; }
.x-axis,.y-axis { font-size:10px; }
.service-info strong { font-size:12px; }
.service-info small { font-size:10px; }
.online-tag,.warning-tag { font-size:10px; }
.add-service-btn,.link-btn,.activity-link { font-size:11px; }
th { font-size:9px; }
td { font-size:11px; }
.client-cell strong,.machine-cell strong { font-size:11px; }
.client-cell small,.machine-cell small { font-size:9px; }
.service-chip { font-size:10px; }
.active-tag,.expired-tag { font-size:10px; }
.activity-item strong { font-size:11px; }
.activity-item p { font-size:10px; }
.activity-item small { font-size:9px; }
.control-copy strong { font-size:15px; }
.control-copy small { font-size:11px; }
.table-footer { font-size:11px; }
.user-cell { font-size:11px; }
.machine-table code { font-size:10px; }
.hs-user-row strong { font-size:11px; }
.hs-user-row small,.route-row small { font-size:10px; }
.route-row strong { font-size:11px; }
.route-state { font-size:10px; }
.hs-empty-row td { padding:28px 12px; text-align:center; color:#9ba6b6; font-size:11px; }
.hs-empty-side { padding:18px 4px 8px; color:#9ba6b6; font-size:11px; text-align:center; }
body.dark .hs-empty-row td,body.dark .hs-empty-side { color:#918d89; }
.search-box input { font-size:11px; }
.headscale-tab { font-size:11px; }
.form-hint { font-size:10px; }

@media (max-width:720px) {
  .page-heading h1 { font-size:25px; }
  .heading-subtitle { font-size:12px; line-height:1.45; }
  .metric-value { font-size:25px; }
  .panel-heading h2 { font-size:15px; }
  .panel-heading p { font-size:11px; }
  .metric-label { font-size:9px; }
  .system-pill { font-size:11px; }
}

@media (max-width:390px) {
  .page-heading h1 { font-size:23px; }
  .metric-value { font-size:24px; }
}

/* Larger UI scale for desktop readability. */
body { font-size:16px; }
.sidebar { width:270px; flex-basis:270px; }
.nav-item { height:46px; font-size:15px; }
.nav-label { font-size:11px; }
.workspace-copy strong { font-size:14px; }
.workspace-copy small { font-size:10px; }
.breadcrumbs { font-size:14px; }
.system-pill { font-size:13px; }
.content-wrap { padding-top:42px; }
.page-heading h1 { font-size:34px; }
.heading-subtitle { font-size:15px; }
.eyebrow { font-size:11px; }
.primary-btn { font-size:14px; padding:14px 19px; }
.secondary-outline-btn { font-size:13px; padding:12px 15px; }
.metric-card { padding:20px 21px 17px; min-height:148px; }
.metric-label { font-size:11px; }
.trend { font-size:12px; }
.metric-value { font-size:33px; margin:17px 0 14px; }
.metric-value em { font-size:16px; }
.metric-foot { font-size:13px; }
.panel { padding:25px 26px; }
.panel-heading h2 { font-size:19px; }
.panel-heading p { font-size:13px; }
.select-btn { font-size:12px; padding:9px 11px; }
.chart-number { font-size:29px; }
.chart-summary small,.legend { font-size:13px; }
.x-axis,.y-axis { font-size:11px; }
.service-info strong { font-size:14px; }
.service-info small { font-size:12px; }
.online-tag,.warning-tag { font-size:11px; padding:5px 8px; }
.add-service-btn,.link-btn,.activity-link { font-size:13px; }
th { font-size:10px; }
td { font-size:13px; padding-top:13px; padding-bottom:13px; }
.client-cell strong,.machine-cell strong { font-size:13px; }
.client-cell small,.machine-cell small { font-size:11px; }
.service-chip { font-size:12px; padding:6px 8px; }
.active-tag,.expired-tag { font-size:12px; }
.activity-item strong { font-size:13px; }
.activity-item p { font-size:12px; }
.activity-item small { font-size:10px; }
.control-copy strong { font-size:18px; }
.control-copy small { font-size:13px; }
.table-footer { font-size:13px; }
.user-cell { font-size:13px; }
.machine-table code { font-size:12px; }
.hs-user-row strong { font-size:13px; }
.hs-user-row small,.route-row small { font-size:11px; }
.route-row strong { font-size:13px; }
.route-state { font-size:11px; }
.search-box { height:36px; width:190px; }
.search-box input { font-size:13px; }
.headscale-tab { font-size:13px; padding-bottom:13px; }
.form-hint { font-size:12px; }

@media (max-width:1100px) {
  .sidebar { width:270px; flex-basis:270px; }
}

@media (max-width:720px) {
  .sidebar { width:285px; left:-295px; }
  .page-heading h1 { font-size:29px; }
  .heading-subtitle { font-size:14px; }
  .metric-card { min-height:140px; }
  .metric-value { font-size:29px; }
  .panel-heading h2 { font-size:18px; }
  .panel-heading p { font-size:12px; }
  .metric-label { font-size:10px; }
}

@media (max-width:390px) {
  .page-heading h1 { font-size:27px; }
  .metric-value { font-size:27px; }
}

/* Authentication screen */
#appShell { display:none; }
#appShell.authenticated { display:flex; }
.login-screen { min-height:100vh; display:grid; grid-template-columns:minmax(390px, .92fr) minmax(440px, 1.08fr); background:#f7f9fd; overflow:hidden; }
.login-visual { position:relative; display:flex; flex-direction:column; padding:45px 7vw 42px; color:#fff; background:linear-gradient(145deg,#122747 0%,#172e56 54%,#244e9b 100%); overflow:hidden; }
.login-visual::before { content:""; position:absolute; width:650px; height:650px; border:1px solid rgba(133,181,255,.15); border-radius:50%; top:14%; left:-34%; box-shadow:0 0 0 80px rgba(121,169,250,.035),0 0 0 160px rgba(121,169,250,.025); }
.login-visual::after { content:""; position:absolute; width:360px; height:360px; border:1px solid rgba(132,178,255,.12); border-radius:50%; right:-160px; bottom:-90px; }
.login-brand { position:relative; z-index:1; padding:0; }.login-brand strong { font-size:21px; }.login-brand small { color:#a9c6ef; }.login-visual-copy { position:relative; z-index:1; max-width:510px; margin:auto 0; padding:60px 0 75px; }.login-visual-copy .eyebrow { color:#9dbcf0; }.login-visual-copy h1 { margin:0; font:600 clamp(34px,4vw,56px) 'Space Grotesk',sans-serif; line-height:1.08; letter-spacing:-.055em; }.login-visual-copy h1 span { color:#75a8ff; }.login-visual-copy > p:last-child { max-width:410px; margin:23px 0 0; color:#acc1e3; font-size:15px; line-height:1.65; }.login-visual-footer { position:relative; z-index:1; display:flex; gap:30px; border-top:1px solid rgba(196,218,251,.16); padding-top:22px; }.login-mini-stat { display:flex; align-items:center; gap:9px; }.stat-symbol { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:#bcd8ff; background:rgba(83,144,242,.2); font-size:17px; }.mint-symbol { color:#6bd8b4; background:rgba(54,198,157,.15); }.purple-symbol { color:#c2a9ff; background:rgba(156,124,234,.15); }.login-mini-stat strong,.login-mini-stat small { display:block; }.login-mini-stat strong { font:600 16px 'Space Grotesk'; }.login-mini-stat small { color:#94acd1; font-size:10px; margin-top:3px; white-space:nowrap; }.login-orbit { position:absolute; border-radius:50%; pointer-events:none; }.orbit-one { width:7px;height:7px; background:#62a1ff; top:25%; left:65%; box-shadow:0 0 0 5px rgba(98,161,255,.14); }.orbit-two { width:5px;height:5px; background:#8fd5ff; top:72%; left:24%; box-shadow:0 0 0 4px rgba(143,213,255,.12); }
.login-form-side { display:flex; flex-direction:column; justify-content:center; padding:50px 9vw 26px; position:relative; }.login-form-wrap { width:min(390px,100%); margin:auto; }.login-mobile-brand { display:none; }.login-form-heading { margin-bottom:32px; }.login-form-heading .eyebrow { color:#6d91db; }.login-form-heading h2 { margin:0; font:600 32px 'Space Grotesk',sans-serif; letter-spacing:-.05em; }.login-form-heading > p:last-child { color:#8a96aa; font-size:14px; margin:10px 0 0; line-height:1.5; }.login-form label { display:block; color:#52617a; font-size:12px; font-weight:700; margin-bottom:20px; }.login-form input { display:block; width:100%; border:1px solid #dfe6f0; border-radius:8px; background:#fff; outline:none; padding:14px 14px; margin-top:8px; color:#27364e; font-size:14px; transition:.18s; }.login-form input:focus { border-color:#72a3f6; box-shadow:0 0 0 4px #eaf2ff; }.password-field { position:relative; }.password-field input { padding-right:60px; }.password-field button { position:absolute; right:12px; bottom:12px; background:none; color:#4682e5; font-size:11px; font-weight:700; }.login-options { display:flex; justify-content:space-between; align-items:center; margin:-3px 0 23px; }.check-label { display:flex !important; align-items:center; gap:6px; color:#8190a4 !important; font-size:11px !important; font-weight:500 !important; margin:0 !important; }.check-label input { appearance:none; width:15px; height:15px; border:1px solid #cbd6e5; border-radius:4px; padding:0; margin:0; display:grid; place-items:center; }.check-label input:checked { background:#4485f4; border-color:#4485f4; }.check-label input:checked::after { content:"✓"; color:white; font-size:10px; }.forgot-btn,.login-help button { background:none; color:#437fe2; font-size:11px; font-weight:700; padding:0; }.login-submit { width:100%; border-radius:8px; background:#3479ed; color:#fff; font-size:14px; font-weight:700; padding:14px; box-shadow:0 8px 17px rgba(52,121,237,.18); transition:.18s; }.login-submit:hover { background:#286bdb; transform:translateY(-1px); }.login-submit span { float:right; font-size:18px; line-height:14px; }.login-divider { display:flex; align-items:center; gap:12px; color:#abb4c3; font-size:10px; margin:27px 0 17px; }.login-divider::before,.login-divider::after { content:""; height:1px; flex:1; background:#e4e9f1; }.sso-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; background:#fff; border:1px solid #dfe6f0; border-radius:8px; color:#596981; font-size:12px; font-weight:700; }.sso-btn:hover { border-color:#aac7f6; background:#fbfdff; }.sso-icon { display:grid; place-items:center; width:19px;height:19px; border-radius:5px; background:#edf3ff; color:#4581ed; font-size:11px; font-weight:800; }.login-help { text-align:center; color:#9aa5b5; font-size:11px; margin:25px 0 0; }.login-server-status { display:flex; align-items:center; gap:8px; border:1px solid #e2eaf4; border-radius:8px; color:#8090a6; background:#fbfcfe; padding:11px 12px; margin-top:31px; font-size:10px; }.login-server-status .pulse-dot { width:6px; height:6px; box-shadow:none; }.status-url { margin-left:auto; color:#aab4c2; font-size:9px; }.login-legal { display:flex; gap:19px; justify-content:flex-end; color:#a4aebc; font-size:10px; }.login-legal span:not(:first-child) { color:#8e9bb0; }
body.dark .login-screen { background:#101827; }.dark .login-form-side { color:#eef4ff; }.dark .login-form-heading h2 { color:#eef4ff; }.dark .login-form-heading > p:last-child { color:#aab7cb; }.dark .login-form label { color:#bdc9db; }.dark .login-form input,.dark .sso-btn,.dark .login-server-status { background:#172235; border-color:#30415d; color:#e8f0fc; }.dark .login-divider { color:#91a0b7; }.dark .login-divider::before,.dark .login-divider::after { background:#2d3d55; }.dark .sso-btn { color:#d4e0f2; }.dark .login-server-status { color:#a6b5c9; }
@media (max-width:820px) { .login-screen { grid-template-columns:1fr; min-height:100svh; }.login-visual { display:none; }.login-form-side { padding:35px 25px 22px; }.login-form-wrap { max-width:420px; }.login-mobile-brand { display:flex; align-items:center; gap:9px; margin-bottom:58px; }.login-mobile-brand .brand-mark { height:24px; width:27px; }.login-mobile-brand .brand-mark span { width:6px; }.login-mobile-brand .brand-mark span:nth-child(1){height:12px}.login-mobile-brand .brand-mark span:nth-child(2){height:19px;left:10px}.login-mobile-brand .brand-mark span:nth-child(3){height:24px;left:20px}.login-mobile-brand strong { font:700 20px 'Space Grotesk'; letter-spacing:-.04em; }.login-mobile-brand strong span { color:var(--blue); }.login-legal { margin-top:32px; justify-content:center; } }
.login-screen.hidden { display:none; }
.login-notice { min-height:16px; color:#df914a; font-size:11px; margin:12px 0 -8px; text-align:center; }
.login-notice.error { color:#c95d48; }

/* vkreatif.in login: one focused form, centered on the page. */
.login-screen { display:flex; align-items:center; justify-content:center; position:relative; background:radial-gradient(circle at 16% 12%, #e9f2ff 0, transparent 29%),radial-gradient(circle at 88% 86%, #f4eefe 0, transparent 27%),#f7f9fd; }
.login-visual { display:none; }
.login-orbit { display:none; }
.login-form-side { min-height:100vh; width:100%; padding:46px 24px 80px; align-items:center; justify-content:center; }
.login-form-side::before,.login-form-side::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.login-form-side::before { width:480px; height:480px; border:1px solid rgba(80,135,235,.11); top:-180px; left:50%; transform:translateX(-50%); box-shadow:0 0 0 45px rgba(80,135,235,.025),0 0 0 90px rgba(80,135,235,.018); }
.login-form-side::after { width:250px; height:250px; background:rgba(223,211,255,.22); bottom:-110px; right:-75px; filter:blur(2px); }
.login-form-wrap { width:min(450px,100%); margin:0; padding:40px 43px 31px; position:relative; z-index:1; background:rgba(255,255,255,.94); border:1px solid rgba(222,230,241,.95); border-radius:22px; box-shadow:0 25px 75px rgba(49,77,125,.12),0 4px 15px rgba(49,77,125,.04); }
.login-wordmark { display:block; width:220px; height:auto; margin:0 auto 35px; }
.brand-divider { width:calc(100% + 36px); height:2px; margin:-7px -18px 27px; background:#e7b338; opacity:1; clip-path:polygon(0 50%, 16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%); transform:scaleY(.5); transform-origin:center; }
.login-form-heading { text-align:center; margin-bottom:30px; }.login-form-heading h2 { font-size:30px; }.login-form-heading > p:last-child { font-size:13px; }
.login-form-heading .admin-label { color:#b78617; font-size:12px; letter-spacing:.18em; margin:0 0 8px; }.login-form-heading .powered-by { color:#8a96aa; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; margin:0 0 9px; letter-spacing:.01em; }.login-form-heading .brand-title { margin:0; color:#6d7d95; font-family:'Azonix','Space Grotesk',sans-serif; font-size:21px; font-weight:700; letter-spacing:.1em; line-height:1.15; white-space:nowrap; }.login-form-heading .brand-title + p { color:#8a96aa; font-size:13px; margin-top:10px; }
.login-form label { font-size:13px; }.login-form input { font-size:15px; padding:15px; }.login-submit { padding:15px; font-size:15px; }.sso-btn { font-size:13px; padding:13px; }.login-options { margin-top:0; }.login-server-status { margin-top:27px; }.login-legal { position:absolute; bottom:23px; left:0; right:0; justify-content:center; }
.login-form .check-label { display:flex !important; align-items:center; width:auto; }.login-form .check-label input { width:16px; min-width:16px; max-width:16px; height:16px; min-height:16px; padding:0; margin:0; flex:0 0 16px; }
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #fff inset; -webkit-text-fill-color:#27364e; transition:background-color 9999s ease-in-out 0s; }
.dark .login-screen { background:radial-gradient(circle at 16% 12%, #192e52 0, transparent 29%),radial-gradient(circle at 88% 86%, #2b2447 0, transparent 27%),#101827; }.dark .login-form-wrap { background:rgba(23,34,53,.96); border-color:#30415d; box-shadow:0 25px 75px rgba(0,0,0,.22); }
@media (max-width:520px) { .login-form-side { padding:25px 15px 70px; }.login-form-wrap { padding:33px 23px 26px; border-radius:18px; }.login-wordmark { width:200px; margin:0 auto 30px; }.brand-divider { width:calc(100% + 32px); margin-left:-16px; margin-right:-16px; }.login-form-heading h2 { font-size:27px; }.login-form-heading > p:last-child { font-size:12px; }.login-form input { font-size:14px; }.login-options { gap:10px; }.status-url { display:none; } }

/* Final control alignment for login controls. */
.password-field button { top:50%; bottom:auto; transform:translateY(-50%); right:14px; }
.login-submit { position:relative; display:flex; align-items:center; justify-content:center; }
.login-submit > .login-arrow { position:absolute; right:17px; top:50%; display:inline-flex; align-items:center; width:20px; height:20px; color:currentColor; transform:translateY(-50%); }
.login-submit > .login-arrow::before { content:""; width:14px; height:2px; border-radius:2px; background:currentColor; }
.login-submit > .login-arrow::after { content:""; width:7px; height:7px; margin-left:-5px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.google-icon { display:grid; place-items:center; width:19px; height:19px; }
.google-icon svg { display:block; width:18px; height:18px; }
.login-form-wrap > .login-legal { position:static; margin-top:25px; justify-content:center; }
.footer-divider { width:100%; height:1px; margin-top:22px; background:#e6ebf2; }
.profile-logout { background:none; color:#9aa6b8; font-size:21px; line-height:1; padding:5px; border-radius:6px; }.profile-logout:hover { color:#d8952e; background:#fff7e7; }
.sidebar-bottom { position:relative; }
.sidebar-bottom { position:absolute; left:14px; right:14px; bottom:0; margin-top:0; padding-bottom:0; }
.side-nav { margin-top:18px; }
.headscale-heading { min-height:58px; align-items:center; margin-bottom:16px; }
.headscale-action-card { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,247,.82); box-shadow:0 8px 22px rgba(145,108,25,.055); }
.headscale-action-card .primary-btn,.headscale-action-card .secondary-outline-btn { margin:0; }
body.dark .headscale-action-card { background:rgba(40,39,40,.86); border-color:#3b393b; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.profile-row { cursor:pointer; height:54px; min-height:54px; flex:0 0 54px; box-sizing:border-box; border-radius:9px; padding:9px; margin:0 6px; transition:background .18s ease; }
.profile-row:hover,.profile-row:focus-visible { background:#fff8e7; outline:none; }
.profile-popover { position:absolute; left:6px; right:6px; bottom:calc(100% + 10px); padding:13px; border:1px solid #ead9ab; border-radius:11px; background:rgba(255,253,247,.96); box-shadow:0 16px 34px rgba(91,70,26,.16); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(7px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:8; }
.profile-popover.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.profile-popover-copy strong,.profile-popover-copy small { display:block; }
.profile-popover-copy strong { color:#1d2d4d; font-size:12px; }
.profile-popover-copy small { color:#9b8e76; font-size:10px; margin-top:4px; }
.profile-popover-logout { width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:9px 0 0; border-top:1px solid #eee2c5; background:none; color:#b27b0a; font-size:11px; font-weight:700; text-align:left; }
.profile-popover-logout span { font-size:16px; }
.profile-popover-logout { border-radius:7px; padding:9px 8px; margin-top:10px; border-top:0; transition:background .18s ease, color .18s ease, transform .18s ease; }
.profile-popover-logout:hover { background:#fff0c8; color:#8f6200; }
.profile-popover-logout:active { transform:scale(.98); }
body.dark .profile-row:hover,body.dark .profile-row:focus-visible { background:#3b3322; }
body.dark .profile-popover { background:rgba(40,39,40,.97); border-color:#5a4a2d; box-shadow:0 16px 34px rgba(0,0,0,.3); }
body.dark .profile-popover-copy strong { color:#f1efec; }
body.dark .profile-popover-copy small { color:#aaa5a0; }
body.dark .profile-popover-logout { border-color:#484245; color:#f1c247; }
body.dark .profile-popover-logout:hover { background:#4a3b20; color:#ffd96a; }
.accounts-view { display:none; }.accounts-view.visible { display:block; }.accounts-heading { align-items:center; }.account-security-banner { display:flex; align-items:center; gap:13px; padding:15px 18px; margin-bottom:16px; }.security-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#eaf8f3; color:#31b691; font-size:18px; font-weight:700; }.account-security-banner > div:nth-child(2) { flex:1; }.account-security-banner strong,.account-security-banner small { display:block; }.account-security-banner strong { margin-top:4px; font:600 15px 'Space Grotesk'; }.account-security-banner small { color:#9ba6b6; font-size:11px; margin-top:4px; }.account-metrics { margin-bottom:16px; }.account-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:16px; }.accounts-table-panel { padding-bottom:14px; }.account-search { width:175px; }.accounts-table td { padding-top:13px; padding-bottom:13px; }.navy-avatar { background:#172d53; }.role-chip { display:inline-flex; align-items:center; border-radius:5px; padding:6px 8px; font-size:10px; font-weight:700; }.super-role { color:#9a7511; background:#fff4cf; }.admin-role { color:#3f7ce2; background:#edf4ff; }.operator-role { color:#8c68da; background:#f2edff; }.viewer-role { color:#678096; background:#eef2f5; }.account-side-column { display:flex; flex-direction:column; gap:16px; }.roles-panel,.super-admin-panel { padding-bottom:15px; }.role-list { margin-top:16px; }.role-row { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid #f0f2f6; }.role-row:last-child { border-bottom:0; }.role-badge { display:grid; place-items:center; width:29px; height:29px; border-radius:7px; font-size:14px; }.super-badge { color:#b48613; background:#fff4cf; }.admin-badge { color:#4683ed; background:#edf4ff; }.operator-badge { color:#9674df; background:#f2edff; }.viewer-badge { color:#71859a; background:#eef2f5; }.role-row div { flex:1; }.role-row strong,.role-row small { display:block; }.role-row strong { color:#4a586d; font-size:11px; }.role-row small { color:#a1abba; font-size:9px; margin-top:3px; }.role-row > b { color:#98a4b4; font-size:11px; }.owner-row { display:flex; align-items:center; gap:9px; margin:18px 0 14px; }.owner-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; color:#fff; background:#e2ac26; font-size:9px; font-weight:700; }.owner-row strong,.owner-row small { display:block; }.owner-row strong { color:#4a586d; font-size:11px; }.owner-row small { color:#a1abba; font-size:9px; margin-top:3px; }.owner-note { display:flex; gap:8px; align-items:flex-start; padding:10px; border-radius:7px; color:#79879c; background:#fff9e9; border:1px solid #f7ebc1; }.owner-note span { color:#d8a52a; }.owner-note p { margin:0; font-size:9px; line-height:1.5; }

.vx-view { display:none; }.vx-view.visible { display:block; }.vx-heading { align-items:center; }.vx-service-icon,.vx-control-icon { background:#171717; color:#f2bb2f; font-family:'Space Grotesk',sans-serif; font-weight:800; }.vx-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:16px; }.vx-devices-panel { padding-bottom:14px; }.vx-search { width:190px; }.vx-devices-table { min-width:1120px; }.vx-devices-table th,.vx-devices-table td { white-space:nowrap; }.vx-devices-table td { padding-top:13px; padding-bottom:13px; }.vx-devices-table .device-title { display:block; color:#425069; font-size:10px; font-weight:700; }.vx-devices-table .device-id { display:block; max-width:155px; overflow:hidden; text-overflow:ellipsis; color:#a3adbb; margin-top:3px; font-size:8px; }.vx-empty-row td { padding:34px 10px; text-align:center; color:#9aa5b5; }.vx-access { display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:700; }.vx-access.approved { color:#28aa87; }.vx-access.pending { color:#de9444; }.vx-access i { width:5px; height:5px; border-radius:50%; background:currentColor; }.vx-policy-cell { min-width:104px; }.vx-policy-cell > span { display:block; margin-bottom:7px; }.vx-policy-btn { border:1px solid #dfe6ef; background:#fff; color:#6d7a8f; border-radius:6px; padding:6px 9px; font-size:9px; font-weight:700; transition:.18s; }.vx-policy-btn:hover { border-color:#d3a526; color:#9b730e; background:#fffaf0; }.vx-policy-btn:disabled { cursor:not-allowed; opacity:.48; }.vx-policy-btn.approve { border-color:#bde9dc; color:#239975; background:#effbf7; }.vx-policy-btn.revoke { color:#b36e72; }.vx-policy-btn.disconnect { color:#bd555e; border-color:#eed2d5; background:#fff7f7; }.vx-connection-state { display:inline-flex !important; align-items:center; gap:5px; font-size:9px; font-weight:800; }.vx-connection-state i { width:6px; height:6px; border-radius:50%; background:currentColor; }.vx-connection-state.connected { color:#23a47d; }.vx-connection-state.disconnected { color:#98a3b2; }.vx-client-state { display:block; color:#9da7b5; font-size:8px; }.vx-client-state.online { color:#4b8b76; }.vx-password-state { color:#9aa5b5; font-size:9px; font-weight:700; }.vx-password-state.protected { color:#8b69d2; }.vx-password-modal-icon { background:#171717; color:#f2bb2f; font-family:'Space Grotesk',sans-serif; font-weight:800; }.vx-clear-password-row { display:flex !important; align-items:center; gap:8px; padding:9px 10px; border:1px solid #edf0f4; border-radius:7px; }.vx-clear-password-row[hidden] { display:none !important; }.vx-clear-password-row input { width:auto; margin:0; }.vx-clear-password-row span { font-size:10px; }.vx-devices-panel code { color:#5274ad; font-size:9px; }
.account-modal-icon { color:#c28f16; background:#fff3c7; }
@media (max-width:1100px) { .account-layout { grid-template-columns:1fr; } }
@media (max-width:720px) { .account-security-banner { align-items:flex-start; flex-wrap:wrap; }.account-security-banner .online-tag { margin-left:49px; margin-top:-22px; }.account-search { margin-top:15px; width:100%; }.account-layout { grid-template-columns:1fr; }.account-heading .heading-actions { display:flex; } }

/* vkreatif.in yellow brand system */
.brand-mark-image { display:block; width:30px; height:30px; object-fit:contain; flex:0 0 30px; }
.brand-wordmark-image { display:block; width:168px; height:auto; object-fit:contain; }
.brand strong span { color:#d6a01b; }
.login-screen { background:radial-gradient(circle at 14% 12%, #fff6cf 0, transparent 30%),radial-gradient(circle at 88% 84%, #fff0bd 0, transparent 27%),#fffdf5; }
.login-form-side::before { border-color:rgba(227,174,39,.18); box-shadow:0 0 0 45px rgba(239,191,54,.035),0 0 0 90px rgba(239,191,54,.02); }
.login-form-side::after { background:rgba(255,218,101,.22); }
.login-form-heading .eyebrow { color:#b78617; }
.login-form input:focus { border-color:#e3b02e; box-shadow:0 0 0 4px #fff5cf; }
.password-field button,.forgot-btn,.login-help button { color:#bd8a13; }
.login-form .check-label input:checked { background:#eab52e; border-color:#eab52e; }
.login-submit { background:#edb72e; color:#1b2b49; box-shadow:0 8px 17px rgba(224,169,28,.22); }
.login-submit:hover { background:#dda51d; }
.sso-icon { background:#fff3c5; color:#b37d0b; }
.sso-btn:hover { border-color:#ead18a; background:#fffef8; }
.dark .login-screen { background:radial-gradient(circle at 14% 12%, #3b321a 0, transparent 30%),radial-gradient(circle at 88% 84%, #3d3216 0, transparent 27%),#101827; }

/* Yellow–navy workspace theme */
:root { --bg:#fffaf0; --surface:#fffefa; --surface-2:#fff8e7; --line:#eee3c6; --ink:#18294a; --blue:#e3ad25; --shadow:0 14px 34px rgba(145,108,25,.07); }
.sidebar,.topbar { background:#fffdf7; }
.nav-item { color:#7d786e; }
.nav-item:hover { background:#fff7df; color:#9c720d; }
.nav-item.active { background:#fff0bd; color:#8e6708; }
.active .nav-icon { color:#d59d16; }
.nav-badge { background:#fff0c2; color:#ad7a0b; }
.workspace-switcher { background:#fffaf0; border-color:#eddfb9; }
.primary-btn { background:#e9b32a; color:#172b4d; box-shadow:0 6px 15px rgba(216,163,29,.22); }
.primary-btn:hover { background:#dca51e; }
.secondary-outline-btn { border-color:#ead59a; color:#a1750c; background:#fffdf7; }
.secondary-outline-btn:hover { background:#fff5d7; border-color:#ddb64b; }
.link-btn,.activity-link { color:#ad7a0b; }
.select-btn { background:#fffaf0; border-color:#eee2c4; color:#8c7851; }
.metric-card.accent-blue { border-color:#e3ad25; }
.metric-card.accent-purple { border-color:#bd922e; }
.metric-card.accent-orange { border-color:#e1a23a; }
.blue-bars i { background:#e5b43c; }
.purple-bars i { background:#c9a653; }
.status-blue { background:#dfab26; box-shadow:0 0 0 3px #fff1c5; }
.control-plane-banner { border-left:3px solid #e3ad25; }
.service-state { background:#3fc49a; }
.headscale-dot { background:#e3ad25; }
.wireguard-dot { background:#20385e; }
.l2tp-dot { background:#d89d26; }
.system-pill .pulse-dot { background:#3fc49a; }
.usage-card { background:#fff8e7; border-color:#efdfb5; }
.usage-title { color:#9a8559; }
.usage-title span:last-child { color:#b47c09; }
.usage-track { background:#f0dfb5; }
.usage-track span { background:linear-gradient(90deg,#f3c64b,#d99a15); }
.usage-card button { color:#aa770b; }
.chart .grid-line { border-color:#f2e7c9; }
.chart .legend-blue { background:#39b98b; }
.chart .legend-purple { background:#f2bd31; }
.chart .blue-line { stroke:#39b98b; }
.chart .purple-line { stroke:#f2bd31; }
.chart .blue-point { fill:#39b98b; }
.chart .purple-point { fill:#f2bd31; }
.chart svg #areaBlue stop:first-child { stop-color:#39b98b; }
.chart svg #areaPurple stop:first-child { stop-color:#f2bd31; }
.legend-blue { background:#39b98b; }
.legend-purple { background:#f2bd31; }
.chart svg .point { transform-box:fill-box; transform-origin:center; transform:scaleY(1.35); }
.sidebar-bottom { padding-bottom:12px; }
.sidebar { position:fixed; inset:0 auto 0 0; height:100vh; align-self:flex-start; overflow:hidden; z-index:5; }
.main-content { width:calc(100% - 270px); margin-left:270px; }
.main-content { padding-top:72px; padding-bottom:54px; }
.topbar {
  position:fixed;
  top:0;
  left:270px;
  right:0;
  z-index:4;
  background:rgba(255,253,247,.78);
  border-bottom:1px solid rgba(238,227,198,.86);
  box-shadow:0 8px 24px rgba(145,108,25,.06);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.app-footer {
  position:fixed;
  left:270px;
  right:0;
  bottom:0;
  z-index:4;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  color:#9a8d72;
  font-size:11px;
  background:rgba(255,253,247,.76);
  border-top:1px solid rgba(238,227,198,.86);
  box-shadow:0 -8px 24px rgba(145,108,25,.045);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.footer-links { display:flex; align-items:center; gap:22px; }
.footer-status { display:inline-flex; align-items:center; gap:6px; }
.footer-status i { width:6px; height:6px; border-radius:50%; background:#39b98b; box-shadow:0 0 0 3px rgba(57,185,139,.12); }
.notification-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notification-btn i { width:6px; height:6px; right:1px; top:0; }
.top-actions .icon-btn { display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.top-actions .theme-toggle { font-size:19px; }
.top-actions .notification-btn svg { display:block; }
.top-actions .icon-btn { border-radius:8px; transition:background .18s ease, color .18s ease, transform .18s ease; }
.top-actions .icon-btn:hover { background:#fff1c7; color:#b17a08; transform:translateY(-1px); }
.top-actions .icon-btn:active { transform:scale(.92); }
body.dark .top-actions .icon-btn:hover { background:#3b3322; color:#f1c247; }
@media (max-width:720px) {
  .sidebar { position:fixed; top:0; bottom:0; left:-295px; height:100vh; }
  .sidebar.open { left:0; }
  .main-content { width:100%; margin-left:0; padding-top:60px; padding-bottom:52px; }
  .topbar { left:0; height:60px; }
  .app-footer { left:0; height:52px; padding:0 18px; }
  .footer-links { gap:12px; }
  .footer-status { display:none; }
}
.theme-brand-dark { display:none; }

/* Tailscale-inspired charcoal dark mode */
body.dark {
  --bg:#1f1e1f;
  --surface:#282728;
  --surface-2:#302f30;
  --line:#3b393b;
  --ink:#f1efec;
  --muted:#a5a19d;
  --muted-2:#8e8985;
  --shadow:0 14px 34px rgba(0,0,0,.24);
}
body.dark .theme-brand-light { display:none !important; }
body.dark .theme-brand-dark { display:block !important; }
body.dark .sidebar,
body.dark .topbar { background:#242324; border-color:#393739; }
body.dark .main-content { background:#1f1e1f; }
body.dark .panel,
body.dark .metric-card,
body.dark .modal { background:#282728; border-color:#3b393b; }
body.dark .workspace-switcher,
body.dark .select-btn,
body.dark .search-box { background:#302f30; border-color:#454245; color:#d7d2ce; }
body.dark .nav-label,
body.dark .breadcrumbs,
body.dark .heading-subtitle,
body.dark .panel-heading p,
body.dark .metric-label,
body.dark .metric-foot,
body.dark .y-axis,
body.dark .x-axis { color:#9e9995; }
body.dark .nav-item { color:#b0aca8; }
body.dark .nav-item:hover { background:#333033; color:#f0c04a; }
body.dark .nav-item.active { background:#3b3322; color:#f1c247; }
body.dark .nav-badge { background:#4a3b20; color:#f1c247; }
body.dark .workspace-copy strong,
body.dark .page-heading h1,
body.dark .panel-heading h2,
body.dark .metric-value,
body.dark .client-cell strong,
body.dark .service-info strong,
body.dark .activity-item strong,
body.dark .machine-cell strong,
body.dark .owner-row strong,
body.dark .role-row strong { color:#f1efec; }
body.dark .breadcrumbs strong { color:#e9e4df; }
body.dark .primary-btn { background:#eab52e; color:#1d1c1d; }
body.dark .primary-btn:hover { background:#f2c447; }
body.dark .secondary-outline-btn { background:#282728; border-color:#5b4a28; color:#f0c04a; }
body.dark .secondary-outline-btn:hover { background:#3b3322; }
body.dark .usage-card { background:#302d26; border-color:#5a4827; }
body.dark .usage-track { background:#55472b; }
body.dark .usage-card small,
body.dark .profile-copy small,
body.dark td,
body.dark .activity-item p,
body.dark .machine-cell small { color:#aaa5a0; }
body.dark .chart .grid-line { border-color:#464143; }
body.dark .chart .legend,
body.dark .chart-number,
body.dark .chart-summary small { color:#d9d4cf; }
body.dark .table-wrap th,
body.dark .headscale-tabs,
body.dark .activity-link,
body.dark .form-actions { border-color:#3b393b; }
body.dark .modal input,
body.dark .modal select { background:#302f30; border-color:#484548; color:#f1efec; }
body.dark .modal input:focus,
body.dark .modal select:focus { border-color:#dca91f; box-shadow:0 0 0 3px #4a3d23; }
body.dark .modal-close:hover { color:#f1c247; background:#3b3322; }
body.dark .secondary-btn { background:#3a383a; color:#d2cdca; }
body.dark .topbar,
body.dark .app-footer { background:rgba(36,35,36,.78); border-color:rgba(76,73,76,.82); box-shadow:0 8px 24px rgba(0,0,0,.18); }
body.dark .app-footer { box-shadow:0 -8px 24px rgba(0,0,0,.16); color:#aaa5a0; }

/* Rounded shell geometry */
.sidebar {
  top:8px;
  bottom:auto;
  height:calc(100vh - 16px);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(145,108,25,.055);
}
.sidebar .brand { height:64px; flex-basis:64px; }
.topbar {
  top:8px;
  left:278px;
  right:8px;
  height:64px;
  border:1px solid rgba(238,227,198,.86);
  border-radius:14px;
}
.app-footer {
  left:278px;
  right:8px;
  bottom:8px;
  border:1px solid rgba(238,227,198,.86);
  border-radius:14px;
}
body.dark .sidebar { box-shadow:0 10px 28px rgba(0,0,0,.22); }
body.dark .topbar,
body.dark .app-footer { border-color:rgba(76,73,76,.82); }
.sidebar { border-radius:0 14px 14px 0; }
.topbar,
.app-footer { right:0; border-radius:14px 0 0 14px; }
.topbar,
.app-footer { right:8px; border-radius:14px; }
.sidebar { border-radius:0 14px 14px 0; }
.topbar { border-radius:0 0 14px 14px; }
.app-footer { border-radius:14px 14px 0 0; }
@media (max-width:720px) {
  .sidebar { top:0; bottom:0; left:-295px; height:100vh; border-radius:0 14px 14px 0; }
  .sidebar .brand { height:60px; flex-basis:60px; }
  .profile-row { height:52px; min-height:52px; flex-basis:52px; }
  .topbar { top:0; left:0; right:0; height:60px; border-radius:0; }
  .app-footer { left:0; right:0; bottom:0; border-radius:0; }
  .headscale-heading { min-height:52px; }
  .headscale-action-card { width:100%; justify-content:flex-end; }
}
.sidebar-bottom { padding-bottom:0; }

/* Shared page action bar: one full-width control card per page. */
.content-wrap { padding-top:18px; }
.page-heading.dashboard-heading,
.page-heading.accounts-heading,
.page-heading.headscale-heading { display:block; min-height:0; margin-bottom:16px; }
.dashboard-heading > div:first-child,
.accounts-heading > div:first-child { margin-bottom:14px; }
.dashboard-heading > .page-actions-card,
.accounts-heading > .page-actions-card { margin-bottom:0; }
.page-actions-card {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,253,247,.82);
  box-shadow:0 8px 22px rgba(145,108,25,.055);
}
.page-actions-card .primary-btn,
.page-actions-card .secondary-outline-btn { margin:0; }
.page-actions-card .primary-btn,
.page-actions-card .secondary-outline-btn {
  height:32px;
  min-height:32px;
  padding:0 12px;
  border-radius:9px;
  font-size:12px;
  line-height:1;
  box-shadow:none;
}
.page-actions-card .primary-btn span { font-size:15px; }
.page-actions-card .primary-btn:hover { box-shadow:0 4px 10px rgba(216,163,29,.16); }
.headscale-heading-spacer { display:none; }
.headscale-action-card { margin:0; }
body.dark .page-actions-card {
  background:rgba(40,39,40,.86);
  border-color:#3b393b;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
@media (max-width:720px) {
  .content-wrap { padding-top:16px; }
  .dashboard-heading > div:first-child,
  .accounts-heading > div:first-child { margin-bottom:14px; }
  .dashboard-heading .page-actions-card,
  .accounts-heading .page-actions-card { margin-top:0; }
  .page-actions-card { overflow-x:auto; }
  .page-actions-card .primary-btn,
  .page-actions-card .secondary-outline-btn { flex:0 0 auto; }
}

/* Compact navigation and selectors to match the slim action buttons. */
.nav-item {
  height:38px;
  min-height:38px;
  margin:1px 0;
  display:grid;
  grid-template-columns:16px minmax(0, 1fr) auto;
  grid-template-rows:16px;
  align-items:center;
  align-content:center;
  column-gap:12px;
  font-size:14px;
}
.nav-item > span:not(.nav-icon):not(.service-icon):not(.service-state) {
  display:inline-flex;
  align-items:center;
  height:16px;
  line-height:16px;
}
.nav-icon,
.service-icon {
  height:16px;
  min-height:16px;
  align-self:center;
  justify-self:center;
  position:relative;
  top:-1px;
}
.nav-label { margin-bottom:6px; }
.service-label { margin-top:16px; }
.select-btn {
  height:32px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border-radius:8px;
  line-height:1;
}
.select-btn span { margin-left:0; }
.service-icon {
  display:grid;
  place-items:center;
  width:16px;
  height:17px;
  flex:0 0 16px;
  color:#d59d16;
}

/* Modal actions use the same slim control height as the main navigation. */
.modal .form-actions {
  align-items:center;
  justify-content:center;
  gap:8px;
}
.modal .form-actions .secondary-btn,
.modal .form-actions .primary-btn {
  height:32px;
  min-height:32px;
  padding:0 12px;
  border-radius:7px;
  font-size:11px;
  line-height:1;
}
.modal .form-actions .primary-btn span { font-size:14px; }

/* Service-specific icon inside the client-secret modal. */
.secret-modal-icon {
  transition:background .2s ease, color .2s ease;
}
.secret-modal-icon[data-service="headscale"] {
  background:#edf4ff;
  color:#3e82f7;
}
.secret-modal-icon[data-service="wireguard"] {
  background:#fff0bd;
  color:#d59d16;
}
.secret-modal-icon[data-service="l2tp"] {
  background:#fff4e7;
  color:#e99d48;
}
.secret-modal-icon [data-service-icon] {
  display:none !important;
  width:23px;
  height:23px;
  object-fit:contain;
}
.secret-modal-icon [data-service-icon].is-active { display:block !important; }
.secret-modal-icon .theme-service-dark.is-active { display:none !important; }
.secret-modal-icon .secret-modal-l2tp-icon.is-active {
  display:grid !important;
  place-items:center;
}
.secret-modal-l2tp-icon svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.dark .secret-modal-icon[data-service="headscale"],
body.dark .secret-modal-icon[data-service="wireguard"],
body.dark .secret-modal-icon[data-service="l2tp"] {
  background:#302f30;
}
body.dark .secret-modal-icon .theme-service-light.is-active { display:none !important; }
body.dark .secret-modal-icon .theme-service-dark.is-active { display:block !important; }
.secret-modal-single-icon {
  display:block;
  width:23px;
  height:23px;
  object-fit:contain;
}
.wireguard-modal-mark {
  background:currentColor;
  -webkit-mask:url('../brand/wireguard-dragon.svg?v=1') center / 23px 23px no-repeat;
  mask:url('../brand/wireguard-dragon.svg?v=1') center / 23px 23px no-repeat;
}
.l2tp-modal-mark {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.dark .headscale-modal-mark { filter:invert(1); }
.service-icon svg {
  display:block;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.service-logo-image {
  display:block;
  width:16px;
  height:16px;
  object-fit:contain;
}
.headscale-icon { transform:none; }
.headscale-icon .service-logo-image { width:24px; height:24px; transform:translate(-3px, -5px); }
.nav-item[data-view="headscale"] > span:not(.nav-icon):not(.service-icon):not(.service-state) {
  position:relative;
  top:-2px;
}
.nav-item[data-view="l2tp"] > span:not(.nav-icon):not(.service-icon):not(.service-state) {
  position:relative;
  top:-1px;
}
.wireguard-icon .service-logo-image { width:19px; height:19px; }
.wireguard-icon {
  background-color:currentColor;
  -webkit-mask:url('../brand/wireguard-dragon.svg?v=1') center / 19px 19px no-repeat;
  mask:url('../brand/wireguard-dragon.svg?v=1') center / 19px 19px no-repeat;
}
.wireguard-icon .service-logo-image { display:none; }
.theme-service-dark { display:none; }
body.dark .theme-service-light { display:none !important; }
body.dark .theme-service-dark { display:block !important; }
.wireguard-icon,
.l2tp-icon { color:#929db1; }
.nav-item.active .service-icon { color:currentColor; }
body.dark .headscale-icon,
body.dark .wireguard-icon,
body.dark .l2tp-icon { color:#f1c247; }
body.dark .wireguard-icon,
body.dark .l2tp-icon { color:#aaa5a0; }
.login-screen,
#appShell { transition:opacity .18s ease; }
html.app-loading #loginScreen,
html.app-loading #appShell { visibility:hidden; opacity:0; }
html.app-loading body { background:#fffaf0; }
html.preload-dark body { background:#1f1e1f; }
.service-state {
  width:22px;
  height:12px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  margin-left:auto;
  background:none;
}
.service-state i {
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#4bc99c;
}

/* Dynamic Island-style system notification. */
.dynamic-island-toast {
  /* Keep the expanded notification centered inside the rounded topbar. */
  top:8px;
  left:calc(50% + 135px);
  right:auto;
  bottom:auto;
  width:58px;
  min-height:48px;
  max-width:calc(100vw - 24px);
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden;
  white-space:nowrap;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:25px;
  background:#090909;
  color:#f7f5f0;
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translate(-50%, -16px) scale(.72);
  opacity:0;
  transition:width .46s cubic-bezier(.22,1.36,.32,1), min-height .38s ease, padding .38s ease, border-radius .38s ease, transform .42s cubic-bezier(.22,1.36,.32,1), opacity .2s ease;
  z-index:30;
}
.dynamic-island-toast.show {
  width:min(390px, calc(100vw - 24px));
  min-height:64px;
  padding:10px 14px 10px 10px;
  border-radius:22px;
  transform:translate(-50%, 0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.dynamic-island-toast > .toast-icon {
  position:relative;
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,#f5c63a,#d79a16);
  color:#171717;
  font-size:18px;
  font-weight:800;
  box-shadow:0 4px 12px rgba(234,178,39,.32), inset 0 1px 0 rgba(255,255,255,.4);
  opacity:.7;
  transform:scale(.84);
  will-change:opacity, transform;
  transition:opacity .2s ease .48s, transform .22s ease .48s, box-shadow .3s ease .48s;
}
.dynamic-island-toast.show > .toast-icon {
  opacity:1;
  transform:scale(1);
  animation:island-icon-pop 1.1s cubic-bezier(.22,.61,.36,1) .12s both;
}
.dynamic-island-toast > .toast-icon::after {
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(245,198,58,.55);
  border-radius:15px;
  opacity:0;
  transform:scale(.68);
}
.dynamic-island-toast.show > .toast-icon::after { animation:island-icon-ring .7s ease-out .5s both; }
.dynamic-island-toast > div {
  min-width:0;
  flex:1;
  overflow:hidden;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .24s ease .16s, transform .42s cubic-bezier(.22,1.36,.32,1) .12s;
}
.dynamic-island-toast.show > div { opacity:1; transform:translateX(0); }
.dynamic-island-toast strong,
.dynamic-island-toast small { display:block; overflow:hidden; text-overflow:ellipsis; }
.dynamic-island-toast strong { font-size:12px; font-weight:700; letter-spacing:.01em; }
.dynamic-island-toast small { margin-top:4px; color:#aaa6a0; font-size:10px; }
@keyframes island-icon-ring {
  0% { opacity:.65; transform:scale(.68); }
  100% { opacity:0; transform:scale(1.35); }
}
@keyframes island-icon-pop {
  0% { opacity:0; transform:scale(.28); }
  100% { opacity:1; transform:scale(1); }
}
@media (max-width:720px) {
  .dynamic-island-toast { top:0; left:50%; }
  .dynamic-island-toast.show { min-height:60px; }
}
@media (max-width:520px) {
  .dynamic-island-toast { left:50%; }
  .dynamic-island-toast.show { width:calc(100vw - 24px); }
}
@media (prefers-reduced-motion:reduce) {
  .dynamic-island-toast,
  .dynamic-island-toast > .toast-icon,
  .dynamic-island-toast > div { transition:none; animation:none !important; }
}
@media (max-width:1100px) { .vx-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .vx-metrics { grid-template-columns:1fr; } }