/* Delisamae — nail try-on. Purple, dark, out of the way of the camera. */
:root{
  --bg:#0d0713; --ink:#f6f1fa; --dim:#b7a8c6; --faint:#8a7c99;
  --violet:#7c3aed; --violet-2:#9d5cf5; --violet-soft:rgba(124,58,237,.18);
  --plum:#2a1140; --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24);
  --glass:rgba(20,10,30,.86);
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden must beat any author display rule — a display:flex overlay otherwise
   stays on screen forever and covers the camera. */
[hidden]{display:none!important}
html,body{height:100%;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}
#stage{position:fixed;inset:0}
/* The video is only a frame source; the canvas is what you see. iOS reports a
   video as playing while compositing nothing, so we never rely on it. */
#cam{position:absolute;width:1px;height:1px;opacity:.01;pointer-events:none;top:0;left:0}
#paint{position:absolute;inset:0;width:100%;height:100%;background:var(--bg);display:block}

/* ---------- boot ---------- */
#boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:26px;
  background:radial-gradient(900px 620px at 50% 34%,#2a1140,#0d0713 70%)}
.bootbox{max-width:400px;text-align:center}
.mark{font-size:30px;color:var(--violet-2);margin-bottom:12px}
.bootbox h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(31px,8vw,44px);
  letter-spacing:-.02em;margin-bottom:12px}
.bootbox p{color:var(--dim);font-size:16.5px;line-height:1.6;margin-bottom:24px}
.fine{font-size:12.5px;color:var(--faint);margin:14px 0 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  font-weight:600;font-size:15px;padding:13px 26px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none}
.btn-p{background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;
  box-shadow:0 6px 22px rgba(124,58,237,.42)}
.btn-p:active{transform:scale(.985)}
.btn-s{background:rgba(255,255,255,.08);color:var(--ink);border-color:var(--line-2);
  backdrop-filter:blur(12px);padding:11px 18px;font-size:14px}

/* ---------- hud ---------- */
#hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
#hud>*{pointer-events:auto}
.tophud{display:flex;align-items:center;gap:8px;padding:14px 14px 0}
.pill{background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:500}
.pill.on{background:var(--violet-soft);border-color:rgba(157,92,245,.5);color:#e9dcfa}
.icon{width:38px;height:38px;border-radius:50%;background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--line);color:var(--ink);font-size:15px;cursor:pointer;flex:none}
.icon:first-of-type{margin-left:auto}

.tray{background:linear-gradient(to top,rgba(13,7,19,.94) 55%,transparent);
  padding:34px 12px 16px;display:flex;flex-direction:column;gap:11px}
.row{display:flex;gap:9px;overflow-x:auto;padding:2px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.sw{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.26);flex:none;
  cursor:pointer;box-shadow:inset 0 -6px 11px rgba(0,0,0,.3);position:relative;background-size:cover}
.sw.on{border-color:var(--violet-2);box-shadow:0 0 0 3px rgba(157,92,245,.4),inset 0 -6px 11px rgba(0,0,0,.3)}
.sw.custom::after{content:"✦";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.row2{display:flex;gap:10px;align-items:center}
.seg{display:flex;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:999px;overflow:hidden;flex:1}
.seg button{flex:1;background:none;border:0;color:var(--dim);font-family:inherit;font-size:13px;
  font-weight:600;padding:9px 8px;cursor:pointer}
.seg button.on{background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff}
.row3{display:flex;gap:9px}
.row3 .btn{flex:1}

/* ---------- sheets ---------- */
#sets,#fit,#diagpanel,#cropSheet{position:absolute;left:10px;right:10px;bottom:10px;z-index:60;max-height:76vh;
  overflow:auto;background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;pointer-events:auto}
#diagpanel{top:60px;bottom:auto}
.sheet-head{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:6px}
.sheet-head b{flex:1}
.sheet-note{font-size:12.5px;color:var(--faint);line-height:1.5;margin-bottom:14px}
.mini{background:rgba(255,255,255,.1);border:1px solid var(--line-2);color:var(--ink);
  font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer}
.mini#setsAdd,.mini#diagcopy{background:linear-gradient(135deg,var(--violet),var(--violet-2));border-color:transparent}

.setlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
.setcard{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;
  padding:8px;cursor:pointer;text-align:center}
.setcard.on{border-color:var(--violet-2);background:var(--violet-soft)}
.setcard .strip{display:flex;gap:2px;justify-content:center;height:44px;margin-bottom:6px}
.setcard .strip canvas{height:100%;width:auto;border-radius:3px}
.setcard .nm{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setcard .del{font-size:10.5px;color:var(--faint);margin-top:3px}
.empty-sets{font-size:13px;color:var(--faint);padding:14px 2px}

.workrow{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dim);padding:8px 0}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--violet-2);
  border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

.fitrow{display:block;margin-bottom:15px}
.fitrow>span{display:flex;justify-content:space-between;font-size:14px;color:var(--ink);margin-bottom:7px}
.fitrow>span b{color:var(--violet-2)}
.fitrow input{width:100%;accent-color:var(--violet-2)}
.fitrow small{display:block;font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.45}

#diagbody{display:grid;gap:1px;background:var(--line);border-radius:9px;overflow:hidden}
#diagbody>div{display:flex;gap:10px;background:rgba(20,10,30,.95);padding:7px 11px}
#diagbody dt{flex:none;width:120px;font-size:12px;color:var(--faint)}
#diagbody dd{margin:0;font-size:12px;font-family:ui-monospace,Menlo,monospace;word-break:break-word}

/* ---------- crop & assign ---------- */
#cropSheet{left:8px;right:8px;top:8px;bottom:8px;max-height:none;padding:10px 12px;
  display:flex;flex-direction:column}
#cropSheet .sheet-note{margin-bottom:6px}
#cropStage{position:relative;flex:1;min-height:0;background:#000;border-radius:12px;overflow:hidden;
  touch-action:none;margin:8px 0}
#cropCanvas{position:absolute;display:block}
#cropSvg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;overflow:visible}
#cropSvg .poly{fill:rgba(157,92,245,.22);stroke:var(--violet-2);stroke-width:2;cursor:move}
#cropSvg .vpt{fill:#fff;stroke:var(--violet);stroke-width:2;cursor:grab}
#cropSvg .mpt{fill:var(--violet-2);opacity:.5;cursor:copy}
#cropSvg .mpt:active{opacity:.9}
#cropSvg .rotln{stroke:rgba(255,255,255,.55);stroke-width:1.5;stroke-dasharray:3 3}
#cropSvg .rot{fill:var(--violet);stroke:#fff;stroke-width:2;cursor:grab}
#cropSvg .tip{fill:var(--violet);stroke:#fff;stroke-width:1.5}
#cropSvg .tiptxt{fill:#fff;font-size:9px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
#cropSvg .scaleln{stroke:rgba(255,255,255,.55);stroke-width:1.5;stroke-dasharray:3 3}
#cropSvg .scale{fill:var(--violet-2);stroke:#fff;stroke-width:2;cursor:nwse-resize}
#cropSvg .scaletxt{fill:#fff;font-size:11px;text-anchor:middle;dominant-baseline:central;pointer-events:none}

.zoomCtl{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;z-index:5}
.zoomCtl button{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(20,10,30,.65);color:#fff;font-size:18px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);
  font-family:inherit;padding:0}
.zoomCtl button:active{background:rgba(124,58,237,.85)}

.fingerRow{display:flex;justify-content:center;gap:10px;flex:none;padding:2px 0}
.fslot{width:42px;flex:none;text-align:center;cursor:pointer}
.fslot .thumb{width:42px;height:42px;border-radius:50%;background:var(--panel);
  border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:13px;font-weight:700;color:var(--dim);transition:border-color .15s}
.fslot .thumb img{width:100%;height:100%;object-fit:cover}
.fslot.filled .thumb{border-color:var(--violet-2);box-shadow:0 0 0 2px var(--violet-soft)}