/* Compact console design. One token set, one fixed density, WCAG 2.2 safe.
   Contrast notes (measured): --ink 13.25:1 on #fff, --muted 5.41:1 on #fff and 4.98:1 on #f3f6f4,
   --border-control 3.27:1 on #fff / 3.00:1 on #f3f6f4 (interactive boundaries only),
   --border-hairline 1.35:1 (dividers only, never a control boundary), --danger 6.87:1,
   --focus-ring 4.45:1 on #fff, --focus-ring-on-dark 6.64:1 on #17392d. No text below 12px. */
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
 font-size:var(--fs-sm);line-height:1.4;color:var(--ink);background:var(--bg);
 --ink:#1f342b;--muted:#596f63;--green:#126b49;--warn:#72511c;--danger:#a0362b;
 --border-control:#7f9388;--border-hairline:#c9d5ce;
 --focus-ring:#247cc0;--focus-ring-on-dark:#8ec1ee;
 --bg:#f3f6f4;--surface:#fff;--sidebar:#17392d;
 --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:18px;
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
 --row-h:40px;--th-h:32px;--hit:32px;
 /* Height of the sticky bulk toolbar; app.js may override it with the measured height once the toolbar wraps. */
 --sticky-h:44px}
@media(pointer:coarse){:root{--hit:44px}}
*{box-sizing:border-box}body{margin:0;overflow:hidden}#workspace{position:fixed;inset:0}[hidden]{display:none!important}
button,input,select,textarea{font:inherit}button{cursor:pointer}
button:disabled{cursor:not-allowed;color:#4f6659;background:#edf0ee;border-color:var(--border-hairline)}
button,a,input,select,textarea,[tabindex],summary{outline-offset:3px}
:focus-visible{outline:3px solid var(--focus-ring)}
.sidebar :focus-visible{outline-color:var(--focus-ring-on-dark)}
a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}
h1{font-size:var(--fs-lg);line-height:1.25;font-weight:700}h2{font-size:var(--fs-md);line-height:1.25}h3{font-size:var(--fs-sm);line-height:1.25;margin-bottom:var(--sp-1)}
small{font-size:var(--fs-xs)}.muted{color:var(--muted)}
.eyebrow{font-size:var(--fs-xs);letter-spacing:2px;color:var(--muted);margin-bottom:var(--sp-1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-2);top:var(--sp-2);z-index:30;transform:translateY(-300%);background:var(--surface);color:var(--ink);border:2px solid var(--focus-ring);border-radius:6px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:650}
.skip-link:focus{transform:none}
/* Sidebar, topbar and the scrolling page box */
.sidebar{width:176px;position:fixed;inset:0 auto 0 0;background:var(--sidebar);color:#e5f0e9;display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-3)}
.brand{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-4);font-size:var(--fs-md);font-weight:650}
.brand small{display:block;font-size:var(--fs-xs);letter-spacing:2px;color:#b4cbbd;margin-top:var(--sp-1)}
.brand-icon,.monogram{font-size:28px}.brand-icon span,.monogram span{color:#86cda7}
.nav-caption{font-size:var(--fs-xs);color:#b4cbbd;padding:var(--sp-1) var(--sp-2)}
.nav-item{border:0;background:none;width:100%;color:#d2e1d8;display:flex;align-items:center;gap:var(--sp-2);text-align:left;padding:var(--sp-1) var(--sp-2);margin-bottom:var(--sp-1);border-radius:8px;min-height:var(--hit);font-size:var(--fs-sm)}
.nav-item b{margin-left:auto;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.nav-item.active{background:#2b5542;color:#fff}
.sidebar-bottom{margin-top:auto;border-top:1px solid #52715f;padding-top:var(--sp-2);line-height:1.6}
.sidebar-bottom p{font-size:var(--fs-xs)}
.text-button{padding:var(--sp-1) var(--sp-2);color:var(--green);background:none;border:0;min-height:var(--hit);font-size:var(--fs-sm)}
.sidebar .text-button{color:#e5f0e9}
.main{position:fixed;inset:0 0 0 176px;display:flex;flex-direction:column;min-width:0}
.topbar{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:0 var(--sp-4);border-bottom:1px solid var(--border-hairline);background:var(--surface)}
.topbar-title{display:none;font-size:var(--fs-sm);font-weight:650}
.workspace-path{font-size:var(--fs-xs);color:var(--muted)}.workspace-path>span{margin-left:var(--sp-1)}
.topbar-right{display:flex;align-items:center;gap:var(--sp-2)}
.avatar{width:var(--hit);height:var(--hit);border:1px solid var(--border-control);border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);color:#2a4d3c}
.icon-button{border:1px solid transparent;background:none;color:#365b49;font-size:16px;width:var(--hit);height:var(--hit);min-width:var(--hit);padding:0;border-radius:4px;display:inline-grid;place-items:center}
.icon-button:hover:not(:disabled){background:#e4efe8}
.icon-button:disabled{background:none;border-color:transparent;color:#a3b1a9}
.page-content{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;flex:1;min-height:0;padding:var(--sp-3) var(--sp-4);overscroll-behavior:contain;scroll-padding-top:calc(var(--sticky-h) + var(--sp-1))}
.page-content:focus-visible{outline-offset:-3px}
.page-content::-webkit-scrollbar{width:8px}.page-content::-webkit-scrollbar-thumb{background:#9aafa0;border-radius:8px}.page-content::-webkit-scrollbar-track{background:#e4ece6}
/* Page heading and the compact stat strip that replaced four tall cards */
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.page-heading .muted{font-size:var(--fs-xs);margin-top:2px;line-height:1.4;max-width:80ch}
.heading-actions{display:flex;gap:var(--sp-1);align-items:center}
.button{border:1px solid var(--border-control);border-radius:6px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);font-weight:550;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);white-space:nowrap;min-height:var(--hit);background:var(--surface);color:#2a4d3c}
.button.primary{background:var(--green);border-color:var(--green);color:#fff}
.button.subtle{background:var(--surface);border-color:var(--border-control);color:#2a4d3c}
.button:hover:not(:disabled){filter:brightness(.95)}
.button.primary:disabled{background:#e8eeea;color:#4f6659;border-color:var(--border-hairline)}
.stats-grid{display:flex;flex-wrap:wrap;border:1px solid var(--border-hairline);border-radius:8px;background:var(--surface);margin-bottom:var(--sp-2)}
.stats-grid article{flex:1 1 150px;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp-2);padding:var(--sp-1) var(--sp-3);border-left:1px solid var(--border-hairline)}
.stats-grid article:first-child{border-left:0}
.stats-grid article>span{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.stats-grid strong{display:block;font-size:var(--fs-lg);line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats-grid strong small{font-size:var(--fs-xs);margin-left:var(--sp-1);color:var(--muted)}
.stats-grid p{flex:1 1 100%;color:var(--muted);font-size:var(--fs-xs);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Panels and their toolbars */
.panel{background:var(--surface);border:1px solid var(--border-hairline);border-radius:8px;overflow:visible}
.panel-toolbar{padding:var(--sp-1) var(--sp-3);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;min-height:var(--row-h);border-bottom:1px solid var(--border-hairline)}
.panel-toolbar strong{font-size:var(--fs-md);font-weight:650}
.panel-tabs,.table-tools{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap;min-width:0}
.panel-tabs b{background:#eaf0ec;border-radius:4px;padding:0 var(--sp-1);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.search{display:flex;align-items:center;border:1px solid var(--border-control);border-radius:4px;padding:0 var(--sp-2);gap:var(--sp-1);height:var(--hit);margin:0;background:var(--surface);color:var(--muted);font-size:var(--fs-sm)}
.search:focus-within{border-color:var(--focus-ring);box-shadow:0 0 0 1px var(--focus-ring)}
.search>input:not([type=checkbox]){display:block;width:150px;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;font-size:var(--fs-sm);color:var(--ink);outline:none}
.table-tools>select{max-width:120px;border:1px solid var(--border-control);background:var(--surface);border-radius:4px;padding:0 var(--sp-1);min-height:var(--hit);font-size:var(--fs-sm);color:var(--ink)}
.table-scroll{overflow:visible}
.panel-footer{display:flex;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);color:var(--muted);border-top:1px solid var(--border-hairline)}
/* Form controls: every interactive boundary uses --border-control, dividers use --border-hairline */
label{display:block;font-size:var(--fs-xs);color:#425f4d;margin-top:var(--sp-2)}
label>input:not([type=checkbox]),label>select,label>textarea{display:block;width:100%;border:1px solid var(--border-control);border-radius:4px;padding:var(--sp-1) var(--sp-2);margin-top:2px;font-size:var(--fs-sm);color:var(--ink);background:var(--surface);min-width:0;min-height:var(--hit)}
input::placeholder,textarea::placeholder{color:#5b7365}
textarea{resize:vertical;font-family:ui-monospace,monospace;max-height:128px}
input[type=checkbox]{appearance:none;display:inline-grid;place-items:center;accent-color:var(--green);width:16px;height:16px;min-width:16px;margin:0;vertical-align:middle;background:var(--surface);border:1px solid var(--border-control);border-radius:3px;cursor:pointer}
input[type=checkbox]:checked{background:var(--green);border-color:var(--green)}
input[type=checkbox]:checked::after{content:"✓";color:#fff;font-size:var(--fs-xs);line-height:1}
input[type=checkbox]:disabled{border-color:var(--border-hairline);background:#edf0ee;cursor:not-allowed}
.field-row{display:flex;gap:var(--sp-1)}.grow{flex:1;min-width:0}.port-field{width:88px}
.form-error{color:var(--danger);font-size:var(--fs-xs);line-height:1.5;margin-top:var(--sp-1);white-space:pre-line}
.form-note{font-size:var(--fs-xs);line-height:1.5;color:var(--muted);margin-top:var(--sp-1)}
.fingerprint-box{background:#f3f8f4;border:1px solid var(--border-hairline);border-radius:8px;padding:var(--sp-2);margin-top:var(--sp-2)}
.fingerprint-box>p{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-1) 0}
.fingerprint-box code{font-size:var(--fs-xs);font-family:ui-monospace,monospace;overflow-wrap:anywhere;color:#24573b}
.checkbox-label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);min-height:var(--hit)}
.copy-value{display:block;color:#24573b;background:#f0f5f1;border:1px solid var(--border-control);border-radius:4px;overflow-wrap:anywhere;padding:var(--sp-2);margin-top:var(--sp-1);font-size:var(--fs-xs);font-family:ui-monospace,monospace}
.confirmation-text{font-size:var(--fs-sm);line-height:1.6;color:#365b49;white-space:pre-line}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--sp-4);font-size:var(--fs-xs);line-height:1.5}
.check-row{display:grid;grid-template-columns:16px 64px minmax(0,1fr);align-items:baseline;gap:var(--sp-1);min-width:0}
.check-name{color:#4f6659}.check-value{min-width:0;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.check-required{margin-left:var(--sp-1);font-size:var(--fs-xs);color:var(--muted)}
.check-fail .check-value,.check-fail .check-icon{color:var(--danger);font-weight:600}
.check-ok .check-icon{color:#20623e}.check-ok{color:#20623e}.check-fail{color:var(--danger)}
/* Status pills, tags and the selection toolbar */
.tag{font-size:var(--fs-xs);display:inline-flex;background:#eaf0ec;color:#405e4b;border-radius:4px;padding:0 6px;font-weight:600;line-height:1.6;white-space:nowrap}
.tag.ready{background:#e0f3e7;color:#17613c}.tag.warn{background:#fff1d4;color:var(--warn)}.tag.error{background:#fce6e2;color:var(--danger)}
.status-cards{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:0}
.status-card{min-height:var(--hit);border:1px solid var(--border-control);background:var(--surface);border-radius:4px;padding:0 var(--sp-2);font-size:var(--fs-xs);color:#405e4b;white-space:nowrap}
.status-card.error{color:var(--danger)}.status-card.warn{color:var(--warn)}
.status-card.active{border-color:var(--green);background:#dceee2;box-shadow:inset 0 0 0 1px var(--green);font-weight:600}
.bulk-toolbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1);background:#e5f2e9;border:1px solid var(--border-control);border-radius:6px;padding:var(--sp-1) var(--sp-2);margin-bottom:var(--sp-1);box-shadow:0 4px 12px #142d2518}
.bulk-toolbar .status-reason{flex-basis:100%;margin:0;white-space:normal;overflow:visible;text-overflow:clip}
/* One sticky stack: the row header sits below the toolbar, never under it. */
.server-table th{top:0}
#bulkToolbar:not([hidden])~.panel .server-table th{top:var(--sticky-h)}
tr{scroll-margin-top:calc(var(--sticky-h) + 4px)}
/* Notice: sticky at the top of the page content; .notice.error is the role=alert variant */
.notice{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border:1px solid var(--border-control);background:#e8f5ed;color:#225838;border-radius:6px;font-size:var(--fs-sm);margin-bottom:var(--sp-2);line-height:1.4}
.notice.error{background:#fff0e9;border-color:var(--danger);color:var(--danger)}
.notice .notice-dismiss{margin-left:auto;flex:0 0 auto;border:1px solid currentColor;background:none;color:inherit;border-radius:4px;min-width:var(--hit);min-height:var(--hit);font-size:var(--fs-sm);line-height:1}
.notice .notice-dismiss:hover{filter:brightness(.95)}
/* Empty state (also used by app.js and portal.js when a list is empty) */
.empty,.empty-state{padding:var(--sp-4) var(--sp-3);text-align:center}
.empty-symbol{display:block;color:var(--green);font-size:24px;margin-bottom:var(--sp-2)}
.empty h2,.empty-state h2{font-size:var(--fs-md)}
.empty p,.empty-state p{color:var(--muted);font-size:var(--fs-xs);line-height:1.6;margin:var(--sp-1) 0 var(--sp-3)}
.empty-steps{margin:var(--sp-2) auto var(--sp-3);max-width:60ch;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
/* Servers table: fixed compact density, one line of status, one line of reason */
.server-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;text-align:left;font-size:var(--fs-sm)}
.server-table th{font-size:var(--fs-xs);font-weight:600;color:var(--muted);padding:0 var(--sp-2);background:#edf3ef;border-bottom:1px solid var(--border-hairline);position:sticky;top:0;z-index:2;height:var(--th-h);white-space:nowrap}
.server-table th:nth-child(1){width:20%}.server-table th:nth-child(2){width:24%}.server-table th:nth-child(3){width:15%}.server-table th:nth-child(4){width:14%}.server-table th:nth-child(5){width:27%}
.server-table td{padding:6px var(--sp-2);vertical-align:middle;border-bottom:1px solid var(--border-hairline);min-height:var(--row-h);min-width:0}
.server-table tbody tr{height:var(--row-h)}
.server-table tr:last-child td{border-bottom:0}
.server-table tbody tr:hover{background:#f5faf7}
.server-table tbody tr:focus-visible{outline-offset:-3px}
.server-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-title{display:flex;align-items:center;gap:var(--sp-1);min-width:0}
.server-title .server-name{min-width:0}
.host-text{font-size:var(--fs-xs);font-family:ui-monospace,SFMono-Regular,monospace;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-head{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:nowrap;min-width:0;white-space:nowrap;overflow:hidden}
.relative-time{margin-left:auto;font-size:var(--fs-xs);white-space:nowrap}
.status-reason{font-size:var(--fs-xs);line-height:1.4;color:var(--warn);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overall-cell>.status-reason{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;-webkit-line-clamp:unset;-webkit-box-orient:initial;margin:2px 0 0}
.overall-cell>.install-progress{margin-top:2px}
.disabled-reasons{font-size:var(--fs-xs);line-height:1.4;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selection-check{margin:0;display:inline-flex;align-items:center;justify-content:center;width:var(--hit);height:var(--hit);flex-shrink:0;cursor:pointer}
.environment-cell>div,.account-cell>div,.account-cell>small,.environment-cell>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capacity-line{font-size:var(--fs-xs);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.version-line{display:block;margin-top:1px;font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quota-summary,.numeric{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--fs-xs);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.environment-cell,.account-cell{font-variant-numeric:tabular-nums}
.install-progress{display:block;width:100%;height:4px;margin-top:var(--sp-1);border:0;accent-color:#167149;background:#dce8df}
.install-progress::-webkit-progress-bar{background:#e1eae4;border-radius:4px}
.install-progress::-webkit-progress-value{background:#167149;border-radius:4px}
/* Row actions: one primary step plus an icon cluster on a single line */
.row-actions{display:flex;gap:var(--sp-1);flex-direction:row;align-items:center;justify-content:flex-end;min-width:0}
.action-heading{text-align:right}
.next-button{min-width:88px;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-xs)}
.action-icons{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;min-width:0}
.action-wrap,.danger-action{display:inline-flex}
.danger-action{border-left:1px solid var(--border-hairline);margin-left:2px;padding-left:2px}
.icon-button.labeled{width:var(--hit);min-width:var(--hit);height:var(--hit);min-height:var(--hit);padding:0;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:0;line-height:1}
.action-symbol{font-size:15px}
/* The icon cluster is icon-only in the dense table; the tooltip and aria-label keep the full name. */
.action-label{display:none}
.danger{color:var(--danger)}
/* Hosts with instances: a group row, indented instance rows and the split dialog facts */
.server-table .group-row{background:#eef4f0}
.server-table .group-row td{height:auto;padding-top:2px;padding-bottom:2px}
.group-toggle{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:none;color:#2a4d3c;font-size:var(--fs-xs);padding:0 var(--sp-1);min-height:var(--hit);border-radius:4px}
.group-toggle:hover{background:#e0ebe4}
.group-toggle .caret{display:inline-block;width:12px;text-align:center;color:var(--green);font-size:var(--fs-xs)}
.group-count{white-space:nowrap}
.server-table .instance-row>td:first-child{padding-left:22px}
.split-facts{list-style:none;margin:var(--sp-2) 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--sp-4);font-size:var(--fs-xs)}
.split-facts li{display:flex;justify-content:space-between;gap:var(--sp-2);padding:2px 0;border-bottom:1px solid #edf2ee}
.split-option{border:1px solid var(--border-control);border-radius:8px;padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-2);background:#f6faf7;font-size:var(--fs-xs);line-height:1.5}
.split-option>p{color:var(--muted);margin-top:2px}
.split-blockers{margin:var(--sp-1) 0 0;padding-left:18px;font-size:var(--fs-xs);line-height:1.5;color:var(--danger)}
.split-warning{border:1px solid #c9a25c;background:#fff8e6;color:var(--warn);border-radius:6px;padding:var(--sp-1) var(--sp-2);margin-top:var(--sp-1);font-size:var(--fs-xs);line-height:1.5}
/* API groups: membership tags, member dots and the group dialogs */
.combine-hint{padding:2px var(--sp-3) var(--sp-1);font-size:var(--fs-xs);color:var(--warn)}
.server-groups{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:2px}
.pool-tag{display:inline-flex;align-items:center;gap:var(--sp-1);border:1px solid var(--border-control);background:#eaf3ed;color:#1d5c40;border-radius:4px;padding:0 6px;font-size:var(--fs-xs);font-weight:600;min-height:20px;max-width:100%}
.pool-tag:hover{background:#dcece2}
.pool-tag-icon{font-size:var(--fs-xs);color:#2f7a55}
.rename-button{width:24px;min-width:24px;height:24px;min-height:24px;font-size:var(--fs-xs);color:#4f6b59}
.rename-button .action-symbol{font-size:var(--fs-xs)}
.pool-members{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.pool-member{display:inline-flex;align-items:center;gap:var(--sp-1);border:1px solid var(--border-control);background:var(--surface);border-radius:999px;padding:0 var(--sp-2);font-size:var(--fs-xs);color:#2a4d3c;min-height:26px}
.pool-member:hover{background:#eef6f1}
.pool-member-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pool-dot{width:8px;height:8px;min-width:8px;border-radius:50%;background:#9aafa0;display:inline-block}
.pool-dot.ready{background:#2f9e6b}.pool-dot.warn{background:#c98a1c}.pool-dot.error{background:#c0483a}.pool-dot.muted{background:#9aafa0}.pool-dot.off{background:#b9c6be}
.pool-usage{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.pool-actions{display:flex;flex-direction:column;gap:var(--sp-1);align-items:flex-end}
.pool-item.pool-focus{background:#e8f4ec;box-shadow:inset 0 0 0 2px var(--green)}
.pool-member-list{border:1px solid var(--border-hairline);border-radius:8px;padding:var(--sp-1) var(--sp-3);margin:var(--sp-1) 0}
.pool-member-list legend{font-size:var(--fs-xs);color:var(--muted);padding:0 var(--sp-1)}
.pool-member-row{gap:var(--sp-2)}
.pool-member-row+.pool-member-row{border-top:1px solid #edf2ee}
/* Lists: API entries, jobs, invites, users */
.pool-item{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-hairline)}
.pool-info{flex:1;min-width:0}
.pool-info p,.pool-info code{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1);overflow-wrap:anywhere}
.pool-icon{font-size:20px}
.footnote{font-size:var(--fs-xs);color:var(--muted);line-height:1.6;margin-top:var(--sp-2)}
.job-list{padding:0 var(--sp-3)}
.job-item{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;border-bottom:1px solid var(--border-hairline);overflow-wrap:anywhere}
.job-item>div:first-child{flex:1;min-width:0}
.job-item p{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.job-item time{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.job-item .error-note{color:var(--danger)}
.batch-group{padding:var(--sp-2) 0;border-bottom:1px solid var(--border-hairline)}
.batch-group summary{cursor:pointer;min-height:var(--hit)}
.batch-counts{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.owner-text{font-size:var(--fs-xs);color:#1f6f4a;margin-top:2px}
.invite-form{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end;padding:var(--sp-2) var(--sp-3)}
.invite-form .grow{flex:1;min-width:160px}
.invite-form input[type=number]{width:90px}
.quota-input{width:70px;border:1px solid var(--border-control);border-radius:4px;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-sm);color:var(--ink);background:var(--surface)}
.invite-spent{padding:var(--sp-1) var(--sp-3)}
.invite-spent summary{cursor:pointer;font-size:var(--fs-xs);color:var(--muted)}
#page-users .panel+.panel{margin-top:var(--sp-2)}
.panel+.panel,.overview-grid+.panel,.panel+.overview-grid{margin-top:var(--sp-2)}
/* Fleet overview */
.overview-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-2)}
.metric-card{background:var(--surface);border:1px solid var(--border-hairline);border-radius:8px;padding:var(--sp-2) var(--sp-3)}
.metric-label{font-size:var(--fs-xs);color:var(--muted)}
.metric-value{display:block;font-size:20px;line-height:1.25;margin:2px 0;font-variant-numeric:tabular-nums}
.metric-note{font-size:var(--fs-xs);color:var(--muted)}
.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-bottom:var(--sp-1)}
.overview-grid>.panel{margin-top:0}
.overview-timeline{padding:var(--sp-2) var(--sp-3)}
.timeline-scroll{overflow-x:auto}
.timeline-chart{width:100%;height:140px;display:block}
.timeline-bar{fill:#9ec9ad}.timeline-bar.is-failed{fill:#cf7a5c}
.overview-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.overview-table th{padding:var(--sp-1) var(--sp-2);text-align:left;background:#edf3ef;border-bottom:1px solid var(--border-hairline);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.overview-table td{padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--border-hairline);overflow-wrap:anywhere;font-size:var(--fs-xs)}
.overview-table td.numeric,.overview-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.overview-table tr:last-child td{border-bottom:0}
.overview-warn td{background:#fff8e6;color:var(--warn)}
.overview-sort{border:0;background:none;padding:0;font:inherit;font-weight:600;color:inherit}
.overview-sort:hover{color:var(--green)}
.overview-link{color:var(--green);font-weight:600}.overview-link:hover{text-decoration:underline}
.overview-recent td{white-space:nowrap}
.overview-failures,.overview-coverage{padding:var(--sp-2) var(--sp-3)}
.overview-failure,.overview-coverage-line{display:flex;justify-content:space-between;gap:var(--sp-2);padding:2px 0;font-size:var(--fs-xs);border-bottom:1px solid var(--border-hairline)}
.overview-failure-label{overflow-wrap:anywhere}
.overview-missing{margin:var(--sp-1) 0 0;padding-left:18px;font-size:var(--fs-xs);line-height:1.6;color:var(--danger)}
.overview-empty{padding:var(--sp-3);font-size:var(--fs-xs);color:var(--muted)}
/* Portal and overview data tables scroll sideways instead of hiding their headers */
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th{padding:var(--sp-1) var(--sp-2);text-align:left;background:#edf3ef;border-bottom:1px solid var(--border-hairline);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.data-table td{padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--border-hairline);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.data-table tr:last-child td{border-bottom:0}
/* Money: right-aligned tabular figures, never wrapped; an unpriced model is named under its card. */
.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.job-cost{text-align:right;margin-top:var(--sp-1)}
.data-table td.num,.data-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.metric-note+.metric-note{margin:2px 0 0}
.cost-unpriced{color:var(--warn)}
/* Shared components for the JS tasks: menu, pager, skeleton rows */
.menu{position:absolute;z-index:20;min-width:184px;max-width:280px;margin:0;padding:var(--sp-1);list-style:none;background:var(--surface);border:1px solid var(--border-control);border-radius:6px;box-shadow:0 12px 32px #122e2530;font-size:var(--fs-sm);color:var(--ink)}
.menu-anchor{position:relative;display:inline-flex}
.menu-anchor>.menu{top:calc(100% + 4px);right:0}
.menu [role=menuitem]{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:var(--hit);padding:0 var(--sp-2);border:0;border-radius:4px;background:none;color:inherit;font-size:var(--fs-sm);text-align:left;white-space:nowrap;cursor:pointer}
.menu [role=menuitem]:hover:not(:disabled){background:#e4efe8}
.menu [role=menuitem]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;background:#e4efe8}
.menu [role=menuitem]:disabled,.menu [role=menuitem][aria-disabled=true]{color:#6b7f73;background:none;cursor:not-allowed}
.menu [role=menuitem].danger,.menu [role=menuitem][data-danger]{color:var(--danger)}
.menu [role=menuitem].danger:hover:not(:disabled){background:#fdece8}
.menu hr,.menu-separator{height:1px;margin:var(--sp-1) 0;border:0;background:var(--border-hairline)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border-top:1px solid var(--border-hairline);font-size:var(--fs-xs);color:var(--muted)}
.pager:empty{display:none}
.pager-range{font-variant-numeric:tabular-nums;white-space:nowrap}
.pager-size{display:inline-flex;align-items:center;gap:var(--sp-1)}
.pager-size select{border:1px solid var(--border-control);border-radius:4px;background:var(--surface);color:var(--ink);font-size:var(--fs-xs);min-height:var(--hit);padding:0 var(--sp-1)}
.pager-buttons{display:flex;align-items:center;gap:var(--sp-1)}
.pager-page{min-width:var(--hit);min-height:var(--hit);padding:0 var(--sp-1);border:1px solid var(--border-control);border-radius:4px;background:var(--surface);color:var(--ink);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.pager [aria-current=page]{background:var(--green);border-color:var(--green);color:#fff;font-weight:650}
.skeleton-row{display:block;width:100%;height:var(--row-h);margin:var(--sp-1) 0;border-radius:4px;background:linear-gradient(90deg,#eef3f0,#e3ebe6,#eef3f0);background-size:200% 100%;animation:skeleton-sweep 1.6s linear infinite}
@keyframes skeleton-sweep{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton-row{animation:none;background:#eef3f0}}
/* Dialogs, drawer and the import review table */
dialog{border:1px solid var(--border-hairline);border-radius:12px;box-shadow:0 24px 100px #122e2530;width:528px;max-width:calc(100% - 32px);padding:var(--sp-4);color:var(--ink);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface)}
dialog::backdrop{background:#142c2566}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-1)}
.dialog-heading h2{font-size:var(--fs-lg)}
dialog .muted{font-size:var(--fs-xs);line-height:1.5}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--sp-1);margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--border-hairline)}
#serverDialog{width:728px}
#serverForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
#serverForm>.dialog-heading,#serverForm>.muted,#serverForm>.fingerprint-box,#serverForm>.form-error,#serverForm>.dialog-actions{grid-column:1/-1}
#serverForm>.field-row{display:grid;grid-template-columns:1fr 88px}
#serverForm>.field-row:nth-of-type(3){grid-template-columns:1fr 1fr}
#keyFields label{margin-top:var(--sp-1)}
#keyFields textarea{height:64px}
#fingerprintBox .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
.import-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:var(--fs-xs);margin-top:var(--sp-1)}
.import-table td,.import-table th{padding:var(--sp-1) var(--sp-2);text-align:left;border-bottom:1px solid var(--border-hairline);overflow-wrap:anywhere}
.import-table th:first-child{width:40px}
.import-table th:nth-child(4){width:30%}
.import-table code{font-size:var(--fs-xs);font-family:ui-monospace,monospace}
#importDialog{width:960px}
#importInput{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-4)}
#importInput>.muted{grid-column:1/-1}
#importInput>label:last-child{grid-column:2;grid-row:2/5}
#importInput textarea[name=lines]{height:168px}
#importReview{overflow:visible}
.import-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-1);margin-top:var(--sp-1)}
.select-heading{display:flex;align-items:center;gap:var(--sp-1);min-height:var(--hit);margin:0}
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:544px;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;overflow-y:auto;padding:0 var(--sp-4) var(--sp-4)}
.drawer>.dialog-heading{position:sticky;top:0;z-index:2;background:var(--surface);padding:var(--sp-3) 0;border-bottom:1px solid var(--border-hairline)}
.drawer-section{padding:var(--sp-3) 0;border-bottom:1px solid var(--border-hairline)}
.drawer-section>p{margin:var(--sp-1) 0}
.drawer-section>.button{margin:var(--sp-1) var(--sp-1) 0 0}
.timeline{padding-left:var(--sp-4);margin:var(--sp-3) 0 0}
.timeline li{padding:0 0 var(--sp-2) var(--sp-2);border-left:2px solid #d5e4da;font-size:var(--fs-xs)}
.timeline small{display:block;margin-top:2px}
.step-failed{color:var(--danger)}.step-running{color:var(--green)}
.history-line{font-size:var(--fs-xs);line-height:1.5}
.code-row{display:flex;gap:var(--sp-1);align-items:flex-end}
.code-row>.grow{flex:1;min-width:0}.code-row>.button{white-space:nowrap}
.login-card .code-row>.button{width:auto;flex:0 0 auto;margin-top:0;padding:0 var(--sp-3);height:34px}
.login-card .code-row>.grow{flex:1 1 auto}.login-card>.text-button{display:block;margin:var(--sp-2) auto 0}
/* Login card */
.login-shell{height:100dvh;overflow-y:auto;display:flex;align-items:center;justify-content:center;background:#f0f5f1}
.login-card{width:400px;background:var(--surface);padding:var(--sp-4);border:1px solid var(--border-hairline);border-radius:16px;margin:var(--sp-4)}
.monogram{margin-bottom:var(--sp-3);color:#254e37}
.login-card h1{margin-bottom:var(--sp-2);font-size:26px}
.login-card>.muted{font-size:var(--fs-xs);line-height:1.6}
.login-card label{margin-top:var(--sp-3)}
.login-card .button{width:100%;margin-top:var(--sp-3);padding:var(--sp-2)}
.privacy-label{display:block;font-size:var(--fs-xs);color:var(--muted);text-align:center;margin-top:var(--sp-3)}
.mobile-logout{display:none}
/* VNC keeps its full-height canvas and toolbar */
.vnc-body{background:#16291f;color:#dfebe1}
.vnc-toolbar{height:62px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:0 var(--sp-4);border-bottom:1px solid #37513e}
.vnc-toolbar a{font-size:var(--fs-xs);color:#b6cbbc}
.vnc-toolbar strong{font-size:var(--fs-sm)}
.vnc-toolbar .muted{color:#9db5a4;font-size:var(--fs-xs)}
#vncScreen{height:calc(100vh - 62px);width:100%;overflow:hidden}
#vncStatus{padding:var(--sp-3);line-height:1.6;font-size:var(--fs-xs)}
/* Live-share controls inside the drawer */
.share-controls{display:flex;gap:var(--sp-2);align-items:flex-end;flex-wrap:wrap;margin-top:var(--sp-1)}
.segmented{display:inline-flex;border:1px solid var(--border-control);border-radius:6px;overflow:hidden}
.segment{border:0;border-right:1px solid var(--border-control);background:var(--surface);color:#2a4d3c;min-height:var(--hit);padding:0 var(--sp-2);font-size:var(--fs-xs)}
.segment:last-child{border-right:0}
.segment[aria-pressed=true]{background:var(--green);color:#fff;font-weight:600}
.segment:hover:not([aria-pressed=true]){background:#e4efe8}
.share-countdown{font-variant-numeric:tabular-nums;font-weight:600}
.share-url{display:block;width:100%;margin:var(--sp-1) 0;padding:var(--sp-2);border:1px solid var(--border-control);border-radius:4px;font-size:var(--fs-xs);font-family:ui-monospace,monospace;color:var(--ink);background:#f6f9f7}
.release-info{margin-top:var(--sp-1);font-size:var(--fs-xs);line-height:1.5;color:#b4cbbd;font-variant-numeric:tabular-nums}
.release-footer{font-variant-numeric:tabular-nums}
/* Users' portal: the page scrolls, one card per server with a four-step guide */
body.portal-body{overflow:auto}body.portal-body #workspace{position:static}
.portal-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--border-hairline);background:var(--surface);position:sticky;top:0;z-index:3}
.portal-top .topbar-right{display:flex;align-items:center;gap:var(--sp-2)}
.portal-main{max-width:1280px;margin:0 auto;padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.portal-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.portal-heading h1 small{font-size:var(--fs-xs);font-weight:500}
.portal-tabs{display:flex;gap:var(--sp-1);margin:var(--sp-1) 0}
.portal-tab{flex:1;padding:var(--sp-1) var(--sp-2);border:1px solid var(--border-control);background:var(--surface);border-radius:8px;cursor:pointer;font:inherit;font-size:var(--fs-sm);color:var(--ink)}
.portal-tab.active{background:#16291f;color:#fff;border-color:#16291f}
/* View tabs: one sticky bar right under the header, three panels below it, one visible at a time. */
.portal-nav{position:sticky;top:var(--portal-top-h,0px);z-index:2;background:var(--bg);margin:0;padding:var(--sp-1) 0 var(--sp-2);border-bottom:1px solid var(--border-hairline)}
.portal-view-tabs{display:flex;gap:var(--sp-1);min-width:0}
.portal-view-tab{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border:1px solid var(--border-control);border-radius:8px;background:var(--surface);color:var(--ink);font-size:var(--fs-sm);min-height:var(--hit);white-space:nowrap}
.portal-view-tab[aria-selected=true]{background:#16291f;border-color:#16291f;color:#fff;font-weight:650}
.portal-view-count{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;background:#eaf0ec;color:var(--muted);border-radius:10px;padding:0 6px;line-height:18px}
.portal-view-count:empty{display:none}
.portal-view-tab[aria-selected=true] .portal-view-count{background:#2b5542;color:#fff}
.portal-panel{min-width:0}
.portal-panel>.portal-heading{margin-top:0}
.portal-note{margin:0;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-hairline);font-size:var(--fs-xs);line-height:1.6}
.portal-mini{margin-top:var(--sp-3)}
.server-cards{display:grid;gap:var(--sp-2)}
/* Two server cards side by side once there is room for both; one column below 1100px. */
@media(min-width:1100px){.portal-body .server-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.server-card{border:1px solid var(--border-hairline);border-radius:10px;background:var(--surface);padding:var(--sp-3);display:grid;gap:var(--sp-2)}
.server-card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.server-card-head strong{font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);list-style:none;margin:0;padding:0;counter-reset:step}
.stepper li{counter-increment:step;padding:2px var(--sp-1);border-radius:6px;background:#f2f4f2;color:var(--muted);font-size:var(--fs-xs);text-align:center;line-height:1.5}
.stepper li::before{content:counter(step) " · "}
.stepper li.done{background:#e3f1e8;color:#1f6f4a}
.stepper li.done::before{content:"✓ "}
.stepper li.current{background:#16291f;color:#fff;font-weight:600}
.guide{margin:0;line-height:1.6;font-size:var(--fs-xs)}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.card-more summary{cursor:pointer;font-size:var(--fs-xs);min-height:var(--hit)}
.card-more[open]>.card-actions{margin-top:var(--sp-1)}
.install-line{display:grid;gap:var(--sp-1);font-size:var(--fs-xs)}
.tutorial{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3)}
.tutorial summary{cursor:pointer;font-weight:600;font-size:var(--fs-sm);min-height:var(--hit)}
.tutorial li{margin:var(--sp-1) 0;line-height:1.6}
.env-summary{margin:var(--sp-1) 0;padding-left:18px;line-height:1.6;font-size:var(--fs-xs)}
.usage{white-space:pre-wrap;word-break:break-all;background:#f4f6f4;border-radius:8px;padding:var(--sp-2);font-size:var(--fs-xs)}
.portal-top .brand{margin-bottom:0}.portal-top .brand small{color:var(--muted);margin-top:2px}
/* The portal scrolls the document and keeps its own sticky header, so its notice stays in flow. */
.portal-body .notice{position:static;z-index:auto}
/* Login: "nodes come online". Servers link into the card once; the mark's dot then breathes. Defaults are the final state. */
.login-shell{position:relative;isolation:isolate;overflow-x:hidden;background:#eef4f0}
.login-shell ::selection{background:#cfe8d9;color:#16291f}
.login-shell :focus-visible{outline-color:#126b49;outline-offset:2px}
.login-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.login-net .link{fill:none;stroke:#b8d2c2;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;animation:login-draw 900ms cubic-bezier(.16,1,.3,1) backwards}
.login-net .node{transform-box:fill-box;transform-origin:center;animation:login-node 420ms cubic-bezier(.16,1,.3,1) backwards}
.login-net .node rect{fill:#fff;stroke:#cfdcd4;stroke-width:1.2;vector-effect:non-scaling-stroke}
.login-net .node path{stroke:#d7e2db;stroke-width:2;stroke-linecap:round}
.login-net .led{fill:#2f9e6b;animation:login-led 320ms ease-out backwards}
.login-net .l1{animation-delay:0ms}.login-net .n1{animation-delay:0ms}.login-net .n1 .led{animation-delay:650ms}.login-net .l2{animation-delay:90ms}.login-net .n2{animation-delay:90ms}.login-net .n2 .led{animation-delay:740ms}.login-net .l3{animation-delay:180ms}.login-net .n3{animation-delay:180ms}.login-net .n3 .led{animation-delay:830ms}.login-net .l4{animation-delay:40ms}.login-net .n4{animation-delay:40ms}.login-net .n4 .led{animation-delay:690ms}.login-net .l5{animation-delay:130ms}.login-net .n5{animation-delay:130ms}.login-net .n5 .led{animation-delay:780ms}.login-net .l6{animation-delay:220ms}.login-net .n6{animation-delay:220ms}.login-net .n6 .led{animation-delay:870ms}
.login-card{position:relative;box-shadow:0 28px 56px -28px rgba(22,41,31,.28),0 2px 6px rgba(22,41,31,.06);animation:login-card 640ms cubic-bezier(.16,1,.3,1) backwards}
.login-card h1{font-size:30px;line-height:1.22;font-weight:750;letter-spacing:-.02em;color:#16291f;text-wrap:balance}
.login-card input{caret-color:#126b49;transition:border-color 150ms,box-shadow 150ms}
.login-card input:focus{border-color:#126b49;box-shadow:0 2px 8px -2px rgba(18,107,73,.25)}
.mark{display:block;width:40px;height:40px;margin-bottom:28px;overflow:visible}
.mark-c{fill:none;stroke:#16291f;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:1;animation:login-draw 800ms cubic-bezier(.16,1,.3,1) 150ms backwards}
.mark-dot{fill:#2f9e6b;transform-box:fill-box;transform-origin:center;animation:login-breathe 3.2s ease-in-out 1.2s infinite}
.login-card .button .arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms cubic-bezier(.16,1,.3,1)}
.login-card .button.primary{position:relative;overflow:hidden;transition:background 200ms}
.login-card .button.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform 700ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.login-card .button.primary:hover:not(:disabled){filter:none;background:#0f5c3f}
.login-card .button.primary:hover:not(:disabled)::after{transform:translateX(120%)}
.login-card .button.primary:hover:not(:disabled) .arrow{transform:translate(2px,-2px)}
.login-card .button.primary:disabled{background:#126b49;border-color:#126b49;color:#fff;cursor:progress}
.login-card .button.primary:disabled::after{animation:login-sweep 1.1s linear infinite}
.login-card .code-row>.button.counting{font-variant-numeric:tabular-nums;color:#3d5c4b;background:linear-gradient(#e2f0e7,#e2f0e7) no-repeat left/100% 100% #fff;animation:login-count 60s linear forwards}
.login-card .code-row>.grow{container-type:inline-size}
.login-card #code,.login-card #adminCode{font:600 18px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:calc(100cqw / 6 - 1ch);padding-left:calc(100cqw / 12 - .5ch);padding-right:0;background-image:linear-gradient(90deg,transparent calc(100% - 1px),#e1e9e4 0);background-size:calc(100cqw / 6) 100%}
.login-card #code:placeholder-shown,.login-card #adminCode:placeholder-shown{background-color:#fbfdfc}
#codeLogin,#passwordLogin,#codeFields,#passwordField,#inviteField,#passwordHint{animation:login-field 260ms cubic-bezier(.16,1,.3,1)}
.portal-tab{transition:background 200ms,color 200ms,border-color 200ms}
.login-card.nudge{animation:login-nudge 360ms cubic-bezier(.16,1,.3,1)}
.form-error:not(:empty){animation:login-field 200ms ease-out}
#workspace:not([hidden]){animation:login-enter 460ms cubic-bezier(.16,1,.3,1)}
@keyframes login-draw{from{stroke-dashoffset:1}}
@keyframes login-node{from{opacity:0;transform:translateY(6px) scale(.96)}}
@keyframes login-led{from{fill:#c9d6ce}}
@keyframes login-card{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(6px)}}
@keyframes login-breathe{50%{transform:scale(1.45);opacity:.55}}
@keyframes login-sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes login-count{to{background-size:0 100%}}
@keyframes login-field{from{opacity:.3;clip-path:inset(0 0 60% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes login-nudge{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
@keyframes login-enter{from{clip-path:inset(16% 24% round 16px);opacity:.6}to{clip-path:inset(0 round 0);opacity:1}}
@media (prefers-reduced-motion:reduce){.login-net .link,.login-net .node,.login-card,.mark-c,.mark-dot,.login-card.nudge,#workspace:not([hidden]),#codeLogin,#passwordLogin,#codeFields,#passwordField,#inviteField,#passwordHint,.form-error:not(:empty){animation:none}.login-card .button.primary::after{display:none}.login-card .button .arrow{transition:none}}
@media (max-width:640px){.login-card h1{font-size:26px}.login-net{opacity:.7}}
.login-card .code-row>.button{height:39px}.login-card.pending #passwordLogin,.login-card.pending #passwordField{display:none}
.promo-box{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-hairline);border-radius:10px;background:var(--surface)}
.promo-box h2{font-size:var(--fs-md);margin:0 0 2px}
.promo-list{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;gap:var(--sp-1)}
.promo-list li{display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap;font-size:var(--fs-xs)}
.promo-link{color:var(--green);font-weight:600}
.lead-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:16px;background:#fff4d9;border:1px solid #dfc78b;border-radius:10px;flex-wrap:wrap}
.lead-note{padding:0 16px;color:var(--muted);font-size:var(--fs-sm)}
.lead-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px;padding:16px}
.lead-card{min-width:0;padding:16px;border:1px solid var(--border-hairline);border-radius:10px;overflow-wrap:anywhere}
.lead-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lead-heading h2{font-size:18px;margin:0}.lead-heading p{font-size:var(--fs-sm)}
.lead-contact{font-weight:600}.lead-message{white-space:pre-wrap;line-height:1.6}
.lead-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.lead-actions .text-button{margin-right:auto}
/* Narrow screens: the console collapses to icons, only the admin servers table becomes cards. */
@media(max-width:899px){
 .sidebar{width:64px;padding:var(--sp-2)}
 .brand{font-size:0;justify-content:center;margin-bottom:var(--sp-3)}
 .brand small,.nav-caption,.sidebar-bottom,.brand>span:last-child{display:none}
 .nav-item{font-size:0;justify-content:center;padding:var(--sp-1) 0;position:relative}
 .nav-item>span{font-size:20px}
 .nav-item b{font-size:var(--fs-xs);position:absolute;right:0;top:0}
 .main{left:64px}
 .topbar{height:44px;padding:0 var(--sp-1)}
 .topbar-right .avatar,.workspace-path,.topbar-right>.muted{display:none}
 .topbar-title{display:inline}
 .mobile-logout{display:block}
 .skip-link{position:fixed}
 .page-content{padding:var(--sp-2)}
 .page-heading{align-items:flex-start;flex-wrap:wrap;gap:var(--sp-1)}
 .page-heading .muted{max-width:60ch}
 .heading-actions{flex-direction:row}
 .stats-grid article{flex:1 1 50%;border-top:1px solid var(--border-hairline)}
 .stats-grid article:nth-child(-n+2){border-top:0}
 .stats-grid article:nth-child(odd){border-left:0}
 .stats-grid p{display:none}
 .panel-toolbar{padding:var(--sp-1);flex-wrap:wrap}
 .table-tools{width:100%}
 .search{flex:1 1 100%;order:-1}
 .search>input:not([type=checkbox]){width:100%;min-width:64px}
 .table-scroll{overflow-x:auto}
 .data-table,.overview-table{min-width:560px}
 /* Card layout: admin servers table only. Column names come from data-label, set by app.js. */
 .server-table--cards thead{display:none}
 .server-table--cards,.server-table--cards tbody{display:block}
 .server-table--cards tr{display:grid;grid-template-columns:1fr 1fr;height:auto;padding:var(--sp-2);border-bottom:1px solid var(--border-hairline);gap:var(--sp-1)}
 .server-table--cards td{display:block;border:0;padding:0;min-height:0}
 .server-table--cards td::before{content:attr(data-label);display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:2px}
 .server-table--cards td:first-child{grid-column:1/-1}
 .server-table--cards td:nth-child(4){text-align:right}
 .server-table--cards td:last-child{grid-column:1/-1}
 .server-table--cards .server-cell{grid-column:1/-1}
 .server-table--cards .server-name{font-size:var(--fs-md)}
 .server-table--cards .group-row{grid-template-columns:minmax(0,1fr)}
 .server-table--cards .group-row td{grid-column:1/-1}
 .server-table--cards .instance-row>td:first-child{padding-left:var(--sp-2)}
 .server-table--cards .status-head{flex-wrap:wrap}
 .server-table--cards .status-reason,.server-table--cards .overall-cell>.status-reason,.server-table--cards .disabled-reasons{white-space:normal;overflow:visible;text-overflow:clip}
 .row-actions{flex-direction:column;align-items:stretch;gap:var(--sp-1)}
 .row-actions .next-button{width:100%}
 .action-icons{justify-content:flex-start;flex-wrap:wrap;gap:var(--sp-1)}
 .danger-action{margin-left:0;padding-left:0}
 .panel-footer{gap:var(--sp-1);padding:var(--sp-1)}
 .bulk-toolbar{top:0;gap:var(--sp-1)}
 .pool-item{flex-wrap:wrap;padding:var(--sp-2)}
 .pool-actions{align-items:stretch;width:100%}
 .job-list{padding:0 var(--sp-2)}
 .job-item{gap:var(--sp-1);flex-wrap:wrap}
 .job-item>div:first-child{min-width:100%}
 dialog{padding:var(--sp-3);max-width:calc(100% - 16px)}
 #serverForm{display:block}
 #serverForm>.field-row{display:flex}
 #fingerprintBox .checks{grid-template-columns:1fr 1fr}
 .checks{grid-template-columns:1fr 1fr}
 .drawer{padding:0 var(--sp-3) var(--sp-3);max-width:100%;width:100%}
 #importInput{display:block}
 #importReview{max-height:none}
 .import-table td,.import-table th{padding:var(--sp-1)}
 .import-table th:nth-child(3),.import-table td:nth-child(3){display:none}
 .import-table th:nth-child(4){width:35%}
 .vnc-toolbar{padding:0 var(--sp-2)}
 .vnc-toolbar .muted{max-width:150px;text-align:right;line-height:1.5}
 .overview-grid{grid-template-columns:minmax(0,1fr)}
 .overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .split-facts{grid-template-columns:minmax(0,1fr)}
 .portal-top .brand{font-size:var(--fs-md);justify-content:flex-start;margin-bottom:0}
 .portal-top .brand>span:last-child{display:block}
 .portal-main{padding:var(--sp-2)}
 .portal-heading{align-items:flex-start;flex-wrap:wrap}
 .portal-view-tab{padding:var(--sp-1)}
}
@media(max-width:640px){
 .stepper{grid-template-columns:repeat(2,1fr)}
 .portal-view-tab{font-size:var(--fs-xs)}
 .portal-heading{flex-direction:column;align-items:stretch}
 .portal-top{padding:var(--sp-2)}
 .portal-top .brand>span:last-child{display:none}
 .portal-top .topbar-right>#account{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xs)}
}
/* Long disabled reasons stay inside the 280px menu; the name button reads left-aligned; a pager button at either end looks unavailable. */
.menu [role=menuitem]>.muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-button.server-name{text-align:left;max-width:100%}.pager [aria-disabled=true],.pager [aria-disabled=true]:hover{color:var(--muted);background:#eef3f0;cursor:default}
/* One-line server cell: the name button needs no 32px box inside a row, group tags stay on the name line, the host fills what is left. Pager: the size label never wraps and the page text sits between its buttons. */
.server-title .server-name{min-height:24px;padding:0 2px;flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-title .server-groups{flex:none;flex-wrap:nowrap;margin-top:0}.server-title .host-text{flex:1 1 auto;min-width:0;margin:0}.pager-size{flex:none;white-space:nowrap}.pager nav{display:flex;align-items:center;gap:var(--sp-1)}.pager-page-text{padding:0 var(--sp-1);white-space:nowrap;font-variant-numeric:tabular-nums}
/* A disabled danger item reads as disabled, not as a live destructive action; portal filters sit together on the left. */
.menu [role=menuitem][aria-disabled=true].danger,.menu [role=menuitem][aria-disabled=true][data-danger],.menu [role=menuitem]:disabled.danger{color:#6b7f73}.menu [role=menuitem][aria-disabled=true].danger:hover,.menu [role=menuitem][aria-disabled=true][data-danger]:hover{background:none}.filter-bar{justify-content:flex-start;flex-wrap:wrap;gap:var(--sp-3)}
/* The servers heading starts its own block below the usage panel. */
.portal-heading{margin-top:var(--sp-4)}