/* Harbor blue palette, semantic status colors, system typography and native controls. */
:root {
  color-scheme: light;
  --bg:#f3f6fb; --bg-elevated:#fff; --bg-subtle:#edf2f8; --bg-hover:#e3ebf7;
  --text:#172a42; --text-secondary:#52637b; --text-tertiary:#5b6b84;
  --separator:#d9e3f0; --control-border:#7d8ca4; --control-bg:#fff;
  --accent:#245db5; --accent-hover:#1b4d99; --accent-soft:#e9f0fd; --accent-edge:#c4d5f2; --accent-strong:#17477f;
  --on-accent:#fff; --material-bg:#ffffffed; --selected-bg:#fff; --selection:#cddffd;
  --sidebar-bg:#12253e; --sidebar-text:#e8f0fc; --sidebar-muted:#b1bfd3; --sidebar-hover:#203953;
  --sidebar-active:#275ba0; --sidebar-edge:#344a64; --sidebar-avatar:#29415f; --sidebar-count:#335c89; --sidebar-focus:#b4d6ff;
  --success:#146957; --success-soft:#e9f6f0; --success-edge:#bcdece;
  --warning:#895000; --warning-soft:#fff5df; --warning-edge:#ead3a3;
  --danger:#a42c3c; --danger-soft:#fff0f2; --danger-edge:#eabec5;
  --lead-bg:#245db5; --lead-text:#fff; --lead-muted:#edf4ff; --lead-icon-bg:#3c6fbf;
  --shadow:0 3px 14px #193b5e08; --dialog-shadow:0 24px 90px #10233d33; --backdrop:#0c1c375c;
  --radius:16px; --control-radius:10px; --sidebar-width:240px; --duration:150ms;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue','Segoe UI','Microsoft YaHei UI',Arial,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Consolas,monospace;
  --paper:var(--bg-elevated); --ink:var(--text); --muted:var(--text-secondary); --line:var(--separator);
  --green:var(--success); --green-light:var(--success-soft); --dark:var(--text); --orange:var(--warning); --red:var(--danger);
}
:root[data-appearance='dark'] {
  color-scheme:dark;
  --bg:#0c1421; --bg-elevated:#142137; --bg-subtle:#1b2c44; --bg-hover:#253c59;
  --text:#e9f0fb; --text-secondary:#b4c3d8; --text-tertiary:#a2b3ca;
  --separator:#304660; --control-border:#7388a5; --control-bg:#172740;
  --accent:#82b5ff; --accent-hover:#a0c7ff; --accent-soft:#1b3457; --accent-edge:#365b87; --accent-strong:#cfe1ff;
  --on-accent:#10213a; --material-bg:#142137ed; --selected-bg:#263e5f; --selection:#315580;
  --sidebar-bg:#0b1628; --sidebar-text:#e8f0fc; --sidebar-muted:#b1bfd3; --sidebar-hover:#172d47;
  --sidebar-active:#234f84; --sidebar-edge:#2b415c; --sidebar-avatar:#1b304c; --sidebar-count:#315a87; --sidebar-focus:#b4d6ff;
  --success:#a0e6ce; --success-soft:#133b34; --success-edge:#336d5c;
  --warning:#f3cb82; --warning-soft:#3b2f1b; --warning-edge:#7b6335;
  --danger:#ffb2ba; --danger-soft:#42232d; --danger-edge:#87515e;
  --lead-bg:#1b4d88; --lead-text:#f8fbff; --lead-muted:#d7e8ff; --lead-icon-bg:#2d609e;
  --shadow:0 3px 16px #030b191f; --dialog-shadow:0 24px 90px #030a1799; --backdrop:#030b1990;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-appearance]) {
    color-scheme:dark;
    --bg:#0c1421; --bg-elevated:#142137; --bg-subtle:#1b2c44; --bg-hover:#253c59;
    --text:#e9f0fb; --text-secondary:#b4c3d8; --text-tertiary:#a2b3ca;
    --separator:#304660; --control-border:#7388a5; --control-bg:#172740;
    --accent:#82b5ff; --accent-hover:#a0c7ff; --accent-soft:#1b3457; --accent-edge:#365b87; --accent-strong:#cfe1ff;
    --on-accent:#10213a; --material-bg:#142137ed; --selected-bg:#263e5f; --selection:#315580;
    --sidebar-bg:#0b1628; --sidebar-text:#e8f0fc; --sidebar-muted:#b1bfd3; --sidebar-hover:#172d47;
    --sidebar-active:#234f84; --sidebar-edge:#2b415c; --sidebar-avatar:#1b304c; --sidebar-count:#315a87; --sidebar-focus:#b4d6ff;
    --success:#a0e6ce; --success-soft:#133b34; --success-edge:#336d5c;
    --warning:#f3cb82; --warning-soft:#3b2f1b; --warning-edge:#7b6335;
    --danger:#ffb2ba; --danger-soft:#42232d; --danger-edge:#87515e;
    --lead-bg:#1b4d88; --lead-text:#f8fbff; --lead-muted:#d7e8ff; --lead-icon-bg:#2d609e;
    --shadow:0 3px 16px #030b191f; --dialog-shadow:0 24px 90px #030a1799; --backdrop:#030b1990;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-width:320px; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.65 var(--font); -webkit-font-smoothing:antialiased; }
::selection { background:var(--selection); color:var(--text); }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,a,select,summary { touch-action:manipulation; }
button:disabled,input:disabled,select:disabled,textarea:disabled { cursor:not-allowed; opacity:.5; }
input[type='checkbox'],input[type='radio'] { width:18px; height:18px; margin:0; accent-color:var(--accent); flex-shrink:0; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:middle; }
:where(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; box-shadow:0 0 0 3px var(--bg-elevated); }
h1,h2,h3,p,dl { margin:0; }
button,a,input,select,textarea { transition:background-color var(--duration),border-color var(--duration),opacity var(--duration); }
.skip-link { position:fixed; top:-80px; left:16px; z-index:100; padding:12px 18px; border-radius:10px; background:var(--accent); color:var(--on-accent); }
.skip-link:focus { top:12px; }
.sidebar {
  --text:var(--sidebar-text); --text-secondary:var(--sidebar-muted); --text-tertiary:var(--sidebar-muted);
  --bg-elevated:var(--sidebar-avatar); --bg-subtle:var(--sidebar-avatar); --bg-hover:var(--sidebar-hover);
  --separator:var(--sidebar-edge); --control-border:var(--sidebar-muted); --selected-bg:var(--sidebar-active);
  position:fixed; inset:0 auto 0 0; z-index:30; width:var(--sidebar-width); padding:24px 16px 16px;
  border-right:1px solid var(--sidebar-edge); background:var(--sidebar-bg); color:var(--sidebar-text); display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar :where(button,a,input,select,summary):focus-visible { outline-color:var(--sidebar-focus); box-shadow:0 0 0 3px var(--sidebar-bg); }
.sidebar-brand-row { display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:11px; min-height:44px; padding:0 10px; font-size:18px; font-weight:650; }
.brand-mark { display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px; flex-shrink:0; border-radius:11px; background:var(--accent); color:var(--on-accent); font-size:27px; font-weight:600; line-height:1; }
.brand-sub { display:block; font-size:11px; line-height:1.5; font-weight:400; letter-spacing:0; color:var(--text-secondary); }
.workspace { display:flex; align-items:center; gap:10px; margin:28px 8px 22px; font-size:13px; }
.workspace small { display:block; font-size:11px; color:var(--text-secondary); margin-top:2px; }
.workspace-avatar { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--separator); border-radius:9px; background:var(--bg-elevated); font-size:13px; font-weight:600; }
.nav-caption { padding:0 12px; margin-bottom:8px; color:var(--text-secondary); font-size:11px; font-weight:550; }
.second-caption { margin-top:27px; }
nav { display:grid; gap:4px; }
nav a { min-height:44px; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--text-secondary); font-size:14px; }
nav a:hover { background:var(--bg-hover); color:var(--text); }
nav a.active { background:var(--selected-bg); color:var(--text); font-weight:600; box-shadow:var(--shadow); }
.nav-count { margin-left:auto; font-size:12px; min-width:24px; text-align:center; border-radius:6px; background:var(--bg-subtle); padding:0 5px; font-variant-numeric:tabular-nums; }
.sidebar .nav-count { background:var(--sidebar-count); color:var(--sidebar-text); }
.sidebar-bottom { margin-top:auto; padding-top:32px; }
.backend-card { padding:18px 12px; border-top:1px solid var(--separator); font-size:12px; }
.backend-card strong { font-size:12px; font-weight:550; }
.backend-card p { margin:6px 0; color:var(--text-secondary); font-size:11px; line-height:1.8; }
.pulse-dot { display:inline-block; width:6px; height:6px; background:var(--sidebar-focus); border-radius:50%; margin-right:6px; }
.sidebar-connect { min-height:44px; width:100%; padding:9px 0; display:flex; align-items:center; justify-content:space-between; text-align:left; font-size:12px; }
.sidebar-connect:hover { text-decoration:underline; text-underline-offset:4px; }
.profile { padding:14px 0 0 8px; border-top:1px solid var(--separator); display:flex; align-items:center; gap:9px; font-size:12px; }
.profile>span:nth-child(2) { flex:1; }
.profile small { display:block; margin-top:2px; font-size:11px; color:var(--text-secondary); }
.profile-avatar,.user-avatar { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; background:var(--bg-subtle); border:1px solid var(--separator); border-radius:50%; font-size:13px; font-weight:550; }
.user-avatar { background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-edge); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; min-height:44px; padding:10px; border-radius:10px; }
.icon-button:hover:not(:disabled) { background:var(--bg-hover); }
.menu-toggle,.sidebar-close { display:none; }
.main-shell { margin-left:var(--sidebar-width); min-height:100vh; min-height:100dvh; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:15; min-height:72px; padding:12px 36px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--separator); background:var(--bg-elevated); }
@supports (backdrop-filter:blur(16px)) { .topbar { background:var(--material-bg); backdrop-filter:blur(16px); } }
.breadcrumb { display:flex; align-items:center; gap:12px; min-width:0; font-size:13px; color:var(--text-secondary); }
.breadcrumb strong { font-weight:550; color:var(--text); white-space:nowrap; }
.slash { color:var(--text-tertiary); }
.topbar-controls,.topbar-actions { display:flex; align-items:center; gap:12px; }
.appearance-control { display:flex; align-items:center; gap:5px; color:var(--text-secondary); font-size:12px; }
.appearance-control select { min-height:44px; max-width:150px; padding:8px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text); font-size:13px; cursor:pointer; }
.appearance-control select:hover { background:var(--bg-hover); }
.appearance-control option { background:var(--bg-elevated); color:var(--text); }
.mode-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); white-space:nowrap; }
.mode-pill>span { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.top-avatar { display:none; }
main { flex:1; width:100%; max-width:1580px; margin:0 auto; min-width:0; padding:36px; }
main:focus { outline:none; }
footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; width:100%; max-width:1580px; margin:0 auto; padding:8px 36px 24px; font-size:11px; line-height:1.8; color:var(--text-secondary); }
.footer-dot { margin:0 6px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px; min-width:0; }
.page-heading>div { min-width:0; }
.page-heading h1 { font-size:28px; line-height:1.35; font-weight:650; }
.page-heading p { margin-top:10px; font-size:14px; line-height:1.8; color:var(--text-secondary); max-width:680px; }
.eyebrow { display:none; }
.actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:1px solid var(--separator); border-radius:var(--control-radius); background:var(--bg-elevated); color:var(--text); font-size:13px; line-height:1.5; font-weight:550; text-align:center; }
.button svg { width:17px; height:17px; }
.button:hover:not(:disabled) { background:var(--bg-hover); }
.button:active { opacity:.75; }
.button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.button.primary:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); }
.button.danger { background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); }
.button.danger:hover:not(:disabled) { background:var(--danger-soft); box-shadow:inset 0 0 0 1px var(--danger); }
.stats-grid,.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:28px; }
.stat-card,.stat { --stat-tone:var(--accent); --stat-icon-bg:var(--accent-soft); min-width:0; padding:22px; border:1px solid var(--stat-edge,var(--separator)); border-radius:var(--radius); background:var(--stat-surface,var(--bg-elevated)); color:var(--text); box-shadow:var(--shadow); }
.stats>.stat:first-child { --text:var(--lead-text); --text-secondary:var(--lead-muted); --stat-tone:var(--lead-text); --stat-icon-bg:var(--lead-icon-bg); --stat-surface:var(--lead-bg); --stat-edge:var(--lead-bg); }
.stats>.stat:nth-child(2) { --stat-tone:var(--success); --stat-icon-bg:var(--bg-elevated); --stat-surface:var(--success-soft); --stat-edge:var(--success-edge); }
.stats>.stat.warn { --stat-tone:var(--warning); --stat-icon-bg:var(--bg-elevated); --stat-surface:var(--warning-soft); --stat-edge:var(--warning-edge); }
.stats>.stat:nth-child(4) { --stat-tone:var(--accent); --stat-icon-bg:var(--bg-elevated); --stat-surface:var(--accent-soft); --stat-edge:var(--accent-edge); }
.stat-label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--text-secondary); }
.stat-label svg { width:34px; height:34px; padding:8px; border-radius:10px; color:var(--stat-tone); background:var(--stat-icon-bg); }
.stat-number { font-size:34px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.3; margin:17px 0 10px; color:var(--stat-tone); }
.stat-number small { font-size:13px; letter-spacing:0; font-weight:400; color:var(--text-secondary); margin-left:6px; }
.stat-note { display:flex; align-items:center; gap:6px; color:var(--text-secondary); font-size:12px; line-height:1.7; }
.stat-note svg { width:14px; height:14px; }
.section-card { min-width:0; background:var(--bg-elevated); border:1px solid var(--separator); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.section-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; flex-wrap:wrap; }
.section-title,.section-top h2 { font-size:16px; font-weight:600; }
.section-top p,.section-subtitle { margin-top:5px; color:var(--text-secondary); font-size:12px; line-height:1.8; }
.panel-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:0 24px 22px; }
.tabs { display:flex; align-items:stretch; gap:4px; min-height:44px; padding:4px; background:var(--bg-subtle); border-radius:12px; max-width:100%; overflow-x:auto; scroll-padding:6px; }
.tabs button,.tabs a { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; min-height:44px; border:1px solid transparent; border-radius:8px; white-space:nowrap; color:var(--text-secondary); font-size:13px; }
.tabs button.selected,.tabs button[aria-pressed='true'],.tabs a.selected { background:var(--accent-soft); color:var(--accent); font-weight:600; border-color:var(--accent-edge); box-shadow:var(--shadow); }
.tabs button:hover { color:var(--text); }
.tabs button:focus-visible { outline-offset:-2px; box-shadow:none; }
.tabs .count { font-size:11px; font-variant-numeric:tabular-nums; }
.search-field { display:flex; align-items:center; gap:9px; min-width:180px; min-height:44px; padding:0 12px; border:1px solid var(--control-border); border-radius:var(--control-radius); background:var(--control-bg); color:var(--text-secondary); }
.search-field svg { width:17px; height:17px; }
.search-field input { min-height:42px; min-width:0; width:100%; max-width:240px; padding:7px 0; border:0; outline:0; box-shadow:none; background:transparent; color:var(--text); font-size:13px; }
.search-field:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.filter-select { min-height:44px; padding:9px 12px; max-width:100%; background:var(--control-bg); border:1px solid var(--control-border); border-radius:var(--control-radius); font-size:13px; }
.table-scroll { overflow:auto; max-height:72vh; max-height:72dvh; overscroll-behavior:contain; scrollbar-color:var(--control-border) transparent; }
table { width:100%; min-width:640px; border-collapse:separate; border-spacing:0; text-align:left; font-size:13px; line-height:1.7; white-space:nowrap; }
th { position:sticky; top:0; z-index:1; padding:12px 16px; background:var(--bg-subtle); color:var(--text-secondary); font-size:12px; font-weight:550; border-block:1px solid var(--separator); }
td { padding:16px; border-bottom:1px solid var(--separator); color:var(--text-secondary); vertical-align:middle; }
th:first-child,td:first-child { padding-left:24px; }
th:last-child,td:last-child { padding-right:24px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--bg-subtle); }
.title-cell { display:flex; align-items:center; gap:12px; }
.row-title { display:block; font-size:14px; font-weight:550; color:var(--text); }
.row-subtitle { font-size:12px; color:var(--text-secondary); margin-top:4px; }
.console-note { white-space:normal; overflow-wrap:anywhere; min-width:120px; max-width:260px; line-height:1.8; }
.console-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px; }
.table-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 10px; border-radius:8px; font-size:12px; font-weight:500; color:var(--accent); }
.table-action:hover:not(:disabled) { background:var(--bg-hover); }
.table-action[data-action='delete-user'],.table-action[data-action='managed-delete'] { color:var(--danger); text-decoration:underline dotted; text-underline-offset:5px; }
.status { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; min-height:28px; border:1px solid var(--separator); border-radius:7px; background:var(--bg-subtle); color:var(--text); font-size:12px; line-height:1.5; white-space:nowrap; }
.status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.status.active { background:var(--success-soft); border-color:var(--success-edge); color:var(--success); }
.status.paused { background:transparent; }
.status.paused::before { width:6px; height:6px; background:transparent; border:1px solid currentColor; }
.status.expired { border-style:dashed; background:var(--danger-soft); border-color:var(--danger-edge); color:var(--danger); }
.status.expired::before { content:'×'; width:auto; height:auto; border:0; background:none; font-size:14px; line-height:1; }
.status.soon { border-style:dashed; background:var(--warning-soft); border-color:var(--warning-edge); color:var(--warning); }
.format,.tag { display:inline-flex; align-items:center; padding:3px 7px; border-radius:6px; background:var(--bg-subtle); border:1px solid var(--separator); color:var(--text-secondary); font-size:12px; line-height:1.5; }
.node-number { color:var(--text); font-size:16px; font-weight:550; font-variant-numeric:tabular-nums; }
.node-number small { color:var(--text-secondary); font-size:12px; font-weight:400; margin-left:5px; }
.date { color:var(--text-secondary); font-size:13px; font-variant-numeric:tabular-nums; }
.date.soon { color:var(--warning); text-decoration:underline dotted; text-underline-offset:5px; }
.pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 20px; padding:14px 24px; border-top:1px solid var(--separator); color:var(--text-secondary); font-size:12px; }
.console-server-address { font:12px/1.8 var(--mono); white-space:normal; overflow-wrap:anywhere; min-width:120px; max-width:210px; }
.console-server-protocols { white-space:normal; min-width:150px; max-width:240px; line-height:2.2; }
.console-server-protocols .format { margin:2px 3px 2px 0; }
.console-server-detail dd { overflow-wrap:anywhere; line-height:1.8; }
.console-server-detail .tag { margin:0 4px 4px 0; }
.console-server-table table { min-width:1200px; }
.console-managed-actions { min-width:205px; max-width:260px; }
.console-node-tabs { margin-bottom:24px; width:max-content; }
.console-workspace-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.console-workspace-shortcuts a { display:flex; align-items:center; gap:12px; padding:18px; min-height:82px; background:var(--bg-elevated); color:var(--text); border:1px solid var(--separator); border-radius:12px; }
.console-workspace-shortcuts a:hover { background:var(--bg-hover); }
.console-workspace-shortcuts a>span:first-of-type { flex:1; min-width:0; }
.console-workspace-shortcuts strong,.console-workspace-shortcuts small { display:block; }
.console-workspace-shortcuts strong { font-size:15px; font-weight:600; }
.console-workspace-shortcuts small { margin-top:4px; color:var(--text-secondary); font-size:12px; }
.console-node-expiry { max-width:28ch; white-space:normal; color:var(--text-secondary); font-size:12px; }
.console-expiry-action { margin-left:-10px; }
.help-banner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; padding:20px 22px; margin:0 0 26px; background:var(--accent-soft); border:1px solid var(--accent-edge); border-radius:var(--radius); }
.help-banner h3 { font-size:14px; font-weight:550; color:var(--accent-strong); }
.help-banner p { margin-top:5px; font-size:13px; line-height:1.8; color:var(--text-secondary); }
.notice { display:flex; align-items:flex-start; gap:10px; padding:16px 20px; margin:22px 0; background:var(--accent-soft); border:1px solid var(--accent-edge); border-radius:12px; color:var(--text-secondary); font-size:13px; line-height:1.8; }
.notice>svg { width:18px; height:18px; margin-top:2px; color:var(--accent); }
.notice strong,.modal-info strong { color:var(--accent-strong); font-weight:550; }
.notice.amber { border-style:dashed; border-color:var(--warning-edge); background:var(--warning-soft); color:var(--warning); }
.notice.amber strong,.notice.amber>svg { color:var(--warning); }
.console-stack { display:grid; gap:24px; }
.console-source { padding:0 24px 24px; }
.console-source .form-field { max-width:640px; }
.console-source .actions { flex-wrap:wrap; }
.console-source .small-muted { margin-top:12px; }
.console-detail { padding:18px 24px; border-top:1px solid var(--separator); }
.console-detail summary,.console-provision-reasons summary { cursor:pointer; color:var(--accent); min-height:44px; padding:10px 0; }
.console-detail p { margin-top:10px; }
.console-error,.modal-error { padding:14px 16px; margin:0 0 18px; border:1px solid var(--danger-edge); border-left:3px solid var(--danger); border-radius:10px; background:var(--danger-soft); color:var(--danger); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.modal-error { display:none; }
.console-error::before,.modal-error::before,.toast.error::before { content:'!'; display:inline-grid; place-items:center; width:17px; height:17px; border:1px solid currentColor; border-radius:50%; font-size:11px; font-weight:600; line-height:1; margin-right:7px; }
.console-intro,.guide { padding:24px; }
.console-intro p,.guide p { font-size:13px; line-height:1.9; color:var(--text-secondary); margin-top:8px; }
.guide h2,.guide h3 { font-size:16px; font-weight:600; }
.console-title-detail { font-size:13px; color:var(--text-secondary); line-height:1.9; max-width:680px; }
.console-quiet-row { padding:18px 24px; border-top:1px solid var(--separator); font-size:13px; color:var(--text-secondary); line-height:1.8; }
.console-mono { font-variant-numeric:tabular-nums; }
.console-caution { color:var(--warning); }
.console-plain-label { font-weight:400!important; }
.console-mobile-label { display:none; }
.small-muted { color:var(--text-secondary); font-size:12px; line-height:1.8; }
.linkish { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.table-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.empty-state { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; padding:60px 24px; text-align:center; }
.empty-state>svg { width:32px; height:32px; color:var(--text-tertiary); stroke-width:1.3; }
.empty-state h3 { font-size:17px; font-weight:550; }
.empty-state p { color:var(--text-secondary); font-size:13px; line-height:1.8; max-width:460px; }
.empty-state .button { margin-top:6px; }
.console-empty-icon { font-size:28px; margin-bottom:14px; color:var(--text-tertiary); }
dialog { padding:0; border:1px solid var(--separator); border-radius:20px; background:var(--bg-elevated); color:var(--text); width:min(580px,calc(100vw - 32px)); max-height:90vh; max-height:min(90dvh,1050px); box-shadow:var(--dialog-shadow); overflow:auto; }
dialog::backdrop { background:var(--backdrop); }
dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
dialog.console-wide { width:min(780px,calc(100vw - 32px)); }
#modal-content,#modal-content>form { display:flex; flex-direction:column; min-width:0; min-height:0; max-height:inherit; overflow:hidden; }
.modal-header { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; padding:14px 24px; background:var(--bg-elevated); border-bottom:1px solid var(--separator); }
.modal-header h2 { font-size:19px; line-height:1.5; font-weight:600; }
.modal-body { flex:1; padding:28px; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; }
.modal-footer { flex-shrink:0; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:18px 28px; background:var(--bg-elevated); border-top:1px solid var(--separator); }
.dialog-description { margin-bottom:24px; font-size:14px; color:var(--text-secondary); line-height:1.8; }
.form-field { display:block; margin-bottom:22px; min-width:0; }
.form-field>span,.form-label { display:block; font-size:13px; line-height:1.6; font-weight:550; margin-bottom:9px; }
.form-field input:not([type='checkbox']):not([type='radio']),.form-field select,.form-field textarea { display:block; width:100%; min-width:0; min-height:46px; padding:11px 13px; border:1px solid var(--control-border); border-radius:var(--control-radius); background:var(--control-bg); color:var(--text); font-size:14px; line-height:1.6; }
.form-field textarea { min-height:112px; resize:vertical; font-family:var(--mono); }
input::placeholder,textarea::placeholder { opacity:1; color:var(--text-tertiary); }
.form-field small { display:block; margin-top:8px; color:var(--text-secondary); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.check-label { display:flex; align-items:center; gap:10px; min-height:44px; padding:9px 0; margin:8px 0 16px; color:var(--text-secondary); font-size:13px; line-height:1.8; cursor:pointer; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:26px; }
.detail-grid>div { min-width:0; }
.detail-grid dt { font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.detail-grid dd { margin:0; color:var(--text); font-size:14px; font-weight:500; overflow-wrap:anywhere; line-height:1.8; }
.link-box { display:block; padding:14px; border:1px dashed var(--control-border); border-radius:10px; background:var(--bg-subtle); font:13px/1.8 var(--mono); overflow-wrap:anywhere; margin-bottom:18px; }
.modal-info { font-size:13px; line-height:1.9; color:var(--text-secondary); background:var(--accent-soft); border:1px solid var(--accent-edge); border-radius:12px; padding:15px 17px; margin-bottom:24px; overflow-wrap:anywhere; }
.console-provision .detail-grid { margin:0; }
.console-provision .modal-info { margin-top:18px; }
.console-provision .console-error { margin-top:18px; }
.console-provision .form-field textarea { font-family:var(--font); }
.console-provision-result h3 { font-size:19px; font-weight:600; margin-bottom:12px; }
.console-provision-result p { font-size:14px; line-height:1.9; color:var(--text-secondary); }
.console-provision-reasons { margin:0 0 22px; color:var(--text-secondary); font-size:12px; line-height:1.9; }
.console-provision-reasons ul { padding-left:20px; max-height:180px; overflow:auto; }
.console-managed-changes { margin:22px 0; }
.console-managed-changes table { min-width:0; table-layout:fixed; }
.console-managed-changes th { position:static; }
.console-managed-changes th,.console-managed-changes td { padding:12px; width:33.333%; white-space:normal; overflow-wrap:anywhere; line-height:1.8; }
.console-pick-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:12px 0; }
.console-pick-toolbar select { max-width:230px; }
.console-pick-summary { margin:12px 0; }
.node-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:4px; max-height:320px; overflow:auto; scroll-padding:6px; }
.node-option { display:flex; align-items:flex-start; gap:10px; min-height:54px; padding:12px; border:1px solid var(--separator); border-radius:10px; font-size:13px; color:var(--text-secondary); cursor:pointer; overflow-wrap:anywhere; }
.node-option input { margin-top:3px; }
.node-option:hover { background:var(--bg-subtle); }
.node-option:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); }
.node-option:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
.node-option:has(input:disabled) { cursor:not-allowed; opacity:1; background:var(--bg-subtle); border-style:dashed; }
.console-node-picker { max-height:300px; }
.console-node-picker .node-option strong { display:block; color:var(--text); font-size:13px; font-weight:550; }
.console-node-picker .node-option small { display:block; font-size:12px; margin-top:5px; line-height:1.8; }
.missing-nodes { margin-top:12px; font-size:12px; line-height:1.8; }
.console-hop-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; }
.console-hop-heading .form-label { margin:0; }
.console-hop-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; margin:16px 0; }
.console-hop-row .form-field { margin:0; min-width:0; }
.console-hop-actions { display:flex; gap:4px; }
.console-hop-actions .button { min-height:44px; padding:9px 10px; font-size:12px; }
.console-chain-options { border-top:1px solid var(--separator); padding-top:20px; margin-top:24px; }
.console-chain-options>.small-muted { margin:0 0 18px; }
.console-chain-fixed { margin-top:18px; }
.console-node-route { padding:18px; margin:22px 0 26px; border:1px solid var(--separator); border-radius:12px; background:var(--bg-subtle); }
.console-node-route .form-label { margin-bottom:12px; }
.console-node-route ol { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; padding:0; margin:0; }
.console-node-route li { position:relative; display:flex; align-items:center; gap:9px; padding:8px 0; max-width:100%; font-size:13px; overflow-wrap:anywhere; }
.console-node-route li+li::before { content:'→'; position:absolute; left:-18px; top:21px; color:var(--text-secondary); }
.console-node-route li>span { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px; border:1px solid var(--control-border); border-radius:50%; color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; }
.console-node-route li small { display:block; color:var(--text-secondary); font-size:11px; line-height:1.8; }
.console-node-route li strong { display:block; color:var(--text); font-size:13px; font-weight:550; line-height:1.7; }
.console-node-route li.is-candidate { border:1px dashed var(--control-border); border-radius:9px; padding:8px 10px; background:var(--bg-elevated); }
.console-node-route li.is-candidate::before { content:'⇢'; }
.console-node-route p { margin-top:8px; color:var(--text-secondary); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.console-relay-pool { border:1px dashed var(--control-border); border-radius:10px; padding:12px!important; background:var(--bg-elevated); }
.console-relay-candidates { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; max-width:360px; }
.console-relay-candidates .format { white-space:normal; overflow-wrap:anywhere; }
.console-metric-value { font-size:22px; line-height:1.5; font-weight:550; font-variant-numeric:tabular-nums; }
.console-metric-bar { display:block; height:5px; border-radius:3px; background:var(--bg-hover); overflow:hidden; margin-top:10px; }
.console-metric-bar > span { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.console-metric-notice { margin-top:24px; }
.console-node-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr)); align-items:end; gap:14px; padding:0 24px 22px; }
.console-node-filters > label { display:block; min-width:0; margin:0; }
.console-node-filters > label > span { display:block; margin-bottom:8px; font-size:12px; color:var(--text-secondary); }
.console-node-filters select { width:100%; min-height:44px; }
.console-node-filters .form-field { margin-bottom:0; }
.console-node-filters .button { align-self:end; }
.console-node-selection { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:14px 24px; border-block:1px solid var(--separator); background:var(--bg-subtle); color:var(--text-secondary); font-size:13px; }
.console-node-selection .actions { flex-wrap:wrap; }
.console-node-choice { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; cursor:pointer; }
.console-node-choice:has(input:disabled) { cursor:not-allowed; }
.console-node-choice:focus-within { outline:2px solid var(--accent); outline-offset:-2px; border-radius:8px; }
th:has(>.console-node-choice),td:has(>.console-node-choice) { width:68px; padding:8px 12px; }
.console-grant-node-list { max-height:170px; overflow:auto; margin:14px 0 24px; padding:12px 16px; border:1px solid var(--separator); border-radius:10px; background:var(--bg-subtle); }
.console-grant-node-list li { margin:5px 0 5px 18px; font-size:13px; overflow-wrap:anywhere; }
.console-grant-node-list > div { overflow-wrap:anywhere; }
.console-grant-node-list > div + div { margin-top:12px; padding-top:12px; border-top:1px solid var(--separator); }
.console-grant-node-list strong { font-size:13px; font-weight:550; }
.console-grant-users { display:grid; gap:8px; max-height:340px; overflow:auto; padding:4px; margin-top:16px; scroll-padding:6px; }
.console-grant-user { display:flex; align-items:flex-start; gap:12px; min-height:60px; padding:12px; border:1px solid var(--separator); border-radius:10px; cursor:pointer; font-size:13px; overflow-wrap:anywhere; }
.console-grant-user input { margin-top:4px; }
.console-grant-user strong { display:block; font-weight:550; color:var(--text); font-size:14px; }
.console-grant-user small { display:block; margin-top:5px; font-size:12px; color:var(--text-secondary); line-height:1.8; }
.console-grant-user:hover,.console-grant-user:has(input:checked) { background:var(--bg-subtle); }
.console-grant-user:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); }
.console-grant-user:has(input:disabled) { opacity:1; cursor:not-allowed; background:var(--bg-subtle); border-style:dashed; }
.console-grant-user:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
.console-tot-editor { display:grid; gap:20px; }
.console-tot-section { padding-top:22px; border-top:1px solid var(--separator); min-width:0; }
.console-tot-section > .form-label { margin-bottom:14px; }
.console-tot-substream { border:1px solid var(--separator); border-radius:12px; padding:18px; margin:16px 0; min-width:0; }
.console-tot-substream .console-hop-heading { margin-top:0; }
.console-tot-route { padding:18px; margin:22px 0 26px; border:1px solid var(--separator); border-radius:12px; background:var(--bg-subtle); }
.console-tot-flow { display:grid; gap:16px; margin-top:14px; min-width:0; }
.console-tot-stage { padding:8px 14px; border-left:2px solid var(--control-border); min-width:0; overflow-wrap:anywhere; }
.console-tot-stage > strong { display:block; font-size:13px; font-weight:550; }
.console-tot-parallel { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px; }
.console-tot-stream-preview { border:1px solid var(--separator); border-radius:10px; padding:14px; min-width:0; background:var(--bg-elevated); }
.console-tot-stream-preview .small-muted { margin-top:8px; }
.console-tot-landing { border:1px dashed var(--control-border); border-radius:10px; padding:14px; background:var(--bg-elevated); }
.console-tot-route > p { font-size:12px; line-height:1.8; color:var(--text-secondary); margin-top:14px; }
.console-provision #node-chain-editor>.small-muted { margin-bottom:16px; }
.console-locked .sidebar,.console-locked .topbar-actions,.console-locked .menu-toggle { display:none; }
.console-locked .main-shell { margin-left:0; }
.console-locked main { padding-top:clamp(32px,7vh,88px); }
.console-auth { max-width:460px; margin:0 auto 40px; padding:36px; border-radius:22px; }
.console-lockup { display:flex; align-items:center; gap:11px; color:var(--text-secondary); font-size:13px; }
.console-lockup .brand-mark { width:32px; height:32px; font-size:24px; border-radius:10px; }
.console-auth h1 { font-size:28px; line-height:1.4; font-weight:650; margin:28px 0 12px; }
.console-auth>p { font-size:14px; color:var(--text-secondary); line-height:1.9; margin-bottom:28px; }
.console-auth input { min-height:48px; }
.console-auth .button { width:100%; min-height:46px; }
.console-locked footer { justify-content:center; }
#toasts { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); right:24px; z-index:80; display:grid; gap:10px; width:min(440px,calc(100vw - 32px)); pointer-events:none; }
.toast { padding:15px 18px; border:1px solid var(--separator); border-left:3px solid var(--accent); border-radius:12px; background:var(--bg-elevated); color:var(--text); box-shadow:0 8px 30px #193b5e18; font-size:13px; line-height:1.8; overflow-wrap:anywhere; animation:toast-in 160ms ease-out; }
.toast.error { border-color:var(--danger-edge); border-left:3px solid var(--danger); background:var(--danger-soft); color:var(--danger); }
@keyframes toast-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1600px) { main { padding:44px 48px; } .topbar { padding-inline:48px; } footer { padding-inline:48px; } }
@media (max-width:1180px) {
  :root { --sidebar-width:220px; }
  main { padding:30px 24px; } .topbar { padding-inline:24px; } footer { padding-inline:24px; }
  .stat-card,.stat { padding:18px; } .stat-number { font-size:30px; }
  .page-heading { align-items:flex-start; } .page-heading .actions { flex-wrap:wrap; justify-content:flex-end; max-width:45%; }
}
@media (max-width:960px) {
  .stats-grid,.stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel-toolbar .search-field { flex:1; } .section-top { gap:14px; }
  .topbar-controls,.topbar-actions { gap:4px; } .appearance-control>span { display:none; }
}
@media (max-width:760px) {
  .sidebar { width:min(280px,calc(100vw - 56px)); visibility:hidden; transform:translateX(-100%); box-shadow:12px 0 50px #00000020; }
  .sidebar.mobile-open { visibility:visible; transform:translateX(0); }
  .sidebar-close,.menu-toggle { display:inline-flex; } .menu-toggle { width:auto; gap:5px; padding-inline:8px; } .menu-toggle-label { font-size:12px; } .main-shell { margin-left:0; }
  .topbar { min-height:68px; padding:10px 16px; gap:4px; } .breadcrumb { flex:1; gap:6px; }
  .breadcrumb strong { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .topbar-controls { flex-shrink:0; }
  .breadcrumb>span,.mode-pill { display:none; }
  .appearance-control select { max-width:120px; font-size:12px; padding-inline:5px; }
  main { padding:26px 16px; } footer { padding:4px 16px 24px; }
  .page-heading { flex-wrap:wrap; gap:20px; margin-bottom:26px; }
  .page-heading h1 { font-size:26px; } .page-heading p { font-size:13px; }
  .page-heading .actions { max-width:100%; flex-basis:100%; justify-content:flex-start; }
  .stats-grid,.stats { gap:12px; margin-bottom:24px; } .stat-number { font-size:30px; }
  .section-top { padding:20px; } .panel-toolbar { padding:0 20px 20px; gap:12px; }
  .panel-toolbar .search-field { flex-basis:100%; } .search-field input { max-width:none; }
  .tabs { width:100%; } .tabs button { flex:1; } .console-node-tabs { width:max-content; }
  .help-banner { padding:20px; } .pagination { padding:14px 20px; }
  .console-source { padding:0 20px 22px; } .console-detail,.console-intro,.console-quiet-row,.guide { padding:20px; }
  .console-node-filters { padding:0 20px 20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .console-node-selection { padding:14px 20px; }
  .console-node-selection .actions { width:100%; }
  dialog,dialog.console-wide { width:calc(100vw - 24px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
  .modal-header { padding:12px 20px; } .modal-body { padding:22px 20px; }
  .modal-footer { padding:16px 20px max(16px,env(safe-area-inset-bottom)); }
  .form-row { grid-template-columns:1fr; gap:0; } .node-options { grid-template-columns:1fr; }
  .console-pick-toolbar select { max-width:100%; flex:1; }
  .console-hop-row { grid-template-columns:1fr; gap:8px; } .console-hop-actions { justify-content:flex-end; }
  .console-hop-heading { align-items:flex-start; flex-wrap:wrap; }
  .console-node-route ol { flex-direction:column; gap:22px; }
  .console-node-route li+li::before { content:'↓'; left:8px; top:-23px; }
  .console-node-route li.is-candidate::before { content:'⇣'; }
  .console-auth { padding:28px 24px; } .console-auth h1 { font-size:26px; }
  .console-workspace-shortcuts { grid-template-columns:1fr; gap:8px; }
  .console-workspace-shortcuts a { min-height:72px; padding:14px 16px; }
  #toasts { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); }
}
@media (max-width:380px) {
  .stats-grid,.stats,.detail-grid { grid-template-columns:1fr; }
  .console-node-filters { grid-template-columns:1fr; }
  .console-auth { padding:24px 20px; } .appearance-control select { max-width:112px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media (prefers-reduced-transparency:reduce) { .topbar { backdrop-filter:none; background:var(--bg-elevated); } }
@media (prefers-contrast:more) {
  :root { --text-secondary:#364763; --text-tertiary:#41516a; --separator:#8092ab; --control-border:#52637b; }
  :root[data-appearance='dark'] { --text-secondary:#dce7f7; --text-tertiary:#ccdaed; --separator:#7c90af; --control-border:#a9bcd6; }
  .sidebar { --sidebar-muted:#d2def0; --sidebar-edge:#607b9d; }
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark) {
  :root:not([data-appearance]) { --text-secondary:#dce7f7; --text-tertiary:#ccdaed; --separator:#7c90af; --control-border:#a9bcd6; }
}
@media (forced-colors:active) {
  :root,:root[data-appearance],:root:not([data-appearance]) { --bg:Canvas; --bg-elevated:Canvas; --bg-subtle:Canvas; --bg-hover:Canvas; --text:CanvasText; --text-secondary:CanvasText; --text-tertiary:CanvasText; --separator:CanvasText; --control-border:ButtonText; --accent:LinkText; }
  .sidebar { --sidebar-bg:Canvas; --sidebar-text:CanvasText; --sidebar-muted:CanvasText; --sidebar-hover:Canvas; --sidebar-active:Canvas; --sidebar-edge:CanvasText; --sidebar-avatar:Canvas; --sidebar-count:Canvas; --sidebar-focus:Highlight; }
  .stats>.stat:first-child { --text:CanvasText; --text-secondary:CanvasText; --stat-tone:CanvasText; --stat-surface:Canvas; --stat-edge:CanvasText; --stat-icon-bg:Canvas; }
  .button,.icon-button,.status,.format,.tag,.tabs button { border:1px solid ButtonText; }
  .button.primary,nav a.active { background:Highlight; color:HighlightText; border-color:Highlight; forced-color-adjust:none; }
  .button.primary:hover:not(:disabled) { background:Highlight; color:HighlightText; border-color:Highlight; }
  :where(button,a,input,select,textarea,summary):focus-visible { outline-color:Highlight; }
  button:disabled,input:disabled,select:disabled,textarea:disabled { color:GrayText; opacity:1; }
  .button.primary:disabled { background:Canvas; color:GrayText; border-color:GrayText; }
  .topbar { backdrop-filter:none; background:Canvas; }
}