* { 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;
  --surface: #ffffff; --surface-dim: #eee; --surface-border: #e0e0e0;
  --overlay-bg: rgba(255,255,255,.85);
  --danger: #c0392b; --warning-bg: #fff3e0;
  --modal-shadow: 0 8px 32px rgba(0,0,0,.15);
  --modal-overlay: rgba(0,0,0,.3);
  --font-xs: 10px;
  --font-sm: 12px;
  --font-md: 13px;
  --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;
}
/* ── Dark theme ── */
html[data-theme="dark"] {
  --bg: #1a1e2e; --bg2: #232838; --bg3: #2c3344;
  --fg: #e0e4ec; --fg2: #8a94a8; --accent: #eb536c; /* KS-B-023: lightened from #e94560 for 4.5:1 text contrast */
  --panel: #1e2335; --border: #3a4258;
  --hover: #2e3548; --success: #2ecc71;
  --canvas-bg: #1a1e28; --grid-line: #3a4258; --grid-major: #4a5678;
  --empty-cell: #2a2f3e;
  --surface: #252a3a; --surface-dim: #2c3344; --surface-border: #3a4258;
  --overlay-bg: rgba(30,35,53,.88);
  --danger: #e74c3c; --warning-bg: #3a2e1a;
  --modal-shadow: 0 8px 32px rgba(0,0,0,.5);
  --modal-overlay: rgba(0,0,0,.55);
}
/* Text size accessibility — three levels: default, medium (+2px), large (+4px) */
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-group { display:inline-flex; gap:1px; margin:0 4px; }
.text-size-group .btn { min-width:28px; padding:6px 8px; 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; }
.text-size-group .btn.active-size { background:var(--accent); color:#fff; }
.theme-toggle { font-size:16px; min-width:32px; padding:6px 8px; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg); color: var(--fg); display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.canvas-wrap, .toolpanel, .topbar { user-select:none; }
.topbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:6px 16px; background:var(--bg2); border-bottom:1px solid var(--border); min-height:48px; flex-shrink:0; }
.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); }
/* ── Toolbar dropdown groups ── */
.tb-group { display:flex; gap:inherit; align-items:center; }
.tb-trigger { display:none; font-weight:600; }
.tb-menu { display:flex; gap:inherit; align-items:center; }
.tb-menu-sep { display:none; }
@media (max-width:1024px) {
  .topbar { gap:4px 6px; padding:4px 10px; min-height:40px; flex-wrap:nowrap; overflow-x:auto; }
  .topbar h1 { font-size:15px; }
  .topbar .sep { display:none; }
  .tb-group { position:relative; flex-shrink:0; }
  .tb-trigger { display:inline-flex; padding:5px 10px; font-size:12px; white-space:nowrap; }
  .tb-menu { display:none; position:absolute; top:100%; left:0; flex-direction:column; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 4px 16px rgba(0,0,0,.18); z-index:50; min-width:170px; padding:4px; }
  .tb-group.open .tb-menu { display:flex; }
  .tb-menu .btn { width:100%; text-align:left; border:none; border-radius:var(--radius-sm); padding:8px 12px; font-size:13px; justify-content:flex-start; }
  .tb-menu .btn:hover { background:var(--hover); border:none; }
  .tb-menu-sep { display:block; border:none; border-top:1px solid var(--border); margin:4px 8px; }
  .tb-tablet-hide { display:none !important; }
  .topbar .btn { padding:6px 10px; font-size:12px; flex-shrink:0; }
  .topbar .lbl { font-size:11px; }
  .topbar .ctrl { width:auto; }
}
.btn { padding:6px 14px; border:1px solid var(--border); background:var(--panel); color:var(--fg); border-radius:4px; cursor:pointer; font-size:var(--font-md); 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:6px 12px; font-size:var(--font-sm); }
.btn.danger { border-color:var(--danger); }
.btn.danger:hover { background:var(--danger); color:#fff; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
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:40px; height:40px; 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; } /* KS-C-clip-fix: without this, the Undo/Redo label span inherited the 18px+ icon font-size and overflowed the 52px toolpanel past the left edge of the viewport */
.tool-btn:hover:not(:disabled) { background:var(--hover); color:var(--fg); }
.tool-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.tool-btn:disabled { opacity:.5; cursor:not-allowed; }
.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; }
/* ── 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:var(--overlay-bg); color:var(--fg); padding:16px 32px; border-radius:var(--radius-lg); font-size:var(--font-lg); font-weight:600; box-shadow:var(--modal-shadow); }
.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: split into three stacked canvases so each redraws independently — the bead grid (slow,
   full repaint), transient overlays like trace/selection (medium), and pointer feedback (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-input::-webkit-inner-spin-button,.zoom-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;}
.zoom-info { position:absolute; bottom:8px; right:8px; background:var(--overlay-bg); 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:var(--overlay-bg); 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 so it never sits over the zoom/coords badges ── */
.progress-widget { position:absolute; top:8px; right:8px; display:flex; align-items:center; gap:4px; background:var(--overlay-bg); 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:11px; color:var(--fg2); }
.palette-search { width:100%; padding:5px 8px; background:var(--surface); 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); }
.pal-cell--counted { position:relative; overflow:visible; }
.pal-cell__count { position:absolute; bottom:-4px; right:-4px; min-width:14px; padding:0 2px; background:rgba(20,20,20,.82); color:#fff; font-size:8px; line-height:14px; text-align:center; border-radius:3px; pointer-events:none; font-family:'Segoe UI',Tahoma,sans-serif; }
html[data-theme="dark"] .pal-cell__count { background:rgba(240,240,240,.85); color:#111; }
.symbol-chosen-list { display:flex; flex-wrap:wrap; gap:6px; min-height:36px; padding:8px; background:var(--surface-dim,var(--bg)); border:1px solid var(--border); border-radius:6px; }
.symbol-empty-hint { font-size:12px; color:var(--fg2); margin:0; }
.symbol-chip { display:inline-flex; align-items:center; gap:4px; background:var(--panel,#fff); border:1px solid var(--border); border-radius:14px; padding:3px 6px; font-size:13px; }
.symbol-chip__num { font-size:10px; color:var(--fg2); min-width:14px; text-align:right; }
.symbol-chip__glyph { font-size:15px; min-width:16px; text-align:center; }
.symbol-chip__btn { border:none; background:none; cursor:pointer; color:var(--fg2); width:18px; height:18px; line-height:1; border-radius:3px; font-size:11px; padding:0; }
.symbol-chip__btn:hover:not(:disabled) { background:var(--hover); color:var(--fg); }
.symbol-chip__btn:disabled { opacity:.3; cursor:default; }
.symbol-chip__remove:hover { background:#c0392b; color:#fff; }
.symbol-group-label { font-size:11px; color:var(--fg2); text-transform:uppercase; letter-spacing:.5px; margin:8px 0 4px; }
.symbol-group-row { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:4px; }
.symbol-pick-btn { width:28px; height:28px; border:1px solid var(--border); background:var(--panel,#fff); border-radius:4px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; color:var(--fg); }
.symbol-pick-btn:hover { border-color:var(--accent); }
.symbol-pick-btn--chosen { background:var(--accent); border-color:var(--accent); color:#fff; }
.symbol-pick-btn:focus-visible, .symbol-chip__btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.used-colors { margin-top:8px; }
.used-colors h4 { font-size:11px; 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:var(--surface); 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:var(--surface-dim); 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:11px; color:var(--fg2); }
.pattern-list__delete { width:28px; height:28px; border:1px solid var(--surface-border); background:var(--surface); color:var(--danger); 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:var(--danger); color:#fff; border-color:var(--danger); }
.modal-overlay { position:fixed; inset:0; background:var(--modal-overlay); z-index:100; display:flex; align-items:center; justify-content:center; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; min-width:360px; max-width:500px; box-shadow:var(--modal-shadow); }
.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:var(--surface); 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; }
/* Spacing utility classes (--space-* token scale) — used by modal markup in KrazyStitcher.html in place of ad-hoc inline margin/padding values, per KS-C-027 */
.mt-md { margin-top:var(--space-md); }
.mt-lg { margin-top:var(--space-lg); }
.mb-sm { margin-bottom:var(--space-sm); }
.mb-md { margin-bottom:var(--space-md); }
.mb-lg { margin-bottom:var(--space-lg); }
.my-md { margin:var(--space-md) 0; }
.my-lg { margin:var(--space-lg) 0; }
.p-xs { padding:var(--space-xs); }
.p-md { padding:var(--space-md); }
.p-lg { padding:var(--space-lg); }
.p-xs-md { padding:var(--space-xs) var(--space-md); }
.full-width { width:100%; }
.modal-photo .modal { min-width:820px; max-width:900px; max-height:90vh; overflow-y:auto; }
.photo-body { display:flex; gap:16px; }
.photo-controls { width:240px; flex-shrink:0; }
.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); 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; }
.photo-controls .slider-row input[type=range] { flex:1; }
.photo-controls .slider-row span { 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; }
.photo-preview-row { display:flex; gap:var(--space-md); flex:1; }
.preview-box { flex:1; display:flex; flex-direction:column; align-items:center; }
.preview-box label { font-size:11px; 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); max-width:100%; max-height:280px; image-rendering:pixelated; }
.photo-status { font-size:var(--font-sm); color:var(--fg2); text-align:center; min-height:18px; }
.photo-spinner { display:inline-block; width:14px; height:14px; margin-right:6px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; vertical-align:middle; animation:photo-spin .7s linear infinite; }
@keyframes photo-spin { to { transform:rotate(360deg); } }
.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:500px; max-width:600px; }
.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 var(--surface-dim); }
.beadcount-table tr.low-count { background:var(--warning-bg); }
.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:var(--overlay-bg); padding:4px 10px; border-radius:4px; border:1px solid var(--border); }
.modal-text .modal { min-width:400px; }
.help-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:199; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.help-backdrop.open { opacity:1; pointer-events:auto; }
.help-panel { position:fixed; top:0; right:0; width:420px; max-width:90vw; height:100vh; background:var(--surface); 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); }
@keyframes help-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(233,69,96,.6);} 50%{box-shadow:0 0 8px 4px rgba(233,69,96,.4);} }
.tool-btn.help-pulse { animation:help-pulse 1.5s ease-in-out 3; }
.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:var(--surface); 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 var(--surface-dim); 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; }
* { scrollbar-width:thin; scrollbar-color:var(--border) var(--bg); }
::-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); }
html[data-theme="dark"] .swatch-sm { border-color:var(--border); }
html[data-theme="dark"] .pal-cell { border-color:transparent; }
html[data-theme="dark"] .pal-cell:hover { border-color:var(--fg); }
html[data-theme="dark"] select.ctrl, html[data-theme="dark"] input.ctrl { background:var(--surface); color:var(--fg); }
html[data-theme="dark"] option { background:var(--surface); color:var(--fg); }
.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 var(--surface-border); background:var(--surface); 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); }

/* ── WCAG & Utility Classes ── */
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:#fff;padding:8px 16px;z-index:9999;font-size:14px;text-decoration:none;border-radius:0 0 4px 0;}.skip-link:focus{top:0;}
/* ── WCAG 2.1 AA Accessibility ── */
/* Focus indicators — visible ring on all interactive elements */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tool-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; box-shadow:0 0 0 3px rgba(233,69,96,.25); }
.pal-cell:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.modal:focus-visible { outline:none; } /* modal itself doesn't need ring */
/* Reduced motion — disable transitions and animations */
@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 */
@media (forced-colors: active) {
  .btn, .tool-btn { border:1px solid ButtonText; }
  .pal-cell { border:1px solid ButtonText; }
}
/* Responsive: tablet — collapse right panel behind toggle */
.panel-toggle { display:none; position:fixed; z-index:90; background:var(--accent); color:#fff; border:none; border-radius:4px 0 0 4px; cursor:pointer; font-size:18px; padding:10px 8px; min-width:24px; box-shadow:-2px 0 8px rgba(0,0,0,.15); }
.panel-toggle.rpanel-btn { right:0; top:50%; transform:translateY(-50%); writing-mode:vertical-lr; }
.panel-toggle.tpanel-btn { bottom:0; left:50%; transform:translateX(-50%); writing-mode:horizontal-tb; border-radius:4px 4px 0 0; }
@media (max-width:768px) {
  .panel-toggle.rpanel-btn { display:block; }
  .rightpanel { position:fixed; right:0; top:0; height:100vh; z-index:89; transform:translateX(100%); transition:transform .2s ease; }
  .rightpanel.open { transform:translateX(0); }
  .toolpanel { width:44px; }
  .tool-btn { width:44px; height:44px; font-size:16px; } /* KS-C-023: was 34x34, below WCAG 2.2 target-size guidance at this breakpoint */
}
/* ── Utility classes (extracted from inline styles) ── */
.initially-hidden { display:none; }
.spacer { flex:1; }
.flex-1 { flex:1; }
.hint-text { font-size:13px; color:var(--fg2); margin-bottom:12px; }
.hint-text-sm { font-size:var(--font-sm); color:var(--fg2); margin-bottom:10px; }
.text-muted-xs { font-size:11px; color:var(--fg2); }
.text-muted { color:var(--fg2); }
.text-muted-sm { font-size:12px; color:var(--fg2); }
.sidebar-heading { font-size:17px; border:none; margin:0 0 8px; padding:0; }
.result-box { padding:12px; background:var(--bg); border-radius:6px; font-size:14px; line-height:1.8; }
.scroll-box { max-height:400px; overflow-y:auto; }
.scroll-box-sm { max-height:240px; overflow-y:auto; margin:8px 0; font-size:13px; }
.modal-md { min-width:400px; max-width:480px; }
.modal-center { text-align:center; }
.modal-title-accent { color:var(--accent); }
.btn-primary { background:var(--accent); color:#fff; font-weight:700; }
.btn-primary:hover { filter:brightness(1.1); }
.actions-center { justify-content:center; }
.flex-row { display:flex; gap:8px; }
.flex-row-lg { display:flex; gap:12px; align-items:end; margin-bottom:8px; }
.version-label { font-size:10px; color:var(--fg2); margin-left:-8px; align-self:flex-end; margin-bottom:4px; }
.about-body { font-size:14px; line-height:1.7; text-align:left; padding:12px; background:var(--bg); border-radius:6px; margin-bottom:16px; }
.about-body p { margin-bottom:10px; }
.about-body p:last-child { margin-bottom:0; }
.license-input { width:100%; padding:12px; font-size:16px; font-family:monospace; text-align:center; border:2px solid var(--border); border-radius:6px; background:var(--surface); color:var(--fg); letter-spacing:2px; }
.welcome-overlay { z-index:300; background:rgba(0,0,0,.5); }
.zoom-input { width:52px; background:rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:4px; text-align:center; font-size:12px; padding:6px 4px; -moz-appearance:textfield; appearance:textfield; }
.zoom-slider { width:100px; margin-left:6px; vertical-align:middle; accent-color:var(--accent,#e94560); cursor:pointer; }
.full-width-mt { width:100%; margin-top:6px; }
.beadcount-total { margin-top:8px; font-weight:600; font-size:14px; }
@media (max-width:480px) {
  .panel-toggle.tpanel-btn { display:block; }
  .toolpanel { position:fixed; bottom:0; left:0; right:0; height:48px; width:100%; flex-direction:row; z-index:89; border-right:none; border-top:1px solid var(--border); transform:translateY(100%); transition:transform .2s ease; overflow-x:auto; overflow-y:hidden; }
  .toolpanel.open { transform:translateY(0); }
  .tool-sep { width:1px; height:30px; margin:0 2px; }
  .main { flex-direction:column; }
  .canvas-wrap { height:calc(100vh - 90px); }
}

/* 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:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:4px; font-size:var(--font-base); font-family:inherit; resize:vertical; }
.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; }