/* ============================================================================
   BUYA ENGINE PORTAL — Pot Labs master console
   Dense ops cockpit. Buya ink + ember + teal, with dedicated status colours.
   Offline-safe: system font stacks only, no external assets, single dark theme.
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- Tokens (from Buya Rail & Return system) ------------------------------ */
:root {
  --ink:      #17120E;   /* warm near-black ground */
  --ink-2:    #1D1712;   /* raised surface */
  --ink-3:    #262019;   /* raised-raised / rows */
  --ink-4:    #2F281F;   /* hover / hairline-strong */
  --bone:     #F0E9DB;
  --bone-dim: #C7BCA6;
  --return:   #FF5A36;   /* ember — brand accent only */
  --return-2: #FF7A5C;
  --rail:     #34A79E;   /* teal — links, interactive, nodes */
  --rail-2:   #4FC4BA;
  --gold:     #E9B23C;

  /* Semantic status — deliberately distinct from the ember accent */
  --ok:       #46C08A;   /* live */
  --ok-bg:    rgba(70,192,138,.14);
  --warn:     #E9B23C;   /* at-risk */
  --warn-bg:  rgba(233,178,60,.14);
  --crit:     #F0685C;   /* critical / suspended */
  --crit-bg:  rgba(240,104,92,.14);

  --ground:      var(--ink);
  --surface:     var(--ink-2);
  --surface-2:   var(--ink-3);
  --surface-3:   var(--ink-4);
  --line:        rgba(240,233,219,.10);
  --line-strong: rgba(240,233,219,.20);
  --text:        var(--bone);
  --text-dim:    var(--bone-dim);
  --text-faint:  rgba(240,233,219,.42);
  --accent:      var(--return);
  --accent-ink:  #1a0d07;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  --sidebar: 232px;
  --r-sm: 7px; --r-md: 11px; --r-lg: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 20px 50px -24px rgba(0,0,0,.75);
  --shadow-pop: 0 30px 70px -20px rgba(0,0,0,.85);
}

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono { font-family: var(--mono); }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--rail-2); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- App shell ------------------------------------------------------------ */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.app[hidden] { display: none; }

.side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 16px 14px;
}
.side__brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 16px; }
.side__brand svg { width: 28px; height: 28px; flex: none; }
.side__brand b { font-weight: 800; letter-spacing: -.02em; font-size: 16px; }
.side__brand small {
  display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-top: 1px;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); padding: 14px 10px 6px; }
.navlink {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text-dim); font-weight: 550; transition: background .15s, color .15s;
  border: 1px solid transparent;
}
.navlink svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.navlink:hover { background: var(--surface-2); color: var(--text); }
.navlink.active { background: var(--surface-3); color: var(--text); border-color: var(--line); }
.navlink.active svg { color: var(--accent); opacity: 1; }
.side__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.side__who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 4px 8px 10px; }
.side__who .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); flex: none; }

/* ---- Main ----------------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 24px; min-height: 58px;
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-faint); }
.crumbs .cur { font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__sp { margin-left: auto; }
.view { padding: 22px 24px 64px; max-width: 1360px; width: 100%; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: 13px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s, color .15s;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--surface-3); border-color: var(--text-faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn--primary:hover { background: var(--return-2); }
.btn--rail { background: var(--rail); color: #06110f; border-color: transparent; }
.btn--rail:hover { background: var(--rail-2); }
.btn--ghost { background: transparent; }
.btn--danger { color: var(--crit); border-color: color-mix(in oklab, var(--crit) 40%, transparent); background: transparent; }
.btn--danger:hover { background: var(--crit-bg); border-color: var(--crit); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--icon { padding: 8px; }

/* ---- Inputs --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field .hint { font-size: 11px; color: var(--text-faint); }
.field .err { font-size: 11px; color: var(--crit); display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select { border-color: var(--crit); }
input, select, textarea {
  width: 100%; padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--ground); border: 1px solid var(--line-strong); color: var(--text);
  transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--rail); outline: none; background: var(--surface); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C7BCA6' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; cursor: pointer; }
.input-mono { font-family: var(--mono); }

/* ---- Search input --------------------------------------------------------- */
.search { position: relative; flex: 1; max-width: 340px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; }
.search input { padding-left: 33px; }

/* ---- Cards / panels ------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.card__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.card__head h3 { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.card__head .sub { font-size: 12px; color: var(--text-faint); }
.card__body { padding: 16px; }

.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.page-head p { color: var(--text-dim); font-size: 13px; margin-top: 3px; }
.page-head__actions { margin-left: auto; display: flex; gap: 8px; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }

/* ---- KPI strip ------------------------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.kpi .k { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); }
.kpi .v { font-size: 26px; font-weight: 700; margin-top: 6px; font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .v small { font-size: 13px; color: var(--text-faint); font-weight: 500; }
.kpi--ok .v { color: var(--ok); }
.kpi--warn .v { color: var(--warn); }
.kpi--crit .v { color: var(--crit); }

/* ---- Toolbar (search + filters) ------------------------------------------- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.seg button { padding: 5px 11px; border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--text-dim); background: transparent; border: none; cursor: pointer; transition: background .12s, color .12s; }
.seg button.on { background: var(--surface-3); color: var(--text); }
.seg button .cnt { color: var(--text-faint); font-family: var(--mono); margin-left: 4px; font-size: 11px; }
.toolbar__meta { margin-left: auto; font-size: 12px; color: var(--text-faint); font-family: var(--mono); }

/* ---- Table ---------------------------------------------------------------- */
.tablewrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.tablescroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); background: var(--surface-2);
  padding: 10px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; user-select: none;
}
table.data thead th.sortable { cursor: pointer; }
table.data thead th.sortable:hover { color: var(--text); }
table.data thead th .arr { opacity: 0; margin-left: 4px; font-size: 10px; }
table.data thead th.sorted .arr { opacity: 1; color: var(--accent); }
table.data thead th.r, table.data td.r { text-align: right; }
table.data tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.data tbody tr { cursor: pointer; transition: background .1s; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
.t-name { display: flex; flex-direction: column; gap: 1px; }
.t-name b { font-weight: 650; color: var(--text); }
.t-name .slug { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.t-num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.t-dim { color: var(--text-dim); }
.t-faint { color: var(--text-faint); }

/* ---- Pills / status ------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-family: var(--mono); letter-spacing: .02em; border: 1px solid transparent; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pill--live { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.pill--live .dot { background: var(--ok); }
.pill--risk { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in oklab, var(--warn) 30%, transparent); }
.pill--risk .dot { background: var(--warn); }
.pill--crit { color: var(--crit); background: var(--crit-bg); border-color: color-mix(in oklab, var(--crit) 30%, transparent); }
.pill--crit .dot { background: var(--crit); }
.pill--plan { color: var(--text-dim); background: var(--surface-3); border-color: var(--line); text-transform: capitalize; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-sm); font-size: 11.5px; font-family: var(--mono); background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--line); }

/* ---- Tenant detail -------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.deth { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.deth__mark { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 20px; flex: none; border: 1px solid var(--line-strong); }
.deth__t h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.deth__t .slug { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.deth__meta { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }

.def { display: grid; grid-template-columns: 130px 1fr; gap: 2px 14px; }
.def dt { font-size: 12px; color: var(--text-faint); padding: 7px 0; }
.def dd { font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.def > dt { border-bottom: 1px solid var(--line); }
.def dt:last-of-type, .def dd:last-of-type { border-bottom: none; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.sw i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-strong); display: block; }
.modchips { display: flex; flex-wrap: wrap; gap: 6px; }

.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.count { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; }
.count .k { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); }
.count .v { font-size: 20px; font-weight: 700; margin-top: 4px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.activity { display: flex; flex-direction: column; }
.act { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.act:last-child { border-bottom: none; }
.act__ico { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-3); display: grid; place-items: center; flex: none; color: var(--rail-2); }
.act__ico svg { width: 14px; height: 14px; }
.act__b { min-width: 0; flex: 1; }
.act__b .t { color: var(--text); }
.act__b .m { color: var(--text-faint); font-size: 11.5px; font-family: var(--mono); }
.act__when { color: var(--text-faint); font-size: 11.5px; font-family: var(--mono); white-space: nowrap; }

.qlinks { display: flex; flex-direction: column; gap: 8px; }

/* ---- API keys ------------------------------------------------------------- */
.keyrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.keyrow:last-child { border-bottom: none; }
.keyrow__b { min-width: 0; flex: 1; }
.keyrow__b .lbl { font-weight: 600; font-size: 13px; }
.keyrow__b .mask { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.keyrow__meta { font-size: 11px; color: var(--text-faint); font-family: var(--mono); white-space: nowrap; }
.keyrow.revoked { opacity: .5; }

/* ---- Onboard form --------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .col-2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } .form-grid .col-2 { grid-column: auto; } }
.vsel { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.vcard { text-align: left; padding: 11px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-strong); cursor: pointer; transition: border-color .15s, background .15s; }
.vcard:hover { border-color: var(--text-faint); }
.vcard[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface-2)); }
.vcard svg { width: 20px; height: 20px; color: var(--rail-2); margin-bottom: 6px; }
.vcard[aria-pressed="true"] svg { color: var(--accent); }
.vcard .vt { font-weight: 650; font-size: 13px; }
.vcard .vd { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.swatch-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.swatch-in { display: flex; flex-direction: column; gap: 5px; }
.swatch-in label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.swatch-in .row { display: flex; align-items: center; gap: 7px; }
input[type=color] { width: 38px; height: 34px; padding: 2px; border-radius: var(--r-sm); cursor: pointer; }
.payload-pre { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--text-dim); overflow-x: auto; max-height: 340px; overflow-y: auto; white-space: pre; }

/* ---- States (loading / empty / error) ------------------------------------ */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 54px 24px; gap: 12px; color: var(--text-dim); }
.state svg { width: 34px; height: 34px; color: var(--text-faint); }
.state h4 { font-size: 15px; color: var(--text); font-weight: 700; }
.state p { font-size: 13px; color: var(--text-faint); max-width: 44ch; }
.state--error svg { color: var(--crit); }
.spinner { width: 26px; height: 26px; border: 2.5px solid var(--line-strong); border-top-color: var(--rail); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite; border-radius: var(--r-sm); }
@keyframes sk { to { background-position: -200% 0; } }
.sk-row { height: 44px; margin: 0; border-bottom: 1px solid var(--line); }

/* ---- Auth gate ------------------------------------------------------------ */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(52,167,158,.10), transparent 60%), var(--ground); }
.gate[hidden] { display: none; }
.gate__card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow); }
.gate__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.gate__brand svg { width: 34px; height: 34px; }
.gate__brand b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.gate__brand small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.gate__card h1 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 5px; }
.gate__card p.lead { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.gate__err { display: none; align-items: center; gap: 8px; font-size: 12.5px; color: var(--crit); background: var(--crit-bg); border: 1px solid color-mix(in oklab, var(--crit) 30%, transparent); border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 14px; }
.gate__err.show { display: flex; }
.gate__note { font-size: 11.5px; color: var(--text-faint); margin-top: 16px; line-height: 1.6; font-family: var(--mono); }

/* ---- Modal ---------------------------------------------------------------- */
.modal-root { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 24px;
  background: rgba(8,6,4,.66); backdrop-filter: blur(3px); }
.modal-root.show { display: grid; }
.modal { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.modal__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal__head h3 { font-size: 15px; font-weight: 700; }
.modal__head .x { margin-left: auto; }
.modal__body { padding: 18px; }
.modal__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line); }
.warnbox { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-bg); border: 1px solid color-mix(in oklab, var(--warn) 34%, transparent); border-radius: var(--r-sm); padding: 12px; margin-bottom: 14px; }
.warnbox svg { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 1px; }
.warnbox p { font-size: 12.5px; color: var(--text); }
.secret { display: flex; align-items: center; gap: 8px; background: var(--ground); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 12px; }
.secret code { font-family: var(--mono); font-size: 12.5px; color: var(--rail-2); word-break: break-all; flex: 1; }

/* ---- Toasts --------------------------------------------------------------- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 9px; max-width: 340px; }
.toast { display: flex; gap: 9px; align-items: flex-start; background: var(--surface-3); border: 1px solid var(--line-strong); border-left: 3px solid var(--rail); border-radius: var(--r-sm); padding: 11px 13px; box-shadow: var(--shadow); font-size: 13px; animation: toastin .25s var(--ease); }
.toast--ok { border-left-color: var(--ok); }
.toast--err { border-left-color: var(--crit); }
.toast svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.toast--ok svg { color: var(--ok); } .toast--err svg { color: var(--crit); } .toast svg { color: var(--rail-2); }
@keyframes toastin { from { opacity: 0; transform: translateX(16px); } }

.note { font-size: 12px; color: var(--text-faint); }
.copyable { cursor: pointer; }
.copyable:hover { color: var(--rail-2); }
.hstack { display: flex; align-items: center; gap: 8px; }
.gap12 { display: flex; flex-direction: column; gap: 12px; }
.mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }

/* ---- Responsive shell ----------------------------------------------------- */
@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 10px 14px; gap: 6px 14px; }
  .side__brand { padding: 0; }
  .nav { flex-direction: row; }
  .nav__lbl { display: none; }
  .side__foot { margin: 0 0 0 auto; padding: 0; border: none; }
  .side__who { display: none; }
  .view { padding: 16px 14px 48px; }
  .topbar { padding: 11px 14px; }
}