/* Desktop shell (CH Hub look). Everything is scoped under .desk; the phone layout never loads these rules. */
.desk{--muted:#8a8a8a;--line:#313131;display:flex;height:100dvh;overflow:hidden;background:#111;color:#d6d6d6}
.desk :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.desk a:hover{color:inherit}
.dreg{min-width:0;flex:none;overflow:auto}
.dmain{flex:1 1 0;min-width:0;display:flex;flex-direction:column;position:relative}
.dview{flex:1;min-height:0;width:100%;max-width:960px;margin:0 auto;overflow:auto}
.dview.wide{max-width:none;margin:0;overflow:hidden;display:flex;flex-direction:column}
.dview .screen{max-width:none;margin:0;width:100%;padding-top:calc(20px*var(--density))}
.dview:not(.wide) .screen{max-width:960px}
.dview.wide>.screen,.dview.wide>.chat,.dview.wide>.kbwide{flex:1;min-height:0;min-width:0}
.dview.wide>.screen{overflow:auto}
.desk .chat-row,.desk .chats{min-width:0}
.dview .chat{height:100%}
.dview.wide>.chat{width:100%}
.dview .fab{position:absolute;right:24px;bottom:24px}
.dview .app,.desk .app{padding-bottom:0}
/* nav */
.dnav-box{flex:none;width:220px;display:flex;flex-direction:column;gap:calc(4px*var(--density));padding:calc(20px*var(--density)) calc(14px*var(--density));border-right:1px solid #222;background:#141414;overflow:auto}
.dnav-box.compact{width:64px;padding:calc(16px*var(--density)) calc(8px*var(--density)) calc(20px*var(--density));align-items:center}
.dbrand{display:flex;flex-direction:column;gap:calc(8px*var(--density));padding:0 calc(6px*var(--density)) calc(18px*var(--density))}
.dnav-box.compact .dbrand{padding:0 0 calc(14px*var(--density));align-items:center}
.dsession{display:inline-flex;align-items:center;gap:calc(7px*var(--density));align-self:flex-start;font-size:calc(var(--font-size)*10/14);color:#8a8a8a;border:1px solid #313131;background:#1C1C1C;border-radius:999px;padding:calc(3px*var(--density)) calc(10px*var(--density))}
.dnav-box.compact .dsession{padding:calc(5px*var(--density));align-self:center}
.dtitle{font-size:calc(var(--font-size)*20/14);font-weight:700;color:#fff;letter-spacing:-.01em}.dacc{color:var(--accent)}
.ddot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);display:inline-block;flex:none}
.ddot.warn{background:var(--warn);box-shadow:0 0 6px var(--warn)}.ddot.off{background:#555;box-shadow:none}
.ddot.idle{background:transparent;border:1.5px solid #a3a3a3;box-shadow:none}
.ddot.pulse{animation:dpulse 2s ease-in-out infinite}
@keyframes dpulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.ddot.pulse{animation:none}}
.dnav{display:flex;align-items:center;gap:calc(10px*var(--density));padding:calc(9px*var(--density)) calc(12px*var(--density));border:1px solid transparent;border-radius:calc(var(--radius)*10/12);color:#b5b5b5;text-decoration:none}
.dnav-box.compact .dnav{padding:calc(10px*var(--density));justify-content:center}
.dnav:hover{background:var(--accent-bg-hover);color:#fff}
.dnav.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-line)}
.dgrow{flex:1}
.dgl{height:1px;margin:6px 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 35%,transparent) 50%,transparent)}
.dhint{font-size:calc(var(--font-size)*11/14);color:#8a8a8a;padding:calc(8px*var(--density)) calc(12px*var(--density)) 0}
.dhint kbd,.desk .kbd{font:inherit;font-size:calc(var(--font-size)*10/14);color:#8a8a8a;border:1px solid #333;border-radius:calc(var(--radius)*5/12);padding:1px calc(5px*var(--density))}
/* list / rail placeholders */
.dlist{border-right:1px solid #222;background:#111}.drail{border-left:1px solid #222;background:#141414}
.dph{padding:calc(20px*var(--density)) calc(16px*var(--density));display:flex;flex-direction:column;gap:calc(10px*var(--density));align-items:flex-start}
.dlbl{font-size:calc(var(--font-size)*10/14);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a}
.dmuted{color:#8a8a8a;font-size:calc(var(--font-size)*12/14)}
.dbtn{font:inherit;font-size:calc(var(--font-size)*12/14);color:var(--accent);background:#1C1C1C;border:1px solid #313131;border-radius:var(--radius);padding:calc(7px*var(--density)) calc(12px*var(--density));cursor:pointer}
.dbtn:hover{border-color:var(--accent)}
/* splitter */
.dsplit{flex:none;width:7px;margin:0 -3px;z-index:2;cursor:col-resize;touch-action:none;background:transparent;position:relative}
.dsplit::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:transparent}
.dsplit:hover::after,.dsplit:focus-visible::after{background:var(--accent);width:2px;left:2px}
/* surfaces in the CH Hub style */
.desk .card,.desk .kpi,.desk .list,.desk .chat-row{border-color:#313131}
.desk a.card:hover,.desk .chat-row:hover,.desk .kpi:hover{border-color:var(--accent);background:var(--surface)}
.desk .sub,.desk .hdr .status,.desk .kpi .l{letter-spacing:.14em}
.desk .tabs{display:none}
/* knowledge base: wide layout */
.kbwide{display:flex;flex:1;min-height:0}
.dview .kblist{flex:none;width:320px;max-width:40%;overflow:auto;margin:0;border-right:1px solid #222}
.kbpane{flex:1;min-width:0;overflow:auto}
.kbpane .screen{max-width:860px}
.kbempty{padding:calc(24px*var(--density))}
.kbitem.on{border-color:var(--accent-line);background:var(--accent-bg)}
/* chat list (list region) */
.dlv{display:flex;flex-direction:column;gap:calc(10px*var(--density));min-height:100%;padding:calc(20px*var(--density)) calc(12px*var(--density))}
.mode-half .dlv{padding:calc(18px*var(--density)) calc(10px*var(--density))}
.dlv-hd{display:flex;align-items:center;gap:calc(8px*var(--density));padding:0 calc(4px*var(--density))}
/* fold: «Свернуть» at the bottom of the menu and of the list; the folded list mirrors the menu's icon column */
/* one height and one bottom inset in every column, folded or not, so the fold buttons line up */
.desk .dnav.dnav-fold{width:100%;height:40px;min-height:0;padding-top:0;padding-bottom:0;background:transparent;font:inherit;color:#8a8a8a;cursor:pointer;text-align:left}
.desk .dnav-fold:hover{color:#d6d6d6;background:#1f1f1f;border-color:#313131}
/* the fold button stays at the column's bottom edge, level with the menu's, however long the list */
.dfold-at{position:sticky;bottom:0;align-self:stretch;z-index:1;background:linear-gradient(to bottom,transparent,#111 calc(14px*var(--density)));padding:calc(14px*var(--density)) 0 calc(20px*var(--density));margin-bottom:calc(-20px*var(--density))}
.dfold{overflow-x:hidden}
.dstrip{display:flex;flex-direction:column;align-items:center;gap:calc(4px*var(--density));min-height:100%;padding:calc(16px*var(--density)) calc(8px*var(--density)) calc(20px*var(--density))}
.dstrip .dnav{justify-content:center;padding:calc(10px*var(--density))}
.dstrip-hd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:calc(4px*var(--density)) 0 calc(10px*var(--density))}
.dstrip-hd .dlbl{letter-spacing:.08em}
.desk .dstrip-new{width:40px;min-height:0;color:var(--accent);border-color:var(--accent-line-strong);background:var(--accent-bg);cursor:pointer}
.desk .dstrip-new:hover{background:var(--accent-bg-hover);color:#fff}
.dstrip-list{display:flex;flex-direction:column;align-items:center;margin-top:calc(10px*var(--density))}
.dstrip-branch{display:flex;flex-direction:column;align-items:center;gap:calc(6px*var(--density))}
.dstrip-grp{display:flex;flex-direction:column;align-items:center;gap:calc(6px*var(--density))}
.dstrip-grp+.dstrip-grp{margin-top:calc(10px*var(--density));padding-top:calc(10px*var(--density));background:linear-gradient(90deg,transparent,#2e2e2e 50%,transparent) top/100% 1px no-repeat}
.desk .dsc{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;min-height:0;padding:0;
  border:1px solid #2a2a2a;border-radius:calc(var(--radius)*10/12);background:#181818;color:#cfcfcf;font:inherit;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.desk .dsc.helper{width:34px;height:34px;background:transparent;border-color:#262626;color:#9a9a9a}
.desk .dsc:hover{background:var(--accent-bg-hover);border-color:#3a3a3a;color:#fff}
.desk .dsc.on{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent)}
.dsc-m{font-family:var(--mono);font-size:calc(var(--font-size)*12/14);font-weight:700;letter-spacing:.04em;line-height:1}
.dsc.helper .dsc-m{font-size:calc(var(--font-size)*10/14);font-weight:600}
/* status in the corner, ringed by the column's background so it reads as a badge */
.dsc-s{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #111}
.dsc-s.pulse{animation:dpulse 2s ease-in-out infinite}
.dsc-s.warn{background:var(--warn)}.dsc-s.off{background:#555}
.dsc-s.idle{background:#111;border:1.5px solid #8a8a8a}
.dsc-n{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#111;border:1px solid var(--accent-line);
  color:var(--accent);font-family:var(--mono);font-size:9px;line-height:13px;text-align:center}
@media(prefers-reduced-motion:reduce){.dsc-s.pulse{animation:none}.desk .dsc{transition:none}}
.desk .dsub{font-size:calc(var(--font-size)*11/14);color:#8a8a8a;letter-spacing:0;text-transform:none;font-weight:400;margin:0}
.desk .dnew{margin-left:auto;min-height:0;min-width:0;font-weight:700;background:var(--accent-bg);border-color:var(--accent-line-strong);padding:calc(5px*var(--density)) calc(10px*var(--density));border-radius:calc(var(--radius)*8/12)}
.dsearch{display:flex;align-items:center;gap:calc(8px*var(--density));background:#141414;border:1px solid #313131;border-radius:calc(var(--radius)*10/12);padding:0 calc(10px*var(--density));color:#8a8a8a}
.dsearch:focus-within{border-color:var(--accent)}
.desk .dsearch input{flex:1;min-width:0;min-height:34px;background:transparent;border:0;outline:0;font:inherit;color:#d6d6d6;padding:calc(6px*var(--density)) 0}
.dlv-groups{display:flex;flex-direction:column;gap:calc(6px*var(--density));flex:1}
.dgrp{display:flex;flex-direction:column;gap:2px}
.dgrp-t{padding:calc(8px*var(--density)) calc(6px*var(--density)) calc(4px*var(--density));overflow-wrap:anywhere}
.dgrp .orchestrator-branch{display:flex;flex-direction:column;gap:2px}
.dhelpers{display:flex;flex-direction:column;gap:2px;margin-left:16px;padding-left:calc(8px*var(--density));border-left:1px solid #2a2a2a}
.desk .drow{display:flex;align-items:center;gap:calc(9px*var(--density));width:100%;min-height:0;min-width:0;padding:calc(8px*var(--density)) calc(10px*var(--density));border-radius:calc(var(--radius)*10/12);background:transparent;border:1px solid transparent;color:#d6d6d6;font:inherit;text-align:left;cursor:pointer}
.desk .drow:hover{background:#1f1f1f;border-color:#313131}
.desk .drow.on{background:var(--accent-bg);border-color:var(--accent-line)}
.drow-t{display:flex;flex-direction:column;min-width:0;flex:1}
.drow-n,.drow-t .dsub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtag{flex:none;font-size:calc(var(--font-size)*10/14);line-height:1.5;color:var(--accent);border:1px solid var(--accent-line);border-radius:calc(var(--radius)*5/12);padding:0 calc(5px*var(--density))}
.dlv-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(8px*var(--density));flex-wrap:wrap}
.dlv-arch{padding:calc(6px*var(--density));font-size:calc(var(--font-size)*12/14);color:var(--accent)}
/* settings link while the menu is hidden */
.dset{display:inline-flex;align-items:center;gap:calc(6px*var(--density));font-size:calc(var(--font-size)*12/14);color:#8a8a8a;text-decoration:none;border-radius:calc(var(--radius)*8/12)}
.dset:hover{color:var(--accent)}
.dset-list{padding:calc(6px*var(--density))}
.dset-status{margin-left:auto;font-size:calc(var(--font-size)*11/14)}.dset-status svg{width:13px;height:13px}
.dset-corner{position:absolute;top:6px;right:6px;z-index:3;width:28px;height:28px;justify-content:center;background:#1C1C1C;border:1px solid #313131}
.dset-corner:hover{border-color:var(--accent)}
.dlv-hint{padding:0 calc(6px*var(--density))}
/* tiles (main region on #/chats) */
.dtw{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;gap:calc(12px*var(--density));padding:calc(20px*var(--density)) calc(16px*var(--density))}
.mode-half .dtw{padding:calc(14px*var(--density));gap:calc(10px*var(--density))}
.dtw-bar{display:flex;align-items:center;gap:calc(12px*var(--density));flex-wrap:wrap}
.dseg{display:flex}
.desk .dseg button{min-width:0;min-height:0;font:inherit;font-size:calc(var(--font-size)*12/14);color:#b5b5b5;background:#1C1C1C;border:1px solid #313131;border-radius:0;padding:calc(5px*var(--density)) calc(11px*var(--density));margin-left:-1px;cursor:pointer}
.desk .dseg button:first-child{border-radius:calc(var(--radius)*8/12) 0 0 calc(var(--radius)*8/12);margin-left:0}
.desk .dseg button:last-child{border-radius:0 calc(var(--radius)*8/12) calc(var(--radius)*8/12) 0}
.desk .dseg button.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-line-strong);position:relative}
/* Columns: up to 2 (2, 2×2) or 3, never narrower than --tile-min; a narrow main area wraps tiles into rows that share
   the height, so a tile header (name, state, actions, menu) always fits. */
.dgrid{--tile-min:300px;display:grid;gap:calc(12px*var(--density));flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
.dgrid.g1{grid-template-columns:minmax(0,1fr)}
.dgrid.g2,.dgrid.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(var(--tile-min),calc((100% - 12px) / 2))),1fr))}
.mode-half .dgrid.g2.stack{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
.dgrid.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(var(--tile-min),calc((100% - 24px) / 3))),1fr))}
.dtile{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#1C1C1C;border:1px solid #313131;border-radius:var(--radius);container-type:inline-size}
.dtile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow)}
.dtile.over{border-color:var(--accent);border-style:dashed;background:var(--accent-bg)}
.dtile .chat{height:100%;min-height:0;max-width:none;margin:0;border:0}
.dtile .chat-hdr{position:static;padding:calc(8px*var(--density)) calc(8px*var(--density)) calc(8px*var(--density)) calc(12px*var(--density));gap:calc(6px*var(--density));background:transparent;border-bottom-color:#2a2a2a}
.dtile .chat-hdr .ttl span{color:#8a8a8a}
.dtile .ico{width:30px;height:30px;min-width:30px;min-height:30px;border-color:transparent;color:#8a8a8a;display:inline-flex;align-items:center;justify-content:center;padding:0}
.dtile .ico:hover{border-color:#313131;color:#fff}
.dtile .ico.on{border-color:var(--accent);color:var(--accent)}
.dtile .chat-menu>summary{font-size:calc(var(--font-size)*18/14)}
.dtile .feed,.dtile .inp{background:transparent}
.dtile .inp{border-top-color:#2a2a2a;padding:calc(10px*var(--density))}
.dtile .inp textarea{field-sizing:content;max-height:160px}
.dtile .feed,.dtile .inp textarea,.dtile .term{scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
.dchip{flex:none;font-size:calc(var(--font-size)*10/14);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:2px calc(8px*var(--density));border:1px solid #333;color:#8a8a8a}
.dchip.waiting_input{color:var(--warn);border-color:#5c3d0e}
.dchip.thinking,.dchip.working{color:var(--accent);border-color:var(--accent-line)}
.dtile-empty{flex:1;display:flex;flex-direction:column;min-height:0}
.dtile-hd{display:flex;align-items:center;gap:calc(10px*var(--density));padding:calc(12px*var(--density)) calc(14px*var(--density));border-bottom:1px solid #2a2a2a}
.dtile-hint{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6px*var(--density));margin:14px;padding:calc(16px*var(--density));text-align:center;color:#8a8a8a;font-size:calc(var(--font-size)*12/14);border:1px dashed #313131;border-radius:var(--radius)}
.dtile-hint b{color:#d6d6d6;font-size:calc(var(--font-size)*13/14);font-weight:600}
.dchip .ddot{display:none}
/* narrow tile: the state chip shrinks to a dot that keeps its label (title, aria-label) */
@container (max-width:440px){.dtile .dchip{border-color:transparent;padding:calc(4px*var(--density))}.dtile .dchip .ddot{display:block}.dtile .dchip-t{display:none}}
@container (max-width:340px){.dtile .chat-hdr .dtag{display:none}.dtile .chat-hdr{padding-left:calc(8px*var(--density))}}
/* server rail */
.drail{padding:0}
.drail-in{display:flex;flex-direction:column;gap:calc(12px*var(--density));padding:calc(20px*var(--density)) calc(18px*var(--density))}
.dmod{display:flex;flex-direction:column;gap:calc(6px*var(--density));padding-top:calc(12px*var(--density));border-top:1px solid #222}
.drail-in>.dlbl+.dmod{border-top:0;padding-top:0}
.dline{display:flex;justify-content:space-between;gap:calc(8px*var(--density));align-items:baseline;width:100%}
.dnum{color:var(--accent);font-weight:700}.dsub{color:#8a8a8a;font-size:calc(var(--font-size)*11/14)}.dpush{margin-left:auto}
.dmeter{font:inherit;color:inherit;background:transparent;border:0;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:calc(6px*var(--density));width:100%;border-radius:calc(var(--radius)*6/12)}
.dmeter:hover .dnum{color:#fff}
.dspark{display:block;margin-top:2px}
.drow{flex-direction:row;align-items:center;gap:calc(9px*var(--density))}
.dsvc{position:relative;display:flex;align-items:center;gap:calc(9px*var(--density));padding:calc(6px*var(--density)) 0;color:#d6d6d6;text-decoration:none}
.dsvc:hover{color:var(--accent)}
.dsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dai{display:flex;flex-direction:column;gap:calc(6px*var(--density));margin-bottom:8px;padding:calc(10px*var(--density)) calc(12px*var(--density));background:#ffffff08;border:1px solid var(--line);border-radius:calc(var(--radius)*10/12)}.dai:last-child{margin-bottom:0}.dai-name{color:#fff;font-weight:600}
.dai-row{display:flex;flex-direction:column;gap:calc(4px*var(--density))}
/* half-mode status line */
.dstatus{display:flex;align-items:center;gap:calc(14px*var(--density));flex-wrap:wrap;font-size:calc(var(--font-size)*11/14);color:#8a8a8a;padding:calc(8px*var(--density)) calc(14px*var(--density)) 0;flex:none}
.dst{display:inline-flex;align-items:center;gap:calc(6px*var(--density))}
/* desktop Pulse */
.dpulse{display:flex;flex-direction:column;gap:calc(22px*var(--density));padding:calc(26px*var(--density)) calc(36px*var(--density))}
.dhead{display:flex;align-items:flex-end;gap:calc(16px*var(--density))}
.dh1{margin:6px 0 0;font-size:calc(var(--font-size)*24/14);color:#fff;letter-spacing:-.01em}
.dgrid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:calc(16px*var(--density))}
.dgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:calc(12px*var(--density))}
.dcard,.dsvccard{display:flex;flex-direction:column;gap:calc(12px*var(--density));background:#1C1C1C;border:1px solid #313131;border-radius:calc(var(--radius)*16/12);padding:calc(18px*var(--density)) calc(20px*var(--density));min-width:0}
.dsvccard{border-radius:calc(var(--radius)*14/12);padding:calc(14px*var(--density)) calc(16px*var(--density));gap:calc(10px*var(--density))}
.dcard:hover{border-color:var(--accent)}
.dbtn-card{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.drowh{display:flex;justify-content:space-between;align-items:center;gap:calc(8px*var(--density));width:100%}
.dbig{font-size:calc(var(--font-size)*30/14);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}.dbig.sm{font-size:calc(var(--font-size)*22/14)}
.dstates{display:flex;flex-direction:column;gap:calc(6px*var(--density));margin-top:4px}.dstates span{display:flex;align-items:center;gap:calc(8px*var(--density))}
.dgate{display:flex;flex-direction:column;gap:calc(14px*var(--density))}
.dsvct{display:flex;align-items:center;gap:calc(9px*var(--density));color:#fff;font-weight:700}
.dlive{display:inline-flex;align-items:center;gap:calc(6px*var(--density))}
.dfail>summary{min-height:0;width:max-content}.dfail>div{margin-top:4px;line-height:1.5;overflow-wrap:anywhere}
.dwrap{flex-wrap:wrap}.dwrap>.dfail{flex-basis:100%;padding-left:calc(16px*var(--density))}
.dopen{display:inline-flex;align-items:center;gap:calc(6px*var(--density));align-self:flex-start;font-size:calc(var(--font-size)*12/14);font-weight:700;color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-line-strong);border-radius:calc(var(--radius)*8/12);padding:calc(5px*var(--density)) calc(10px*var(--density));text-decoration:none}
.dopen:hover{background:var(--accent-bg-strong);color:#fff}
.dailim{gap:calc(14px*var(--density))}
@media(max-width:1100px){.dpulse{padding:calc(18px*var(--density)) calc(20px*var(--density))}}
.dpgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:calc(16px*var(--density));align-items:start}
.dspan3{grid-column:span 3}.dspan4{grid-column:span 4}.dspan8{grid-column:span 8}
@media(max-width:1599px){.dspan3{grid-column:span 6}.dspan8{grid-column:span 12}.dspan4{grid-column:span 6}}
@media(max-width:1279px){.dspan3,.dspan4{grid-column:span 6}.dspan8{grid-column:span 12}}
.drowh .dlbl{white-space:nowrap}

/* desktop VPN: the table and editor share a row when the main region has room. */
.desk .dvpn{display:flex;flex-direction:column;gap:calc(18px*var(--density));padding:calc(26px*var(--density)) calc(28px*var(--density));container:dvpn / inline-size}
.dvpn .dhead{flex-wrap:wrap;align-items:center}
.dvpn .dhead .dlive{margin-left:18px}
.dvstats{display:grid;grid-template-columns:minmax(230px,1.5fr) repeat(3,minmax(0,1fr));gap:calc(12px*var(--density))}
.dvstats .dcard{padding:calc(14px*var(--density)) calc(16px*var(--density));gap:calc(6px*var(--density))}
.dvstats b{color:#fff;overflow-wrap:anywhere}
.dvbody{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:calc(20px*var(--density));align-items:start;min-width:0}
.dvpn .dvtable{padding:calc(10px*var(--density)) calc(12px*var(--density));overflow:auto;min-width:0}
.dvtable table{width:100%;min-width:540px;border-collapse:collapse;text-align:left;font-size:calc(var(--font-size)*12/14)}
.dvtable th{font-size:calc(var(--font-size)*10/14);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a;padding:calc(8px*var(--density)) calc(10px*var(--density));border-bottom:1px solid #313131}
.dvtable td{padding:calc(11px*var(--density)) calc(10px*var(--density));border-bottom:1px solid #292929;vertical-align:middle}
.dvtable th:first-child,.dvtable td:first-child{padding-left:calc(6px*var(--density))}
.dvtable tr:last-child td{border-bottom:0}
.dvtable tbody tr{cursor:pointer}
.dvtable tbody tr:hover td{background:#222}
.dvtable tr.on td,.dvtable tr.on:hover td{background:var(--accent-bg)}
.dvpn .dvname{display:block;min-height:32px;min-width:0;padding:0;border:0;border-radius:calc(var(--radius)*4/12);background:transparent;color:#fff;font:inherit;font-weight:700;text-align:left;overflow-wrap:anywhere;max-width:180px}
.dvtable .meter{min-width:100px;width:120px;max-width:100%;height:5px;margin-top:5px}
.dvtable .meter i{height:5px}
.dvtable .dsub{white-space:nowrap}
.dvpn .badge{background:transparent;border:1px solid #444;color:#8a8a8a;font-size:calc(var(--font-size)*10/14);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0;padding:2px calc(8px*var(--density));white-space:nowrap}
.dvpn .badge.on{color:var(--accent-text);border-color:var(--accent-line-strong)}
.dvpn .badge.warn{color:var(--warn);border-color:#745019}
.dvpn .dvpanel{display:flex;flex-direction:column;gap:calc(12px*var(--density));padding:calc(18px*var(--density));min-width:0}
.dvpanel .sheet-hd{margin:0;align-items:center}
.dvpanel .sheet-hd b{font-size:calc(var(--font-size)*16/14)}
.dvpanel .sheet-hd .ico{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}
.dvpanel .lbl{font-size:calc(var(--font-size)*10/14);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a}
.dvpanel .lbl .hint{text-transform:none;letter-spacing:0}
.dvpn .hint,.dvpn .link .cp{color:#8a8a8a;font-size:calc(var(--font-size)*11/14);line-height:1.5;margin:0;overflow-wrap:anywhere}
.dvpanel .linkcard{gap:calc(10px*var(--density))}
.dvpanel .linkcard .qr{order:-1;width:200px;border-radius:calc(var(--radius)*12/12)}
.dvpanel .link{background:#1C1C1C;border:1px solid #444;color:var(--accent-text);border-radius:calc(var(--radius)*8/12)}
.dvpanel .seg{gap:0;flex-wrap:wrap}
.dvpanel .seg button{font-size:calc(var(--font-size)*12/14);min-height:32px;padding:calc(5px*var(--density)) calc(6px*var(--density));border:1px solid #444;border-radius:0;background:#1C1C1C;color:#b5b5b5}
.dvpanel .seg button:first-child{border-radius:calc(var(--radius)*8/12) 0 0 calc(var(--radius)*8/12)}
.dvpanel .seg button:last-child{border-radius:0 calc(var(--radius)*8/12) calc(var(--radius)*8/12) 0}
.dvpanel .seg button.on{color:var(--accent-text);background:var(--accent-bg);border-color:var(--accent-line-strong)}
.dvpanel .primary{margin:0;border:1px solid var(--accent-line-strong);border-radius:calc(var(--radius)*8/12);min-height:34px;padding:calc(7px*var(--density)) calc(12px*var(--density));background:var(--accent-bg);color:var(--accent-text)}
.dvpanel .actions{flex-wrap:wrap;margin:0;gap:calc(8px*var(--density))}
.dvpanel .actions .btn2{flex:1 1 130px;min-height:32px;padding:calc(6px*var(--density)) calc(10px*var(--density));font-size:calc(var(--font-size)*12/14);font-weight:400;border-radius:calc(var(--radius)*8/12);background:#1C1C1C;border-color:#444;color:#d6d6d6}
.dvpanel .actions .danger{color:#ff8a8a;border-color:#824040}
.dvempty b{color:#fff;font-size:calc(var(--font-size)*15/14)}
.dvpn .err{color:#ff8a8a;margin:0;overflow-wrap:anywhere}
.dvpn .warn-card .detail{white-space:normal;overflow-wrap:anywhere}
@container dvpn (max-width:950px){.dvbody{grid-template-columns:minmax(0,1fr)}.dvpanel{width:100%;max-width:560px}.dvstats{grid-template-columns:repeat(3,minmax(0,1fr))}.dvstats .dcard:first-child{grid-column:1 / -1}}
@container dvpn (max-width:450px){.dvstats{grid-template-columns:minmax(0,1fr)}.dvpn .dhead .dlive{margin-left:0}.dvpn .dhead .dnew{margin-left:0}}

/* palette, cheat sheet, toast */
.dmodal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:50}
.dmodal{background:#141414;border:1px solid #333;border-radius:calc(var(--radius)*10/12);width:min(560px,92vw);max-height:70vh;overflow:auto;padding:calc(14px*var(--density));outline:none}
.dmodal-h{margin:0 0 10px;font-size:calc(var(--font-size)*15/14)}
.dmodal-in{width:100%;box-sizing:border-box;background:#0c0c0c;color:inherit;border:1px solid #333;border-radius:calc(var(--radius)*8/12);padding:calc(9px*var(--density)) calc(11px*var(--density));font:inherit}
.dpal{list-style:none;margin:8px 0 0;padding:0}
.dpal-it{display:flex;justify-content:space-between;gap:calc(12px*var(--density));padding:calc(7px*var(--density)) calc(10px*var(--density));border-radius:calc(var(--radius)*6/12);cursor:pointer}
.dpal-it.on{background:#222;outline:1px solid var(--accent)}
.dpal-empty{padding:calc(8px*var(--density)) calc(10px*var(--density));color:#8a8a8a}
.dkeys{border-collapse:collapse;width:100%;margin-bottom:10px}
.dkeys th,.dkeys td{text-align:left;padding:calc(5px*var(--density)) calc(8px*var(--density));border-bottom:1px solid #222;font-weight:400}
.dkeys kbd{font:inherit;font-size:calc(var(--font-size)*12/14);border:1px solid #333;border-radius:calc(var(--radius)*5/12);padding:1px calc(6px*var(--density));white-space:nowrap}
.dtoast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#222;border:1px solid #333;border-radius:calc(var(--radius)*8/12);padding:calc(8px*var(--density)) calc(14px*var(--density));z-index:60}
/* desktop projects: the layout follows the page width (container queries), since the main area is 556-1500 px wide */
.desk .dprojects{container:dproj / inline-size}
.dprojects .dpbody{display:flex;gap:calc(20px*var(--density));align-items:flex-start;min-height:0}
.dprojects>*{flex-shrink:0} /* the column scrolls: its parts must not squeeze into each other */
.dplist{width:330px;flex:none;display:flex;flex-direction:column;gap:calc(4px*var(--density))}
.dprow-wrap{display:flex;align-items:center;position:relative}.dprow-wrap>.dprow{flex:1;min-width:0}.dprow-wrap>.project-menu{margin-left:4px}
.dprow{display:flex;flex-direction:column;gap:2px;width:100%;padding:calc(10px*var(--density)) calc(12px*var(--density));border-radius:calc(var(--radius)*12/12);background:transparent;border:1px solid transparent;color:#d6d6d6;font:inherit;text-align:left;cursor:pointer}
.dprow:hover{background:#1f1f1f;border-color:#313131}
.dprow.on{background:var(--accent-bg);border-color:var(--accent-line)}
.dprow b{color:#fff}
.dprow-t{display:flex;align-items:center;gap:calc(8px*var(--density));min-width:0;overflow-wrap:anywhere}
.dcnt{margin-left:auto;font-size:calc(var(--font-size)*11/14);color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;padding:0 calc(7px*var(--density))}
.dpsubs{display:flex;flex-direction:column;gap:2px;margin-left:16px;padding-left:calc(8px*var(--density));border-left:1px solid #2a2a2a}
.dpdetail{flex:1;min-width:0;padding:calc(22px*var(--density)) calc(24px*var(--density));gap:calc(16px*var(--density));container:dpdet / inline-size}
.dpdetail-h{display:flex;align-items:center;gap:calc(6px*var(--density)) calc(12px*var(--density));flex-wrap:wrap}
.dpdetail-h h2{margin:0;font-size:calc(var(--font-size)*20/14);color:#fff;min-width:0;overflow-wrap:anywhere}
.dpdetail-h .dsub{min-width:0;overflow-wrap:anywhere}
.dpchips{display:flex;gap:calc(10px*var(--density));flex-wrap:wrap}
.dpchip{font-size:calc(var(--font-size)*10/14);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px calc(8px*var(--density));border:1px solid #333;color:#8a8a8a}
.dpchip.run,.dpchip.working,.dpchip.thinking{color:var(--accent);border-color:var(--accent-line)}
.dpchip.waiting_input{color:var(--warn);border-color:#5c3d0e}
.dpchip.err{color:var(--warn);border-color:#5c3d0e;text-transform:none}
.dnote{font-size:calc(var(--font-size)*12/14);color:#d6d6d6;white-space:pre-wrap}
.dpcols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:calc(22px*var(--density))}
.dpcol{display:flex;flex-direction:column;gap:calc(6px*var(--density));min-width:0}
.dptodo{display:flex;align-items:flex-start;gap:calc(10px*var(--density));width:100%;padding:calc(8px*var(--density)) calc(10px*var(--density));border-radius:calc(var(--radius)*10/12);background:transparent;border:1px solid transparent;color:#d6d6d6;font:inherit;text-align:left;cursor:pointer}
.dptodo:hover{background:var(--accent-bg-hover);border-color:var(--accent-line)}
.dpbox{width:14px;height:14px;border:1.5px solid #555;border-radius:calc(var(--radius)*4/12);flex:none;margin-top:2px}
.dptodo>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.dpgo{margin-left:auto;font-size:calc(var(--font-size)*10/14);color:#8a8a8a;flex:none;white-space:nowrap;padding-top:2px}
.dphint{padding:calc(6px*var(--density)) calc(10px*var(--density))}
.dpchat.lead{display:flex;flex-direction:column;gap:calc(6px*var(--density));padding:calc(12px*var(--density)) calc(14px*var(--density));background:#202020;border:1px solid #313131;border-radius:calc(var(--radius)*16/12)}
.dpchat-h{display:flex;align-items:center;gap:calc(8px*var(--density));min-width:0}.dpchat-h b{color:#fff;min-width:0;overflow-wrap:anywhere}.dpchat-h .dpchip{margin-left:auto;white-space:nowrap}
.dpchat-list{display:flex;flex-direction:column;gap:calc(6px*var(--density));margin-left:12px;padding-left:calc(10px*var(--density));border-left:1px solid #2a2a2a}
.dpchat-sub{display:flex;align-items:center;flex-wrap:wrap;gap:calc(4px*var(--density)) calc(8px*var(--density));padding:calc(6px*var(--density)) calc(4px*var(--density));min-width:0}
.dpchat-n{min-width:0;overflow-wrap:anywhere}
.dpchat-open{margin-left:auto;font-size:calc(var(--font-size)*12/14)}
.dpform{max-width:520px}
.dpform input{font:inherit;background:#111;color:#d6d6d6;border:1px solid #313131;border-radius:calc(var(--radius)*8/12);padding:calc(7px*var(--density)) calc(10px*var(--density))}
@container dproj (max-width:820px){.dprojects .dpbody{flex-direction:column;align-items:stretch}.dplist{width:auto}}
@container dpdet (max-width:560px){.dpcols{grid-template-columns:minmax(0,1fr)}}

/* desktop settings: a size container, so the section list stays a left column whenever the page has room */
.desk .dsettings{display:flex;flex-direction:column;gap:calc(18px*var(--density));padding:calc(26px*var(--density)) calc(28px*var(--density));max-width:1100px;container:dset / inline-size}
.dsettings .ds-top{display:flex;flex-direction:column;gap:calc(6px*var(--density))}
.dsettings h1{margin:0;font-size:calc(var(--font-size)*24/14);color:#fff}
.ds-lbl{font-size:calc(var(--font-size)*10/14);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a}
.ds-sub{font-size:calc(var(--font-size)*11/14);color:#8a8a8a}
.ds-body{display:flex;gap:calc(22px*var(--density));align-items:flex-start}
.ds-nav{width:200px;flex:none;display:flex;flex-direction:column;gap:calc(4px*var(--density))}
.desk .ds-navb{font:inherit;text-align:left;min-height:0;min-width:0;padding:calc(9px*var(--density)) calc(12px*var(--density));border-radius:calc(var(--radius)*10/12);color:#b5b5b5;background:transparent;border:1px solid transparent;cursor:pointer;line-height:1.3}
.desk .ds-navb:hover{background:var(--accent-bg-hover);color:#fff}
.desk .ds-navb.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-line)}
.ds-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(22px*var(--density))}
.ds-sec{display:flex;flex-direction:column;gap:calc(16px*var(--density));min-width:0}
.ds-sec-appearance>h2.sub{display:none}
.ds-head{display:flex;align-items:center;gap:calc(12px*var(--density))}
.ds-h2{margin:0;font-size:calc(var(--font-size)*18/14);color:#fff}
.desk .ds-ghost{margin-left:auto;min-height:0;min-width:0;font:inherit;font-size:calc(var(--font-size)*12/14);color:#d6d6d6;background:#232323;border:1px solid #313131;border-radius:calc(var(--radius)*8/12);padding:calc(6px*var(--density)) calc(10px*var(--density));cursor:pointer}
.desk .ds-ghost:hover{border-color:var(--accent)}
.ds-layout{display:flex;flex-direction:column;gap:calc(16px*var(--density));min-width:0}
.ds-block{display:flex;flex-direction:column;gap:calc(8px*var(--density));min-width:0}
.ds-map{display:flex;gap:calc(6px*var(--density));height:150px;padding:calc(10px*var(--density));border-radius:calc(var(--radius)*12/12);background:#0d0d0d;border:1px solid #2a2a2a}
/* schematic: proportional boxes, so main is always the largest; hidden regions stay in their place, greyed */
.ds-sb{border-radius:calc(var(--radius)*8/12);display:flex;flex-direction:column;gap:calc(4px*var(--density));align-items:center;justify-content:center;font-size:calc(var(--font-size)*11/14);font-weight:700;color:#d6d6d6;border:1px dashed #3a3a3a;background:#1a1a1a;text-align:center;padding:calc(4px*var(--density));min-width:0;overflow:hidden;flex:1 1 0}
.ds-sb.nav{flex:1 1 0}.ds-sb.nav.compact{flex:.45 1 0}.ds-sb.list{flex:1.4 1 0}.ds-sb.rail{flex:1.5 1 0}
.ds-sb.main{flex:3 1 0;min-width:120px;border-style:solid;border-color:var(--accent-line);background:var(--accent-bg-dim);color:var(--accent)}
.ds-sb.off{border-style:dotted;border-color:#333;background:#121212;color:#8a8a8a;font-weight:400}
.ds-sb-off{font-size:calc(var(--font-size)*9/14);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a}
.ds-regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:calc(10px*var(--density))}
.ds-rc{display:flex;flex-direction:column;gap:calc(8px*var(--density));padding:calc(12px*var(--density)) calc(14px*var(--density));border-radius:calc(var(--radius)*12/12);background:#202020;border:1px solid #2c2c2c;min-width:0}
.ds-rc-h{display:flex;align-items:center;gap:calc(4px*var(--density)) calc(8px*var(--density));flex-wrap:wrap}.ds-rc-h b{color:#fff;flex:1 1 0;min-width:0}
.ds-hint{flex-basis:100%;text-align:right}
.desk .ds-sw{white-space:nowrap;min-height:0;min-width:0;font:inherit;font-size:calc(var(--font-size)*11/14);font-weight:700;border-radius:999px;padding:calc(3px*var(--density)) calc(10px*var(--density));cursor:pointer;border:1px solid #313131;background:#232323;color:#a0a0a0;line-height:1.3}
.desk .ds-sw.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-line-strong)}
.ds-width{display:flex;align-items:center;gap:calc(8px*var(--density));flex-wrap:wrap}
.desk .ds-width input{width:78px;font:inherit;background:#111;color:#d6d6d6;border:1px solid #313131;border-radius:calc(var(--radius)*8/12);padding:calc(5px*var(--density)) calc(8px*var(--density));min-height:0}
.desk .ds-link{min-height:0;min-width:0;font:inherit;font-size:calc(var(--font-size)*11/14);color:var(--accent);background:none;border:0;padding:2px;cursor:pointer;text-decoration:underline}
.desk .ds-link:disabled{color:#8a8a8a;cursor:default;text-decoration:none}
.ds-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:calc(16px*var(--density))}
.ds-list{display:flex;flex-direction:column;gap:calc(6px*var(--density))}
.ds-row{display:flex;align-items:center;gap:calc(10px*var(--density));padding:calc(7px*var(--density)) calc(10px*var(--density));border-radius:calc(var(--radius)*10/12);background:#202020;border:1px solid #2c2c2c}
.ds-row.off .ds-name{opacity:.6}
.ds-row.over{border-color:var(--accent)}
.ds-grip{color:#8a8a8a;cursor:grab;font-size:calc(var(--font-size)*14/14);letter-spacing:-2px}
.ds-name{flex:1;min-width:0}
.desk .ds-ib{min-height:0;min-width:0;font:inherit;width:28px;height:28px;padding:0;border-radius:calc(var(--radius)*8/12);border:1px solid #313131;background:#1C1C1C;color:#b5b5b5;cursor:pointer}
.desk .ds-ib:disabled{opacity:.35;cursor:default}
.ds-tiles{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10px*var(--density));margin-top:8px}
@container dset (max-width:760px){.ds-nav{width:170px}}
@container dset (max-width:560px){.ds-body{flex-direction:column;align-items:stretch}.ds-nav{width:auto;flex-direction:row;flex-wrap:wrap}}

/* script-focused containers (not in the tab order) never draw a ring */
.desk [tabindex="-1"]:focus,.desk [tabindex="-1"]:focus-visible{outline:none}

.dmodal-bg{animation:overlay-in .18s ease-out}
.dmodal{animation:panel-in .18s ease-out}
.dmodal-bg.is-closing{pointer-events:none;animation:overlay-out .18s ease-in forwards}
.dmodal-bg.is-closing .dmodal{animation:panel-out .18s ease-in forwards}
@media(prefers-reduced-motion:reduce){.dmodal-bg,.dmodal,.dmodal-bg.is-closing,.dmodal-bg.is-closing .dmodal{animation:none}}

/* Spotify Connect: a personal remote in the desktop chat toolbar. */
.dtw-bar{flex-wrap:nowrap;min-width:0;position:relative;z-index:4}
.dtw-bar>.dlbl,.dtw-bar>.dseg{flex-shrink:0}
.sp-player{position:relative;display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0;max-width:360px;padding:4px 0 8px}
.desk .sp-info{display:flex;align-items:center;gap:9px;min-width:0;min-height:0;padding:0;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.sp-cover{flex-shrink:0;width:22px;height:22px;object-fit:cover;border-radius:calc(var(--radius)*4/12)}
.sp-cover-empty{background:var(--line)}
.sp-meta{min-width:0;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.sp-meta b{color:var(--text);font-weight:500}
.desk .sp-info:hover .sp-meta b{color:var(--accent)}
.sp-controls{display:flex;align-items:center;gap:0;flex-shrink:0}
.desk .sp-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,opacity .15s}
.desk .sp-btn:hover{color:var(--text)}
.desk .sp-btn:disabled{opacity:.3;cursor:default}
.desk .sp-play{color:var(--text)}
.sp-btn svg{width:12px;height:12px}
/* «previous» shows up only while the player is hovered or focused: one control fewer at rest */
.desk .sp-controls .sp-extra{opacity:0;width:0;overflow:hidden;transition:opacity .15s,width .15s}
.desk .sp-player:hover .sp-controls .sp-extra,.desk .sp-player:focus-within .sp-controls .sp-extra{opacity:1;width:24px}
.desk .sp-player:hover .sp-controls .sp-extra:disabled{opacity:.3}
.sp-player :focus-visible,.sp-connect :focus-visible,.sp-setup:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sp-progress{position:absolute;bottom:0;left:31px;right:0;height:1px;background:var(--line);overflow:hidden;pointer-events:none}
.sp-progress span{display:block;height:100%;background:color-mix(in srgb,var(--text) 55%,transparent)}
.sp-setup,.sp-connect{margin-left:auto;font-size:11px;min-width:0}
.sp-setup,.sp-connect a{color:var(--muted);white-space:nowrap;text-decoration:none}
.sp-setup:hover,.sp-connect a:hover{color:var(--text)}
.sp-connect{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.sp-error,.sp-alert{font-size:10px;color:var(--warn);max-width:270px}
.sp-alert{position:absolute;top:100%;right:0;background:var(--surface);padding:5px 8px;border-radius:calc(var(--radius)*4/12);z-index:2}
.sp-popover{position:absolute;right:0;top:calc(100% + 12px);width:310px;max-width:calc(100vw - 32px);max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 16px 48px #0009;padding:18px;display:flex;flex-direction:column;gap:14px;font-size:12px;z-index:20}
.sp-pop-head{display:flex;align-items:flex-start;gap:10px}
.sp-pop-head .sp-btn{margin-left:auto;font-size:18px;flex:none}
.sp-popover p{margin:0;line-height:1.5}
.sp-full-title{overflow-wrap:anywhere;color:var(--text)}
.sp-notice{color:var(--muted);font-size:11px}
.sp-devices,.sp-stations,.sp-volume{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted)}
.sp-devices select{width:100%;min-width:0;min-height:34px;padding:6px 8px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:calc(var(--radius)*8/12);font:inherit;font-size:12px}
.sp-volume span{margin-left:auto;font-variant-numeric:tabular-nums}
.sp-volume input{width:100%;accent-color:var(--accent)}
.sp-popover a{color:var(--accent);text-decoration:none}
.desk .sp-disconnect{align-self:flex-start;padding:0;min-height:24px;background:none;border:0;color:var(--muted);font:inherit;cursor:pointer}
.mode-half .sp-player{padding-bottom:2px}
.mode-half .sp-meta{display:block;max-width:160px}
.mode-half .sp-meta>span{display:none}
.mode-half .sp-player>.sp-controls .sp-extra{display:none}
.mode-half .sp-player>.sp-controls .sp-btn{width:28px;height:28px}
.mode-half .sp-player>.sp-controls .sp-btn svg{width:14px;height:14px}
.mode-half .sp-player>.sp-info{min-height:28px}
@media(min-width:1280px) and (max-width:1599px){.sp-meta{max-width:140px}}
@media(prefers-reduced-motion:reduce){.sp-player *{animation:none!important;transition:none!important}}

/* The radio belongs to the shell; this slot aligns it with the tiles' toolbar. */
.desk-player-slot{position:absolute;right:calc(16px*var(--density));top:calc(20px*var(--density));z-index:8;max-width:calc(100% - 270px);display:flex;align-items:center;justify-content:flex-end}
.mode-half .desk-player-slot{top:calc(48px*var(--density));right:calc(14px*var(--density))}
.desk-player-slot[hidden],.sp-player[hidden]{display:none!important}
.sp-player{max-width:100%;padding:0 0 8px}
.sp-player>.sp-info{flex:1 1 auto;min-width:0}
.sp-radio{gap:9px}
.sp-radio>.sp-play,.sp-radio>.sp-sound{flex:none}
.desk .sp-sound{border:1px solid var(--control-line);border-radius:var(--control-radius);width:28px;height:28px;color:var(--text)}
.desk .sp-sound.muted{color:var(--muted)}
.desk .sp-sound.hint{animation:sound-hint .6s ease-in-out 3;color:var(--accent);border-color:var(--accent)}
@keyframes sound-hint{50%{background:var(--accent-bg);box-shadow:0 0 0 4px var(--accent-bg)}}
.sp-art{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--control-radius)}
.sp-art-empty{display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 70% 28%,#31483d 0,transparent 65%),linear-gradient(145deg,#1b2722,#141817 70%);color:#86a897;font-size:80px;font-weight:200;line-height:1}
.sp-art-empty span{transform:rotate(-18deg);font-size:100px}
.sp-track{display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.sp-track b{font-size:16px;font-weight:500}
.sp-popover{box-sizing:content-box;width:280px;max-width:calc(100vw - 72px);gap:12px}
.sp-popup-controls{display:flex;align-items:center;justify-content:center;gap:12px}
.desk .sp-popup-controls .sp-btn,.desk .sp-player .sp-popup-controls .sp-extra{width:32px;height:32px;opacity:1;position:relative;overflow:visible}
.sp-popup-controls .sp-btn svg{width:17px;height:17px}
.desk .sp-btn.on{color:var(--accent)}
.sp-btn small{position:absolute;font-size:8px;right:1px;bottom:0}
.sp-controls .sp-btn{position:relative}
.sp-time{display:block;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px}
.sp-pop-progress{position:relative;height:14px}
.sp-pop-progress .sp-progress{left:0;top:6px;bottom:auto;right:0}
.sp-seekable{pointer-events:auto;height:10px;bottom:-3px;overflow:visible;background:transparent}
.sp-seekable>span{height:2px;position:absolute;top:4px}
.sp-seekable:before{content:"";position:absolute;inset:4px 0 auto;height:2px;background:var(--line)}
.sp-seekable input{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:pointer}
.sp-seekable:focus-within{outline:1px solid var(--accent)}
.sp-next{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:8px}
.sp-next>div{display:flex;gap:10px;align-items:center}
.sp-next img{border-radius:calc(var(--radius)*4/12);object-fit:cover}
.sp-next small{display:block;color:var(--muted);margin-top:3px}
.mode-half .sp-radio .sp-meta{display:block;max-width:130px}
.sp-btn .spin{width:11px;height:11px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@media(prefers-reduced-motion:reduce){.sp-btn .spin{animation:none;border-top-color:currentColor;opacity:.6}}
/* Player menus use the same select as sheets and settings, at the player's compact density. */
.sp-devices .ch-select .ch-select-control,.sp-stations .ch-select .ch-select-control{min-height:36px;padding-top:calc(7px * var(--density));padding-bottom:calc(7px * var(--density));font-size:inherit}

/* Listening waves: the same YouTube iframe stays visible when the card closes. */
/* The playing YouTube viewport is visibly docked to the toolbar; only a click opens the large card. */
.sp-wave>.sp-info{display:flex;gap:9px;min-width:0}
.sp-wave-window{box-sizing:border-box;position:absolute;right:0;top:calc(100% + 12px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 36px #0008;display:flex;flex-direction:column;gap:14px;padding:18px;width:318px;max-width:calc(100vw - 32px);max-height:70vh;overflow:auto;font-size:12px}
.sp-wave-window[hidden],.sp-wave-window [hidden]{display:none!important}
.sp-wave-window.is-mini{width:202px;padding:0;gap:0;max-height:none;overflow:visible}
.sp-wave-dock-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;height:26px;color:var(--muted);font-size:10px}
.sp-wave-media{width:100%;aspect-ratio:1;min-width:200px;min-height:200px;flex:none}
.is-mini .sp-wave-media{width:200px;height:200px}
.sp-wave-media iframe{display:block;width:100%;height:100%;min-width:200px;min-height:200px;border:0}
.sp-wave-progress{width:100%;accent-color:var(--accent)}.sp-wave-window a{color:var(--accent)}

.sp-wave>.sp-wave-dock-notice{top:calc(100% + 244px);width:202px;max-width:202px}