:root {
  color-scheme: dark;
  --bg: #080d18; --card: rgba(18, 28, 48, .9); --line: rgba(148,163,184,.18);
  --text: #f3f7ff; --muted: #9aa9c0; --accent: #62e6c5; --blue: #5ca8ff; --danger: #ff8f9c;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 15% 0%,rgba(92,168,255,.16),transparent 32rem), radial-gradient(circle at 100% 100%,rgba(98,230,197,.1),transparent 28rem),var(--bg); font: 15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font: inherit; } button { cursor: pointer; }
.app { width: min(100% - 28px, 560px); margin: auto; padding: 42px 0 22px; }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #06111b; background: linear-gradient(135deg,var(--accent),var(--blue)); font-size: 26px; font-weight: 900; box-shadow: 0 14px 35px rgba(92,168,255,.2); }
h1 { margin: 0; font-size: clamp(26px,6vw,34px); letter-spacing: -.05em; } .brand p { margin: 2px 0 0; color: var(--muted); }
.card { padding: clamp(20px,5vw,30px); border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: 0 24px 80px rgba(0,0,0,.23); backdrop-filter: blur(14px); }
.hidden { display: none !important; }
.home { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); text-align: left; background: rgba(4,9,18,.35); transition: transform .15s,border-color .15s,background .15s; }
.choice:hover { transform: translateY(-2px); border-color: rgba(98,230,197,.55); background: rgba(98,230,197,.06); }
.choice-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent); background: rgba(98,230,197,.12); font-size: 25px; }
.choice b,.choice small { display: block; } .choice small { margin-top: 2px; color: var(--muted); font-size: 12px; } .choice i { margin-left: auto; color: var(--muted); font-size: 26px; font-style: normal; }
.notice,.hint,.warning,footer { color: var(--muted); font-size: 12px; } .notice { margin: 12px 0 0; text-align: center; }
.back { margin: -4px 0 25px; padding: 0; border: 0; color: var(--muted); background: transparent; } .back:hover { color: var(--text); }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.code-row { display: flex; align-items: center; gap: 10px; } .code-row strong { min-width: 0; overflow: hidden; color: var(--text); font: 700 clamp(25px,7vw,38px)/1.1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .05em; word-break: break-all; }
.code-row .button { margin-left: auto; flex: 0 0 auto; } .hint { margin: 9px 0 20px; }
.button { border: 1px solid transparent; border-radius: 11px; padding: 11px 15px; color: var(--text); font-weight: 750; transition: transform .15s,filter .15s; } .button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button.primary { color: #06111b; background: linear-gradient(135deg,var(--accent),var(--blue)); } .button.secondary { border-color: var(--line); background: rgba(148,163,184,.1); } .button.wide { width: 100%; }
.drop { display: grid; place-items: center; gap: 3px; min-height: 170px; padding: 20px; border: 1px dashed rgba(148,163,184,.4); border-radius: 18px; color: var(--muted); text-align: center; background: rgba(4,9,18,.25); transition: border-color .15s,background .15s; } .drop:hover,.drop.drag { border-color: var(--accent); background: rgba(98,230,197,.06); } .drop b { color: var(--text); }
.drop small { font-size: 12px; } .drop-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 13px; color: var(--accent); background: rgba(98,230,197,.12); font-size: 25px; }
.file-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 13px; border: 1px solid rgba(98,230,197,.22); border-radius: 13px; background: rgba(98,230,197,.06); } .file-card span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-card small { flex: 0 0 auto; color: var(--muted); }
.status { display: flex; align-items: center; gap: 9px; margin-top: 19px; color: #d7e5f8; font-weight: 700; } .dot { width: 9px; height: 9px; border-radius: 50%; background: #f5bd68; box-shadow: 0 0 0 4px rgba(245,189,104,.14); } .dot.ready { background: var(--accent); box-shadow: 0 0 0 4px rgba(98,230,197,.14); } .dot.error { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,143,156,.14); }
.actions {
  display: flex;
  gap: 10px;
  margin-top: 32px;
}

#disconnect-receive {
  margin-top: 28px;
} .actions .button { flex: 1; }
.field { display: block; margin: 0 0 17px; } .field span { display: block; margin: 0 0 7px; color: #c9d4e5; font-size: 13px; font-weight: 650; } input { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); outline: 0; background: rgba(4,9,18,.55); } input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(92,168,255,.15); }
.download { display: grid; gap: 10px; margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--line); } .download p { margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .download a { display: block; text-align: center; text-decoration: none; }
.warning { margin: 18px 0 0; } footer { padding: 17px 4px 0; text-align: center; }
@media (max-width: 500px) { .app { width: min(100% - 18px,560px); padding-top: 24px; } .card { border-radius: 19px; } .code-row { align-items: flex-start; flex-direction: column; } .code-row .button { width: 100%; margin-left: 0; } .actions { flex-direction: column; } }