/* writekit studio — the plotter room after dark. */

body.app-body {
  background: var(--ink-950);
  color: var(--paper-50);
  overflow: hidden;
  height: 100vh;
}
.app-body .monogram { border-color: var(--brass-400); color: var(--paper-50); }

.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); height: 100vh; }

/* Rail */
.rail {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ink-850);
  border-right: 1px solid var(--ink-700);
  padding: 22px 0 18px;
}
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 0 22px; text-decoration: none; color: var(--paper-50); font: 600 15px/1 var(--sans); }
.rail-brand .monogram { width: 28px; height: 28px; font-size: 19px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; padding: 34px 12px 0; }
.rail-nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 14px;
  border-radius: var(--r-control);
  color: var(--slate-300); text-decoration: none; font-size: 14px;
}
.rail-nav a:hover { color: var(--paper-50); background: var(--ink-800); }
.rail-nav a.is-active { color: var(--paper-50); background: var(--ink-800); font-weight: 500; }
.rail-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--verd-400); }
.rail-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.rail-nav a.is-active .rail-dot { background: var(--verd-400); opacity: 1; }
.rail-foot { margin-top: auto; padding: 18px 22px 0; border-top: 1px solid var(--ink-700); display: grid; gap: 8px; font-size: 9px; color: var(--slate-300); }
.rail-status { display: inline-flex; align-items: center; gap: 7px; font: 400 9px/1 var(--mono); letter-spacing: 0.08em; }

/* Stage */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  flex: 0 0 auto;
  height: var(--topbar);
  display: flex; align-items: center; gap: 18px;
  padding: 0 24px;
  background: var(--ink-850);
  border-bottom: 1px solid var(--ink-700);
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar h1 { font: 600 15px/1.2 var(--sans); letter-spacing: -0.01em; }
.topbar .crumb { font: 400 9px/1 var(--mono); letter-spacing: 0.06em; color: var(--slate-300); white-space: nowrap; }
.topbar .back { color: var(--slate-300); text-decoration: none; font-size: 18px; line-height: 1; }
.topbar .back:hover { color: var(--paper-50); }
.view { flex: 1 1 auto; min-height: 0; overflow: auto; }
.view:focus { outline: none; }

/* Topbar variants */
.doc-title-input {
  width: min(250px, 32vw);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  color: var(--paper-50);
  font: 600 14px/1 var(--sans);
  padding: 7px 8px;
}
.doc-title-input:hover { border-color: var(--ink-700); }
.doc-title-input:focus { outline: none; border-color: var(--verd-500); background: var(--ink-800); }
.saved { font: 400 9px/1 var(--mono); letter-spacing: 0.06em; color: var(--slate-300); }

.app-body .btn-quiet { border-color: var(--ink-600); color: var(--paper-50); }
.app-body .btn-quiet:hover { background: var(--ink-800); }
.app-body .btn-secondary { border-color: var(--ink-600); color: var(--paper-50); }
.app-body .btn-secondary:hover { background: var(--ink-800); }
.text-btn { background: none; border: 0; color: var(--verd-300); font: 500 12px/1 var(--sans); padding: 4px 0; }
.text-btn:hover { color: var(--verd-400); text-decoration: underline; text-underline-offset: 3px; }

/* Dashboard */
.dash { padding: 30px 32px 48px; max-width: 1440px; margin: 0 auto; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.dash-date { font: 400 9px/1 var(--mono); letter-spacing: 0.1em; color: var(--slate-300); }
.dash-title { margin-top: 12px; font: 600 30px/1.15 var(--sans); letter-spacing: -0.02em; }
.dash-sub { margin-top: 8px; font-size: 13px; color: var(--slate-300); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 24px; margin-top: 26px; }
.card { background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: var(--r-panel); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.card-head .mono { font-size: 9px; letter-spacing: 0.1em; color: var(--slate-300); }

.continue-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; padding: 20px; min-height: 300px; }
.continue-thumb { background: var(--paper-50); height: 238px; overflow: hidden; border: 1px solid var(--ink-700); }
.continue-thumb svg { display: block; width: 100%; height: auto; }
.continue-main { display: flex; flex-direction: column; min-width: 0; }
.continue-kicker { font: 400 9px/1 var(--mono); letter-spacing: 0.1em; color: var(--plum-300); }
.continue-name { margin-top: 10px; font: 600 25px/1.15 var(--sans); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-meta { margin-top: 10px; font: 400 9px/1.5 var(--mono); letter-spacing: 0.05em; color: var(--slate-300); }
.continue-stats { display: flex; gap: 36px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink-700); }
.continue-stats b { display: block; margin-top: 6px; font: 500 15px/1 var(--sans); }
.continue-stats span { font: 400 8px/1 var(--mono); letter-spacing: 0.08em; color: var(--slate-300); }
.continue-actions { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 20px; }

.plotter-card { padding-bottom: 20px; }
.plotter-status { display: flex; align-items: center; gap: 8px; padding: 0 20px; margin-top: 18px; font: 400 9px/1 var(--mono); letter-spacing: 0.06em; color: var(--slate-300); }
.plotter-name { padding: 0 20px; margin-top: 8px; font: 500 20px/1.2 var(--sans); }
.plotter-rows { display: grid; gap: 8px; padding: 18px 20px 0; }
.plotter-row { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: baseline; font-size: 12px; }
.plotter-row span:first-child { font: 400 8px/1 var(--mono); letter-spacing: 0.08em; color: var(--slate-300); }
.plotter-empty { padding: 18px 20px 0; font-size: 12px; line-height: 1.6; color: var(--slate-300); }
.plotter-empty .btn { margin-top: 14px; }

.recent-card { padding-bottom: 8px; }
.recent-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.recent-table th { padding: 8px 20px; text-align: left; font: 400 8px/1 var(--mono); letter-spacing: 0.08em; color: var(--slate-300); border-bottom: 1px solid var(--ink-700); font-weight: 400; }
.recent-table td { padding: 13px 20px; border-bottom: 1px solid var(--ink-700); font-size: 12px; color: var(--slate-300); }
.recent-table td:first-child { color: var(--paper-50); font-weight: 500; }
.recent-table tr:hover td { background: var(--ink-800); }
.recent-table .num { font-family: var(--mono); font-size: 10px; }
.recent-table button { background: none; border: 0; color: var(--slate-300); font-size: 14px; }
.recent-table button:hover { color: var(--danger); }

.hands-card { padding-bottom: 16px; }
.hand-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--ink-700); }
.hand-thumb { width: 64px; height: 44px; background: var(--paper-50); overflow: hidden; border: 1px solid var(--ink-700); }
.hand-thumb svg { width: 100%; height: 100%; display: block; }
.hand-row b { display: block; font-size: 12px; font-weight: 500; color: var(--paper-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-row span { font: 400 8px/1.6 var(--mono); letter-spacing: 0.05em; color: var(--slate-300); }
.hand-row .hand-count { font: 400 9px/1 var(--mono); color: var(--slate-300); }
.capture-row { display: flex; align-items: center; padding: 14px 20px; }
.capture-row a { color: var(--verd-300); font: 500 12px/1 var(--sans); text-decoration: none; }
.capture-row a:hover { text-decoration: underline; }

.empty-state { padding: 56px 44px; border: 1px dashed var(--ink-600); border-radius: var(--r-panel); background: linear-gradient(180deg, var(--ink-850), var(--ink-900)); }
.empty-state .mono { font-size: 9px; letter-spacing: 0.1em; color: var(--slate-300); }
.empty-state h2 { margin-top: 14px; font: 400 clamp(28px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -0.02em; }
.empty-state p { margin-top: 14px; max-width: 34rem; color: var(--slate-300); font-size: 14px; line-height: 1.65; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.stat-inline { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 22px; }
.stat-inline div { border-left: 1px solid var(--ink-700); padding-left: 14px; }
.stat-inline b { display: block; font: 500 18px/1 var(--sans); }
.stat-inline span { display: block; margin-top: 6px; font: 400 8px/1 var(--mono); letter-spacing: 0.08em; color: var(--slate-300); }


/* global dark form language (capture, settings, plotter, inspector) */
.app-body .field > label { color: var(--paper-50); }
.app-body .note { color: var(--slate-300); }
.app-body .check { color: var(--slate-300); }
.app-body .input, .app-body .select, .app-body .textarea {
  background: var(--ink-800); border-color: var(--ink-700); color: var(--paper-50);
}
.app-body .input:focus, .app-body .select:focus, .app-body .textarea:focus {
  border-color: var(--verd-400); box-shadow: 0 0 0 1px var(--verd-400);
}
.app-body .select {
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-300) 50%), linear-gradient(135deg, var(--slate-300) 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.app-body .color { width: 100%; height: 34px; padding: 3px; border: 1px solid var(--ink-700); border-radius: var(--r-control); background: var(--ink-800); cursor: pointer; }
.app-body code { font-family: var(--mono); font-size: 0.92em; color: var(--brass-300); }
.app-body .capture-note code { display: inline-block; line-height: 1.6; word-break: break-word; }

/* Studio */
.studio {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 310px;
  grid-template-rows: minmax(0, 1fr) 36px;
  height: 100%;
  min-height: 0;
}
.pages-panel { grid-column: 1; grid-row: 1; background: var(--ink-850); border-right: 1px solid var(--ink-700); display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 18px 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 12px; }
.panel-head .mono { font-size: 8px; letter-spacing: 0.1em; color: var(--slate-300); }
.doc-list { display: grid; gap: 2px; }
.doc-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-control); border: 1px solid transparent; background: none; color: inherit; text-align: left; }
.doc-item:hover { background: var(--ink-800); }
.doc-item.is-active { background: var(--ink-800); border-color: var(--verd-500); }
.doc-item .doc-glyph { width: 30px; height: 40px; border: 1px solid var(--ink-700); background: var(--paper-200); }
.doc-item b { display: block; font-size: 11px; font-weight: 500; color: var(--paper-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item span { font: 400 8px/1.5 var(--mono); color: var(--slate-300); }
.panel-sep { height: 1px; background: var(--ink-700); margin: 14px 6px; }
.panel-block { display: grid; gap: 4px; padding: 0 6px 14px; }
.panel-block .mono { font-size: 8px; letter-spacing: 0.1em; color: var(--slate-300); }
.panel-block b { font: 500 12px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-meta { font: 400 9px/1.5 var(--mono); color: var(--slate-300); }
.panel-foot { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--ink-700); }
.panel-foot .mono { font-size: 8px; line-height: 1.6; color: var(--slate-300); }

.canvas { grid-column: 2; grid-row: 1; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ink-950); overflow: hidden; }
.canvas-head { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 16px; color: var(--slate-300); }
.canvas-head .mono { font-size: 8px; letter-spacing: 0.08em; white-space: nowrap; }
#pageLabel { flex: 0 0 auto; margin-left: auto; }
.format-bar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-width: 0; }
.format-bar[hidden] { display: none; }
.fmt-btn {
  min-width: 25px; height: 25px; padding: 0 5px;
  border: 1px solid var(--ink-600); border-radius: 4px;
  background: none; color: var(--slate-300);
  font-size: 11px; line-height: 1;
}
.fmt-btn:hover { color: var(--paper-50); border-color: var(--slate-500); }
.fmt-btn.is-active { color: var(--ink-950); background: var(--verd-400); border-color: var(--verd-400); }
.fmt-btn sup, .fmt-btn sub { font-size: 8px; }
.fmt-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--ink-600); }
.fmt-select {
  height: 25px; padding: 0 18px 0 5px; border: 1px solid var(--ink-600); border-radius: 4px;
  background: var(--ink-800); color: var(--slate-300); font-size: 9px;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-300) 50%), linear-gradient(135deg, var(--slate-300) 50%, transparent 50%);
  background-position: calc(100% - 10px) 10px, calc(100% - 6px) 10px;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.fmt-color { width: 28px; height: 25px; padding: 1px; border: 1px solid var(--ink-600); border-radius: 4px; background: var(--ink-800); cursor: pointer; }
.zoom-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.zoom-controls button { width: 22px; height: 22px; border: 1px solid var(--ink-600); background: none; color: var(--slate-300); border-radius: 4px; line-height: 1; }
.zoom-controls button:hover { color: var(--paper-50); border-color: var(--slate-500); }
.progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink-700); z-index: 5; }
.progress i { display: block; height: 100%; width: 0; background: var(--verd-400); transition: width 180ms linear; }
.paper-scroll {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 20px 60px;
  display: flex; align-items: flex-start; justify-content: center;
  background-image: linear-gradient(rgba(22, 37, 59, 0.7) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 37, 59, 0.7) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 0;
}
.paper-stack { transform-origin: top center; zoom: 0.7; }
.paper {
  position: relative;
  background: var(--paper-50);
  color: var(--ink-900);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.paper.editor {
  outline: none; white-space: pre-wrap; overflow-wrap: break-word;
  font-family: "Georgia", "Iowan Old Style", serif;
  padding: 20mm;
  width: 210mm; min-height: 297mm;
}
.paper.editor:empty::before { content: "Start typing, or paste a document…"; color: #a49c8b; }
.paper.editor p, .paper.editor h1, .paper.editor h2, .paper.editor h3, .paper.editor h4,
.paper.editor li { margin: 0; padding: 0; white-space: pre-wrap; }
.paper.editor h1 { font-size: 1.85em; line-height: 1.1; font-weight: 600; }
.paper.editor h2 { font-size: 1.55em; line-height: 1.15; font-weight: 600; }
.paper.editor h3 { font-size: 1.3em; line-height: 1.2; font-weight: 600; }
.paper.editor ul, .paper.editor ol { margin: 0; padding-left: 5mm; }
.paper.editor li { list-style-position: outside; }
.paper.editor [data-list]::before { content: attr(data-marker) "  "; color: #7f786b; }
.paper.editor sup, .paper.editor sub { line-height: 0; }
.paper.editor .rich-pagebreak {
  display: block; margin: 3mm 0; padding: 2mm 0;
  border-top: 1px dashed #b9b0a0; color: #9a9284;
  font: 400 8px/1 var(--mono); letter-spacing: 0.08em; user-select: none;
}
.paper.editor .rich-textbox { border: 0.3mm solid currentColor; padding: 2mm; margin: 3mm 0; background: rgba(255,255,255,.15); }
.paper.editor .rich-textbox p { margin: 0; }
.paper.editor .rich-shape { margin: 3mm auto; border: 0.3mm solid currentColor; width: 40mm; height: 18mm; }
.paper.editor .rich-shape[data-kind="ellipse"] { border-radius: 50%; }
.paper.editor .rich-shape[data-kind="line"] { height: 0; border-left: 0; transform: rotate(-12deg); }
.paper.editor .rich-shape[data-kind="arrow"]::after { content: "→"; display: block; text-align: right; color: currentColor; }
.paper.editor .rich-table { width: 100%; border-collapse: collapse; margin: 2mm 0; table-layout: fixed; }
.paper.editor .rich-table td, .paper.editor .rich-table th {
  border: 0.3mm solid currentColor; padding: 1.2mm 1.5mm; vertical-align: top;
  font-size: 0.92em; line-height: 1.35;
}
.paper.editor .rich-table td[data-shade] { background: var(--td-shade); }
.paper.editor .rich-table p { margin: 0; padding: 0; white-space: pre-wrap; }
.paper.editor .rich-image { margin: 4mm auto; text-align: center; }
.paper.editor .rich-image img { display: block; max-width: 100%; height: auto; margin: 0 auto; pointer-events: none; user-select: none; }
.paper.editor img.diagram { display: block; max-width: 100%; height: auto; margin: 4mm auto; pointer-events: none; user-select: none; }
.paper.editor[data-border="single"]::before,
.paper.editor[data-border="double"]::before,
.paper.editor[data-border="rounded"]::before { content: ""; position: absolute; inset: var(--inset); border: 0.35mm solid var(--frame-ink); pointer-events: none; }
.paper.editor[data-border="double"]::after { content: ""; position: absolute; inset: calc(var(--inset) + 1.5mm); border: 0.35mm solid var(--frame-ink); pointer-events: none; }
.paper.editor[data-border="rounded"]::before { border-radius: 4mm; }
.paper.preview { padding: 0; overflow: hidden; }
.paper.preview svg { width: 100%; height: auto; display: block; }
.inspect-toggle {
  display: none;
  position: absolute; right: 16px; bottom: 16px; z-index: 6;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ink-600); background: var(--ink-850); color: var(--paper-50); font-size: 12px;
}

.inspector { grid-column: 3; grid-row: 1; background: var(--ink-850); border-left: 1px solid var(--ink-700); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--ink-700); flex: 0 0 auto; }
.tab { position: relative; background: none; border: 0; padding: 13px 6px 11px; color: var(--slate-300); font-size: 10px; }
.tab:hover { color: var(--paper-50); }
.tab.is-active { color: var(--paper-50); font-weight: 500; }
.tab.is-active::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 2px; background: var(--verd-400); }
.sheet-close { display: none; margin-left: auto; color: var(--verd-300); }
.inspector-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; }
.tab-panel { display: grid; gap: 13px; }
.tab-panel[hidden] { display: none; }
.inspector .field > label { color: var(--paper-50); }
.inspector .input, .inspector .select {
  background: var(--ink-800); border-color: var(--ink-700); color: var(--paper-50); min-height: 34px; font-size: 12px;
}
.inspector .input:focus, .inspector .select:focus { border-color: var(--verd-400); box-shadow: 0 0 0 1px var(--verd-400); }
.inspector .select { background-image: linear-gradient(45deg, transparent 50%, var(--slate-300) 50%), linear-gradient(135deg, var(--slate-300) 50%, transparent 50%); background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.inspector .check { color: var(--slate-300); font-size: 11px; }
.inspector .note { color: var(--slate-300); }
.inspector .range .top { color: var(--slate-300); }
.inspector .range .top b { color: var(--paper-50); }
.inspector input[type="range"] { accent-color: var(--verd-400); }
.inspector .color { width: 100%; height: 34px; padding: 3px; border: 1px solid var(--ink-700); border-radius: 4px; background: var(--ink-800); cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-row b { display: block; font: 500 12px/1.3 var(--sans); }
.toggle-row .note { display: block; margin-top: 3px; font-size: 10px; }
.inspector .switch span { background: var(--ink-700); }
.inspector .switch input:checked + span { background: var(--verd-500); }
.inspector .switch span::after { background: var(--paper-50); }
.thumb-row { display: flex; align-items: center; gap: 10px; }
#diagramThumb { width: 64px; height: 44px; object-fit: contain; background: var(--paper-50); border: 1px solid var(--ink-700); border-radius: 4px; }
.status-block { display: grid; gap: 5px; margin-top: 6px; }
.status-block .mono { font-size: 8px; letter-spacing: 0.1em; color: var(--slate-300); }
.status { font-size: 11px; line-height: 1.5; color: var(--slate-300); white-space: pre-wrap; }
.status.ok { color: var(--verd-300); }
.status.bad { color: #e08595; }
.studio-status {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: center; gap: 18px;
  padding: 0 16px; background: var(--ink-950); border-top: 1px solid var(--ink-700);
  font-size: 9px; color: var(--slate-300); white-space: nowrap; overflow: hidden;
}
.studio-status .status-item { display: inline-flex; align-items: center; gap: 6px; }
.studio-status .status-right { margin-left: auto; }

/* Hands */
.section { padding: 30px 32px 48px; max-width: 1440px; margin: 0 auto; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading h1 { font: 600 28px/1.15 var(--sans); letter-spacing: -0.02em; }
.section-heading p { margin-top: 8px; max-width: 38rem; font-size: 13px; line-height: 1.6; color: var(--slate-300); }
.hands-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.hands-list { background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: var(--r-panel); padding: 12px; align-self: start; }
.hands-list .card-head { padding: 6px 6px 12px; }
.hand-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 9px; border-radius: var(--r-control); border: 1px solid transparent; background: none; color: inherit; text-align: left; }
.hand-item:hover { background: var(--ink-800); }
.hand-item.is-active { background: var(--ink-800); border-color: var(--verd-500); }
.hand-item .hand-thumb { width: 64px; height: 44px; }
.hand-item b { display: block; font-size: 12px; font-weight: 500; color: var(--paper-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-item span { font: 400 8px/1.5 var(--mono); color: var(--slate-300); }
.hand-detail { background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: var(--r-panel); padding: 24px; }
.hand-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.hand-detail-head h2 { font: 600 30px/1.1 var(--sans); letter-spacing: -0.02em; }
.hand-detail-head p { margin-top: 7px; font: 400 9px/1.5 var(--mono); color: var(--slate-300); }
.hand-specimen { margin-top: 20px; background: var(--paper-50); padding: 18px; max-height: 520px; overflow: hidden; }
.hand-specimen svg { display: block; width: 100%; height: auto; }
.hand-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.hand-meta { display: grid; gap: 0; }
.hand-meta div { padding: 12px 0; border-bottom: 1px solid var(--ink-700); }
.hand-meta span { font: 400 8px/1 var(--mono); letter-spacing: 0.08em; color: var(--slate-300); }
.hand-meta b { display: block; margin-top: 7px; font: 500 13px/1.3 var(--sans); word-break: break-word; }
.hand-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Capture */
.capture-layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 32px; margin-top: 26px; align-items: start; }
.capture-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.capture-tabs button { border: 1px solid var(--ink-700); background: none; color: var(--slate-300); border-radius: 999px; padding: 8px 14px; font-size: 12px; }
.capture-tabs button.is-active { background: var(--ink-800); color: var(--paper-50); border-color: var(--ink-600); }
.form-stack { display: grid; gap: 14px; }
.dropzone { display: grid; place-items: center; gap: 8px; min-height: 170px; border: 1px dashed var(--ink-600); border-radius: var(--r-panel); background: var(--ink-850); text-align: center; cursor: pointer; }
.dropzone.is-over { border-color: var(--verd-400); background: var(--ink-800); }
.dropzone .mark { width: 34px; height: 42px; border: 1px solid var(--verd-300); position: relative; }
.dropzone .mark::before, .dropzone .mark::after { content: ""; position: absolute; left: 7px; height: 1px; background: var(--verd-300); }
.dropzone .mark::before { top: 12px; width: 20px; }
.dropzone .mark::after { top: 18px; width: 13px; }
.dropzone b { font: 500 14px/1.3 var(--sans); }
.dropzone span { font-size: 11px; color: var(--slate-300); }
.template-preview { background: var(--paper-50); border: 1px solid var(--ink-700); min-height: 360px; max-height: 70vh; overflow: auto; padding: 16px; }
.template-preview svg { display: block; width: 100%; height: auto; }
.capture-note { border: 1px solid var(--ink-700); border-radius: var(--r-panel); background: var(--ink-850); padding: 18px; }
.capture-note h3 { font: 500 14px/1.3 var(--sans); }
.capture-note p { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--slate-300); }
.capture-note ol { margin: 12px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--slate-300); }
.capture-status { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--slate-300); }
.capture-status.ok { color: var(--verd-300); }
.capture-status.bad { color: #e08595; }

/* Plotter */
.plotter-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; margin-top: 26px; align-items: start; }
.queue-card { padding-bottom: 8px; }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--ink-700); align-items: center; }
.job b { font-size: 13px; font-weight: 500; }
.job .meta { margin-top: 5px; font: 400 8px/1.5 var(--mono); color: var(--slate-300); }
.job-actions { display: flex; gap: 6px; }
.job-actions a, .job-actions button { border: 1px solid var(--ink-600); background: none; color: var(--slate-300); border-radius: 4px; padding: 7px 9px; font-size: 10px; text-decoration: none; }
.job-actions a:hover, .job-actions button:hover { color: var(--paper-50); border-color: var(--slate-500); }
.device-card { padding: 20px; }
.device-card h2 { margin-top: 10px; font: 600 22px/1.2 var(--sans); }
.device-card .note { margin-top: 10px; color: var(--slate-300); font-size: 12px; line-height: 1.6; }
.device-card ol { margin: 16px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.8; color: var(--slate-300); }
.device-status { display: inline-flex; align-items: center; gap: 7px; font: 400 9px/1 var(--mono); letter-spacing: 0.08em; color: var(--slate-300); }

/* Settings */
.settings-layout { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.settings-card { padding: 22px; display: grid; gap: 16px; }
.settings-card h2 { font: 500 14px/1.3 var(--sans); }
.settings-card p { font-size: 12px; line-height: 1.6; color: var(--slate-300); }
.danger { color: #e08595; border-color: #733040 !important; }
.about-list { display: grid; gap: 10px; font-size: 12px; color: var(--slate-300); }
.about-list b { color: var(--paper-50); font-weight: 500; }

/* view transition */
.view-enter { animation: view-in 240ms var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 1180px) {
  .studio { grid-template-columns: 220px minmax(0, 1fr) 286px; }
  .dash-grid { grid-template-columns: 1fr; }
  .hands-layout, .capture-layout, .plotter-layout, .settings-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 60px; flex-direction: row; align-items: center; padding: 0 8px; border-right: 0; border-top: 1px solid var(--ink-700); }
  .rail-brand, .rail-foot { display: none; }
  .rail-nav { flex-direction: row; padding: 0; width: 100%; justify-content: space-around; gap: 0; }
  .rail-nav a { flex-direction: column; gap: 3px; min-height: 48px; padding: 6px 8px; font-size: 10px; justify-content: center; }
  .rail-nav a.is-active::before { left: 30%; right: 30%; top: 0; bottom: auto; width: auto; height: 2px; }
  .rail-dot { display: none; }
  .stage { padding-bottom: 60px; }
  .topbar { padding: 0 16px; }
  .dash, .section { padding: 22px 16px 40px; }
  .studio { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 36px; }
  .pages-panel { display: none; }
  .canvas { grid-column: 1; }
  .inspector {
    position: fixed; left: 0; right: 0; bottom: 100px; z-index: 55;
    max-height: calc(62vh - 44px); border-left: 0; border-top: 1px solid var(--ink-600);
    border-radius: 16px 16px 0 0;
    transform: translateY(120%); transition: transform 180ms var(--ease);
    box-shadow: 0 -20px 50px rgba(0,0,0,.4);
  }
  .sheet-close { display: inline-flex; }
  .inspector.is-open { transform: translateY(0); }
  .inspect-toggle { display: inline-flex; }
  .continue-card { grid-template-columns: 120px minmax(0, 1fr); min-height: 240px; }
  .continue-thumb { height: 170px; }
  .hand-grid { grid-template-columns: 1fr; }
  .paper-stack { zoom: 0.62; }
}
@media (max-width: 620px) {
  .topbar { height: 56px; gap: 10px; }
  .topbar .crumb, .hide-sm { display: none; }
  .dash-head { flex-direction: column; align-items: flex-start; }
  .continue-card { grid-template-columns: 1fr; }
  .continue-thumb { height: 220px; }
  .continue-stats { gap: 20px; }
  .recent-table th:nth-child(2), .recent-table td:nth-child(2),
  .recent-table th:nth-child(3), .recent-table td:nth-child(3) { display: none; }
  .hand-row { grid-template-columns: 44px minmax(0, 1fr); }
  .hand-row .hand-count { display: none; }
  .paper-stack { zoom: 0.5; }
  .studio-status .status-item:nth-child(3) { display: none; }
  .studio-status .status-right { display: none; }
}