:root {
  --bg: #f3f3f3;
  --panel: #fbfbfb;
  --line: #dcdcdc;
  --text: #1f1f1f;
  --muted: #6b6b6b;
  --hover: #e8e8e8;
  --active: #cfe3ff;
  --accent: #1a73e8;
  --stage: #cdd3dc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #202020; --panel: #2b2b2b; --line: #3c3c3c; --text: #eee; --muted: #a0a0a0;
    --hover: #3a3a3a; --active: #24466f; --accent: #6aa7ff; --stage: #161616;
  }
}
:root[data-theme="dark"] {
  --bg: #202020; --panel: #2b2b2b; --line: #3c3c3c; --text: #eee; --muted: #a0a0a0;
  --hover: #3a3a3a; --active: #24466f; --accent: #6aa7ff; --stage: #161616;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 12px/1.3 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; overflow: hidden;
  user-select: none;
}
button, select, input { font: inherit; color: inherit; }

#titlebar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.logo { font-weight: 600; color: var(--accent); }
#draftName { border: 1px solid transparent; background: transparent; padding: 2px 6px; border-radius: 4px; min-width: 0; width: 240px; }
#draftName:hover, #draftName:focus { border-color: var(--line); background: var(--bg); outline: none; }
#saveState { color: var(--muted); }

#ribbon { display: flex; gap: 0; padding: 4px 4px 0; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.group { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 2px 8px 0; border-right: 1px solid var(--line); flex: none; position: relative; padding-bottom: 18px; }
.group h6 { position: absolute; bottom: 2px; left: 0; right: 0; margin: 0; text-align: center; font-weight: 400; font-size: 11px; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 4px; }
.row { display: flex; gap: 2px; }
#ribbon button { display: inline-flex; align-items: center; gap: 4px; min-width: 28px; height: 28px; padding: 0 5px; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; justify-content: center; }
#ribbon button:hover { background: var(--hover); }
#ribbon button.on { background: var(--active); border-color: var(--accent); }
#ribbon button:disabled { opacity: .35; cursor: default; }
#ribbon button svg { width: 18px; height: 18px; flex: none; }
#ribbon button.mini { min-width: 0; height: 16px; padding: 0 4px; font-size: 11px; }
#shapeGrid { display: grid; grid-template-columns: repeat(7, 26px); gap: 1px; }
#shapeGrid button { min-width: 26px !important; width: 26px; height: 24px !important; padding: 0 !important; }
.field { display: flex; flex-direction: column; gap: 1px; color: var(--muted); }
.field select, .field input { color: var(--text); }
select, input[type=number] { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; }
#size { width: 100%; }
.group.style { display: grid; grid-template-columns: auto auto; gap: 4px 8px; align-content: start; }
.group.style .field:nth-of-type(3) { grid-column: 1 / -1; }

.colorsWrap { display: flex; gap: 6px; align-items: flex-start; }
.slot { display: flex !important; flex-direction: column; align-items: center; gap: 2px; height: auto !important; padding: 3px !important; width: 50px; cursor: pointer; border-radius: 4px; border: 1px solid transparent; }
.slot span { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: block; }
.slot small { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.1; }
.slot.active { background: var(--active); border-color: var(--accent) !important; }
.slot.edit { position: relative; }
.slot.edit input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.slot.edit:hover { background: var(--hover); }
.rainbow { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red) !important; }
#palette, #custom { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; }
#custom { margin-top: 3px; }
.sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(128,128,128,.5); cursor: pointer; padding: 0; }
.sw:hover { transform: scale(1.15); }
.sw.empty { background: transparent; border-style: dashed; cursor: default; }

#optbar { display: flex; gap: 12px; align-items: center; padding: 4px 12px; min-height: 30px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
#toolName { font-weight: 600; }
#textOpts, #eraserOpts { display: inline-flex; gap: 4px; align-items: center; }
#textOpts[hidden], #eraserOpts[hidden] { display: none; }
#fontSize { width: 56px; }
.tog { width: 26px; height: 24px; border: 1px solid var(--line); background: var(--bg); border-radius: 4px; cursor: pointer; }
.tog.on { background: var(--active); border-color: var(--accent); }
#hint { color: var(--muted); }

#stage { flex: 1; overflow: auto; background: var(--stage); padding: 24px; position: relative; }
#page { position: relative; width: max-content; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
#canvas { display: block; touch-action: none; }
#layer > * { pointer-events: visible; }
#layer > [data-pe="stroke"] { pointer-events: visiblePainted; }
#overlay { pointer-events: none; }
#overlay .h { pointer-events: all; }
.rh { position: absolute; width: 8px; height: 8px; background: #fff; border: 1px solid #666; }
.rh-e { right: -12px; top: calc(50% - 4px); cursor: ew-resize; }
.rh-s { bottom: -12px; left: calc(50% - 4px); cursor: ns-resize; }
.rh-se { right: -12px; bottom: -12px; cursor: nwse-resize; }
#textEd { position: absolute; margin: 0; padding: 0; border: 1px dashed var(--accent); background: rgba(255,255,255,.08); resize: none; overflow: hidden; outline: none; line-height: 1.25; white-space: pre; min-width: 20px; }

#status { display: flex; gap: 18px; align-items: center; padding: 3px 12px; background: var(--panel); border-top: 1px solid var(--line); color: var(--muted); flex: none; }
#status .spacer { flex: 1; }
#zoomRange { width: 140px; }

#drafts { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -4px 0 20px rgba(0,0,0,.25); display: flex; flex-direction: column; z-index: 10; }
#drafts[hidden] { display: none; }
.dhead { display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dhead h3 { margin: 0; font-size: 15px; }
.dhead .note { color: var(--muted); flex: 1; font-size: 11px; }
.dhead button, .dcard button { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; cursor: pointer; }
#draftList { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.dcard { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.dcard.cur { border-color: var(--accent); }
.dcard img { width: 96px; height: 72px; object-fit: contain; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0/12px 12px; border-radius: 4px; cursor: pointer; flex: none; }
.dcard .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dcard .meta input { border: 1px solid transparent; background: transparent; font-weight: 600; padding: 1px 3px; border-radius: 3px; }
.dcard .meta input:focus { border-color: var(--line); outline: none; }
.dcard .meta small { color: var(--muted); }
.dcard .acts { display: flex; gap: 4px; margin-top: auto; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; }
dialog::backdrop { background: rgba(0,0,0,.3); }
dialog h3 { margin: 0 0 12px; }
dialog label { display: block; margin: 8px 0; }
dialog input[type=number] { width: 90px; }
dialog .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
dialog .btns button { padding: 5px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
dialog .btns .primary { background: var(--accent); color: #fff; border-color: var(--accent); }

@media (max-width: 700px) {
  #stage { padding: 16px; }
  #draftName { width: 140px; }
  #status { gap: 10px; }
  #zoomRange { width: 80px; }
}