:root{ --accent:#7c3dff; --accent2:#9a5cff; --bg-dark:#07080d; --bg-light:#fbfbf9;
  --ink-dark:#eceaf6; --ink-light:#141414; }
*{ box-sizing:border-box } html,body{ margin:0; height:100% }
body{ font-family:Inter,system-ui,sans-serif; background:var(--bg-light); color:var(--ink-light);
  transition:background-color .8s ease, color .8s ease; }
body.dark{ background:var(--bg-dark); color:var(--ink-dark); }
#atom{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }
.screen{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; padding:24px; text-align:center }
h1{ font-weight:900; letter-spacing:-.02em; font-size:clamp(32px,5vw,64px);
  background:linear-gradient(110deg,var(--accent),#b07cff); -webkit-background-clip:text; background-clip:text; color:transparent }
.btn{ border:0; border-radius:14px; padding:14px 26px; font-size:16px; font-weight:700; color:#fff;
  cursor:pointer; background:linear-gradient(120deg,var(--accent),var(--accent2));
  box-shadow:0 20px 50px -20px rgba(124,61,255,.6) }
.card{ background:rgba(255,255,255,.06); backdrop-filter:blur(10px); border:1px solid rgba(124,61,255,.25);
  border-radius:20px; padding:26px; box-shadow:0 24px 60px -28px rgba(60,30,120,.45) }
input,textarea{ border-radius:12px; border:1px solid rgba(124,61,255,.3); padding:12px 14px; font:inherit; width:min(420px,90vw) }
.grid2x3{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:720px }
.grid2x3 img{ width:100%; border-radius:12px }
.countdown{ font-size:120px; font-weight:900; color:var(--accent) }
.qr canvas,.qr img{ background:#fff; padding:12px; border-radius:14px }
.soundbtn{ position:fixed; top:16px; right:16px; z-index:5 }
.history-item{ display:flex; gap:12px; align-items:center; cursor:pointer }
.history-item img{ width:80px; border-radius:8px }

/* --- landing --- */
.kicker{ text-transform:uppercase; letter-spacing:.28em; font-size:13px; font-weight:700;
  color:var(--accent); opacity:.9; margin:0 }
.lead{ max-width:640px; font-size:clamp(16px,2.2vw,20px); line-height:1.55; opacity:.85; margin:0 }
.how{ list-style:none; padding:0; margin:8px 0 4px; display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center; max-width:720px }
.how li{ display:flex; align-items:center; gap:10px; font-size:15px; opacity:.8 }
.how li b{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#fff; font-size:14px }
.btn-lg{ padding:18px 40px; font-size:18px; border-radius:16px; margin-top:8px }

/* --- modal / pop-up --- */
.modal-backdrop{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,7,13,.72); backdrop-filter:blur(4px) }
.modal{ position:relative; width:min(420px,92vw); text-align:center; display:flex; flex-direction:column; gap:14px;
  background:#141024; border:1px solid rgba(124,61,255,.35); color:var(--ink-dark) }
.modal h2{ margin:0; font-weight:800; font-size:24px }
.modal p{ margin:0; font-size:14px; opacity:.8; line-height:1.5 }
.modal-close{ position:absolute; top:10px; right:14px; background:none; border:0; color:var(--ink-dark);
  font-size:26px; line-height:1; cursor:pointer; opacity:.6 }
.modal-close:hover{ opacity:1 }
.btn-ghost{ background:transparent; border:1px solid rgba(124,61,255,.5); color:inherit; box-shadow:none }

/* --- phone capture --- */
.cap{ gap:16px }
.cap-dots{ display:flex; gap:8px }
.cap-dots .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22) }
.cap-dots .dot.active{ background:var(--accent); box-shadow:0 0 12px var(--accent) }
.cap-dots .dot.done{ background:#3ddc84 }
.cap-stage{ position:relative; width:min(92vw,420px); display:flex; align-items:center; justify-content:center }
.cap-stage video, .cap-stage img{ width:100%; border-radius:18px; max-height:68vh; object-fit:cover; background:#000 }
.cap-stage img{ display:none }
.cap-cd{ position:absolute; font-size:96px; text-shadow:0 4px 30px rgba(124,61,255,.8) }
.cap-controls{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
.cap-status{ min-height:22px; opacity:.85 }

/* --- PC onboard / profile slots --- */
.slots{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin:4px 0 }
.slot{ width:210px; border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:10px; align-items:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(124,61,255,.25); transition:border-color .3s }
.slot.filled{ border-color:#3ddc84 }
.slot .slot-title{ font-weight:700 }
.slot .thumb{ width:100%; height:210px; border-radius:12px; object-fit:cover; background:rgba(124,61,255,.09) }
.slot .thumb.empty{ display:flex; align-items:center; justify-content:center; color:rgba(180,170,220,.6); font-size:13px; text-align:center; padding:10px }
.slot .row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.slot .mini{ padding:9px 12px; font-size:13px; border-radius:10px }
.tag-ok{ color:#3ddc84; font-weight:700; font-size:13px }
.linkbtn{ background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; text-decoration:underline; padding:6px }
.heightbox{ display:flex; gap:10px; align-items:center; padding:14px 18px }
.heightbox input{ width:130px }