/* Copilot Gateway — ops console.  One accent, hairlines, tabular figures. */
:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --r: 8px; --r-sm: 6px; --r-lg: 12px;
  --side: 224px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"] {
  --bg: #f6f6f3; --surface: #ffffff; --surface-2: #fafaf8; --sunken: #efefeb;
  --ink: #16181d; --ink-2: #4a505c; --ink-3: #626977;
  --line: #e4e4de; --line-strong: #cfcfc6;
  --accent: #2457e6; --accent-ink: #ffffff; --accent-soft: #e8eefd;
  --ok: #17803d; --ok-soft: #e3f4e8; --warn: #a15c00; --warn-soft: #fbefd6; --bad: #c42b2b; --bad-soft: #fbe5e3;
  --c2: #8a6ae0; --c3: #0f9d9a;
  --shadow: 0 1px 2px rgba(20,22,30,.05), 0 8px 24px rgba(20,22,30,.06);
  --shadow-lg: 0 24px 64px rgba(20,22,30,.22);
  --scrim: rgba(18,20,26,.42);
}
:root[data-theme="dark"] {
  --bg: #0e1013; --surface: #15181d; --surface-2: #191d23; --sunken: #0b0d10;
  --ink: #e9ebef; --ink-2: #a5acb8; --ink-3: #939cab;
  --line: #242932; --line-strong: #323946;
  --accent: #6b92ff; --accent-ink: #0b0d10; --accent-soft: #1a2440;
  --ok: #4cc27a; --ok-soft: #12301f; --warn: #e8aa3c; --warn-soft: #36290f; --bad: #ff7370; --bad-soft: #3a1717;
  --c2: #a58bf0; --c3: #3cc9c4;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { font: 14px/1.5 var(--font); background: var(--bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.no-scroll { overflow: hidden; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .92em; }
code { background: var(--sunken); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.muted { color: var(--ink-3); } .small { font-size: 12px; } .pad { padding: 14px 4px; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
.ic { flex: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ---------- buttons / inputs ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; font: 500 13px var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, transform .06s; }
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); border-color: var(--accent); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn-danger:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); }
.btn-ghost { border-color: transparent; background: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--sunken); border-color: transparent; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; }
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.spin { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
input, select, textarea { font: 13px var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 10px; height: 34px; width: 100%; transition: border-color .12s, box-shadow .12s; }
textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); padding: 0; }
select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="number"] { font-variant-numeric: tabular-nums; }
.field { margin-bottom: 14px; } .field label { display: block; font: 500 12px var(--font); color: var(--ink-2); margin-bottom: 5px; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 32px; height: 18px; background: var(--line-strong); border-radius: 9px; position: relative; transition: background .15s; flex: none; }
.toggle .track i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .15s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.toggle input:checked + .track { background: var(--accent); } .toggle input:checked + .track i { transform: translateX(14px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r); padding: 2px; }
.seg button { font: 500 12px var(--font); color: var(--ink-2); background: none; border: 0; padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.seg button:hover { color: var(--ink); } .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; font: 600 11px var(--font); letter-spacing: .01em; background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-soft); color: var(--ok); } .pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-bad { background: var(--bad-soft); color: var(--bad); } .pill-accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.brand .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); }
.brand small { display: block; font: 500 11px var(--font); color: var(--ink-3); letter-spacing: 0; margin-top: -2px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--ink-2); font-weight: 500; border-radius: var(--r); text-decoration: none; }
.nav a:hover { background: var(--sunken); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-foot .row { display: flex; align-items: center; justify-content: space-between; }
.upstream { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); padding: 0 4px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .status-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.main { min-width: 0; padding: 28px 36px 64px; max-width: 1480px; width: 100%; margin: 0 auto; }
.topbar { display: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.desc { color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.merge-act { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
@media (max-width: 899px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-102%); transition: transform .22s var(--ease); box-shadow: var(--shadow-lg); }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); animation: fade .15s; }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40; height: 52px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 650; }
  .main { padding: 18px 14px 56px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
}
@keyframes fade { from { opacity: 0; } }

/* ---------- panels / kpis ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.panel-h h3 { font-size: 13px; font-weight: 600; color: var(--ink); } .panel-b { padding: 12px 16px 16px; }
.panel.flush .panel-b { padding: 0; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi .v { font-size: 22px; } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.kpi .k { font: 500 12px var(--font); color: var(--ink-3); }
.kpi .v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 2px; letter-spacing: 0; }
.kpi .d { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.chip { font: 600 11px var(--font); padding: 1px 6px; border-radius: 5px; background: var(--sunken); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip.good { background: var(--ok-soft); color: var(--ok); } .chip.badc { background: var(--bad-soft); color: var(--bad); }
.cols { display: grid; gap: 14px; margin-bottom: 14px; } .cols > * { min-width: 0; } .cols-2 { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); } .cols-eq { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .cols-2, .cols-eq, .cols-3 { grid-template-columns: 1fr; } }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; } .live.off i { background: var(--ink-3); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; min-width: 0; overflow: hidden; } .chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; } .chart .axis { fill: var(--ink-3); font: 10.5px var(--font); font-variant-numeric: tabular-nums; } .chart .cross { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.tip { position: absolute; top: 4px; z-index: 5; pointer-events: none; min-width: 128px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 8px 10px; box-shadow: var(--shadow); font-size: 12px; }
.tip-t { color: var(--ink-3); margin-bottom: 4px; } .tip-r { display: flex; align-items: center; gap: 7px; } .tip-r i, .legend i, .stack-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; } .tip-r span { flex: 1; color: var(--ink-2); }
.legend { display: flex; gap: 14px; margin: 6px 0 0 40px; font-size: 12px; color: var(--ink-2); } .legend span { display: inline-flex; align-items: center; gap: 6px; }
.spark { display: block; }
.bars { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 4px; }
.bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .bar-v { color: var(--ink-2); white-space: nowrap; } .bar-v em { font-style: normal; color: var(--ink-3); margin-left: 6px; }
.bar-track { height: 6px; background: var(--sunken); border-radius: 3px; overflow: hidden; } .bar-track i { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--sunken); gap: 2px; } .stack i { display: block; min-width: 3px; }
.stack-legend { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.stack-legend li { display: flex; align-items: center; gap: 8px; } .stack-legend span { flex: 1; } .stack-legend em { font-style: normal; color: var(--ink-3); width: 52px; text-align: right; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.t th { position: sticky; top: 0; z-index: 1; text-align: left; font: 600 11px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t th.sortable { cursor: pointer; user-select: none; } .t th.sortable:hover { color: var(--ink); }
.t th .arrow { margin-left: 4px; color: var(--accent); }
.t td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; } .t tbody tr:hover { background: var(--surface-2); }
.t tr.click { cursor: pointer; } .t tr.sel { background: var(--accent-soft) !important; }
.t td.r, .t th.r { text-align: right; } .t td.nowrap { white-space: nowrap; }
.t td.trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes flash { from { background: var(--accent-soft); } to { background: transparent; } } .t tr.fresh td { animation: flash 2.2s ease-out; }
.keyname { font-weight: 600; } .t td:first-child { min-width: 168px; } .keysub.mono { white-space: nowrap; } .keysub { font-size: 12px; color: var(--ink-3); }
.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.rowact { display: flex; gap: 2px; justify-content: flex-end; align-items: center; } .rowact .btn-sm { min-width: 62px; justify-content: center; }

/* meters / skeleton / empty */
.meter { min-width: 120px; } .meter-none { display: flex; flex-direction: column; } .meter-none .mm { margin: 0; } .meter-top { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; } .meter .mv { font-weight: 600; } .meter .mm { color: var(--ink-3); font-size: 12px; }
.meter-bar { height: 5px; margin-top: 4px; background: var(--sunken); border-radius: 3px; overflow: hidden; } .meter-bar i { display: block; height: 100%; border-radius: 3px; transition: width .4s var(--ease); }
.meter-bar.ok i { background: var(--accent); } .meter-bar.warn i { background: var(--warn); } .meter-bar.bad i { background: var(--bad); }
.skeleton { display: inline-block; background: linear-gradient(90deg, var(--sunken), var(--line), var(--sunken)); background-size: 200% 100%; border-radius: 4px; animation: shimmer 1.3s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-table { padding: 6px 14px; } .skel-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--line); } .skel-row:last-child { border: 0; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 20px; color: var(--ink-3); }
.empty-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); margin-bottom: 4px; }
.empty-err .empty-ic { background: var(--bad-soft); color: var(--bad); } .empty-t { color: var(--ink); font-weight: 600; font-size: 14px; } .empty-h { max-width: 380px; font-size: 13px; margin-bottom: 8px; }

/* ---------- toolbar / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar .grow { flex: 1; min-width: 200px; } .toolbar select, .toolbar input { width: auto; } .toolbar input[type="search"], .toolbar .searchbox { width: 100%; }
.searchbox { position: relative; } .searchbox .ic { position: absolute; left: 10px; top: 9px; color: var(--ink-3); } .searchbox input { padding-left: 32px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.pager .pg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pager .pg .num { white-space: nowrap; } .pager select { height: 28px; font-size: 12px; }
.filter-count { font: 600 11px var(--font); background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 0 6px; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: var(--scrim); animation: fade .15s; backdrop-filter: blur(2px); }
.modal { width: min(540px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); animation: pop .18s var(--ease); outline: none; }
.modal-wide { width: min(720px, 100%); }
@keyframes pop { from { transform: translateY(8px) scale(.985); opacity: 0; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; } .modal-head h2 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.modal-body { padding: 16px 20px 6px; overflow-y: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }
.confirm-msg { color: var(--ink-2); margin-bottom: 14px; line-height: 1.55; }
.overlay-drawer { place-items: stretch end; padding: 0; }
.drawer { width: min(640px, 100vw); height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: slide .22s var(--ease); outline: none; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-title h2 { font-size: 16px; font-weight: 650; } .drawer-title .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; } .drawer-actions { display: flex; gap: 4px; align-items: center; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 40px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 -20px 16px; padding: 0 20px; }
.tabs button { font: 500 13px var(--font); color: var(--ink-3); background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; margin-bottom: -1px; cursor: pointer; } .tabs button:hover { color: var(--ink); } .tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 9px 14px; font-size: 13px; } .kv dt { color: var(--ink-3); } .kv dd { min-width: 0; overflow-wrap: anywhere; }
.code { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--sunken); }
.code-bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); font: 11px var(--mono); color: var(--ink-3); background: var(--surface-2); }
.code pre { margin: 0; padding: 12px; font: 12px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 420px; color: var(--ink); }
.secret { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--accent); background: var(--accent-soft); border-radius: var(--r); margin: 10px 0; } .secret code { flex: 1; background: none; border: 0; font-size: 13px; word-break: break-all; color: var(--ink); }
.callout { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r); font-size: 13px; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chipbtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; font: 500 12px var(--mono); background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; } .chipbtn.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.check-list { max-height: 160px; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 4px; } .check-list label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; font: 12.5px var(--mono); cursor: pointer; color: var(--ink); margin: 0; } .check-list label:hover { background: var(--sunken); }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; max-width: 360px; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: var(--r); font-size: 13px; box-shadow: var(--shadow); animation: pop .2s var(--ease); pointer-events: auto; }
.toast-bad { background: var(--bad); color: #fff; } .toast-ok .ic { color: var(--ok); }
@media (max-width: 899px) { .toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; } }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.login-art { position: relative; overflow: hidden; background: var(--sunken); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: 40px; }
.login-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%); opacity: .8; }
.login-art > * { position: relative; } .login-art h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.03em; max-width: 400px; font-weight: 650; } .login-art p { color: var(--ink-2); max-width: 380px; margin-top: 12px; }
.login-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 12px var(--mono); color: var(--ink-2); } .login-flow span { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
.login-form { display: grid; place-items: center; padding: 32px; } .login-card { width: min(360px, 100%); } .login-card h1 { font-size: 22px; letter-spacing: -.02em; font-weight: 650; } .login-card .desc { margin: 4px 0 22px; }
.login-err { margin-top: 12px; color: var(--bad); font-size: 13px; min-height: 20px; }
@media (max-width: 899px) { .login { grid-template-columns: 1fr; } .login-art { display: none; } }

/* ---------- playground / settings ---------- */
.pg-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; } @media (max-width: 1000px) { .pg-layout { grid-template-columns: 1fr; } }
.convo { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 280px; max-height: 56vh; overflow-y: auto; }
.msg { display: grid; grid-template-columns: 64px 1fr; gap: 10px; } .msg .role { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-top: 3px; }
.msg .body { white-space: pre-wrap; word-break: break-word; line-height: 1.6; } .msg.assistant .body { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.caret::after { content: "▍"; animation: blink 1s steps(2) infinite; color: var(--accent); } @keyframes blink { 50% { opacity: 0; } }
.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: flex-end; } .composer textarea { flex: 1; min-height: 40px; max-height: 160px; }
.runstats { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.alias-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.settings-grid { display: grid; gap: 14px; max-width: 760px; } .sysgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .sysgrid .k { font-size: 12px; color: var(--ink-3); } .sysgrid .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); } .danger-zone .panel-h h3 { color: var(--bad); }
.sep { height: 1px; background: var(--line); margin: 14px 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.skiplink { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: var(--r); } .skiplink:focus { left: 8px; }

/* ---------- accounts: sign-up, approval, users ---------- */
.login-tabs { margin-bottom: 22px; } .login-tabs .seg { display: flex; width: 100%; } .login-tabs .seg button { flex: 1; padding: 7px 11px; }
.login-alt { margin-top: 18px; font-size: 13px; color: var(--ink-2); text-align: center; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; } .linkbtn:hover { text-decoration: underline; }
.pwbox { position: relative; } .pwbox input { padding-right: 58px; }
.pwtoggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 26px; padding: 0 9px; font: 500 12px var(--font); color: var(--ink-2); background: none; border: 0; border-radius: 6px; cursor: pointer; } .pwtoggle:hover { background: var(--sunken); color: var(--ink); }
.strength { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .strength .bars { display: inline-flex; gap: 3px; } .strength .bars i { display: inline-block; width: 26px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.strength[data-score="0"] .bars i:nth-child(-n+1), .strength[data-score="1"] .bars i:nth-child(-n+1) { background: var(--bad); }
.strength[data-score="2"] .bars i:nth-child(-n+2) { background: var(--warn); } .strength[data-score="3"] .bars i:nth-child(-n+3) { background: var(--ok); } .strength[data-score="4"] .bars i { background: var(--ok); }
.notice { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r); font-size: 13px; margin-bottom: 16px; border: 1px solid transparent; } .notice .ic { flex: none; margin-top: 2px; } .notice b { display: block; font-weight: 600; margin-bottom: 1px; }
.notice-info { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.notice-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.notice div > div { color: var(--ink); }
.login-done { text-align: center; } .login-done h1 { font-size: 22px; letter-spacing: -.02em; font-weight: 650; margin-top: 14px; } .login-done .desc { margin: 8px 0 14px; } .done-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--ok-soft); color: var(--ok); }

.usercard { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.usercard .avatar { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font); background: var(--accent-soft); color: var(--accent); }
.usercard .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .usercard .who b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usercard .who span { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rolechip { grid-column: 2; justify-self: start; display: inline-block; font: 600 10.5px var(--font); letter-spacing: .03em; text-transform: uppercase; padding: 1px 7px; border-radius: 9px; background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line); } .rolechip.admin { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.panel-h .rolechip { grid-column: auto; }
.navbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; font: 600 11px var(--font); border-radius: 9px; background: var(--warn); color: #fff; text-decoration: none; } .topbar .navbadge { margin-left: auto; }
:root[data-theme="dark"] .navbadge { color: #1a1304; }

.utabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.utabs button { display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--font); color: var(--ink-3); background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; margin-bottom: -1px; cursor: pointer; } .utabs button:hover { color: var(--ink); } .utabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabcount { min-width: 20px; padding: 0 6px; height: 18px; display: inline-grid; place-items: center; font: 600 11px var(--font); border-radius: 9px; background: var(--sunken); color: var(--ink-2); } .tabcount.hot { background: var(--warn); color: #fff; } :root[data-theme="dark"] .tabcount.hot { color: #1a1304; }
.chip-you { font: 600 10px var(--font); text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); vertical-align: 1px; }
.rowact.wrap { flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .rowact .ra { display: inline-flex; }
.users-t td { vertical-align: middle; }
.quota { font-size: 12.5px; color: var(--ink-2); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .quota.full { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-soft); }
.btn[aria-disabled="true"] { opacity: .6; }
@media (max-width: 899px) {
  .utabs { overflow-x: auto; flex-wrap: nowrap; } .utabs button { white-space: nowrap; }
  .users-t th:nth-child(3), .users-t td:nth-child(3), .users-t th:nth-child(6), .users-t td:nth-child(6) { display: none; }
  .rowact.wrap { justify-content: flex-start; }
}
@media (max-width: 560px) { .users-t th:nth-child(4), .users-t td:nth-child(4), .users-t th:nth-child(7), .users-t td:nth-child(7) { display: none; } }

/* ---- Devices ---------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.connect .panel-h h3 { display: inline-flex; align-items: center; gap: 7px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; }
.stepn { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--font); background: var(--accent-soft); color: var(--accent); }
.steps b { font-weight: 600; font-size: 13px; }
.cmdrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cmd { flex: 1 1 320px; min-width: 0; display: block; padding: 9px 12px; font: 12.5px var(--mono); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); overflow-x: auto; white-space: nowrap; }
.cmd:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmdnote { flex-basis: 100%; }
.connect-note { margin-top: 12px; } .connect-note code { font: 12px var(--mono); background: var(--sunken); padding: 1px 5px; border-radius: 4px; }
.devname { display: inline-flex; align-items: center; gap: 2px; } .devname .icon-btn { opacity: 0; transition: opacity .12s; } .t tr:hover .devname .icon-btn, .devname .icon-btn:focus-visible { opacity: 1; }
.devname-input { width: 100%; max-width: 240px; height: 28px; padding: 0 8px; font-weight: 600; }
.is-revoked td { opacity: .6; } .is-revoked td:last-child { opacity: 1; }
.devlink { color: var(--accent); text-decoration: none; font-weight: 600; } .devlink:hover { text-decoration: underline; }
.notice .notice-x { margin-left: auto; align-self: center; }
.devices-t td:first-child { min-width: 200px; }
@media (hover: none) { .devname .icon-btn { opacity: 1; } }
/* columns: Device | [Owner] | Status | Usage | Last IP | Connected | actions — hide the least useful first on narrow screens */
@media (max-width: 899px) { .steps { grid-template-columns: 1fr; gap: 10px; }
  .devices-t th:nth-child(4), .devices-t td:nth-child(4) { display: none; }                                   /* Last IP (no owner column) */
  .devices-t.has-owner th:nth-child(4), .devices-t.has-owner td:nth-child(4) { display: table-cell; }
  .devices-t.has-owner th:nth-child(5), .devices-t.has-owner td:nth-child(5) { display: none; } }          /* Last IP (with owner column) */
@media (max-width: 560px) { .cmd { flex-basis: 100%; }
  .devices-t th:nth-child(5), .devices-t td:nth-child(5) { display: none; }                                   /* Connected (no owner column) */
  .devices-t.has-owner th:nth-child(5), .devices-t.has-owner td:nth-child(5) { display: none; }
  .devices-t.has-owner th:nth-child(6), .devices-t.has-owner td:nth-child(6) { display: none; }
  .devices-t.has-owner th:nth-child(2), .devices-t.has-owner td:nth-child(2) { display: none; }               /* Owner hidden on phones: the row shows device + status + usage */
  .devices-t td:first-child { min-width: 150px; } .devname-input { max-width: 180px; } }

/* approval card */
.devpage .devcard { max-width: 520px; margin: 8px auto 0; }
.devcard-b { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 24px 24px; }
.devcard-b h2 { font-size: 19px; font-weight: 650; letter-spacing: -.015em; margin-top: 4px; }
.devcard-b .desc { max-width: 380px; }
.devcard-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; width: 100%; } .devcard-act .btn { min-width: 120px; justify-content: center; height: 36px; }
.done-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.done-ic.done-ok { background: var(--ok-soft); color: var(--ok); } .done-ic.done-warn { background: var(--warn-soft); color: var(--warn); } .done-ic.done-info { background: var(--accent-soft); color: var(--accent); }
.bigcode { font: 600 34px/1.1 var(--mono); letter-spacing: .14em; padding: 16px 22px; margin: 6px 0; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--ink); border-radius: var(--r-lg); user-select: all; }
.codeinput { width: 100%; max-width: 260px; text-align: center; font: 600 26px var(--mono); letter-spacing: .14em; height: 56px; text-transform: uppercase; }
.devfacts { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 4px 0; }
.devfacts > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; } .devfacts > div:last-child { border-bottom: 0; }
.devfacts dt { color: var(--ink-3); flex: none; } .devfacts dd { text-align: right; word-break: break-word; font-weight: 500; }
.devcard .notice { text-align: left; width: 100%; margin: 4px 0 0; }
@media (max-width: 560px) { .bigcode { font-size: 26px; padding: 12px 14px; } .devcard-b { padding: 22px 16px 18px; } .devcard-act .btn { flex: 1; } }

.devices-t td.num span { white-space: nowrap; } .devices-t .keyname { overflow-wrap: anywhere; }
@media (max-width: 560px) { .devices-t td.num .keysub { display: none; } .devices-t td:first-child { min-width: 140px; } .devices-t .keyname { white-space: nowrap; } }

/* =====================================================================================================
   STUDIO — the virtual office.  (everything below is scoped to .studio / .office or Studio-only classes)
   ===================================================================================================== */
:root[data-theme="light"] { --role-pm: #d9731f; --role-architect: #6a4fd1; --role-backend: #1f7bd1; --role-frontend: #d1458e; --role-qa: #12907a; --role-security: #c23a3a; --role-devops: #6b7280; --floor: #eef0e9; --floor-line: #dfe2d8; --table: #e6dccb; --table-edge: #cdbd9f; --paper: #fff8d8; }
:root[data-theme="dark"]  { --role-pm: #f0954a; --role-architect: #9a82f0; --role-backend: #5aa2f0; --role-frontend: #ef6fb0; --role-qa: #3cc9ad; --role-security: #ef6f6f; --role-devops: #98a1b3; --floor: #12151a; --floor-line: #1c212a; --table: #2a2620; --table-edge: #3b3429; --paper: #3a3519; }
.studio { display: block; }
.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px 0 18px; overflow-x: auto; }
.tabl { padding: 9px 14px; font: 500 13px var(--font); color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabl:hover { color: var(--ink); text-decoration: none; } .tabl.on { color: var(--ink); border-bottom-color: var(--accent); }
.livechip { text-decoration: none !important; }
.backrow { margin-bottom: 10px; } .flip { transform: rotate(180deg); } .rot { transform: rotate(90deg); }
.lbl { font: 500 12px var(--font); color: var(--ink-2); margin-bottom: 6px; } .bad-txt { color: var(--bad); }
.grow { flex: 1; } .nowrap { white-space: nowrap; }
.clickrow { cursor: pointer; } .clickrow:hover td { background: var(--surface-2); } .clickrow:focus-visible { outline-offset: -2px; }

/* ---- composer ---- */
.scomposer { padding: 0; overflow: hidden; margin-bottom: 18px; transition: border-color .15s, box-shadow .15s; }
.scomposer.drag { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.comp-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 20px 22px 6px; flex-wrap: wrap; }
.comp-head h2 { font-size: 20px; letter-spacing: -.02em; font-weight: 650; }
.comp-usage { min-width: 190px; text-align: right; } .comp-usage .meter { text-align: left; }
.scomposer .notice { margin: 8px 22px 0; } .scomposer .panel-b { padding: 12px 22px 22px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.starter { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font); padding: 6px 11px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); border: 1px dashed var(--line-strong); cursor: pointer; transition: all .15s; }
.starter:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.comp-text { min-height: 120px; resize: vertical; font-size: 14px; line-height: 1.55; }
.comp-tools { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; flex-wrap: wrap; }
.comp-opts { align-items: start; margin-bottom: 6px; }
.roster { display: flex; flex-wrap: wrap; gap: 6px; }
.roster-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; border-radius: 999px; font: 500 12px var(--font); color: var(--ink-3); background: var(--sunken); border: 1px solid var(--line); cursor: pointer; opacity: .65; transition: all .15s; }
.roster-p .avatar-svg { filter: grayscale(1); transition: filter .15s; }
.roster-p.on { opacity: 1; color: var(--ink); border-color: color-mix(in srgb, var(--hue) 55%, var(--line)); background: color-mix(in srgb, var(--hue) 12%, var(--surface)); }
.roster-p.on .avatar-svg { filter: none; } .roster-p:disabled { cursor: default; } .roster-p:hover:not(:disabled) { opacity: 1; }
.roster-sm .roster-p { padding-right: 8px; }
.extra-row { margin: 6px 0 8px; } .linkbtn .ic { vertical-align: -2px; transition: transform .15s; }
.comp-go { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.btn-big { height: 44px; padding: 0 26px; font-size: 15px; border-radius: 10px; }
.meter-top { display: flex; gap: 6px; align-items: baseline; }

/* ---- run bar + stepper ---- */
.runbar { padding: 14px 18px 12px; margin-bottom: 14px; display: grid; gap: 12px; }
.rb-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rb-title { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin-right: auto; }
.rb-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rb-meter { min-width: 190px; }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.sp { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); text-align: center; position: relative; min-width: 0; }
.sp::before { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; } .sp:first-child::before { display: none; }
.sp i { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font); font-style: normal; background: var(--sunken); color: var(--ink-3); border: 1px solid var(--line-strong); transition: all .25s var(--ease); }
.sp span { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sp-past i { background: var(--ok); color: #fff; border-color: var(--ok); } .sp-past::before, .sp-now::before { background: var(--ok); }
.sp-now i { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); animation: pulse 1.6s infinite; } .sp-now { color: var(--ink); font-weight: 600; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
.replaybar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; margin-bottom: 12px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-2); }

/* ---- layout ---- */
.office-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.office-main { display: grid; gap: 14px; min-width: 0; } .office-side { position: sticky; top: 14px; min-width: 0; }
@media (max-width: 1180px) { .office-grid { grid-template-columns: 1fr; } .office-side { position: static; } }

/* ---- the floor ---- */
.floor, .office-empty .floor { position: relative; border: 1px solid var(--floor-line); border-radius: var(--r-lg); padding: 26px 18px 22px; overflow: hidden;
  background: radial-gradient(1200px 380px at 50% 50%, color-mix(in srgb, var(--table) 35%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--floor-line) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--floor-line) 39px 40px), var(--floor); }
.office-empty { padding: 0; overflow: hidden; } .office-empty .floor { border: 0; border-radius: 0; opacity: .92; }
.floor-empty { min-height: 200px; display: grid; place-items: center; }
.floor-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; align-items: end; }
.seat { display: grid; place-items: center; min-width: 0; padding-top: 52px; }
.seat-table { grid-column: 2 / span 2; grid-row: 2; align-self: center; z-index: 0; }
.seat-0 { grid-column: 2 / span 2; grid-row: 1; } .seat-1 { grid-column: 1; grid-row: 1; } .seat-2 { grid-column: 4; grid-row: 1; }
.seat-3 { grid-column: 1; grid-row: 2; } .seat-4 { grid-column: 4; grid-row: 2; } .seat-5 { grid-column: 1 / span 2; grid-row: 3; } .seat-6 { grid-column: 3 / span 2; grid-row: 3; }
.floor.n3 .seat-0 { grid-column: 1 / span 4; } .floor.n3 .seat-1 { grid-column: 1 / span 2; grid-row: 2; } .floor.n3 .seat-2 { grid-column: 3 / span 2; grid-row: 2; } .floor.n3 .seat-table { grid-column: 1 / span 4; grid-row: 3; }
.floor.n4 .seat-0 { grid-column: 1 / span 4; } .floor.n4 .seat-1 { grid-column: 1; grid-row: 2; } .floor.n4 .seat-2 { grid-column: 4; grid-row: 2; } .floor.n4 .seat-3 { grid-column: 2 / span 2; grid-row: 2; } .floor.n4 .seat-table { grid-column: 1 / span 4; grid-row: 3; }
.floor.n5 .seat-3 { grid-column: 1 / span 2; grid-row: 3; } .floor.n5 .seat-4 { grid-column: 3 / span 2; grid-row: 3; }
.floor.n6 .seat-3 { grid-column: 1; grid-row: 2; } .floor.n6 .seat-4 { grid-column: 4; grid-row: 2; } .floor.n6 .seat-5 { grid-column: 2 / span 2; grid-row: 3; }
@media (max-width: 760px) {
  .floor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seat, .floor .seat { grid-column: auto !important; grid-row: auto !important; padding-top: 46px; }
  .seat-table, .floor .seat-table { grid-column: 1 / span 2 !important; grid-row: auto !important; order: -1; } .seat-0 { grid-column: 1 / span 2 !important; }
}
.desk { position: relative; display: grid; justify-items: center; gap: 2px; width: min(168px, 100%); padding: 8px 8px 10px; background: color-mix(in srgb, var(--surface) 88%, var(--hue)); border: 1px solid color-mix(in srgb, var(--hue) 28%, var(--line)); border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink); text-align: center; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 14px -8px color-mix(in srgb, var(--hue) 55%, transparent); }
.desk::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -7px; height: 7px; border-radius: 0 0 10px 10px; background: color-mix(in srgb, var(--hue) 40%, var(--line-strong)); opacity: .55; }
.desk:hover { transform: translateY(-2px); border-color: var(--hue); } .desk.is-active { border-color: var(--hue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 24%, transparent); }
.desk.st-speaking { border-color: var(--hue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 30%, transparent), 0 12px 24px -10px var(--hue); transform: translateY(-3px); }
.desk.st-thinking, .desk.st-writing, .desk.st-reviewing { border-color: color-mix(in srgb, var(--hue) 70%, var(--line)); }
.desk-av { position: relative; display: block; } .seat-dot { position: absolute; right: 2px; bottom: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink-3); border: 2px solid var(--surface); }
.st-thinking .seat-dot, .st-writing .seat-dot, .st-reviewing .seat-dot { background: var(--warn); animation: pulse2 1.2s infinite; } .st-speaking .seat-dot { background: var(--ok); }
@keyframes pulse2 { 50% { transform: scale(1.35); opacity: .6; } }
.desk-name { font-weight: 650; font-size: 13px; letter-spacing: -.01em; margin-top: 2px; } .desk-title { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.desk-status { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--font); color: var(--ink-2); margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--sunken); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-status.st-thinking, .desk-status.st-writing, .desk-status.st-reviewing { background: var(--warn-soft); color: var(--warn); } .desk-status.st-speaking { background: var(--ok-soft); color: var(--ok); }
.sdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: bounce 1s infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.desk-counts { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; } .desk-counts b { color: var(--ink-2); }
.desk-preview { cursor: default; width: 150px; pointer-events: none; }
.bubble { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(.9); transform-origin: 50% 100%; width: max(230px, 118%); max-width: 280px; padding: 8px 11px; font-size: 12px; line-height: 1.4; text-align: left; background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--hue) 45%, var(--line)); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); z-index: 5; }
.bubble.has { opacity: 1; transform: translateX(-50%) scale(1); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--surface); border-right: 1px solid color-mix(in srgb, var(--hue) 45%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--hue) 45%, var(--line)); transform: rotate(45deg); }
.desk:not(:hover):not(:focus-visible):not(.st-speaking) .bubble.has { opacity: .0; transform: translateX(-50%) scale(.92); }
.desk.st-speaking .bubble.has, .desk:hover .bubble.has, .desk:focus-visible .bubble.has { opacity: 1; }
.seat-1 .bubble, .seat-3 .bubble { left: 0; transform: scale(.9); } .seat-1 .bubble.has, .seat-3 .bubble.has { transform: scale(1); } .seat-2 .bubble, .seat-4 .bubble { left: auto; right: 0; transform: scale(.9); } .seat-2 .bubble.has, .seat-4 .bubble.has { transform: scale(1); }
.desk:not(:hover):not(:focus-visible):not(.st-speaking) .seat-1 .bubble.has { transform: scale(.92); }
.bubble-k { display: block; font: 700 10px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--hue); margin-bottom: 2px; }
.caret { display: inline-block; width: 6px; height: 12px; vertical-align: -2px; background: var(--hue); margin-left: 2px; animation: blink 1s steps(2) infinite; } .caret.off { display: none; } @keyframes blink { 50% { opacity: 0; } }
@media (max-width: 760px) { .bubble { width: 200px; } .seat-1 .bubble, .seat-3 .bubble, .seat-5 .bubble { left: 0; transform: scale(.9); } .seat-2 .bubble, .seat-4 .bubble, .seat-6 .bubble { left: auto; right: 0; transform: scale(.9); } }

/* avatars */
.avatar-svg { display: block; --skin: #f1c9a5; } :root[data-theme="dark"] .avatar-svg { --skin: #e0b48f; }
.av-bg { fill: color-mix(in srgb, var(--hue) 20%, var(--surface)); stroke: color-mix(in srgb, var(--hue) 45%, transparent); stroke-width: 1; }
.av-shirt { fill: var(--hue); } .av-collar { fill: none; stroke: color-mix(in srgb, #fff 55%, var(--hue)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.av-skin { fill: var(--skin); } .av-hair { fill: color-mix(in srgb, #2b2118 70%, var(--hue)); } .av-eye { fill: #1b1b1b; } .av-mouth { fill: none; stroke: #8a4b3a; stroke-width: 1.4; stroke-linecap: round; }
.av-gear { stroke: color-mix(in srgb, #fff 80%, var(--hue)); stroke-width: 1.5; opacity: .95; }
.avatar-svg .av-head, .avatar-svg .av-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; } .avatar-svg .av-head { animation-delay: .25s; }
@keyframes breathe { 50% { transform: translateY(-.9px) scale(1.012); } }
.avatar-svg.is-thinking .av-head { animation: think 1.8s ease-in-out infinite; } @keyframes think { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.avatar-svg.is-speaking .av-head { animation: talk .5s ease-in-out infinite; } @keyframes talk { 50% { transform: translateY(-1.4px); } }

/* meeting table + whiteboard */
.table-top { width: 100%; padding: 4px 6px 12px; } .table-surface { min-height: 138px; padding: 12px 16px 16px; border-radius: 999px / 46px; background: linear-gradient(180deg, color-mix(in srgb, var(--table) 92%, #fff 8%), var(--table)); border: 1px solid var(--table-edge); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 12px 24px -14px rgba(0,0,0,.45); display: grid; gap: 8px; align-content: center; justify-items: center; text-align: center; }
.tbl-phase { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-2); } .tbl-phase b { font-size: 14px; color: var(--ink); } .tbl-k { font: 700 10px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.sticky-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 100%; }
.sticky { max-width: 150px; padding: 8px 10px; font-size: 11.5px; line-height: 1.3; text-align: left; color: #3b3520; background: var(--paper); border-radius: 3px; box-shadow: 0 3px 8px -3px rgba(0,0,0,.35); transform: rotate(var(--rot)); animation: drop .45s var(--ease) backwards; }
:root[data-theme="dark"] .sticky { color: #eee3a5; } .sticky.s1 { background: color-mix(in srgb, #ffd6e0 70%, var(--paper)); } .sticky.s2 { background: color-mix(in srgb, #d5f0ff 70%, var(--paper)); } .sticky.s3 { background: color-mix(in srgb, #dcffd6 70%, var(--paper)); }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) rotate(calc(var(--rot) * 2)); } }
.pin { position: relative; max-width: 190px; padding: 9px 11px 9px; text-align: left; font-size: 11.5px; line-height: 1.35; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); animation: drop .45s var(--ease) backwards; }
.pin::before { content: ""; position: absolute; top: -5px; left: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 1px 2px rgba(0,0,0,.4); } .pin b { display: block; font-size: 12px; } .pin span { color: var(--ink-2); }
.dissent { display: inline-block; margin-top: 4px; font: 600 10px var(--font); font-style: normal; color: var(--bad); background: var(--bad-soft); padding: 1px 6px; border-radius: 6px; }
.table-empty { padding: 4px; }

/* arrows */
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .55s var(--ease) forwards, fadeout .5s ease 2s forwards; } .arrow g { animation: pop .3s var(--ease) .4s backwards, fadeout .5s ease 2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadeout { to { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: scale(.6); } }
.arrow-txt { font: 700 10px var(--font); fill: #fff; letter-spacing: .03em; } .arrow-agree .arrow-txt { fill: #fff; }

/* ---- feed ---- */
.feed { display: flex; flex-direction: column; max-height: calc(100vh - 120px); min-height: 360px; position: relative; } .feed .panel-h { padding-bottom: 8px; flex-wrap: wrap; }
.feed-scroll { overflow-y: auto; padding: 4px 14px 14px; flex: 1; scroll-behavior: smooth; } .feed-empty { padding: 20px 6px; text-align: center; }
.round-mark { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font: 700 10px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .round-mark::before, .round-mark::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fmsg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 7px 0; animation: slidein .3s var(--ease); } @keyframes slidein { from { opacity: 0; transform: translateY(8px); } }
.fav { background: none; border: 0; padding: 0; cursor: pointer; height: 34px; border-radius: 50%; } .fbody { min-width: 0; background: color-mix(in srgb, var(--hue) 7%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--hue) 22%, var(--line)); border-radius: 4px 12px 12px 12px; padding: 8px 11px; }
.fhead { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; } .fhead b { color: color-mix(in srgb, var(--hue) 75%, var(--ink)); font-size: 12.5px; } .fid { margin-left: auto; color: var(--ink-3); font-family: var(--mono); }
.fb-text { font-size: 12.5px; line-height: 1.5; } .fb-list { margin: 3px 0 0 16px; font-size: 12.5px; line-height: 1.5; } .fb-list li { margin: 2px 0; }
.crit { margin-top: 6px; padding: 7px 9px; border-radius: 8px; border-left: 3px solid var(--line-strong); background: var(--surface); font-size: 12.5px; } .crit-ok { border-left-color: var(--ok); } .crit-warn { border-left-color: var(--warn); } .crit-bad { border-left-color: var(--bad); }
.crit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .crit-to { font-size: 11.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.mini-av { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); display: inline-block; }
.stance { font: 700 10px var(--font); text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; } .st-ok.stance { background: var(--ok-soft); color: var(--ok); } .st-warn.stance { background: var(--warn-soft); color: var(--warn); } .st-bad.stance { background: var(--bad-soft); color: var(--bad); }
.crit-q { margin: 2px 0 4px; padding: 3px 8px; border-left: 2px solid var(--line-strong); color: var(--ink-3); font-style: italic; font-size: 12px; } .crit-i { color: var(--ink); } .crit-r { margin-top: 4px; color: var(--ink-2); }
.dec { padding: 7px 9px; margin-top: 5px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; } .dissent-line { margin-top: 3px; font-size: 11.5px; color: var(--bad); }
.act-accept { background: var(--ok-soft); color: var(--ok); } .act-rebut { background: var(--bad-soft); color: var(--bad); } .act-modify { background: var(--warn-soft); color: var(--warn); }
.jump { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--font); padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); border: 0; box-shadow: var(--shadow); cursor: pointer; } .jump-ic { transform: rotate(90deg); }

/* ---- task board ---- */
.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.lane { background: var(--sunken); border: 1px solid var(--line); border-top: 3px solid var(--hue); border-radius: var(--r); padding: 8px; min-width: 0; } .lane-h { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; padding: 2px 2px 8px; font: inherit; color: var(--ink); } .lane-h b { margin-right: auto; }
.lane-b { display: grid; gap: 8px; }
.tcard { display: grid; gap: 6px; text-align: left; width: 100%; padding: 9px 10px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); animation: slidein .4s var(--ease); transition: transform .15s, border-color .15s; } .tcard:hover { transform: translateY(-1px); border-color: var(--ink-3); }
.tc-accent { border-left-color: var(--accent); } .tc-warn { border-left-color: var(--warn); } .tc-bad { border-left-color: var(--bad); } .tc-ok { border-left-color: var(--ok); }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .tc-state { font: 700 10px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); } .tcs-ok { color: var(--ok); } .tcs-warn { color: var(--warn); } .tcs-bad { color: var(--bad); } .tcs-accent { color: var(--accent); }
.tc-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; } .tc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: var(--ink-3); } .tc-moved { display: inline-flex; gap: 3px; align-items: center; padding: 1px 6px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-weight: 600; } .tc-id { margin-left: auto; font-family: var(--mono); }

/* ---- drawers / markdown ---- */
.emp-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; } .emp-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.dr-h { margin: 16px 0 6px; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); } .dr-p { font-size: 13px; line-height: 1.55; }
.dr-list { display: grid; gap: 6px; } .dr-row { display: flex; gap: 8px; align-items: center; text-align: left; width: 100%; padding: 7px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); } .dr-row span:nth-child(2) { flex: 1; }
.dr-msg { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.task-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .owner { display: inline-flex; align-items: center; gap: 6px; }
.dv { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .dv-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.md { font-size: 13px; line-height: 1.6; } .md p { margin: 6px 0; } .md ul, .md ol { margin: 6px 0 6px 20px; } .md li { margin: 2px 0; }
.md-h { font-weight: 650; margin: 12px 0 4px; } .md-h1 { font-size: 16px; } .md-h2 { font-size: 14.5px; } .md-h3, .md-h4 { font-size: 13.5px; }
.md-code { margin: 8px 0; padding: 10px 12px; overflow: auto; font: 12px/1.5 var(--mono); background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; white-space: pre; } .md-code code { background: none; border: 0; padding: 0; }
.md blockquote { margin: 6px 0; padding: 2px 10px; border-left: 3px solid var(--line-strong); color: var(--ink-2); } .md-url { color: var(--ink-3); word-break: break-all; }

/* ---- minutes ---- */
.minutes.is-failed { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); } .minutes .panel-h { flex-wrap: wrap; } .minutes .notice { margin-bottom: 12px; }
.mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-bottom: 16px; } .mstats > div { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; } .mstats b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.02em; } .mstats span { font-size: 11.5px; color: var(--ink-3); }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 800px) { .mgrid { grid-template-columns: 1fr; } }
.mcol h4, .m-h { margin: 12px 0 5px; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); } .mcol p { font-size: 13px; line-height: 1.6; } .risk li::marker { color: var(--bad); } .m-decs { display: grid; gap: 6px; }

/* ---- runs / routines / team ---- */
.runs-t td { vertical-align: middle; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.rcard { padding: 16px; display: grid; gap: 10px; align-content: start; } .rcard.off { opacity: .72; } .rc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .rc-name { font-size: 15px; font-weight: 650; }
.rc-req { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .rc-people { display: flex; gap: 4px; flex-wrap: wrap; } .mini-person { display: inline-block; }
.rc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12.5px; } .rc-meta dt { font: 700 10px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; } .rc-meta dd { margin: 0; }
.rc-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sched { margin: 10px 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); } .sched-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; } .sched-row .field { margin-bottom: 4px; } .inl { display: inline-flex; align-items: center; gap: 6px; } .inl input { width: 72px; } .sched select { width: auto; min-width: 150px; }
.follow { margin: 6px 0 10px; }
.savebar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .savebar.dirty { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.team { display: grid; gap: 14px; } .team-grid { display: grid; gap: 10px; }
.emp-card { border-left: 3px solid var(--hue); } .emp-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left; } .emp-id { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.emp-edit { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; } @media (max-width: 760px) { .emp-edit { grid-template-columns: 1fr; } } .emp-remit { margin-bottom: 10px; } .emp-prev { display: grid; gap: 6px; justify-items: center; align-content: start; }

@media (max-width: 899px) { .comp-usage { text-align: left; } .comp-head, .scomposer .panel-b { padding-left: 16px; padding-right: 16px; } .scomposer .notice { margin-left: 16px; margin-right: 16px; } .stepper .sp span { display: none; } .stepper .sp-now span { display: block; position: absolute; top: 26px; white-space: nowrap; } .runbar { padding-bottom: 26px; } }
@media (prefers-reduced-motion: reduce) { .avatar-svg .av-head, .avatar-svg .av-body, .dots i, .caret, .sp-now i { animation: none !important; } .arrow path, .arrow g { animation: none !important; stroke-dashoffset: 0; } .sticky, .pin, .tcard, .fmsg { animation: none !important; } }
.newbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.comp-go{position:sticky;bottom:0;z-index:2;background:var(--surface);padding:10px 0 4px;border-top:1px solid var(--line)}
.scomposer{overflow:clip}
.buildp .brow{margin:8px 0}.bpick{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:6px}.bpick li{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px}
.bres{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.bhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px;word-break:break-all}
.bres .tabs{display:flex;gap:4px;margin:8px 0}.bres .tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3);padding:6px 10px;cursor:pointer}.bres .tabs button.on{color:var(--ink);border-color:var(--accent,#6d8cff)}
.btasks{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}.btasks li{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;display:grid;gap:4px}
.bdiff{max-height:420px;overflow:auto;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:10px;font:12px/1.5 ui-monospace,monospace;white-space:pre;margin:0 0 12px}
.bdiff .a{color:#3fb950}.bdiff .d{color:#f85149}.bdiff .k{color:#79b8ff}.bdiff .h{color:var(--ink-3)}
.linkbtn{background:none;border:0;color:var(--ink-3);text-decoration:underline;cursor:pointer;padding:0 6px}.linkbtn.on{color:var(--ink)}
.wbgh{display:flex;gap:6px;align-items:center;padding-bottom:6px}.wb{display:grid;gap:14px}.wbbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:12px}.wbtasks{display:grid;gap:10px;margin-bottom:10px}.wbtask{display:grid;gap:6px}.wbrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.wbrow .grow{flex:1;min-width:200px}
.bact{max-height:180px;overflow:auto;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin:8px 0;font:12px/1.6 ui-monospace,monospace}.ba{display:flex;gap:8px}.ba .bk{color:var(--ink-3);min-width:46px}.ba.edit .bk,.ba.write .bk{color:#3fb950}.ba.run .bk{color:#d29922}.ba .bv{overflow-wrap:anywhere}
.ask-h{margin:0 0 6px;font-size:18px;font-weight:650;letter-spacing:-.01em}.ask-box{width:100%;font-size:15px;line-height:1.5;resize:vertical;min-height:96px;margin:10px 0}.ask-row{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}.ideas,.projs{display:flex;gap:8px;flex-wrap:wrap}.projs{margin-bottom:10px}
.chip{background:var(--sunken);border:1px dashed var(--line);color:var(--ink-2,var(--ink));border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer}.chip:hover,.chip.on{border-style:solid;color:var(--ink)}
/* ---- Build floor (reuses .floor/.desk/.bubble from the meeting office) ---- */
.bfloor{padding:16px 16px 14px;display:grid;gap:14px;min-height:0}.bplan{display:flex;gap:14px;align-items:center;padding:18px}
.bhdr{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;z-index:1}
.blead{display:flex;gap:10px;align-items:center;min-width:0;flex:1}.blead-av{border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--hue) 55%,transparent);flex:none;display:block;line-height:0}
.blead.st-reviewing .blead-av{animation:pulse2 1.2s infinite}.blead.st-speaking .blead-av{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 55%,transparent)}
.blead-t{display:grid;min-width:0}.blead-l{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
@media (max-width: 560px) { .bhdr > .blead { flex: 1 1 100%; } }
.bprog{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ink-3)}.bbar{width:120px;height:6px;border-radius:999px;background:var(--sunken);overflow:hidden;display:block}.bbar i{display:block;height:100%;background:var(--ok);transition:width .5s ease}
.bgrid{display:flex;gap:26px 18px;justify-content:center;flex-wrap:wrap;padding-top:62px;position:relative;z-index:1}
.bdesk{cursor:default;width:min(176px,100%)}.bdesk:hover{transform:none}
.bdesk.st-writing,.bdesk.st-reviewing{border-color:var(--hue);box-shadow:0 0 0 3px color-mix(in srgb,var(--hue) 24%,transparent),0 12px 24px -12px var(--hue)}
.bdesk.st-writing .seat-dot,.bdesk.st-reviewing .seat-dot{background:var(--warn);animation:pulse2 .8s infinite}
.bdesk .bubble{width:max(210px,125%);max-width:290px;opacity:0}.bdesk .bubble.has{opacity:1}
.typing{position:absolute;left:-6px;bottom:-2px;display:flex;gap:2px;padding:3px 6px;border-radius:8px;background:var(--surface);border:1px solid color-mix(in srgb,var(--hue) 40%,var(--line))}
.typing i{width:4px;height:4px;border-radius:50%;background:var(--hue);animation:bounce .7s infinite}.typing i:nth-child(2){animation-delay:.1s}.typing i:nth-child(3){animation-delay:.2s}
.bmid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;position:relative;z-index:1}@media (max-width:760px){.bmid{grid-template-columns:1fr}}
.bboard,.bterm{background:color-mix(in srgb,var(--table) 55%,var(--surface));border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-height:84px}
.bk{font:600 10.5px var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:6px}
.bfiles{display:flex;flex-wrap:wrap;gap:6px}.bfile{display:inline-flex;align-items:center;gap:6px;font:12px ui-monospace,monospace;padding:3px 9px;border-radius:6px;background:var(--surface);border:1px solid color-mix(in srgb,var(--hue) 40%,var(--line));animation:pop .35s ease}
.bfile i{width:6px;height:6px;border-radius:50%;background:var(--hue)}.bfile.hot{box-shadow:0 0 0 2px color-mix(in srgb,var(--hue) 35%,transparent)}
.bterm{background:#0b0d12;border-color:#1e2430}[data-theme="light"] .bterm{background:#161a22}.bterm .bk{color:#8a93a6}.bterm-b{font:12px/1.6 ui-monospace,monospace;color:#d4dae6;overflow-wrap:anywhere}.bterm-b .p{color:#3fb950}
.bsteps{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:relative;z-index:1}.bs{display:grid;grid-template-columns:18px 1fr auto;gap:8px;font-size:12.5px;padding:4px 8px;border-radius:8px;align-items:center}
.bs .bs-r{color:var(--ink-3);font-size:11.5px}.bs.st-working,.bs.st-gating{background:var(--warn-soft)}.bs.st-passed .bs-i{color:var(--ok)}.bs.st-gate_failed .bs-i,.bs.st-failed .bs-i{color:var(--bad)}.bs.st-queued{opacity:.6}
.bship{justify-self:center;padding:8px 18px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-weight:650;animation:pop .5s ease;position:relative;z-index:1}
.bfloor.ph-done .bdesk,.bfloor.ph-failed .bdesk{opacity:.85}
@media (prefers-reduced-motion: reduce){.typing i,.bfile,.bship{animation:none!important}}
.bprev{width:100%;height:420px;border:1px solid var(--line);border-radius:8px;background:#fff}
.bmeter{display:flex;gap:10px;align-items:center;justify-content:flex-end;font-size:12px;color:var(--ink-3);margin:6px 0}.bmeter.hot .bbar i{background:var(--warn)}
.bproof{border-top:1px solid var(--line,#8883);margin-top:10px;padding-top:8px;font-size:13px}.bproof-s{margin:4px 0 8px}.bproof-d{display:grid;grid-template-columns:70px 1fr;gap:4px 10px;margin:0}.bproof-d dt{color:var(--ink-3)}.bproof-d dd{margin:0}.bproof-g{list-style:none;margin:0;padding:0}.bproof .ok{color:var(--ok)}.bproof .bad{color:var(--bad,#c33)}

.bthink{margin:12px 0;padding:12px 14px;border:1px solid var(--border,#2a2f3a);border-radius:12px;background:color-mix(in srgb,var(--panel,#14171d) 92%,#6c8cff 8%)}
.bthink ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.bt{display:flex;gap:10px;align-items:flex-start;animation:btin .35s ease both}
.bt-i{flex:0 0 22px;text-align:center}
.bt-b{line-height:1.45}.bt-b b{margin-right:6px}
.bt.now .bt-b::after{content:"▍";opacity:.6;margin-left:2px;animation:btblink 1s steps(2) infinite}
.bt-decision .bt-b{font-weight:500}
@keyframes btin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes btblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bt{animation:none}.bt.now .bt-b::after{animation:none}}

.bnext{margin:12px 0;padding:12px 14px;border:1px solid var(--border,#2a2f3a);border-radius:12px;background:color-mix(in srgb,var(--panel,#14171d) 92%,#4cc38a 8%)}
.bnext ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.bnext li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.bn-n{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:color-mix(in srgb,#4cc38a 25%,transparent)}

/* Billing admin: inline field errors, containment of wide tables, scroll cue on the tab bar */
.field-err { font-size: 12px; color: var(--bad, #c0392b); margin-top: 4px; } input[aria-invalid="true"] { border-color: var(--bad, #c0392b); }
.settings-grid > .panel, .settings-grid > section { min-width: 0; max-width: 100%; }
.panel-b.tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tablewrap .tbl td, .tablewrap .tbl th { overflow-wrap: anywhere; }
.tablewrap .tbl td.mono { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 899px) {
  .utabs { scrollbar-width: thin; padding-right: 28px; background: linear-gradient(to right, var(--bg, #fff) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--bg, #fff) 30%, transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.28), transparent) right / 10px 100% no-repeat scroll; }
  .utabs::after { content: "›"; position: sticky; right: 0; flex: none; align-self: center; padding: 0 8px; font-size: 18px; color: var(--ink-3); pointer-events: none; }
}

/* Round 4: banner contrast (>=4.5:1), nowrap table headers + min cell width so wide tables scroll inside .tablewrap */
.hint.banner-bad { color: #b3261e; } .hint.banner-warn { color: #8a5300; }
:root[data-theme="dark"] .hint.banner-bad { color: #ff9a92; } :root[data-theme="dark"] .hint.banner-warn { color: #f0c070; }
.tablewrap .tbl th { white-space: nowrap; } .tablewrap .tbl td { min-width: 84px; }
.tablewrap .tbl td.mono { min-width: 120px; }
.tablewrap .tbl { width: max-content; min-width: 100%; }

/* Round 5: left-aligned table headers over left-aligned cells; outcome line colours */
.tbl th { text-align: left; } .tbl th.num, .tbl td.num { text-align: right; }
.hint.banner-ok { color: #1b6e3c; } :root[data-theme="dark"] .hint.banner-ok { color: #7fd69b; }

/* ---- Studio Chat ---- */
.chat { display: grid; grid-template-rows: minmax(0,1fr); grid-template-columns: 280px minmax(0,1fr) 260px; gap: 0; height: calc(100vh - 230px); min-height: 460px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.chat-list { overflow-y: auto; border-right: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.chat-item { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.chat-item:hover, .chat-item.on { background: color-mix(in srgb, var(--accent, #5b8def) 14%, transparent); }
.chat-item-txt { display: grid; min-width: 0; } .chat-item-txt b { font-weight: 600; } .chat-item-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-room-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent, #5b8def) 22%, var(--surface)); } .chat-room-av.lg { width: 72px; height: 72px; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-feed { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-row { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; } .chat-row.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble { padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 7%, var(--surface)); min-width: 0; overflow-wrap: anywhere; }
.chat-row.me .chat-bubble { background: color-mix(in srgb, var(--accent, #5b8def) 24%, var(--surface)); }
.chat-who { font-size: 12px; font-weight: 600; margin-bottom: 2px; } .chat-time { font-size: 11px; margin-top: 2px; } .chat-typing { font-size: 13px; padding-left: 36px; }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--line); }
.chat-compose textarea { flex: 1; resize: none; max-height: 120px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.chat-side { border-left: 1px solid var(--line); padding: 14px; overflow-y: auto; } .chat-side-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.chat-side-tabs { display: flex; justify-content: center; gap: 4px; margin: 12px 0; } .chat-side-tabs button { border: 0; background: transparent; color: var(--ink); padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; } .chat-side-tabs button.on { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.chat-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .chat-members button { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; color: var(--ink); padding: 6px; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; } .chat-members button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
@media (max-width: 1000px) { .chat { grid-template-columns: 200px minmax(0,1fr); } .chat-side { display: none; } }
@media (max-width: 640px) { .chat { grid-template-columns: 1fr; height: auto; } .chat-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .chat-item { width: auto; } .chat-feed { min-height: 360px; } }

/* ---- landing page ---- */

/* build status strip + attempts */
.bstatus{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;margin:8px 0;border:1px solid var(--line-strong);border-radius:var(--r,8px);background:var(--surface);font-size:13px}
.bstatus .bst-g{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700}
.bst-stuck,.bst-failed{border-color:var(--warn,#c77d00)}.bst-stuck .bst-g,.bst-failed .bst-g{background:var(--warn,#c77d00);color:#fff}
.bst-done .bst-g{background:var(--ok,#1a7f4b);color:#fff}.bst-why{flex-basis:100%;color:var(--ink-2)}
.bs-try{font-size:11px;padding:1px 6px;border-radius:99px;border:1px solid var(--line-strong);color:var(--ink-2);margin-left:6px}
@media (prefers-reduced-motion:reduce){.bfloor *{animation:none!important;transition:none!important}}

.bresult{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:10px 12px;margin:8px 0;border:1px solid var(--line-strong);border-radius:var(--r,8px);background:var(--surface)}
.bresult.ok{border-color:var(--ok,#1a7f4b)}.bresult.warn{border-color:var(--warn,#c77d00)}.bresult>div{flex-basis:100%}
.notify{display:inline-flex;gap:6px;align-items:center;margin-left:8px}

.desk-slow{font-size:11px;color:var(--warn,#c77d00);border:1px solid var(--warn,#c77d00);border-radius:99px;padding:1px 8px;margin-top:4px}
.floor-paused .desk{opacity:.55}.floor-banner{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:3;background:var(--surface);border:1px solid var(--warn,#c77d00);border-radius:99px;padding:3px 12px;font-size:12px}
.floor{position:relative}