/* Konsilium — application styles. Built on tokens.css.
   Calm, precise, instrumental (Linear / Things / Raycast).
   Motion: transform/opacity only, one-shot, GPU-friendly; no idle loops.
   Everything degrades under prefers-reduced-motion (bottom of file). */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  /* Paint the theme bg as a real, valid declaration. The old shorthand
     `var(--body-grad) fixed, var(--bg)` resolved to `<color> fixed, <color>`,
     which is invalid (a color can't be a non-final layer) → the whole rule was
     dropped and body went transparent, making premium-dark/dark text unreadable
     (≈1.1:1 over the white page). A theme may still add a gradient via its own
     `[data-theme=…] body { background-image: … }`. */
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h1 { font-size: 25px; font-weight: 650; line-height: 1.2; letter-spacing: -0.025em; font-family: var(--font-display, var(--font-sans)); }
h2 { font-size: 15px; font-weight: 600; font-family: var(--font-display, var(--font-sans)); }
h3 { font-size: 11px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; }
p { margin: 0 0 8px; }
.muted { color: var(--text-2); }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--accent-weak); }
.tnum, .count, .due, .kbd, time { font-variant-numeric: tabular-nums; }

/* ---- icons ---- */
.icon { width: var(--icon); height: var(--icon); stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }

/* ---- focus ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* ---- buttons ---- */
/* Tactile buttons (Stage C+ Phase 3, fixed): hover lifts + casts a shadow, press
   sinks (shadow -> 0 + settle), focus ring via the global :focus-visible. Only
   transform/box-shadow animate (cheap, reduced-motion handled at file bottom). */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  padding: 7px 12px; border-radius: var(--r-sm); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-s);
  transition: background var(--d-out) var(--ease-std), border-color var(--d-out), color var(--d-out),
    transform 110ms var(--ease-out), box-shadow 110ms var(--ease-out); }
.btn:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); font-weight: 600;
  box-shadow: var(--accent-btn-shadow); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-primary:active { background: var(--accent-2); transform: translateY(0); box-shadow: var(--accent-btn-shadow); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); padding: 7px 9px; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); box-shadow: none; }
.btn-ghost:active { transform: translateY(0); }
.btn-block { width: 100%; }
.btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* ≥44px touch targets on mobile (Phase 3 §4) */
@media (max-width: 560px) { .btn { min-height: 44px; } }

.icon-btn { appearance: none; border: 1px solid transparent; background: transparent; color: var(--text-3);
  cursor: pointer; width: 28px; height: 28px; border-radius: var(--r-sm); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--d-out) var(--ease-std), color var(--d-out), transform var(--d-out); }
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(0.92); }
.icon-btn.danger:hover, .icon-btn.js-del:hover { background: var(--danger-weak); color: var(--danger); }

/* ---- fields ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], select, textarea {
  font: inherit; color: var(--text); background: var(--input-bg);
  border: 1px solid var(--border); border-radius: var(--radius-input); padding: 10px 12px; width: 100%;
  transition: border-color var(--d-out) var(--ease-std), box-shadow var(--d-out); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
textarea { resize: vertical; line-height: 1.5; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.field > span { font-size: 12px; font-weight: 500; color: var(--text-2); }
.kbd { font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: var(--r-xs); padding: 3px 6px; min-width: 18px; display: inline-flex; align-items: center; justify-content: center; }

/* ============================ AUTH ============================ */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; }
.auth-theme { position: absolute; top: 20px; right: 20px; }
.auth-card { width: 350px; max-width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 30px; box-shadow: var(--shadow-3);
  animation: pop-in var(--d-in) var(--ease-out) both; }
.auth-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-fg); margin-bottom: 14px; }
.auth-mark .icon { width: 22px; height: 22px; stroke-width: 2; }
.auth-brand { font-size: 26px; font-weight: 650; letter-spacing: -0.03em; }
.auth-sub { color: var(--text-2); margin: 4px 0 20px; font-size: 13px; }
.auth-error { background: var(--danger-weak); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  padding: 9px 11px; border-radius: var(--r-sm); margin-bottom: 14px; font-size: 13px; }
.auth .btn-block { margin-top: 6px; padding-top: 9px; padding-bottom: 9px; }

/* ============================ SHELL ============================ */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; }
.sidebar { background: var(--surface-1); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 14px; min-height: 0; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; font-family: var(--font-display, var(--font-sans)); }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #fff;
  box-shadow: 0 4px 12px -2px var(--accent-soft), 0 1px 2px rgba(0,0,0,.2); }
.brand-mark .icon { width: 18px; height: 18px; stroke-width: 2; }
.theme-toggle { width: 30px; height: 30px; }
.theme-toggle .i-on { display: none; }
[data-theme="dark"] .theme-toggle .i-on,
[data-theme="premium-dark"] .theme-toggle .i-on,
[data-theme="minecraft"] .theme-toggle .i-on { display: block; }
[data-theme="dark"] .theme-toggle .i-off,
[data-theme="premium-dark"] .theme-toggle .i-off,
[data-theme="minecraft"] .theme-toggle .i-off { display: none; }

.project-switch { display: flex; flex-direction: column; gap: 7px; }
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap > .icon { position: absolute; left: 9px; color: var(--text-3); pointer-events: none; width: 15px; height: 15px; }
.select-wrap select { padding-left: 30px; font-weight: 500; cursor: pointer; appearance: none; }
.project-add { display: flex; gap: 6px; }
.project-add input { flex: 1; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--r-sm); color: var(--text-2); cursor: pointer; font-weight: 500;
  transition: background var(--d-out) var(--ease-std), color var(--d-out); }
.nav-item .icon { color: var(--text-3); transition: color var(--d-out); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover .icon { color: var(--text-2); }
.nav-item.active { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.nav-item.active .icon { color: var(--accent); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-key { margin-left: auto; font-size: 11px; color: var(--text-3); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.account-avatar { width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--accent-weak);
  color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; text-transform: uppercase; }
.account-email { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-hint { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: var(--r-sm);
  color: var(--text-3); font-size: 12px; cursor: pointer; border: 1px dashed var(--border-strong); background: transparent;
  transition: background var(--d-out), color var(--d-out); }
.cmdk-hint:hover { background: var(--surface-2); color: var(--text-2); }
.cmdk-hint .icon { width: 15px; height: 15px; }
.cmdk-hint .kbd { margin-left: auto; }

.content { overflow: auto; padding: 30px 34px 64px; min-width: 0; }
.tab { max-width: 1160px; margin: 0 auto; animation: fade-up var(--d-in) var(--ease-out) both; }
.tab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.tab-head .muted { font-size: 13.5px; margin-top: 5px; }
.toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.toolbar .btn .icon { width: 15px; height: 15px; }
.mode-hint { font-size: 12px; color: var(--text-3); margin-left: 4px; }

/* stagger (one-shot) */
.stagger > * { animation: fade-up var(--d-in) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 110ms; }
.stagger > *:nth-child(5) { animation-delay: 140ms; }
.stagger > *:nth-child(6) { animation-delay: 170ms; }
.stagger > *:nth-child(n+7) { animation-delay: 190ms; }

/* ============================ STRUCTURE / GRAPH ============================ */
.structure-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; height: calc(100vh - 168px); }
.structure-wrap.with-panel { grid-template-columns: 1fr 330px; }
.graph-wrap { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1);
  background-image: radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.graph { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.graph.panning { cursor: grabbing; }
.gnode { cursor: pointer; }
.gnode-rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10)); transition: stroke var(--d-out); }
.gnode:hover .gnode-rect { stroke: var(--text-3); }
.gnode-text { fill: var(--text); font-size: 13px; font-weight: 500; font-family: var(--font-sans);
  text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.gnode.type-root .gnode-rect { stroke: var(--accent); }
.gnode.selected .gnode-rect { stroke: var(--accent); stroke-width: 2; }
.gnode-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity var(--d-out); }
.gnode.selected .gnode-ring { opacity: 0.5; }
.gnode.connect-src .gnode-rect { stroke: var(--warn); stroke-width: 2; }
.gedge { fill: none; stroke: var(--text-faint); stroke-width: 1.75; }
.gedge-label { fill: var(--text-dim); font-size: 11px; text-anchor: middle; font-family: var(--font-sans);
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.edge-arrow { fill: var(--text-faint); }
.mode-connect .graph { cursor: crosshair; }
.mode-delete .graph { cursor: not-allowed; }
.node-rename-input { position: absolute; z-index: 5; font: inherit; font-weight: 500; text-align: center;
  border: 1px solid var(--accent); border-radius: var(--r-sm); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }

.minimap { position: absolute; right: 12px; bottom: 12px; width: 170px; height: 112px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-1); }
.minimap svg { width: 100%; height: 100%; display: block; }
.minimap-node { fill: var(--text-3); }
.minimap-view { fill: var(--accent); fill-opacity: 0.14; stroke: var(--accent); stroke-width: 1; }

.side-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; overflow: auto; box-shadow: var(--shadow-1); animation: slide-in-right var(--d-in) var(--ease-out) both; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.panel-title { font-weight: 600; }
.node-title-input { font-weight: 600; font-size: 15px; border-color: transparent; padding: 5px 7px; background: transparent; }
.node-title-input:hover { border-color: var(--border-strong); background: var(--surface); }
.save-hint { font-size: 12px; color: var(--text-3); min-height: 16px; transition: color var(--d-out); }
.save-hint.ok { color: var(--ok); }
.save-hint.err { color: var(--danger); }

/* ============================ TASKS / KANBAN ============================ */
.task-add, .checklist-add, .plan-add { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; box-shadow: var(--shadow-1); }
.task-add input[name="title"], .checklist-add input, .plan-add input[name="title"] {
  flex: 1; min-width: 180px; border-color: transparent; background: transparent; }
.task-add input[name="title"]:focus, .checklist-add input:focus, .plan-add input[name="title"]:focus {
  background: var(--surface); border-color: var(--accent); }
.task-add select, .task-add input[type="date"], .plan-add select, .plan-add input[type="date"] { width: auto; }

.tasks-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
.tasks-layout.with-panel { grid-template-columns: 1fr 330px; }
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.kanban-col { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 11px; }
.kanban-head { font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; color: var(--text-dim); }
.kanban-head .count { background: var(--surface-3); color: var(--text-faint); border-radius: 6px;
  min-width: 20px; text-align: center; padding: 1px 7px; font-size: 12px; font-weight: 600; }
.kanban-list { display: flex; flex-direction: column; gap: 11px; min-height: 56px; border-radius: var(--r-sm);
  transition: background var(--d-out); padding: 2px; }
.kanban-list.drag-over { background: var(--accent-weak);
  outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }

.card { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 13px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform var(--d-out) var(--ease-out), box-shadow var(--d-out), border-color var(--d-out); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
/* colored priority stripe on the left edge (::before, no layout shift) */
.task-card { cursor: grab; padding-left: 15px; }
.task-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--text-faint); }
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.5; box-shadow: var(--shadow-3); }
.task-card.priority-high::before { background: var(--prio-high); }
.task-card.priority-med::before { background: var(--prio-med); }
.task-card.priority-low::before { background: var(--text-faint); }
.task-card-top { display: flex; align-items: flex-start; gap: 6px; }
.task-title { display: block; font-weight: 550; cursor: pointer; flex: 1; font-size: 14px; }
.task-title:hover { color: var(--accent); }
.card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.inline-edit-input { font: inherit; font-weight: 500; width: 100%; padding: 2px 6px;
  border: 1px solid var(--accent); border-radius: var(--r-xs); box-shadow: 0 0 0 3px var(--ring); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 3px 9px;
  border-radius: 7px; background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border); }
.badge .icon { width: 12px; height: 12px; }
/* priority pill — spec: 3px 9px, radius 7, 11.5/600, 6px colored dot */
.badge.prio-high, .badge.prio-med, .badge.prio-low { font-size: 11.5px; font-weight: 600; border-color: transparent; }
.badge.prio-high { color: var(--prio-high); background: var(--prio-high-soft); }
.badge.prio-med { color: var(--prio-med); background: var(--prio-med-soft); }
.badge.prio-low { color: var(--text-dim); background: var(--surface-3); }
.pdot { width: 6px; height: 6px; border-radius: var(--r-pill); flex: 0 0 auto; }
.prio-high .pdot { background: var(--prio-high); }
.prio-med .pdot { background: var(--prio-med); }
.prio-low .pdot { background: var(--text-faint); }
.badge.due { color: var(--text-dim); }
.card-meta .icon-btn { margin-left: auto; }

/* ============================ CHECKLIST ============================ */
.checklist { list-style: none; margin: 0; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 6px; }
.checklist-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1);
  transition: transform var(--d-out) var(--ease-out), box-shadow var(--d-out), opacity var(--d-out); }
.checklist-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.state-toggle { border: none; background: transparent; cursor: pointer; padding: 0; display: inline-flex; flex: 0 0 auto; }
.state-box { width: 19px; height: 19px; border-radius: var(--r-sm); border: 2px solid var(--border-strong);
  display: grid; place-items: center; transition: background var(--d-out) var(--ease-out), border-color var(--d-out); }
.state-box .icon { width: 13px; height: 13px; color: #fff; stroke-width: 3; opacity: 0; transform: scale(0.5);
  transition: opacity var(--d-out), transform var(--d-out) var(--ease-out); }
.state-done .state-box { background: var(--ok); border-color: var(--ok); }
.state-done .state-box .icon { opacity: 1; transform: scale(1); }
.state-to_finish .state-box { border-color: var(--warn); background: var(--warn); }
.state-to_finish .state-box .icon { opacity: 1; transform: scale(1); }
.cli-text { flex: 1; }
.state-done .cli-text { color: var(--text-3); text-decoration: line-through; }
.cli-state-label { font-size: 11px; color: var(--text-3); font-weight: 500; }

/* ============================ LONG-TERM ============================ */
.plan-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.plan-group-title { margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.plan-group-title .count { color: var(--text-3); font-weight: 500; }
.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-card { border-left: 3px solid var(--border-strong); }
.plan-card.status-active { border-left-color: var(--accent); }
.plan-card.status-done { border-left-color: var(--ok); }
.plan-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.plan-title { font-weight: 600; }
.plan-body { color: var(--text-2); font-size: 13px; margin: 6px 0 0; }
.plan-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.status-badge { cursor: pointer; border: 1px solid var(--border); }
.status-badge.status-planned { color: var(--text-2); }
.status-badge.status-active { color: var(--accent); background: var(--accent-weak); border-color: transparent; }
.status-badge.status-done { color: var(--ok); background: var(--ok-weak); border-color: transparent; }
.empty-hint { font-size: 13px; color: var(--text-3); padding: 8px 2px; }

/* ============================ COMMENTS ============================ */
.comments { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.comment-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.comment { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px; }
.comment.author-claude { background: var(--accent-weak); border-color: transparent; }
.comment-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.comment-author { font-size: 11px; font-weight: 600; color: var(--text-3); }
.comment-body { white-space: pre-wrap; font-size: 13px; }
.comment-add { display: flex; flex-direction: column; gap: 7px; }

/* ============================ EMPTY STATES ============================ */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 48px 24px; color: var(--text-2); background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl); animation: fade-up var(--d-in) var(--ease-out) both; }
.empty-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--text-3); margin-bottom: 6px; }
.empty-icon .icon { width: 24px; height: 24px; }
.empty-title { font-weight: 600; color: var(--text); }
.empty-sub { font-size: 13px; max-width: 380px; }
.empty-state .inline-form, .empty-state .btn { margin-top: 10px; }
.inline-form { display: flex; gap: 8px; justify-content: center; }
.inline-form input { max-width: 260px; }

/* ============================ COMMAND PALETTE ============================ */
.cmdk-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 14vh; animation: fade-in var(--d-out) var(--ease-out) both; }
.cmdk-backdrop[hidden] { display: none; }
.cmdk { width: 560px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden; animation: pop-in var(--d-in) var(--ease-out) both; }
.cmdk-search { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.cmdk-search .icon { color: var(--text-3); }
.cmdk-search input { border: none; background: transparent; padding: 0; font-size: 15px; }
.cmdk-search input:focus { outline: none; box-shadow: none; }
.cmdk-list { max-height: 52vh; overflow: auto; padding: 6px; }
.cmdk-group-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 8px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--text); }
.cmdk-item .icon { color: var(--text-3); }
.cmdk-item .cmdk-label { flex: 1; }
.cmdk-item .cmdk-meta { font-size: 11px; color: var(--text-3); }
.cmdk-item.active { background: var(--accent-weak); }
.cmdk-item.active .icon { color: var(--accent); }
.cmdk-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }
.cmdk-foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3); }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* ============================ TOASTS ============================ */
.toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex;
  flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px 12px 10px 14px; box-shadow: var(--shadow-3); pointer-events: auto;
  min-width: 280px; max-width: 420px; animation: toast-in var(--d-in) var(--ease-out) both; }
.toast.leaving { animation: toast-out var(--d-out) var(--ease-in) both; }
.toast-msg { flex: 1; font-size: 13px; }
.toast-action { border: none; background: transparent; color: var(--accent); font: inherit; font-weight: 600;
  cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); }
.toast-action:hover { background: var(--accent-weak); }
.toast-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent); flex: 0 0 auto; }
.toast.ok .toast-dot { background: var(--ok); }
.toast.danger .toast-dot { background: var(--danger); }

/* ============================ SKELETON ============================ */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent);
  animation: shimmer 1.1s ease-in-out infinite; }
.skeleton-row { height: 14px; margin: 8px 0; }

/* keyframes — all one-shot except shimmer (only mounted during loading) */
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
@keyframes shimmer { to { transform: translateX(100%); } }
/* one-shot delight (Jhey, event-only): the task checkbox pops with a gentle spring
   when toggled to done. structure.js adds .just-checked on click → never on load, so
   idle=0 holds; the prefers-reduced-motion reset below disables it automatically. */
@keyframes check-pop { 0% { transform: scale(.55); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }
.gtask-check.just-checked .gtask-box { transform-box: fill-box; transform-origin: center;
  animation: check-pop 260ms var(--ease-spring); }

/* view transitions (tab crossfade) */
#main { view-transition-name: main; }
::view-transition-old(main), ::view-transition-new(main) { animation-duration: 160ms; }

/* ============================ CUSTOM SELECT (A2) ============================ */
/* Native <select> stays in the DOM as the source of truth (hidden); the styled
   listbox mirrors it. Open/close via transform+opacity only. */
.ksel { position: relative; display: inline-block; }
.ksel.block { display: block; width: 100%; }
.ksel-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ksel-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px 10px;
  cursor: pointer; text-align: left; transition: border-color var(--d-out), box-shadow var(--d-out); }
.ksel-btn:hover { border-color: var(--text-3); }
.ksel.open .ksel-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.ksel-btn .ksel-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksel-btn .ksel-caret { color: var(--text-3); width: 15px; height: 15px; transition: transform var(--d-out) var(--ease-out); }
.ksel.open .ksel-btn .ksel-caret { transform: rotate(180deg); }
.ksel-menu { position: absolute; left: 0; top: calc(100% + 4px); min-width: 100%; z-index: 50;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-3); padding: 5px; max-height: 280px; overflow: auto;
  transform-origin: top; opacity: 0; transform: scale(0.97) translateY(-2px);
  transition: opacity var(--d-out) var(--ease-out), transform var(--d-out) var(--ease-out); pointer-events: none; }
.ksel.open .ksel-menu { opacity: 1; transform: none; pointer-events: auto; }
.ksel-menu[hidden] { display: none; }
.ksel-option { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--text); white-space: nowrap; }
.ksel-option .ksel-check { width: 15px; height: 15px; color: var(--accent); opacity: 0; }
.ksel-option[aria-selected="true"] .ksel-check { opacity: 1; }
.ksel-option[aria-selected="true"] { color: var(--accent); font-weight: 500; }
.ksel-option.active { background: var(--accent-weak); }
.ksel-dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex: 0 0 auto; }

/* ============================ CONTEXT MENU (A3) ============================ */
.ctx-menu { position: fixed; z-index: 300; min-width: 210px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-3);
  padding: 5px; transform-origin: top left; opacity: 0; transform: scale(0.96);
  transition: opacity var(--d-out) var(--ease-out), transform var(--d-out) var(--ease-out); }
.ctx-menu.open { opacity: 1; transform: none; }
.ctx-menu[hidden] { display: none; }
.ctx-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--text); font-size: 13px; position: relative; }
.ctx-item .icon { width: 16px; height: 16px; color: var(--text-3); }
.ctx-item:hover, .ctx-item.active { background: var(--accent-weak); }
.ctx-item:hover .icon, .ctx-item.active .icon { color: var(--accent); }
.ctx-item.danger:hover { background: var(--danger-weak); color: var(--danger); }
.ctx-item.danger:hover .icon { color: var(--danger); }
.ctx-item .ctx-arrow { margin-left: auto; color: var(--text-3); width: 14px; height: 14px; }
.ctx-sep { height: 1px; background: var(--border); margin: 5px 6px; }
.ctx-sub-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 6px 10px 3px; }
.ctx-swatches { display: flex; gap: 6px; padding: 4px 10px 7px; }
.ctx-swatch { width: 20px; height: 20px; border-radius: var(--r-sm); cursor: pointer; border: 2px solid transparent;
  transition: transform var(--d-out); }
.ctx-swatch:hover { transform: scale(1.12); }
.ctx-swatch.sel { border-color: var(--text); }
/* in-menu text entry (§4.2 — all editing happens in the context menu) */
.ctx-menu { min-width: 248px; }
.ctx-field { padding: 2px 8px 8px; }
.ctx-input, .ctx-textarea { width: 100%; font: inherit; color: var(--text); background: var(--input-bg);
  border: 1px solid var(--bd2); border-radius: var(--radius-input); padding: 8px 10px;
  transition: border-color var(--d-out), box-shadow var(--d-out); }
.ctx-input:focus, .ctx-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
/* min-height = comfortable floor; JS autosize (ui.js) grows it to content up to
   ~62vh, so short fields (links/checklist) stay compact while a long note opens
   tall. resize:vertical lets the user nudge it further. */
.ctx-textarea { resize: vertical; min-height: 80px; line-height: 1.45; }
/* note/desc editor can grow tall; keep the whole menu within the viewport and let
   it scroll as a last resort (that scroll no longer closes the menu — see ui.js). */
.ctx-menu { max-height: calc(100vh - 24px); overflow-y: auto; }
.ctx-hint { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

/* Phase C — node-tasks section inside the node context menu (etalon: dark-green
   card). Checklist rows = ✓ box + strike when done; note rows = bullet. Same Task
   entity as the «Задачи» section (synced via linked_node_id). */
.ctx-nodetasks { margin: 2px 6px 6px; padding: 9px 11px; border: 1px solid var(--node-task, #2fa35e);
  border-radius: var(--r-md); background: linear-gradient(180deg, rgba(47,163,94,.10), rgba(47,163,94,.04)); }
.ctx-nodetasks .ctx-sub-label { padding: 0 0 6px; color: var(--node-task, #2fa35e); }
.nt-list { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.nt-empty { font-size: 12px; color: var(--text-3); padding: 2px 0 4px; }
.nt-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 2px 0; }
.nt-row .nt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-check { flex: none; width: 16px; height: 16px; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid var(--node-task, #2fa35e); border-radius: 4px; background: transparent; color: transparent; padding: 0; }
.nt-check .icon { width: 10px; height: 10px; }
.nt-row.nt-done .nt-check { background: var(--node-task, #2fa35e); color: #fff; }
.nt-row.nt-done .nt-title { text-decoration: line-through; color: var(--text-3); }
.nt-bullet { flex: none; width: 16px; text-align: center; color: var(--node-task, #2fa35e); font-weight: 800; }
.nt-del { flex: none; background: transparent; border: none; color: var(--text-3); cursor: pointer; padding: 2px;
  border-radius: var(--r-xs); opacity: 0; transition: opacity var(--d-out), color var(--d-out); }
.nt-del .icon { width: 13px; height: 13px; }
.nt-row:hover .nt-del { opacity: 1; }
.nt-del:hover { color: var(--danger); }
.nt-add { margin-top: 5px; }
.nt-add .ctx-input { padding: 6px 9px; font-size: 12.5px; }

/* §3 declutter: structure header layout (title left, board toggle right) */
.struct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; }
.struct-sub { font-size: 12.5px; margin-top: 5px; }

/* ============================ GRAPH: NODE STATES/TYPES (A4) ============================ */
.gnode-rect { transition: stroke var(--d-out), fill var(--d-out), opacity var(--d-out); }
.gnode.type-idea .gnode-rect { stroke: var(--node-idea); }
.gnode.type-task .gnode-rect { stroke: var(--node-task); }
.gnode.type-risk .gnode-rect { stroke: var(--node-risk); }
.gnode.type-decision .gnode-rect { stroke: var(--node-decision); }
.gnode.type-goal .gnode-rect { stroke: var(--node-goal); stroke-width: 2; }
.gnode.type-milestone .gnode-rect { stroke: var(--node-milestone); }
.gnode.type-question .gnode-rect { stroke: var(--node-question); }
.gnode.type-resource .gnode-rect { stroke: var(--node-resource); }
.gnode.type-root .gnode-rect { stroke: var(--accent); }
.gnode.status-done .gnode-rect { fill: var(--ok-weak); }
.gnode.status-done .gnode-text { fill: var(--text-2); }
.gnode.status-struck { opacity: 0.55; }
.gnode.status-struck .gnode-strike { stroke: var(--text-2); stroke-width: 1.5; }
.gnode.status-highlight .gnode-rect { stroke: var(--accent); stroke-width: 2.5;
  filter: drop-shadow(0 0 0 var(--accent)) drop-shadow(0 2px 8px var(--ring)); }
.gnode-strike { opacity: 0; }
.gnode.status-struck .gnode-strike { opacity: 1; }
.gnode-badge { fill: var(--ok); }
.node-type-pill { display: inline-flex; align-items: center; gap: 6px; }

/* ============================ TASK NESTING (B1) ============================ */
.subtask-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; border-radius: var(--r-xs); }
.subtask-toggle .icon { width: 14px; height: 14px; transition: transform var(--d-out) var(--ease-out); }
.subtask-toggle:hover { color: var(--text); background: var(--surface-3); }
.task-card.collapsed .subtask-children { display: none; }
.subtask-children { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; }
.subtask-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 7px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.subtask-row .st-title { flex: 1; cursor: pointer; }
.subtask-row.st-done .st-title { color: var(--text-3); text-decoration: line-through; }
.subtask-check { width: 16px; height: 16px; border-radius: var(--r-xs); border: 2px solid var(--border-strong);
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.subtask-check .icon { width: 11px; height: 11px; color: #fff; opacity: 0; }
.subtask-row.st-done .subtask-check { background: var(--ok); border-color: var(--ok); }
.subtask-row.st-done .subtask-check .icon { opacity: 1; }
.subtask-progress { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.subtask-add { display: flex; gap: 6px; margin-top: 6px; }
.subtask-add input { font-size: 13px; padding: 5px 8px; }

/* ============================ CHECKLIST SUBSYSTEM (B2) ============================ */
.checklist-layout { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; }
.checklist-rail { display: flex; flex-direction: column; gap: 4px; }
.cl-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cl-tab { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--text-2); font-weight: 500; border: 1px solid transparent; text-align: left;
  background: transparent; font: inherit; width: 100%; transition: background var(--d-out), color var(--d-out); }
.cl-tab .icon { width: 16px; height: 16px; color: var(--text-3); }
.cl-tab:hover { background: var(--surface-2); color: var(--text); }
.cl-tab.active { background: var(--accent-weak); color: var(--accent); }
.cl-tab.active .icon { color: var(--accent); }
.cl-tab .cl-kind { margin-left: auto; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-3); }
.cl-tab .cl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.checklist-panel { min-width: 0; }
.cl-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cl-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-title { font-size: 18px; font-weight: 600; }
.cl-kind-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.cl-kind-badge.daily { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.cl-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* progress ring (one-shot stroke set via inline style, no loop) */
.cl-progress { display: flex; align-items: center; gap: 10px; }
.cl-ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.cl-ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.cl-ring-fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset 320ms var(--ease-out); }
.cl-ring-num { font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cl-streak { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--warn);
  font-weight: 500; font-variant-numeric: tabular-nums; }
.cl-streak .icon { width: 15px; height: 15px; }

.cl-children { margin-top: 6px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.checklist-item.collapsed + .cl-children { display: none; }
.cli-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; border-radius: var(--r-xs); flex: 0 0 auto; }
.cli-toggle .icon { width: 14px; height: 14px; }
.cli-toggle.placeholder { visibility: hidden; }
.cli-sub-add { display: none; }
.cli-subinput { margin: 4px 0 4px 44px; }
.cli-subinput input { font-size: 13px; padding: 6px 9px; }

/* history view */
.cl-history { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; margin-top: 16px; }
.cl-history-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cl-date-chip { font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; padding: 5px 10px;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: background var(--d-out), color var(--d-out); }
.cl-date-chip:hover { background: var(--surface-2); color: var(--text); }
.cl-date-chip.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.cl-snapshot { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cl-snap-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.cl-snap-dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex: 0 0 auto; background: var(--text-3); }
.cl-snap-item.s-done .cl-snap-dot { background: var(--ok); }
.cl-snap-item.s-to_finish .cl-snap-dot { background: var(--warn); }
.cl-snap-item.s-done .cl-snap-text { color: var(--text-3); text-decoration: line-through; }
.cl-history-empty { color: var(--text-3); font-size: 13px; }

/* ============================ SEGMENTED CONTROL ============================ */
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 18px; }
.segmented .seg { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 500; cursor: pointer; background: transparent; border: none; font: inherit;
  transition: background var(--d-out), color var(--d-out); }
.segmented .seg .icon { width: 15px; height: 15px; }
.segmented .seg:hover { color: var(--text); }
.segmented .seg.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); font-weight: 600; }
.segmented .seg.active .icon { color: var(--accent); }
.seg-mini { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.seg-mini .seg { padding: 4px 10px; font-size: 12px; border-radius: var(--r-xs); color: var(--text-2); background: transparent; }
.seg-mini .seg.active { background: var(--surface); color: var(--accent); font-weight: 600; }

/* ============================ HABIT TRACKER (Part F) ============================ */
.habit { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; margin-bottom: 18px; box-shadow: var(--shadow-1); }
.habit-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.habit-progress-wrap { flex: 1; min-width: 220px; }
.habit-pct { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.habit-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: 8px 0 6px; }
.habit-bar-fill { display: block; height: 100%; width: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ok)));
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); }
.habit-sub { font-size: 12px; }
.habit-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.habit-grid { border-collapse: separate; border-spacing: 0; width: 100%; }
.habit-grid th, .habit-grid td { padding: 0; }
.habit-grid thead th.habit-col { padding: 0 0 8px; text-align: center; min-width: 34px; }
.habit-dow { display: block; font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; }
.habit-dnum { display: block; font-size: 12px; color: var(--text-2); }
.habit-col.is-today .habit-dnum { color: var(--accent); font-weight: 700; }
.habit-rowhead { text-align: left; font-weight: 500; color: var(--text); font-size: 13px; padding: 6px 12px 6px 0 !important;
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.habit-cell { text-align: center; padding: 3px !important; }
.habit-mark { width: 26px; height: 26px; border-radius: var(--r-sm); border: 1.5px solid var(--border-strong);
  background: var(--surface-2); display: inline-grid; place-items: center; padding: 0; }
.habit-mark .icon { width: 14px; height: 14px; color: #fff; opacity: 0; }
button.habit-mark { cursor: pointer; transition: transform var(--d-out), background var(--d-out), border-color var(--d-out); }
button.habit-mark:hover { border-color: var(--accent); }
button.habit-mark:active { transform: scale(0.9); }
.habit-mark.done { background: var(--ok); border-color: var(--ok); }
.habit-mark.done .icon { opacity: 1; }
.habit-mark.past { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.habit-mark.past.done { background: color-mix(in srgb, var(--ok) 80%, transparent); border-color: transparent; }
.habit-mark.future { background: transparent; border-style: dashed; border-color: var(--border); }
.is-month .habit-mark { width: 20px; height: 20px; }
.is-month .habit-grid thead th.habit-col { min-width: 24px; }
.habit-note, .habit-grid + .habit-note { font-size: 12px; margin-top: 10px; }

/* ============================ LONG-TERM (in hub) ============================ */
.longterm-wrap { display: flex; flex-direction: column; gap: 26px; }
.lt-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-2); }
.lt-section-title .icon { width: 16px; height: 16px; color: var(--accent); }
.cl-add-form { display: flex; flex-direction: column; gap: 7px; margin-top: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px; }
.cl-habit-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.cl-habit-check input { width: auto; }

/* ============================ SETTINGS ============================ */
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.set-nav { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 500; cursor: pointer; background: transparent; border: 1px solid transparent;
  font: inherit; text-align: left; transition: background var(--d-out), color var(--d-out); }
.set-nav .icon { width: 16px; height: 16px; color: var(--text-3); }
.set-nav:hover { background: var(--surface-2); color: var(--text); }
.set-nav.active { background: var(--accent-weak); color: var(--accent); }
.set-nav.active .icon { color: var(--accent); }
.settings-body { min-width: 0; }
.set-panel { display: none; animation: fade-up var(--d-in) var(--ease-out) both; }
.set-panel.active { display: block; }
.set-h { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.set-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow-1); margin-bottom: 14px; max-width: 720px; }
.set-card h3 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); margin-bottom: 10px; }
/* settings: create/inline forms fill their card (no narrow left-pinned input) */
.set-card .inline-form { justify-content: flex-start; }
.set-card .inline-form input[type="text"] { flex: 1 1 auto; min-width: 0; max-width: none; }
.set-list { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.set-row-main { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.set-row-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.set-form { display: flex; flex-direction: column; gap: 4px; }
.set-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.set-form-hint { font-size: 12px; color: var(--text-3); }
.set-form-hint.ok { color: var(--ok); }
.set-form-hint.err { color: var(--danger); }
.theme-choice, .accent-choice { display: flex; gap: 8px; }
.accent-swatch { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--sw); cursor: pointer;
  border: 2px solid var(--border); transition: transform var(--d-out); }
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.sel { border-color: var(--text); box-shadow: 0 0 0 3px var(--ring); }
/* warm editorial integrations (Stage C+ 1.11.2) — calm vertical stack, no boxy
   borders; soft left accent rule; serif heads. All theme tokens, works in 5 themes. */
.integration-cards { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.integration-card { background: var(--surface); border: none; border-left: 2px solid var(--accent-weak);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-1); }
.ic-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ic-head h3 { margin: 0; font-size: 16px; font-weight: 600;
  font-family: var(--font-display, var(--font-sans)); letter-spacing: -0.01em; }
.ic-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--accent-weak); color: var(--accent); flex: 0 0 auto; }
.integration-card > .muted { line-height: 1.5; margin: 2px 0 14px; }
.badge.soon { margin-left: auto; background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.about-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.about-brand .brand-mark { width: 36px; height: 36px; }
.about-name { font-size: 18px; font-weight: 600; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-xs); }

/* ============================ MOBILE CHROME ============================ */
.mobile-bar { display: none; }
.bottom-nav { display: none; }
.nav-scrim { display: none; }
.sidebar-head-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn.active-gear { background: var(--accent-weak); color: var(--accent); }

/* ============================ RESPONSIVE (mobile-first overrides) ============================ */
@media (max-width: 920px) {
  .checklist-layout { grid-template-columns: 1fr; }
  .checklist-rail { flex-direction: row; flex-wrap: wrap; }
  .checklist-rail .cl-tab { width: auto; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .integration-cards { grid-template-columns: 1fr; }
  .structure-wrap, .structure-wrap.with-panel, .tasks-layout.with-panel { grid-template-columns: 1fr; height: auto; }
  .kanban, .plan-groups { grid-template-columns: 1fr; }
  .graph-wrap { height: 62vh; }

  /* slide-in drawer sidebar */
  .shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 40; padding: 8px 12px; background: var(--surface);
    border-bottom: 1px solid var(--border); }
  .mobile-bar .brand { font-size: 15px; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 84vw; z-index: 60;
    transform: translateX(-100%); transition: transform var(--d-in) var(--ease-out);
    border-right: 1px solid var(--border); height: 100vh; }
  .sidebar.open { transform: none; }
  .nav-scrim { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 55;
    opacity: 0; transition: opacity var(--d-out); }
  .nav-scrim.show { opacity: 1; }
  .nav-scrim[hidden] { display: none; }
  .content { padding: 16px 14px 84px; }
  .tab { max-width: 100%; }
  /* bottom nav */
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px;
    color: var(--text-3); font-size: 10px; font-weight: 500; border-radius: var(--r-sm); min-height: 48px; justify-content: center; }
  .bn-item .icon { width: 20px; height: 20px; }
  .bn-item.active { color: var(--accent); }
  .segmented { display: flex; width: 100%; }
  .segmented .seg { flex: 1; justify-content: center; padding: 9px 8px; }
  /* touch targets */
  .icon-btn { width: 40px; height: 40px; }
  .nav-item, .set-nav, .cl-tab { min-height: 44px; }
  /* inputs must be >=16px so iOS Safari doesn't zoom on focus */
  input, select, textarea, .ksel-btn { font-size: 16px; }
  .toast-region { left: 12px; right: 12px; bottom: 76px; transform: none; }
  .toast { min-width: 0; max-width: 100%; }
  .cmdk { width: calc(100vw - 24px); }
  .ctx-menu { max-width: calc(100vw - 16px); }
  .side-panel { position: fixed; inset: 0; z-index: 70; border-radius: 0; }
  .tasks-layout.with-panel #task-panel, .structure-wrap.with-panel #node-panel { animation: slide-in-right var(--d-in) var(--ease-out) both; }
}

@media (min-width: 921px) {
  /* keep desktop sidebar always visible regardless of .open toggling */
  .sidebar { transform: none !important; }
}

/* ============================ v2: GRAPH SURFACE ============================ */
.graph-wrap { background: var(--canvas);
  background-image: radial-gradient(var(--grid) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.gnode-rect { fill: var(--node); stroke: var(--node-bd); }
.gnode:hover .gnode-rect { stroke: var(--accent); }
.gedge { stroke: var(--edge); }
.edge-arrow { fill: var(--edge); }
.gnode.type-idea .gnode-rect, .gnode.type-decision .gnode-rect { stroke: var(--accent); }
.gnode.type-task .gnode-rect { stroke: var(--node-task); }
.gnode.type-risk .gnode-rect { stroke: var(--amber); }
.gnode.type-goal .gnode-rect { stroke: var(--node-goal); stroke-width: 2; }
.gnode.type-milestone .gnode-rect { stroke: var(--node-milestone); }
.gnode.type-question .gnode-rect { stroke: var(--node-question); }
.gnode.type-resource .gnode-rect { stroke: var(--node-resource); }
/* node type icon + attribute badges (Stage C+ §5.1/§5.2) */
.gnode-type-icon { fill: none; stroke: var(--text-faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.gnode-badges-bg { fill: var(--surface-3); opacity: .9; }
.gnode-badge-text { fill: var(--text-dim); font-size: 10px; font-family: var(--font-sans); }
.gnode-badge-ic { fill: none; stroke: var(--text-dim); stroke-width: 1.5; }
.gnode-badge-due { fill: var(--amber); font-size: 10px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.gnode-badge-prog { fill: var(--accent); font-size: 10px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
/* configurable edges (Stage C+ §5.3) */
.gedge.edge-dashed { stroke-dasharray: 6 5; }

/* ---- notes on canvas (amber card, dashed amber tether) ---- */
.gnote { cursor: text; }
.gnote-rect { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.10)); }
.gnote-stripe { fill: var(--amber); }
.gnote-label { fill: var(--amber); font-size: 11px; font-weight: 700; font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: .04em; }
.gnote-text { fill: var(--text); font-size: 12.5px; font-family: var(--font-sans); }
.gedge-note { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .8; }
.note-edit-input { position: absolute; z-index: 6; font: inherit; font-size: 12.5px; line-height: 1.35;
  resize: none; border: 1px solid var(--amber); border-radius: 9px; padding: 8px 10px;
  background: var(--panel); color: var(--text); box-shadow: 0 0 0 3px var(--amber-soft); }

/* ============================ v2: STRUCTURE BOARD SWITCHER ============================ */
.struct-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.board-switch { display: inline-flex; align-items: center; gap: 8px; }
.board-proj { min-width: 180px; }
.board-proj.is-hidden { display: none; }
.board-proj select { padding: 7px 10px 7px 30px; }

/* ============================ v2: SHARED BOARD ============================ */
.shared-board { display: flex; flex-direction: column; gap: 16px; }
.shared-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shared-toolbar .muted { font-size: 13px; }
.shared-canvas { position: relative; background: var(--canvas); border: 1px solid var(--bd);
  border-radius: var(--radius); box-shadow: var(--shadow-s); min-height: 320px; padding: 28px;
  background-image: radial-gradient(var(--grid) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.shared-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.shared-link-line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 0; opacity: .55; }
.shared-clusters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 22px; }
.cluster-card { background: var(--node); border: 1px solid var(--node-bd); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; min-width: 180px; cursor: default;
  transition: transform var(--d-out) var(--ease-out), box-shadow var(--d-out), border-color var(--d-out); }
.cluster-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.cluster-card.connect-pick { cursor: pointer; border-color: var(--accent); }
.cluster-card.connect-src { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cluster-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-weight: 600; }
.cluster-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent); }
.cluster-meta { display: flex; gap: 14px; color: var(--text-dim); font-size: 12px; }
.cluster-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cluster-meta .icon { width: 13px; height: 13px; }
.shared-links-list h3 { margin-bottom: 10px; }
.board-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; max-width: 560px; }
.board-link-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--panel);
  border: 1px solid var(--bd); border-radius: var(--r-md); box-shadow: var(--shadow-s); }
.board-link-row .icon { width: 14px; height: 14px; color: var(--text-faint); }
.board-link-row .bl-from, .board-link-row .bl-to { font-weight: 500; }
.board-link-row .icon-btn { margin-left: auto; }

/* ============================ v2: HOME ============================ */
.tab-home { max-width: 1160px; }
.home-greet { font-size: 25px; }
.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.home-card { display: block; background: var(--panel); border: 1px solid var(--bd); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; color: var(--text); text-decoration: none;
  transition: transform var(--d-out) var(--ease-out), box-shadow var(--d-out), border-color var(--d-out); }
.home-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--bd2); }
.home-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.home-card-head h2 { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.home-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.home-ic .icon { width: 16px; height: 16px; }
.home-stat { font-size: 30px; font-weight: 660; letter-spacing: -.03em; line-height: 1.05; }
.home-sub { font-size: 12px; margin-top: 4px; }
.home-ring-row { display: flex; align-items: center; gap: 12px; }
.home-ring { width: 46px; height: 46px; }
.statusbar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); margin-bottom: 10px; }
.sb-seg { display: block; min-width: 0; }
.sb-seg.sb-todo { background: var(--text-faint); }
.sb-seg.sb-doing { background: var(--amber); }
.sb-seg.sb-done { background: var(--accent); }
.home-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-dim); }
.home-legend span { display: inline-flex; align-items: center; gap: 5px; }
.home-legend .dot { width: 8px; height: 8px; border-radius: var(--r-pill); }
.dot.sb-todo { background: var(--text-faint); } .dot.sb-doing { background: var(--amber); } .dot.sb-done { background: var(--accent); }
.home-chart-card { background: var(--panel); border: 1px solid var(--bd); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; }
.home-chart-sum { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.home-bars { width: 100%; height: 130px; display: block; margin-top: 8px; }
.hb-bar { fill: var(--accent); opacity: .85; }
.hb-label { fill: var(--text-faint); font-size: 7px; font-family: var(--font-sans); }
.home-period .seg { cursor: pointer; }

@media (max-width: 920px) {
  .home-grid { grid-template-columns: 1fr 1fr; }
  .shared-clusters { gap: 14px; }
  .struct-head { width: 100%; }
}
@media (max-width: 560px) { .home-grid { grid-template-columns: 1fr; } }

/* MCP connection card (Settings -> API) */
.mcp-url-row { margin: 10px 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcp-url, .mcp-token-value { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-3);
  border: 1px solid var(--bd); border-radius: var(--r-sm); padding: 3px 8px; word-break: break-all; }
.mcp-actions { margin: 8px 0; }
.mcp-token-reveal { margin: 8px 0; padding: 12px; border: 1px solid var(--accent);
  border-radius: var(--r-md); background: var(--accent-soft); }
.mcp-token-reveal .mcp-token-value { display: block; margin: 8px 0; padding: 8px 10px; user-select: all; }
.mcp-help { margin-top: 10px; }
.mcp-help summary { cursor: pointer; font-weight: 560; color: var(--text-dim); }
.mcp-help-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mcp-cmd { background: var(--surface-3); border: 1px solid var(--bd); border-radius: var(--r-sm);
  padding: 8px 10px; overflow-x: auto; font-size: 12px; }
.mcp-cmd code { font-family: var(--font-mono); white-space: pre; }

/* ============================ FINANCE (Stage D) ============================ */
.tab-finance { max-width: 1160px; }
.fin-readonly-note { display: flex; align-items: center; gap: 8px; background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); border-radius: var(--r-md);
  padding: 9px 12px; margin-bottom: 16px; font-size: 13px; }
.fin-readonly-note .icon { width: 15px; height: 15px; }
.fin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.fin-card { background: var(--panel); border: 1px solid var(--bd); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.fin-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.fin-card-head h2 { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.fin-card .home-ic.ic-exp { background: var(--amber-soft); color: var(--amber); }
.fin-card .home-ic.ic-rec { background: var(--surface-3); color: var(--text-dim); }
.fin-stat { font-size: 26px; font-weight: 660; letter-spacing: -.03em; line-height: 1.05; }
.fin-stat.pos { color: var(--accent); } .fin-stat.neg { color: var(--prio-high); }
.fin-sub { font-size: 12px; margin-top: 4px; }
.fin-card-net { border-color: color-mix(in srgb, var(--accent) 25%, var(--bd)); }
.fin-add-row { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }
.fin-section { margin-bottom: 22px; }
.fin-sec-title { margin-bottom: 10px; }
.fin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel);
  border: 1px solid var(--bd); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.fin-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--bd); white-space: nowrap; }
.fin-table td { padding: 9px 12px; border-bottom: 1px solid var(--bd); }
.fin-table tr:last-child td { border-bottom: none; }
.fin-table .num { text-align: right; white-space: nowrap; }
.fin-table .pos { color: var(--accent); } .fin-table .neg { color: var(--prio-high); }
.fin-table tr.fin-inactive { opacity: .55; }
.fin-table .icon-btn { width: 28px; height: 28px; }
.home-finance-card { display: block; background: var(--panel); border: 1px solid var(--bd); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; color: var(--text); text-decoration: none;
  transition: transform var(--d-out) var(--ease-out), box-shadow var(--d-out); }
.home-finance-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.hf-row { display: flex; gap: 40px; flex-wrap: wrap; }

/* finance modal (add/edit) */
.fin-modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 120; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 12vh; opacity: 0; transition: opacity var(--d-out) var(--ease-out); }
.fin-modal-backdrop.open { opacity: 1; }
.fin-modal { width: 420px; max-width: calc(100vw - 28px); background: var(--panel); border: 1px solid var(--bd2);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden;
  transform: scale(0.97); transition: transform var(--d-in) var(--ease-out); }
.fin-modal-backdrop.open .fin-modal { transform: none; }
.fin-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--bd); }
.fin-modal-head h2 { font-size: 15px; }
.fin-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow: auto; }
.fin-modal-body .fin-check { width: auto; }
.fin-modal-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

@media (max-width: 920px) { .fin-cards { grid-template-columns: 1fr 1fr; } .hf-row { gap: 20px; } }
@media (max-width: 560px) { .fin-cards { grid-template-columns: 1fr; } }

/* ============================ THEME GALLERY (Settings → Оформление) === */
.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; }
.theme-card { cursor: pointer; border: 1px solid var(--bd2); border-radius: var(--r-md); padding: 8px;
  background: var(--panel); color: var(--text); text-align: left; display: flex; flex-direction: column; gap: 8px;
  font: inherit; transition: transform var(--d-out) var(--ease-out), box-shadow var(--d-out), border-color var(--d-out); }
.theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.theme-card.active { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.tc-preview { height: 50px; border-radius: 8px; overflow: hidden; display: flex; border: 1px solid rgba(0,0,0,.12); }
.tc-side { width: 32%; height: 100%; }
.tc-main { flex: 1; padding: 7px 8px; display: flex; flex-direction: column; justify-content: space-between; }
.tc-bar { height: 6px; border-radius: 3px; width: 72%; }
.tc-dots { display: flex; gap: 5px; }
.tc-dot { width: 11px; height: 11px; border-radius: 50%; }
.tc-name { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tc-check { color: var(--accent); opacity: 0; transition: opacity var(--d-out); flex: 0 0 auto; }
.theme-card.active .tc-check { opacity: 1; }

/* heading display font — applied late so it wins even when the display-token
   resolves to serif (editorial / solid). Sans themes resolve to sans. */
.home-greet, .home-stat, .auth-brand { font-family: var(--font-display, var(--font-sans)); }

/* ============================ MINECRAFT THEME (full, blocky) ========== */
/* Cube faces via inset box-shadow (light top-left, dark bottom-right), thick
   borders, zero rounding, press-in buttons, tiled CSS background. No images,
   no idle work; interface stays readable + clickable. */
[data-theme="minecraft"] body {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 24px),
    var(--bg);
  image-rendering: pixelated;
}
[data-theme="minecraft"] .btn,
[data-theme="minecraft"] .card,
[data-theme="minecraft"] .home-card,
[data-theme="minecraft"] .home-finance-card,
[data-theme="minecraft"] .home-chart-card,
[data-theme="minecraft"] .fin-card,
[data-theme="minecraft"] .set-card,
[data-theme="minecraft"] .task-card,
[data-theme="minecraft"] .checklist-item,
[data-theme="minecraft"] .auth-card,
[data-theme="minecraft"] .cmdk,
[data-theme="minecraft"] .theme-card,
[data-theme="minecraft"] .side-panel,
[data-theme="minecraft"] input,
[data-theme="minecraft"] select,
[data-theme="minecraft"] textarea,
[data-theme="minecraft"] .badge,
[data-theme="minecraft"] .kbd,
[data-theme="minecraft"] .nav-item,
[data-theme="minecraft"] .brand-mark { border-radius: 0 !important; }

[data-theme="minecraft"] .btn,
[data-theme="minecraft"] .card,
[data-theme="minecraft"] .home-card,
[data-theme="minecraft"] .home-finance-card,
[data-theme="minecraft"] .home-chart-card,
[data-theme="minecraft"] .fin-card,
[data-theme="minecraft"] .set-card,
[data-theme="minecraft"] .auth-card,
[data-theme="minecraft"] .cmdk,
[data-theme="minecraft"] .theme-card {
  border: 3px solid var(--bd2);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.22), inset -3px -3px 0 rgba(0,0,0,.45);
}
[data-theme="minecraft"] .btn:active {
  box-shadow: inset -2px -2px 0 rgba(255,255,255,.18), inset 3px 3px 0 rgba(0,0,0,.5);
  transform: translateY(2px);
}
[data-theme="minecraft"] .btn-primary { border-color: #3f6b1f; }
[data-theme="minecraft"] .brand-mark {
  background: var(--accent); box-shadow: inset 2px 2px 0 rgba(255,255,255,.25), inset -3px -3px 0 rgba(0,0,0,.5);
}
[data-theme="minecraft"] .statusbar,
[data-theme="minecraft"] .habit-bar { border-radius: 0; border: 2px solid var(--bd2); }
[data-theme="minecraft"] .sidebar { border-right: 3px solid var(--bd2); }
[data-theme="minecraft"] input:focus,
[data-theme="minecraft"] select:focus,
[data-theme="minecraft"] textarea:focus { box-shadow: inset 2px 2px 0 rgba(0,0,0,.35); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
  }
  .skeleton::after { animation: none; }
  ::view-transition-old(main), ::view-transition-new(main),
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================================
   QWINS GLOBAL LAYER (Deploy 3) — one black-monochrome theme across every screen.
   Token values already flipped in tokens.css; this adds the qwins *character*:
   local Inter, fonariki, giant white headings, pills, gradient cards, white active
   nav, no number badges, collapsible sidebar, qwins login. Appended LAST so equal-
   specificity rules win over the older theme styling. CSP-safe; no idle work.
   ========================================================================== */

@font-face { font-family: "InterVar"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "InterVar"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

body { background:
  radial-gradient(1100px 600px at 16% -10%, #18181f 0%, rgba(8,8,11,0) 55%),
  radial-gradient(820px 560px at 102% 2%, #131319 0%, rgba(8,8,11,0) 50%),
  #08080b !important; color: var(--text); background-attachment: fixed; }
.shell, .content, #main { background: transparent; }
.content { position: relative; }
.content::before { content: ""; position: fixed; top: -180px; left: 30%; width: 680px; height: 440px;
  background: radial-gradient(ellipse, rgba(255,255,255,.06), transparent 70%); pointer-events: none; z-index: 0; }
.tab, .content > * { position: relative; z-index: 1; }

.tab-head h1, .home-greet, .set-h { font-family: var(--font-display); font-weight: 800;
  letter-spacing: -.035em; color: #fff; }
.tab-head h1, .home-greet { font-size: 40px; line-height: 1.02; letter-spacing: -.04em; }
.tab-head .muted, .tab-head p { color: var(--dim); }
.num, .tnum { font-variant-numeric: tabular-nums; }

.home-card, .home-finance-card, .home-chart-card, .fin-card, .set-card, .card,
.task-card, .checklist-item, .cmdk, .side-panel, .integration-card, .plan-card,
.habit-card, .cl-card, .kanban-col, .fin-table-wrap {
  /* v1.16.7 — premium frosted glass: translucent fill + backdrop blur over the
     layered dark backdrop, hairline edge + top highlight + soft deep shadow. */
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
  border: 1px solid var(--glass-bd); border-radius: 18px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--d-out) var(--ease-out), box-shadow var(--d-out) var(--ease-out), border-color var(--d-out); }
.home-card:hover, .fin-card:hover, .card:hover, .task-card:hover, .home-finance-card:hover {
  /* premium soft lift + deeper float shadow + brighter glass edge */
  transform: translateY(-3px); border-color: rgba(255,255,255,.22); box-shadow: var(--shadow-float); }
/* depth hierarchy: kanban columns recede into a "well" so the task-cards inside
   them read as raised. Columns stay dark; cards (above) use the lighter fill. */
.kanban-col { background: rgba(8,8,11,.42) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5) !important; border-color: rgba(255,255,255,.05) !important; }
.home-stat, .fin-stat, .stat-num { color: #fff; font-weight: 800; letter-spacing: -.03em; }
/* floating surfaces (menus / modals / panels / toasts) — stronger frosted glass */
.cmdk, .ctx-menu, .side-panel, .toast {
  background: var(--glass-2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid var(--glass-bd) !important; box-shadow: var(--shadow-float) !important; }

/* sidebar (qwins) */
.sidebar { background: rgba(10,10,13,.55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05);
  border-right: 1px solid rgba(255,255,255,.08); transition: width .24s var(--ease-std); }
.brand { font-weight: 800; letter-spacing: -.03em; }
.brand-mark { background: #fff !important; color: #000 !important; }
.nav-item { color: var(--dim); border-radius: var(--r-pill); font-weight: 500; }
.nav-item:hover { background: var(--card-2); color: #fff; }
.nav-item:hover .icon { color: #fff; }
.nav-item.active { background: #fff !important; color: #000 !important; font-weight: 600; }
.nav-item.active .icon { color: #000 !important; }
.nav-item.active::before { display: none; }
.nav-key, .nav-item .kbd { display: none !important; }

/* collapsible sidebar */
#nav-collapse { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: grid;
  place-items: center; color: var(--faint); cursor: pointer; border: 1px solid var(--line);
  background: transparent; transition: background .16s, color .16s; flex: none; }
#nav-collapse:hover { background: var(--card-hi); color: #fff; }
.shell.snav .sidebar { width: 74px; }
.shell.snav .sidebar .brand,
.shell.snav .nav-item span:not(.tip),
.shell.snav .account .account-email,
.shell.snav .cmdk-hint span:not(.kbd),
.shell.snav .select-wrap { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
.shell.snav .nav-item { justify-content: center; }
.shell.snav #nav-collapse svg { transform: rotate(180deg); }
.nav-item .tip { position: absolute; left: 70px; top: 50%; transform: translateY(-50%);
  background: var(--card-hi); color: #fff; padding: 5px 9px; border-radius: 7px; font-size: 12px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .14s; box-shadow: var(--shadow-2);
  z-index: 30; border: 1px solid var(--line); }
.shell:not(.snav) .nav-item .tip { display: none; }
.shell.snav .nav-item:hover .tip { opacity: 1; }

/* inputs (qwins dark) */
input, select, textarea { background: var(--card-2) !important; border: 1px solid var(--line) !important; color: #fff !important; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--line-2) !important; box-shadow: var(--ring); }

/* login (qwins) */
.auth { background: #000; position: relative; overflow: hidden; }
.auth::before { content: ""; position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 420px; background: radial-gradient(ellipse, rgba(255,255,255,.09), transparent 70%); pointer-events: none; }
.auth-card { background: linear-gradient(160deg, var(--card-2), var(--card)) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-3);
  position: relative; z-index: 1; }
.auth-brand { font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: #fff; }
.auth-mark { background: #fff !important; color: #000 !important; }
.auth-card .btn-primary { background: #fff; color: #000; border-color: #fff; }

/* structure canvas (monochrome flow) */
.flow { stroke-dasharray: 5 7; animation: flow-dash 1.1s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -24; } }
.graph-wrap, .structure-canvas, .canvas-wrap, .graph {
  background:
    radial-gradient(1100px 640px at 70% 18%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(circle at 1.5px 1.5px, var(--grid-dot) 1.5px, transparent 0) 0 0 / 26px 26px,
    #000 !important; }
.edge-arrow { fill: var(--line-2); } .edge-line { stroke: var(--line-2); }

/* primary buttons white-on-black (Phase-3 tactile rules still apply) */
.btn-primary { background: #fff; color: #000; border-color: #fff; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* QWINS-EDGES-VISIBLE — structure links/arrows were stroked with --text-faint
   (#5a5a5f), invisible on the #000 canvas. Recolour to light monochrome. Colour
   ONLY — geometry (paths, refX, marker size) untouched. */
.gedge { stroke: rgba(255,255,255,.5); }
.edge-arrow { fill: rgba(255,255,255,.55); }
.gedge:hover, .gedge.selected { stroke: rgba(255,255,255,.85); }
.gedge.selected ~ .edge-arrow, .edge-arrow.selected { fill: rgba(255,255,255,.85); }
.gedge-note { stroke: rgba(255,255,255,.34) !important; }   /* note dashed — dimmer but visible */
.gedge.flow, .edge-flow { stroke: rgba(255,255,255,.7); }    /* running-dash flow reads on black */
.gedge-label { fill: var(--dim); paint-order: stroke; stroke: #000; stroke-width: 3px; }  /* halo = bg */
.gnote-label, .gnote-text { fill: var(--dim); }
/* minimap viewport box visible on black */
.minimap-view { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.5); }

/* one theme now → hide old theme/accent switcher + light/dark toggle */
.theme-toggle, .auth-theme, #theme-toggle, #theme-toggle-m,
.theme-gallery, .accent-choice { display: none !important; }

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

/* QWINS-NODES-READABLE — light cards + dark text on the #000 canvas (dark cards
   were illegible). Node dims (NODE_W/H) unchanged -> arrow anchoring intact; this
   is fill/text/marker colour only. Hover = shadow change, NOT a CSS transform (the
   node <g> is placed by a translate() ATTRIBUTE that a transform would clobber). */
.gnode-rect { fill: url(#nodeGrad); stroke: rgba(255,255,255,.16); stroke-width: 1;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); transition: filter var(--d-out); }
.gnode:hover .gnode-rect { stroke: rgba(255,255,255,.4); filter: drop-shadow(0 7px 20px rgba(0,0,0,.62)); }
.gnode-text { fill: #16161a; font-size: 14px; font-weight: 650; }
.gnode-typedot { stroke: rgba(0,0,0,.18); stroke-width: 1; }
.gnode-typelabel { fill: #6a6a70; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-family: var(--font-sans); pointer-events: none; }
.type-dot-idea { fill: #d8a23a; } .type-dot-task { fill: #3fa45f; } .type-dot-risk { fill: #d8453a; }
.type-dot-decision { fill: #3b82f6; } .type-dot-goal { fill: #3b82f6; } .type-dot-milestone { fill: #3fa45f; }
.type-dot-question { fill: #a78bfa; } .type-dot-resource { fill: #8b8b90; }
.gnode.selected .gnode-rect { stroke: #ffffff; stroke-width: 2; }
.gnode.selected .gnode-ring { stroke: #fff; opacity: .55; }
.gnode.status-done .gnode-rect { fill: url(#nodeGrad); stroke: #3fa45f; stroke-width: 1.5; }
.gnode.status-done .gnode-text { fill: #2f7d48; }
.gnode.status-struck { opacity: .5; }
.gnode.status-struck .gnode-strike { stroke: #16161a; }
.gnode.status-highlight .gnode-rect { stroke: #ffffff; stroke-width: 2.5;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,255,255,.45)); }
.gnode-badge-text { fill: #4a4a52; } .gnode-badge-due { fill: #9a6a12; } .gnode-badge-prog { fill: #2f7d48; }
.gnode-badge-ic { stroke: #4a4a52; }
.gnote-rect { fill: url(#noteGrad); stroke: #d9b95a; stroke-width: 1; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.gnote-stripe { fill: #b8860b; }
.gnote-label { fill: #8a5a0a; font-weight: 800; }
.gnote-text { fill: #3a2e10; }

/* ===== Block calibre (Phase B §1) — large light theme card with blue accent.
   Same readable light fill as a node; bigger, with a blue ring + «БЛОК» label +
   visible description. Geometry (W/H) is per-node (stored on the model, read by
   measuredHalf in structure.js), so edges anchor to the real block edge. ===== */
.gblock-rect { fill: url(#nodeGrad); stroke: rgba(63,127,216,.55); stroke-width: 2;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.6)); transition: filter var(--d-out), stroke var(--d-out); }
.gnode:hover .gblock-rect { stroke: rgba(63,127,216,.85); filter: drop-shadow(0 10px 30px rgba(0,0,0,.66)); }
.gblock-ring { fill: none; stroke: rgba(63,127,216,.18); stroke-width: 6; }   /* soft blue halo */
.gblock-dot { fill: #3f7fd8; stroke: rgba(0,0,0,.18); stroke-width: 1; }
.gblock-klabel { fill: #3f7fd8; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; font-family: var(--font-sans); pointer-events: none; }
.gblock-title { fill: #16161a; font-size: 17px; font-weight: 750; font-family: var(--font-sans); }
.gblock-text { fill: #44444c; font-size: 12.5px; font-weight: 500; font-family: var(--font-sans); }
.gnode.selected .gblock-rect { stroke: #ffffff; stroke-width: 2.5; }
.gnode.status-done .gblock-rect { stroke: #3fa45f; }
.gnode.status-struck { opacity: .5; }

/* ===== Task-card on canvas (Phase C-canvas) — dark-green card (etalon), real
   checkbox (checklist) / bullet (note); checkbox toggles the bound Task, synced
   with «Задачи». Variable-size → _taskW/_taskH feed measuredHalf (edges anchor). */
.gtask-rect { fill: #0f1b12; stroke: #2fa35e; stroke-width: 1.5;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); transition: stroke var(--d-out), filter var(--d-out); }
.gnode:hover .gtask-rect { stroke: #45c074; filter: drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
.gtask-dot { fill: #2fa35e; }
.gtask-klabel { fill: #2fa35e; font-size: 9px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; font-family: var(--font-sans); pointer-events: none; }
.gtask-title { fill: #cfe9d8; font-size: 13px; font-weight: 650; font-family: var(--font-sans); }
.gtask-text { fill: #9ec6ad; font-size: 12px; font-family: var(--font-sans); }
.gtask-bullet { fill: #2fa35e; font-size: 16px; font-weight: 800; }
/* checkbox */
.gtask-check { cursor: pointer; }
.gtask-box { fill: transparent; stroke: #2fa35e; stroke-width: 1.6; transition: fill var(--d-out); }
.gtask-check:hover .gtask-box { fill: rgba(47,163,94,.18); }
.gtask-check.checked .gtask-box { fill: #2fa35e; }
.gtask-tick { fill: none; stroke: #0f1b12; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* done state: strike + dim */
.gtask-title.done, .gtask-text.done { fill: #5e8a6e; text-decoration: line-through; }
/* priority pill (high/med/low) — reuses the kanban palette (--prio-* tokens) so the
   canvas card and the «Задачи» board read the same; SVG fill resolves the CSS vars */
.gtask-prio-bg { stroke: none; pointer-events: none; }
.gtask-prio-dot { pointer-events: none; }
.gtask-prio-text { font-size: 10.5px; font-weight: 700; font-family: var(--font-sans);
  letter-spacing: .01em; pointer-events: none; }
.gtask-prio-high .gtask-prio-bg { fill: var(--prio-high-soft); }
.gtask-prio-high .gtask-prio-dot, .gtask-prio-high .gtask-prio-text { fill: var(--prio-high); }
.gtask-prio-med .gtask-prio-bg { fill: var(--prio-med-soft); }
.gtask-prio-med .gtask-prio-dot, .gtask-prio-med .gtask-prio-text { fill: var(--prio-med); }
.gtask-prio-low .gtask-prio-bg { fill: rgba(154,154,160,.16); }
.gtask-prio-low .gtask-prio-dot, .gtask-prio-low .gtask-prio-text { fill: var(--prio-low); }

/* §3 collapse/expand toggle — small −/+ circle at a card's bottom-right (etalon
   .col). Dark chip, white sign; only rendered when the node has tree-children. */
.gnode-collapse { cursor: pointer; }
.gnode-collapse-bg { fill: #1c1c1f; stroke: rgba(255,255,255,.28); stroke-width: 1;
  transition: fill var(--d-out), stroke var(--d-out); }
.gnode-collapse:hover .gnode-collapse-bg { fill: #2a2a30; stroke: rgba(255,255,255,.55); }
.gnode-collapse-sign { fill: #fff; font-size: 14px; font-weight: 700; font-family: var(--font-sans);
  text-anchor: middle; dominant-baseline: central; pointer-events: none; }

/* ===== number inputs: hide native spinners (↕) — finance forms (sale/expense/
   recurring) build <input type=number step=any> in finance.js. Keystroke entry
   unchanged; just removes the up/down micro-buttons the owner found annoying. ===== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }