:root{
  --bg:#0E0B10; --bg-2:#17121C;
  --panel:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.028);
  --ink:#F4EFF7; --ink-2:#CDC6D6; --mute:#948C9E; --faint:#6E6678;
  --red:#FF3B5C; --red-deep:#C8102E; --gold:#F5B301; --green:#2FD27A;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --r:12px; --r-lg:16px; --r-xl:24px;
  --glow: 0 0 40px -10px rgba(255,59,92,.55);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; height:100%; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.5; overflow:hidden; }

.aura{ position:fixed; inset:-25% -10% auto -10%; height:80vh; z-index:0; pointer-events:none;
  background: radial-gradient(44% 60% at 26% 20%, rgba(255,59,92,.22), transparent 70%), radial-gradient(40% 55% at 72% 8%, rgba(245,179,1,.12), transparent 70%);
  filter:blur(30px); animation:drift 18s var(--ease) infinite alternate; }
@keyframes drift{ from{ transform:translate3d(-2%,0,0) scale(1);} to{ transform:translate3d(3%,2%,0) scale(1.08);} }
.grain{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── full-viewport two-pane shell ── */
.shell{ position:relative; z-index:1; height:100dvh; display:grid; grid-template-columns:1fr; }
@media(min-width:900px){ .shell{ grid-template-columns:0.92fr 1.08fr; } }

/* left hero */
.hero{ display:none; }
@media(min-width:900px){
  .hero{ display:flex; flex-direction:column; justify-content:space-between; padding:clamp(28px,4vw,56px); position:relative; }
}
.hero-mid{ max-width:30ch; }
.hero h1{ font-size:clamp(40px,4.6vw,64px); line-height:1.03; letter-spacing:-.045em; font-weight:800; margin:0 0 18px;
  background:linear-gradient(180deg,#fff,#CDBFD6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero h1 em{ font-style:normal; background:linear-gradient(90deg,var(--red),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p{ color:var(--ink-2); font-size:clamp(15px,1.4vw,17px); max-width:34ch; margin:0 0 26px; }
.hero p b{ color:#fff; font-weight:600; }
.hero-beam{ display:flex; align-items:center; margin:0 0 26px; }
.hero-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; color:var(--ink-2); font-size:14.5px; }
.hero-foot{ color:var(--mute); font-size:13px; text-decoration:none; } .hero-foot b{ color:var(--ink-2); } .hero-foot:hover{ color:var(--ink); }

/* right panel */
.panel{ position:relative; display:flex; flex-direction:column; height:100dvh; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); }
@media(min-width:900px){ .panel{ border-left:1px solid var(--line); } }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:18px clamp(20px,3vw,40px); border-bottom:1px solid var(--line); }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.mark{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(150deg,var(--red),var(--red-deep)); box-shadow:var(--glow); flex:none; }
.mark svg{ width:19px; height:19px; fill:none; stroke:#fff; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.word{ font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.brand-sm{ display:flex; } @media(min-width:900px){ .brand-sm{ display:none; } }

.tabs{ position:relative; display:flex; gap:2px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; padding:3px; }
.tab{ position:relative; z-index:1; border:0; background:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; color:var(--mute); padding:7px 18px; border-radius:999px; transition:color .2s; }
.tab.is-active{ color:#fff; }
.tab-ink{ position:absolute; z-index:0; top:3px; bottom:3px; border-radius:999px; background:linear-gradient(150deg,var(--red),var(--red-deep)); box-shadow:0 4px 12px -4px rgba(255,59,92,.55); transition:left .28s var(--ease), width .28s var(--ease); }

/* panel body / views */
.app-body{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(24px,4vh,48px) clamp(20px,4vw,40px); min-height:0; }
.view{ width:100%; max-width:440px; display:flex; flex-direction:column; justify-content:center; gap:16px; animation:fade .3s var(--ease) both; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.chat-view{ height:100%; max-width:520px; justify-content:stretch; gap:10px; }

/* drop zone */
.drop{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  border:1.5px dashed var(--line-2); border-radius:var(--r-lg); padding:clamp(30px,5vh,48px) 22px; cursor:pointer; background:var(--panel-2); overflow:hidden; transition:.22s var(--ease); }
.drop:hover,.drop:focus-visible,.drop.over{ border-color:var(--red); background:var(--panel); box-shadow:0 24px 60px -30px rgba(255,59,92,.5); outline:none; transform:translateY(-1px); }
.drop-ic{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px; background:linear-gradient(150deg,var(--red),var(--red-deep)); box-shadow:var(--glow); }
.drop-ic svg{ width:26px; height:26px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.drop-t{ font-size:19px; font-weight:700; }
.drop-s{ color:var(--mute); font-size:13px; }

.textrow{ display:flex; gap:8px; }
#text,#chatcode,#msg,#recvcode{ border:1px solid var(--line-2); border-radius:var(--r); padding:12px 14px; font-family:inherit; font-size:15px; background:var(--panel-2); color:var(--ink); transition:border-color .18s; }
#text,#msg{ flex:1; }
#text::placeholder,#msg::placeholder,#chatcode::placeholder,#recvcode::placeholder{ color:var(--faint); }
#text:focus,#chatcode:focus,#msg:focus,#recvcode:focus{ outline:none; border-color:var(--red); }
.link{ border:0; background:none; cursor:pointer; color:var(--red); font-family:inherit; font-size:13px; font-weight:600; padding:2px 4px; }
.link:hover{ text-decoration:underline; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; cursor:pointer;
  background:linear-gradient(150deg,var(--red),var(--red-deep)); color:#fff; font-family:inherit; font-weight:700; font-size:15px;
  padding:12px 20px; border-radius:var(--r); transition:.16s var(--ease); box-shadow:0 10px 26px -12px rgba(255,59,92,.6); white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(255,59,92,.7); }
.btn.ghost{ background:var(--panel); color:var(--ink-2); border:1px solid var(--line-2); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--red); color:#fff; }
.btn.big{ padding:15px 26px; font-size:16px; border-radius:var(--r-lg); }
.btn.wide{ width:100%; }
.btn.round{ width:46px; height:46px; padding:0; border-radius:50%; flex:none; }
.btn.round svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn.dl{ background:linear-gradient(150deg,#3AE38A,#1FA85E); box-shadow:0 10px 26px -12px rgba(47,210,122,.55); text-decoration:none; }

.chat-hero{ text-align:center; }
.chat-hero-ic{ font-size:36px; margin-bottom:6px; }
.chat-hero h2{ font-size:24px; letter-spacing:-.02em; margin:0 0 8px; }
.chat-hero p{ color:var(--ink-2); font-size:14.5px; max-width:36ch; margin:0 auto 20px; }
.joinrow{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--mute); font-size:14px; }
.joinrow input{ width:100px; text-align:center; text-transform:uppercase; font-family:var(--mono); font-size:15px; letter-spacing:.14em; }

/* beam */
.beamviz{ display:flex; align-items:center; justify-content:center; margin:2px 0 8px; height:44px; }
.node{ width:15px; height:15px; border-radius:50%; flex:none; }
.node.me{ background:radial-gradient(circle at 40% 35%,#fff,var(--red)); box-shadow:0 0 16px -2px var(--red); }
.node.them{ background:transparent; border:2px solid var(--line-2); animation:hollow 1.4s ease infinite; }
.node.them.on{ background:radial-gradient(circle at 40% 35%,#fff,var(--gold)); border:0; box-shadow:0 0 16px -2px var(--gold); animation:none; }
@keyframes hollow{ 0%,100%{ border-color:var(--line-2);} 50%{ border-color:var(--gold);} }
.line{ position:relative; width:min(240px,60%); height:2px; margin:0 8px; background:linear-gradient(90deg,var(--red),rgba(255,255,255,.12) 45%,rgba(255,255,255,.12) 55%,var(--line-2)); }
.line.on{ background:linear-gradient(90deg,var(--red),var(--gold)); box-shadow:0 0 12px -1px rgba(245,179,1,.5); }
.line.done{ background:var(--green); box-shadow:0 0 12px -1px var(--green); }
.seal{ font-size:13px; filter:saturate(0) brightness(1.9); margin:0 -6px; }
.pkt{ position:absolute; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:#fff; box-shadow:0 0 8px 1px var(--gold); opacity:0; animation:flow 2.2s linear infinite; }
.line .pkt:nth-child(1){ animation-delay:0s; } .line .pkt:nth-child(2){ animation-delay:.7s; } .line .pkt:nth-child(3){ animation-delay:1.4s; }
.line.on .pkt{ animation-duration:1s; }
.line.done .pkt{ display:none; }
@keyframes flow{ 0%{ left:0; opacity:0;} 12%{ opacity:1;} 88%{ opacity:1;} 100%{ left:100%; opacity:0;} }
.line.searching .pkt{ animation:search 1.8s ease-in-out infinite; }
@keyframes search{ 0%,100%{ left:0; opacity:0;} 50%{ left:45%; opacity:.5;} }

/* share */
#share{ align-items:center; text-align:center; }
.share-head{ font-size:14px; font-weight:600; color:var(--ink-2); }
.qr{ width:180px; height:180px; background:#fff; border-radius:var(--r-lg); padding:10px; display:grid; place-items:center; box-shadow:0 20px 50px -30px rgba(0,0,0,.8); }
.qr img,.qr canvas{ display:block; border-radius:4px; }
.code{ font-family:var(--mono); font-size:44px; font-weight:700; letter-spacing:.14em; background:linear-gradient(90deg,var(--red),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.waiting{ display:flex; align-items:center; gap:8px; color:var(--mute); font-size:13px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px 1px var(--gold); animation:pulse 1.2s ease infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3; transform:scale(.85);} 50%{ opacity:1; transform:scale(1);} }

#connecting{ align-items:center; text-align:center; gap:8px; }
.conn-t{ font-size:18px; font-weight:600; } .conn-s{ color:var(--mute); font-size:13px; }

.status{ text-align:center; font-size:13px; font-weight:700; } .status.ok{ color:var(--green); }
.xfer-what{ text-align:center; font-size:15px; } .xfer-what b{ font-weight:700; }
.bar{ height:14px; border-radius:8px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.bar-fill{ height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--red),var(--gold)); box-shadow:0 0 20px -2px rgba(245,179,1,.7); transition:width .12s linear; }
.bar-fill.ok{ background:var(--green); box-shadow:0 0 20px -2px rgba(47,210,122,.7); }
.pct{ font-family:var(--mono); text-align:center; color:var(--ink-2); font-size:14px; font-variant-numeric:tabular-nums; }
#result{ text-align:center; }
.sent{ font-size:15px; }
.got-label{ color:var(--mute); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.got-text{ text-align:left; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:12px; white-space:pre-wrap; word-break:break-word; font-family:var(--mono); font-size:13px; color:var(--ink-2); max-height:220px; overflow:auto; margin:0 0 12px; }
#result .btn{ margin:0 auto; }

/* chat */
.log{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:6px 2px; }
.bubble{ max-width:82%; padding:9px 13px; border-radius:16px; font-size:14.5px; line-height:1.4; word-break:break-word; animation:pop-msg .2s var(--ease); }
@keyframes pop-msg{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
.bubble.me{ align-self:flex-end; background:linear-gradient(150deg,var(--red),var(--red-deep)); color:#fff; border-bottom-right-radius:5px; box-shadow:0 6px 16px -8px rgba(255,59,92,.5); }
.bubble.them{ align-self:flex-start; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px; }
.bubble.sys{ align-self:center; background:none; color:var(--mute); font-size:12px; padding:2px; }
.bubble a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.bubble time{ display:block; font-size:10px; opacity:.6; margin-top:3px; }
.typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:10px 14px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--mute); animation:blink 1.2s ease infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,100%{ opacity:.2; transform:translateY(0);} 50%{ opacity:.9; transform:translateY(-2px);} }
.composer{ display:flex; gap:8px; align-items:center; }

#fail{ align-items:center; text-align:center; gap:16px; }
.fail-ic{ width:54px; height:54px; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--red); font-size:26px; font-weight:800; display:grid; place-items:center; }
.fail-msg{ color:var(--ink-2); max-width:38ch; }

.app-foot{ padding:13px clamp(20px,3vw,40px); border-top:1px solid var(--line); color:var(--mute); font-size:11.5px; text-align:center; }

@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .aura,.grain{ display:none; } }