:root{--navy:#0F172A;--panel:#12264A;--line:#24406d;--cyan:#00D6E6;--blue:#008BFF;--purple:#7A5CFF;--muted:#94a3c4}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--navy);color:#fff;font:16px/1.55 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:860px;margin:0 auto;padding:28px 16px 60px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:30px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.brand span{font-weight:400;color:var(--muted)}
h1{margin:0 0 6px;font-size:1.7rem;letter-spacing:-.02em}
h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:34px 0 12px}
p{margin:0 0 14px;color:var(--muted)}
.lead{margin-bottom:22px}
code{background:#0b1730;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.88em;color:#dbe7ff;word-break:break-all}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}
.narrow{max-width:420px;margin:8vh auto 0}
.grid{display:grid;gap:12px}
.account{display:flex;align-items:center;gap:14px}
.account__text{display:flex;flex-direction:column;flex:1;min-width:0}
.account__text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account__text span{color:var(--muted);font-size:.88rem}
.avatar,.badge{flex:0 0 auto;width:46px;height:46px;border-radius:14px}
.avatar{object-fit:cover}
.badge{display:grid;place-items:center;font-weight:700;font-size:.9rem;background:linear-gradient(135deg,var(--cyan),var(--blue) 50%,var(--purple))}
.empty{margin:0;padding:18px;border:1px dashed var(--line);border-radius:18px;text-align:center}
label{display:block;font-size:.85rem;color:var(--muted);margin:14px 0 6px}
input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0b1730;color:#fff;font:inherit}
input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,214,230,.15)}
button,.primary{font:inherit;cursor:pointer}
.primary{display:inline-block;border:0;border-radius:12px;padding:11px 18px;color:#fff;font-weight:600;text-decoration:none;white-space:nowrap;
  background:linear-gradient(110deg,var(--cyan),var(--blue) 50%,var(--purple));transition:transform .16s,box-shadow .2s}
.primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px var(--blue)}
form .primary{width:100%;margin-top:18px}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:9px 14px;white-space:nowrap}
.ghost:hover{color:#fff;border-color:var(--cyan)}
.flash{padding:12px 16px;border-radius:12px;border:1px solid rgba(0,214,230,.4);background:rgba(0,214,230,.1);color:#fff}
.flash.bad{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.12)}
.help{margin-top:16px}
.help summary{cursor:pointer;font-weight:600}
.help ol{margin:14px 0 0;padding-left:20px;color:var(--muted)}
.help li{margin-bottom:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
[hidden]{display:none !important}
@media (max-width:520px){.account{flex-wrap:wrap}.account .primary,.account .ghost{width:100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.primary{transition:none}}
select,input[type=file]{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:#0b1730;color:#fff;font:inherit}
.send label:first-child{margin-top:0}
.send .primary{margin-top:18px}
.send__note{margin:14px 0 0;font-size:.9rem}
.send__note.bad{color:#fca5a5}
button:disabled{opacity:.55;cursor:progress}
a.ghost{text-decoration:none;display:inline-block}