/* ============================================================
   LILITH — configurator · Obsidian Venom
   ============================================================ */
#config{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:var(--ink);opacity:0;visibility:hidden;transform:translateY(2%);transition:opacity .55s var(--e2),transform .6s var(--e2),visibility .55s}
#config.open{opacity:1;visibility:visible;transform:none}
#cfgClose{position:fixed;top:max(14px,calc(env(safe-area-inset-top) + 6px));right:14px;z-index:9;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:color-mix(in oklab,var(--ink) 70%,transparent);color:var(--text);font-size:22px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .3s,transform .3s,border-color .3s}
#cfgClose:hover{background:var(--blood);border-color:var(--blood);color:#fff;transform:rotate(90deg)}

.cfg-stage{position:relative;flex:0 0 44vh;overflow:hidden;background:radial-gradient(120% 110% at 50% 30%,var(--ink-2),#0b0807)}
#cfgImg{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
#cfgImg.swap{opacity:0}
.cfg-vignette{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,var(--ink),transparent);pointer-events:none}
.cfg-stage-label{position:absolute;left:18px;top:16px;z-index:3;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--text);display:flex;align-items:center;gap:9px;opacity:.85}
.cfg-stage-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blood-2);box-shadow:0 0 0 3px color-mix(in oklab,var(--blood) 30%,transparent);animation:cfgpulse 2.4s ease-in-out infinite}
@keyframes cfgpulse{0%,100%{opacity:.5}50%{opacity:1}}

.cfg-panel{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:26px clamp(22px,5vw,42px) calc(168px + env(safe-area-inset-bottom))}
.cfg-step{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--blood-2)}
#cfgName{font-family:var(--display);font-weight:500;font-size:clamp(32px,7vw,48px);margin-top:8px;line-height:1;color:var(--text)}
.cfg-summary{color:var(--muted);font-size:13px;margin-top:8px;letter-spacing:.01em}

.cfg-group{margin-top:28px}
.cfg-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}

.cfg-swatches{display:flex;gap:10px;margin-top:13px}
.sw{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 6px;border:1px solid var(--line);border-radius:6px;background:var(--ink-1);color:var(--text);cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s}
.sw i{width:28px;height:28px;border-radius:50%;background:var(--sw);box-shadow:inset 0 1px 3px rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.4)}
.sw b{font-size:11px;font-weight:500;letter-spacing:.01em}
.sw.on{border-color:var(--blood-2);background:color-mix(in oklab,var(--blood) 14%,var(--ink-1));box-shadow:0 0 0 1px var(--blood-line),0 10px 30px rgba(0,0,0,.4)}

.cfg-options{display:flex;gap:10px;margin-top:13px}
.opt{flex:1;text-align:left;display:flex;flex-direction:column;gap:3px;padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--ink-1);color:var(--text);cursor:pointer;transition:border-color .3s,background .3s,opacity .3s,box-shadow .3s}
.opt b{font-size:14px;font-weight:500;line-height:1.2}
.opt small{font-size:11px;color:var(--muted)}
.opt em{font-style:normal;font-size:12px;color:var(--blood-2);margin-top:5px}
.opt.on{border-color:var(--blood-2);background:color-mix(in oklab,var(--blood) 14%,var(--ink-1));box-shadow:0 0 0 1px var(--blood-line),0 10px 30px rgba(0,0,0,.4)}
.opt.disabled{opacity:.34;cursor:not-allowed}
.cfg-options.flash .opt[data-eyes="1"]{animation:cfgflash .7s ease}
@keyframes cfgflash{40%{border-color:var(--blood-2);background:color-mix(in oklab,var(--blood) 22%,var(--ink-1))}}

.cfg-foot{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;align-items:center;gap:14px;padding:14px clamp(22px,5vw,42px) calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--ink) 64%,transparent)}
.cfg-price{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.cfg-price span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cfg-price strong{font-family:var(--display);font-size:27px;font-weight:500;color:var(--text)}
#cfgBuy{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:19px;border:1px solid var(--blood);border-radius:2px;background:var(--blood);color:#fff;font-family:var(--text-font);font-size:11px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;transition:background .4s var(--e2),transform .4s var(--e2)}
#cfgBuy:hover{background:var(--blood-2);transform:translateY(-2px)}
#cfgBuy i{font-style:normal;transition:transform .4s var(--e2)}
#cfgBuy:hover i{transform:translateX(6px)}

.cfg-done{position:absolute;inset:0;z-index:10;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:40px clamp(26px,8vw,60px);opacity:0;visibility:hidden;transition:opacity .5s ease}
#config.confirmed .cfg-done{opacity:1;visibility:visible}
.cfg-done .cfg-step{color:var(--blood-2)}
.cfg-done h4{font-family:var(--display);font-weight:500;font-size:clamp(28px,6vw,42px);color:var(--text)}
.cfg-done-note{color:var(--muted);font-size:13px;line-height:1.75;max-width:42ch}
#cfgDoneClose{margin-top:10px;font-family:var(--text-font);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--line-2);border-radius:2px;padding:16px 36px;cursor:pointer;transition:border-color .4s,color .4s,background .4s}
#cfgDoneClose:hover{border-color:var(--blood);color:#fff;background:var(--blood)}

@media (min-width:861px){
  #config{flex-direction:row}
  .cfg-stage{flex:0 0 54%;height:100vh}
  .cfg-vignette{display:none}
  .cfg-panel{width:46%;padding-top:72px;padding-bottom:132px}
  .cfg-foot{left:54%}
}