@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,700;1,9..144,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg-deep:#06090d;--bg:#0a0f16;--bg-el:#0f151e;
  --sf:#141c28;--sf2:#1a2435;--sf3:#202d42;
  --bd:#1e2a3a;--bd2:#2a3a50;
  --r:#ef4444;--rd:rgba(239,68,68,.12);--rg:rgba(239,68,68,.25);--rb:#ff6b6b;
  --g:#22c55e;--gd:rgba(34,197,94,.12);
  --am:#f59e0b;--amd:rgba(245,158,11,.12);
  --bl:#3b82f6;
  --t:#e8ecf1;--t2:#a0aec0;--t3:#5a6a7e;
  --f:'Outfit',system-ui,sans-serif;
  --fd:'Fraunces',Georgia,serif;
  --fm:'IBM Plex Mono',monospace;
  --rad:10px;--radl:16px;--radf:100px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--t);line-height:1.65;min-height:100vh;-webkit-font-smoothing:antialiased}

/* Atmosphere */
.atm{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 100% 60% at 20% -10%,rgba(239,68,68,.05) 0%,transparent 60%),
  radial-gradient(ellipse 80% 50% at 90% 110%,rgba(59,130,246,.03) 0%,transparent 50%)}
.atm::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.01) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 20%,transparent 70%)}

.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 20px}
.wrap-w{max-width:1060px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:var(--rad);font-family:var(--f);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .25s var(--ease);text-decoration:none;white-space:nowrap}
.btn-p{background:var(--r);color:#fff;box-shadow:0 2px 12px var(--rg),inset 0 1px 0 rgba(255,255,255,.1)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--rg)}
.btn-s{background:var(--sf2);color:var(--t);border:1px solid var(--bd)}
.btn-s:hover{background:var(--sf3);border-color:var(--bd2)}
.btn-g{background:0;color:var(--t2);padding:8px 14px}
.btn-g:hover{color:var(--t)}
.btn-d{background:0;color:var(--r);border:1px solid var(--rd)}
.btn-d:hover{background:var(--rd)}
.btn-sm{padding:7px 14px;font-size:13px}

/* Form */
input[type="text"],input[type="password"],textarea,select{width:100%;padding:11px 16px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--rad);color:var(--t);font-family:var(--f);font-size:14px;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--r);box-shadow:0 0 0 3px var(--rd)}
textarea{resize:vertical;min-height:90px}
select{appearance:none;cursor:pointer;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235a6a7e' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.fg{margin-bottom:18px}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:7px}

/* Toggle */
.tw{display:flex;align-items:center;gap:12px}
.tg{width:44px;height:24px;background:var(--bd);border-radius:12px;position:relative;cursor:pointer;transition:background .25s var(--ease);flex-shrink:0}
.tg::after{content:'';width:18px;height:18px;background:var(--t2);border-radius:50%;position:absolute;top:3px;left:3px;transition:all .25s var(--ease)}
.tg.on{background:var(--g)}.tg.on::after{transform:translateX(20px);background:#fff}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radf);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.badge-g{background:var(--gd);color:var(--g)}
.badge-off{background:rgba(90,106,126,.15);color:var(--t3)}
.badge-r{background:var(--rd);color:var(--rb)}

/* Card */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--radl);padding:24px;transition:border-color .25s var(--ease)}

/* Modal */
.mo{display:none;position:fixed;inset:0;background:rgba(6,9,13,.75);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;padding:24px}
.mo.active{display:flex}
.modal{background:var(--bg-el);border:1px solid var(--bd);border-radius:var(--radl);padding:32px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;animation:mIn .3s var(--ease)}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.modal h3{font-family:var(--fd);font-size:22px;margin-bottom:24px}
.modal-ft{display:flex;gap:10px;justify-content:flex-end;margin-top:28px;padding-top:20px;border-top:1px solid var(--bd)}

/* Loading */
.spin{width:28px;height:28px;border:3px solid var(--bd);border-top-color:var(--r);border-radius:50%;animation:sp .75s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ld{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px;color:var(--t2);font-size:14px}

/* Reveal */
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rv{animation:fu .5s var(--ease) both}
.rv1{animation-delay:.05s}.rv2{animation-delay:.1s}.rv3{animation-delay:.15s}.rv4{animation-delay:.2s}.rv5{animation-delay:.25s}

/* No data */
.nd{text-align:center;padding:48px;color:var(--t3);font-size:14px}

@media(max-width:640px){.wrap{padding:0 16px}.card{padding:18px}.modal{padding:24px 20px}}