:root {
  --bg: #121210;
  --panel: #191917;
  --panel-2: #20201d;
  --panel-3: #272722;
  --line: #484841;
  --line-soft: #383833;
  --text: #f0efe7;
  --muted: #b2b1a7;
  --faint: #8c8c82;
  --amber: #e3aa4d;
  --amber-bright: #f4c46e;
  --amber-dim: rgba(227, 170, 77, 0.14);
  --blue: #68a9c2;
  --coral: #cd7d62;
  --sidebar-left: 276px;
  --sidebar-right: 360px;
  --topbar: 70px;
  --toolbar: 52px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.app-shell { width: 100vw; height: 100vh; min-width: 1080px; }

.topbar {
  height: var(--topbar);
  display: grid;
  grid-template-columns: var(--sidebar-left) 1fr var(--sidebar-right);
  border-bottom: 1px solid var(--line);
  background: #171715;
  position: relative;
  z-index: 20;
}

.brand, .project-title, .top-actions { display: flex; align-items: center; }
.brand { padding: 0 18px; gap: 11px; border-right: 1px solid var(--line); }
.brand-mark { width: 32px; height: 36px; border: 1px solid #8b6a36; display: grid; place-items: center; position: relative; color: var(--amber-bright); font: 500 17px "DM Mono", monospace; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: #171715; width: 8px; height: 8px; border: solid #8b6a36; transform: rotate(45deg); }
.brand-mark::before { top: -5px; left: -5px; border-width: 0 1px 1px 0; }
.brand-mark::after { right: -5px; bottom: -5px; border-width: 1px 0 0 1px; }
.brand h1 { font-size: 13px; letter-spacing: 2.2px; margin: 0 0 3px; }
.brand h1 span { color: var(--amber); font-weight: 500; }
.brand p { color: var(--faint); margin: 0; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }

.project-title { padding: 0 18px; gap: 12px; }
.project-title strong { font-size: 14px; font-weight: 600; }
.eyebrow { display: block; color: var(--faint); font-size: 11px; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 4px; }
.text-icon { border: 0; color: var(--faint); background: none; padding: 6px; }
.text-icon:hover { color: var(--amber); }

.top-actions { justify-content: flex-end; gap: 8px; padding: 0 16px; border-left: 1px solid var(--line); }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 4px; display: grid; place-items: center; color: var(--muted); }
.icon-button:hover { color: var(--text); border-color: #55554d; }
.icon-button.small { width: 26px; height: 26px; }
.avatar { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: #3c3224; border: 1px solid #72572f; color: var(--amber-bright); border-radius: 50%; font-size: 10px; font-weight: 700; transition: background .15s, border-color .15s, transform .15s; }
.avatar:hover, .avatar:focus-visible { background: #4a3c29; border-color: var(--amber); outline: none; transform: translateY(-1px); }

.main-layout { height: calc(100vh - var(--topbar)); display: grid; grid-template-columns: var(--sidebar-left) minmax(470px, 1fr) var(--sidebar-right); }
.sidebar { min-height: 0; background: var(--panel); display: flex; flex-direction: column; }
.left-sidebar { border-right: 1px solid var(--line); padding: 18px 10px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #44443d transparent; }
.right-sidebar { border-left: 1px solid var(--line); overflow: hidden; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 14px; }
.sidebar-heading h2 { font-size: 16px; margin: 0; font-weight: 600; }
.library-editor { margin: 0 7px 10px; padding: 10px; border: 1px solid #67512d; border-radius: 4px; background: #211e18; }
.library-editor label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.library-editor > div { display: grid; grid-template-columns: minmax(0, 1fr) 30px 30px; gap: 5px; }
.library-editor input { min-width: 0; height: 32px; padding: 0 8px; border: 1px solid #6d5938; border-radius: 3px; outline: none; background: #121211; color: var(--text); font-size: 13px; }
.library-editor input:focus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(227,170,77,.12); }
.library-editor button { height: 32px; border: 1px solid var(--line); border-radius: 3px; background: #292925; color: var(--muted); }
.library-editor button:hover, .library-editor button:focus-visible { border-color: var(--amber); color: var(--amber-bright); outline: none; }
.library-editor .library-editor-save { border-color: #806233; background: #554124; color: #f0d39a; }
.workspace-tree { display: flex; flex-direction: column; gap: 2px; }
.tree-row { width: 100%; height: 38px; display: flex; align-items: center; gap: 8px; border: 0; color: var(--muted); background: transparent; text-align: left; padding: 0 8px; border-radius: 3px; font-size: 14px; }
.tree-row:hover { background: rgba(255,255,255,.035); color: var(--text); }
.tree-row.active { background: var(--amber-dim); color: var(--amber-bright); }
.tree-row .count { margin-left: auto; color: var(--faint); font: 10px "DM Mono", monospace; }
.tree-row .status-dot { width: 5px; height: 5px; margin-left: auto; background: var(--amber); border-radius: 50%; box-shadow: 0 0 8px var(--amber); }
.chevron { width: 10px; font-size: 15px; }
.folder-icon { color: #a37b3d; font-size: 11px; }
.doc-icon { margin-left: 18px; font-size: 12px; }
.tree-children { display: flex; flex-direction: column; position: relative; }
.tree-children::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 4px; width: 1px; background: var(--line-soft); }
.tree-empty { height: 30px; display: flex; align-items: center; padding-left: 35px; color: var(--faint); font-size: 10px; font-style: italic; }
.tree-children.drag-target { outline: 1px dashed #7d6338; outline-offset: -2px; background: rgba(227,170,77,.05); }
.sidebar-spacer { flex: 1; }
.quick-imports { border-top: 1px solid var(--line-soft); padding: 14px 7px 8px; }
.import-row { width: 100%; min-height: 42px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 12px; gap: 8px; align-items: center; padding: 4px 2px; border: 0; background: none; text-align: left; color: var(--muted); }
.import-row:hover strong, .import-row:hover > b { color: var(--amber-bright); }
.import-row > span:nth-child(2) { min-width: 0; }
.import-row strong, .import-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-row strong { font-size: 12px; font-weight: 600; color: #c5c4b9; }
.import-row small { margin-top: 2px; font-size: 10px; color: var(--faint); }
.import-row > b { color: var(--faint); font-size: 12px; font-weight: 400; }
.import-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #5e4a2c; background: #30281d; color: var(--amber-bright); border-radius: 3px; font: 8px "DM Mono", monospace; }
.import-icon.blue { border-color: #3e5962; background: #202e33; color: #8bc1d2; }
.import-icon.coral { border-color: #624438; background: #32251f; color: #dd9278; }
.recent-section { border-top: 1px solid var(--line-soft); padding: 17px 7px 8px; }
.clip-row { width: 100%; display: flex; gap: 9px; align-items: center; padding: 8px 2px; border: 0; background: none; text-align: left; }
.clip-row:hover strong { color: var(--amber-bright); }
.clip-row span:last-child { min-width: 0; }
.clip-row strong, .clip-row small { display: block; }
.clip-row strong { font: 12px "DM Mono", monospace; color: #c5c4b9; overflow: hidden; }
.clip-row small { font-size: 11px; color: var(--faint); margin-top: 3px; }
.clip-swatch { width: 3px; align-self: stretch; min-height: 30px; border-radius: 3px; background: var(--amber); }
.clip-swatch.blue { background: var(--blue); }
.clip-swatch.coral { background: var(--coral); }
.workspace-wrap { min-width: 0; display: grid; grid-template-rows: var(--toolbar) minmax(0, 1fr) 28px; background: #0f0f0e; }
.workspace-toolbar { position: relative; z-index: 80; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #1b1b19; border-bottom: 1px solid var(--line); overflow: visible; }
.tool-group { display: flex; align-items: center; gap: 3px; }
.tool-button { height: 32px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 3px; padding: 0 9px; font-size: 13px; white-space: nowrap; }
.tool-button span { font-size: 15px; margin-right: 5px; }
.tool-button:hover { background: var(--panel-3); color: var(--text); }
.tool-button:disabled { opacity: .28; cursor: default; background: transparent; color: var(--faint); }
.tool-button.active { background: #302b21; border-color: #5a4729; color: var(--amber-bright); }
.tool-button.icon-only { width: 29px; padding: 0; font-size: 17px; }
.tool-button.danger-hover:hover { color: #e68068; }
.clone-extend-control { position: relative; }
.clone-extend-popover { position: absolute; top: calc(100% + 9px); left: 50%; width: 255px; transform: translateX(-50%); padding: 13px; border: 1px solid #504a3d; border-radius: 5px; background: #22211d; box-shadow: 0 15px 38px rgba(0,0,0,.55); color: var(--muted); z-index: 100; }
.clone-extend-popover > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.clone-extend-popover strong { color: var(--text); font-size: 12px; }
.clone-extend-popover output { color: var(--amber-bright); font: 12px "DM Mono", monospace; }
.clone-extend-popover input[type="range"] { width: 100%; margin: 13px 0 8px; accent-color: var(--amber); }
.clone-extend-popover small { display: block; color: var(--faint); font: 10px "DM Mono", monospace; }
.clone-extend-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 13px; }
.clone-extend-actions button { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: #292925; color: var(--muted); font-size: 11px; }
.clone-extend-actions button.accent { border-color: #67512d; background: #3a2e1e; color: var(--amber-bright); }
.tool-separator { height: 20px; width: 1px; background: var(--line); }
.toolbar-hint { margin-left: auto; font-size: 11px; color: var(--faint); white-space: nowrap; }
kbd { font: 9px "DM Mono", monospace; color: #bab9ae; border: 1px solid #4a4a44; background: #252522; border-radius: 3px; padding: 2px 5px; box-shadow: inset 0 -1px #111; }
.zoom-control { display: flex; align-items: center; margin-left: 7px; background: #141413; border: 1px solid var(--line); height: 28px; border-radius: 3px; }
.zoom-control button { width: 26px; height: 26px; border: 0; background: none; color: var(--muted); }
.zoom-control span { width: 44px; text-align: center; font: 10px "DM Mono", monospace; color: var(--muted); }

.workspace { position: relative; overflow: auto; background-color: #11110f; min-height: 0; }
.workspace-grid { position: absolute; inset: 0; width: 2400px; height: 1600px; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px), radial-gradient(circle at 50% 20%, rgba(179,128,49,.055), transparent 42%); background-size: 24px 24px, 24px 24px, 100% 100%; transform-origin: 0 0; }
.workspace.panning { cursor: grab; }
.workspace.panning.active-pan { cursor: grabbing; }
.empty-state { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; color: var(--faint); pointer-events: none; }
.empty-state.visible { display: flex; }
.empty-state > span { font-size: 34px; color: #494943; margin-bottom: 12px; }
.empty-state strong { font-size: 13px; color: var(--muted); }
.empty-state small { margin-top: 5px; }

.grid-card { position: absolute; contain: layout style; background: #1b1b18; border: 1px solid #41413a; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.28); transform-origin: top left; }
.grid-resize-handle { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; touch-action: none; z-index: 8; }
.grid-resize-handle::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-right: 2px solid #777568; border-bottom: 2px solid #777568; opacity: .8; }
.grid-card.resizing { user-select: none; box-shadow: 0 0 0 1px #7b6137, 0 12px 34px rgba(0,0,0,.34); }
.grid-card.resizing[data-resize-mode="width"] .grid-resize-handle { cursor: ew-resize; }
.grid-card.resizing[data-resize-mode="height"] .grid-resize-handle { cursor: ns-resize; }
.grid-card.selected { border-color: #9b7538; box-shadow: 0 0 0 1px rgba(227,170,77,.18), 0 15px 36px rgba(0,0,0,.38); }
.grid-card.selected::before { content: attr(data-operand); position: absolute; left: 7px; top: 7px; z-index: 5; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: #21190e; font: 700 10px "DM Mono", monospace; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.grid-card.selected .grid-card-header { padding-left: 33px; }
.grid-card.selected[data-operand="B"] { border-color: #568ca1; box-shadow: 0 0 0 1px rgba(104,169,194,.2), 0 15px 36px rgba(0,0,0,.38); }
.grid-card.selected[data-operand="B"]::before { background: var(--blue); color: #102128; }
.grid-card.primary { box-shadow: 0 0 0 2px rgba(244,196,110,.28), 0 15px 36px rgba(0,0,0,.38); }
.grid-card.dragging { opacity: .88; z-index: 1000 !important; cursor: grabbing; will-change: left, top; }
.grid-card.overlay-top { background: rgba(27, 27, 24, .78); }
.grid-card.overlay-top .letter-cell { background-color: rgba(36, 36, 32, .78); }
.grid-card.overlay-top .letter-cell.selected { background-color: rgba(141, 105, 46, .82); }
.grid-card.drop-target { border-color: var(--amber-bright); box-shadow: 0 0 0 2px rgba(227,170,77,.22), 0 0 32px rgba(227,170,77,.12); }
.grid-card.preview-a, .grid-card.preview-b { overflow: hidden; }
.grid-card.preview-a { border-color: var(--amber-bright); }
.grid-card.preview-b { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(104,169,194,.2), 0 0 30px rgba(104,169,194,.13); }
.grid-card.preview-a::before, .grid-card.preview-b::before { position: absolute; left: 7px; top: 7px; z-index: 8; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font: 700 10px "DM Mono", monospace; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.grid-card.preview-a::before { content: "A"; background: var(--amber); color: #21190e; }
.grid-card.preview-b::before { content: "B"; background: var(--blue); color: #102128; }
.grid-card.preview-a .grid-card-header, .grid-card.preview-b .grid-card-header { padding-left: 33px; }
.grid-card-header { height: 34px; display: flex; align-items: center; padding: 0 8px; gap: 7px; border-bottom: 1px solid var(--line); background: #20201d; user-select: none; cursor: grab; }
.grid-card-header:active { cursor: grabbing; }
.grid-grip { color: var(--faint); font-size: 12px; letter-spacing: -2px; }
.grid-card-title { font-size: 11px; font-weight: 700; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-dimensions { margin-left: auto; color: var(--faint); font: 10px "DM Mono", monospace; }
.live-badge { color: var(--amber-bright); border: 1px solid #6d542f; background: #332a1d; border-radius: 2px; padding: 2px 4px; font: 6px "DM Mono", monospace; letter-spacing: .8px; }
.sync-badge { color: #9ccbdd; border: 1px solid #45636e; background: #22343a; border-radius: 2px; padding: 2px 4px; font: 6px "DM Mono", monospace; letter-spacing: .8px; }
.grid-menu { width: 19px; height: 22px; border: 0; background: none; color: var(--faint); padding: 0; }
.grid-card-body { height: calc(100% - 34px); overflow: auto; padding: 9px; scrollbar-color: #44443d transparent; scrollbar-width: thin; }
.letter-grid { display: grid; gap: 2px; width: max-content; user-select: none; }
.letter-cell { position: relative; display: grid; place-items: center; border: 1px solid #4a4a43; background: #242420; color: #e4e3d9; font: 500 14px "DM Mono", monospace; cursor: crosshair; transition: background .08s, border-color .08s, color .08s; }
.letter-cell:hover { background: #2e2e29; border-color: #585850; }
.letter-cell.empty { background: transparent; border-color: transparent; color: transparent; }
.letter-cell.empty:hover { background: rgba(255,255,255,.025); border-color: #34342f; }
.letter-cell.unknown { color: var(--muted); }
.letter-cell.unknown:hover { color: var(--text); }
.letter-cell.selected { background: #8d692e; border-color: #d9a751; color: #fff5df; }
.letter-cell.highlight-amber { background: #5f4928; border-color: #b9893f; color: #fff0cf; }
.letter-cell.highlight-blue { background: #274653; border-color: #5e9ab0; color: #dff6ff; }
.letter-cell.highlight-coral { background: #53352d; border-color: #ae654e; color: #ffe6de; }
.letter-cell.highlight-green { background: #304a35; border-color: #66916e; color: #e5f6e8; }
.letter-cell.selected[class*="highlight-"] { box-shadow: inset 0 0 0 1px #fff5df, 0 0 0 1px rgba(0,0,0,.45); }
.letter-cell.anchor { box-shadow: inset 0 0 0 1px #ffe2a5; }
.letter-cell.live-overlay { color: transparent; border-color: #b99b62; background: linear-gradient(135deg, #5d4828 0 48%, #29424b 52% 100%); box-shadow: 0 0 10px rgba(227,170,77,.22); }
.letter-cell.live-overlay::after { content: attr(data-live-letter); position: absolute; inset: 0; display: grid; place-items: center; color: #fff1cf; font: 500 14px "DM Mono", monospace; }
.letter-cell.live-overlay::before { content: attr(data-live-formula); position: absolute; left: 2px; top: 1px; color: #cfae70; font: 5px "DM Mono", monospace; z-index: 1; }
.letter-cell.live-overlay.selected { border-color: #ffe0a0; box-shadow: inset 0 0 0 2px #f4c46e, 0 0 10px rgba(227,170,77,.28); }
.letter-cell .cell-index { position: absolute; right: 2px; bottom: 1px; color: #c09552; font-size: 7px; font-weight: 500; }
.combine-flash { animation: combineFlash .7s ease-out; }
@keyframes combineFlash { 0% { box-shadow: 0 0 0 4px rgba(244,196,110,.7), 0 0 50px rgba(227,170,77,.45); } 100% { box-shadow: 0 12px 34px rgba(0,0,0,.28); } }

.statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid var(--line); background: #171715; color: var(--faint); font-size: 11px; letter-spacing: .2px; }
.statusbar > div { display: flex; align-items: center; }
.live-dot { width: 5px; height: 5px; background: #6fa374; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 6px rgba(111,163,116,.5); }
.status-separator { width: 1px; height: 11px; background: var(--line); margin: 0 9px; }

.inspector-tabs { display: grid; grid-template-columns: 1fr 1fr; height: 45px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.inspector-tabs button { position: relative; border: 0; background: none; color: var(--faint); font-size: 13px; }
.inspector-tabs button:hover { color: var(--text); }
.inspector-tabs button.active { color: var(--amber-bright); }
.inspector-tabs button.active::after { content: ""; position: absolute; height: 2px; background: var(--amber); left: 24px; right: 24px; bottom: -1px; }
.tab-panel { display: none; overflow-y: auto; min-height: 0; scrollbar-color: #44443d transparent; scrollbar-width: thin; }
.tab-panel.active { display: block; flex: 1; }
.inspector-section { padding: 16px; border-bottom: 1px solid var(--line-soft); }
.section-title { display: flex; justify-content: space-between; align-items: center; color: #c5c4b9; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; margin-bottom: 14px; }
.inspector-section.collapsed > :not(.section-title) { display: none; }
.inspector-section.collapsed > .section-title { margin-bottom: 0; }
.collapse { width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--faint); font-size: 10px; border-radius: 3px; }
.collapse:hover, .collapse:focus-visible { background: var(--panel-3); color: var(--amber-bright); outline: none; }
.field-label, .field-pair label > span { display: block; color: var(--muted); font-size: 12px; margin: 11px 0 6px; }
.text-input, .text-area, .select-input, .unit-input { width: 100%; background: #121211; border: 1px solid #3a3a35; border-radius: 3px; outline: none; }
.text-input, .select-input { height: 34px; padding: 0 9px; }
.text-input:focus, .text-area:focus, .select-input:focus, .unit-input:focus-within { border-color: #826435; box-shadow: 0 0 0 2px rgba(227,170,77,.08); }
input:disabled, textarea:disabled { opacity: .45; cursor: not-allowed; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field-pair input { min-width: 0; width: 100%; height: 32px; border: 1px solid #3a3a35; background: #121211; padding: 0 8px; outline: 0; border-radius: 3px; }
.unit-input { display: flex; }
.unit-input input { border: 0; background: transparent; }
.unit-input i { font-style: normal; color: var(--faint); padding: 8px; }
.text-area { height: 78px; padding: 8px; resize: vertical; font: 11px/1.5 "DM Mono", monospace; letter-spacing: .7px; }
.mini-actions { display: flex; gap: 5px; margin-top: 7px; }
.mini-actions button { flex: 1; height: 30px; border: 1px solid #4a4a43; background: #242421; border-radius: 3px; color: var(--muted); font-size: 11px; }
.mini-actions button:hover { color: var(--text); border-color: #55554d; }
.mini-actions button.accent { background: #5f4928; color: #f2d69f; border-color: #8a6a35; }
.letter-colour-palette { display: grid; grid-template-columns: repeat(5, 34px); gap: 8px; }
.letter-colour-button { position: relative; width: 34px; height: 34px; border: 1px solid #5a5a52; border-radius: 5px; box-shadow: inset 0 0 0 3px #1b1b18; }
.letter-colour-button.amber { background: #d6a24c; }
.letter-colour-button.blue { background: #68a9c2; }
.letter-colour-button.coral { background: #cd7d62; }
.letter-colour-button.green { background: #72a77b; }
.letter-colour-button.clear { background: #242421; color: var(--muted); font-size: 19px; }
.letter-colour-button:hover:not(:disabled), .letter-colour-button:focus-visible:not(:disabled) { border-color: #fff3d8; transform: translateY(-1px); outline: none; }
.letter-colour-button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .35; }
.letter-colour-help { margin: 9px 0 0; color: var(--faint); font-size: 10px; line-height: 1.5; }
.segmented { display: grid; grid-template-columns: 1.1fr .7fr 1fr; border: 1px solid #3a3a35; background: #121211; border-radius: 3px; padding: 2px; }
.segmented button { height: 28px; border: 0; background: none; color: var(--faint); font-size: 10px; border-radius: 2px; }
.segmented button.active { background: #393126; color: var(--amber-bright); }
.alphabet-preview { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px; }
.alphabet-preview span { width: 17px; height: 19px; display: grid; place-items: center; border: 1px solid #34342f; background: #20201d; color: #aaa99f; font: 8px "DM Mono", monospace; }
.custom-alphabet { margin-top: 9px; font: 10px "DM Mono", monospace; }
.hidden { display: none !important; }
.switch-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: 11px; font-weight: 500; }
.switch-row small { color: var(--faint); margin-top: 3px; font-size: 10px; }
.switch { position: relative; width: 31px; height: 17px; }
.switch input { opacity: 0; position: absolute; }
.switch i { display: block; width: 31px; height: 17px; border-radius: 10px; background: #3b3b36; transition: .15s; }
.switch i::after { content: ""; position: absolute; width: 11px; height: 11px; left: 3px; top: 3px; border-radius: 50%; background: #99998e; transition: .15s; }
.switch input:checked + i { background: #7a5b2b; }
.switch input:checked + i::after { left: 17px; background: var(--amber-bright); }
.select-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position: calc(100% - 13px) 14px, calc(100% - 9px) 14px; background-size: 4px 4px; background-repeat: no-repeat; font-size: 11px; }
.operand-stack { display: grid; gap: 5px; margin-bottom: 8px; }
.operand-stack > div { height: 29px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid #393934; background: #141413; border-radius: 3px; min-width: 0; }
.operand-stack b { width: 16px; height: 16px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #5c4728; color: var(--amber-bright); font: 8px "DM Mono", monospace; }
.operand-stack > div:nth-child(2) b { background: #29434d; color: #91c7d9; }
.operand-stack span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.operation-button { width: 100%; height: 34px; border: 1px solid #9b7538; background: #604923; color: #ffe0a6; border-radius: 3px; font-size: 11px; }
.operation-button:hover { background: #674e29; }
.operation-button:disabled { opacity: .35; cursor: default; }
.secondary-operation-button { margin-top: 7px; border-color: #55554d; background: #292925; color: #d7d4c8; }
.secondary-operation-button:hover { background: #33332e; }

.analysis-hero { padding: 17px 16px 14px; border-bottom: 1px solid var(--line); background: #1c1c19; }
.selection-sequence { min-height: 36px; max-height: 68px; overflow: hidden; color: var(--amber-bright); font: 11px/1.55 "DM Mono", monospace; letter-spacing: 1px; word-break: break-all; }
.analysis-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--faint); font-size: 10px; }
.analysis-meta button { border: 0; background: none; color: var(--amber); font-size: 9px; padding: 3px; }
.analysis-meta button:disabled { color: var(--faint); cursor: default; }
.metric-card { margin: 12px 12px 0; padding: 13px; border: 1px solid #383832; background: #1e1e1b; border-radius: 4px; }
.metric-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; letter-spacing: 1px; font-weight: 700; }
.metric-head button { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #4a4a43; background: none; color: var(--faint); font: 8px serif; padding: 0; }
.info-button:hover, .info-button:focus-visible { border-color: var(--amber) !important; color: var(--amber-bright) !important; outline: none; }
.metric-value { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 9px; }
.metric-value strong { font: 500 23px "DM Mono", monospace; color: #deddd3; }
.metric-value span { font-size: 8px; color: var(--faint); }
.meter { height: 4px; position: relative; background: #34342e; border-radius: 3px; overflow: visible; }
.meter i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--blue); transition: width .25s; }
.meter.warm i { background: var(--amber); }
.english-mark { position: absolute; left: 66.7%; width: 1px; height: 8px; top: -2px; background: #ddd; opacity: .65; }
.null-result { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid #30302b; color: var(--faint); font-size: 8px; }
.null-result strong { color: var(--muted); }
.null-result.secondary { margin-top: 6px; padding-top: 0; border-top: 0; }
.frequency-section { padding-bottom: 11px; }
.frequency-chart { height: 108px; display: flex; align-items: end; gap: 2px; }
.chart-placeholder { align-self: center; margin: auto; color: var(--faint); font-size: 9px; }
.frequency-bar { flex: 1; height: 100%; min-width: 5px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.frequency-bar i { width: 100%; max-width: 10px; min-height: 1px; background: #756342; border-radius: 1px 1px 0 0; }
.frequency-bar.hot i { background: var(--amber); }
.frequency-bar span { color: var(--faint); font: 6px "DM Mono", monospace; }
.bigram-list { display: flex; flex-wrap: wrap; gap: 5px; }
.bigram-list span { border: 1px solid #3d3d37; background: #242421; border-radius: 3px; padding: 5px 7px; color: #b3b2a8; font: 9px "DM Mono", monospace; }
.bigram-list span b { color: var(--amber); margin-left: 5px; font-weight: 400; }
.period-analysis .section-title button { width: 16px; height: 16px; padding: 0; border: 1px solid #4a4a43; border-radius: 50%; background: none; color: var(--faint); font: 8px serif; }
.analysis-explanation { margin: -4px 0 13px; color: var(--faint); font-size: 10px; line-height: 1.45; }
.period-range-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.period-range-head span { color: var(--faint); font-size: 8px; }
.period-range { width: 100%; margin: 9px 0; accent-color: var(--amber); }
.period-scan-list { max-height: 190px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #45453e transparent; }
.period-scan-row { width: 100%; height: 23px; display: grid; grid-template-columns: 22px 1fr 45px; gap: 7px; align-items: center; border: 0; border-radius: 2px; padding: 0 5px; background: none; color: var(--faint); font: 9px "DM Mono", monospace; text-align: right; }
.period-scan-row:hover { background: #292822; color: var(--muted); }
.period-scan-row.selected { background: #342d21; color: var(--amber-bright); }
.period-scan-row > span { text-align: left; }
.period-scan-row > i { height: 4px; overflow: hidden; border-radius: 3px; background: #31312d; }
.period-scan-row > i > b { display: block; height: 100%; background: #6c634d; }
.period-scan-row.likely > i > b { background: var(--amber); }
.period-scan-row > strong { font-weight: 400; }
.period-detail { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.period-detail-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.period-detail-head strong, .period-detail-head b { color: var(--amber-bright); font: 11px "DM Mono", monospace; }
.period-significance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.period-significance span { padding: 6px; border: 1px solid #34342e; border-radius: 3px; color: var(--faint); font-size: 7px; text-align: center; }
.period-significance b { display: block; margin-top: 3px; color: var(--muted); font: 9px "DM Mono", monospace; }
.period-null-band { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font-size: 8px; }
.period-null-band strong { color: var(--muted); font: 8px "DM Mono", monospace; }
.candidate-key { font-family: "DM Mono", monospace; letter-spacing: 1px; color: var(--amber-bright); }
.suggested-key { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font-size: 8px; }
.suggested-key strong { color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: 1px; }
.decrypt-preview { min-height: 48px; max-height: 94px; overflow: auto; padding: 8px; border: 1px solid #393932; border-radius: 3px; background: #151513; color: #c8c7bc; font: 9px/1.5 "DM Mono", monospace; overflow-wrap: anywhere; }
.column-analysis { margin-top: 10px; max-height: 145px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #45453e transparent; }
.column-analysis > div { display: grid; grid-template-columns: 27px 23px 1fr 43px; align-items: center; min-height: 22px; border-bottom: 1px solid #2e2e29; color: var(--faint); font: 8px "DM Mono", monospace; }
.column-analysis > div span { color: var(--muted); }
.column-analysis > div b { color: var(--amber-bright); font-size: 10px; }
.column-analysis > div i { font-style: normal; }
.column-analysis > div strong { text-align: right; font-weight: 400; }
.stride-analysis .section-title button { width: 16px; height: 16px; padding: 0; border: 1px solid #4a4a43; border-radius: 50%; background: none; color: var(--faint); font: 8px serif; }
.stride-options { display: flex; flex-wrap: wrap; gap: 7px 10px; margin: 10px 0; color: var(--muted); font-size: 9px; }
.stride-options label:first-child { flex-basis: 100%; }
.stride-options input { accent-color: var(--amber); vertical-align: middle; }
.stride-options .muted-option { opacity: .35; }
.layered-key-limit { margin: 10px 0; color: var(--muted); font-size: 9px; }
.layered-key-limit label { display: flex; justify-content: space-between; }
.layered-key-limit input { width: 100%; margin-top: 8px; accent-color: var(--amber); }
.stride-status { margin: 9px 0; color: var(--faint); font-size: 8px; line-height: 1.4; }
.stride-results { max-height: 230px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #45453e transparent; }
.stride-result-row { width: 100%; min-height: 31px; display: grid; grid-template-columns: 18px 48px 1fr 43px; grid-template-rows: 16px 11px; align-items: center; gap: 0 5px; padding: 2px 5px; border: 0; border-bottom: 1px solid #2e2e29; background: none; color: var(--faint); text-align: left; }
.stride-result-row:hover { background: #292822; }
.stride-result-row.selected { background: #342d21; }
.stride-result-row > span { grid-row: 1 / 3; color: #65645c; font: 8px "DM Mono", monospace; }
.stride-result-row > strong { color: var(--muted); font: 10px "DM Mono", monospace; }
.stride-result-row > i { overflow: hidden; color: var(--faint); font: 8px "DM Mono", monospace; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.stride-result-row > b { color: var(--amber-bright); font: 9px "DM Mono", monospace; text-align: right; }
.stride-result-row > small { grid-column: 2 / 5; color: var(--faint); font-size: 7px; }
.stride-detail { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.stride-evidence { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 2px; }
.stride-evidence span { padding: 5px 6px; border: 1px solid #34342e; border-radius: 3px; color: var(--faint); font-size: 7px; }
.stride-evidence b { display: block; margin-top: 2px; color: var(--muted); font: 8px "DM Mono", monospace; }
.layered-preview > .decrypt-preview { margin-top: 7px; }
.intermediate-grid-button { margin: 10px 0 2px; }
.route-caveat { margin: 8px 0 0; color: var(--faint); font-size: 8px; line-height: 1.4; }
.grid-diagnostic-analysis .section-title button, .grid-route-analysis .section-title button { width: 16px; height: 16px; padding: 0; border: 1px solid #4a4a43; border-radius: 50%; background: none; color: var(--faint); font: 8px serif; }
.grid-diagnostic-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 9px; }
.grid-diagnostic-filters button { min-height: 25px; border: 1px solid #41413a; border-radius: 3px; background: #242421; color: var(--faint); font-size: 8px; }
.grid-diagnostic-filters button:hover { border-color: #5d5646; color: var(--muted); }
.grid-diagnostic-filters button.active { border-color: #806a3d; background: #342d21; color: var(--amber-bright); }
.grid-diagnostic-head, .grid-diagnostic-row { display: grid; grid-template-columns: 35px 1fr 39px 34px; gap: 6px; align-items: center; }
.grid-diagnostic-head { padding: 0 5px 5px; color: #66655e; font-size: 7px; text-align: right; }
.grid-diagnostic-head span:first-child { text-align: left; }
.grid-diagnostic-list { max-height: 270px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #45453e transparent; }
.grid-diagnostic-row { width: 100%; min-height: 25px; padding: 2px 5px; border: 0; border-bottom: 1px solid #2e2e29; background: none; color: var(--faint); font: 8px "DM Mono", monospace; text-align: right; }
.grid-diagnostic-row:hover { background: #292822; }
.grid-diagnostic-row.selected { background: #342d21; color: var(--amber-bright); }
.grid-diagnostic-row > span { overflow: hidden; color: var(--muted); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.grid-diagnostic-row > i { position: relative; height: 7px; overflow: hidden; border-radius: 4px; background: #31312d; }
.grid-diagnostic-row > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d5848, var(--amber)); }
.grid-diagnostic-row > strong { color: #b9b8ad; font-weight: 400; }
.grid-route-results { max-height: 285px; }
.grid-route-results .stride-result-row { grid-template-columns: 18px minmax(76px, 1fr) 47px; grid-template-rows: 17px 12px; }
.grid-route-results .stride-result-row > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-route-results .stride-result-row > b { grid-column: 3; }
.grid-route-results .stride-result-row > small { grid-column: 2 / 4; }
#gridRouteName { max-width: 205px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast { position: fixed; left: 50%; bottom: 45px; transform: translate(-50%, 20px); background: #2b2923; border: 1px solid #675431; color: #ead9b8; padding: 9px 14px; border-radius: 4px; box-shadow: 0 9px 25px rgba(0,0,0,.4); font-size: 10px; opacity: 0; pointer-events: none; transition: .2s; z-index: 1000; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.context-menu { position: fixed; z-index: 1200; width: 205px; padding: 5px; border: 1px solid #4b493f; background: #20201c; border-radius: 4px; box-shadow: 0 16px 42px rgba(0,0,0,.55); }
.context-menu button { width: 100%; height: 34px; display: flex; align-items: center; gap: 9px; border: 0; padding: 0 8px; background: none; color: #d0cfc5; border-radius: 2px; text-align: left; font-size: 12px; }
.context-menu button:hover { background: #3b3020; color: var(--amber-bright); }
.context-menu button.danger:hover { background: #3b2420; color: #e88b72; }
.context-menu button span { width: 15px; color: var(--faint); text-align: center; }
.context-menu hr { height: 1px; border: 0; background: #37372f; margin: 4px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.modal { width: 430px; background: #1c1c19; border: 1px solid #44443c; border-radius: 5px; box-shadow: 0 25px 70px rgba(0,0,0,.55); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }
.modal h2 { font-size: 16px; margin: 0; }
.modal-head button { border: 0; background: none; color: var(--muted); font-size: 21px; }
.modal-head button:hover, .modal-head button:focus-visible { color: var(--amber-bright); outline: none; }
.shortcut-grid { padding: 18px 20px 22px; display: grid; grid-template-columns: 108px 1fr; gap: 13px 18px; align-items: center; color: var(--muted); font-size: 11px; }
.shortcut-grid kbd { width: fit-content; }
.about-modal { width: min(430px, calc(100vw - 36px)); }
.about-body { padding: 21px 20px 23px; }
.about-body p { margin: 0 0 12px; color: #b8b7ad; font-size: 13px; line-height: 1.7; }
.about-body p:last-of-type { margin-bottom: 20px; }
.about-body p a { color: var(--amber-bright); text-underline-offset: 3px; }
.about-body p a:hover, .about-body p a:focus-visible { color: #ffe0a6; outline: none; }
.about-link { width: fit-content; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #72572f; border-radius: 4px; padding: 9px 12px; background: var(--amber-dim); color: var(--amber-bright); font-size: 11px; font-weight: 600; text-decoration: none; }
.about-link:hover, .about-link:focus-visible { border-color: var(--amber); background: #3c3020; outline: none; }

@media (max-width: 1500px) {
  .toolbar-hint { display: none; }
  #cloneExtend { width: 38px; padding: 0; font-size: 0; }
  #cloneExtend span { margin: 0; font-size: 12px; }
}

@media (max-width: 1300px) {
  .tool-button[data-mode], #addGrid { width: 36px; padding: 0; font-size: 0; }
  .tool-button[data-mode] span, #addGrid span { margin: 0; font-size: 15px; }
}

@media (max-width: 1200px) {
  :root { --sidebar-left: 240px; --sidebar-right: 320px; }
  .toolbar-hint { display: none; }
  .zoom-control { display: none; }
  .brand { padding-left: 12px; }
}