/* ─────────────────────────────────────────────────────────────────────────────
   HABITAT DESIGN SYSTEM — "quiet instrument"
   A workspace OS language of warm paper, slate ink, and copper instrumentation.
   One icon family (icons.js), one accent, hairline structure, no novelty skins.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --paper: #efece4;          /* desk surface */
  --panel: #faf8f3;          /* window / card */
  --panel-2: #f3f0e8;        /* inset panels */
  --ink: #232a30;
  --ink-2: #55636d;
  --ink-3: #8b95a0;
  --line: #ddd6c8;
  --line-2: #ccc3b0;
  --copper: #a05a28;         /* the accent */
  --copper-2: #7f4720;
  --copper-soft: #eadbc9;
  --pine: #24544b;
  --pine-soft: #d9e4de;
  --ok: #2e6e4e;
  --ok-soft: #dceade;
  --warn: #9a6414; --warn-soft: #f0e3c8;
  --danger: #8f3038; --danger-soft: #efd9d8;
  --cui: #5d1f24;
  --chrome: #191f24;         /* topbar/dock/agent rail */
  --chrome-2: #232b31;
  --chrome-ink: #e8e4da;
  --chrome-muted: #9aa4ab;
  --shadow-win: 0 18px 44px rgba(31, 26, 16, 0.22), 0 2px 8px rgba(31, 26, 16, 0.10);
  --shadow-card: 0 1px 3px rgba(31, 26, 16, 0.08);
  --r: 12px;
  --r-sm: 8px;
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, "Inter", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Georgia, serif;
  --mono: "Cascadia Code", Consolas, ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font); color: var(--ink); font-size: 13.5px; line-height: 1.45;
  background:
    radial-gradient(1200px 700px at 78% -10%, #f7f3ea 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 108%, #e6e0d2 0%, transparent 55%),
    var(--paper);
  overflow: hidden;
}
body.shot *, body.shot *::before, body.shot *::after { animation: none !important; transition: none !important; }
::selection { background: var(--copper-soft); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
.ic { flex: none; vertical-align: -3px; }
.muted { color: var(--ink-2); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }
.cap { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
a { color: var(--copper-2); text-decoration: none; }

/* ── buttons / inputs ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--panel);
  color: var(--ink); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer;
  box-shadow: var(--shadow-card); white-space: nowrap;
}
.btn:hover { border-color: var(--copper); color: var(--copper-2); }
.btn.pri { background: var(--copper); border-color: var(--copper-2); color: #fbf7f1; }
.btn.pri:hover { background: var(--copper-2); color: #fff; }
.btn.quiet { border-color: transparent; background: transparent; box-shadow: none; }
.btn.quiet:hover { background: var(--panel-2); border-color: var(--line); color: var(--ink); }
.btn.danger { color: var(--danger); border-color: #d8b9b8; }
.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ok { color: var(--ok); border-color: #bcd3c4; }
.btn.ok:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }
input[type=text], input[type=number], input[type=password], textarea, select {
  font: inherit; color: var(--ink); background: #fffdf9; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 7px 10px; outline: none; min-width: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-soft); }
textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
label.fld { display: block; margin: 8px 0; }
label.fld > span { display: block; font-size: 11px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; letter-spacing: .04em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 8px; }
.grow { flex: 1; }

/* ── chips / pills / status ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line);
}
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: #c2d6c8; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #e0cb9d; }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: #dcb9b7; }
.pill.copper { background: var(--copper-soft); color: var(--copper-2); border-color: #dcc3a4; }
.pill.pine { background: var(--pine-soft); color: var(--pine); border-color: #bcd0c7; }
.pill.cui { background: var(--cui); color: #f6e8e4; border-color: var(--cui); }

/* ── tables / lists ───────────────────────────────────────────────────────── */
table.t { border-collapse: collapse; width: 100%; font-size: 12.5px; background: var(--panel); border-radius: var(--r-sm); overflow: hidden; }
.t th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tr.click { cursor: pointer; }
.t tr.click:hover td { background: #f5f1e7; }
.item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: 7px; background: var(--panel); cursor: pointer; box-shadow: var(--shadow-card);
}
.item:hover { border-color: var(--copper); }
.item .meta { margin-left: auto; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.item .title { font-weight: 600; }
.empty { padding: 26px 14px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r-sm); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-card); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 14px; font-size: 12.5px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-weight: 600; }

/* ── login ────────────────────────────────────────────────────────────────── */
#login { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; z-index: 9000; }
#login .brand {
  background: var(--chrome); color: var(--chrome-ink); padding: 56px 58px; display: flex; flex-direction: column;
  background-image: radial-gradient(700px 480px at 110% -20%, #2d3a41 0%, transparent 60%);
}
#login .brand .mark { display: flex; align-items: center; gap: 12px; color: #e8dcc9; }
#login .brand .mark .word { font-family: var(--font-display); font-size: 25px; letter-spacing: .02em; font-weight: 600; }
#login .brand h1 { font-size: 40px; line-height: 1.14; margin: 42px 0 14px; color: #f2ede2; font-weight: 550; max-width: 480px; }
#login .brand p.lede { color: var(--chrome-muted); font-size: 14.5px; max-width: 440px; }
#login .brand .traits { margin-top: 34px; display: grid; gap: 13px; }
#login .brand .trait { display: flex; gap: 12px; align-items: flex-start; color: #cfd6da; font-size: 13px; max-width: 440px; }
#login .brand .trait .ic { color: #c8a069; margin-top: 1px; }
#login .brand .foot { margin-top: auto; color: #6f7c84; font-size: 11.5px; }
#login .gate { padding: 48px 56px; overflow: auto; display: flex; flex-direction: column; gap: 18px; align-items: stretch; max-width: 720px; }
#login .gate h2 { font-size: 19px; }
.tenant-group { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-card); overflow: hidden; }
.tenant-group > header { padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: var(--panel-2); }
.tenant-group > header .ic { color: var(--copper); }
.persona { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; font: inherit; }
.persona:last-child { border-bottom: 0; }
.persona:hover { background: #f5f0e5; }
.persona .face { width: 32px; height: 32px; border-radius: 50%; background: var(--pine); color: #e9f0ec; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; }
.persona .who { display: flex; flex-direction: column; }
.persona .who b { font-size: 13px; }
.persona .who span { font-size: 11px; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }
.persona .go { margin-left: auto; color: var(--ink-3); }

/* ── chrome: topbar / dock ────────────────────────────────────────────────── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 46px; display: none; align-items: center; gap: 12px;
  padding: 0 14px; background: var(--chrome); color: var(--chrome-ink); z-index: 5000; font-size: 12.5px;
}
#topbar .mark { display: flex; align-items: center; gap: 8px; color: #d9c9ac; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
#topbar .ws { color: var(--chrome-muted); display: flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid #ffffff1c; border-radius: 8px; }
#topbar .spacer { flex: 1; }
#searchbox {
  width: 380px; max-width: 32vw; background: #ffffff10; border: 1px solid #ffffff24; color: var(--chrome-ink);
  border-radius: 9px; padding: 7px 12px; font: inherit; outline: none;
}
#searchbox:focus { border-color: #c8a069; box-shadow: 0 0 0 3px #c8a06933; }
.tchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; border: 1px solid #ffffff1f; background: #ffffff0d; color: var(--chrome-ink); cursor: pointer; font: inherit; font-size: 12px; }
.tchip:hover { border-color: #c8a069; color: #eadfca; }
.tchip .n { background: var(--copper); color: #fff; border-radius: 99px; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; padding: 0 4px; }
.tchip .n.zero { background: #ffffff26; }
#cuibanner { display: none; position: fixed; top: 46px; left: 0; right: 0; z-index: 4800; background: var(--cui); color: #f3e5e1; text-align: center; font-size: 11.5px; letter-spacing: .08em; padding: 4px 8px; font-weight: 600; }
#dock {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; padding: 7px 9px;
  background: var(--chrome); border-radius: 16px; z-index: 5000; box-shadow: var(--shadow-win); border: 1px solid #ffffff14;
}
#dock .dockbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; padding: 7px 2px 5px;
  border-radius: 11px; border: 0; background: transparent; color: var(--chrome-muted); cursor: pointer; font: inherit;
}
#dock .dockbtn .ic { color: #cdd5da; }
#dock .dockbtn:hover { background: #ffffff12; color: #ede7da; }
#dock .dockbtn:hover .ic { color: #d9b98c; }
#dock .dockbtn span { font-size: 9.5px; letter-spacing: .03em; }
#dock .sep { width: 1px; background: #ffffff1a; margin: 6px 4px; }

/* ── windows ──────────────────────────────────────────────────────────────── */
#desktop { position: fixed; inset: 46px 0 0 0; }
.win {
  position: absolute; min-width: 420px; min-height: 260px; background: var(--panel); border-radius: var(--r);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-win); display: flex; flex-direction: column; overflow: hidden;
}
.win > header {
  height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 14px; cursor: grab; user-select: none;
  border-bottom: 1px solid var(--line); background: linear-gradient(#f7f4ec, #f1ede2);
}
.win > header .ic { color: var(--copper); }
.win > header .title { font-weight: 650; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win > header .wbtn { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 6px; border-radius: 7px; display: flex; }
.win > header .wbtn:hover { background: var(--danger-soft); color: var(--danger); }
.win.active > header { background: linear-gradient(#f3ecdd, #ece4d2); }
.win > .body { flex: 1; overflow: auto; padding: 14px; }
.win > .body.flush { padding: 0; }

/* ── agent rail ───────────────────────────────────────────────────────────── */
#agentbar {
  position: fixed; top: 46px; right: 0; bottom: 0; width: 352px; background: var(--chrome); color: var(--chrome-ink);
  z-index: 4500; display: none; flex-direction: column; border-left: 1px solid #ffffff16;
}
#agentbar .head { padding: 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ffffff14; }
#agentbar .head .who b { display: block; font-size: 13.5px; }
#agentbar .head .who span { font-size: 11px; color: var(--chrome-muted); }
#agentlog { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bubble { background: #ffffff10; border: 1px solid #ffffff14; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; white-space: pre-wrap; max-width: 94%; }
.bubble.me { background: #b4692f2b; border-color: #b4692f55; align-self: flex-end; }
.bubble .prov { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid #ffffff14; font-size: 10.5px; color: var(--chrome-muted); }
.bubble .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.achip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; background: #ffffff14; border: 1px solid #ffffff22; color: #e3d9c4; font-size: 11px; cursor: pointer; }
.achip:hover { border-color: #c8a069; }
#agentbar .composer { display: flex; gap: 7px; padding: 12px; border-top: 1px solid #ffffff14; }
#agentbar .composer input { flex: 1; background: #ffffff10; border: 1px solid #ffffff26; color: var(--chrome-ink); }
#agentbar .composer input:focus { border-color: #c8a069; box-shadow: none; }

/* ── hearth avatar (agent presence) ──────────────────────────────────────── */
.hearth { position: relative; width: 44px; height: 44px; flex: none; }
.hearth svg { width: 100%; height: 100%; }
.hearth .ring { fill: none; stroke: #c8a069; stroke-width: 2; opacity: .85; transform-origin: center; }
.hearth .ring2 { fill: none; stroke: #6e5636; stroke-width: 1.4; opacity: .6; transform-origin: center; }
.hearth .core { fill: #c8a069; }
.hearth[data-state="thinking"] .ring { animation: spin 1.6s linear infinite; stroke-dasharray: 40 22; }
.hearth[data-state="listening"] .ring { animation: breathe 1.4s ease-in-out infinite; stroke: #7fae94; }
.hearth[data-state="listening"] .core { fill: #7fae94; }
.hearth[data-state="speaking"] .ring2 { animation: breathe 0.55s ease-in-out infinite; }
.hearth[data-state="speaking"] .core { fill: #d9b98c; }
.hearth[data-state="recording"] .core { fill: #c65f5f; }
.hearth[data-state="recording"] .ring { stroke: #c65f5f; animation: breathe 1s ease-in-out infinite; }
.hearth[data-state="waiting_approval"] .ring { stroke: #d0a23c; stroke-dasharray: 8 7; }
.hearth[data-state="blocked"] .ring, .hearth[data-state="blocked"] .ring2 { stroke: #b0575e; }
.hearth[data-state="blocked"] .core { fill: #b0575e; }
.hearth[data-state="cui"] .ring { stroke: #a24a52; } .hearth[data-state="cui"] .core { fill: #a24a52; }
.hearth[data-state="privacy"] .core { fill: #58636b; } .hearth[data-state="privacy"] .ring { stroke: #58636b; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 1; } }
.statechip { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-muted); }

/* ── palette / toasts / onboarding ────────────────────────────────────────── */
#palette { position: fixed; top: 13vh; left: 50%; transform: translateX(-50%); width: 560px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-win); z-index: 8000; display: none; overflow: hidden; }
#palette input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 15px 18px; font-size: 15px; background: transparent; }
#palette .cmds { max-height: 320px; overflow: auto; padding: 6px; }
#palette .cmd { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
#palette .cmd .ic { color: var(--copper); }
#palette .cmd.sel, #palette .cmd:hover { background: var(--copper-soft); }
#palette .cmd .k { margin-left: auto; color: var(--ink-3); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
#toasts { position: fixed; bottom: 96px; right: 18px; z-index: 9500; display: flex; flex-direction: column; gap: 9px; }
.toast { display: flex; gap: 9px; align-items: flex-start; background: var(--chrome); color: var(--chrome-ink); padding: 11px 14px; border-radius: 11px; font-size: 12.5px; max-width: 400px; box-shadow: var(--shadow-win); border-left: 3px solid #c8a069; }
.toast.err { border-left-color: #c65f5f; }
.toast.ok { border-left-color: #7fae94; }
#onboard { position: fixed; inset: 0; background: rgba(24, 20, 14, .55); z-index: 8800; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
#onboard .panel { width: 560px; background: var(--panel); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow-win); }
#onboard .steps { display: flex; gap: 6px; margin: 4px 0 18px; }
#onboard .steps i { height: 4px; flex: 1; border-radius: 4px; background: var(--line); }
#onboard .steps i.on { background: var(--copper); }
#onboard h2 { font-size: 21px; margin-bottom: 8px; }
#onboard .art { margin: 14px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); display: flex; gap: 14px; align-items: center; }

/* ── artifacts ────────────────────────────────────────────────────────────── */
.artifact { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.artifact > header { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.artifact > header .ic { color: var(--copper); }
.artifact > header .t { font-weight: 650; font-size: 12.5px; flex: 1; }
.artifact .abody { padding: 13px; }
.docview { max-width: 660px; font-size: 13.5px; }
.docview h1 { font-size: 22px; margin: 12px 0 8px; } .docview h2 { font-size: 17px; margin: 12px 0 6px; } .docview h3 { font-size: 14px; margin: 10px 0 4px; }
.docview p { margin: 6px 0; } .docview li { margin: 3px 0; }
.gridwrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
table.grid { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.grid th { background: var(--panel-2); border: 1px solid var(--line); padding: 4px 8px; color: var(--ink-3); font-weight: 600; min-width: 74px; }
.grid td { border: 1px solid var(--line); padding: 4px 8px; background: #fffdf8; min-width: 74px; }
.grid td.num { text-align: right; }
.grid td.formula { color: var(--pine); }
.grid td.err { color: var(--danger); font-weight: 700; }
.slidecard { border: 1px solid var(--line-2); border-radius: 10px; background: #fffdf8; padding: 16px 18px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.slidecard .no { float: right; color: var(--ink-3); font-size: 10.5px; }
.slidecard h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 15px; }
.slidecard li { font-size: 12.5px; margin: 3px 0; }
.slidecard.title-slide { background: var(--chrome); color: var(--chrome-ink); border-color: var(--chrome); }
.slidecard.title-slide h4 { color: #e8dcc9; font-size: 19px; }
.barrow { display: flex; align-items: center; gap: 9px; margin: 5px 0; font-size: 12px; }
.barrow .lbl { width: 130px; color: var(--ink-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow .bar { height: 15px; background: linear-gradient(90deg, var(--copper), #c98d55); border-radius: 4px; min-width: 2px; }
.barrow .val { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--line-2); border-radius: 2px; }
.tl-item { position: relative; margin-bottom: 10px; font-size: 12.5px; }
.tl-item::before { content: ""; position: absolute; left: -18px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); }
.tl-item.err::before { background: var(--danger); }
.invoice-doc { max-width: 560px; }
.invoice-doc .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.invoice-doc .head .word { font-family: var(--font-display); font-size: 19px; color: var(--copper-2); }
.invoice-doc .total { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* meters */
.meter { margin: 7px 0; }
.meter .top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-2); margin-bottom: 3px; }
.meter .rail { height: 7px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.meter .fill { height: 100%; background: linear-gradient(90deg, var(--pine), #4f8a75); }
.meter .fill.hot { background: linear-gradient(90deg, var(--warn), #c98232); }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.tabs button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 12.5px; color: var(--ink-2); padding: 8px 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--copper-2); border-bottom-color: var(--copper); }

/* kanban */
.kb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kb .col > .cap { display: flex; justify-content: space-between; padding: 2px 2px 8px; }
.kcard { background: #fffdf8; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 8px; padding: 9px 11px; margin-bottom: 7px; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow-card); }
.kcard:hover { border-color: var(--copper); }
.kcard.blocked { border-left-color: var(--danger); }
.kcard.in_progress { border-left-color: var(--copper); }
.kcard.done { border-left-color: var(--ok); opacity: .75; }

/* voice console */
.voicestage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 0 10px; }
.voicestage .hearth { width: 96px; height: 96px; }
.voicefeed { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; background: var(--panel-2); }
.vline { margin: 5px 0; font-size: 12.5px; }
.vline b { color: var(--copper-2); }

/* platform console */
#platform { position: fixed; inset: 46px 0 0 0; display: none; overflow: auto; padding: 22px 26px; }
.pgrid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.pgrid .card { position: sticky; top: 0; max-height: calc(100vh - 100px); overflow: auto; }

/* home */
.home-hero { padding: 8px 4px 16px; }
.home-hero h2 { font-size: 24px; }
.home-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.home-act { display: flex; flex-direction: column; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); cursor: pointer; text-align: left; font: inherit; box-shadow: var(--shadow-card); }
.home-act:hover { border-color: var(--copper); }
.home-act .ic { color: var(--copper); }
.home-act b { font-size: 13.5px; }
.home-act span { color: var(--ink-2); font-size: 12px; }

.consent-strip { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
.consent-strip.rec { background: var(--danger-soft); border-color: #d8b3b1; color: var(--danger); font-weight: 600; }
.playstep { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.playstep .no { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink-2); flex: none; }
.playstep.done .no { background: var(--ok); border-color: var(--ok); color: #fff; }
.playstep .what b { display: block; font-size: 13px; }
.playstep .what span { color: var(--ink-2); font-size: 12px; }
.playstep .act { margin-left: auto; align-self: center; }