* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #eef2f7; --bg2: #dce4ef; --bg3: #c8d5e6;
  --fg: #2c3e50; --fg2: #4a5a6a; --accent: #d31938; /* KS-B-023: darkened from #e94560 for 4.5:1 text contrast */
  --panel: #f0f4f8; --border: #b0bec5;
  --hover: #cfd8e0; --success: #1a7a40; /* KS-A-2: darkened from #27ae60 for 4.5:1 text contrast */
  --canvas-bg: #f8faff; --grid-line: #c0cfe0; --grid-major: #7a92b5;
  --empty-cell: #ffffff;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 14px;
  --font-base: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-xxl: 28px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxl: 24px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --text-boost: 0px;
}
/* WHY: Text size accessibility — experienced beaders often need larger text.
   Three levels: default (0px boost), medium (+2px), large (+4px).
   Applied via CSS calc() on all font-size vars so canvas/icons stay unchanged. */
html[data-text-size="medium"] { --text-boost: 2px; }
html[data-text-size="large"] { --text-boost: 4px; }
html[data-text-size] .btn { font-size: calc(var(--font-sm) + var(--text-boost)); }
html[data-text-size] .lbl { font-size: calc(var(--font-sm) + var(--text-boost)); }
html[data-text-size] .help-panel__section { font-size: calc(var(--font-base) + var(--text-boost)); }
html[data-text-size] .help-panel__section h3 { font-size: calc(var(--font-lg) + var(--text-boost)); }
html[data-text-size] .modal { font-size: calc(var(--font-base) + var(--text-boost)); }
html[data-text-size] .modal h2 { font-size: calc(var(--font-xl) + var(--text-boost)); }
html[data-text-size] aside { font-size: calc(var(--font-sm) + var(--text-boost)); }
html[data-text-size] .pattern-list__name { font-size: calc(var(--font-sm) + var(--text-boost)); }
html[data-text-size] .tool-btn { font-size: calc(18px + var(--text-boost)); }
/* Text size toggle styling */
.text-size-group { display:inline-flex; gap:1px; margin:0 4px; }
.text-size-group .btn { min-width:28px; padding:4px 6px; border-radius:0; }
.text-size-group .btn:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.text-size-group .btn:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
/* WHY: Large Print / High Contrast mode -- one toggle bundling the existing A++ text
   size, the existing "Numbers" row/column canvas labels, and stronger grid-line/border
   contrast for low-vision users. See toggleA11yMode()/applyA11yMode() in src-shared/ui.js;
   the canvas-side row-highlight and bead-ring contrast boost lives in rendering.js. */
html[data-a11y-mode="large-print"] {
  --grid-line: #5a7096; --grid-major: #223047; --border: #5a6b7d;
}
#a11y-mode-toggle[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.text-size-group .btn.active-size { background:var(--accent); color:#fff; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg); color: var(--fg); display:flex; flex-direction:column; height:100vh; overflow:hidden; user-select:none; }
.topbar { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-sm) var(--space-lg); background:var(--bg2); border-bottom:1px solid var(--border); min-height:48px; flex-shrink:0; flex-wrap:wrap; }
.topbar h1 { font-size:var(--font-xl); color:var(--accent); font-weight:700; letter-spacing:1px; }
.topbar .sep { width:1px; height:28px; background:var(--border); }
.btn { padding:5px 10px; border:1px solid var(--border); background:var(--panel); color:var(--fg); border-radius:4px; cursor:pointer; font-size:var(--font-sm); transition:all .15s; }
.btn:hover { background:var(--hover); border-color:var(--accent); }
.btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.sm { padding:4px 10px; font-size:var(--font-sm); }
.btn.pending-import { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.btn.danger { border-color:#c0392b; }
.btn.danger:hover { background:#c0392b; color:#fff; }
select.ctrl { padding:5px 8px; background:var(--panel); color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-md); }
input.ctrl { padding:5px 8px; background:var(--panel); color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-md); width:60px; text-align:center; }
label.lbl { font-size:var(--font-sm); color:var(--fg2); }
.main { display:flex; flex:1; overflow:hidden; }
.toolpanel { width:52px; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:4px; flex-shrink:0; overflow-y:auto; }
.tool-btn { width:48px; height:48px; border:1px solid transparent; background:none; color:var(--fg2); border-radius:var(--radius-md); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:var(--font-xl); transition:all .15s; gap:1px; }
.tool-btn .tool-label { font-size:9px; line-height:1; letter-spacing:0.3px; text-transform:uppercase; }
.tool-btn:hover { background:var(--hover); color:var(--fg); }
.tool-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.tool-sep { width:30px; height:1px; background:var(--border); margin:4px 0; }
.canvas-wrap { flex:1; position:relative; overflow:hidden; background:var(--canvas-bg); }
.canvas-wrap canvas { position:absolute; top:0; left:0; image-rendering:pixelated; }
/* ── Multi-Pattern Workspace tabs (Phase 8 / G4) ── */
.workspace-tabs { display:flex; align-items:center; gap:4px; padding:4px 6px; background:var(--bg2); border-bottom:1px solid var(--border); overflow-x:auto; flex-shrink:0; min-height:34px; }
.workspace-tab { display:flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--fg2); cursor:pointer; font-size:var(--font-xs); white-space:nowrap; flex-shrink:0; max-width:160px; }
.workspace-tab:hover { background:var(--hover); }
.workspace-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.workspace-tab:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.workspace-tab__label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-tab__close { background:none; border:none; color:inherit; opacity:0.65; cursor:pointer; font-size:11px; width:20px; height:20px; min-width:20px; display:flex; align-items:center; justify-content:center; border-radius:3px; line-height:1; flex-shrink:0; }
.workspace-tab__close:hover { opacity:1; background:rgba(0,0,0,0.12); }
.workspace-tab__close:focus-visible { outline:2px solid var(--accent); outline-offset:1px; opacity:1; }
.workspace-tab__compare-btn { margin-left:auto; flex-shrink:0; padding:5px 10px; font-size:var(--font-xs); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--fg); cursor:pointer; white-space:nowrap; }
.workspace-tab__compare-btn:hover { background:var(--hover); border-color:var(--accent); }
[data-theme="dark"] .workspace-tabs { background:var(--bg2); border-color:var(--border); }
[data-theme="dark"] .workspace-tab { background:var(--bg); border-color:var(--border); }
[data-theme="dark"] .workspace-tab__compare-btn { background:var(--bg); border-color:var(--border); }
.compare-pane { display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid var(--border); border-radius:var(--radius-md); padding:10px; background:var(--bg); }
.compare-pane canvas { image-rendering:pixelated; border:1px solid var(--border); border-radius:4px; max-width:100%; }
.compare-pane .compare-name { font-weight:600; font-size:var(--font-sm); text-align:center; }
.compare-pane .compare-meta { font-size:var(--font-xs); color:var(--fg2); text-align:center; }
.compare-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; max-height:60vh; overflow-y:auto; padding:4px; }
.compare-picker { display:flex; flex-wrap:wrap; gap:6px; max-height:140px; overflow-y:auto; margin-bottom:10px; padding:6px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.compare-picker label { display:flex; align-items:center; gap:5px; font-size:var(--font-xs); padding:3px 6px; border-radius:3px; cursor:pointer; }
.compare-picker label:hover { background:var(--hover); }
/* ── Drop zone overlay ── */
.drop-overlay { position:absolute; inset:0; z-index:50; display:none; align-items:center; justify-content:center; background:rgba(233,69,96,.08); border:3px dashed var(--accent); pointer-events:none; }
.drop-overlay.active { display:flex; }
.drop-overlay-label { background:rgba(255,255,255,.85); color:var(--fg); padding:16px 32px; border-radius:var(--radius-lg); font-size:var(--font-lg); font-weight:600; box-shadow:0 8px 32px rgba(0,0,0,.15); }
.photo-drop-hint { text-align:center; padding:24px 16px; border:2px dashed var(--border); border-radius:var(--radius-lg); color:var(--fg2); font-size:var(--font-md); margin-bottom:8px; cursor:pointer; transition:border-color .2s, background .2s; }
.photo-drop-hint:hover, .photo-drop-hint.drag-over { border-color:var(--accent); background:rgba(233,69,96,.05); }
.photo-drop-hint.drag-over { border-style:solid; }
/* WHY: three stacked canvases so each layer redraws independently — the bead grid (slow, full
   repaint), transient overlays like trace/guide/selection/fringe (medium), and pointer
   feedback (redrawn on every mousemove) don't force each other to redraw on every frame. */
.grid-canvas { z-index:1; }
.overlay-canvas { z-index:2; pointer-events:none; }
.interact-canvas { z-index:3; cursor:crosshair; touch-action:none; }
.zoom-info { position:absolute; bottom:8px; right:8px; background:rgba(255,255,255,.85); color:var(--fg2); padding:4px 10px; border-radius:4px; font-size:var(--font-sm); z-index:10; border:1px solid var(--border); }
.coords-info { position:absolute; bottom:8px; left:8px; background:rgba(255,255,255,.85); color:var(--fg2); padding:4px 10px; border-radius:4px; font-size:var(--font-sm); z-index:10; border:1px solid var(--border); }
/* Row/Round progress counter — small persistent HUD, top-right of canvas */
.progress-widget { position:absolute; top:8px; right:8px; display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.85); color:var(--fg2); padding:4px 6px; border-radius:4px; font-size:var(--font-sm); z-index:10; border:1px solid var(--border); }
.progress-widget.progress-widget-empty { opacity:.55; }
.progress-widget button { width:22px; height:22px; padding:0; line-height:1; border:1px solid var(--border); background:var(--bg2); color:var(--fg); border-radius:3px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.progress-widget button:hover { background:var(--hover); }
.progress-widget__label { min-width:76px; text-align:center; white-space:nowrap; }
.rightpanel { width:280px; background:var(--bg2); border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto; }
.rpanel-section { padding:10px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.rpanel-section h3 { font-size:var(--font-md); color:var(--fg2); margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
.color-current { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.color-swatch { width:36px; height:36px; border-radius:var(--radius-md); border:2px solid var(--border); }
.color-name { font-size:var(--font-md); }
.color-code { font-size:var(--font-xs); color:var(--fg2); }
.palette-search { width:100%; padding:5px 8px; background:#fff; color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-sm); margin-bottom:6px; }
.palette-grid { display:grid; grid-template-columns:repeat(auto-fill,28px); gap:3px; max-height:220px; overflow-y:auto; padding:2px; }
.pal-cell { width:28px; height:28px; border-radius:4px; cursor:pointer; border:2px solid transparent; transition:border-color .1s; }
.pal-cell:hover { border-color:var(--fg); }
.pal-cell.active { border-color:var(--accent); box-shadow:0 0 4px var(--accent); }
.used-colors { margin-top:8px; }
.used-colors h4 { font-size:var(--font-xs); color:var(--fg2); margin-bottom:4px; }
.used-grid { display:flex; flex-wrap:wrap; gap:2px; }
.pattern-section { flex:0 0 auto; min-height:200px; display:flex; flex-direction:column; }
.pattern-section .rpanel-section { flex:1; display:flex; flex-direction:column; }
.pattern-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.pattern-list__item { display:flex; align-items:center; gap:var(--space-md); padding:6px 8px; background:#fff; border-radius:4px; cursor:pointer; border:1px solid transparent; transition:all .15s; }
.pattern-list__item:hover { border-color:var(--border); background:var(--hover); }
.pattern-list__item.active { border-color:var(--accent); }
.pattern-list__thumb { width:40px; height:40px; border-radius:4px; background:#eee; flex-shrink:0; image-rendering:pixelated; }
.pattern-list__info { flex:1; min-width:0; }
.pattern-list__name { font-size:var(--font-md); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pattern-list__meta { font-size:var(--font-xs); color:var(--fg2); }
.pattern-list__delete { width:28px; height:28px; border:1px solid #e0e0e0; background:#fff; color:#c0392b; cursor:pointer; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:bold; flex-shrink:0; }
.pattern-list__delete:hover { background:#c0392b; color:#fff; border-color:#c0392b; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:100; display:flex; align-items:center; justify-content:center; }
.modal { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; min-width:360px; max-width:500px; box-shadow:0 8px 32px rgba(0,0,0,.15); }
.modal h2 { font-size:16px; margin-bottom:16px; }
.modal .field { margin-bottom:12px; }
.modal .field label { display:block; font-size:var(--font-sm); color:var(--fg2); margin-bottom:4px; }
.modal .field input, .modal .field select { width:100%; padding:8px; background:#fff; color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-base); }
.modal .actions { display:flex; gap:var(--space-md); justify-content:flex-end; margin-top:16px; }
.hidden.hidden { display:none; }
.full-width { width:100%; }
.modal-photo .modal { min-width:820px; max-width:95vw; max-height:92vh; overflow-y:auto; }
.photo-body { display:flex; gap:16px; }
.photo-controls { width:240px; flex-shrink:0; max-height:70vh; overflow-y:auto; }
.photo-controls .field { margin-bottom:10px; }
.photo-controls .field label { display:block; font-size:var(--font-sm); color:var(--fg2); margin-bottom:3px; }
.photo-controls .field input, .photo-controls .field select { width:100%; padding:6px 8px; background:var(--surface,#fff); color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-md); }
.photo-controls .slider-row { display:flex; align-items:center; gap:6px; overflow:hidden; }
.photo-controls .slider-row input[type=range] { flex:1; min-width:0; max-width:calc(100% - 44px); }
.photo-controls .slider-row span { flex-shrink:0; min-width:32px; text-align:right; font-size:var(--font-sm); color:var(--fg2); }
.photo-preview-area { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.photo-preview-row { display:flex; gap:var(--space-md); flex:1; flex-wrap:wrap; }
.photo-preview-row.stacked { flex-direction:column; align-items:center; }
.preview-box { flex:1; display:flex; flex-direction:column; align-items:center; min-width:200px; }
.preview-box label { font-size:var(--font-xs); color:var(--fg2); margin-bottom:3px; font-weight:600; text-transform:uppercase; }
.preview-box canvas { border:1px solid var(--border); border-radius:4px; background:var(--surface,#fff); max-width:100%; image-rendering:pixelated; }
.photo-preview-row:not(.stacked) .preview-box canvas { max-height:400px; }
.photo-preview-row.stacked .preview-box canvas { max-height:45vh; }
.photo-status { font-size:var(--font-sm); color:var(--fg2); text-align:center; min-height:18px; }
.preview-layout-toggle { display:flex; justify-content:center; gap:4px; margin-bottom:4px; }
.preview-layout-toggle button { padding:2px 8px; font-size:11px; border:1px solid var(--border); background:var(--surface,#fff); color:var(--fg2); border-radius:3px; cursor:pointer; }
.preview-layout-toggle button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.preset-bar { display:flex; gap:4px; align-items:center; margin-bottom:10px; padding:6px 8px; background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--border); flex-wrap:wrap; }
.preset-bar label { font-size:var(--font-sm); color:var(--fg2); font-weight:600; margin-right:4px; }
.preset-bar .preset-btn { padding:3px 10px; font-size:var(--font-sm); border:1px solid var(--border); background:var(--surface,#fff); color:var(--fg); border-radius:3px; cursor:pointer; }
.preset-bar .preset-btn:hover { background:var(--hover); }
.preset-bar .preset-btn.has-preset { border-color:var(--accent); color:var(--accent); font-weight:600; }
.preset-bar .preset-save { padding:3px 8px; font-size:10px; border:1px solid var(--success); background:var(--surface,#fff); color:var(--success); border-radius:3px; cursor:pointer; }
.preset-bar .preset-save:hover { background:var(--success); color:#fff; }
.selection-rect { position:absolute; border:2px dashed var(--accent); background:rgba(233,69,96,0.08); pointer-events:none; z-index:5; }
.modal-beadcount .modal { min-width:560px; max-width:680px; }
.modal-thread .modal { min-width:480px; max-width:560px; }
.thread-result { margin-top:12px; padding:12px; background:var(--bg); border-radius:var(--radius-md); font-size:var(--font-base); line-height:1.8; }
.beadcount-bead-type { width:100%; padding:5px 8px; background:#fff; color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-sm); margin-bottom:8px; }
[data-theme="dark"] .beadcount-bead-type { background:#1e2128; color:#d4d8e0; border-color:#3a3f4a; }
.beadcount-table { width:100%; border-collapse:collapse; font-size:var(--font-md); }
.beadcount-table th { text-align:left; padding:6px 8px; background:var(--bg2); border-bottom:2px solid var(--border); cursor:pointer; font-size:var(--font-sm); color:var(--fg2); }
.beadcount-table th:hover { color:var(--accent); }
.beadcount-table td { padding:5px 8px; border-bottom:1px solid #eee; }
.beadcount-table tr.low-count { background:#fff3e0; }
.swatch-sm { display:inline-block; width:16px; height:16px; border-radius:3px; border:1px solid #ccc; vertical-align:middle; margin-right:6px; }
.trace-controls { display:flex; align-items:center; gap:6px; }
.trace-controls input[type=range] { width:80px; }
.trace-controls label { font-size:var(--font-sm); color:var(--fg2); }
.size-display { font-size:var(--font-sm); color:var(--fg2); background:rgba(255,255,255,.85); padding:4px 10px; border-radius:4px; border:1px solid var(--border); }
.modal-text .modal { min-width:400px; }
.help-panel { position:fixed; top:0; right:0; width:420px; height:100vh; background:#fff; border-left:2px solid var(--accent); z-index:200; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; box-shadow:-4px 0 24px rgba(0,0,0,.15); }
.help-panel.open { transform:translateX(0); }
.help-panel .help-panel__header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:1; }
.help-panel .help-panel__header h2 { font-size:var(--font-xl); color:var(--accent); }
.help-panel .help-panel__close { width:32px; height:32px; border:none; background:none; font-size:22px; cursor:pointer; color:var(--fg2); border-radius:4px; }
.help-panel .help-panel__close:hover { background:var(--hover); color:var(--fg); }
.help-panel .help-panel__body { padding:16px 20px; }
.help-panel .help-panel__section { margin-bottom:20px; }
.help-panel .help-panel__section h3 { font-size:var(--font-base); color:var(--accent); margin-bottom:8px; border-bottom:1px solid #eee; padding-bottom:4px; }
.help-panel .help-panel__section p, .help-panel .help-panel__section li { font-size:var(--font-md); line-height:1.6; color:var(--fg); }
.help-panel .help-panel__section ul { padding-left:18px; margin:6px 0; }
.help-panel .help-panel__section li { margin-bottom:4px; }
.help-panel kbd { display:inline-block; padding:1px 6px; background:var(--bg); border:1px solid var(--border); border-radius:3px; font-family:monospace; font-size:var(--font-sm); color:var(--fg2); }
.help-panel .help-panel__shortcuts { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:var(--font-md); }
.help-panel .help-panel__shortcuts kbd { justify-self:end; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--fg2); }
.statusbar { display:flex; align-items:center; gap:16px; padding:4px 16px; background:var(--bg2); border-top:1px solid var(--border); font-size:var(--font-sm); color:var(--fg2); flex-shrink:0; }
@keyframes fadeout { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
.modal-share .modal { min-width:460px; max-width:520px; }
.modal-share .share-options { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.modal-share .share-btn { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--border); background:var(--panel); border-radius:var(--radius-md); cursor:pointer; font-size:var(--font-base); color:var(--fg); transition:all .15s; }
.modal-share .share-btn:hover { background:var(--hover); border-color:var(--accent); }
.modal-share .share-btn .share-icon { font-size:20px; width:28px; text-align:center; }
.modal-share .share-btn .share-label { font-weight:600; }
.modal-share .share-btn .share-desc { font-size:var(--font-sm); color:var(--fg2); }
.archive-btn { width:28px; height:28px; border:1px solid #e0e0e0; background:#fff; color:var(--accent); cursor:pointer; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:var(--font-base); flex-shrink:0; }
.archive-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

[data-theme="dark"] {
  --bg: #1a1d23; --bg2: #22262e; --bg3: #2c313a;
  --fg: #d4d8e0; --fg2: #9aa2b1; --accent: #eb536c; /* KS-B-023: lightened from #e94560 for 4.5:1 text contrast */
  --panel: #282c34; --border: #3a3f4a;
  --hover: #33383f; --success: #2ecc71; /* KS-A-2: lightened for dark-theme 4.5:1 text contrast, matching Base's dark --success */
  --canvas-bg: #1e2128; --grid-line: #2e3440; --grid-major: #3d4452;
  --empty-cell: #282c34;
}
html[data-a11y-mode="large-print"][data-theme="dark"] {
  --grid-line: #5b6a80; --grid-major: #9aabc4; --border: #6b7890;
}
[data-theme="dark"] .modal { background:#282c34; border-color:#3a3f4a; }
[data-theme="dark"] .modal .field input, [data-theme="dark"] .modal .field select { background:#1e2128; color:#d4d8e0; border-color:#3a3f4a; }
[data-theme="dark"] .palette-search { background:#1e2128; color:#d4d8e0; }
[data-theme="dark"] .pattern-list__item { background:#282c34; }
[data-theme="dark"] .pattern-list__delete { background:#282c34; border-color:#3a3f4a; }
[data-theme="dark"] .help-panel { background:#282c34; }
[data-theme="dark"] .help-panel .help-panel__header { background:#282c34; }
[data-theme="dark"] .beadcount-table th { background:#22262e; }
[data-theme="dark"] .beadcount-table td { border-bottom-color:#3a3f4a; }
[data-theme="dark"] .zoom-info, [data-theme="dark"] .coords-info, [data-theme="dark"] .size-display, [data-theme="dark"] .progress-widget { background:rgba(30,33,40,.9); }
[data-theme="dark"] ::-webkit-scrollbar-track { background:#1a1d23; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#3a3f4a; }
[data-theme="dark"] .share-btn { background:#282c34; border-color:#3a3f4a; color:#d4d8e0; }
[data-theme="dark"] .archive-btn { background:#282c34; border-color:#3a3f4a; }

/* Inventory indicators */
.pal-cell.owned::after{content:'✓';position:absolute;bottom:0;right:0;font-size:8px;color:#fff;background:#2ecc71;border-radius:2px 0;padding:0 2px;line-height:1.2;}
.pal-cell.low-stock::after{content:'!';position:absolute;bottom:0;right:0;font-size:8px;color:#fff;background:#e94560;border-radius:2px 0;padding:0 2px;line-height:1.2;font-weight:700;}
.pal-cell{position:relative;}
.beadcount-missing{color:#e94560;font-weight:700;}

/* Row Work Tracker */
.work-tracker{position:fixed;bottom:20px;left:20px;background:var(--bg2,#f0f4fa);border:2px solid #27ae60;border-radius:10px;padding:14px 18px;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,.25);min-width:260px;font-family:'Segoe UI',sans-serif;display:none;}
.work-tracker .wt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.work-tracker .wt-title{color:#1a7a40;font-size:14px;font-weight:700;}
.work-tracker .wt-bar{background:var(--bg,#e8eef6);border-radius:4px;height:8px;overflow:hidden;margin:8px 0;}
.work-tracker .wt-bar-fill{height:100%;background:#27ae60;transition:width .2s;}
.work-tracker-btn.wt-active{background:#1a7a40!important;color:#fff!important;}

/* Floating Help Button */
.fab-help{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--accent,#1F4E79);color:#fff;border:none;font-size:22px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:999;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s;}
.fab-help:hover{transform:scale(1.1);background:#e94560;}
.fab-help:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
/* WCAG 2.4.7: Visible focus indicators for all interactive elements */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.tool-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pal-cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.pattern-list__item:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;}
.pattern-list__delete:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.archive-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.onboard-proj:focus-visible{outline:2px solid #e94560;outline-offset:2px;}
.onboard-skip:focus-visible{outline:2px solid var(--fg);outline-offset:2px;}
.share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.beadcount-table th button.sort-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.sort-btn{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;width:100%;text-align:left;}

/* Reduced motion — disable transitions and animations (ported from KrazyStitcher.css, KS-B-026) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .help-panel { transition:none; }
}
/* High contrast adjustments (ported from KrazyStitcher.css, KS-B-026) */
@media (forced-colors: active) {
  .btn, .tool-btn { border:1px solid ButtonText; }
  .pal-cell { border:1px solid ButtonText; }
}

/* Onboarding Welcome */
.onboard-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;display:flex;align-items:center;justify-content:center;}
.onboard-card{background:var(--bg);border-radius:16px;padding:32px 36px;max-width:560px;width:90%;box-shadow:0 12px 48px rgba(0,0,0,.35);text-align:center;}
.onboard-card h2{margin:0 0 4px;color:#e94560;font-size:24px;font-weight:800;}
.onboard-card .onboard-sub{color:var(--fg2);font-size:14px;margin-bottom:20px;}
.onboard-card h3{margin:16px 0 10px;font-size:14px;color:var(--fg);text-transform:uppercase;letter-spacing:1px;}
.onboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.onboard-proj{background:var(--bg2);border:2px solid var(--border);border-radius:10px;padding:14px 8px;cursor:pointer;transition:border-color .15s,transform .15s;}
.onboard-proj:hover{border-color:#e94560;transform:translateY(-2px);}
.onboard-proj .proj-icon{font-size:28px;margin-bottom:4px;}
.onboard-proj .proj-name{font-size:13px;font-weight:700;color:var(--fg);}
.onboard-proj .proj-size{font-size:11px;color:var(--fg2);margin-top:2px;}
.onboard-skip{background:none;border:none;color:var(--fg2);font-size:13px;cursor:pointer;text-decoration:underline;margin-top:4px;}
.onboard-skip:hover{color:var(--fg);}

/* Weaving Guide highlight */
.guide-btn.guide-active { background: #e94560; color: #fff; }
.fringe-btn.fringe-active { background: #e94560; color: #fff; }
.tubular-btn.tubular-active { background: #e94560; color: #fff; }

/* Tubular Preview Modal */
.modal-tubular .modal { min-width:540px; max-width:640px; }
.tubular-preview-wrap { position:relative; width:100%; height:360px; perspective:900px; display:flex; align-items:center; justify-content:center; background:var(--bg); border-radius:var(--radius-lg); overflow:hidden; margin:12px 0; }
.tubular-cylinder { transform-style:preserve-3d; position:relative; }
.tubular-flat-wrap { display:flex; gap:2px; align-items:flex-start; justify-content:center; margin:12px 0; overflow-x:auto; background:var(--bg); border-radius:var(--radius-lg); padding:12px; }
.tubular-flat-wrap canvas { border:1px solid var(--border); border-radius:4px; image-rendering:pixelated; }
.seam-label { position:absolute; top:4px; font-size:var(--font-xs); font-weight:700; color:#e94560; text-transform:uppercase; letter-spacing:1px; }
.tubular-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.tubular-controls label { font-size:var(--font-sm); color:var(--fg2); }
.tubular-controls input[type=range] { width:100px; }
.tubular-controls select { padding:3px 6px; font-size:var(--font-sm); border:1px solid var(--border); border-radius:4px; background:var(--panel); color:var(--fg); }

/* Increase/Decrease Indicators */
.shaping-legend { display:flex; gap:16px; align-items:center; font-size:var(--font-sm); color:var(--fg2); margin-top:8px; }
.shaping-legend span { display:flex; align-items:center; gap:4px; }

/* ===== Tier 5: Scale Modal ===== */
.modal-scale .modal { min-width:380px; max-width:440px; }
.scale-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.scale-fields label { font-size:var(--font-sm); color:var(--fg2); }
.scale-fields input[type=number] { width:100%; padding:4px 8px; font-size:var(--font-sm); border:1px solid var(--border); border-radius:4px; background:var(--bg2); color:var(--fg); }
.scale-fields input[type=number]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ===== Tier 5: Harmony Modal ===== */
.modal-harmony .modal { min-width:520px; max-width:620px; }
.harmony-layout { display:flex; gap:16px; margin:10px 0; }
.harmony-wheel-wrap { flex:0 0 220px; display:flex; flex-direction:column; align-items:center; }
.harmony-wheel { border-radius:50%; cursor:crosshair; border:2px solid var(--border); }
.harmony-wheel:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.harmony-right { flex:1; min-width:200px; }
.harmony-type-sel { width:100%; padding:4px 8px; font-size:var(--font-sm); border:1px solid var(--border); border-radius:4px; background:var(--bg2); color:var(--fg); margin-bottom:8px; }
.harmony-type-sel:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.harmony-suggestions { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-height:260px; overflow-y:auto; }
.harmony-swatch { display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:var(--radius-sm); border:1px solid var(--border); cursor:pointer; background:var(--bg); transition:background 0.15s; }
.harmony-swatch:hover { background:var(--hover); }
.harmony-swatch:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.harmony-swatch .swatch-box { width:24px; height:24px; border-radius:3px; border:1px solid rgba(0,0,0,0.15); flex-shrink:0; }
.harmony-swatch .swatch-info { font-size:var(--font-xs); color:var(--fg); line-height:1.3; }
.harmony-swatch .swatch-info small { color:var(--fg2); }

/* ===== Tier 5: Layer Panel ===== */
.layer-panel { border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }
.layer-panel h3 { font-size:14px; margin:0 0 6px; cursor:pointer; user-select:none; display:flex; align-items:center; gap:4px; }
.layer-panel h3 .caret { transition:transform 0.2s; display:inline-block; }
.layer-panel.collapsed .layer-list, .layer-panel.collapsed .layer-actions { display:none; }
.layer-panel.collapsed .caret { transform:rotate(-90deg); }
.layer-list { display:flex; flex-direction:column; gap:3px; max-height:200px; overflow-y:auto; margin-bottom:6px; }
.layer-item { display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:var(--radius-sm); border:1px solid transparent; font-size:var(--font-xs); background:var(--bg); cursor:pointer; }
.layer-item:hover { background:var(--hover); }
.layer-item.active { border-color:var(--accent); background:var(--bg2); }
.layer-item:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.layer-item .layer-eye { cursor:pointer; font-size:14px; opacity:0.7; background:none; border:none; padding:0; color:var(--fg); }
.layer-item .layer-eye:hover { opacity:1; }
.layer-item .layer-eye:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.layer-item .layer-lock { cursor:pointer; font-size:12px; opacity:0.5; background:none; border:none; padding:0; color:var(--fg); }
.layer-item .layer-lock:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.layer-item .layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-item .layer-opacity { width:50px; height:4px; }
.layer-actions { display:flex; flex-wrap:wrap; gap:4px; }

/* ===== Tier 5: Template Library ===== */
.modal-templates .modal { min-width:560px; max-width:700px; }
.modal-starter .modal { min-width:640px; max-width:840px; }
.modal-compare .modal { min-width:640px; max-width:960px; }
.starter-cat-note { font-size:11px; color:var(--fg2); margin:-4px 0 8px; }
.template-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(60px, 1fr)); gap:8px; max-height:400px; overflow-y:auto; padding:4px; }
.template-cell { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; background:var(--bg); transition:background 0.15s, border-color 0.15s; }
.template-cell:hover { background:var(--hover); border-color:var(--accent); }
.template-cell:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.template-cell canvas { image-rendering:pixelated; border:1px solid var(--border); border-radius:2px; }
.template-cell span { font-size:10px; color:var(--fg2); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.template-tabs { display:flex; gap:4px; margin-bottom:8px; }
.template-tabs button { padding:4px 10px; font-size:var(--font-xs); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--fg); cursor:pointer; }
.template-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.template-tabs button.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ===== Tier 5: Import External ===== */
.modal-import .modal { min-width:480px; max-width:580px; }
.import-preview { margin:10px 0; padding:10px; background:var(--bg); border-radius:var(--radius-md); border:1px solid var(--border); min-height:60px; }
.import-preview canvas { image-rendering:pixelated; max-width:100%; border:1px solid var(--border); border-radius:2px; }

/* ===== Tier 5: Guide Enhancements ===== */
.guide-minimap { margin-top:8px; border:1px solid var(--border); border-radius:4px; image-rendering:pixelated; }
.guide-autoplay { display:flex; align-items:center; gap:6px; margin-top:6px; }
.guide-autoplay button, .guide-autoplay select { font-size:11px; padding:2px 6px; }
.guide-autoplay button:focus-visible, .guide-autoplay select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ===== Dark mode for all new Tier 5 elements ===== */
[data-theme="dark"] .scale-fields input[type=number] { background:var(--bg3); border-color:var(--border); color:var(--fg); }
[data-theme="dark"] .harmony-wheel { border-color:var(--border); }
[data-theme="dark"] .harmony-swatch { background:var(--bg); border-color:var(--border); }
[data-theme="dark"] .harmony-swatch:hover { background:var(--hover); }
[data-theme="dark"] .harmony-type-sel { background:var(--bg3); }
[data-theme="dark"] .layer-item { background:var(--bg); }
[data-theme="dark"] .layer-item.active { background:var(--bg2); }
[data-theme="dark"] .template-cell { background:var(--bg); border-color:var(--border); }
[data-theme="dark"] .template-cell:hover { background:var(--hover); }
[data-theme="dark"] .template-tabs button { background:var(--bg); border-color:var(--border); }
[data-theme="dark"] .import-preview { background:var(--bg); border-color:var(--border); }

/* Ctrl+Shift+B "Report a Bug or Request a Feature" modal (Base, Pro, Studio share this markup/JS — src-shared/bug-report.js) */
.modal .field textarea {{ width:100%; padding:8px; background:#fff; color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-base); font-family:inherit; resize:vertical; }}
[data-theme="dark"] .modal .field textarea {{ background:#1e2128; color:#d4d8e0; border-color:#3a3f4a; }}
.bugreport-dropzone {{ border:2px dashed var(--border); border-radius:var(--radius-md); padding:16px; text-align:center; font-size:var(--font-sm); color:var(--fg2); cursor:pointer; transition:border-color .15s,background .15s; }}
.bugreport-dropzone:hover, .bugreport-dropzone.dragover {{ border-color:var(--accent); background:var(--hover); }}
.bugreport-dropzone img {{ max-width:100%; max-height:120px; border-radius:var(--radius-sm); display:block; margin:0 auto 8px; }}
.bugreport-charcount {{ font-size:var(--font-xs); color:var(--fg2); text-align:right; margin-top:2px; }}
#fs-splash button:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:4px;opacity:1;}
#main:focus{outline:none;}