/* Measurements and colors from ContentView, Theme and WiFiMenuView. */
.demo-window {font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;line-height:1.35;transform:none;--muted:#a3a8bf;--violet:#b096fa;--blue:#66b3fa;}
.demo-window h2,.demo-window h3,.demo-window p {letter-spacing:normal;}
.demo-window h3 {font-size:12px;font-weight:600;line-height:1.35;}
.demo-window .native-symbol {width:16px;height:16px;aspect-ratio:1;mask-size:contain;}
.demo-window button,.demo-window input,.demo-window select {font-family:inherit;}
.demo-window .connected-top>.native-symbol,.demo-window .network-row>.native-symbol {width:20px;height:16px;aspect-ratio:1.25;}
.demo-window .network-row .lock .native-symbol {width:10px;height:12px;}
.demo-window .network-actions .native-symbol {width:16px;height:16px;}
.demo-window .search-row>.native-symbol {width:20px;height:16px;}
.demo-window .connected-top {gap:10px;}
.demo-window .connected-top>div {min-width:0;}
.demo-window .connected-top strong {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.demo-window .connected-top p {font-size:10px;line-height:1.35;}
.demo-window .icon-button {width:24px;height:24px;flex:0 0 24px;padding:0;border-radius:5px;}
.demo-window .icon-button .native-symbol {width:14px;height:14px;}
.demo-window .network-actions {margin:8px -6px 0;}
.demo-window .text-action {display:inline-flex;align-items:center;gap:5px;font-size:11px!important;padding:5px 6px;border-radius:5px;}
.demo-window .nearby-label .text-action {font-size:10px!important;padding:2px 6px;}
.demo-window .network-list {height:280px;scrollbar-width:none;}
.demo-window .network-row {min-height:54px;padding:12px 9px!important;line-height:1.35;}
.demo-window .network-row strong {font-size:12px;font-weight:500;}
.demo-window .network-meta {font-size:10px;}
.demo-window .network-row[aria-expanded=true] {background:#ffffff14;border-radius:8px 8px 0 0;}
.demo-window .join-panel {margin:0 0 3px;padding:0 9px 12px;background:#ffffff14;border:0;border-radius:0 0 8px 8px;}
.demo-window .join-panel input {background:#ffffff0a;color:inherit;border:0;border-radius:6px;padding:6px;font-size:12px;width:100%;}
.demo-window .join-actions {display:flex;gap:6px;align-items:center;justify-content:flex-start;margin-top:8px;}
.demo-window .join-actions button {padding:4px 10px;background:#ffffff20;border-radius:5px;}
.demo-window .join-actions button[type=submit] {margin-left:auto;background:var(--violet);color:#11121d;}
.demo-window .join-actions .text-action {padding:4px!important;background:transparent;font-size:10px!important;}
.demo-window .app-heading {margin-bottom:9px;}
.demo-window .health h2 {font-size:20px;line-height:1.25;}
.demo-window .chips {margin-bottom:11px;font-size:10px;}
.demo-window .chips>* {padding:3px 6px;}
.demo-window .app-tabs {gap:4px;margin-bottom:8px;}
.demo-window .app-tabs button {font-size:10.5px!important;min-width:0;}
.demo-window .app-content {display:flex;flex-direction:column;gap:8px;scrollbar-width:none;overflow-y:auto;padding-bottom:10px;}
.demo-window .app-content>* {flex-shrink:0;}
.demo-window .metric-card,.demo-window .budget-card,.demo-window .apps-card,.demo-window .speed-card,.demo-window .quality-card,.demo-window .activity-card {border-radius:9px;border:1px solid #ffffff0e;background:#ffffff09;padding:11px;margin:0;}
.demo-window .metric-card h3 {display:flex;align-items:center;gap:6px;font-size:10.5px;}
.demo-window .metric-value {font-size:20px;margin:7px 0;font-weight:700;line-height:1.2;}
.demo-window .metric-value small {font-size:10px;}
.demo-window .metric-detail {font-size:10px;line-height:1.35;}
.demo-window .sparkline {height:28px;}
.demo-window .panel-footer {height:34px;margin-top:0;border-top:.5px solid #ffffff24;}
.native-spinner {display:inline-block;width:14px;height:14px;border:2px solid #a3a8bf35;border-top-color:#a3a8bf;border-radius:50%;animation:native-spin .8s linear infinite;flex-shrink:0;}
@keyframes native-spin {to {transform:rotate(360deg);}}
.native-menu {position:fixed;z-index:1000;width:235px;padding:5px;background:#292833f5;box-shadow:0 8px 28px #0007;border:1px solid #ffffff28;border-radius:7px;color:#edeffc;font:13px/1.35 -apple-system,BlinkMacSystemFont,sans-serif;backdrop-filter:blur(25px);}
.native-menu button {display:flex;align-items:center;gap:8px;padding:5px 8px;width:100%;border:0;border-radius:4px;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit;}
.native-menu button:hover {background:#3687ee;}
.native-menu hr {border:0;border-top:1px solid #ffffff20;margin:4px 8px;}
.native-menu .native-symbol {width:14px;height:14px;aspect-ratio:1;}
.native-menu h3 {margin:9px;font-size:13px;}.native-menu p {font-size:11px;margin:9px;}
.native-history header,.native-options header,.speed-card>header,.native-diagnostics header {display:flex;align-items:center;justify-content:space-between;gap:8px;}
.native-history h3,.native-options h3 {display:flex;align-items:center;gap:6px;}
.native-history h3 {font-size:11px!important;}
.native-segment {display:flex;background:#ffffff08;padding:2px;border-radius:5px;width:150px;}
.native-segment button {flex:1;background:none;border:0;border-radius:4px;padding:3px 0;font-size:10px;}
.native-segment button[aria-pressed=true] {background:#ffffff22;}
.native-picker {display:flex;gap:10px;align-items:center;margin-top:18px;font-size:11px;}
.native-picker select {border:1px solid #ffffff14;border-radius:4px;background:#ffffff0d;color:inherit;padding:3px;font-size:11px;flex:1;min-width:0;}
.history-total {display:block;font-size:24px;font-weight:700;margin-top:18px;font-variant-numeric:tabular-nums;}
.history-chart {height:168px;display:flex;margin-top:18px;gap:8px;}
.history-axis {width:30px;display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:var(--muted);}
.history-bars {flex:1;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid #ffffff20;background:repeating-linear-gradient(to top,transparent 0 54px,#ffffff0c 54px 55px);}
.history-bars>div {flex:1;display:flex;flex-direction:column;justify-content:flex-end;border-radius:2px 2px 0 0;overflow:hidden;}
.history-bars i {background:var(--violet);display:block;}.history-bars b {background:var(--blue);display:block;}
.history-dates {display:flex;justify-content:space-between;margin:5px 0 18px 38px;font-size:8px;color:var(--muted);}
.native-history footer {width:auto;margin:0;padding:0;border:0;display:flex;align-items:center;gap:15px;font-size:10px;}
.native-history footer button {margin-left:auto;font-size:10px!important;padding:0!important;background:none;color:var(--violet)!important;}
.blue {color:#66b3fa;}.violet {color:#b096fa;}
.native-history-apps h3 {font-size:11px;}.native-history-apps>div {display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:16px;gap:7px;font-size:12px;}
.native-history-apps>div>span+span {color:var(--muted);}.native-history-apps .bar-track {width:100%;height:4px;}
.demo-window .native-profile {display:flex;width:100%;align-items:center;gap:14px;text-align:left;border:1px solid #ffffff0e!important;background:#ffffff09;padding:11px;border-radius:9px;}
.native-profile>.native-symbol:first-child {width:42px;height:45px;mask-size:18px; background-color:var(--violet);}
.native-profile>span:nth-child(2) {flex:1;}.native-profile strong {font-size:11px;}.native-profile small {display:block;font-size:11px;color:var(--muted);margin-top:4px;}
.native-profile>.native-symbol:last-child {color:var(--violet);}
.native-options {display:flex;flex-direction:column;gap:10px;font-size:11px;}
.native-options p {font-size:10px;color:var(--muted);line-height:1.4;}
.native-options label {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;}
.native-options input[type=checkbox] {accent-color:#b096fa;}.native-options pre {font:10px/1.7 ui-monospace,monospace;margin:0;white-space:pre-wrap;}
.native-options hr {width:100%;border:0;border-top:1px solid #ffffff20;}
.native-result-row {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;}.native-result-row>span:first-child {color:var(--muted);}.native-result-row strong {font-weight:400;}
.native-result-row input {width:80px;border:0;background:#ffffff08;color:inherit;border-radius:5px;padding:5px;}
.native-diagnostics header>div {flex:1;}.native-diagnostics header h3 {font-size:12px;}.native-diagnostics p {font-size:11px;margin-top:8px;color:var(--muted);}.native-diagnostics header p {font-size:10px;margin-top:3px;}
.native-diagnostic-grid .metric-card {min-height:100px;}.native-diagnostic-grid h3 {color:var(--violet);}
.dns-providers {display:flex;gap:8px;}.dns-providers button {flex:1;min-width:0;background:#ffffff03;border:1px solid #ffffff0c!important;border-radius:8px;padding:9px 4px;font-size:11px;}.dns-providers small {display:block;font-size:9px;color:var(--muted);margin-top:4px;}.dns-address {font-family:ui-monospace,monospace;}
.native-actions {display:flex;align-items:center;gap:8px;}.native-actions button {border:0;border-radius:5px;background:#ffffff20;padding:4px 9px;color:inherit;font:11px inherit;}.native-actions input {flex:1;min-width:0;color:inherit;background:#ffffff08;border:0;border-radius:5px;padding:5px;font:11px inherit;}
.native-traces {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;}.native-traces>div {border-radius:7px;padding:8px;background:#ffffff06;}.native-traces h4 {font-size:10px;font-weight:500;color:var(--muted);margin:0 0 5px;}.native-traces p {height:36px;display:grid;place-items:center;font-size:10px;color:var(--muted);}.native-traces small {font-size:9px;color:var(--muted);}.native-traces .sparkline {height:36px;}.native-traces>div:nth-child(2) .sparkline {color:var(--violet);}
.demo-window .quality-card>div {font-size:11px;}.demo-window .quality-card small {font-size:9px;}.demo-window .run-test {font-size:12px;font-weight:600;color:#11121d;display:flex;justify-content:center;align-items:center;gap:6px;}.demo-window .run-test .native-symbol {width:12px;height:12px;}
#demo-dialog {width:340px;padding:20px;border-radius:12px;background:radial-gradient(circle at top left,#3d2e7a99,transparent 490px),#11121d;color:#edeffc;font:12px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;}
#dialog-body>header {display:flex;align-items:center;justify-content:space-between;gap:10px;}#dialog-body h2 {font-size:17px;letter-spacing:0;margin:0;}#dialog-body p {font-size:12px;margin:16px 0;color:#a3a8bf;}#dialog-body .native-options {margin-top:16px;}
#dialog-body .icon-button,#dialog-body .text-action {color:inherit;border:0;background:none;cursor:pointer;}#dialog-body input[type=checkbox] {accent-color:#b096fa;}
@media(prefers-reduced-motion:reduce){.native-spinner{animation:none;}}
/* AppListView uses a 28×24 rule button, not a switch. */
.apps-header .native-count{padding:3px 6px;border-radius:6px;background:#ffffff0d;font-size:10px;color:#a3a8bf;margin-right:auto}
.apps-header .text-action{margin-left:auto;font-size:11px}
.app-search{margin:0 11px 10px;padding:9px;font-size:11px;min-height:0;height:auto}
.app-search input{font-size:11px}
.native-rule{width:28px;height:24px;padding:0;border-radius:7px;display:grid;place-items:center;background:#a3a8bf1a;color:#a3a8bf;border:0;justify-self:end}
.native-rule.allowed{color:#66b3fa;background:#66b3fa1a}
.native-rule .native-symbol{width:11px;height:11px}
.native-rule:disabled{opacity:.5;cursor:default}
.card-title>span{display:flex;align-items:center;gap:6px}
.card-title .native-symbol{width:11px;height:11px}
.radar-face{width:48px;height:40px}
.native-spinner{position:relative;width:16px;height:16px;border:0;animation:none;border-radius:0}
.native-spinner i{position:absolute;left:7px;top:0;width:2px;height:5px;background:currentColor;border-radius:1px;transform-origin:1px 8px;transform:rotate(calc(var(--spoke)*30deg));animation:native-spoke 1s linear infinite;animation-delay:calc(var(--spoke)*.0833s)}
@keyframes native-spoke{0%,100%{opacity:1}90%{opacity:.12}}
.native-radar-center .radar-bat-face{width:48px;height:40px}

/* Parity pass against the SwiftUI source (ContentView, AppListView, DiagnosticsView,
   SpeedTestView, SignalRadar, ProfilesView, WiFiMenuView, Theme). pt = px. */
.demo-window { --rounded: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; --rose: #e0857a; }
.demo-window .health h2, .demo-window .metric-value, .demo-window .budget-value,
.demo-window .dns-value, .demo-window .native-radar h3, .demo-window .native-radar-center strong,
.demo-window .radar-readings strong, .demo-window .gauge-value, .demo-window .history-total,
.demo-window .native-diagnostics h3 { font-family: var(--rounded); }
.demo-window .health h2 { font-weight: 700; }
.demo-window #app-content[data-tab="Wi-Fi"], .demo-window #app-content[data-tab="Radar"],
.demo-window #app-content[data-tab="Profiles"] { gap: 12px; }
.demo-window .nearby-label, .demo-window .lock, .demo-window .table-labels,
.demo-window .quality-card small, .demo-window .native-history footer { color: var(--muted); }

/* Bare icon buttons (KilobatActionStyle with zero padding). */
.demo-window .bare-icon { display: inline-grid; place-items: center; padding: 0 !important; background: none !important; color: var(--muted); cursor: pointer; }
.demo-window .bare-icon .native-symbol { width: 13px; height: 13px; }
.demo-window .bare-icon:hover { color: #edeffc; }

/* Window chrome: Tag chips, footer. */
.demo-window .chips > * { background: #a3a8bf1c; color: var(--muted); border: 0; border-radius: 6px; font-size: 10px; font-weight: 600; }
.demo-window .chips #profile-chip { background: #b096fa24; color: var(--violet); }
.demo-window .panel-footer { height: auto; padding: 6px 0; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.demo-window .panel-footer .footer-spacer { flex: 1; }
.demo-window .panel-footer button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px !important; color: var(--muted); font-size: 11px !important; }
.demo-window .panel-footer .native-symbol { width: 13px; height: 12px; }
.demo-window .filter-status { color: var(--muted); }

/* Overview cards. */
.demo-window .metric-card h3 { gap: 6px; }
.demo-window .metric-card h3 .native-symbol { width: 11px; height: 11px; color: var(--blue); }
.demo-window .metric-card.upload h3 .native-symbol { color: var(--violet); }
.demo-window .metric-value small { font-weight: 600; margin-left: 3px; font-family: -apple-system, sans-serif; }
.demo-window .budget-card { display: flex; flex-direction: column; gap: 8px; }
.demo-window .budget-card .card-title { font-size: 10.5px; font-weight: 600; }
.demo-window .tag, .demo-window .card-title .tag { display: inline-flex; align-items: center; padding: 3px 6px !important; border-radius: 6px; background: #a3a8bf1c !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 600; line-height: 1.2; }
.demo-window .budget-value { margin: 0; font-size: 20px; font-weight: 700; }
.demo-window .budget-value small { font-size: 12px; font-family: -apple-system, sans-serif; }
.demo-window .budget-value em { padding-top: 0; font: 600 10.5px/2 -apple-system, sans-serif; }
.demo-window .budget-card .bar-track { height: 6px; background: #b096fa1f; }
.demo-window .budget-card .metric-detail { margin: 0; font-size: 11px; }

/* Applications list (AppListView). */
.demo-window .apps-card { padding: 0; }
.demo-window .apps-header { padding: 11px; margin: 0; gap: 6px; justify-content: flex-start; }
.demo-window .apps-header strong { font-weight: 600; }
.demo-window .apps-header .filter-menu { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 !important; background: none; color: var(--muted); font-size: 11px !important; }
.demo-window .filter-menu .native-symbol { width: 8px; height: 8px; }
.demo-window .apps-card .app-search { margin: 0 11px 6px; background: #00000021; }
.demo-window .apps-card .table-labels { padding: 4px 11px 5px; font: 600 8px/1.3 ui-monospace, SFMono-Regular, monospace; letter-spacing: .8px; grid-template-columns: 1fr 60px 28px; gap: 7px; }
.demo-window .table-labels button { display: inline-flex; justify-content: flex-end; align-items: center; gap: 3px; color: var(--muted); }
.demo-window .table-labels button.sorted { color: var(--violet); }
.demo-window .table-labels button .native-symbol { width: 6px; height: 6px; }
.demo-window .apps-card .traffic-row { grid-template-columns: 1fr 60px 28px; gap: 7px; padding: 8px 11px; border-top: 0; border-bottom: 1px solid transparent; background: linear-gradient(#ffffff09, #ffffff09) bottom / calc(100% - 22px) 1px no-repeat; }
.demo-window .app-name > .native-symbol { width: 8px; height: 8px; color: var(--muted); }
.demo-window .app-icon { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px; color: #fff; }
.demo-window .app-icon .native-symbol { width: 13px; height: 13px; }
.demo-window img.app-icon { border-radius: 0; }
.demo-window .app-name > span:last-child { font-size: 11px; font-weight: 500; }
.demo-window .app-name small.idle { color: var(--muted); }
.demo-window .traffic-row .session { font: 10px ui-monospace, SFMono-Regular, monospace; }
.demo-window .native-rule { width: 28px; height: 24px; border-radius: 7px; background: #a3a8bf1a; color: var(--muted); }
.demo-window .native-rule.allowed { background: #66b3fa1a; }
.demo-window .native-rule .native-symbol { width: 11px; height: 11px; background: var(--muted); }
.demo-window .native-rule.allowed .native-symbol { background: var(--blue); }
.demo-window .apps-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px; font-size: 10px; color: var(--muted); }
.demo-window .apps-footer i { display: inline-block; width: 4px; height: 4px; margin-right: 5px; border-radius: 50%; background: var(--blue); vertical-align: 2px; }

/* Wi-Fi tab (DiagnosticsView). */
.demo-window .native-diagnostics header { display: flex; align-items: center; gap: 8px; }
.demo-window .native-diagnostics .diag-face { width: 30px; height: 27px; margin: 0; color: var(--blue); flex-shrink: 0; }
.demo-window .native-diagnostics header > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.demo-window .native-diagnostics h3 { font-size: 11px; font-weight: 700; margin: 0; }
.demo-window .native-diagnostics header p { font-size: 11px; color: var(--muted); margin: 0; }
.demo-window .native-diagnostics > p { margin: 15px 0 0; font-size: 12px; color: var(--muted); }
.demo-window .native-diagnostic-grid { gap: 12px; }
.demo-window .diag-metric { display: flex; flex-direction: column; gap: 12px; }
.demo-window .diag-metric h3 { font-size: 12px; font-weight: 600; margin: 0; }
.demo-window .diag-metric.violet h3, .demo-window .diag-metric.violet h3 .native-symbol { color: var(--violet); }
.demo-window .diag-metric.blue h3, .demo-window .diag-metric.blue h3 .native-symbol { color: var(--blue); }
.demo-window .diag-metric h3 .native-symbol { width: 14px; height: 12px; }
.demo-window .diag-metric .metric-value, .demo-window .diag-metric .metric-detail { margin: 0; }
.demo-window .diag-metric .metric-value { color: #edeffc; font-size: 20px; font-weight: 700; }
.demo-window .diag-metric .metric-detail { font-size: 10px; color: var(--muted); }
.demo-window .local-link { display: flex; flex-direction: column; gap: 12px; }
.demo-window .local-link h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0; }
.demo-window .local-link .native-result-row { padding: 0; }
.demo-window .dns-value { font-size: 19px; font-weight: 700; }
.demo-window .dns-providers button { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; height: 79px; padding: 8px; text-align: left; background: #ffffff09; border: 1px solid #ffffff0a; border-radius: 8px; }
.demo-window .dns-providers button:hover { background: #ffffff13; border-color: #ffffff1a; }
.demo-window .dns-logo { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.demo-window .dns-logo img { width: 20px; height: 20px; object-fit: contain; }
.demo-window .dns-logo .native-symbol { width: 20px; height: 18px; }
.demo-window .dns-providers strong { font-size: 10px; font-weight: 600; }
.demo-window .dns-providers small { font-size: 9px; color: var(--muted); margin-top: -4px; }
.demo-window .flush-dns { align-self: flex-end; padding: 0 !important; font-size: 10px !important; color: var(--muted); width: auto; }
.demo-window .native-actions button { display: inline-flex; align-items: center; gap: 5px; font-size: 11px !important; }
.demo-window .native-actions button .native-symbol { width: 12px; height: 12px; }

/* Speed (SpeedTestView). */
.demo-window .gauges { gap: 12px; }
.demo-window .gauge { display: flex; flex-direction: column; align-items: center; }
.demo-window .dial { position: relative; width: 100%; height: 128px; margin-top: 15px; padding: 0 6px; }
.demo-window .dial svg { width: 100%; height: 100%; overflow: visible; }
.demo-window .gauge.active .dial-value { filter: drop-shadow(0 0 5px var(--dial)); }
.demo-window .dial span { position: absolute; font-size: 8px; color: var(--muted); }
.demo-window .dial-top { top: -11px; left: 50%; transform: translateX(-50%); }
.demo-window .dial-min { bottom: 10px; left: 8px; }
.demo-window .dial-max { bottom: 10px; right: 8px; }
.demo-window .dial .gauge-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-window .dial .gauge-value small { font: 10px -apple-system, sans-serif; color: var(--muted); }
.demo-window .gauge-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.demo-window .gauge.active .gauge-label { color: var(--dial); }
.demo-window .speed-card header .elapsed { font: 10px ui-monospace, monospace; color: var(--muted); }
.demo-window .speed-phase { font-size: 11px; font-weight: 500; padding: 0; }
.demo-window .speed-phase.blue span:first-child { color: var(--blue); }
.demo-window .speed-phase.violet span:first-child { color: var(--violet); }
.demo-window .stop-test { align-self: center; padding: 3px 10px !important; border-radius: 6px; background: #ffffff1f; color: #edeffc; font-size: 11px !important; }
.demo-window .run-test { margin-top: 12px; font-size: 12px !important; font-weight: 600; color: #000 !important; }
.demo-window .readiness { display: flex; align-items: center; gap: 8px; padding: 0 !important; font-size: 11px; }
.demo-window .readiness .native-symbol { width: 16px; height: 13px; color: var(--muted); }
.demo-window .readiness.ready .native-symbol { color: var(--blue); }
.demo-window .readiness span { color: var(--muted); flex: 1; }
.demo-window .readiness strong { font-weight: 400; color: var(--muted); }
.demo-window .readiness.ready strong { color: #edeffc; }
.demo-window .speed-card .metric-detail, .demo-window .quality-card.native-options p { font-size: 11px; }

/* Radar (SignalRadar + RadarView). */
.demo-window .native-radar-scope { background: radial-gradient(circle, #b096fa2b, transparent 70%); }
.demo-window .radar-pulse { position: absolute; inset: 22%; border: 2px solid #66b3fa; border-radius: 50%; opacity: 0; animation: radar-pulse 2.4s ease-out infinite; }
@keyframes radar-pulse { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
.motion-paused .radar-pulse { animation-play-state: paused; }
.demo-window .radar-trend { font-weight: 600; }
.demo-window .native-radar-center small { font-weight: 600; }
.demo-window .radar-controls { display: flex; flex-direction: column; gap: 12px; }
.demo-window .radar-controls label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.demo-window .reset-spot { align-self: flex-start; padding: 0 !important; font-size: 11px !important; color: var(--muted); width: auto; }
.demo-window .spot-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; font-size: 11px; }
.demo-window .spot-row small, .demo-window .spot-row code { color: var(--muted); font-size: 10px; }
.demo-window .spot-row span small { display: block; }
.demo-window .nearby-scan { display: flex; flex-direction: column; gap: 13px; }
.demo-window .nearby-scan header { display: flex; justify-content: space-between; align-items: center; }
.demo-window .nearby-scan h3 { font-size: 11px; font-weight: 600; margin: 0; }
.demo-window .nearby-scan > p { font-size: 11px; color: var(--muted); }
.demo-window .scan-action { display: inline-flex; align-items: center; gap: 5px; padding: 0 !important; background: none; color: var(--violet); font-size: 11px !important; }
.demo-window .scan-icon { display: grid; place-items: center; width: 16px; height: 16px; }
.demo-window .scan-icon .native-symbol { width: 12px; height: 12px; }
.demo-window .scan-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.demo-window .scan-row > .native-symbol { color: var(--muted); }
.demo-window .scan-row span { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.demo-window .scan-row strong { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-window .scan-row small { font-size: 10px; color: var(--muted); }
.demo-window .scan-row code { font: 11px ui-monospace, monospace; color: var(--muted); }
.demo-window .crowding { display: flex; flex-direction: column; gap: 13px; }
.demo-window .crowding h3 { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; margin: 0; }
.demo-window .crowd-row { display: grid; grid-template-columns: 45px 1fr 45px; align-items: center; font-size: 10px; }
.demo-window .crowd-row .bar-track { height: 5px; background: #ffffff0a; }
.demo-window .crowd-row span:last-child { text-align: right; color: var(--muted); }
.demo-window .crowd-row.best .bar-fill { background: var(--blue); }
.demo-window .crowd-row.best span:last-child { color: var(--blue); }
.demo-window .crowding p { font-size: 10px !important; color: var(--muted); }

/* Activity. */
.demo-window .history-total { font-size: 24px; font-weight: 700; }
.demo-window .native-history-apps .bar-fill { background: #b096fab3; }
.demo-window .native-history-apps h3 { margin-bottom: 16px; }

/* Profiles (ProfilesView). */
.demo-window .native-profile { display: flex; align-items: center; gap: 14px; }
.demo-window .profile-tile { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 45px; border-radius: 12px; background: #ffffff08; color: var(--muted); }
.demo-window .native-profile.selected .profile-tile { color: var(--violet); }
.demo-window .profile-tile .native-symbol { width: 20px; height: 18px; background: currentColor; }
.demo-window .native-profile > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.demo-window .native-profile strong { font-size: 11px; font-weight: 600; }
.demo-window .native-profile small { font-size: 11px; color: var(--muted); }
.demo-window .native-profile > .native-symbol { color: #a3a8bf66; background: currentColor; }
.demo-window .native-profile.selected > .native-symbol { color: var(--violet); }
.demo-window .profile-options { display: flex; flex-direction: column; gap: 16px; }
.demo-window .profile-options label { display: flex; justify-content: flex-start; align-items: center; gap: 6px; font-size: 12px; }
.demo-window .profile-options p { margin: 0; font-size: 11px !important; color: var(--muted); }
.demo-window .profile-options hr { border: 0; border-top: 1px solid #ffffff0a; margin: 0; }
.demo-window .terminal-card { display: flex; flex-direction: column; gap: 12px; }
.demo-window .terminal-card h3 { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; margin: 0; }
.demo-window .terminal-card pre { margin: 0; font: 11px/18px ui-monospace, SFMono-Regular, monospace; color: var(--violet); }

/* Wi-Fi menu (WiFiMenuView). */
.demo-window .wifi-heading { margin-bottom: 10px; }
.demo-window .wifi-heading h2 { font-weight: 600; }
.demo-window .wifi-heading .switch { width: 32px; height: 18px; }
.demo-window .wifi-heading .switch:after { width: 14px; height: 14px; }
.demo-window .search-row .icon-button { width: 20px; height: 20px; flex-basis: 20px; }
.demo-window .nearby-label { margin: 10px 0; }
.demo-window .network-list { margin-bottom: 10px; }
.demo-window .network-row strong { line-height: 14px; }
.demo-window .network-row .network-meta { line-height: 12px; }
.demo-window .back-action { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px !important; font-size: 12px !important; font-weight: 500; color: var(--muted); }
.demo-window .back-action .native-symbol { width: 10px; height: 11px; }
.demo-window .password-field { position: relative; }
.demo-window .password-field input { padding-right: 28px !important; }
.demo-window .password-field .icon-button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: none; color: var(--muted); }
.demo-window .panel-footer button[data-action="show-app"] { gap: 4px; }
.demo-window .panel-footer button[data-action="show-app"] .mini-bat { color: var(--muted); }
.native-menu.hotspot-popover { width: 300px; padding: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 12px; }
.native-menu.hotspot-popover h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
.native-menu.hotspot-popover p { margin: 0; font-size: 12px; }
.native-menu.hotspot-popover p + p, .native-menu.hotspot-popover hr + p { color: #a3a8bf; }
.native-menu.hotspot-popover button { padding: 0; font-size: 12px; text-align: left; }
#demo-dialog .menu-prefs { display: flex; flex-direction: column; gap: 16px; }
#demo-dialog .menu-prefs h3 { font-size: 14px; font-weight: 600; margin: 0; }
#demo-dialog .menu-prefs label { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
#demo-dialog .menu-prefs p { margin: 0; font-size: 11px; color: #a3a8bf; }
.demo-window .speed-card header { display: flex; align-items: center; gap: 6px; }
.demo-window .speed-card header h3 { flex: 1; }
.demo-window .speed-card header .native-spinner { width: 12px; height: 12px; transform: none; }
.demo-window .readiness span { text-align: left; }

/* Dashboard window (DashboardView, ConnectionsWorkspace, HistoryWorkspace). */
.dashboard-frame { position: relative; width: min(1060px, 100%); margin: 0 auto; }
.site .dashboard-frame .dash-window {
  position: absolute; top: 0; left: 0; right: auto; width: 1060px; max-width: none; height: 720px; min-height: 0; margin: 0;
  padding: 0; display: flex; flex-direction: column; border-radius: 12px;
  transform: scale(var(--scale, 1)); transform-origin: top left;
  background: radial-gradient(490px circle at 0 0, #3d2e7a99, transparent), #11121d;
  box-shadow: 0 50px 120px -40px #000, 0 0 0 1px #ffffff1f;
}
.dash-traffic { position: absolute; top: 12px; left: 14px; display: flex; gap: 8px; }
.dash-traffic i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.dash-traffic i:nth-child(2) { background: #febc2e; }
.dash-traffic i:nth-child(3) { background: #28c840; }
.dash-nav { display: flex; align-items: center; gap: 6px; padding: 30px 22px 18px; }
.dash-nav .dash-bat { width: 24px; height: 22px; margin-right: 10px; color: var(--violet); }
.dash-nav button[data-dash] { padding: 9px 10px !important; border-radius: 99px; background: none; color: #edeffc; font-size: 12px !important; font-weight: 600; }
.dash-nav button[data-dash][aria-pressed="true"] { background: #b096fa3b; }
.dash-nav button[data-dash]:hover { background: #ffffff0d; }
.dash-nav .spacer, .dash-connections .spacer { flex: 1; }
.dash-nav .bare-icon { margin-left: 10px; }
/* Like the app's ScrollView: a fixed window, content scrolls inside, fading at the bottom edge. */
.dash-content { flex: 1; min-height: 0; height: auto !important; padding: 0 20px 28px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto !important; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #ffffff26 transparent;
  mask-image: linear-gradient(#000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); }
.dash-content > * { flex-shrink: 0; }
.dash-content[data-tab="Wi-Fi"], .dash-content[data-tab="Radar"], .dash-content[data-tab="Speed"] { align-items: center; }
.dash-narrow { width: 100%; max-width: 850px; display: flex; flex-direction: column; gap: 12px; }
.dash-footer { padding: 8px 22px !important; border-top: .5px solid #ffffff24; }
.dash-footer .tag.violet { background: #b096fa1c !important; color: var(--violet) !important; }
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-metric { display: flex; flex-direction: column; gap: 14px; height: 138px; padding: 14px; border-radius: 9px; background: #ffffff09; box-shadow: inset 0 0 0 1px #ffffff0e; text-align: left; }
.dash-metric h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.dash-metric h3 .native-symbol { width: 13px; height: 12px; }
.dash-metric.rate { gap: 10px; }
.dash-metric.rate.blue h3, .dash-metric.rate.blue .sparkline { color: var(--blue); }
.dash-metric.rate.violet h3, .dash-metric.rate.violet .sparkline { color: var(--violet); }
.dash-metric strong { font: 700 24px/1.1 var(--rounded); font-variant-numeric: tabular-nums; color: #edeffc; }
.dash-metric p { margin: auto 0 0; font-size: 11px; color: var(--muted); }
.dash-metric .sparkline { height: 28px; width: 100%; }
.dash-metric-button { padding: 0 !important; background: none !important; text-align: left; display: block; }
.dash-metric-button:hover .dash-metric { background: #ffffff10; }
.dash-apps .dash-row { display: grid; grid-template-columns: 8px 22px minmax(0, 1fr) 80px 80px 80px 80px 60px 40px; gap: 7px; align-items: center; padding: 8px 11px; font-size: 10px; font-variant-numeric: tabular-nums; background: linear-gradient(#ffffff09, #ffffff09) bottom / calc(100% - 22px) 1px no-repeat; }
.dash-apps .dash-row > span:not(.dash-app):not(.app-icon), .dash-apps .dash-row code { text-align: right; }
.dash-apps .dash-row > .native-symbol { width: 8px; height: 8px; color: var(--muted); }
.dash-apps .dash-row .blue { color: var(--blue); }
.dash-apps .dash-row .violet { color: var(--violet); }
.dash-apps .dash-row code { font: 10px ui-monospace, monospace; color: var(--muted); }
.dash-apps .dash-row .native-rule { justify-self: end; }
.dash-apps .dash-app { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 500; }
.dash-apps .dash-app small { font-size: 9px; font-weight: 400; color: var(--blue); }
.dash-apps .dash-app small.idle { color: var(--muted); }
.dash-apps .dash-head { padding-bottom: 5px; background: none; font: 600 8px ui-monospace, monospace; letter-spacing: .8px; color: var(--muted); }
.dash-apps .dash-head > span:nth-child(2) { grid-column: 2 / 4; text-align: left !important; }
.dash-panel { padding: 16px; border-radius: 9px; background: #ffffff09; box-shadow: inset 0 0 0 1px #ffffff0e; display: flex; flex-direction: column; gap: 14px; }
.dash-panel h3, .history-section h3 { margin: 0; font-size: 13px; font-weight: 600; }
.dash-history { display: flex; flex-direction: column; gap: 16px; }
.dash-history > header { display: flex; align-items: center; gap: 12px; }
.dash-history h2 { flex: 1; margin: 0; font: 700 22px var(--rounded); }
.dash-history .native-picker { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #edeffc; }
.dash-history select { background: #ffffff12; color: inherit; border: 1px solid #ffffff1a; border-radius: 6px; padding: 3px 6px; font: inherit; }
.history-top { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }
.delay-chart { width: 100%; height: 190px; }
.legend { display: flex; gap: 18px; font-size: 10px; color: var(--muted); }
.legend i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }
.events header { display: flex; justify-content: space-between; align-items: center; }
.event { display: flex; gap: 8px; }
.event > i { width: 6px; height: 6px; margin-top: 5px; flex-shrink: 0; border-radius: 50%; background: var(--violet); }
.event > i.rose { background: var(--rose); }
.event strong { font-size: 11px; font-weight: 600; }
.event p { margin: 4px 0 0; font-size: 10px; color: var(--muted); }
.event small { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); }
.speed-compare { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.speed-compare th { padding: 4px 8px; text-align: left; font-weight: 400; color: var(--muted); border-bottom: 1px solid #ffffff14; }
.speed-compare td { padding: 6px 8px; }
.speed-compare tbody tr:nth-child(even) { background: #ffffff06; }
.speed-compare .blue { color: var(--blue); }
.speed-compare .violet { color: var(--violet); }
.history-section { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.dash-subsection { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 9px; background: #00000029; box-shadow: inset 0 0 0 1px #ffffff0a; }
.dash-subsection button { padding: 7px 12px !important; border-radius: 6px; background: none; color: var(--muted); font-size: 11px !important; font-weight: 500; }
.dash-subsection button[aria-pressed="true"] { background: #ffffff14; color: #edeffc; }
.dash-connections > header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dash-connections h2 { margin: 0; font: 700 20px var(--rounded); }
.dash-connections .tag.blue { background: #66b3fa1c !important; color: var(--blue) !important; }
.dash-connections .check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.mini-switch { position: relative; width: 26px; height: 15px; border-radius: 99px; background: var(--violet); }
.mini-switch:after { content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.mac-button { padding: 3px 10px !important; border-radius: 6px; background: #ffffff1f !important; color: #edeffc; font-size: 12px !important; }
.mac-button.small { font-size: 11px !important; }
.mac-button.rose { color: var(--rose); }
.mac-button:disabled { opacity: .4; }
.dash-connections .split { display: grid; grid-template-columns: 180px minmax(0, 1fr) 280px; min-height: 360px; border-radius: 12px; background: #ffffff06; }
.process-list { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-right: 1px solid #ffffff10; }
.process-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px !important; border-radius: 7px; background: none; text-align: left; }
.process-list button[aria-pressed="true"] { background: #b096fa29; }
.process-list strong { font-size: 11px; font-weight: 500; }
.process-list small { font-size: 9px; color: var(--muted); }
.socket-pane { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0; border-right: 1px solid #ffffff10; }
.mac-field { width: 100%; padding: 4px 8px; border-radius: 6px; border: 1px solid #ffffff1f; background: #ffffff0d; color: #edeffc; font: 12px -apple-system, sans-serif; }
.socket-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.socket-table th { padding: 4px 8px; text-align: left; font-weight: 400; color: var(--muted); border-bottom: 1px solid #ffffff14; }
.socket-table td { padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.socket-table td:first-child { width: 26%; }
.socket-table td:nth-child(3) { width: 16%; }
.socket-table td:nth-child(4) { width: 22%; }
.socket-table code { font: 11px ui-monospace, monospace; }
.socket-table tbody tr { cursor: pointer; }
.socket-table tbody tr:nth-child(even) { background: #ffffff06; }
.socket-table tbody tr[aria-selected="true"] { background: #2f62d9; color: #fff; }
.socket-table tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.footnote { margin: 0; font-size: 10px; color: var(--muted); }
.inspector { display: flex; flex-direction: column; gap: 15px; padding: 16px; font-size: 11px; }
.inspector h3 { margin: 0; font: 700 17px var(--rounded); }
.inspector .muted { margin: 0; color: var(--muted); }
.inspector .small { font-size: 10px; }
.inspector .tiny { font-size: 10px; }
.inspector code { font: 11px ui-monospace, monospace; word-break: break-all; }
.inspector .row { display: flex; gap: 8px; }
.inspector hr { width: 100%; margin: 0; border: 0; border-top: 1px solid #ffffff14; }
.inspector .native-picker { display: flex; align-items: center; gap: 6px; }
.inspector select { background: #ffffff12; color: inherit; border: 1px solid #ffffff1a; border-radius: 6px; padding: 2px 6px; font: inherit; }
.inspector.empty { gap: 12px; padding: 18px; }
.inspector.empty > .native-symbol { width: 34px; height: 28px; color: var(--violet); }
.inspector.empty h3 { font: 600 14px -apple-system, sans-serif; }
.inspector.empty p { margin: 0; font-size: 12px; color: var(--muted); }
.site .section .dash-window h2 { line-height: 1.2; letter-spacing: 0; text-wrap: initial; }
.site .section .dash-window .dash-connections h2 { font: 700 20px var(--rounded); }
.site .section .dash-window .dash-history h2 { font: 700 22px var(--rounded); }