/* binged.net/appeal and binged.net/waitlist: one card on the Binged dark wall, same type and controls as the site */
:root{
  color-scheme:dark;
  --wall-a:#0b0e17; --wall-b:#000;
  --card:rgba(22,22,26,.78); --field:rgba(255,255,255,.06); --field-hover:rgba(255,255,255,.09);
  --hairline:rgba(255,255,255,.09); --text:#f5f5f7; --text-2:rgba(245,245,247,.64); --text-3:rgba(245,245,247,.4);
  --blue:#0a84ff; --blue-press:#0071e3; --red:#ff453a; --green:#30d158; --amber:#ffb340;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ background:radial-gradient(1200px 700px at 50% -10%, var(--wall-a), var(--wall-b)) fixed, #000; color:var(--text);
  font:15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center; padding:28px 16px 48px; }
.top{ width:100%; max-width:520px; display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.wm{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; color:var(--text); text-decoration:none; }
.wm i{ position:relative; width:26px; height:26px; border-radius:6px; background:#0b0b0d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.wm i::before{ content:'B'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:3px; font-size:15px; font-weight:800; font-style:normal; color:#fff; }
.wm i::after{ content:''; position:absolute; left:50%; bottom:4px; width:11px; height:2px; margin-left:-5.5px; border-radius:1px; background:var(--red); }
.top a.alt{ color:var(--text-2); font-size:13px; text-decoration:none; }
.top a.alt:hover{ color:var(--text); }
.card{ width:100%; max-width:520px; background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:26px 24px 24px;
  backdrop-filter:blur(30px) saturate(1.4); -webkit-backdrop-filter:blur(30px) saturate(1.4); box-shadow:0 30px 80px rgba(0,0,0,.5); }
h1{ margin:0 0 6px; font-size:24px; line-height:1.2; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
.lead{ margin:0 0 22px; color:var(--text-2); text-wrap:pretty; }
.f{ display:block; margin:0 0 16px; }
.f > span:first-child{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
.f > span:first-child em{ font-style:normal; font-weight:400; color:var(--text-3); }
input.in, textarea.in{ width:100%; font:inherit; font-size:16px; color:var(--text); background:var(--field); border:1px solid var(--hairline); border-radius:10px; padding:11px 13px; outline:none; transition:border-color .15s, background .15s; }
input.in:hover, textarea.in:hover{ background:var(--field-hover); }
input.in:focus, textarea.in:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,132,255,.25); }
textarea.in{ min-height:130px; resize:vertical; }
input.code{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.08em; text-transform:uppercase; }
.hint{ display:flex; justify-content:space-between; gap:12px; margin-top:6px; font-size:12px; color:var(--text-3); }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--field); border:1px solid var(--hairline); border-radius:11px; }
.seg button{ font:inherit; font-weight:600; font-size:14px; color:var(--text-2); background:transparent; border:0; border-radius:8px; padding:9px 10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s, color .15s; }
.seg button svg{ width:17px; height:17px; }
.seg button.on{ background:rgba(255,255,255,.14); color:var(--text); }
.btn{ font:inherit; font-weight:600; border:0; border-radius:10px; padding:12px 18px; cursor:pointer; transition:background .15s, transform .1s, opacity .15s; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--blue); color:#fff; width:100%; }
.btn-primary:hover{ background:var(--blue-press); }
.btn-secondary{ background:var(--field-hover); color:var(--text); }
.btn[disabled]{ opacity:.5; cursor:default; }
.link{ background:none; border:0; padding:0; font:inherit; color:var(--blue); cursor:pointer; }
.err{ display:none; margin:0 0 14px; padding:10px 12px; border-radius:10px; background:rgba(255,69,58,.12); color:#ff8a82; font-size:14px; }
.err.on{ display:block; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.box{ border:1px solid var(--hairline); background:rgba(255,255,255,.035); border-radius:12px; padding:14px 16px; margin:0 0 18px; }
.box .row{ display:flex; justify-content:space-between; gap:16px; padding:4px 0; font-size:14px; }
.box .row b{ font-weight:500; color:var(--text-2); }
.box .row span{ text-align:right; }
.box p{ margin:6px 0 0; font-size:14px; color:var(--text-2); }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px; font-size:12.5px; font-weight:600; background:rgba(255,255,255,.1); }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.wait{ color:var(--amber); background:rgba(255,179,64,.13); }
.pill.good{ color:var(--green); background:rgba(48,209,88,.13); }
.pill.bad{ color:#ff8a82; background:rgba(255,69,58,.13); }
.ref{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 18px; padding:14px 16px; border-radius:12px; background:rgba(10,132,255,.1); border:1px solid rgba(10,132,255,.3); }
.ref code{ font:700 22px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.06em; }
.done-ico{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 0 14px; background:rgba(48,209,88,.14); color:var(--green); }
.done-ico svg{ width:24px; height:24px; }
.sep{ height:1px; background:var(--hairline); margin:22px 0 18px; }
.small{ font-size:13px; color:var(--text-3); }
.small a{ color:var(--text-2); }
.foot{ margin-top:22px; max-width:520px; text-align:center; font-size:12.5px; color:var(--text-3); }
.mono{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.04em; }
[hidden]{ display:none !important; }
@media (max-width:480px){ .card{ padding:22px 18px 20px; } h1{ font-size:22px; } .ref code{ font-size:19px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
/* no double-tap zoom anywhere on the page (pinch still works); touch-action applies to everything inside html */
html{ touch-action:manipulation; }