:root{
  --bg:#0f1115; --card:#151922; --ink:#e7ecf3; --muted:#93a1b1; --brand:#8a7aff; --accent:#51c7b1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:linear-gradient(180deg,#0b0d12,#121722 35%,#0b0d12);
  color:var(--ink);font:500 15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial
}
.app-header{position:sticky;top:0;z-index:5;background:#0c1018d0;backdrop-filter:blur(10px);border-bottom:1px solid #202635}
.wrap{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.title{font-size:18px;font-weight:700;letter-spacing:.3px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.card{background:var(--card);border:1px solid #232a3a;border-radius:16px;box-shadow:0 10px 30px #0006}
.stage{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;max-width:1200px;margin:16px auto;padding:0 16px}
canvas,video{display:block;width:100%;height:auto;border-radius:14px}
.hidden{display:none}
.pane{padding:14px}
h3{margin:0 0 10px 0;font-size:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mt{margin-top:16px}
.ctl{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.ctl label{font-size:12px;color:var(--muted)}
input[type="range"]{width:100%}
.hint{font-size:12px;color:var(--muted)}
.uploader{border:1px dashed #334;padding:12px;border-radius:12px;text-align:center}
.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.btn,button{
  background:#111827;border:1px solid #253049;color:var(--ink);border-radius:12px;padding:10px 12px;cursor:pointer
}
button.primary{background:linear-gradient(180deg,#7b6aff,#5b4dff);border:none}
button:disabled{opacity:.5;cursor:not-allowed}
.app-footer{padding:16px;color:#9aa9c0;text-align:center}
@media (max-width: 980px){.stage{grid-template-columns:1fr}}

/* Hair gallery: tiny thumbs */
.hair-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(64px,1fr));
  gap:8px;
  max-height:220px;
  overflow:auto;
  margin:8px 0 6px;
  padding-right:2px;
}
.hair-thumb{
  width:64px;
  height:64px;
  object-fit:contain;
  background:#0f1420;
  border:1px solid #2a3346;
  border-radius:10px;
  padding:4px;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease, border-color .1s ease;
  display:block;
  margin:0 auto;
}
.hair-thumb:hover{ transform:translateY(-1px); box-shadow:0 6px 12px #0006; }
.hair-thumb.active{ border-color:var(--brand); box-shadow:0 0 0 2px #8a7aff40 inset; }