:root { --bg:#F7F3EB; --card:#FFFFFF; --ink:#2C2B29; --muted:#6B655C; --line:#E6E2D8; --gold:#C9A052;
  --inf:#B4483C; --com:#C07A2C; --pig:#3B44A0; --ok:#2F6B45; --warn:#9A5B12; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .err { color:var(--inf); font-weight:600; }
button { font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); padding:8px 12px; }
button.primary { background:var(--ink); color:#fff; border-color:var(--ink); width:100%; padding:12px; font-weight:700; margin-top:8px; }
button.secondary { width:100%; padding:10px; }
button.ghost { background:transparent; } button.small { padding:5px 10px; font-size:13px; }
kbd { font:11px ui-monospace, Menlo, monospace; border:1px solid var(--line); border-radius:4px; padding:0 4px; color:var(--muted); margin-left:auto; }
/* login + progress */
main.login, main.prog { max-width:560px; margin:8vh auto; background:var(--card); padding:28px; border-radius:18px; border:1px solid var(--line); }
main.prog { max-width:820px; margin:4vh auto; }
.login label { display:block; margin:12px 0; font-weight:600; }
.login input { display:block; width:100%; margin-top:6px; padding:10px; border:1px solid #BDB5A6; border-radius:10px; font:inherit; }
.login button { width:100%; background:var(--ink); color:#fff; padding:12px; margin-top:8px; font-weight:700; }
progress { width:100%; height:8px; accent-color:var(--gold); }
table { width:100%; border-collapse:collapse; margin-top:10px; } td { padding:8px; border-top:1px solid var(--line); vertical-align:top; }
tr.ok td:first-child::before { content:"✓ "; color:var(--ok); font-weight:700; }
/* annotate */
body.ann { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.top { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:10px 16px 0; background:var(--card); border-bottom:1px solid var(--line); }
.top .brand { font-family:Georgia, serif; font-size:18px; }
.top .where { font-weight:700; } .top .nav { display:flex; gap:6px; }
.top .saved { color:var(--ok); font-size:13px; } .top .saved.busy { color:var(--muted); } .top .saved.bad { color:var(--inf); }
.top .who { margin-left:auto; color:var(--ink); text-decoration:none; font-weight:600; }
.top progress { flex-basis:100%; height:4px; margin:6px -16px 0; width:calc(100% + 32px); }
.work { flex:1; display:flex; min-height:0; }
.photo { flex:1; display:flex; flex-direction:column; min-width:0; padding:12px 16px; }
.layers { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.layers button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.layers button:disabled { opacity:.35; cursor:default; } .hint { font-size:12.5px; margin:4px 0 0 6px; }
.stage { position:relative; flex:1; overflow:hidden; background:#1A1917; border-radius:14px; outline:none; cursor:crosshair; user-select:none; }
.stage.pan { cursor:grab; } .stage.view { cursor:default; }
.layer { position:absolute; left:0; top:0; transform-origin:0 0; }
.layer img { display:block; max-width:none; }
.layer svg { position:absolute; left:0; top:0; overflow:visible; }
svg rect { fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke; }
svg rect.inflammatory { stroke:var(--inf); } svg rect.comedone { stroke:var(--com); } svg rect.pigmentation { stroke:var(--pig); }
svg rect.unsure { stroke-dasharray:6 4; } svg rect.sel { stroke-width:4; }
svg rect.drawing { stroke:#fff; stroke-dasharray:4 3; }
.donebadge { position:absolute; right:12px; top:12px; background:var(--ok); color:#fff; padding:4px 10px; border-radius:999px; font-size:13px; }
.side { width:340px; flex-shrink:0; overflow:auto; padding:14px 16px 24px; background:var(--card); border-left:1px solid var(--line); }
.side h3 { font-size:12px; letter-spacing:.08em; color:var(--muted); margin:18px 0 8px; } .side h3:first-child { margin-top:0; }
.side h4 { font-size:11px; letter-spacing:.08em; color:var(--muted); margin:10px 0 6px; width:100%; }
.types { display:flex; flex-direction:column; gap:6px; }
.types .t { display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px; border-width:2px; }
.types .t i { width:14px; height:14px; border-radius:3px; display:inline-block; }
.t.inf i { background:var(--inf); } .t.com i { background:var(--com); } .t.pig i { background:var(--pig); }
.t.on { background:#FBF6EC; } .t.inf.on { border-color:var(--inf); } .t.com.on { border-color:var(--com); } .t.pig.on { border-color:var(--pig); }
.subs { display:flex; flex-wrap:wrap; gap:6px; } .subs button { font-size:13px; padding:6px 10px; border-radius:999px; }
.subs button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.unsure { display:flex; gap:8px; align-items:center; margin-top:12px; font-size:14px; }
.unsure input { width:18px; height:18px; accent-color:var(--warn); }
.list { list-style:none; margin:0; padding:0; max-height:32vh; overflow:auto; }
.list li { display:flex; align-items:center; gap:8px; padding:7px 6px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14px; }
.list li.sel { background:#FBF6EC; } .list li i { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.list li button { margin-left:auto; padding:3px 8px; font-size:12.5px; }
.alldone { position:fixed; inset:0; background:rgba(247,243,235,.97); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
@media (max-width: 900px) { .work { flex-direction:column; } .side { width:auto; border-left:0; border-top:1px solid var(--line); max-height:45vh; } }