:root,
[data-theme="ume"] {
  --bg:#211420; --panel:#2c1b2e; --fg:#f3d9ec; --muted:rgba(243,217,236,.62);
  --border:#523450; --accent:#e98ab5; --accent-fg:#2a162c;
  --cell-empty:#3a2640; --grid-gap:#180e19; --shadow:0 8px 24px rgba(0,0,0,.35);
  --paper:#faf6ee; --warn:#b5542a; --thread-blue:#86d7f5;
}
[data-theme="midnight"] {
  --bg:#0d1117; --panel:#161b22; --fg:#e6edf3; --muted:rgba(230,237,243,.6);
  --border:#30363d; --accent:#ff7eb6; --accent-fg:#1a0e15;
  --cell-empty:#1c2129; --grid-gap:#090c10; --shadow:0 8px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);background:var(--bg);line-height:1.45;display:flex;flex-direction:column;overflow:hidden}

/* Header */
.site-header{display:flex;align-items:center;gap:1rem;padding:.6rem 1.1rem;background:var(--panel);border-bottom:1px solid var(--border);flex:0 0 auto}
.logo{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--fg);text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent);font-style:italic}
.tagline{flex:1;text-align:center;font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-toggle{padding:.4rem .75rem;font-size:.82rem;border-radius:999px;background:transparent;color:var(--fg);border:1px solid var(--border);cursor:pointer;white-space:nowrap}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle.icon-only{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;border-radius:50%}
.icon-btn{padding:.35rem .55rem}
#toggle-controls{border:none;background:transparent;font-size:1.55rem;line-height:1;padding:0 4px;width:40px;height:40px;display:none;align-items:center;justify-content:center;border-radius:8px}
#toggle-controls:hover{background:rgba(255,255,255,.06);border-color:transparent;color:var(--accent)}
@media(max-width:1024px){#toggle-controls{display:inline-flex}}
@media(min-width:1025px){body.hide-controls .controls{flex-basis:340px;opacity:1}}

/* Layout - tablet/desktop first */
.designer{flex:1 1 auto;min-height:0;display:flex;gap:.9rem;padding:.9rem}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.controls{flex:0 0 360px;display:flex;flex-direction:column;gap:.85rem;padding:1rem;overflow-y:auto;overflow-x:hidden;min-width:0;will-change:flex-basis,opacity;transition:flex-basis 440ms cubic-bezier(0.32,0,0.67,0),opacity 360ms ease,padding 440ms cubic-bezier(0.32,0,0.67,0),border-width 440ms ease,transform 440ms cubic-bezier(0.32,0,0.67,0)}
body.hide-controls .controls{flex-basis:0;opacity:0;padding-left:0;padding-right:0;border-width:0;overflow:hidden;transform:translateX(-12px)}
.canvas{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;padding:.8rem;overflow:hidden}
.hint{font-size:.8rem;color:var(--muted);line-height:1.45}
.hint.small{font-size:.78rem}
.hint em{font-style:italic}

/* Cards / accordion */
.card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.02)}
.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.75rem .9rem 0 .9rem;background:transparent;border:none;color:var(--fg);cursor:pointer;border-radius:0}
.accordion-header h2{font-size:.95rem;font-weight:700}
.chevron{font-size:1rem;color:var(--accent);transition:transform 380ms cubic-bezier(0.32,0,0.67,0)}
.accordion.is-open .chevron{transform:rotate(180deg)}
.accordion-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 420ms cubic-bezier(0.32,0,0.67,0),opacity 340ms ease;overflow:hidden}
.accordion-body-inner{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:.6rem;padding:.65rem .9rem .9rem}
.accordion.is-open .accordion-body{grid-template-rows:1fr;opacity:1}

/* Config table - roomy for tablet fingers */
table.config{width:100%;border-collapse:collapse;font-size:.85rem}
table.config th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 6px;border-bottom:1px solid var(--border)}
table.config td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
table.config th:nth-child(1),table.config td:nth-child(1){width:10%}
table.config th:nth-child(2),table.config td:nth-child(2){width:18%}
table.config th:nth-child(3),table.config td:nth-child(3){width:30%}
table.config th:nth-child(4),table.config td:nth-child(4){width:30%}
table.config th:nth-child(5),table.config td:nth-child(5){width:12%}
.code-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:7px;background:var(--fg);color:var(--bg);font-family:ui-monospace,monospace;font-size:.78rem;font-weight:700}
input[type=color]{width:100%;max-width:44px;height:30px;border:1px solid var(--border);border-radius:7px;padding:0;background:none;cursor:pointer}
input[type=text],input[type=number],select{padding:.4rem .5rem;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--fg);font:inherit;font-size:.85rem;min-height:36px}
table.config input[type=text]{width:100%}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.remove-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1.2rem;line-height:1;padding:4px 8px;border-radius:7px}
.remove-x:hover{background:#a23b4e;color:#fff}

/* Palette */
.palette{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.4rem}
.swatch{width:40px;height:40px;border-radius:10px;border:3px solid transparent;cursor:pointer;flex:none}
.swatch.active{border-color:var(--accent);transform:scale(1.06);box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--accent)}
.swatch-label{font-size:.65rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;height:100%}

/* Toggle */
.option-block{display:flex;flex-direction:column;gap:.35rem}
.option-block.inline{flex-direction:row;align-items:center;gap:.6rem}
.option-block.inline input{width:90px}
.round-row-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:.2rem 0}
.round-row-toggle .toggle-label{font-size:.85rem;font-weight:600;color:var(--muted)}
.round-row-toggle .toggle-label.active{color:var(--accent)}
.switch-track{position:relative;display:inline-block;width:46px;height:26px;border-radius:999px;background:var(--border);transition:background .15s;flex:none}
.round-row-toggle[aria-checked="true"] .switch-track{background:var(--accent)}
.switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.round-row-toggle[aria-checked="true"] .switch-knob{transform:translateX(20px)}

/* Grid controls */
.grid-controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:.85rem}
.grid-controls input{width:76px}
.actions{display:flex;gap:.5rem;margin-top:auto;padding-top:.4rem}
button{font-family:inherit;cursor:pointer;border:none;border-radius:999px;background:var(--accent);color:var(--accent-fg);padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;min-height:36px}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{font-weight:700}
.ghost-btn{background:transparent;border:1.5px solid var(--border);color:var(--fg)}
.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}
button.small{padding:.35rem .8rem;font-size:.8rem;min-height:32px}
button.secondary{background:transparent;border:1.5px solid var(--border);color:var(--fg)}

/* Legend */
.legend-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:.5rem}
.legend-card{display:flex;flex-direction:column;width:56px;border:1px solid var(--border);border-radius:7px;overflow:hidden;flex:none;background:var(--bg)}
.legend-color{height:14px}
.legend-info{display:flex}
.legend-num,.legend-stitch{flex:1;text-align:center;padding:3px 0;font-family:ui-monospace,monospace;font-size:.7rem}
.legend-num{font-weight:700;border-right:1px solid var(--border)}
.legend-stitch{color:var(--muted)}

/* Zoom bar */
.zoom-bar{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.zoom-split{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.zoom-split .zoom-btn{border:none;border-radius:0;width:38px;min-height:32px}
.zoom-split .zoom-btn:first-child{border-right:1px solid var(--border)}
.code-entry-indicator{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--muted);min-height:1.1em;text-align:center;margin-top:.3rem}

/* Grid */
#grid-holder{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:6px;background:rgba(0,0,0,.15);border-radius:10px;border:1px solid var(--border)}
#grid{display:grid;gap:2px;background:var(--grid-gap);padding:2px;width:fit-content;touch-action:none}
.cell{width:var(--cell,28px);height:var(--cell,28px);background:var(--cell-empty);cursor:crosshair;border-radius:4px;display:flex;align-items:flex-end;justify-content:flex-end;font-family:ui-monospace,monospace;font-size:.6rem;color:rgba(255,255,255,.7);padding:1px 2px;user-select:none}
.cell.filled{color:rgba(0,0,0,.55)}
.cell.unknown{background:repeating-linear-gradient(45deg,#a23b4e,#a23b4e 4px,#fff 4px,#fff 8px)}
.row-label{width:28px;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;font-size:.7rem;color:var(--muted);font-family:ui-monospace,monospace}

/* Dialog */
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--border);border-radius:14px;padding:1.3rem;width:min(680px,92vw);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
dialog pre{white-space:pre-wrap;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:1rem;font-size:.82rem;max-height:55vh;overflow-y:auto;margin-bottom:.8rem;font-family:ui-monospace,monospace}
.dialog-actions{display:flex;gap:.6rem;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.flash{font-size:.8rem;color:var(--accent)}
.dialog-stale{display:none;color:var(--warn)}
.dialog-stale.visible{display:block;margin-top:.6rem}

/* Fullscreen */
.fs-overlay{display:none;position:fixed;inset:0;background:var(--bg);z-index:1000;padding:1rem;overflow:auto}
.fs-overlay.active{display:flex;flex-direction:column;align-items:center}
.fs-overlay #grid-holder{flex:1;width:100%}
.fs-exit{position:fixed;top:12px;right:12px;width:38px;height:38px;border-radius:10px;z-index:1001}

/* Crop dialog */
#crop-dialog{width:min(860px,94vw);padding:1.1rem}
.crop-bar{display:flex;align-items:center;gap:.6rem;margin:.6rem 0;flex-wrap:wrap}
#cropViewport{position:relative;overflow:hidden;background:#0f0f0f;border-radius:10px;border:1px solid var(--border);display:flex;justify-content:center;align-items:center;padding:12px;min-height:220px;max-height:58vh}
#cropStage{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:54vh}
#cropImage{max-width:100%;max-height:54vh;display:block;user-select:none;-webkit-user-drag:none;touch-action:none}
#cropBox{position:absolute;border:2px dashed var(--accent);box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move;touch-action:none}
.crop-handle{position:absolute;width:18px;height:18px;background:var(--accent);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.crop-handle[data-h="nw"]{left:-9px;top:-9px;cursor:nwse-resize}
.crop-handle[data-h="ne"]{right:-9px;top:-9px;cursor:nesw-resize}
.crop-handle[data-h="sw"]{left:-9px;bottom:-9px;cursor:nesw-resize}
.crop-handle[data-h="se"]{right:-9px;bottom:-9px;cursor:nwse-resize}
@media(max-width:600px){.crop-handle{width:22px;height:22px}.crop-handle[data-h="nw"]{left:-11px;top:-11px}.crop-handle[data-h="ne"]{right:-11px;top:-11px}.crop-handle[data-h="sw"]{left:-11px;bottom:-11px}.crop-handle[data-h="se"]{right:-11px;bottom:-11px}}

@media(prefers-reduced-motion:reduce){
  .controls,.accordion-body,.chevron{transition:none}
}
/* Narrow: keep sidebar scrollable, tagline hidden */
@media(max-width:760px){
  .tagline{display:none}
  .designer{flex-direction:column;overflow:auto}
  .controls{flex:0 0 auto;max-height:none}
  .canvas{flex:0 0 auto;min-height:320px}
  body{overflow:auto}
}