:root{
  --bg:#0a0a12; --bg2:#12121f; --card:#171726; --line:#26263a;
  --ink:#f2f2f8; --dim:#9a9ab4; --accent:#6c8cff; --accent2:#33e6b0; --send:#6c8cff; --recv:#33e6b0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 50% -10%,#1a1a30 0%,var(--bg) 55%);
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden;
}
.view{position:fixed;inset:0;display:none;flex-direction:column;padding:env(safe-area-inset-top) 0 0}
.view.active{display:flex}

/* HOME */
#home{align-items:center;justify-content:center;text-align:center;padding:24px;gap:8px}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.logo{font-size:64px;line-height:1;color:var(--accent);filter:drop-shadow(0 0 24px #6c8cff66);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
h1{font-size:38px;margin:4px 0 0;letter-spacing:-.02em;font-weight:800}
.tag{color:var(--dim);max-width:20rem;margin:0;line-height:1.5}
.home-actions{display:flex;flex-direction:column;gap:14px;width:100%;max-width:22rem;margin:28px 0 16px}
.fineprint{color:var(--dim);font-size:12.5px;max-width:24rem;line-height:1.6;opacity:.85}

.big{border:0;border-radius:16px;padding:18px 20px;font-size:17px;font-weight:700;color:#0a0a12;
  display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,filter .2s ease}
.big:active{transform:scale(.97)}
.big.send{background:linear-gradient(135deg,#7f9bff,#6c8cff);box-shadow:0 10px 30px #6c8cff33}
.big.recv{background:linear-gradient(135deg,#4ff0bf,#33e6b0);box-shadow:0 10px 30px #33e6b033}
.ico{font-size:20px}.ico.big{font-size:34px}
.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:12px;padding:12px;font-size:14px;cursor:pointer;width:100%}

/* BARS */
.bar{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.bar .title{font-weight:700}.spacer{flex:1}
.back{background:transparent;border:0;color:var(--dim);font-size:16px;cursor:pointer;padding:4px 6px}

/* SEND */
.pick{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.drop{width:100%;max-width:22rem;border:2px dashed var(--line);border-radius:20px;padding:40px 20px;cursor:pointer;background:var(--card);transition:border-color .2s}
.drop:active{border-color:var(--accent)}
.drop-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--dim)}
.drop-inner span:not(.ico){color:var(--ink);font-weight:600;font-size:16px}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px;gap:14px;overflow:auto}
#qr{width:min(82vw,420px);height:min(82vw,420px);background:#fff;border-radius:14px;image-rendering:pixelated;box-shadow:0 12px 40px #0008}
.send-meta{width:100%;max-width:26rem;display:flex;flex-direction:column;gap:12px}
.fname{font-weight:700;text-align:center;word-break:break-all}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--dim)}
.chip b{color:var(--ink)}
.slider{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.slider input{flex:1;accent-color:var(--accent)}
.hint{color:var(--dim);font-size:12.5px;line-height:1.5;text-align:center;margin:4px 0}

/* RECEIVE */
.cam-wrap{position:relative;flex:1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
#cam{width:100%;height:100%;object-fit:cover}
.reticle{position:absolute;width:66vw;max-width:340px;aspect-ratio:1;border:2px solid #ffffff55;border-radius:18px;box-shadow:0 0 0 100vmax #0006}
.prog-ring{position:absolute;top:14px;right:14px;width:64px;height:64px;display:grid;place-items:center}
.prog-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.prog-ring .track{fill:none;stroke:#ffffff22;stroke-width:8}
.prog-ring .arc{fill:none;stroke:var(--recv);stroke-width:8;stroke-linecap:round;stroke-dasharray:339;stroke-dashoffset:339;transition:stroke-dashoffset .2s}
#progPct{font-size:13px;font-weight:700}
.recv-meta{padding:14px 16px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}
.status{color:var(--dim);font-size:13.5px;text-align:center;line-height:1.5}
#rEngine{text-transform:uppercase;letter-spacing:.04em;font-size:11px}

/* RESULT */
.result{position:fixed;inset:0;background:#0a0a12ee;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(6px)}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;width:100%;max-width:22rem;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.ok{color:var(--recv);font-weight:800;font-size:20px}
.rname{color:var(--dim);word-break:break-all;font-size:14px}
.preview{max-width:100%;max-height:40vh;border-radius:12px}
.hidden{display:none!important}

/* colour toggle */
.slider.toggle{justify-content:flex-start;gap:8px;color:var(--ink);font-weight:600}
.slider.toggle input[type=checkbox]{width:42px;height:24px;accent-color:var(--accent2);flex:0 0 auto}
.tag3x{font-size:11px;color:var(--accent2);background:#33e6b01a;border:1px solid #33e6b044;border-radius:999px;padding:2px 8px;font-weight:700}