:root {
  --primary:#087f8c;--primary-hover:#066570;--primary-text:#07646e;
  --primary-soft:#e5f4f4;--text-on-primary:#fff;
  --bg-light:#f3f6fa;--bg-white:#fff;--bg-card:#fff;
  --text-primary:#142b43;--text-secondary:#455c72;--text-muted:#5f7185;
  --border:#dce5ee;--radius:10px;
  --shadow-sm:0 1px 2px rgb(20 43 67 / .035);
  --shadow-md:0 4px 18px rgb(20 43 67 / .055);
}
[data-theme='dark'] {--primary-text:#80dcd8;--primary-soft:#133b43;--bg-light:#101c2b;--bg-white:#192a3d;--bg-card:#192a3d;--text-primary:#edf4fb;--text-secondary:#c7d5e3;--text-muted:#a3b6c9;--border:#30465d}
@media(prefers-color-scheme:dark){:root:not([data-theme='light']){--primary-text:#80dcd8;--primary-soft:#133b43;--bg-light:#101c2b;--bg-white:#192a3d;--bg-card:#192a3d;--text-primary:#edf4fb;--text-secondary:#c7d5e3;--text-muted:#a3b6c9;--border:#30465d}}
html body .sidebar {background:#142b43;border-color:#294157;color:#d6e5f0}
.sidebar .sidebar-header {min-height:100px;padding-block:22px;border-color:#294157}
.sidebar .brand-name {font-size:23px;letter-spacing:-.7px;color:#fff;line-height:1.2}
.sidebar .sidebar-logo {width:36px;height:36px}
.sidebar .brand-project {font-size:11px;color:#a9c5d9;overflow:hidden;text-overflow:ellipsis;max-width:165px;margin-top:4px}
.sidebar .brand-version {color:#a9c5d9;opacity:1;font-size:10px}
.sidebar .brand-update {color:#bcece8;background:#224854;font-size:10px}
.sidebar .sidebar-nav {padding:18px 12px;gap:5px}
.sidebar .nav-item {color:#c3d6e7;padding:12px 14px;font-size:13px;font-weight:550;border-radius:8px;min-height:44px}
.sidebar .nav-item:hover {background:#203c55;color:#fff}
.sidebar .nav-item.active {background:#25505e;color:#fff;box-shadow:inset 3px 0 #7be0d2}
.sidebar .nav-item.active svg {color:#7be0d2}
.sidebar .sidebar-footer {border-color:#294157;padding:12px}
.sidebar .theme-toggle-btn,.sidebar .logout-btn {color:#c3d6e7;border-color:#365168;min-height:42px;font-size:12px}
.sidebar .theme-toggle-btn:hover {background:#203c55;color:#fff}
.sidebar .logout-btn:hover {background:#53343e;color:#ffd4d4;border-color:#865765}
.sidebar .language-menu-list {background:var(--bg-white)}
.sidebar .language-menu-item {color:var(--text-secondary)}
.mobile-brand .brand-name {color:var(--text-primary);font-weight:800}
.main-content .page-header h1,.chats-page .chats-topbar h1 {font-size:clamp(25px,2vw,32px);letter-spacing:-.8px;line-height:1.2}
.main-content .page-header {margin-bottom:28px;row-gap:6px}
.main-content .page-header__subtitle {max-width:76ch;line-height:1.6}
.main-content .card {box-shadow:var(--shadow-sm);border-color:var(--border)}
.main-content .form-group>label,.main-content .eyebrow {text-transform:none;letter-spacing:0;font-size:13px}
.main-content :is(input,select,textarea) {border-color:var(--border)}
.main-content :is(input,select,textarea):focus-visible {outline:2px solid var(--primary);outline-offset:2px}
.main-content :is(button,a):focus-visible,.sidebar :is(button,a):focus-visible {outline:3px solid #64cec5;outline-offset:3px}
.main-content th {font-size:12px;letter-spacing:0;text-transform:none;white-space:normal}
.main-content td {line-height:1.6}
.main-content .chats-layout {box-shadow:var(--shadow-sm);border-radius:12px}
.main-content .account-send-counts {border-top:3px solid var(--primary);border-radius:10px;padding:16px 18px}
.main-content details.card>summary {color:var(--primary-text);list-style-position:inside;line-height:1.6}
.login-container .login-card {max-width:460px;padding:36px;border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:16px}
.login-container .logo-icon {width:72px;height:72px}
.login-container .login-logo {gap:12px}
.login-container .superwa-login-title {font-size:30px;letter-spacing:-1px;line-height:1.15}
.login-container .brand-project {font-size:13px;color:var(--text-secondary);overflow-wrap:anywhere}
.login-container .connect-btn {background:var(--primary);color:#fff;min-height:46px}
.login-container .connect-btn:hover:not(:disabled) {background:var(--primary-hover)}
@media(max-width:767px){.main-content .page-header{margin-bottom:22px}.sidebar .sidebar-header{min-height:92px}.login-container .login-card{padding:24px}.main-content .account-send-counts{padding:12px}.main-content .chats-page{padding:16px}.main-content .page-header__actions{flex-wrap:wrap;justify-self:stretch;gap:10px}}
@media(prefers-reduced-motion:reduce){.sidebar,.main-content,.sidebar *{transition:none!important;animation:none!important}}
.main-content details.card {background:var(--bg-white);border:1px solid var(--border);border-radius:12px;padding:0 20px 20px}
.main-content .account-send-counts td {font-variant-numeric:tabular-nums}

/* Route styles load lazily; keep the shared shell rules more specific. */
html .login-container{position:relative;inset:auto;min-height:100dvh;height:auto;overflow:visible;padding:24px;gap:20px}
html .login-container .login-card{max-width:460px;padding:32px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md)}
html .login-container .logo-icon{width:72px;height:72px}
html .login-container .login-logo{gap:12px;margin-bottom:24px}
html .login-container .superwa-login-title{font-size:30px;line-height:1.2}
html .login-container .login-footer{position:static;margin:0;flex-shrink:0}
.main-content .page-header__actions{flex-wrap:wrap;max-width:100%;min-width:0}
.main-content .table-container{max-width:100%;overflow-x:auto}
@media(max-width:767px){html .login-container{padding:20px 16px}html .login-container .login-card{padding:24px}.main-content details.card{padding:0 14px 14px}.main-content .page-header__actions>button{max-width:100%;white-space:normal}}

/* Shared workspace polish; chat internals keep their existing layout. */
html .main-content > :is(.dashboard,.sessions-page,.webhooks-page,.templates-page,.api-keys-page,.message-tester,.infrastructure-page,.plugins-page,.logs-page){padding:32px;min-width:0;box-sizing:border-box}
html .main-content .page-header{padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:26px;column-gap:24px;row-gap:8px}
html .main-content .page-header h1{font-weight:750;overflow-wrap:anywhere}
html .main-content .page-header__subtitle{margin-top:0;font-size:14px;line-height:1.7}
html .main-content :is(.btn-primary,.btn-secondary,.btn-danger){min-height:44px;border-radius:10px;font-size:14px;font-weight:600;justify-content:center;line-height:1.5}
html .main-content .btn-primary,html .main-content .send-btn{color:var(--text-on-primary);background:var(--primary)}
html .main-content .btn-primary:hover:not(:disabled),html .main-content .send-btn:hover:not(:disabled){background:var(--primary-hover)}
html .main-content :is(.btn-secondary,.btn-primary,.btn-danger):disabled{cursor:not-allowed}
html .main-content :is(.card,.session-card,.stat-card,.infra-card,.queue-stat-card,.compose-panel,.response-panel,.plugin-card,.webhook-card,.keys-table-container,.logs-table-container,.sessions-table-container,.templates-workspace){border-color:var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
html .main-content :is(.form-group>label,.group-label,.info-label){text-transform:none;letter-spacing:0;font-size:13px;line-height:1.6}
html .main-content :is(.templates-library-header,.template-editor-header,.template-preview-header) h2{font-size:14px;letter-spacing:0;text-transform:none}
html .main-content :is(.filters-bar,.page-header__actions,.card-actions){gap:12px;flex-wrap:wrap}
html .main-content :is(.search-input,.filter-group){min-height:44px;box-sizing:border-box;min-width:0}
html .main-content .search-input input{min-width:0}
html .main-content :is(.keys-table-container,.logs-table-container,.sessions-table-container,.table-container){overflow-x:auto;max-width:100%;overscroll-behavior-inline:contain;scrollbar-width:thin}
html .main-content :is(.keys-table,.logs-table,.sessions-table) th{font-size:12px;letter-spacing:0;text-transform:none;color:var(--text-secondary);padding-block:16px}
html .main-content :is(.keys-table,.logs-table,.sessions-table) td{padding-block:16px;font-size:13px;line-height:1.6}
html .main-content :is(.keys-table,.logs-table,.sessions-table) tbody tr:hover{background:var(--primary-soft)}
html .main-content :is(.sessions-grid,.stats-grid,.tester-panels,.plugins-grid){gap:20px}
html .main-content .modal{border:1px solid var(--border);box-shadow:var(--shadow-md)}
@media(max-width:768px){
 html .main-content > :is(.dashboard,.sessions-page,.webhooks-page,.templates-page,.api-keys-page,.message-tester,.infrastructure-page,.plugins-page,.logs-page){padding:20px 16px}
 html .main-content .page-header{padding-bottom:18px;margin-bottom:22px;gap:10px}
 html .main-content .page-header h1{font-size:25px}
 html .main-content .page-header__subtitle{font-size:13px}
 html .main-content .page-header__actions{margin-top:4px}
 html .main-content .page-header__actions>button{flex:1 1 150px;width:auto}
 html .main-content :is(.filters-bar,.card-actions){gap:10px}
 html .main-content .filters-bar>:is(.search-input,.filter-group){flex:1 1 220px;max-width:none;width:100%}
 html .main-content :is(.compose-panel,.response-panel,.infra-card,.session-card){padding:18px}
 html .main-content .templates-session-select{min-width:0;width:100%}
 html .main-content :is(.keys-table,.logs-table,.sessions-table){min-width:640px}
 html .main-content .plugins-grid{grid-template-columns:minmax(0,1fr)}
 html .main-content :is(.form-group input:not([type=checkbox]):not([type=radio]),.form-group select,.form-group textarea){font-size:16px}
}