:root{
  color-scheme: light;

  /* ---- fontes ---- */
  --s-font:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --s-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --s-display:'Poppins',var(--s-font);           /* face de exibição (Google Fonts em produção) */

  /* ---- superfícies & neutros ---- */
  --s-bg:#f4f6fb; --s-card:#ffffff; --s-card-2:#fafcff;
  --s-hover:#eef2fa; --s-track:#e9eef8;
  --s-side:linear-gradient(180deg,#ffffff,#f5f8ff); --s-side-bd:#e6ebf5;

  /* ---- texto (4 pesos) ---- */
  --s-fg:#0e1526; --s-muted:#5c6580; --s-faint:#93a4bd; --s-ghost:#b6c2d6;

  /* ---- bordas (3 pesos) ---- */
  --s-bd:#e6ebf5; --s-bd-soft:#eff3fa; --s-bd-strong:#d3dcee;

  /* ---- acento: cor de marca (placeholder — troque em Overrides.html) ---- */
  --s-accent:linear-gradient(135deg,#0038f5,#2f6bff);
  --s-accent-ink:#0034e6; --s-accent-fg:#ffffff; --s-accent-weak:#e9effe; --s-accent-bd:#c9d6f8;
  --s-barfill:linear-gradient(90deg,#003cff,#5b8bff);

  /* ---- status (rampa cor/bg/bd/tint por família) ---- */
  --s-ok:#0a8f6e;   --s-ok-bg:#e4f6f0;   --s-ok-bd:#cfe9e0;   --s-ok-tint:#f5fbf8;
  --s-warn:#936f00; --s-warn-bg:#fbf1cf; --s-warn-bd:#f0e4bf; --s-warn-tint:#fffdf5; --s-warn-deep:#6f5400;
  --s-crit:#de3b3b; --s-crit-bg:#fce7e7; --s-crit-bd:#f3c8c8; --s-crit-tint:#fef8f8;
  --s-chip-mut-bg:#eef2fa;
  --s-on-cor:#ffffff;                             /* texto sobre superfície colorida (toast) */

  /* ---- raios ---- */
  --s-radius:18px; --s-nav-r:12px; --s-btn-r:999px;

  /* ---- sombras ---- */
  --s-card-sh:0 1px 2px rgba(14,21,38,.04),0 14px 34px rgba(20,40,90,.08);
  --s-btn-sh:0 6px 16px rgba(0,56,245,.28);
  --s-active-sh:0 4px 12px rgba(0,56,245,.12);
  --s-lift-sh:0 2px 6px rgba(14,21,38,.06),0 24px 60px rgba(20,40,90,.14);

  /* ---- item ativo / avatar / topo frosted ---- */
  --s-active-bg:#e9effe; --s-active-fg:#0034e6;
  --s-logo-ink:#0e1526; --s-avatar-bg:#e9effe; --s-avatar-fg:#0034e6;
  --s-top-bg:rgba(244,246,251,.72); --s-top-blur:saturate(1.4) blur(10px);

  /* ---- ritmo (8px + áurea) e paddings ---- */
  --s-gap:16px; --s-h1:21px; --s-kpi:28px;
  --s-side-pad:18px 12px; --s-nav-pad:10px 13px; --s-top-pad:18px 24px;
  --s-body-pad:22px 24px; --s-card-pad:18px 20px; --s-cardhd-pad:16px 20px; --s-brand-pad:6px 8px;
  --s-card-bd:1px solid #eaeff8;
}

/* ============================ base ============================ */
*{ box-sizing:border-box; }
body{ margin:0; background:var(--s-bg); color:var(--s-fg); font-family:var(--s-font); line-height:1.6; -webkit-font-smoothing:antialiased; }
.s-mono{ font-family:var(--s-mono); }
.s-muted{ color:var(--s-muted); } .s-faint{ color:var(--s-faint); }

/* ============================ app shell ============================ */
.screen{ display:grid; grid-template-columns:216px 1fr; min-width:820px; background:var(--s-bg); color:var(--s-fg); }
.s-side{ background:var(--s-side); border-right:1px solid var(--s-side-bd); padding:var(--s-side-pad); display:flex; flex-direction:column; gap:3px; }
.s-brand{ display:flex; flex-direction:column; gap:7px; padding:var(--s-brand-pad); margin-bottom:12px; }
.s-logo-mark{ width:82px; height:auto; color:var(--s-logo-ink); }
.s-brand-sub{ font-family:var(--s-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--s-faint); font-weight:600; }
.s-grp{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--s-faint); padding:12px 12px 5px; font-family:var(--s-mono); font-weight:600; }
.s-nav-item{ display:flex; align-items:center; gap:10px; padding:var(--s-nav-pad); border-radius:var(--s-nav-r); color:var(--s-muted); font-size:13.5px; font-weight:500; cursor:pointer; position:relative; }
.s-nav-item svg{ width:16px; height:16px; stroke-width:1.9; flex:none; opacity:.85; }
.s-nav-item:hover{ background:var(--s-hover); color:var(--s-fg); }
.s-nav-item.active{ color:var(--s-active-fg); background:var(--s-active-bg); font-weight:600; box-shadow:var(--s-active-sh); }
.s-nav-item.active svg{ opacity:1; }
.s-foot{ margin-top:auto; padding:12px 10px 4px; border-top:1px solid var(--s-side-bd); }
.s-user{ display:flex; align-items:flex-start; gap:9px; }
.s-avatar{ width:30px; height:30px; border-radius:50%; background:var(--s-avatar-bg); color:var(--s-avatar-fg); display:grid; place-items:center; font-size:11px; font-weight:700; flex:none; }
.s-user-txt{ min-width:0; display:flex; flex-direction:column; line-height:1.32; }
.s-user-name{ font-size:12.5px; font-weight:600; color:var(--s-fg); overflow-wrap:anywhere; }
.s-user-role{ font-size:11px; color:var(--s-faint); overflow-wrap:anywhere; }
.s-main{ min-width:0; }
.s-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:var(--s-top-pad); border-bottom:1px solid var(--s-bd); background:var(--s-top-bg); backdrop-filter:var(--s-top-blur); position:sticky; top:0; z-index:10; }
.s-eyebrow{ font-family:var(--s-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--s-faint); font-weight:600; }
.s-top h3{ margin:3px 0 0; font-size:var(--s-h1); letter-spacing:-.025em; font-weight:700; color:var(--s-fg); }
.s-body{ padding:var(--s-body-pad); }

/* ============================ botões ============================ */
.s-btn{ background:var(--s-accent); color:var(--s-accent-fg); border:none; border-radius:var(--s-btn-r); padding:9px 15px; font:inherit; font-size:12.5px; font-weight:600; box-shadow:var(--s-btn-sh); display:inline-flex; align-items:center; gap:6px; flex:none; cursor:pointer; }
.s-btn svg{ width:14px; height:14px; stroke-width:2.4; }
.s-btn:disabled{ opacity:.55; cursor:not-allowed; }
.s-btn.ghost{ background:var(--s-card); color:var(--s-muted); border:1px solid var(--s-bd); box-shadow:none; }
.s-btn.ghost:hover:not(:disabled){ border-color:var(--s-accent-ink); color:var(--s-accent-ink); }
.s-btn.icon{ padding:8px; border-radius:var(--s-nav-r); }
.s-btn.icon svg{ width:16px; height:16px; }
.s-icon-btn{ background:none; border:none; padding:5px; line-height:0; border-radius:8px; color:var(--s-faint); flex:none; cursor:pointer; transition:color .12s,background .12s; }
.s-icon-btn svg{ width:14px; height:14px; stroke-width:2; }
.s-icon-btn:hover{ color:var(--s-accent-ink); background:var(--s-hover); }
.s-icon-btn.perigo:hover{ color:var(--s-crit); background:var(--s-crit-bg); }

/* ============================ KPIs ============================ */
.s-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-gap); margin-bottom:var(--s-gap); }
.s-kpi{ background:var(--s-card); border:var(--s-card-bd); border-radius:var(--s-radius); padding:var(--s-card-pad); padding-top:21px; box-shadow:var(--s-card-sh); display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; overflow:hidden; }
.s-kpi::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,#0038f5,#5b8bff); opacity:.6; }
.k-lbl{ font-family:var(--s-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--s-faint); font-weight:600; }
.k-val{ font-size:var(--s-kpi); font-weight:700; letter-spacing:-.03em; margin:9px 0 0; line-height:1; font-variant-numeric:tabular-nums; }
.k-val.accent{ color:var(--s-accent-ink); }
.k-meta{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:auto; padding-top:11px; flex-wrap:wrap; }
.k-chip{ font-family:var(--s-mono); font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.k-chip.crit{ background:var(--s-crit-bg); color:var(--s-crit); }
.k-chip.ok{ background:var(--s-ok-bg); color:var(--s-ok); }
.k-chip.mut{ background:var(--s-chip-mut-bg); color:var(--s-muted); }
.k-aux{ font-size:10.5px; color:var(--s-faint); }

/* ============================ grid áureo + cartão ============================ */
.s-cols{ display:grid; grid-template-columns:1.618fr 1fr; gap:var(--s-gap); align-items:stretch; }
.s-card{ background:var(--s-card); border:var(--s-card-bd); border-radius:var(--s-radius); box-shadow:var(--s-card-sh); display:flex; flex-direction:column; }
.s-card.destaque{ border-color:var(--s-accent-bd); }
.s-card-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:var(--s-cardhd-pad); border-bottom:1px solid var(--s-bd); }
.s-card-hd h5{ margin:0; font-size:13px; font-weight:700; letter-spacing:-.01em; }
.s-card-hd a{ font-size:11.5px; color:var(--s-accent-ink); font-weight:600; white-space:nowrap; cursor:pointer; }
.s-card.fechado > .s-card-hd{ border-bottom:none; }

/* ============================ lista / linha ============================ */
.s-list{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.s-row{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--s-nav-r); }
.s-row:hover{ background:var(--s-hover); }
.s-row .stripe{ width:3px; align-self:stretch; border-radius:3px; flex:none; }
.s-row .txt{ min-width:0; }
.s-row .code{ font-family:var(--s-mono); font-size:12px; font-weight:600; }
.s-row .obj{ font-size:11.5px; color:var(--s-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-row .rt{ margin-left:auto; flex:none; }
.s-row .amount{ margin-left:auto; font-family:var(--s-mono); font-size:12px; font-weight:600; color:var(--s-fg); font-variant-numeric:tabular-nums; flex:none; }

/* ============================ pílula / etiqueta ============================ */
.pill{ font-family:var(--s-mono); font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; letter-spacing:.01em; }
.pill.crit{ background:var(--s-crit-bg); color:var(--s-crit); }
.pill.warn{ background:var(--s-warn-bg); color:var(--s-warn); }
.pill.ok{ background:var(--s-ok-bg); color:var(--s-ok); }
.s-tag{ font-family:var(--s-mono); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid var(--s-bd); color:var(--s-faint); background:var(--s-card); white-space:nowrap; flex:none; }
.s-tag.ok{ border-color:var(--s-ok-bd); color:var(--s-ok); background:var(--s-ok-tint); }
.s-tag.warn{ border-color:var(--s-warn-bd); color:var(--s-warn); background:var(--s-warn-tint); }
.s-tag.accent{ border-color:var(--s-accent-bd); color:var(--s-accent-ink); background:var(--s-accent-weak); }

/* ============================ barras (gráfico CSS) ============================ */
.s-bars{ padding:var(--s-card-pad); display:flex; flex-direction:column; gap:13px; }
.s-bar-t{ display:flex; justify-content:space-between; gap:10px; font-size:11.5px; margin-bottom:6px; }
.s-bar-t span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s-bar-t b{ font-variant-numeric:tabular-nums; flex:none; }
.s-track{ height:7px; border-radius:999px; background:var(--s-track); overflow:hidden; }
.s-track span{ display:block; height:100%; border-radius:999px; background:var(--s-barfill); }
.c-crit{ background:var(--s-crit); } .c-warn{ background:var(--s-warn); } .c-ok{ background:var(--s-ok); }

/* ============================ formulário ============================ */
.s-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.s-lbl{ font-size:11px; font-weight:600; color:var(--s-muted); }
.s-input,.s-select,.s-textarea{ width:100%; background:var(--s-bg); border:1px solid var(--s-bd); border-radius:var(--s-nav-r); padding:9px 12px; font:inherit; font-size:13px; color:var(--s-fg); outline:none; transition:border-color .12s,background .12s; }
.s-input:hover,.s-select:hover,.s-textarea:hover{ border-color:var(--s-bd-strong); }
.s-input:focus,.s-select:focus,.s-textarea:focus{ border-color:var(--s-accent-ink); background:var(--s-card); }
.s-input::placeholder,.s-textarea::placeholder{ color:var(--s-ghost); }
.s-input.sm,.s-select.sm{ padding:7px 10px; font-size:12px; }
.s-select{ font-weight:500; cursor:pointer; }
.s-textarea{ resize:vertical; font-family:var(--s-font); font-size:13px; line-height:1.5; }
.s-textarea.mono{ font-family:var(--s-mono); font-size:12.5px; line-height:1.55; }
.s-check{ display:inline-flex; align-items:center; gap:8px; background:var(--s-bg); border:1px solid var(--s-bd); border-radius:var(--s-nav-r); padding:9px 12px; font-size:13px; font-weight:500; cursor:pointer; user-select:none; white-space:nowrap; }
.s-check input{ width:15px; height:15px; accent-color:var(--s-accent-ink); margin:0; cursor:pointer; }
.s-help{ font-size:11px; color:var(--s-faint); }
.s-help.err{ color:var(--s-crit); font-weight:600; }

/* ============================ aviso / estado vazio ============================ */
.s-note{ border:1px solid var(--s-bd); background:var(--s-card); border-radius:var(--s-radius); padding:14px 16px; }
.s-note .t{ font-size:13px; font-weight:700; }
.s-note .d{ font-size:12px; color:var(--s-muted); margin-top:2px; }
.s-note p{ margin:0; }
.s-note-acoes{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.s-note.ok{ border-color:var(--s-ok-bd); background:var(--s-ok-tint); } .s-note.ok .t{ color:var(--s-ok); }
.s-note.warn{ border-color:var(--s-warn-bd); background:var(--s-warn-tint); } .s-note.warn .t{ color:var(--s-warn); }
.s-note.crit{ border-color:var(--s-crit-bd); background:var(--s-crit-tint); } .s-note.crit .t{ color:var(--s-crit); }
.s-note.accent{ border-color:var(--s-accent-bd); background:var(--s-accent-weak); }
.s-empty{ border:1px dashed var(--s-bd); border-radius:var(--s-radius); padding:40px 20px; text-align:center; color:var(--s-muted); }
.s-empty p{ margin:0; }
.s-empty .t{ font-family:var(--s-display); font-size:15px; font-weight:700; color:var(--s-fg); }
.s-empty .d{ font-size:12.5px; margin-top:4px; }
.s-empty-icone{ width:52px; height:52px; border-radius:50%; background:var(--s-accent-weak); color:var(--s-accent-ink); display:grid; place-items:center; margin:0 auto 16px; }
.s-empty-icone.crit{ background:var(--s-crit-bg); color:var(--s-crit); }

/* ============================ toast ============================ */
.s-toasts{ position:fixed; inset:auto 0 24px 0; z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 16px; pointer-events:none; }
.s-toast{ pointer-events:auto; color:var(--s-on-cor); background:var(--s-fg); font-size:13px; font-weight:500; padding:10px 16px; border-radius:var(--s-nav-r); box-shadow:var(--s-lift-sh); max-width:28rem; }
.s-toast.ok{ background:var(--s-ok); }
.s-toast.warn{ background:var(--s-warn); }
.s-toast.crit{ background:var(--s-crit); }

/* ============================ dropdown (autocomplete) ============================ */
.s-sug{ position:fixed; z-index:50; background:var(--s-card); border:1px solid var(--s-bd); border-radius:var(--s-nav-r); box-shadow:var(--s-lift-sh); overflow-y:auto; max-height:17rem; }
.s-sug-item{ display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--s-bd-soft); padding:8px 12px; cursor:pointer; }
.s-sug-item:last-child{ border-bottom:none; }
.s-sug-item:hover,.s-sug-item.marcado{ background:var(--s-hover); }
.s-sug-item .n{ display:block; font-size:12.5px; font-weight:600; }
.s-sug-item .f{ display:block; font-size:10.5px; color:var(--s-accent-ink); }
.s-sug-item .e{ display:block; font-size:10.5px; color:var(--s-muted); }
.s-sug-msg{ padding:10px 12px; font-size:11.5px; color:var(--s-muted); }

/* ============================ colapso ============================ */
.s-collapse{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; text-align:left; background:none; border:none; padding:0; cursor:pointer; }
.s-collapse .tw{ min-width:0; flex:1; display:flex; flex-direction:column; }
.s-collapse .t{ font-size:13px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; min-width:0; }
.s-collapse .d{ font-size:11.5px; color:var(--s-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-chev{ flex:none; width:26px; height:26px; border-radius:8px; border:1px solid var(--s-bd); display:grid; place-items:center; color:var(--s-faint); transition:transform .16s ease,color .12s; }
.s-chev svg{ width:13px; height:13px; stroke-width:2; }
.s-chev.aberto{ transform:rotate(180deg); color:var(--s-accent-ink); }
.s-sub{ border:1px solid var(--s-bd); border-radius:var(--s-nav-r); background:var(--s-card); overflow:hidden; }
.s-sub-hd{ display:flex; align-items:center; gap:8px; padding:8px 12px; }
.s-sub-bd{ border-top:1px solid var(--s-bd); background:var(--s-card-2); padding:10px 12px; }

/* ============================ trilha de passos / cronômetro / auto-salvo ============================ */
.s-passos{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.s-passo{ display:flex; align-items:center; gap:7px; font-family:var(--s-mono); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--s-ghost); }
.s-passo .n{ width:21px; height:21px; border-radius:50%; display:grid; place-items:center; flex:none; border:1.5px solid var(--s-bd); background:var(--s-card); font-size:10px; }
.s-passo::after{ content:""; width:14px; height:1.5px; background:var(--s-bd); flex:none; }
.s-passo:last-child::after{ display:none; }
.s-passo.feito{ color:var(--s-muted); }
.s-passo.feito .n{ background:var(--s-ok-bg); border-color:var(--s-ok-bd); color:var(--s-ok); }
.s-passo.atual{ color:var(--s-accent-ink); }
.s-passo.atual .n{ background:var(--s-accent); border-color:transparent; color:var(--s-accent-fg); box-shadow:var(--s-active-sh); }
.s-crono{ display:inline-flex; align-items:baseline; gap:9px; }
.s-crono b{ font-family:var(--s-display); font-size:clamp(22px,3vw,34px); font-weight:700; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.s-crono .rot{ font-family:var(--s-mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s-faint); }
.s-crono.passou b,.s-crono.passou .rot{ color:var(--s-warn-deep); }
.s-salvo{ font-family:var(--s-mono); font-size:10.5px; letter-spacing:.04em; color:var(--s-ghost); flex:none; transition:color .15s; }
.s-salvo[data-estado="pendente"]{ color:var(--s-faint); }
.s-salvo[data-estado="ok"]{ color:var(--s-ok); }
.s-salvo[data-estado="erro"]{ color:var(--s-crit); font-weight:700; }

/* ============================ tabela (NOVO, sobre os tokens) ============================ */
.s-table-wrap{ overflow-x:auto; }
.s-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.s-table thead th{ font-family:var(--s-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--s-faint); font-weight:600; text-align:left; padding:10px 14px; border-bottom:1px solid var(--s-bd); white-space:nowrap; }
.s-table tbody td{ padding:11px 14px; border-bottom:1px solid var(--s-bd-soft); color:var(--s-fg); }
.s-table tbody tr:last-child td{ border-bottom:none; }
.s-table tbody tr:hover td{ background:var(--s-hover); }
.s-table .num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--s-mono); }
.s-table .code{ font-family:var(--s-mono); font-weight:600; }
.s-table th.num{ text-align:right; }

/* ============================ modal (NOVO, sobre os tokens) ============================ */
.s-modal-ov{ position:fixed; inset:0; z-index:70; background:rgba(14,21,38,.42); backdrop-filter:blur(2px); display:grid; place-items:center; padding:20px; }
.s-modal{ background:var(--s-card); border:1px solid var(--s-bd); border-radius:var(--s-radius); box-shadow:var(--s-lift-sh); width:min(520px,100%); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.s-modal.sm{ width:min(400px,100%); } .s-modal.lg{ width:min(720px,100%); }
.s-modal-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--s-bd); }
.s-modal-hd h4{ margin:0; font-family:var(--s-display); font-size:15px; font-weight:700; letter-spacing:-.01em; }
.s-modal-bd{ padding:18px 20px; overflow-y:auto; }
.s-modal-ft{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--s-bd); background:var(--s-card-2); }

/* ============================ kanban (NOVO, sobre os tokens) ============================ */
.s-kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:var(--s-gap); overflow-x:auto; padding-bottom:6px; align-items:start; }
.s-col{ background:var(--s-bg); border:1px solid var(--s-bd); border-radius:var(--s-radius); display:flex; flex-direction:column; }
.s-col-hd{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--s-bd); font-size:12px; font-weight:700; }
.s-col-hd .dot{ width:8px; height:8px; border-radius:50%; background:var(--s-faint); flex:none; }
.s-col-hd .dot.ok{ background:var(--s-ok); } .s-col-hd .dot.warn{ background:var(--s-warn); } .s-col-hd .dot.crit{ background:var(--s-crit); } .s-col-hd .dot.accent{ background:var(--s-accent-ink); }
.s-col-hd .count{ margin-left:auto; font-family:var(--s-mono); font-size:10px; color:var(--s-faint); background:var(--s-chip-mut-bg); padding:1px 7px; border-radius:999px; }
.s-col-bd{ padding:10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.s-kcard{ background:var(--s-card); border:1px solid var(--s-bd); border-radius:var(--s-nav-r); padding:11px 12px; box-shadow:0 1px 2px rgba(14,21,38,.04); cursor:grab; }
.s-kcard .t{ font-size:12.5px; font-weight:600; }
.s-kcard .m{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }