:root{
  --bg:#0e1116; --panel:#171c24; --panel-2:#1f2630; --line:#2a323d;
  --text:#e6e9ef; --muted:#8b94a3; --accent:#ff8a5b; --accent-2:#ffb787;
  --danger:#e5604d;
  --radius:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 700px at 70% -10%,#1a2230 0,var(--bg) 55%);
  color:var(--text); font-family:var(--sans); line-height:1.5;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:28px 18px 80px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted)}
h1{font-size:30px; line-height:1.1; margin:6px 0 2px; font-weight:800;
  letter-spacing:-.02em}
.sub{color:var(--muted); margin:0 0 22px}
.panel{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; margin:14px 0}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.muted{color:var(--muted)}
.small{font-size:13px}

/* buttons */
button{font:inherit; cursor:pointer; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); padding:10px 16px;
  border-radius:10px; transition:transform .06s ease, border-color .15s}
button:hover{border-color:#3a4554}
button:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#1b1108;
  font-weight:700}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-ghost{background:transparent}

/* dropzone / inputs */
.drop{border:1.5px dashed #3a4554; border-radius:var(--radius); padding:34px 18px;
  text-align:center; color:var(--muted); transition:border-color .15s,background .15s}
.drop.hl{border-color:var(--accent); background:#1c232e; color:var(--text)}
input[type=password],input[type=text]{font:inherit; background:var(--panel-2);
  color:var(--text); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; width:100%}

/* face + preview */
.face{width:148px; height:148px; object-fit:cover; border-radius:16px;
  border:1px solid var(--line); background:#000}
.preview{max-width:100%; max-height:340px; border-radius:12px; border:1px solid var(--line)}

/* score reveal — the signature element */
.score-wrap{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.gauge{--v:0; --c:#888; width:150px; height:150px; border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  background:conic-gradient(var(--c) calc(var(--v)*1%), #232b36 0);}
.gauge .inner{width:120px; height:120px; border-radius:50%; background:var(--panel);
  display:grid; place-items:center; border:1px solid var(--line)}
.score-num{font-size:46px; font-weight:800; letter-spacing:-.03em; line-height:1}
.score-out{font-size:13px; color:var(--muted); font-family:var(--mono)}

/* rating buttons 0..10 (req #11) */
.rate-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:6px}
.rate-grid .r{font-weight:800; font-size:18px; padding:14px 0; border:1px solid var(--line);
  border-radius:12px; text-align:center; color:#0e1116}
@media(min-width:520px){.rate-grid{grid-template-columns:repeat(11,1fr)}
  .rate-grid .r{font-size:16px; padding:16px 0}}

.notice{padding:12px 14px; border-radius:10px; background:var(--panel-2);
  border:1px solid var(--line)}

/* selectable face thumbnails (multi-face photos) */
.faces-row{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 12px}
.fthumb{position:relative; width:64px; height:64px; border-radius:10px;
  overflow:hidden; border:2px solid var(--line); cursor:pointer; background:#000}
.fthumb img{width:100%; height:100%; object-fit:cover; display:block}
.fthumb.sel{border-color:var(--accent)}
.fthumb.male{cursor:not-allowed; opacity:.45}
.fthumb.rated{opacity:.7}
.fthumb .badge{position:absolute; right:2px; bottom:2px; font-size:11px;
  font-weight:800; padding:1px 5px; border-radius:6px; color:#0e1116}
.fthumb .mtag{position:absolute; left:2px; top:2px; font-size:9px;
  background:#241c10; border:1px solid #5a4326; color:#ffb787; padding:0 4px;
  border-radius:5px}
.notice.warn{border-color:#5a4326; background:#241c10}
.stat{font-family:var(--mono); font-size:13px; color:var(--muted)}
.stat b{color:var(--text)}
.hidden{display:none}
.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--muted);
  border-top-color:transparent; border-radius:50%; animation:sp .7s linear infinite;
  vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
ul.recent{list-style:none; padding:0; margin:8px 0 0}
ul.recent li{display:flex; justify-content:space-between; padding:6px 0;
  border-bottom:1px solid var(--line); font-size:14px}
a{color:var(--accent-2)}