/* Shared surface styling; monitoring and access behavior remain in their modules. */
body { font-family:"Segoe UI",Arial,Helvetica,sans-serif; font-size:14px; letter-spacing:0; background:var(--bg); color:var(--text); }
body > header, body.theme-dark > header { grid-template-columns:240px minmax(0,1fr); margin:0; padding:16px 20px; gap:24px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--panel); box-shadow:none; }
.app-brand { display:flex; align-items:center; gap:10px; padding:8px 0; min-width:0; }
.app-brand img { flex:0 0 36px; object-fit:contain; }
.app-brand > div { min-width:0; }
.app-brand h1 { font-size:18px; line-height:1.3; font-weight:650; overflow-wrap:anywhere; }
.app-brand .subtitle { font-size:11px; line-height:1.5; margin-top:3px; color:var(--muted); }
.toolbar { gap:12px; }
.nav-tabs { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0; gap:2px; }
.nav-tabs button { height:38px; padding:0 12px; font-weight:600; font-size:13px; border-radius:4px 4px 0 0; border-bottom:2px solid transparent; color:var(--muted); transition:none; }
.nav-tabs button:hover { color:var(--text); background:var(--panel-2); }
.nav-tabs button.active { background:var(--nav); color:var(--accent); border-bottom-color:var(--accent); }
.control-bar, body.theme-dark .control-bar { justify-content:flex-start; background:transparent; border:0; padding:0; border-radius:0; gap:8px; }
.control-bar select, .control-bar input, .control-bar button { height:34px; border-radius:5px; font-size:12px; font-weight:600; }
.control-bar select, .control-bar input, body.theme-dark .control-bar select, body.theme-dark .control-bar input { border-color:var(--line); background:var(--panel); color:var(--text); }
.control-bar .custom-select-button, body.theme-dark .control-bar .custom-select-button { border-color:var(--line); background:var(--panel); color:var(--text); }
.control-bar .control-action, body.theme-dark .control-bar .control-action, .control-bar #refreshBtn { background:var(--panel-2); color:var(--text); border-color:var(--line); font-weight:600; }
.control-bar .primary-action { color:#fff; background:var(--nav-active); border-color:var(--nav-active); }
.custom-select-menu { background:var(--panel); border-color:var(--line); border-radius:5px; box-shadow:0 4px 14px #0002; }
.custom-select-option { background:var(--panel); color:var(--text); font-weight:500; }
.custom-select-option:hover { background:var(--panel-2); }
.custom-select-option.active { background:var(--nav-active); color:#fff; }
.control-bar #trafficPlayback button { height:34px; }
#trafficPlaybackStatus { font-size:11px; }
#currentAccount { min-height:34px; }
#currentAccountName { font-weight:650; }
#routerSelect { max-width:min(360px,100%); }
#interfaceSearch { min-width:180px; }
body > main { padding:16px 20px 28px; }
.status-line { margin-bottom:12px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.summary { gap:0; margin:0 0 20px; padding:12px 0 18px; border-bottom:1px solid var(--line); }
.summary .metric { border:0; border-right:1px solid var(--line); border-radius:0; background:transparent; padding:4px 16px; box-shadow:none; min-width:0; }
.summary .metric:first-child { padding-left:0; }
.summary .metric:last-child { border-right:0; }
.summary .label { font-size:10px; font-weight:600; line-height:1.4; color:var(--muted); }
.summary .value { font-size:24px; line-height:1.3; font-weight:650; font-variant-numeric:tabular-nums; color:var(--text); overflow-wrap:anywhere; }
.summary .metric:nth-child(2) .value { color:var(--up); }
.summary .metric:nth-child(3) .value { color:var(--down); }
.card { border-radius:6px; box-shadow:none; min-width:0; }
.site { font-weight:650; overflow-wrap:anywhere; }
.vlan { line-height:1.5; }
body.traffic-view .card-head .site { font-weight:650; }
body.traffic-view .traffic-value { font-size:20px; }
.chart.rt-chart { --rx-color:var(--up); --tx-color:var(--accent); }
body.theme-dark .chart.rt-chart { --rx-color:var(--up); --tx-color:var(--accent); }
.rt-chart .rt-tooltip { box-shadow:0 3px 10px #0002; }
#topTraffic { margin-top:0; border-top:0; padding-top:0; }
#topTraffic h2 { font-size:18px; font-weight:650; }
#topTraffic h3 { font-weight:650; }
#topTraffic .tt-metric button { font-family:inherit; }
#topTraffic .tt-interface { font-weight:600; }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:1; font-weight:400; }
button, input, select, textarea { font-family:inherit; }
button { font-weight:600; transition:none; }
button:disabled { cursor:not-allowed; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input[type="checkbox"], input[type="radio"], progress { accent-color:var(--nav-active); }
.admin-form, body.theme-dark .admin-form, .interface-picker, body.theme-dark .interface-picker, .empty-note, body.theme-dark .empty-note { background:var(--panel-2); border-color:var(--line); }
.admin-form input, .admin-form textarea, .admin-form select, body.theme-dark .admin-form input, body.theme-dark .admin-form textarea, body.theme-dark .admin-form select { background:var(--panel); color:var(--text); border-color:var(--line); border-radius:5px; font-size:13px; }
.admin-form label { font-size:11px; font-weight:600; }
.admin-table, body.theme-dark .admin-table { background:var(--panel); border-radius:0; border-color:var(--line); }
.admin-table th, body.theme-dark .admin-table th { color:var(--muted); background:var(--panel-2); font-weight:600; font-size:11px; }
.admin-table td { line-height:1.5; }
.admin-panel > div { min-width:0; overflow-x:auto; }
.admin-panel.trace-fields { grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.admin-panel.report-fields { grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr)); }
.admin-table tbody tr:hover { background:var(--panel-2); }
.admin-actions button, .settings-heading button, .settings-actions button { font-size:13px; border-radius:5px; }
#adminAccessForm button[type="submit"], .settings-actions button, .login-submit { background:var(--nav-active); border-color:var(--nav-active); color:#fff; }
.vpn h2, .ipam h2, .settings-heading h2 { font-size:20px; font-weight:650; }
.vpn h3, .ipam h3 { font-weight:650; }
.vpn th, .ipam th { font-weight:600; }
.vpn-tabs button, .ipam-tabs button { font-weight:600; }
.settings-fields select, .settings-fields textarea { font-family:inherit; }
.login-screen, body.theme-dark .login-screen { background:var(--bg); color:var(--text); }
.login-controls { display:flex; align-items:center; gap:8px; }
.login-controls select { background:var(--panel); color:var(--text); border-color:var(--line); font-size:12px; height:36px; max-width:160px; }
.login-topbar { flex-wrap:wrap; }
body.theme-dark .login-screen { --panel:#1d2024; --panel-2:#25292e; --text:#edf0f3; --muted:#abb2bc; --line:#383e46; }
.login-identity h1 { font-weight:650; font-size:25px; }
.login-field input { font-family:inherit; background:var(--panel); }
.login-submit:hover { background:var(--nav-active); filter:brightness(.94); }
.speedtest-panel, body.theme-dark .speedtest-panel { background:var(--panel); color:var(--text); border-color:var(--line); box-shadow:none; }
.speedtest-go, body.theme-dark .speedtest-go, .speedtest-go.is-testing, body.theme-dark .speedtest-go.is-testing { background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,var(--up),var(--accent)) border-box; color:var(--text); box-shadow:none; }
.speedtest-go.is-testing, body.theme-dark .speedtest-go.is-testing { animation:none; color:transparent; }
.speedtest-go.is-testing::after { border-top-color:var(--accent); border-right-color:var(--up); }
.speedtest-metric span, body.theme-dark .speedtest-metric span, .speedtest-server-item span, .speedtest-limit { color:var(--muted); }
.speedtest-link { color:var(--accent); }
.speedtest-actions button, .speedtest-panel select, body.theme-dark .speedtest-actions button, body.theme-dark .speedtest-panel select { color:var(--text); background:var(--panel-2); border-color:var(--line); }
.speedtest-actions button:first-child { color:var(--accent); border-color:var(--accent); }
.speedtest-panel .chart, body.theme-dark .speedtest-panel .chart { background:var(--panel); border-color:var(--line); }
.error { color:var(--down); }
#cards > .card[style*="grid-column"] { border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; }
@media (max-width:1100px) {
  body > header, body.theme-dark > header { grid-template-columns:minmax(0,1fr); gap:8px; }
  .app-brand { padding:0 0 4px; }
}
@media (max-width:650px) {
  body > header, body.theme-dark > header { padding:14px 12px; }
  body > main { padding:14px 12px 24px; }
  .summary { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:16px; }
  .summary .metric { padding:2px 10px; }
  .summary .metric:nth-child(3n) { border-right:0; }
  .summary .metric:nth-child(3n+1) { padding-left:0; }
  .summary .value { font-size:22px; }
  .nav-tabs button { padding:0 10px; }
  #interfaceSearch { width:100%; min-width:0; }
  .admin-panel { grid-template-columns:minmax(0,1fr); }
  .settings-heading { gap:12px; flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { button { transition:none; } .speedtest-go.is-testing::after { animation-duration:2s; } }