* { box-sizing: border-box; }
[hidden] { display: none !important; }

:root, [data-theme="light"] {
  --bg: #ffffff; --panel: #ffffff; --fg: #17171a; --muted: #8a8f98;
  --border: #e6e7ea; --dock-border: #e4e5e9; --seg-bg: #f3f4f6;
  --accent: #17171a; --accent-fg: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.10);
  --hover: #f4f4f5;
}
[data-theme="dark"] {
  --bg: #0e0e10; --panel: #17181c; --fg: #e8e9ec; --muted: #6d727c;
  --border: #26282e; --dock-border: #2a2d34; --seg-bg: #22242a;
  --accent: #f2f2f4; --accent-fg: #111113;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --hover: #212329;
}

@font-face {
  font-family: "Goldy Burst";
  src: url("fonts/goldy-burst.ttf") format("truetype");
  font-display: swap;
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg);
  color: var(--fg); font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased; }

/* ---------- header ---------- */
header { display: flex; align-items: center; gap: 14px; height: 52px;
  padding: 0 18px; border-bottom: 1px solid var(--border); }
.brand { font-family: "Goldy Burst", cursive; font-weight: 400; font-size: 22px;
  letter-spacing: .5px; transform: translateY(2px); }
.brand::after { content: "·"; margin-left: 9px; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#stats { flex: 1; text-align: center; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- canvas ---------- */
#cv { display: block; width: 100vw; height: calc(100vh - 53px); cursor: crosshair; }

#hint { position: fixed; left: 16px; bottom: 18px; font-size: 11px; color: var(--muted);
  pointer-events: none; max-width: 38vw; }

/* ---------- dock ---------- */
.dock { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); }
.pill { display: flex; align-items: center; gap: 4px; background: var(--panel);
  border: 1px solid var(--dock-border); border-radius: 14px; padding: 6px;
  box-shadow: var(--shadow); }

.icon-btn, .ghost, .primary { display: inline-flex; align-items: center; justify-content: center;
  height: 34px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; color: var(--fg);
  background: transparent; padding: 0 10px; }
.icon-btn { width: 34px; padding: 0; }
.icon-btn:hover, .ghost:hover { background: var(--hover); }
.primary { background: var(--accent); color: var(--accent-fg); font-weight: 550; padding: 0 14px; }
.primary:hover { opacity: .88; }
.ghost { color: var(--fg); }
.vsep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* segmented control */
.seg { display: flex; background: var(--seg-bg); border-radius: 9px; padding: 3px; gap: 2px; }
.seg .tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer; }
.seg .tool.active { background: var(--panel); color: var(--fg); font-weight: 550;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.cut { background: #f2555a; } .dot.mark { background: #4aa3ff; } .dot.ign { background: #8a8f98; }
.dot.meas { background: #f2b13c; }

#sheetBtns { display: inline-flex; gap: 4px; }
#sheetBtns .ghost { border: 1px solid var(--border); font-size: 12px; height: 30px; }

/* ---------- settings panel ---------- */
#gearPanel { position: fixed; top: 58px; right: 12px; width: 240px; z-index: 20;
  background: var(--panel); border: 1px solid var(--dock-border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px 12px; }
#gearPanel .opt { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; }
#gearPanel .opt + .opt { border-top: 1px solid var(--border); }
#gearPanel label { font-size: 12px; color: var(--fg); }
#gearPanel label em { font-style: normal; color: var(--muted); font-size: 11px; }
#gearPanel input[type=number], #gearPanel select { width: 76px; background: var(--seg-bg);
  color: var(--fg); border: 1px solid transparent; border-radius: 7px; padding: 5px 8px;
  font: inherit; font-size: 12px; text-align: right; }
#gearPanel input[type=number]:focus, #gearPanel select:focus { outline: none; border-color: var(--muted); }
#gearPanel input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }

/* ---------- empty state / dropzone ---------- */
#loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; background: var(--bg); }
#loading p { font-size: 22px; color: var(--fg); letter-spacing: .3px; margin: 0; }
#loading .spinner { width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--fg);
  animation: spin 0.9s linear infinite; }
#loading .track { width: 220px; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
#loadingBar { height: 100%; width: 0; background: var(--fg); transition: width .3s ease; }
@keyframes spin { to { transform: rotate(360deg); } }

#pngView { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center;
  justify-content: center; background: rgba(0,0,0,.55); cursor: zoom-out; }
#pngView img { max-width: 94vw; max-height: 92vh; background: #fff; box-shadow: 0 4px 30px rgba(0,0,0,.4); }

#emptyState { position: fixed; inset: 53px 0 0 0; display: flex; align-items: center;
  justify-content: center; cursor: pointer; }
#emptyState .drop { text-align: center; color: var(--muted); padding: 46px 70px;
  border: 1.5px dashed var(--border); border-radius: 18px; transition: border-color .15s, color .15s; }
#emptyState .drop svg { opacity: .6; margin-bottom: 6px; }
#emptyState p { margin: 4px 0; font-size: 15px; color: var(--fg); }
#emptyState p.sub { font-size: 12px; color: var(--muted); }
#emptyState { flex-direction: column; }
#emptyState .patternlink { margin-top: 14px; font-size: 12px; color: var(--muted);
  text-decoration: none; }
#emptyState .patternlink:hover { color: var(--fg); }
body.dragging #emptyState .drop, #emptyState:hover .drop { border-color: var(--muted); color: var(--fg); }
#emptyState[hidden] { display: none; }

/* ---------- theme icon ---------- */
[data-theme="dark"] .sun { display: none; }
[data-theme="light"] .moon { display: none; }