:root{
  --bg:#0f1012;
  --panel:#17181c;
  --track:#26282e;          /* unfilled cable */
  --flow:#3b82f6;           /* in-motion blue   */
  --done:#22c55e;           /* completed green  */
  --accent:#f97316;         /* brand accent (the swear) */
  --text:#f2f1ec;
  --muted:#9a9ba3;
  --line:rgba(255,255,255,.08);
  --err:#ef4444;
  --radius:12px;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     min-height:100vh;min-height:100dvh;padding:24px;gap:14px;
     padding-bottom:max(24px,env(safe-area-inset-bottom))}
.card{width:100%;max-width:640px;background:var(--panel);border:1px solid var(--line);
      border-radius:var(--radius);padding:28px}

/* ---- brand ---- */
.brand{margin:0 0 22px}
.title{margin:0;font-size:clamp(30px,7vw,46px);line-height:1.04;letter-spacing:-.02em;font-weight:800}
.title .cuss{font-style:italic;color:var(--accent)}
.tagline{margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.45;max-width:46ch}

/* ---- screens ---- */
.screen{display:flex;flex-direction:column;gap:14px}
.screen[hidden]{display:none}

/* ---- buttons ---- */
.btn{font-family:var(--sans);font-size:15px;color:var(--text);background:transparent;
     border:1px solid var(--line);border-radius:10px;padding:12px 16px;cursor:pointer;
     transition:background-color .15s ease,border-color .15s ease,transform .05s ease}
.btn:hover{background:#1e2025}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a0d02;font-weight:700}
.btn-primary:hover{background:#fb8c3b}
.btn-big{font-size:18px;padding:16px;font-weight:700}
.btn-ghost{color:var(--muted)}
.btn-cancel{align-self:center;border-color:transparent;padding:8px 14px;font-size:14px}
.btn-cancel:hover{color:var(--text)}

/* ---- home: receive form ---- */
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;
    text-transform:uppercase;letter-spacing:.08em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.receive-form{display:flex;gap:10px}
.code-input{flex:1;min-width:0;font-family:var(--mono);font-size:17px;color:var(--text);
     background:#1e2025;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.code-input:focus{outline:none;border-color:var(--accent)}
.code-input::placeholder{color:#5b5d66}
.hint{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

/* ---- status line ---- */
.status{display:flex;align-items:center;gap:9px;margin:0;font-size:15px;font-weight:600}
.status-wait{color:var(--muted)}
.status-go{color:var(--done)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);
     box-shadow:0 0 0 0 rgba(154,155,163,.5);animation:ping 1.4s ease-out infinite}
.dot-go{background:var(--done);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(154,155,163,.45)}70%,100%{box-shadow:0 0 0 7px rgba(154,155,163,0)}}

/* ---- sender share card ---- */
.code-card{background:#1e2025;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
.code-label{margin:0 0 4px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.code-big{margin:0 0 14px;font-family:var(--mono);font-size:clamp(22px,6vw,30px);font-weight:700;
     word-break:break-word;color:var(--text)}
.share-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-copy{font-size:14px;padding:9px 14px}
.btn-copy.copied{border-color:var(--done);color:var(--done)}
.share-link{margin:12px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-all}

/* ---- QR ---- */
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.qr{width:180px;height:180px;background:#fff;border-radius:10px;padding:10px;display:flex}
.qr svg, .qr canvas{width:100%;height:100%;display:block}
.qr-hint{margin:0;color:var(--muted);font-size:12px}

/* ---- dropzone ---- */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
     min-height:160px;border:1.5px dashed var(--line);border-radius:12px;color:var(--muted);
     cursor:pointer;text-align:center;padding:24px;transition:border-color .15s ease,background-color .15s ease}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);color:var(--text);outline:none}
.dropzone.dragover{border-color:var(--accent);background:rgba(249,115,22,.07);color:var(--text)}
.dz-main{font-size:16px;font-weight:600;color:var(--text)}
.dz-sub{font-size:13px}
.pick-row{display:flex;gap:10px}
.pick-row .btn{flex:1;text-align:center}

/* ---- manifest / file list ---- */
.manifest{background:#1e2025;border:1px solid var(--line);border-radius:12px;padding:16px}
.manifest-head{margin:0 0 10px;font-size:15px;font-weight:600}
.file-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
     max-height:220px;overflow:auto}
.file-list li{display:flex;justify-content:space-between;gap:12px;font-size:14px;
     padding:8px 10px;background:#17181c;border-radius:8px}
.file-list .fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .fsize{color:var(--muted);font-family:var(--mono);flex:0 0 auto}

/* ===========================================================================
   TRANSFER ANIMATION  (preserved as-is from the reference)
   =========================================================================== */
.head{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
      color:var(--muted);margin:0 0 22px}
.stage{display:flex;align-items:flex-start;gap:10px;margin:0 0 26px}
.node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.disc{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);
      background:#1e2025;display:flex;align-items:center;justify-content:center;color:var(--muted);
      transition:transform .25s ease,border-color .25s ease,color .25s ease}
.node-label{font-size:13px;color:var(--muted)}
.cable{flex:1;position:relative;height:56px;display:flex;align-items:center}
.track{position:relative;width:100%;height:12px;border-radius:999px;background:var(--track);overflow:hidden}
.done{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--flow);
      border-radius:999px 0 0 999px;transition:background-color .4s ease}
.flow{position:absolute;left:0%;top:0;bottom:0;right:0;opacity:.55;
      background-image:repeating-linear-gradient(90deg,var(--flow) 0 6px,transparent 6px 16px);
      background-size:16px 100%}
.frontier{position:absolute;left:0%;top:14px;bottom:14px;width:3px;border-radius:2px;
          background:var(--flow);transform:translateX(-50%);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* the "they're here, go" snap-together pulse */
.stage.snap .disc{transform:scale(1.08);border-color:var(--done);color:var(--done)}
.stage.snap{animation:snap .5s ease}
@keyframes snap{0%{transform:translateY(0)}30%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.stat{background:#1e2025;border-radius:8px;padding:14px 12px}
.stat-label{margin:0 0 4px;font-size:12px;color:var(--muted)}
.stat-val{margin:0;font-family:var(--mono);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.unit{font-size:13px;color:var(--muted);font-weight:400}
.transfer-note{margin:0 0 6px;color:var(--muted);font-size:13px;text-align:center;min-height:1em}
.transfer-note.reconnecting{color:var(--accent);font-weight:600}
.path-info{margin:0 0 6px;font-size:12px;text-align:center;color:var(--muted);min-height:1em;font-family:var(--mono)}
.path-info.lan{color:var(--done)}
.path-info.wan{color:var(--accent)}
.linklike{align-self:center;background:transparent;border:none;color:var(--accent);
  text-decoration:underline;cursor:pointer;font-family:var(--sans);font-size:12px;padding:2px 4px}
.linklike:hover{color:var(--text)}

/* ---- result (done / error) ---- */
.result{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:14px 0}
.result-ok{color:var(--done)}
.result-err{color:var(--err)}
.result-title{margin:0;font-size:22px;font-weight:800;color:var(--text)}
.result-sub{margin:0;color:var(--muted);font-size:15px;line-height:1.5;max-width:42ch}

/* ---- footer ---- */
.foot{color:#5b5d66;font-size:12px;letter-spacing:.02em;text-align:center}
.foot-sep{margin:0 4px}
.foot-link{color:#5b5d66;text-decoration:underline;cursor:pointer}
.foot-link:hover{color:var(--muted)}

/* ---- inline consent + terms link ---- */
.consent{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.terms-link{color:inherit;text-decoration:underline;cursor:pointer}
.terms-link:hover{color:var(--text)}

/* ---- terms modal ---- */
.modal{border:none;border-radius:14px;background:var(--panel);color:var(--text);
  width:calc(100% - 32px);max-width:560px;max-height:82vh;padding:0;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.modal::backdrop{background:rgba(0,0,0,.62)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-title{margin:0;font-size:17px;font-weight:800}
.modal-x{background:transparent;border:none;color:var(--muted);font-size:16px;
  cursor:pointer;padding:4px 8px;line-height:1}
.modal-x:hover{color:var(--text)}
.modal-body{padding:18px 20px;overflow:auto;max-height:calc(82vh - 60px)}
.modal-body p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--text)}
.modal-intro{color:var(--muted)!important;font-size:13px!important}
.modal-body strong{color:var(--text)}
.term-tbd{color:var(--accent);font-weight:600}

@media (max-width:480px){
  .card{padding:22px 18px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .qr{width:160px;height:160px}
}
@media (prefers-reduced-motion:reduce){
  .flow{animation:none}.frontier{animation:none}.dot{animation:none}.stage.snap{animation:none}
}