:root{
  --bg:#0e0c14; --bg-2:#15121d; --surface:#1b1725; --surface-2:#231e30;
  --line:#2f2840; --line-soft:#241f31;
  --text:#f2eef8; --muted:#a79cbd; --faint:#7a7091;
  --accent:#e8a87c; --accent-2:#d98cae; --accent-ink:#1a1220;
  --good:#6fd6a6; --warn:#f0c86a; --bad:#f08a8a;
  --r-sm:8px; --r:14px; --r-lg:20px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --topbar:58px;
}
*{box-sizing:border-box}
/* Author `display` rules outrank the UA rule for [hidden], so state it loudly. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
h1,h2{margin:0; font-weight:650; letter-spacing:-.015em}
h1{font-size:1.45rem}
h2{font-size:.82rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:.82rem} .faint{color:var(--faint)}
button{font:inherit; color:inherit}

/* ── top bar ───────────────────────────────────────────────── */
.topbar{
  height:var(--topbar); position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; padding-top:env(safe-area-inset-top);
  background:rgba(14,12,20,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:9px; font-weight:640; letter-spacing:-.01em}
.logo{width:22px; height:22px; color:var(--accent)}
.topnav{display:flex; gap:4px; background:var(--surface); padding:3px; border-radius:999px}
.navbtn{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:7px 14px; border-radius:999px; font-size:.86rem; font-weight:560;
  display:flex; align-items:center; gap:6px; transition:.15s;
}
.navbtn.is-active{background:var(--surface-2); color:var(--text)}
.pill{
  background:var(--accent); color:var(--accent-ink); border-radius:999px;
  min-width:18px; padding:0 5px; font-size:.7rem; font-weight:700; line-height:18px; text-align:center;
}

/* ── banner ────────────────────────────────────────────────── */
.banner{
  padding:10px 16px; font-size:.85rem; text-align:center;
  background:rgba(240,200,106,.14); color:var(--warn);
  border-bottom:1px solid rgba(240,200,106,.25);
}
.banner a{color:inherit}

/* ── layout ────────────────────────────────────────────────── */
main{min-height:calc(100vh - var(--topbar))}
.view{padding:16px; max-width:1400px; margin:0 auto}

/* ── dropzone ──────────────────────────────────────────────── */
.dropzone{
  min-height:calc(100vh - var(--topbar) - 48px);
  display:grid; place-items:center; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 50% 0%, rgba(232,168,124,.07), transparent 62%);
  transition:.18s;
}
.dropzone.is-over{border-color:var(--accent); background:rgba(232,168,124,.09)}
.dz-inner{max-width:440px; padding:32px 22px; display:grid; gap:14px; justify-items:center}
.dz-icon{
  width:58px; height:58px; display:grid; place-items:center; border-radius:50%;
  background:var(--surface); color:var(--accent); border:1px solid var(--line);
}
.dz-icon svg{width:26px;height:26px}
.dz-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.fineprint{font-size:.76rem; color:var(--faint); margin-top:2px}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  border:1px solid transparent; border-radius:999px; padding:11px 20px;
  font-size:.9rem; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn:disabled{opacity:.42; cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink)}
.btn-primary:not(:disabled):hover{filter:brightness(1.07)}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:8px 14px; font-size:.83rem}
.btn-block{width:100%; padding:14px}

/* ── workspace ─────────────────────────────────────────────── */
.workspace{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:1000px){
  .workspace{grid-template-columns:minmax(0,1fr) 380px; align-items:start}
  .panel{position:sticky; top:calc(var(--topbar) + 16px); height:calc(100vh - var(--topbar) - 32px)}
}
.stage{display:grid; gap:12px}
.stage-inner{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-soft); box-shadow:var(--shadow);
  aspect-ratio:4/5; max-height:min(72vh,760px); margin-inline:auto; width:100%;
}
@media (min-width:1000px){ .stage-inner{aspect-ratio:auto; height:calc(100vh - var(--topbar) - 118px)} }
.stage-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block}
.stage-after{clip-path:inset(0 0 0 50%)}
.slider-wrap{position:absolute; inset:0; pointer-events:none}
.slider-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:rgba(255,255,255,.9); pointer-events:auto; cursor:ew-resize; touch-action:none;
}
.slider-handle span{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.5);
}
.slider-handle span::before,.slider-handle span::after{
  content:""; position:absolute; top:50%; translate:0 -50%;
  border:5px solid transparent;
}
.slider-handle span::before{left:7px; border-right-color:#3a3348}
.slider-handle span::after{right:7px; border-left-color:#3a3348}
.stage-label{
  position:absolute; top:12px; padding:5px 11px; border-radius:999px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  font-size:.72rem; font-weight:640; letter-spacing:.06em; text-transform:uppercase;
}
.stage-label-l{left:12px} .stage-label-r{right:12px}
.stage-busy{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px;
  background:rgba(14,12,20,.82); backdrop-filter:blur(4px); text-align:center; padding:20px;
}
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:spin .85s linear infinite;
}
@keyframes spin{to{rotate:360deg}}

.resultbar{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.quality{
  border:1px solid var(--line); border-radius:var(--r); padding:11px 14px;
  background:var(--surface); font-size:.85rem; color:var(--muted); display:grid; gap:5px;
}
.quality b{color:var(--text); font-weight:600}
.quality.is-good{border-color:rgba(111,214,166,.3)}
.quality.is-warn{border-color:rgba(240,200,106,.3)}

.photobar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:2px 4px;
}
.photobar-actions{display:flex; gap:8px}

.segment{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:3px;
}
.segbtn{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:8px 10px; border-radius:999px; font-size:.85rem; font-weight:580; transition:.15s;
}
.segbtn.is-active{background:var(--surface-2); color:var(--text)}

/* ── panel ─────────────────────────────────────────────────── */
.panel{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); display:flex; flex-direction:column; overflow:hidden;
}
.panel-scroll{overflow-y:auto; padding:16px; display:grid; gap:22px; flex:1}
.panel-section{display:grid; gap:10px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.panel-foot{padding:14px 16px; border-top:1px solid var(--line-soft); background:var(--surface)}

.tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  border:1px solid var(--line); background:transparent; color:var(--muted);
  padding:6px 13px; border-radius:999px; font-size:.8rem; cursor:pointer; white-space:nowrap; transition:.15s;
}
.tab.is-active{background:var(--surface-2); color:var(--text); border-color:var(--line)}

.stylegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); gap:9px}
.style{
  border:1px solid var(--line); background:var(--bg-2); border-radius:var(--r);
  padding:7px; cursor:pointer; text-align:left; display:grid; gap:5px; transition:.15s;
}
.thumb{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:10px;
  overflow:hidden; background:var(--surface-2);
  display:grid; place-items:center;
}
/* Layer the image over the emoji placeholder rather than beside it. */
.thumb img{position:absolute; inset:0; width:100%; height:100%;
          object-fit:cover; display:block}
.thumb .fallback{font-size:1.5rem; opacity:.7}
.style.is-active .thumb{outline:2px solid var(--accent); outline-offset:-2px}
.style:hover{border-color:var(--faint)}
.style.is-active{border-color:var(--accent); background:rgba(232,168,124,.11)}
.style .emoji{font-size:1.1rem; line-height:1}
.style .name{font-size:.82rem; font-weight:600}
.style .blurb{font-size:.71rem; color:var(--faint); line-height:1.35}

.colorrow{display:flex; flex-wrap:wrap; gap:8px}
.swatch{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--line);
  cursor:pointer; padding:0; position:relative; transition:.15s;
}
.swatch.is-active{border-color:var(--accent); transform:scale(1.08)}
.swatch.keep{
  background:conic-gradient(#3b2418,#6b3d24,#c79a4e,#7d2f1d,#3b2418);
  display:grid; place-items:center; font-size:.62rem; font-weight:700; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.input{
  width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-sm); padding:11px 12px; font:inherit; font-size:.88rem;
}
.input:focus{outline:none; border-color:var(--accent)}

/* ── gallery ───────────────────────────────────────────────── */
.empty{text-align:center; padding:70px 20px; display:grid; gap:8px; place-items:center}
.gallerygrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  overflow:hidden; display:grid; grid-template-rows:auto auto;
}
.card img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; cursor:zoom-in; background:var(--bg-2)}
.card-body{padding:9px 11px; display:grid; gap:2px}
.card-title{font-size:.84rem; font-weight:600}
.card-sub{font-size:.72rem; color:var(--faint)}
.card-actions{display:flex; gap:6px; padding:0 11px 11px}
.icon-btn{
  border:1px solid var(--line); background:var(--bg-2); color:var(--muted);
  border-radius:var(--r-sm); padding:5px 9px; font-size:.72rem; cursor:pointer;
}
.icon-btn:hover{color:var(--text)}

.lockscreen{
  position:fixed; inset:0; z-index:95; display:grid; place-items:center;
  background:var(--bg); padding:24px;
}
.lockbox{
  width:min(340px,100%); display:grid; gap:12px; text-align:center;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--shadow);
}
.lock-title{font-size:1.15rem; text-transform:none; letter-spacing:-.01em; color:var(--text)}
.lock-error{color:var(--bad); font-size:.83rem; margin:0}

/* ── toast + lightbox ──────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:24px; translate:-50% 0; z-index:80;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  padding:11px 18px; border-radius:999px; font-size:.86rem; box-shadow:var(--shadow);
  max-width:90vw; text-align:center;
}
.lightbox{
  position:fixed; inset:0; z-index:90; background:rgba(8,6,12,.94);
  display:grid; place-items:center; padding:24px; gap:12px; grid-template-rows:1fr auto;
}
.lightbox img{max-width:100%; max-height:80vh; object-fit:contain; border-radius:var(--r)}
.lb-caption{color:var(--muted); font-size:.85rem; text-align:center}
.lb-close{
  position:absolute; top:16px; right:20px; background:none; border:0;
  font-size:2rem; color:var(--muted); cursor:pointer; line-height:1;
}
@media (max-width:999px){
  .view{padding:12px}
  .panel{border-radius:var(--r-lg)}
  .panel-scroll{max-height:none}
}