/* One shared surface system for the web and desktop control room. */
:root{--bg:#141210;--surface:color-mix(in srgb,var(--bg) 94%,#fff);--surface-raised:color-mix(in srgb,var(--bg) 89%,#fff);--surface2:var(--surface-raised);--field:color-mix(in srgb,var(--bg) 97%,#000);--line:#e6d4b81c;--text:#eee6da;--cream:var(--text);--muted:#b8b0a4;--radius:14px}
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover,*:focus-within{scrollbar-color:#b9aa8566 transparent}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}:hover::-webkit-scrollbar-thumb{background:#b9aa8555}
body{background:var(--bg);line-height:1.5}.panel,.metric-tile,.backup-card{background:var(--surface);border:1px solid var(--line);box-shadow:none;border-radius:var(--radius)}
.panel{padding:24px}.panel>h2,.panel>h3{border-bottom:0;padding-bottom:0}.panel-header{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;gap:12px}.panel-header h2,.panel-header h3{padding:0;margin:0;border:0}.panel-header+hr{display:none}
button,input,textarea,.select-trigger{border-radius:9px;transition:background-color .16s,border-color .16s,box-shadow .16s,opacity .16s}button{min-height:42px}button:hover{box-shadow:none}button:focus-visible,.select-option:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
button:active:not(:disabled){background-color:#ffffff14}input,textarea{background:var(--field);border-color:#ffffff24}label{line-height:1.5}h1{letter-spacing:-.035em}.screen-head{margin-bottom:24px}
.actions{gap:10px;align-items:center}.stats .actions{margin-top:12px}.stats button{display:inline-flex;margin:8px 0 0}.metric-tile strong{overflow-wrap:anywhere}.owner-strip{background:var(--surface);gap:12px;padding:14px 24px}.owner-strip>label{flex-wrap:wrap}.owner-strip>label>.select-trigger{min-width:200px}
.select-source{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important}
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-width:0;min-height:46px;padding:10px 14px;background:var(--surface);border:1px solid #ffffff26;color:var(--cream);font:inherit;text-align:left;cursor:pointer;margin-top:8px}
.select-trigger:hover,.select-trigger[aria-expanded=true]{background:var(--surface-raised);border-color:var(--amber)}.select-trigger:disabled{opacity:.5;cursor:not-allowed}.select-trigger[aria-invalid=true]{border-color:#ef8674}.select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-chevron{color:var(--amber);flex-shrink:0}.topbar .context>.select-trigger{max-width:440px;flex:1;margin:0}.owner-strip .select-trigger,.composer-footer .select-trigger{margin:0}
.select-popup{position:fixed;inset:auto;z-index:10000;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;margin:0;padding:8px;border:1px solid #826d45;border-radius:12px;background:var(--surface-raised);color:#eee7d6;box-shadow:0 16px 48px #0009;overflow:hidden;animation:popup-in .12s ease-out}.select-popup input{width:100%;margin:0;padding:10px}.select-options{overflow:auto;overscroll-behavior:contain}.select-option{position:relative;display:flex;align-items:center;min-height:42px;padding:9px 36px 9px 12px;border-radius:7px;cursor:pointer;overflow-wrap:anywhere;line-height:1.4}.select-option:hover,.select-option:focus{background:#ffffff0c;outline-offset:-2px}.select-option[aria-selected=true]{background:#ed9f3520;color:#ffd18b}.select-option[aria-selected=true]:after{content:'✓';position:absolute;right:12px}.select-option[aria-disabled=true]{opacity:.4;cursor:not-allowed}.select-group{font-size:.75rem;text-transform:uppercase;color:var(--muted);padding:12px 12px 4px}
.response-edit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.response-edit-grid>section{min-width:0}.response-preview-pane{position:sticky;top:20px}.response-field-search{margin-bottom:18px}
.reorder-row{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:10px;margin:8px 0;padding:10px 12px;background:var(--surface);position:relative}.reorder-row>strong{flex:1;min-width:0}.reorder-row .actions{flex-shrink:0;margin:0}.drag-handle{flex-shrink:0;cursor:grab;touch-action:none;user-select:none;width:44px;font-size:1.5rem;border:0;color:var(--muted);background:transparent}.dragging{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,var(--surface));box-shadow:0 8px 24px #0005;z-index:2}.dragging .drag-handle{cursor:grabbing;color:var(--amber)}.reorder-status{min-height:24px;color:var(--muted)}
.person-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.person-row>div{display:flex;gap:5px;flex-direction:column;align-items:flex-start;min-width:0;overflow-wrap:anywhere}.person-row small{color:var(--muted)}.person-editor{margin-top:24px;padding:20px;background:var(--field);border:1px solid var(--line);border-radius:12px}.person-editor label{display:block;margin:14px 0}.person-editor .permission-choice{display:flex}.account-list{max-height:440px;overflow:auto}.person-editor .panel-header{position:sticky;top:0}
.workspace-kind-staff{--workspace-accent:#8fc7b4}.workspace-kind-dev{--workspace-accent:#b5aff0}.workspace-kind-staff .chat-heading,.workspace-kind-dev .chat-heading{border-top:2px solid var(--workspace-accent)}.workspace-kind-staff .chat-heading h1,.workspace-kind-dev .chat-heading h1{color:var(--workspace-accent)}.chat-history .directory-list{max-height:45dvh;overflow:auto}.chat-command-list .directory-list button{width:100%;text-align:left}.chat-command-list small{display:block}.chat-heading h1{font-size:1.2rem}.chat-heading .badge{white-space:normal}.chat-composer-meta{gap:10px}.chat-composer-meta details{max-width:100%}.chat-composer-meta .select-trigger{max-width:280px}.composer-footer>.select-trigger{width:auto;max-width:260px}.chat-composer textarea{resize:none}
.server-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.server-tabs button[aria-selected=true]{background:#ed9f3520;border-color:var(--amber);color:#ffce85}.server-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:24px;align-items:start}.server-layout>section{min-width:0}.inventory-list{max-height:560px;overflow:auto}.inventory-list>div{gap:12px;align-items:center}.inventory-list>div>span{min-width:0;overflow-wrap:anywhere}.inventory-list .actions{flex-wrap:wrap;justify-content:flex-end}.server-action-pane:empty{display:none}.server-action-pane .panel{margin:0}.server-metrics{gap:12px}.server-metrics .metric-tile{padding:16px}.server-resource-list article{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.server-resource-list small{display:block;color:var(--muted)}
.workspace:not(.chat-page){animation:workspace-in .18s ease-out}body[data-density=compact] .panel{padding:16px}body[data-density=compact] .list-row,body[data-density=compact] .person-row{padding-top:8px;padding-bottom:8px}
@keyframes workspace-in{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes popup-in{from{opacity:0;translate:0 -3px}to{opacity:1;translate:0 0}}
@media(max-width:1100px){.server-layout{grid-template-columns:minmax(0,1fr)}.response-edit-grid{grid-template-columns:minmax(0,1fr)}.response-preview-pane{position:static}.topbar .context>.select-trigger{max-width:none}}
@media(max-width:850px){.workspace-kind-staff .chat-history,.workspace-kind-dev .chat-history{display:block;max-height:220px;overflow:auto}.workspace-kind-staff .chat-command-list,.workspace-kind-dev .chat-command-list{display:block}.chat-history .directory-list{max-height:120px}.chat-heading{padding:12px 16px}.chat-workspace{min-height:580px}.chat-main{min-height:380px}.owner-strip{padding:12px 16px}.owner-strip>label>.select-trigger{flex:1;min-width:0}.panel{padding:18px}.select-trigger{font-size:16px}.topbar .context>.select-trigger{width:100%}.reorder-row{gap:6px;padding:8px}.reorder-row .actions{gap:4px}.reorder-row .actions button{padding:7px;font-size:.8rem}.drag-handle{width:38px}.person-editor{padding:14px}}
@media(max-width:420px){.server-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.server-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.server-metrics strong{font-size:1rem}.inventory-list>div{flex-wrap:wrap}.inventory-list .actions{width:100%;justify-content:flex-start}.composer-footer{flex-wrap:wrap}.chat-heading .badge{display:none}.reorder-row .actions button{font-size:0;width:32px}.reorder-row .actions button:first-child:after{content:'↑';font-size:16px}.reorder-row .actions button:last-child:after{content:'↓';font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

[hidden]{display:none!important}.owner-strip>label{display:grid;grid-template-columns:auto minmax(150px,260px);align-items:center;gap:12px}.owner-strip>label>.select-trigger{margin:0;min-width:0}.editor-tabs button[aria-pressed=true]{background:#ed9f3520;border-color:var(--amber)}.panel-header+.list-row{border-top:0}.stat button{margin-top:12px;align-self:flex-start}.response-edit-grid section{min-width:0}

.server-tabs>button{width:auto;flex:0 1 auto;margin:0;padding:10px 16px}.editor-tabs{display:flex;gap:8px}.editor-tabs>button{width:auto;flex:0 1 auto}.editor-tabs+.panel{margin-top:0}
.server-tabs,.editor-tabs{flex-direction:row;flex-wrap:wrap}.drag-ghost{position:fixed!important;margin:0!important;z-index:20000;pointer-events:none;opacity:.95;background:color-mix(in srgb,var(--amber) 10%,var(--surface));border-color:var(--amber);box-shadow:0 16px 30px #0008}.reorder-row.dragging{opacity:.3}

.response-edit-preview{position:sticky;top:0}.layout-editor{width:min(1120px,96vw)}@media(max-width:850px){.response-edit-preview{position:static}}
.config-choose{display:flex;gap:12px;align-items:center}.config-choose>.select-trigger{flex:1;min-width:0;margin:0}.config-choose>#config-load{flex:0 0 auto}@media(max-width:600px){.config-choose{flex-wrap:wrap}.config-choose>.select-trigger{flex-basis:100%}}

@media(max-width:850px){.chat-history:has(.chat-command-list[open])>.panel-header,.chat-history:has(.chat-command-list[open])>nav,.chat-history:has(.chat-command-list[open])>p{display:none}.workspace-kind-staff .chat-history,.workspace-kind-dev .chat-history{max-height:230px}.chat-command-list>summary{padding:10px 0}.chat-command-list[open]{margin-top:0}.chat-command-list[open] input{margin:8px 0}}

/* All chrome derives from the selected background; accents do not tint entire sections. */
body{background-image:none}.sidebar,.topbar{background:var(--bg)}
.owner-toolbar>.owner-tools-toggle,.owner-strip{background:var(--surface);border-color:var(--line)}
button,.button{background:var(--surface-raised);border-color:var(--line);color:var(--text)}
button:hover:not(:disabled),.button:hover{background:color-mix(in srgb,var(--amber) 7%,var(--surface-raised));border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
button.primary,.button.primary{background:var(--amber);border-color:var(--amber);color:#21180d}.primary:hover:not(:disabled){background:color-mix(in srgb,var(--amber) 85%,white);color:#21180d}
button.danger{color:var(--red)}nav button,.sidebar nav button,.directory-list button{background:transparent}
input,textarea,select{background:var(--field)!important;color:var(--text)!important}select option,select optgroup{background:var(--surface-raised)!important;color:var(--text)!important}
.select-trigger{background:var(--surface)}.select-popup{border-color:var(--line);color:var(--text)}
.stat,.metric-tile{background:var(--surface);border:1px solid var(--line);box-shadow:none}.stat strong{color:var(--text)}
.tva-banner{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber)}
.terminal,.terminal-picker,.terminal-head,.config-editor,.response-row,.command-card,.rollback-box,.update-progress{background:var(--surface);border-color:var(--line)}
.terminal-head{color:var(--amber)}th{background:var(--surface-raised)}td{border-color:var(--line)}tbody tr:hover{background:var(--surface-raised)}
.chat-composer{background:var(--surface)}.chat-composer textarea,.terminal-entry input{background:transparent!important}
.format-preview code,.format-preview pre{background:var(--field)}.format-preview blockquote{color:var(--muted)}