/* XANAX UPGRADER — flat dark interface. One accent colour, solid panels, thin borders, no glow. */
:root{
  --bg:#0c0c10; --panel:#15151b; --panel2:#1b1b23; --field:#101015; --line:#272731; --line2:#363642;
  --text:#ececf2; --muted:#8a8a99; --acc:#ffa51f; --acc-d:#e58e0a; --acc-t:#1a1205; --red:#ff5a4d; --green:#3ecf6e;
  --r1:#3ecf6e; --r2:#3d9bff; --r3:#ff5a4d; --r4:#a45cff; --r5:#ffc83d;
  font-family:"Montserrat","Segoe UI",system-ui,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;color:var(--text);font:14px/1.5 "Montserrat","Segoe UI",system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  background:linear-gradient(rgba(10,10,13,.8),rgba(10,10,13,.8)),url(assets/bg.webp) center/cover fixed,var(--bg)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,p{margin:0}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#33333d;border-radius:4px}::-webkit-scrollbar-track{background:transparent}
.ico{display:block;flex:none}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);font-weight:600;font-size:13px;white-space:nowrap;transition:background .12s,border-color .12s,transform .08s}
.btn:hover{background:#24242e;border-color:var(--line2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.acc{background:var(--acc);border-color:var(--acc);color:var(--acc-t);font-weight:700}
.btn.acc:hover{background:#ffb344;border-color:#ffb344}
.btn.acc:disabled:hover{background:var(--acc)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.btn.red{background:#3a1a1e;border-color:#5a262c;color:#ff9aa2}
.btn.sm{height:30px;padding:0 12px;font-size:12px}
.btn.icon{width:40px;padding:0}
.btn.big{height:48px;padding:0 28px;font-size:15px}
.btn.wide{width:100%;height:46px}
input,select{width:100%;height:40px;background:var(--field);border:1px solid var(--line);border-radius:6px;padding:0 12px;outline:0;transition:border-color .12s}
input:focus,select:focus{border-color:var(--acc)}
input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--acc);flex:none}
input[type=range]{padding:0;height:4px;border:0;border-radius:2px;background:#2d2d38;accent-color:var(--acc);cursor:pointer}
label{display:block;color:var(--muted);font-size:12px;font-weight:600}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:12px 0}.row>*{flex:1;min-width:130px}.row>.btn{flex:0 0 auto;min-width:0}.row.end{justify-content:flex-end}
.note{color:var(--muted);font-size:12.5px;margin:8px 0}.note.center{text-align:center}.err{color:var(--red)}
.gap{margin-top:12px}.grow{flex:1}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo img{display:block;object-fit:contain}
.logo .lt{display:flex;flex-direction:column;line-height:1;font-style:italic;text-transform:uppercase}
.logo .lt b{font-size:17px;font-weight:800;letter-spacing:.4px;color:#fff}
.logo .lt i{font-size:10px;font-weight:600;letter-spacing:3.2px;color:#b6b6c4;margin-top:3px;font-style:normal}
.logo .tag{margin-left:4px;padding:5px 10px;border-radius:5px;background:var(--acc);color:var(--acc-t);font-size:11px;font-weight:800;letter-spacing:1.6px}
.logo.big{gap:14px}.logo.big .lt b{font-size:30px}.logo.big .lt i{font-size:14px;letter-spacing:5.4px;margin-top:5px}.logo.big .tag{font-size:13px;padding:7px 12px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:64px;padding:0 28px;background:rgba(14,14,18,.97);border-bottom:1px solid var(--line)}
.brand{cursor:pointer}
.nav{display:flex;gap:2px;margin-left:22px}
.nav button{height:64px;padding:0 16px;color:var(--muted);font-weight:600;font-size:13.5px;border-bottom:2px solid transparent;transition:color .12s}
.nav button:hover{color:var(--text)}.nav button.on{color:#fff;border-bottom-color:var(--acc)}
.sp{flex:1}
.bal{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);font-weight:700}
.bal i{font-style:normal;font-size:10px;font-weight:800;padding:2px 6px;border-radius:4px;background:var(--acc);color:var(--acc-t)}
.profile{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 5px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);font-weight:600;transition:border-color .12s}
.profile:hover,.profile.on{border-color:var(--acc)}
.profile span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#22222b;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- layout ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:24px 28px 64px;animation:vin .25s ease-out}
@keyframes vin{from{opacity:0}}
.panel{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px}
.panel>h3{display:flex;justify-content:space-between;align-items:center;min-height:28px;margin-bottom:14px;font-size:14px;font-weight:700}
.panel>h3 span{font-size:12px;font-weight:600;color:var(--muted)}
.sub{margin:18px 0 10px;font-size:14px;font-weight:700}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.two.flat{margin-top:0;gap:12px 18px}
.welcome{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:stretch}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tiles.four{margin-top:18px}
.tile{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:88px;padding:14px 18px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
.tile span{font-size:12px;font-weight:600;color:var(--muted)}.tile b{font-size:21px;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.tile.acc{border-color:var(--acc)}.tile.acc b{color:var(--acc)}
.who{flex-direction:row;align-items:center;gap:20px}
.who h2{font-size:22px;font-weight:800;margin-bottom:2px}
.avatar.big{width:112px;height:150px;border-radius:8px;background:var(--field);border:1px solid var(--line)}
.avatar.big img{object-fit:contain;object-position:center}
.status{display:inline-block;margin-top:10px;padding:3px 12px;border-radius:12px;font-size:12px;font-weight:700;background:#25252e;color:var(--muted)}.status.on{background:#17301f;color:var(--green)}
.have{display:flex;justify-content:space-between;align-items:baseline;padding:11px 14px;margin-bottom:12px;border-radius:6px;background:var(--field);border:1px solid var(--line)}
.have span{color:var(--muted);font-size:12px;font-weight:600}.have b{font-size:17px;font-weight:800}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.quick button{height:28px;padding:0 13px;border-radius:14px;background:var(--field);border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:12px}.quick button:hover{color:var(--text);border-color:var(--acc)}
.quote{min-height:24px;margin:6px 0;color:var(--acc);font-weight:700}.quote.bad{color:var(--red)}
.problem{margin:0 0 14px;padding:12px 14px;border-radius:6px;background:#2a1519;border:1px solid #5a262c;color:#ffb3ba;font-size:13px}.problem b{display:block;margin-bottom:4px}

/* ---------- upgrader console ---------- */
.console{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px) minmax(0,1fr);gap:18px;align-items:stretch}
.side{min-height:380px}
.side.bet{border-top:3px solid var(--red)}.side.prize{border-top:3px solid var(--acc)}
.pbox{display:flex;align-items:center;justify-content:center;height:190px;border-radius:6px;background:var(--field);border:1px solid var(--line);margin-bottom:14px;padding:10px;overflow:hidden}
.pbox.r1{border-bottom:3px solid var(--r1)}.pbox.r2{border-bottom:3px solid var(--r2)}.pbox.r3{border-bottom:3px solid var(--r3)}.pbox.r4{border-bottom:3px solid var(--r4)}.pbox.r5{border-bottom:3px solid var(--r5)}
.bigim{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bigim img{max-width:100%;max-height:100%;object-fit:contain}
.bigim .ph{width:84px;height:84px}.bigim .ph svg{width:46px;height:46px}
.empty{color:var(--muted);text-align:center;padding:26px 14px;font-size:13px}
.ititle{text-align:center;font-weight:700;font-size:15px;min-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.price{margin-top:4px;text-align:center;font-size:24px;font-weight:800;color:var(--acc)}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.chip{display:flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 11px;border-radius:13px;background:var(--field);border:1px solid var(--line);font-size:12px;font-weight:600}
.chip button{width:18px;height:18px;border-radius:50%;color:var(--muted);font-size:15px;line-height:1}.chip button:hover{color:var(--red)}
.mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.wheel{position:relative;width:260px;height:260px}
.wheel svg{width:100%;height:100%;overflow:visible}
.wheel .pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wheel .pct b{font-size:38px;font-weight:800;line-height:1}.wheel .pct span{margin-top:6px;font-size:12px;font-weight:600;color:var(--muted)}
.flash-win .pct b{color:var(--green)}.flash-lose .pct b{color:var(--red)}

/* the bar under the console: slider | big button | auto pick */
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:center;margin-top:18px;padding:16px 20px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
.bal-slider label{display:flex;justify-content:space-between;margin-bottom:10px}.bal-slider label span{color:var(--text)}
.srow{display:flex;align-items:center;gap:14px}.srow input[type=range]{flex:1}.upin{width:110px;text-align:right;font-weight:700}
.go{height:54px;padding:0 44px;font-size:16px;gap:10px}
.autos label{margin-bottom:8px;text-align:right}
.achips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.ac{min-width:44px;height:32px;padding:0 10px;border-radius:5px;background:var(--field);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:12.5px;transition:.12s}
.ac:hover{color:var(--text);border-color:var(--line2)}.ac.on{background:var(--acc);border-color:var(--acc);color:var(--acc-t)}.ac.off{border-style:dashed;font-weight:600}
.sepv{width:1px;height:20px;background:var(--line2);margin:0 4px}

/* ---------- lists ---------- */
.lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px;margin-top:18px}
.list{height:600px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tabs button{height:32px;padding:0 14px;border-radius:5px;background:var(--field);border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:12.5px;transition:.12s}
.tabs button:hover{color:var(--text);border-color:var(--line2)}.tabs button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-t)}
.tabs input,.tabs select{width:auto;flex:1;min-width:120px;height:32px}
.items{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));grid-auto-rows:min-content;gap:10px;align-content:start;padding-right:4px}

/* ---------- item card: flat tile, rarity is a coloured top label and bottom edge ---------- */
.rc{--rt:#8a8a99;--tint:rgba(138,138,153,.08);position:relative;display:flex;flex-direction:column;height:178px;padding:0 8px 10px;border-radius:6px;background:linear-gradient(var(--tint),var(--tint)),var(--panel2);border:1px solid var(--line);border-bottom:3px solid var(--rt);cursor:pointer;overflow:hidden;
  animation:cin .25s ease-out both;animation-delay:calc(var(--i,0) * 14ms);transition:border-color .12s,transform .12s}
@keyframes cin{from{opacity:0;transform:translateY(6px)}}
.rc:hover{transform:translateY(-2px);border-color:var(--rt)}
.rc .rt{display:flex;justify-content:space-between;align-items:center;height:26px;font-size:10.5px;font-weight:700;color:var(--rt)}
.rc .rt .kd{color:var(--muted);font-weight:600}
.rc .rt .ch{padding:1px 7px;border-radius:9px;background:rgba(0,0,0,.45);color:#fff}
.rc .im{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.rc .im img{max-width:100%;max-height:88px;object-fit:contain}
.ph{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:rgba(255,255,255,.05);color:#5d5d6c}
.rc .n{min-height:30px;margin-top:4px;font-size:12px;font-weight:600;line-height:1.25;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc .p{margin-top:2px;text-align:center;font-size:13px;font-weight:800;color:var(--acc)}
.rc.sel{outline:2px solid var(--acc);outline-offset:-2px}
.rc.dis{opacity:.4;cursor:not-allowed}.rc.dis:hover{transform:none;border-color:var(--line)}
.rc.r1{--rt:var(--r1);--tint:rgba(62,207,110,.09)}.rc.r2{--rt:var(--r2);--tint:rgba(61,155,255,.09)}.rc.r3{--rt:var(--r3);--tint:rgba(255,90,77,.09)}.rc.r4{--rt:var(--r4);--tint:rgba(164,92,255,.1)}.rc.r5{--rt:var(--r5);--tint:rgba(255,200,61,.1)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);animation:fade .15s}
.mbox{position:relative;width:min(940px,100%);max-height:90vh;overflow:auto;padding:26px;border-radius:10px;background:var(--panel);border:1px solid var(--line2);animation:pop .18s ease-out}
.mbox.narrow{width:min(440px,100%)}
.mbox h2{margin:0 0 16px;font-size:19px;font-weight:800}
.x{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:6px;font-size:24px;color:var(--muted)}.x:hover{background:rgba(255,255,255,.07);color:var(--text)}
.mbox .items{max-height:420px}
@keyframes fade{from{opacity:0}}@keyframes pop{from{transform:translateY(8px);opacity:0}}
.result{text-align:center}.result .t{font-size:30px;font-weight:800;margin-bottom:6px}.result.win .t{color:var(--green)}.result.lose .t{color:var(--red)}
.result .prize-card{width:170px;margin:12px auto}.result p{margin:6px 0}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:min(420px,100%);padding:34px 32px;display:block}
.login-logo{display:flex;justify-content:center;margin-bottom:22px}
.login .lead{color:var(--muted);text-align:center;margin-bottom:6px}
.login label{margin:14px 0 6px}

/* ---------- tables, toasts, small things ---------- */
table{width:100%;border-collapse:collapse;font-size:12.5px}th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted);font-weight:600;font-size:11.5px}
#toasts{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{max-width:360px;padding:12px 16px;border-radius:6px;font-weight:600;font-size:13px;background:#202029;border:1px solid var(--line2);border-left:3px solid var(--acc);animation:tin .2s ease-out}
.toast.err{border-left-color:var(--red)}.toast.ok{border-left-color:var(--green)}@keyframes tin{from{transform:translateX(24px);opacity:0}}
.stat{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.stat div{background:var(--field);border:1px solid var(--line);border-radius:6px;padding:12px 14px}.stat b{display:block;font-size:20px;font-weight:800}.stat span{color:var(--muted);font-size:12px;font-weight:600}
.soon{align-items:center;text-align:center;padding:90px 20px}
.soon-mark{padding:6px 16px;border-radius:5px;background:var(--acc);color:var(--acc-t);font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:12px;margin-bottom:18px}
.soon h2{font-size:26px;font-weight:800;margin-bottom:8px}.soon p{color:var(--muted)}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.prow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:6px;background:var(--field);border:1px solid var(--line);text-align:left}.prow:hover{border-color:var(--acc)}.prow span{color:var(--muted);font-size:12px}.tagr{color:var(--red)!important}

/* ---------- admin lots ---------- */
.bulkbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;border-radius:6px;background:var(--field);border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.bulkbar input{width:120px;height:32px}.bulkbar select{width:170px;height:32px}
.lots{display:flex;flex-direction:column;gap:6px}
.lot{display:grid;grid-template-columns:20px 54px minmax(0,1fr) 120px 150px auto;gap:12px;align-items:center;padding:8px 12px;border-radius:6px;background:var(--panel2);border:1px solid var(--line)}
.lot.wait{border-left:3px solid var(--acc)}
.lot .lim{width:54px;height:40px;display:flex;align-items:center;justify-content:center}.lot .lim img{max-width:100%;max-height:100%;object-fit:contain}.lot .lim .ph{width:36px;height:36px}.lot .lim .ph svg{width:20px;height:20px}
.lot .ln{min-width:0}.lot .ln b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lot .ln span{font-size:11.5px;color:var(--muted)}
.lot input.pin,.lot select.rsel{height:34px}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:14px;color:var(--muted);font-size:12.5px}

/* ---------- responsive ---------- */
@media(max-width:1180px){.console{grid-template-columns:1fr 1fr}.mid{grid-column:1/-1;order:-1}.bar{grid-template-columns:1fr}.autos label{text-align:left}.achips{justify-content:flex-start}.lower{grid-template-columns:1fr}.welcome{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lot{grid-template-columns:20px 54px minmax(0,1fr) 100px auto}.lot select.rsel{display:none}}
@media(max-width:720px){
  .top{height:auto;padding:10px 14px;flex-wrap:wrap}.nav{order:3;width:100%;margin:0;overflow:auto}.nav button{height:40px}.profile span{display:none}
  .wrap{padding:16px 14px 48px}.console{grid-template-columns:1fr}.two{grid-template-columns:1fr}.list{height:520px}.who{flex-direction:column;text-align:center}.panel{padding:16px}.mbox{padding:20px 16px}
  .go{width:100%}.lot{grid-template-columns:20px minmax(0,1fr) 90px auto}.lot .lim{display:none}
}