:root{color-scheme:dark;--acc:#7c5cff;--acc2:#38bdf8;--fg:#e8ecff;--mut:#9aa6d6;--line:rgba(255,255,255,.13);--card:rgba(255,255,255,.07);--good:#34d399;--bad:#fb7185;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--fg);font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1100px 600px at 8% -10%,#2b1a73 0,transparent 60%),radial-gradient(900px 500px at 100% 0,#0b3b5c 0,transparent 55%),#090c22;background-attachment:fixed}
#app{max-width:1150px;margin:0 auto;padding:12px}h1{font-size:20px;margin:4px 0}h2{font-size:17px;margin:16px 0 6px}h3{font-size:14px;margin:12px 0 4px}
.sub{color:var(--mut);font-size:12px;display:block}.row .sub,.row.sub{display:inline}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 4px 4px}.brand{display:flex;gap:10px;align-items:center}
.bp{font-size:20px;background:linear-gradient(90deg,#fff,#a99bff,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.3px}
.logo{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:800;overflow:hidden;box-shadow:0 0 18px rgba(124,92,255,.5)}.logo img{width:100%;height:100%;object-fit:cover}
.clk{font-size:13px;color:var(--mut)}.clk b{color:var(--fg)}.tm{font-variant-numeric:tabular-nums;color:var(--fg)}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 1.2s infinite}
.nav,.chips{display:flex;gap:6px;overflow-x:auto;padding:6px 0;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(9,12,34,.8);backdrop-filter:blur(8px)}.chips{position:static;flex-wrap:wrap;background:none;backdrop-filter:none}
button,select,input{font:inherit;color:var(--fg)}button,.btn{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .2s,border-color .2s}
button:hover,.btn:hover{border-color:var(--acc);box-shadow:0 0 14px rgba(124,92,255,.45);transform:translateY(-1px)}
button.on,button.p,.btn.p{background:linear-gradient(135deg,var(--acc),#4f8cff);border-color:transparent;color:#fff;border-radius:12px}button.big{width:100%;padding:10px;font-size:15px}button:disabled{opacity:.6}
select,input{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:10px;padding:7px 9px;max-width:100%}input:focus,select:focus{outline:2px solid var(--acc)}select option{color:#111}input[type=date]{color-scheme:dark}
.lnk{background:none;border:0;padding:4px 0;color:var(--acc2);text-decoration:underline;border-radius:0;box-shadow:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:left;white-space:normal}.card b{display:block;font-size:20px}.card span{color:var(--mut);font-size:12px}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;margin:8px 0}.wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}th{background:rgba(20,24,60,.95);position:sticky;top:0}th.l,td.l{text-align:left}
tr.t td{font-weight:700;background:rgba(255,255,255,.07)}tr.sub2 td{color:var(--mut)}tr:hover td{background:rgba(124,92,255,.12)}.good{color:var(--good);font-weight:600}.bad{color:var(--bad);font-weight:600}
.warn{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);border-radius:10px;padding:8px;margin:8px 0}.ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);border-radius:10px;padding:8px;margin:8px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0}svg{width:100%;height:auto;display:block}svg text{font:11px sans-serif;fill:#cbd5e1}input[type=range]{width:200px;padding:0}.ph{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:8px}.t2{grid-column:span 2}@media(max-width:420px){.t2{grid-column:1/-1}}
.tile{position:relative;padding:12px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));backdrop-filter:blur(8px);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;animation:rise .55s backwards}
.tile:hover{border-color:var(--acc);box-shadow:0 0 26px rgba(124,92,255,.4)}.tile b{display:block;font-size:24px;margin:2px 0}.tile.zm{transform:scale(var(--z,2));z-index:30;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.tile.dragging{opacity:.5;outline:2px dashed var(--acc)}.hd{float:right;cursor:grab;touch-action:none;padding:2px 6px;color:var(--mut);font-size:16px;user-select:none}body.drag{cursor:grabbing;user-select:none}body.drag .tile.zm{transform:none}
.lvl{font-size:13px}.bar{height:10px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--good));background-size:200% 100%;animation:shine 2s linear infinite;border-radius:6px}
.bdg{display:flex;gap:6px;flex-wrap:wrap;font-size:20px}.bdg span{filter:grayscale(1);opacity:.35}.bdg span.got{filter:none;opacity:1;animation:pop .6s}
.toast{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--acc),#4f8cff);color:#fff;padding:10px 16px;border-radius:14px;z-index:200;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:rise .3s}
#gate{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;overflow:auto;padding:16px;background:radial-gradient(900px 500px at 20% 10%,#2b1a73,transparent 60%),radial-gradient(800px 500px at 90% 90%,#0b3b5c,transparent 55%),#080b1f}
.gc{position:relative;z-index:2;width:min(380px,100%);display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.07);backdrop-filter:blur(14px);text-align:center;animation:rise .6s}.gc .logo.big{width:64px;height:64px;font-size:30px;margin:0 auto;animation:float 3s ease-in-out infinite}.gc .tabs{justify-content:center}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:float 7s ease-in-out infinite}.o1{width:260px;height:260px;background:#7c5cff;top:8%;left:10%}.o2{width:220px;height:220px;background:#38bdf8;bottom:8%;right:12%;animation-delay:-3s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}@keyframes pulse{50%{opacity:.3}}@keyframes float{50%{transform:translateY(-12px)}}@keyframes shine{to{background-position:200% 0}}@keyframes pop{40%{transform:scale(1.6) rotate(10deg)}}
@media print{.nav,.chips,button,.noprint,select,input,.top{display:none!important}.ph{display:block;color:#000}body{background:#fff;color:#000}td,th{color:#000}}
/* bigpicture.lol additions (Google sign-in button, upload errors) */
.gsi{display:flex;justify-content:center;min-height:44px;margin:4px 0}.gc .lnk{align-self:center}
.warn ul{margin:6px 0 6px 18px;padding:0}a{color:var(--acc2)}a.btn{display:inline-block;text-decoration:none;color:var(--fg)}