:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #f4f1e9;
  --muted: #a5a39d;
  --panel: #161817;
  --panel-2: #1d201e;
  --line: #30342f;
  --accent: #d6ff48;
  --accent-dark: #1b2300;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; min-width: 320px; background: #0c0e0d; color: var(--ink); }
button, input, select { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }

.app-shell { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.topbar { height: 70px; padding: 0 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.brand-group { flex:none; display:flex; align-items:center; gap:12px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 17px; letter-spacing: -.02em; }
.brand b { color: var(--accent); }
.brand-mark { width: 27px; height: 27px; border: 2px solid var(--accent); border-radius: 50%; display: grid; place-items: center; }
.brand-mark span { width: 8px; height: 8px; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 -7px 0 -2px var(--accent), 0 7px 0 -2px var(--accent), 7px 0 0 -2px var(--accent), -7px 0 0 -2px var(--accent); }
.theme-toggle { --bulb-fill:#d6ff482b; width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid #363a35; border-radius:50%; background:#191c1a; color:#d6ff48; cursor:pointer; transition:color .15s,border-color .15s,background .15s; }
.theme-toggle:hover { border-color:currentColor; }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .bulb-glass { fill:var(--bulb-fill); }
body[data-theme="light"] .theme-toggle { --bulb-fill:#ffd84d; color:#9a6900; background:#fff7cf; }
body[data-theme="paper"] .theme-toggle { --bulb-fill:#d6a64f; color:#765020; background:#e4c990; }
.file-button { cursor: pointer; border: 1px solid #4b5048; border-radius: 7px; padding: 9px 13px; font-weight: 650; font-size: 13px; transition: .2s; }
.file-button:hover { border-color: var(--accent); color: var(--accent); }
.file-button input { display: none; }
.top-actions { flex:none; display: flex; align-items: center; gap: 8px; }
.top-actions select { height: 35px; font-size: 12px; }
button.file-button { background: transparent; color: var(--ink); }
.unit-toggle { display:grid; grid-template-columns:1fr 1fr; padding:2px; border:1px solid #667421; border-radius:6px; color:var(--muted); background:#191c1a; font-size:11px; cursor:pointer; }
.unit-toggle span { padding:5px 7px; border-radius:4px; }
.unit-toggle[data-unit="in"] span[data-unit="in"],.unit-toggle[data-unit="mm"] span[data-unit="mm"] { color:#151900; background:var(--accent); font-weight:800; }
.project-tabbar { height: 40px; min-width: 150px; flex:1 1 420px; display:flex; align-items:center; gap:5px; padding:0; overflow:hidden; border:0; background:transparent; }
.selection-history { display:flex; gap:3px; align-self:center; flex:none; }
.selection-history .icon-button { width:29px; height:27px; padding:4px; background:transparent; }
.selection-history .icon-button svg { width:17px; height:17px; }
.project-tab-strip { min-width:0; max-width:560px; flex:0 1 auto; display:flex; align-items:center; gap:5px; overflow:hidden; }
.project-tabs { min-width:0; flex:0 1 auto; display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:thin; }
.project-tab { max-width:180px; min-width:96px; height:32px; display:flex; align-items:center; gap:7px; padding:0 7px 0 11px; border:1px solid var(--line); border-radius:7px; background:#171a18; color:var(--muted); }
.project-tab.active { background: var(--panel-2); color: var(--ink); border-color: #4a5047; box-shadow: inset 0 2px var(--accent); }
.project-tab-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font-size: 11px; }
.project-tab-close { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; }
.project-tab-close:hover { background: #ffffff18; color: var(--accent); }
.new-project-tab { width:28px; height:28px; flex:none; margin:0; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); color:var(--muted); cursor:pointer; font-size:18px; line-height:1; }
.new-project-tab:hover { color: var(--accent); border-color: #687824; }
.ez-account { position:relative; flex:none; display:flex; align-items:center; z-index:30; }
.ez-account-button { width:36px; height:36px; display:grid; place-items:center; overflow:hidden; padding:0; border:1px solid #4b5048; border-radius:50%; background:var(--panel-2); color:var(--ink); cursor:pointer; font-size:12px; font-weight:800; }
.ez-account-button:hover,.ez-account-button[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.ez-account-avatar { width:100%; height:100%; display:block; object-fit:cover; }
.ez-account-panel { position:absolute; top:calc(100% + 10px); right:0; width:min(320px,calc(100vw - 24px)); display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--ink); box-shadow:0 18px 50px #0009; }
.ez-account-panel[hidden] { display:none; }
.ez-account-heading { display:flex; align-items:center; gap:11px; }
.ez-account-heading .ez-account-button { width:42px; height:42px; cursor:default; }
.ez-account-title { min-width:0; }
.ez-account-title strong,.ez-account-title span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ez-account-title span { margin-top:3px; color:var(--muted); font-size:11px; }
.ez-account-label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }
.ez-account-input { width:100%; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2); color:var(--ink); }
.ez-account-note { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.ez-account-actions { display:flex; gap:8px; }
.ez-account-actions button { flex:1; padding:9px 10px; border:1px solid #4b5048; border-radius:7px; background:transparent; color:var(--ink); cursor:pointer; font-weight:700; font-size:12px; }
.ez-account-actions button:hover { border-color:var(--accent); color:var(--accent); }
.ez-account-error { margin:0; color:#ff8f8f; font-size:11px; }
body[data-theme="light"] .project-tabbar, body[data-theme="paper"] .project-tabbar { background:transparent; }
body[data-theme="light"] .project-tab, body[data-theme="paper"] .project-tab { background: var(--panel-2); }
body[data-theme="light"] .ez-account-panel,body[data-theme="paper"] .ez-account-panel { box-shadow:0 18px 50px #4a3f2d38; }
.is-stitching, .is-stitching * { cursor: none !important; }
.stitch-pointer { position: fixed; left: 0; top: 0; z-index: 10001; width: 42px; height: 42px; pointer-events: none; will-change: transform; }
.stitch-pointer[hidden] { display: none !important; }
.stitch-pointer svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 3px #0008); transform-origin: 24px 28px; animation: stitchPointerSew .62s ease-in-out infinite alternate; }
.stitch-cursor { position: fixed; right: 18px; bottom: 18px; z-index: 10000; pointer-events: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 5px; border: 1px solid #718329; border-radius: 999px; background: #151a10e8; color: #e9ffc0; box-shadow: 0 5px 20px #0008, 0 0 0 1px #d6ff4820; backdrop-filter: blur(6px); }
.stitch-cursor[hidden] { display: none !important; }
.stitch-cursor svg { width: 31px; height: 31px; overflow: visible; }
.stitch-pointer .cursor-thread, .stitch-pointer .cursor-stitch { stroke-width: 3; }
.stitch-pointer .cursor-needle { stroke-width: 2.6; }
.stitch-cursor span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.cursor-thread, .cursor-stitch { fill: none; stroke: #d6ff48; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cursor-thread { stroke-dasharray: 5 4; animation: cursorThreadFlow .55s linear infinite; }
.cursor-stitch { animation: cursorStitchPulse .7s ease-in-out infinite alternate; }
.cursor-needle { fill: none; stroke: #edf1ea; stroke-width: 2; stroke-linecap: round; transform-origin: 29px 17px; animation: cursorNeedle .48s ease-in-out infinite alternate; }
.cursor-eye { fill: #151a10; stroke: #edf1ea; stroke-width: 1.5; animation: cursorNeedleEye .48s ease-in-out infinite alternate; }
@keyframes cursorThreadFlow { to { stroke-dashoffset: -18; } }
@keyframes cursorNeedle { from { transform: translateY(-3px) rotate(-3deg); } to { transform: translateY(4px) rotate(3deg); } }
@keyframes cursorNeedleEye { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@keyframes cursorStitchPulse { from { opacity: .38; } to { opacity: 1; } }
@keyframes stitchPointerSew { from { transform: translate(-2px,-3px) rotate(-4deg); } to { transform: translate(2px,3px) rotate(4deg); } }
body[data-theme="light"] .stitch-cursor, body[data-theme="paper"] .stitch-cursor { background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--ink); box-shadow: 0 5px 20px #4a3f2d33; }
body[data-theme="light"] .cursor-thread, body[data-theme="light"] .cursor-stitch { stroke: #145b43; }
body[data-theme="light"] .cursor-needle { stroke: #202d28; }
body[data-theme="light"] .cursor-eye { fill: #fff; stroke: #202d28; }
body[data-theme="paper"] .cursor-thread, body[data-theme="paper"] .cursor-stitch { stroke: #7a321f; }
body[data-theme="paper"] .cursor-needle { stroke: #3b2b21; }
body[data-theme="paper"] .cursor-eye { fill: #f7ead0; stroke: #3b2b21; }
@media (prefers-reduced-motion: reduce) { .stitch-cursor * { animation-duration: 1.4s !important; } }

.workspace { display: grid; grid-template-columns: 290px 1fr; flex: 1; min-height: 0; }
.sidebar { background: #121413; border-right: 1px solid var(--line); padding: 30px 25px 22px; display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.eyebrow { margin: 0 0 7px; color: #8c9189; text-transform: uppercase; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
h1 { margin: 0; font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.muted { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.thread-section { min-height: 0; display: flex; flex-direction: column; flex: 0 0 auto; }
.vector-settings { border-top:1px solid var(--line); padding-top:14px; display:flex; flex:1 0 auto; flex-direction:column; gap:11px; }
.vector-settings[hidden] { display:none; }
.vector-settings select, .vector-settings input[type="number"] { width:100%; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:7px 8px; }
.vector-settings input[type="range"] { width:100%; accent-color:var(--accent); }
.vector-settings .field-label > .control-input { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.vector-settings .field-label b { min-width:56px; text-align:right; color:var(--ink); font-size:10px; }
.control-title { width:100%; display:flex !important; align-items:center; justify-content:space-between; gap:6px; }
.control-info { position:relative; width:15px; height:15px; flex:0 0 auto; display:inline-grid; place-items:center; border:1px solid color-mix(in srgb,var(--muted) 60%,transparent); border-radius:50%; color:var(--muted); background:var(--panel-2); font:700 9px/1 Georgia,serif; text-transform:none; letter-spacing:0; cursor:help; outline:none; }
.control-info:hover,.control-info:focus-visible { color:var(--accent); border-color:var(--accent); }
.control-info::after { content:attr(data-tip); position:absolute; z-index:30; right:-3px; left:auto; top:calc(100% + 8px); width:210px; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); box-shadow:0 8px 24px #0009; font:10px/1.45 system-ui,sans-serif; text-align:left; text-transform:none; letter-spacing:0; opacity:0; visibility:hidden; transform:translateY(-3px); transition:opacity .12s,transform .12s,visibility .12s; pointer-events:none; }
.control-info:hover::after,.control-info:focus-visible::after { opacity:1; visibility:visible; transform:translateY(0); }
.vector-check .control-info { margin-left:auto; }
.vector-chunk-actions { display:grid; gap:6px; }
.vector-chunk-actions button { border:1px solid var(--line); border-radius:6px; padding:7px; background:var(--panel-2); color:var(--ink); cursor:pointer; font-size:9px; }
.vector-chunk-list { display:grid; gap:4px; }
.vector-sequence-heading { margin-top:10px; }
.vector-chunk-list .thread-row { color:var(--muted); }
.vector-chunk-list .thread-row:hover,.vector-chunk-list .thread-row.active { color:var(--ink); background:color-mix(in srgb,var(--accent) 12%,var(--panel-2)); }
.section-heading { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.thread-list { padding-right: 3px; }
.thread-row { display: flex; gap: 10px; align-items: center; padding: 8px 7px; border-radius: 6px; font-size: 12px; color: #babdb6; cursor: pointer; transition: .15s; }
.thread-row:hover, .thread-row.active { background: #252925; color: white; }
.thread-list .thread-row[draggable="true"] { cursor:grab; }
.thread-list .thread-row.dragging { opacity:.42; cursor:grabbing; }
.thread-list .thread-row.drop-before { box-shadow:inset 0 3px 0 var(--accent); }
.thread-list .thread-row.drop-after { box-shadow:inset 0 -3px 0 var(--accent); }
.swatch { width: 11px; height: 11px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff24; }
.thread-row b { margin-left: auto; font-size: 10px; color: #777c75; font-weight: 500; }
.legend { padding-top: 15px; border-top: 1px solid var(--line); display: flex; gap: 14px; color: var(--muted); font-size: 10px; }
.resize-settings { display:grid; grid-template-columns:auto minmax(110px,190px) 58px auto auto; align-items:center; gap:7px; margin-left:auto; }
.resize-inline-heading { display:grid; gap:1px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.resize-inline-heading span:last-child { color:var(--text); font-size:10px; letter-spacing:0; }
.resize-settings > input[type="range"] { width:100%; accent-color:var(--accent); }
.resize-settings input[type="number"] { width:46px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px 5px; font-size:10px; }
.resize-number { display:flex; align-items:center; gap:2px; color:var(--muted); font-size:10px; }
.thread-type-field small { color: #7f857c; font-size: 9px; text-transform: none; letter-spacing: 0; }
.resize-settings > button { border:1px solid var(--line); border-radius:6px; padding:6px 8px; cursor:pointer; font-size:10px; font-weight:650; background:var(--surface); color:var(--text); }
.resize-settings > button:hover { border-color:var(--accent); }
.resize-settings.dirty .resize-inline-heading span:last-child { color:var(--accent); }
.resize-density-check { grid-column:2 / -1; display:flex; align-items:center; gap:6px; width:max-content; color:var(--muted); font-size:10px; }
.resize-density-check input { accent-color:var(--accent); }
.max-stitch-field { margin-top:9px; }
.thread-type-field small { color:#7f857c; font-size:9px; text-transform:none; letter-spacing:0; }
.thread-type-field { padding:13px 0; border-bottom:1px solid var(--line); }
.hoop-settings { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.hoop-settings .section-heading { margin-bottom:0; cursor:pointer; list-style:none; align-items:center; }
.hoop-settings .section-heading::-webkit-details-marker { display:none; }
.hoop-settings .section-heading::before { content:'▸'; margin-right:6px; color:var(--muted); font-size:11px; transition:transform .15s ease; }
.hoop-settings[open] .section-heading::before { transform:rotate(90deg); }
.hoop-settings-body { padding-top:9px; }
.machine-picker { display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; margin-bottom: 9px; }
.machine-summary { margin: 8px 0 0; color: #8e948a; font-size: 9px; line-height: 1.4; }
.machine-summary.warning { color: #ffb067; }
.field-label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.field-label > span { display: flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; }
.hoop-settings select, .hoop-settings input { width: 100%; color: #f3f4f0; background: #191c1a; border: 1px solid #3a3f38; border-radius: 6px; padding: 7px 8px; font-size: 11px; }
.custom-hoop { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.custom-hoop[hidden], .calibration-panel[hidden] { display: none; }
.custom-hoop label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.custom-hoop label:last-child { grid-column: 1 / -1; }
.calibration-panel { margin-top: 10px; padding: 10px; border-radius: 7px; background: #1b1f1b; border: 1px solid #343a32; }
.calibration-panel .field-label { flex-direction: row; align-items: center; justify-content: space-between; }
.calibration-panel input { width: 58px; padding: 4px 6px; }
.calibration-panel p { margin: 7px 0 0; color: #858b82; font-size: 9px; line-height: 1.35; }
.calibration-bar { height: 16px; margin-top: 9px; border-left: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid #ffffff80; display: flex; align-items: flex-start; justify-content: center; color: white; font-size: 8px; }
.mode-switch { display: flex; }
.mode-switch .icon-button { border-radius: 0; margin-left: -1px; }
.mode-switch .icon-button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.mode-switch .icon-button:last-child { border-radius: 0 6px 6px 0; }
.legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.line { width: 12px; height: 0; border-top: 1px dashed #767b75; }

.viewer-panel { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 24px 28px 20px; gap: 16px; background: radial-gradient(circle at 70% 20%, #20251f 0, #101211 48%); }
.viewer-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; justify-content:space-between; align-items:center; gap:10px 18px; }
.vector-chunk-toolbar { grid-column:1/-1; display:flex; align-items:end; gap:8px; min-width:0; padding-top:9px; border-top:1px solid var(--line); }
.vector-chunk-toolbar[hidden] { display:none; }
.chunk-toolbar-summary { min-width:180px; max-width:280px; display:grid; gap:3px; align-self:center; }
.chunk-toolbar-summary b { color:var(--accent); font-size:11px; }
.chunk-toolbar-summary span { overflow:hidden; color:var(--muted); font-size:9px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.vector-chunk-toolbar label { display:grid; gap:4px; color:var(--muted); font-size:9px; white-space:nowrap; }
.vector-chunk-toolbar label > span { display:flex; align-items:center; gap:5px; }
.vector-chunk-toolbar select { min-width:86px; padding:6px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; }
.vector-chunk-toolbar input[type="range"] { width:92px; accent-color:var(--accent); }
.vector-chunk-toolbar label b { min-width:42px; color:var(--ink); font-size:9px; }
.vector-chunk-toolbar[data-intent="fill"] .chunk-line-option { display:none; }
.vector-chunk-toolbar:not([data-intent="fill"]) .chunk-fill-option { display:none; }
.chunk-marker-option { display:flex !important; grid-auto-flow:column; align-items:center; align-self:center; }
.vector-chunk-toolbar .vector-chunk-actions { display:flex; }
.vector-chunk-toolbar .vector-chunk-actions button { padding:7px 9px; }
.progress-label { margin: 0; font-size: 13px; color: #d5d7d1; }
.view-actions { display: flex; align-items: center; gap: 7px; }
.zoom-control { height: 31px; min-width: 160px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #363a35; border-radius: 6px; background: #191c1a; color: var(--accent); font-size: 10px; font-weight: 700; }
.zoom-control input { min-width: 80px; width: 100%; accent-color: var(--accent); cursor: pointer; }
.rotation-control { display: flex; }
.rotation-control .icon-button { min-width: 30px; border-radius: 0; margin-left: -1px; font-size: 15px; }
.rotation-control .icon-button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.rotation-control .icon-button:last-child { border-radius: 0 6px 6px 0; }
.rotation-control .rotation-label { min-width: 42px; font-size: 10px; cursor: pointer; }
.canvas-rotation { position: absolute; z-index: 3; top: 12px; right: 12px; box-shadow: 0 4px 18px #0005; }
.canvas-rotation .icon-button { background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(8px); }
.icon-button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); padding: 7px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.icon-button.graphical { width:34px; height:32px; display:inline-grid; place-items:center; padding:5px; }
.icon-button.graphical svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.icon-button.active,.icon-button[aria-pressed="true"] { color:#121510; background:var(--accent); border-color:color-mix(in srgb,var(--accent) 78%,white); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),0 0 14px color-mix(in srgb,var(--accent) 24%,transparent); }
#addPointMode[aria-pressed="true"],#fillMode[aria-pressed="true"],#threadMode[aria-pressed="true"],#imageMode[aria-pressed="true"],#textMode[aria-pressed="true"],#lineThickenTool[aria-expanded="true"] { color:var(--accent-dark); background:var(--accent); border-color:color-mix(in srgb,var(--accent) 72%,var(--ink)); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 34%,transparent); }
#toolModeToggle[data-mode="thread"],#toolModeToggle[data-mode="image"],#toolModeToggle[data-mode="add"],#toolModeToggle[data-mode="fill"] { color:var(--accent); }
.thread-selector { --drawing-thread:#111111; position:relative; }
.thread-selector-dot { fill:var(--drawing-thread); stroke:#ffffffaa; stroke-width:1.2; }
#toggleJumps[aria-pressed="true"] { color:var(--accent-dark); background:var(--accent); border-color:color-mix(in srgb,var(--accent) 72%,var(--ink)); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 34%,transparent); }
.icon-button:disabled { opacity:.38; cursor:not-allowed; }
.icon-button.danger:not(:disabled) { color:#ff9b91; border-color:#7d3d38; }
.trace-length { display:flex; align-items:center; gap:4px; padding:0 5px; color:var(--muted); font-size:10px; }
.trace-length select { width:67px; padding:6px 4px; font-size:10px; }
.stitch-tool-rail { position:absolute; z-index:12; left:12px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px; border:1px solid color-mix(in srgb,var(--line) 84%,transparent); border-radius:10px; background:color-mix(in srgb,var(--panel) 91%,transparent); box-shadow:0 10px 30px #0007; backdrop-filter:blur(9px); }
.stitch-tool-rail .icon-button { flex:none; }
.mode-tool-section { display:grid; gap:5px; padding:4px; border:1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius:8px; background:color-mix(in srgb,var(--panel-2) 70%,transparent); }
.needle-mode-icon svg { width:24px !important; height:24px !important; }
.needle-mode-icon .mode-thread { stroke:var(--drawing-thread,#d6ff48); stroke-width:4.2; }
.needle-mode-icon .mode-needle { stroke:currentColor; stroke-width:2; }
.tool-rail-divider { width:24px; height:1px; margin:2px 0; background:var(--line); }
.rail-select { position:relative; width:34px; height:32px; padding:0; display:grid; place-items:center; border:1px solid #363a35; border-radius:6px; background:var(--panel-2); cursor:pointer; }
.rail-select > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.rail-select::before { content:'mm'; color:var(--muted); font-size:8px; font-weight:800; pointer-events:none; }
.rail-select select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.thread-selector-circle { --drawing-thread:#111; width:26px; height:26px; margin-top:2px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; box-shadow:0 2px 8px #0006; }
.thread-selector-circle span { display:block; width:100%; height:100%; border-radius:50%; background:var(--drawing-thread); box-shadow:inset 3px 2px 4px #fff5,inset -3px -2px 4px #0005; }
.tool-popover { position:absolute; z-index:24; color:var(--ink); border:1px solid color-mix(in srgb,var(--line) 80%,var(--ink)); border-radius:10px; background:color-mix(in srgb,var(--panel) 96%,transparent); box-shadow:0 16px 38px #0009; backdrop-filter:blur(12px); }
.tool-popover[hidden] { display:none !important; }
.chunk-scale-panel { left:48px; bottom:0; width:245px; padding:12px; }
.chunk-scale-panel > div,.fill-density-panel > .fill-menu-heading,.fill-adjustment-controls > div { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:11px; }
.chunk-scale-panel output,.fill-density-panel output { color:var(--accent); font-weight:800; }
.chunk-scale-panel input,.fill-density-panel input { width:100%; margin:10px 0 6px; accent-color:var(--accent); }
.chunk-scale-panel small,.fill-density-panel small { display:block; color:var(--muted); font-size:9px; line-height:1.35; }
.fill-menu-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:9px; }
.fill-menu-heading b { font-size:12px; }
.fill-menu-heading small { display:block; margin-top:2px; color:var(--muted); font-size:9px; }
.fill-menu-heading button { width:25px; height:25px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--muted); background:transparent; cursor:pointer; font-size:19px; }
.fill-menu-heading button:hover { color:var(--ink); background:#ffffff12; }
.fill-value-editor { display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; color:var(--accent); font-weight:800; }
.fill-density-panel .fill-value-editor input { width:4.6em; margin:0; padding:4px 5px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--panel); font:inherit; text-align:right; }
.replace-fill-option { display:flex; align-items:flex-start; gap:8px; margin:0 0 9px; padding:8px 9px; color:var(--ink); border:1px solid color-mix(in srgb,#ffb84d 35%,var(--line)); border-radius:7px; background:color-mix(in srgb,#ffb84d 8%,var(--panel-2)); font-size:9px; line-height:1.35; cursor:pointer; }
.replace-fill-option[hidden] { display:none !important; }
.replace-fill-option input { flex:none; margin:1px 0 0; accent-color:#ffb84d; }
.fill-style-grid { display:grid; grid-template-columns:repeat(4,minmax(76px,1fr)); gap:7px; }
.fill-style-grid button { min-width:0; padding:8px 9px; display:grid; gap:2px; text-align:left; color:var(--ink); border:1px solid var(--line); border-radius:7px; background:var(--panel-2); cursor:pointer; }
.fill-style-grid button:hover,.fill-style-grid button:focus-visible { border-color:#b78335; background:color-mix(in srgb,#ffb84d 13%,var(--panel-2)); outline:none; }
.fill-style-grid button.active,.fill-style-grid button[aria-pressed="true"] { color:#201300; border-color:#ffe0a6; background:#ffb84d; box-shadow:0 0 0 1px #ffb84d55,0 0 14px #ffb84d44; }
.fill-style-grid b { font-size:10px; }
.fill-style-grid small { color:var(--muted); font-size:8px; }
.fill-style-grid button.active small,.fill-style-grid button[aria-pressed="true"] small { color:#513109; }
.fill-density-panel { left:auto; right:18px; top:50%; width:500px; max-width:calc(100% - 36px); max-height:calc(100% - 36px); padding:13px 14px; overflow:auto; transform:translateY(-50%); }
.fill-density-panel.text-fill-popout { top:58px; right:18px; transform:none; }
.fill-density-panel:not(.text-fill-popout) .text-fill-only { display:none !important; }
.fill-adjustment-controls { margin-top:12px; padding-top:12px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto auto auto; column-gap:22px; row-gap:0; border-top:1px solid var(--line); }
.fill-adjustment-controls[hidden] { display:none; }
.fill-adjustment-controls > :nth-child(1),.fill-adjustment-controls > :nth-child(2),.fill-adjustment-controls > :nth-child(3),.fill-adjustment-controls > :nth-child(4) { grid-column:1; }
.fill-adjustment-controls > :nth-child(1) { grid-row:1; }
.fill-adjustment-controls > :nth-child(2) { grid-row:2; }
.fill-adjustment-controls > :nth-child(3) { grid-row:3; }
.fill-adjustment-controls > :nth-child(4) { grid-row:4; }
.fill-adjustment-controls > :nth-child(5),.fill-adjustment-controls > :nth-child(6),.fill-adjustment-controls > :nth-child(7) { grid-column:2; }
.fill-adjustment-controls > :nth-child(5) { grid-row:1; }
.fill-adjustment-controls > :nth-child(6) { grid-row:2; }
.fill-adjustment-controls > :nth-child(7) { grid-row:3 / span 2; }
.fill-option-check { grid-column:1; grid-row:5; align-self:center; display:flex !important; justify-content:flex-start !important; gap:7px !important; margin-top:10px; color:var(--ink); cursor:pointer; }
.fill-option-check input { width:auto; margin:0; }
.fill-option-check.forced { opacity:.5; cursor:not-allowed; }
.fill-wave-field { grid-column:2; display:grid; gap:3px; margin-top:8px; }
#fillWavinessField { grid-row:5; }
#fillFrequencyField { grid-row:6; }
.fill-wave-field[hidden] { display:none !important; }
.fill-wave-field > span { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; }
.fill-wave-field input { margin:2px 0 0; }
.range-direction { margin-top:-7px; color:var(--muted); font-size:8px !important; }
.finalize-fill { grid-column:1/-1; grid-row:7; width:100%; margin-top:12px; padding:9px 10px; display:flex; justify-content:center; align-items:center; gap:7px; color:var(--accent-dark); border:1px solid color-mix(in srgb,var(--accent) 72%,white); border-radius:7px; background:var(--accent); font-weight:800; cursor:pointer; }
.finalize-fill span { font-size:14px; }
.fill-adjustment-controls :disabled { opacity:.42; cursor:not-allowed; }
.line-thicken-panel { right:18px; top:50%; width:470px; max-width:calc(100% - 36px); max-height:calc(100% - 36px); padding:13px 14px; overflow:auto; transform:translateY(-50%); }
.thicken-style-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.thicken-style-grid button { min-width:0; padding:8px 9px; display:grid; gap:2px; text-align:left; color:var(--ink); border:1px solid var(--line); border-radius:7px; background:var(--panel-2); cursor:pointer; }
.thicken-style-grid button:hover,.thicken-style-grid button:focus-visible { border-color:var(--accent); outline:none; }
.thicken-style-grid button[aria-pressed="true"] { color:var(--accent-dark); border-color:color-mix(in srgb,var(--accent) 72%,white); background:var(--accent); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 25%,transparent); }
.thicken-style-grid b { font-size:11px; }
.thicken-style-grid small { color:var(--muted); font-size:10px; line-height:1.3; }
.thicken-style-grid button[aria-pressed="true"] small { color:color-mix(in srgb,var(--accent-dark) 75%,var(--ink)); }
.thicken-adjustment-controls { margin-top:12px; padding-top:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; border-top:1px solid var(--line); }
.thicken-adjustment-controls label { min-width:0; display:grid; gap:4px; color:var(--ink); }
.thicken-adjustment-controls label[hidden] { display:none; }
.thicken-adjustment-controls .center-underlay-option { display:flex; align-items:center; justify-content:flex-start; gap:7px; }
.thicken-adjustment-controls .center-underlay-option input { width:auto; margin:0; accent-color:var(--accent); }
.thicken-adjustment-controls label > span { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:10px; }
.thicken-adjustment-controls output { color:var(--accent); font-weight:800; }
.thicken-adjustment-controls input { width:100%; margin:0; accent-color:var(--accent); }
.thicken-adjustment-controls .finalize-fill { grid-row:auto; }
.image-controls-panel { z-index:22; right:12px; top:50%; width:150px; padding:12px; transform:translateY(-50%); }
.image-controls-panel > div { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.image-controls-panel button { padding:6px 8px; }
.image-controls-panel label { display:grid; gap:7px; margin-top:12px; color:var(--muted); font-size:11px; }
.image-controls-panel output { color:var(--accent); font-weight:800; }
.image-controls-panel input[type="range"] { accent-color:var(--accent); }
.image-opacity-field { justify-items:center; }
.image-opacity-field input[type="range"] { width:24px; height:150px; writing-mode:vertical-lr; direction:rtl; }
.fill-density-panel .fill-rotation-heading { margin:0; padding:0; border-top:0; }
.canvas-wrap.fill-ready { cursor:crosshair; }
.canvas-wrap.fill-ready.thread-hover { cursor:crosshair; }
.canvas-wrap.fill-ready .thread-hover-pointer { display:none !important; }
.canvas-wrap { position: relative; cursor: default; touch-action: none; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #30342f; border-radius: 12px; background-color: #121514; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 24px 24px; box-shadow: inset 0 0 80px #0008; }
.canvas-wrap.editing-stitches { cursor:crosshair; }
.canvas-wrap.text-placement-ready { cursor:text; }
.text-canvas-box { position:absolute; z-index:14; min-width:72px; min-height:28px; border:1px dashed var(--accent); border-radius:5px; background:color-mix(in srgb,var(--panel) 34%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent),0 8px 24px #0005; }
.text-canvas-box[hidden] { display:none !important; }
.text-canvas-editor { position:absolute; inset:0; width:100%; height:100%; min-width:0; padding:12px 14px; border:0; outline:none; color:var(--ink); background:transparent; line-height:1; text-align:center; font-weight:400; font-style:normal; font-kerning:normal; letter-spacing:normal; resize:none; overflow:hidden; white-space:pre; }
.text-canvas-editor.no-fill { color:transparent; -webkit-text-stroke:1px var(--accent); text-shadow:0 0 1px var(--accent); }
.text-move-handle { position:absolute; left:calc(50% - 28px); top:-25px; z-index:3; width:24px; height:21px; display:grid; place-items:center; padding:3px; border:1px solid var(--line); border-radius:6px 6px 2px 2px; color:var(--accent-dark); background:var(--accent); cursor:grab; }
.text-move-handle:active { cursor:grabbing; }
.text-move-handle svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.text-resize-handle { position:absolute; z-index:4; width:12px; height:12px; border:2px solid var(--panel); border-radius:3px; background:var(--accent); box-shadow:0 0 0 1px var(--accent-dark); }
.text-resize-handle.nw{left:-7px;top:-7px;cursor:nwse-resize}.text-resize-handle.n{left:calc(50% - 6px);top:-7px;cursor:ns-resize}.text-resize-handle.ne{right:-7px;top:-7px;cursor:nesw-resize}.text-resize-handle.e{right:-7px;top:calc(50% - 6px);cursor:ew-resize}.text-resize-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}.text-resize-handle.s{left:calc(50% - 6px);bottom:-7px;cursor:ns-resize}.text-resize-handle.sw{left:-7px;bottom:-7px;cursor:nesw-resize}.text-resize-handle.w{left:-7px;top:calc(50% - 6px);cursor:ew-resize}
.canvas-wrap.tracing-stitches { cursor:crosshair; }
.canvas-wrap.dragging-waypoint { cursor:none; }
.canvas-wrap.dragging-waypoint .thread-hover-pointer { display:block !important; }
.canvas-wrap.dragging-chunk { cursor:grabbing; }
.canvas-wrap.radial-center-dragging,.canvas-wrap.fill-route-dragging { cursor:grabbing; }
.thread-row.selected-chunk { outline:1px solid color-mix(in srgb,var(--accent) 68%,transparent); background:color-mix(in srgb,var(--accent) 14%,#252925); }
.thread-row.covered-chunk { color:#ffd0cb; outline:1px solid color-mix(in srgb,#ff5147 72%,transparent); background:color-mix(in srgb,#cf2d27 22%,var(--panel-2)); }
.thread-row.covered-chunk.selected-chunk { outline-color:#ff6b61; box-shadow:inset 3px 0 #ff5147; }
.thread-row.hidden-chunk { opacity:.25; filter:saturate(.25); }
.thread-row.hidden-chunk.selected-chunk { opacity:.42; }
.chunk-visibility { width:24px; height:24px; flex:none; display:grid; place-items:center; padding:3px; border:0; border-radius:6px; background:transparent; color:currentColor; cursor:pointer; }
.chunk-visibility:hover,.chunk-visibility:focus-visible { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); outline:none; }
.chunk-visibility svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chunk-visibility .visibility-slash { stroke-width:2.4; }
.coverage-warning { flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:#c9312b; font-size:10px; font-weight:900; box-shadow:0 0 0 1px #ffaaa2; }
.thread-row .chunk-number { min-width:2.1em; color:var(--muted); font-variant-numeric:tabular-nums; }
.thread-context-menu { position:fixed; z-index:1000; min-width:190px; padding:5px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 14px 35px #0007; }
.thread-context-menu button { display:block; width:100%; padding:9px 11px; border:0; border-radius:5px; text-align:left; color:var(--ink); background:transparent; cursor:pointer; }
.thread-context-menu button:hover { background:color-mix(in srgb,var(--accent) 14%,var(--panel-2)); }
.thread-context-menu button.danger { color:#ff8f84; border-top:1px solid var(--line); border-radius:0 0 5px 5px; margin-top:4px; padding-top:10px; }
.thread-context-menu button.danger:hover { background:color-mix(in srgb,#df4236 17%,var(--panel-2)); }
canvas { width: 100%; height: 100%; display: block; transform: translate3d(0,0,0); }
.canvas-wrap.panning { cursor: grabbing; }
.canvas-wrap.thread-hover:not(.panning) { cursor: none; }
.canvas-wrap.cut-ready { cursor:none; }
.canvas-wrap.waypoint-selecting { cursor:none; }
.lasso-pointer { position:fixed; left:0; top:0; z-index:9999; width:38px; height:38px; pointer-events:none; will-change:transform; filter:drop-shadow(0 2px 2px #0009); }
.lasso-pointer[hidden] { display:none !important; }
.lasso-pointer svg { width:100%; height:100%; overflow:visible; fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:4 3; }
body[data-theme="light"] .lasso-pointer svg,body[data-theme="paper"] .lasso-pointer svg { stroke:var(--accent-dark); }
.cut-pointer { position:fixed; left:0; top:0; z-index:9999; width:34px; height:34px; pointer-events:none; will-change:transform; filter:drop-shadow(0 2px 2px #0009); }
.cut-pointer[hidden] { display:none !important; }
.cut-pointer svg { width:100%; height:100%; overflow:visible; fill:none; stroke:#eef2eb; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.cut-pointer .ripper-handle { fill:#58635b; }
.cut-pointer .ripper-ball { fill:#d9465f; stroke:#d9465f; }
body[data-theme="light"] .cut-pointer svg,body[data-theme="paper"] .cut-pointer svg { stroke:#2e342f; }
.thread-hover-pointer { --hover-thread:#d6ff48; position:fixed; left:0; top:0; z-index:9998; width:36px; height:36px; pointer-events:none; will-change:transform; filter:drop-shadow(0 2px 2px #0009); }
.thread-hover-pointer[hidden] { display:none !important; }
.thread-hover-pointer svg { width:100%; height:100%; overflow:visible; }
.hover-thread { fill:none; stroke:var(--hover-thread); stroke-width:3.4; stroke-linecap:round; }
.thread-hover-pointer.needle-only .hover-thread { display:none; }
.hover-needle { fill:none; stroke:#e8ece8; stroke-width:2.4; stroke-linecap:round; transition:transform .08s ease-out; }
.hover-eye { fill:#171a18; stroke:#e8ece8; stroke-width:1.4; transition:transform .08s ease-out; }
.hoop-label { position: absolute; top: 12px; left: 13px; color: #a9afa6; font-size: 10px; pointer-events: none; }
.drop-hint { position: absolute; inset: 12px; display: grid; place-items: center; border: 1px dashed transparent; border-radius: 8px; color: transparent; pointer-events: none; transition: .2s; }
.canvas-wrap.dragging .drop-hint { border-color: var(--accent); background: #141a10e8; color: var(--accent); }
.controls { border-top: 1px solid var(--line); padding-top: 15px; }
.vector-controls { border-top:1px solid var(--line); padding-top:15px; }
.vector-controls[hidden] { display:none; }
.convert-vector-button { width:100%; margin-top:-7px; border:1px solid #647728; border-radius:8px; padding:9px 12px; background:#d6ff4817; color:var(--accent); cursor:pointer; font-size:11px; font-weight:750; letter-spacing:.02em; }
.convert-vector-button:hover { background:#d6ff4826; }
.convert-vector-button:active:not(:disabled) { transform:translateY(1px) scale(.995); background:var(--accent); color:#151900; }
.convert-vector-button:disabled { opacity:.42; cursor:not-allowed; }
body.vector-mode .stitch-editor-only, body.vector-mode .controls, body.vector-mode #toggleJumps, body.vector-mode #measurementUnit, body.vector-mode #convertToVector { display:none !important; }
body:not(.vector-mode) .vector-controls, body:not(.vector-mode) .convert-embroidery-button { display:none !important; }
body:not(.vector-mode) .vector-only-action { display:none !important; }
.timeline { width: 100%; height: 4px; appearance: none; background: linear-gradient(90deg, var(--accent) var(--progress, 0%), #373b36 var(--progress, 0%)); border-radius: 4px; cursor: pointer; }
.timeline::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid #1b201a; box-shadow: 0 0 0 1px var(--accent); }
.transport { padding-top: 15px; display: flex; align-items: center; gap:16px; justify-content: space-between; }
.transport-left { display: flex; align-items: center; gap: 8px; }
.round-button { border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid #3a3f38; background: #191c1a; color: white; }
.round-button.small { width: 32px; height: 32px; color: #afb3ab; font-size: 14px; }
.round-button.play { width: 42px; height: 42px; background: var(--accent); color: #131700; border: 0; padding-left: 3px; font-size: 14px; }
.round-button:hover { border-color: var(--accent); }
.speed-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
select { color: white; background: #191c1a; border: 1px solid #3a3f38; border-radius: 6px; padding: 6px; }

@media (max-width: 760px) {
  .topbar { padding: 0 16px; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 18px; gap: 18px; overflow: visible; }
  .thread-section, .legend { display: none; }
  html, body { overflow: auto; }
  .app-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .viewer-panel { padding: 18px 14px; min-height: 640px; overflow: visible; }
  .viewer-toolbar { align-items: flex-start; gap: 10px; }
  .view-actions { flex-wrap: wrap; justify-content: flex-end; }
  .vector-chunk-toolbar { overflow-x:auto; align-items:end; padding-bottom:4px; }
  .zoom-control { min-width: 130px; }
  .canvas-wrap { min-height: 390px; }
  .transport { flex-wrap:wrap; }
  .resize-settings { order:3; width:100%; margin-left:0; grid-template-columns:auto minmax(90px,1fr) 58px auto auto; }
  .stitch-tool-rail { left:7px; transform:translateY(-50%) scale(.92); transform-origin:left center; }
  .fill-density-panel { right:12px; width:min(500px,calc(100% - 24px)); max-height:calc(100% - 24px); }
  .fill-style-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fill-adjustment-controls { grid-template-columns:1fr; }
  .fill-adjustment-controls > :nth-child(n) { grid-column:1; grid-row:auto; }
  #fillOutlineField,#fillWavinessField,.fill-adjustment-controls .finalize-fill { grid-column:1; grid-row:auto; }
  .line-thicken-panel { left:76px; right:12px; bottom:12px; top:auto; width:auto; max-width:none; max-height:calc(100% - 24px); transform:none; }
  .thicken-style-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .thicken-adjustment-controls { grid-template-columns:1fr; }
}



.save-dialog { width: min(430px, calc(100vw - 32px)); padding: 0; color: var(--ink); background: #171a18; border: 1px solid #41463f; border-radius: 12px; box-shadow: 0 24px 80px #000c; }
.save-dialog::backdrop { background: #050605b8; backdrop-filter: blur(3px); }
.save-dialog form { padding: 22px; display: grid; gap: 16px; }
.save-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.save-dialog h2 { margin: 0; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.save-dialog input, .save-dialog select { width: 100%; color: #f3f4f0; background: #101210; border: 1px solid #3a3f38; border-radius: 7px; padding: 10px; }
.dialog-close { border: 0; background: transparent; color: #999f96; font-size: 25px; cursor: pointer; line-height: 1; }
.save-note { margin: 0; color: #8f958c; font-size: 11px; line-height: 1.45; }
.save-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.save-dialog-actions button { border: 1px solid #41463f; border-radius: 7px; padding: 9px 14px; color: #cdd1c9; background: #202320; cursor: pointer; }
.save-dialog-actions #confirmSave { color: #151900; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.conversion-preview { border: 1px solid #343a34; border-radius: 8px; background: #101210; overflow: hidden; }
.conversion-preview-title { padding: 8px 10px; color: #8f958c; border-bottom: 1px solid #2d322d; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
#savePalettePreview { max-height: 170px; overflow-y: auto; padding: 5px; }
.conversion-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 14px 10px minmax(0, 1fr); gap: 7px; align-items: center; padding: 5px; color: #c9cdc5; font-size: 10px; }
.conversion-row i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff35; }
.conversion-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversion-row b { color: #747a72; text-align: center; font-weight: 400; }
.conversion-none { margin: 0; padding: 12px 10px; color: #8f958c; font-size: 10px; }
.conversion-option { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; line-height: 1.35; cursor: pointer; }
.conversion-option input { accent-color: var(--accent); }
.color-chart-dialog { width: min(1120px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); padding: 0; color: var(--ink); background: #151815; border: 1px solid #41463f; border-radius: 12px; box-shadow: 0 24px 80px #000d; }
.color-chart-dialog::backdrop { background: #050605c7; backdrop-filter: blur(3px); }
.color-chart-shell { height: 100%; padding: 22px; display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 13px; }
.color-chart-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.color-chart-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.chart-tabs { display: flex; }
.chart-tabs button { border: 1px solid #3b403a; background: #1c1f1c; color: #aeb3aa; padding: 8px 14px; cursor: pointer; }
.chart-tabs button:first-child { border-radius: 7px 0 0 7px; }
.chart-tabs button:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; }
.chart-tabs button.active { color: var(--accent); border-color: #667421; background: #20251a; }
.chart-description { margin: 0; color: #92978f; font-size: 11px; }
.color-chart-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 9px; padding-right: 5px; align-content: start; }
.color-chart-entry { min-height: 118px; display: grid; grid-template-rows: 66px 52px; border: 1px solid #373c36; border-radius: 8px; overflow: hidden; background: #1c1f1c; }
.color-chart-name { padding: 8px 9px; display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 2px 5px; }
.color-chart-name b { grid-row: 1 / 3; color: var(--accent); font-size: 13px; }
.color-chart-name span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-chart-name small { color: #777d75; font-size: 8px; line-height: 1.3; }
.color-chart-swatch { display: grid; place-items: center; font: 700 9px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .06em; text-shadow: 0 1px 2px #0005; }
@media (max-width: 620px) { .color-chart-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .color-chart-entry { min-height: 98px; grid-template-rows: 50px 48px; } }
.thread-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; color: var(--ink); background: #171a18; border: 1px solid #41463f; border-radius: 12px; box-shadow: 0 24px 80px #000c; }
.thread-dialog::backdrop { background: #050605b8; backdrop-filter: blur(3px); }
.thread-dialog form { padding: 22px; display: grid; gap: 16px; }
.thread-dialog h2 { margin: 0; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.thread-dialog select { width: 100%; color: #f3f4f0; background: #101210; border: 1px solid #3a3f38; border-radius: 7px; padding: 10px; }
.thread-dialog #applyThreadChoice { color: #151900; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.thread-choice-preview { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px; border: 1px solid #343a34; border-radius: 8px; background: #101210; color: #d8dcd4; }
.thread-choice-preview i { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff4d, 0 2px 8px #0008; }
.thread-swatch { width: 19px; height: 19px; flex: 0 0 auto; padding: 0; border: 1px solid #ffffff50; border-radius: 50%; box-shadow: inset 0 0 0 1px #0004, 0 1px 3px #000b; cursor: pointer; }
.thread-swatch:hover, .thread-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thread-name { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.thread-name small { display: block; margin-top: 2px; color: #747a72; font-size: 8px; line-height: 1.2; }
.thread-name-input,.project-tab-name-input { min-width:0; color:var(--ink); background:var(--panel-2); border:1px solid var(--accent); border-radius:5px; outline:none; font:inherit; }
.thread-name-input { width:100%; padding:4px 6px; }
.project-tab-name-input { width:132px; padding:5px 7px; }
.thread-jump { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid #3a4038; border-radius: 6px; background: #191c19; color: #9ea59a; font-size: 15px; line-height: 1; cursor: pointer; }
.thread-jump:hover, .thread-jump:focus-visible { color: var(--accent); border-color: #687824; background: #232817; outline: none; }
body[data-theme="light"] .thread-jump, body[data-theme="paper"] .thread-jump { color: var(--ink); background: var(--panel-2); border-color: var(--line); }
/* Visual thread library */
.thread-dialog { width: min(1040px, calc(100vw - 32px)); height: min(850px, calc(100dvh - 32px)); }
.thread-dialog form { height: 100%; grid-template-rows: auto auto auto minmax(220px,1fr) auto auto; overflow: hidden; }
.thread-picker-modes { display:flex; }
.thread-picker-modes button { flex:1; padding:9px 12px; border:1px solid #3b403a; background:#1c1f1c; color:#9da39a; cursor:pointer; font-size:10px; }
.thread-picker-modes button:first-child { border-radius:7px 0 0 7px; }
.thread-picker-modes button:last-child { border-radius:0 7px 7px 0; }
.thread-picker-modes button + button { margin-left:-1px; }
.thread-picker-modes button.active { position:relative; z-index:1; color:var(--accent); border-color:#687824; background:#232817; }
.thread-color-chooser { padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.thread-color-summary { display:flex; align-items:center; gap:7px; color:var(--muted); cursor:pointer; list-style:none; font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.thread-color-summary::-webkit-details-marker { display:none; }
.thread-color-summary::before { content:'▸'; font-size:11px; transition:transform .15s ease; }
.thread-color-chooser[open] .thread-color-summary::before { transform:rotate(90deg); }
.thread-color-chooser-body { min-height:190px; display:grid; grid-template-columns:190px 150px minmax(0,1fr); align-items:center; gap:14px; padding-top:8px; }
.thread-color-chooser canvas { width:180px; height:180px; display:block; touch-action:none; cursor:crosshair; }
.thread-color-target { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px 10px; }
.thread-color-chooser b { grid-column:1/-1; font-size:12px; }
.thread-color-chooser i { width:34px; height:34px; border-radius:50%; border:1px solid #ffffff66; box-shadow:0 2px 8px #0008; }
.thread-color-chooser span { font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.thread-color-chooser small { grid-column:1/-1; color:var(--muted); font-size:9px; line-height:1.45; }
.thread-top-matches { min-width:0; align-self:stretch; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.thread-top-matches .thread-color-card { grid-template-rows:48px auto; padding:6px; }
.thread-top-matches .thread-favorite { top:8px; right:8px; transform:scale(.82); transform-origin:top right; }
.thread-filter-row { display:grid; grid-template-columns:42px minmax(170px,1fr) minmax(165px,.55fr); align-items:end; gap:10px; }
.thread-search-field { display:block; }
.thread-search-field input { width:100%; min-height:39px; padding:9px 11px; color:#f3f4f0; background:#101210; border:1px solid #3a3f38; border-radius:7px; }
.thread-eyedropper-button { --sample-thread:var(--accent); width:42px; height:39px; display:grid; place-items:center; padding:7px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.thread-eyedropper-button:hover { border-color:var(--sample-thread); box-shadow:0 0 0 2px color-mix(in srgb,var(--sample-thread) 35%,transparent); }
.thread-eyedropper-button svg { width:24px; height:24px; overflow:visible; }
.thread-eyedropper-button path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.thread-eyedropper-button path:first-child { fill:color-mix(in srgb,var(--sample-thread) 72%,transparent); stroke:var(--sample-thread); }
body.thread-eyedropper-active,body.thread-eyedropper-active * { cursor:none !important; }
.thread-eyedropper-pointer { --sample-thread:var(--accent); position:fixed; left:0; top:0; z-index:10020; width:40px; height:40px; pointer-events:none; will-change:transform; filter:drop-shadow(0 2px 3px #0009); }
.thread-eyedropper-pointer[hidden] { display:none !important; }
.thread-eyedropper-pointer svg { width:100%; height:100%; overflow:visible; }
.thread-eyedropper-pointer .eyedropper-sample { fill:var(--sample-thread); stroke:color-mix(in srgb,var(--sample-thread) 35%,#000); stroke-width:2.2; }
.thread-eyedropper-pointer .eyedropper-glass { fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; paint-order:stroke; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.thread-color-section { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 10px; }
.thread-color-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #c7cbc3; font-size: 11px; font-weight: 650; }
.thread-sort { display: flex; }
.thread-sort button { padding: 7px 11px; border: 1px solid #3b403a; background: #1c1f1c; color: #9da39a; cursor: pointer; font-size: 10px; }
.thread-sort button:first-child { border-radius: 7px 0 0 7px; }
.thread-sort button:last-child { margin-left: -1px; border-radius: 0 7px 7px 0; }
.thread-sort button.active { position: relative; color: var(--accent); border-color: #687824; background: #232817; }
.thread-color-grid { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill,minmax(145px,1fr)); gap: 9px; padding: 2px 6px 8px 2px; align-content: start; }
.thread-color-card { position:relative; min-width:0; display:grid; grid-template-rows:68px auto; gap:5px; padding:7px; border:1px solid #343a34; border-radius:9px; background:#1a1d1a; color:#d5d9d1; text-align:left; cursor:pointer; transition:border-color .12s,transform .12s,background .12s,box-shadow .12s; }
.thread-color-card:hover { transform: translateY(-1px); border-color: #626a5f; background: #202420; }
.thread-color-card.selected { border-color:var(--accent); background:#2b3218; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 58%,transparent),0 0 22px color-mix(in srgb,var(--accent) 28%,transparent); }
.thread-color-card.selected::before { content:'Selected'; position:absolute; z-index:2; left:12px; top:12px; padding:3px 6px; border-radius:999px; background:var(--accent); color:#151900; font-size:8px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 2px 7px #0007; }
.thread-color-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thread-card-select { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 6px; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.thread-card-select span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:650; }
.thread-card-select small { color:#858b82; font-size:9px; }
.thread-card-select small:last-child { text-align:right; }
.thread-favorite { position:absolute; top:11px; right:11px; width:30px; height:28px; display:grid; place-items:center; padding:0; border:0; background:#101210c9; border-radius:50%; cursor:pointer; }
.thread-favorite svg { width:20px; height:18px; overflow:visible; }
.thread-favorite path { fill:transparent; stroke:#f5f5f2; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; }
.thread-favorite:hover path,.thread-favorite.is-active path { fill:#ef4444; stroke:#ef4444; }
.thread-favorite.is-active { filter:drop-shadow(0 5px 10px #ef444455); }
.thread-empty { grid-column:1/-1; margin:18px; color:var(--muted); text-align:center; font-size:11px; }
.thread-card-swatch { position: relative; display: block; overflow: hidden; border-radius: 6px; background: repeating-linear-gradient(0deg,#fff0 0 2px,#ffffff20 2px 3px,#00000010 3px 4px),linear-gradient(90deg,var(--thread-dark) 0%,var(--thread-color) 20%,var(--thread-light) 43%,var(--thread-color) 64%,var(--thread-dark) 100%); box-shadow: inset 0 0 0 1px #ffffff38,inset 0 8px 12px #ffffff10,inset 0 -9px 13px #0000003d,0 3px 8px #0009; }
.thread-card-swatch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,#fff0 22%,#ffffff2c 42%,#fff0 57%); mix-blend-mode: screen; }
@media (max-width: 620px) { .thread-filter-row { grid-template-columns:42px minmax(0,1fr); } .thread-filter-row #threadBrandField { grid-column:1/-1; } .thread-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); } .thread-dialog form { padding: 14px; gap: 11px; } .thread-color-heading { align-items: flex-start; flex-direction: column; } .thread-color-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .thread-choice-preview { min-height: 48px; } .thread-color-chooser { padding:8px; } .thread-color-chooser-body { grid-template-columns:125px 1fr; gap:10px; min-height:140px; } .thread-color-chooser canvas { width:120px; height:120px; } .thread-top-matches { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Light and Flow-reader-inspired book color modes. Thread swatches retain their true colors. */
body[data-theme="light"], body[data-theme="paper"] { --ink:#262a27; --muted:#666b65; --panel:#f7f5ef; --panel-2:#eeece5; --line:#cbc9c0; --accent:#536d12; --accent-dark:#edf3d9; color-scheme:light; }
body[data-theme="light"] { background:#fffdf8; }
body[data-theme="paper"] { background:#efe1c2; --panel:#eadbbd; --panel-2:#e2d0ad; --line:#bbaa89; --muted:#6d624f; }
body[data-theme="light"] .topbar,body[data-theme="light"] .sidebar { background:#f8f6f0; }
body[data-theme="paper"] .topbar,body[data-theme="paper"] .sidebar { background:#e8d7b5; }
body[data-theme="light"] .viewer-panel { background:radial-gradient(circle at 70% 20%,#fffdf8 0,#eceae3 55%); }
body[data-theme="paper"] .viewer-panel { background:radial-gradient(circle at 70% 20%,#f4e8ce 0,#dfcca6 58%); }
body[data-theme="light"] .canvas-wrap { background-color:#fffdf8; background-image:linear-gradient(#2d332b0b 1px,transparent 1px),linear-gradient(90deg,#2d332b0b 1px,transparent 1px); box-shadow:inset 0 0 60px #786f5b18; }
body[data-theme="paper"] .canvas-wrap { background-color:#efe1c2; background-image:linear-gradient(#665c4610 1px,transparent 1px),linear-gradient(90deg,#665c4610 1px,transparent 1px); box-shadow:inset 0 0 70px #765e3422; }
body[data-theme="light"] .file-button,body[data-theme="light"] .theme-toggle,body[data-theme="light"] .icon-button,body[data-theme="light"] .zoom-control,body[data-theme="light"] select,body[data-theme="light"] input,body[data-theme="paper"] .file-button,body[data-theme="paper"] .theme-toggle,body[data-theme="paper"] .icon-button,body[data-theme="paper"] .zoom-control,body[data-theme="paper"] select,body[data-theme="paper"] input { color:var(--ink); background:var(--panel-2); border-color:var(--line); }
body[data-theme="light"] .thread-row,body[data-theme="light"] .progress-label,body[data-theme="light"] .resize-summary,body[data-theme="paper"] .thread-row,body[data-theme="paper"] .progress-label,body[data-theme="paper"] .resize-summary { color:var(--ink); }
body[data-theme="light"] .thread-row:hover,body[data-theme="light"] .thread-row.active { background:#e4e7dc; color:#171a17; }
body[data-theme="paper"] .thread-row:hover,body[data-theme="paper"] .thread-row.active { background:#d8c39c; color:#2b251b; }
body[data-theme="light"] .save-dialog,body[data-theme="light"] .color-chart-dialog,body[data-theme="light"] .thread-dialog,body[data-theme="paper"] .save-dialog,body[data-theme="paper"] .color-chart-dialog,body[data-theme="paper"] .thread-dialog { color:var(--ink); background:var(--panel); border-color:var(--line); }
body[data-theme="light"] .save-dialog input,body[data-theme="light"] .save-dialog select,body[data-theme="light"] .thread-dialog select,body[data-theme="light"] .thread-choice-preview,body[data-theme="light"] .conversion-preview,body[data-theme="light"] .color-chart-entry,body[data-theme="light"] .thread-color-card,body[data-theme="paper"] .save-dialog input,body[data-theme="paper"] .save-dialog select,body[data-theme="paper"] .thread-dialog select,body[data-theme="paper"] .thread-choice-preview,body[data-theme="paper"] .conversion-preview,body[data-theme="paper"] .color-chart-entry,body[data-theme="paper"] .thread-color-card { color:var(--ink); background:var(--panel-2); border-color:var(--line); }
body[data-theme="light"] .thread-picker-modes button,body[data-theme="paper"] .thread-picker-modes button,body[data-theme="light"] .thread-favorite,body[data-theme="paper"] .thread-favorite { background:var(--panel-2); color:var(--ink); border-color:var(--line); }
body[data-theme="light"] .thread-favorite path,body[data-theme="paper"] .thread-favorite path { stroke:var(--ink); }
body[data-theme="light"] .thread-favorite.is-active path,body[data-theme="paper"] .thread-favorite.is-active path { fill:#ef4444; stroke:#ef4444; }
body[data-theme="light"] .unit-toggle,body[data-theme="paper"] .unit-toggle { background:var(--panel-2); border-color:#899852; }

body[data-theme="light"] .conversion-row,
body[data-theme="light"] .conversion-preview-title,
body[data-theme="light"] .save-note,
body[data-theme="light"] .save-dialog-actions button,
body[data-theme="paper"] .conversion-row,
body[data-theme="paper"] .conversion-preview-title,
body[data-theme="paper"] .save-note,
body[data-theme="paper"] .save-dialog-actions button { color:var(--ink); }
body[data-theme="light"] .conversion-row b { color:#697168; }
body[data-theme="paper"] .conversion-row b { color:#6b5b42; }
body[data-theme="light"] .conversion-preview-title { color:#59615a; border-bottom-color:#b9bdb5; }
body[data-theme="paper"] .conversion-preview-title { color:#66583f; border-bottom-color:#9f8d6d; }
body[data-theme="light"] .save-note { color:#59615a; }
body[data-theme="paper"] .save-note { color:#655942; }
body[data-theme="light"] .save-dialog-actions button,
body[data-theme="paper"] .save-dialog-actions button { background:var(--panel-2); border-color:var(--line); }

.canvas-wrap > .key-tips { position:absolute; left:12px; bottom:12px; z-index:13; width:max-content; max-width:calc(100% - 24px); display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.key-tips summary { width:30px; height:26px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; background:var(--panel-2); color:var(--ink); cursor:pointer; list-style:none; }
.key-tips summary::-webkit-details-marker { display:none; }
.key-tips[open] { max-width:calc(100% - 24px); }
.key-tips[open] summary { color:var(--accent); }
.key-tips div { min-width:0; overflow-x:auto; padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--panel-2) 94%,transparent); box-shadow:0 8px 24px #0006; line-height:1.4; white-space:nowrap; }
.key-tips kbd { padding:1px 4px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--panel); color:var(--ink); font:inherit; font-weight:750; }

.image-controls-panel { width:360px; display:grid; grid-template-columns:58px minmax(0,1fr); align-items:stretch; gap:13px; }
.image-controls-panel label { margin-top:0; justify-items:center; }
.image-trace-controls { min-width:0; padding-left:13px; display:grid; align-content:start; gap:10px; border-left:1px solid var(--line); }
.image-trace-controls[hidden] { display:none !important; }
.tool-panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.tool-panel-heading b { display:block; color:var(--ink); font-size:12px; }
.tool-panel-heading small,.image-trace-controls > small,.text-controls-panel > small { display:block; margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }
.tool-panel-heading > button { width:25px; height:25px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--muted); background:transparent; cursor:pointer; font-size:19px; }
.color-count-control { display:grid !important; grid-template-columns:1fr 28px 42px 28px; align-items:center; gap:5px !important; color:var(--muted); font-size:10px; }
.color-count-control button { width:28px; height:28px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--panel-2); cursor:pointer; }
.color-count-control .color-count-value { width:auto; min-width:58px; padding:0 5px; font-size:9px; line-height:1.05; text-align:center; }
.panel-primary-button { width:100%; padding:8px 10px !important; border:1px solid color-mix(in srgb,var(--accent) 72%,white); border-radius:7px; color:var(--accent-dark); background:var(--accent); cursor:pointer; font-weight:800; }
.panel-primary-button:disabled { opacity:.45; cursor:wait; }
.panel-secondary-button { width:100%; padding:8px 10px !important; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--panel-2); cursor:pointer; font-weight:750; }
.panel-secondary-button:hover,.panel-secondary-button[aria-pressed="true"] { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,var(--panel-2)); }
.image-wand-controls { display:grid; gap:9px; padding:10px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 5%,var(--panel)); }
.image-wand-controls[hidden] { display:none !important; }
.wand-heading,.wand-range > span { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wand-heading b { color:var(--ink); font-size:11px; }
.wand-heading button { width:22px; height:22px; padding:0; border:0; border-radius:50%; color:var(--muted); background:transparent; cursor:pointer; font-size:18px; }
.image-wand-controls > small { color:var(--muted); font-size:9px; line-height:1.35; }
.image-wand-controls .wand-range { display:grid; gap:6px; color:var(--muted); font-size:10px; }
.wand-range output { color:var(--accent); font-weight:800; }
.wand-range input { width:100%; accent-color:var(--accent); }
.wand-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.wand-actions button { min-height:32px; padding:5px !important; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--panel-2); cursor:pointer; font-size:9px; font-weight:750; }
.wand-actions button:hover:not(:disabled) { color:var(--accent-dark); border-color:var(--accent); background:var(--accent); }
.wand-actions button:disabled { opacity:.4; cursor:not-allowed; }
.canvas-wrap.image-wand-active { cursor:crosshair; }
.canvas-wrap.paste-placement-active { cursor:crosshair; }
.text-controls-panel { right:auto; left:50%; top:12px; width:max-content; max-width:calc(100% - 24px); padding:7px; display:flex; align-items:center; gap:7px; transform:translateX(-50%); z-index:16; }
.text-controls-panel[hidden] { display:none !important; }
.text-controls-panel > label { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; }
.text-controls-panel input,.text-controls-panel select { min-width:0; height:34px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--panel-2); font:inherit; }
.text-format-controls { display:flex; height:34px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); }
.text-format-controls button { width:32px; height:32px; padding:0; border:0; border-right:1px solid var(--line); color:var(--ink); background:transparent; font:inherit; cursor:pointer; }
.text-format-controls button:last-child { border-right:0; }
.text-format-controls button:hover { background:color-mix(in srgb,var(--accent) 10%,transparent); }
.text-format-controls button[aria-pressed="true"] { color:var(--accent-dark); background:var(--accent); }
.format-underline { text-decoration:underline; text-underline-offset:2px; }
.text-font-control select { width:190px; }
.text-height-control input { width:64px; }
.text-fill-options-button { height:34px; padding:6px 11px; white-space:nowrap; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--panel-2); cursor:pointer; font:inherit; }
.text-controls-panel .text-border-option { display:flex; align-items:center; gap:6px; height:34px; padding:0 9px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--panel-2); cursor:pointer; font-size:11px; }
.text-border-option input { margin:0; accent-color:var(--accent); }
.text-fill-options-button[aria-expanded="true"] { color:var(--accent-dark); border-color:var(--accent); background:var(--accent); }
.text-controls-panel .panel-primary-button { width:auto; height:34px; padding:6px 13px !important; white-space:nowrap; }
.text-controls-panel #closeTextTool { width:30px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:var(--muted); background:transparent; cursor:pointer; font-size:19px; }
@media (max-width:720px) { .text-controls-panel { flex-wrap:wrap; width:min(430px,calc(100% - 24px)); } .text-font-control { flex:1 1 170px; } .text-font-control select { width:100%; } }
.thread-sequence-group { margin:5px 0; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 4%,transparent); overflow:hidden; }
.thread-sequence-group > summary { padding:7px 9px; color:var(--ink); cursor:pointer; font-size:10px; font-weight:800; list-style-position:inside; background:color-mix(in srgb,var(--accent) 8%,var(--panel-2)); }
.thread-sequence-group.selected-group { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 14px color-mix(in srgb,var(--accent) 18%,transparent); }
.thread-sequence-group.drop-into { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,var(--panel-2)); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent); }
.thread-sequence-group.selected-group > summary { color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,var(--panel-2)); }
.thread-sequence-group > summary .sequence-group-name { border-radius:4px; padding:2px 3px; }
.thread-sequence-group.selected-group > summary .sequence-group-name:hover { background:color-mix(in srgb,var(--accent) 22%,transparent); text-decoration:underline; }
.thread-sequence-group > summary .sequence-group-name-input { width:min(180px,55%); margin:-3px 2px -3px 0; padding:3px 5px; font:inherit; }
.thread-sequence-group > summary small { margin-left:7px; color:var(--muted); font-weight:500; }
.thread-sequence-group .thread-row { border-radius:0; padding-left:11px; }
#waypointSelectMode[aria-pressed="true"] { color:var(--accent-dark); background:var(--accent); border-color:color-mix(in srgb,var(--accent) 72%,var(--ink)); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 34%,transparent); }