/* ===== PRO THEME (accounts build): dark slate + steel + amber. Loaded after style.css ===== */
:root{--p0:#0b0f14;--p1:#121921;--p2:#1a232d;--steel:#2a3440;--line:rgba(170,188,206,.16);--line2:rgba(170,188,206,.28);--tx:#e8edf2;--mu:#8e9cab;--acc:#f2a33a;--acc2:#ffc061;--accd:#c9771b;--ok:#4fd18b;--bad:#ff6363;
 --hfont:"Barlow Condensed","Arial Narrow","Roboto Condensed",-apple-system,sans-serif;--bfont:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
html,body{background:var(--p0);font-family:var(--bfont)}
/* animated sky backdrop shared by login + menus */
#skybg{position:fixed;inset:0;z-index:9;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#0a0e13 0%,#121b25 34%,#22303d 60%,#3a4552 80%,#5a5148 100%);display:none}
body.inmenu #skybg{display:block}
#skybg .glow{position:absolute;left:-10%;right:-10%;bottom:-18%;height:60%;background:radial-gradient(ellipse at 60% 100%,rgba(255,170,70,.42),rgba(242,163,58,.12) 40%,transparent 70%)}
#skybg .sun{position:absolute;right:16%;bottom:24%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,206,130,.55),rgba(255,170,70,.12) 45%,transparent 70%);filter:blur(2px)}
#skybg .cl{position:absolute;left:0;width:300%;background-repeat:repeat-x;will-change:transform}
#skybg .c1{bottom:6%;height:42%;opacity:.55;background-image:radial-gradient(ellipse 220px 70px at 200px 75%,rgba(120,134,150,.55),transparent 70%),radial-gradient(ellipse 320px 90px at 520px 80%,rgba(95,108,122,.6),transparent 70%),radial-gradient(ellipse 260px 60px at 860px 70%,rgba(130,140,150,.45),transparent 70%);background-size:1000px 100%;animation:clmove 90s linear infinite}
#skybg .c2{bottom:-4%;height:34%;opacity:.8;background-image:radial-gradient(ellipse 380px 110px at 260px 85%,rgba(46,55,66,.95),transparent 70%),radial-gradient(ellipse 300px 90px at 700px 90%,rgba(38,46,56,.95),transparent 70%),radial-gradient(ellipse 240px 80px at 1050px 80%,rgba(52,60,70,.9),transparent 70%);background-size:1300px 100%;animation:clmove 55s linear infinite}
#skybg .c3{top:12%;height:22%;opacity:.25;background-image:radial-gradient(ellipse 400px 26px at 300px 50%,rgba(200,210,220,.5),transparent 70%),radial-gradient(ellipse 300px 18px at 900px 40%,rgba(200,210,220,.45),transparent 70%);background-size:1400px 100%;animation:clmove 160s linear infinite}
@keyframes clmove{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
#skybg .jet{position:absolute;left:0;top:0;width:120px;height:40px;opacity:0;will-change:transform,opacity}
#skybg .jet svg{width:100%;height:100%;fill:#05080b;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
#skybg .jet::before{content:"";position:absolute;right:92%;top:52%;width:520px;height:2px;background:linear-gradient(270deg,rgba(220,228,236,.55),rgba(220,228,236,0));border-radius:2px}
#skybg .j1{animation:fly1 16s linear infinite 1s}
#skybg .j2{animation:fly2 21s linear infinite 6s;width:80px;height:27px}
#skybg .j3{animation:fly3 26s linear infinite 12s;width:56px;height:19px}
@keyframes fly1{0%{transform:translate(-30vw,62vh) rotate(-8deg);opacity:0}6%{opacity:.95}88%{opacity:.95}100%{transform:translate(120vw,22vh) rotate(-8deg);opacity:0}}
@keyframes fly2{0%{transform:translate(-20vw,30vh) rotate(-3deg);opacity:0}8%{opacity:.8}90%{opacity:.8}100%{transform:translate(115vw,16vh) rotate(-3deg);opacity:0}}
@keyframes fly3{0%{transform:translate(-15vw,44vh) rotate(-5deg);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translate(110vw,30vh) rotate(-5deg);opacity:0}}
#skybg .hudl{position:absolute;inset:18px;border:1px solid transparent;background:
 linear-gradient(var(--line2),var(--line2)) left top/22px 1px no-repeat,linear-gradient(var(--line2),var(--line2)) left top/1px 22px no-repeat,
 linear-gradient(var(--line2),var(--line2)) right top/22px 1px no-repeat,linear-gradient(var(--line2),var(--line2)) right top/1px 22px no-repeat,
 linear-gradient(var(--line2),var(--line2)) left bottom/22px 1px no-repeat,linear-gradient(var(--line2),var(--line2)) left bottom/1px 22px no-repeat,
 linear-gradient(var(--line2),var(--line2)) right bottom/22px 1px no-repeat,linear-gradient(var(--line2),var(--line2)) right bottom/1px 22px no-repeat}
#skybg .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55))}
@media (prefers-reduced-motion:reduce){#skybg .cl,#skybg .jet{animation:none}}

/* menu screens: slate glass instead of neon purple */
.screen{background:linear-gradient(180deg,rgba(8,11,15,.55),rgba(8,11,15,.82))}
body.inmenu .screen{background:transparent}
.screen .card{background:linear-gradient(180deg,rgba(22,30,39,.9),rgba(14,19,25,.92));border:1px solid var(--line);border-radius:14px;padding:22px 20px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-height:calc(100dvh - 24px - var(--sat) - var(--sab));overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.kicker{font-family:var(--hfont);font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--acc);border:0;border-left:3px solid var(--acc);border-radius:0;padding:2px 0 2px 8px;background:none}
.kicker.green{color:var(--ok);border-color:var(--ok)}.kicker.red{color:var(--bad);border-color:var(--bad)}
h1,h2{font-family:var(--hfont);font-style:normal;text-transform:uppercase;letter-spacing:.02em}
h1{font-size:54px;font-weight:800;line-height:.9;margin:12px 0 6px}
h1 em{font-style:normal;color:var(--acc);background:none;-webkit-text-fill-color:currentColor}
h2{font-weight:800;font-size:32px}
.sub{color:var(--mu);opacity:1;font-size:15px}
.diff{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;flex-wrap:wrap}
.diff button{font-family:var(--hfont);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;border-radius:7px;opacity:.65;min-width:28%}
.diff button.on{background:var(--acc);color:#1a1205;box-shadow:none;opacity:1}
.big{font-family:var(--hfont);font-weight:800;font-size:20px;letter-spacing:.1em;text-transform:uppercase;border-radius:10px;padding:15px;background:linear-gradient(180deg,var(--acc2),var(--acc) 55%,var(--accd));color:#1a1205;box-shadow:0 6px 18px rgba(242,163,58,.25),inset 0 1px 0 rgba(255,255,255,.35);border:0}
.big:active{transform:translateY(1px);filter:brightness(.95)}
.big.raid,.big.hangar,.big.steel{background:linear-gradient(180deg,#3a4552,#2a333e);color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.3);border:1px solid var(--line2)}
.big.devonly{background:linear-gradient(180deg,#4a3b20,#33280f);color:var(--acc2);border:1px solid rgba(242,163,58,.45)}
.ghost{color:var(--mu);opacity:1;font-family:var(--hfont);letter-spacing:.08em;text-transform:uppercase}
.best{color:var(--mu);opacity:1}
.how{color:var(--mu);opacity:1}
.tin{border-radius:8px;border:1px solid var(--line2);background:rgba(0,0,0,.3);font-family:var(--bfont)}
.tin:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(242,163,58,.18)}
.fl{color:var(--mu);opacity:1;font-family:var(--hfont);font-weight:600;letter-spacing:.14em}
.pill{border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-family:var(--hfont);letter-spacing:.06em;text-transform:uppercase;font-size:15px}
.pill.gold{background:rgba(242,163,58,.18);border-color:rgba(242,163,58,.5);color:var(--acc2)}
.codebox b{color:var(--acc)}
.you b{color:var(--acc2)}
.names span{border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.names span.me{background:rgba(242,163,58,.25);border-color:rgba(242,163,58,.5)}
.toast{background:rgba(14,19,25,.95);border:1px solid rgba(242,163,58,.55);border-radius:10px}
.sheet{background:rgba(14,19,25,.97);border-top:1px solid var(--line2);border-radius:14px 14px 0 0}
.board div.me{color:var(--acc2)}
.build{color:var(--mu)}
/* account chip on the main menu */
.acctbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25);text-align:left}
.acctbar .who{min-width:0;flex:1;font-size:13px;color:var(--mu);line-height:1.25}
.acctbar .who b{display:block;color:var(--tx);font-size:16px;font-family:var(--hfont);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctbar button{flex:none;font-family:var(--hfont);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid var(--line2)}
.acctbar button.cta{background:var(--acc);color:#1a1205;border-color:transparent}
.acctbar .dvtag{color:var(--acc);font-size:11px;letter-spacing:.12em;margin-left:6px}
.guestnote{font-size:12px;color:var(--acc2);margin-top:2px}

/* ===== LOGIN SCREEN ===== */
#login{z-index:15;display:block;padding:0;background:transparent;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch}
#login .lwrap{min-height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,400px);gap:48px;align-items:center;max-width:1120px;margin:0 auto;padding:calc(var(--sat) + 36px) calc(var(--sar) + 40px) calc(var(--sab) + 36px) calc(var(--sal) + 40px)}
#login .brand{align-self:center}
.logo{display:flex;align-items:center;gap:14px}
.logo svg{width:64px;height:64px;flex:none}
.logo .lt{font-family:var(--hfont);text-transform:uppercase;line-height:.86}
.logo .lt b{display:block;font-size:64px;font-weight:800;letter-spacing:.02em;color:var(--tx)}
.logo .lt span{display:block;font-size:26px;font-weight:700;letter-spacing:.38em;color:var(--acc);margin-top:4px}
.tagline{margin:18px 0 22px;color:#b9c4cf;font-size:17px;max-width:460px;line-height:1.45}
.online{display:inline-flex;align-items:center;gap:8px;font-family:var(--hfont);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx);padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.3)}
.online i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(79,209,139,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,209,139,.6)}70%{box-shadow:0 0 0 9px rgba(79,209,139,0)}100%{box-shadow:0 0 0 0 rgba(79,209,139,0)}}
.news{margin-top:22px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(20,27,35,.82),rgba(12,17,22,.86));padding:14px 16px;max-width:520px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.news h3{margin:0 0 8px;font-family:var(--hfont);font-size:15px;letter-spacing:.2em;color:var(--acc);font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}
.news h3 span{color:var(--mu);letter-spacing:.08em;font-weight:600}
.news ul{margin:0;padding:0;list-style:none}
.news li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px;color:#c6d0da;line-height:1.35}
.news li:first-child{border-top:0}
.news li b{color:var(--tx);font-weight:600}
.news .tg{flex:none;font-family:var(--hfont);font-size:11px;font-weight:700;letter-spacing:.12em;padding:2px 6px;border-radius:4px;height:18px;line-height:14px;background:rgba(242,163,58,.16);color:var(--acc2);border:1px solid rgba(242,163,58,.35)}
.news .tg.fix{background:rgba(79,209,139,.12);color:var(--ok);border-color:rgba(79,209,139,.35)}
.lpanel{position:relative;background:linear-gradient(180deg,rgba(24,32,42,.94),rgba(14,19,25,.96));border:1px solid var(--line2);border-radius:14px;padding:22px 22px 18px;box-shadow:0 30px 80px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}
.lpanel::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--acc),rgba(242,163,58,0))}
.lpanel .ph{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.lpanel .ph b{font-family:var(--hfont);font-size:26px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.lpanel .ph span{font-size:12px;color:var(--mu);letter-spacing:.1em;font-family:var(--hfont);text-transform:uppercase}
.ltabs{display:flex;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:9px;padding:3px;margin-bottom:6px}
.ltabs button{flex:1;padding:10px 0;font-family:var(--hfont);font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:6px;background:none;color:var(--mu)}
.ltabs button.on{background:var(--steel);color:var(--tx);box-shadow:inset 0 -2px 0 var(--acc)}
.lform .tin{margin:4px 0 4px;font-size:16px;padding:12px 13px}
.lform .fl{margin-top:12px}
.pwrow{position:relative}.pwrow .tin{padding-right:58px}
.pwrow .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:34px;padding:0 9px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--mu);font-size:12px;font-family:var(--hfont);letter-spacing:.1em;text-transform:uppercase}
.lrow{display:flex;align-items:center;justify-content:space-between;margin:12px 0 4px;font-size:14px;color:var(--mu)}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--acc);margin:0}
.linkb{background:none;color:var(--acc2);font-size:14px;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.lform .big{margin-top:14px}
.lform .err{min-height:18px;margin-top:8px;font-size:13px;text-align:left}
.lform .ok{color:var(--ok)}
.hint{font-size:12px;color:var(--mu);margin-top:6px;line-height:1.4;text-align:left}
.meter{height:4px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden}.meter i{display:block;height:100%;width:0;transition:width .2s,background .2s}
.ldiv{display:flex;align-items:center;gap:10px;margin:14px 0 4px;color:var(--mu);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--hfont)}
.ldiv::before,.ldiv::after{content:"";flex:1;height:1px;background:var(--line)}
.priv{margin-top:12px;font-size:12px;color:var(--mu);text-align:center;line-height:1.4}
#login .build{position:fixed;right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 10px);font-size:11px;opacity:.6}
body.inlogin .screen:not(#login){display:none!important}body.inlogin #devscr{display:none!important}
@media (max-width:860px){
 #login .lwrap{grid-template-columns:1fr;gap:16px;padding:calc(var(--sat) + 22px) calc(var(--sar) + 16px) calc(var(--sab) + 26px) calc(var(--sal) + 16px);align-items:start}
 .logo{justify-content:center}.logo svg{width:46px;height:46px}.logo .lt b{font-size:44px}.logo .lt span{font-size:19px}
 #login .brand{text-align:center}
 .tagline{margin:10px auto 12px;font-size:15px}
 .news{margin:0 auto}
 #login .brand .news{display:none}
 #login .newsm{display:block!important}
 #login .build{position:static;text-align:center;padding:0 0 calc(var(--sab) + 14px)}
}
#login .newsm{display:none}
/* modal (recovery code, dev mail popup, account) */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,6,9,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal .mbox{width:100%;max-width:400px;background:linear-gradient(180deg,#18212b,#10161d);border:1px solid var(--line2);border-radius:14px;padding:22px 20px 18px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:92dvh;overflow-y:auto;touch-action:pan-y}
.modal h3{font-family:var(--hfont);font-size:26px;margin:4px 0 8px;letter-spacing:.04em;text-transform:uppercase}
.modal p{color:#c3cdd7;font-size:15px;line-height:1.45;margin:6px 0}
.rcode{margin:14px 0;padding:14px 10px;border:1px dashed rgba(242,163,58,.6);border-radius:10px;background:rgba(242,163,58,.08);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:21px;font-weight:700;letter-spacing:.04em;color:var(--acc2);-webkit-user-select:all;user-select:all;word-spacing:.2em}
.giftbox{font-size:64px;line-height:1;margin:6px 0 4px;animation:giftpop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes giftpop{from{transform:scale(.2) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.giftwhat{font-family:var(--hfont);font-size:22px;font-weight:800;letter-spacing:.06em;color:var(--acc2);text-transform:uppercase;margin:8px 0}
.giftfrom{font-size:16px;color:var(--tx);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}
body.loggedin .guestonly{display:none!important}body:not(.loggedin) .acctonly{display:none!important}

.dvacct{font-size:11px;font-weight:700;color:#9fd3ff;background:rgba(80,160,255,.12);border:1px solid rgba(80,160,255,.35);border-radius:5px;padding:1px 5px;margin-left:4px}
.trneed{border:1px solid rgba(242,163,58,.45);background:rgba(242,163,58,.08);border-radius:10px;padding:12px;text-align:left}
.trneed b{display:block;font-family:var(--hfont);font-size:18px;letter-spacing:.04em;margin-bottom:4px;color:var(--acc2)}
.trneed .dvrow{margin-top:10px}
.big.rmgo{background:linear-gradient(180deg,#ff6b6b,#c62828);color:#fff;box-shadow:0 6px 18px rgba(200,40,40,.35)}
.big.rmgo:disabled{background:#3a2a2a;color:#9a8080;box-shadow:none;opacity:1;filter:none}
.big.trade{background:linear-gradient(180deg,#3a4552,#2a333e);color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.3);border:1px solid var(--line2)}

@media (min-width:900px) and (min-height:700px){.screen .card{zoom:1.12;max-height:calc((100dvh - 32px) / 1.12);max-width:420px}}
@media (min-width:1600px) and (min-height:950px){.screen .card{zoom:1.3;max-height:calc((100dvh - 32px) / 1.3)}}
.fl b{text-transform:none;letter-spacing:.02em}
#login .lbuild{display:none}
.gpcard{background:linear-gradient(180deg,#1b2530,#10161d);border:1px solid rgba(242,163,58,.6);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(242,163,58,.15)}
.gph{font-family:var(--hfont);font-weight:800;font-size:26px;letter-spacing:.08em;color:var(--acc2)}
.gpmsg{font-family:var(--bfont)}

/* the DEV tag only shows once the server has confirmed dev for this browser */
body:not(.dev) .acctbar .dvtag{display:none}

/* ---- badges ---- */
span.bdgs,.names span.bdgs{display:inline-flex;gap:3px;margin-left:5px;vertical-align:-3px;white-space:nowrap;background:none;border:0;padding:0;border-radius:0;font-size:inherit;box-shadow:none}
span.bdg,.names span.bdg{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;padding:0;border:0;border-radius:5px;cursor:help;box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.18);outline:none;flex:0 0 auto}
.bdg svg{width:12px;height:12px;display:block}
.bdg:focus-visible{box-shadow:0 0 0 2px #fff}
span.bdg.b-owner,.names span.bdg.b-owner{background:linear-gradient(180deg,#ffd76a,#e8a91c);color:#3a2600}
span.bdg.b-dev,.names span.bdg.b-dev{background:linear-gradient(180deg,#5fb2ff,#2b78e4);color:#fff}
span.bdg.b-tester,.names span.bdg.b-tester{background:linear-gradient(180deg,#b79cff,#7c5ce6);color:#fff}
span.bdg.b-bughunter,.names span.bdg.b-bughunter{background:linear-gradient(180deg,#5fe0a1,#1fa86a);color:#06331f}
.bdgtip{position:fixed;z-index:200000;left:0;top:0;padding:6px 9px;border-radius:8px;background:#0e1520;color:#eef3f8;font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 18px rgba(0,0,0,.45);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;white-space:nowrap}
.bdgtip.on{opacity:1;transform:none}
.ftr-name{font-weight:800;font-size:15px;letter-spacing:.3px;margin-bottom:2px;display:flex;align-items:center;flex-wrap:wrap}
.acctbar .who b .bdgs{margin-left:6px}
/* ---- early build (testers) ---- */
a.big.early{display:block;text-align:center;text-decoration:none;box-sizing:border-box;background:linear-gradient(180deg,#8f73ff,#6446e0);color:#fff}
a.big.early.hidden{display:none}
.okc{color:#4fd18b}.noc{color:#ff9d6b}
.dvsel{max-width:160px}
.dvb.on{box-shadow:inset 0 0 0 2px #ffc061}

.lvrow{align-items:center}.lvrow input[type=range]{flex:1;min-width:120px;accent-color:#ffc061}.lvv{min-width:28px;text-align:center;font-size:18px;color:#ffc061}
.dvtaken{color:#ffc061;font-weight:600}