.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:16px 34px;background:linear-gradient(#060607dd,#06060700);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:30px;height:30px;display:inline-block;filter:drop-shadow(0 0 10px #f5a52466)}
.brand-word{font-weight:800;letter-spacing:1.5px;font-size:14px}
.link{color:var(--dim);font-size:13px}.link:hover{color:var(--amber)}
.nav-mid{display:flex;gap:22px;align-items:center}.nav-mid a{color:var(--dim);font-size:13px}.nav-mid a:hover{color:var(--amber)}

.dash{position:relative;z-index:5;max-width:none;margin:0;padding:100px 40px 70px;min-height:100vh}

/* ---- shared glass panel ---- */
.panel,.card{background:linear-gradient(180deg,#0b0f18d9,#080b12ee);border:1px solid #ffffff14;border-radius:16px;
  box-shadow:0 24px 60px #0009, inset 0 1px 0 #ffffff0a;backdrop-filter:blur(10px)}
.panel{padding:20px;margin-bottom:20px}
.panel-head{color:var(--dim);font-size:12px;letter-spacing:1.5px;margin-bottom:16px;text-transform:uppercase}

/* ---- login ---- */
.login-card{max-width:420px;margin:11vh auto 0;padding:26px;animation:rise .5s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card-top{display:flex;justify-content:space-between;font-weight:700;letter-spacing:1px;color:var(--teal);margin-bottom:16px}
label{display:block;font-size:11px;color:var(--dim);letter-spacing:.5px;margin-bottom:6px}
.input{width:100%;background:#05090f;border:1px solid #1a2a36;border-radius:10px;padding:13px;color:var(--text);font-size:14px;outline:none}
.input:focus{border-color:var(--amber)}
.msg{margin-top:10px;font-size:12px;color:var(--amber);min-height:16px;word-break:break-all}

/* ---- app shell ---- */
.app{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start;animation:rise .5s cubic-bezier(.22,1,.36,1)}
.side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,#0b0f18e6,#080b12f2);border:1px solid #ffffff14;border-radius:18px;padding:18px;
  box-shadow:0 24px 60px #0009;backdrop-filter:blur(10px);min-height:70vh}
.side-key{background:#05070d;border:1px solid #ffffff12;border-radius:12px;padding:12px}
.side-lbl{font-size:9px;letter-spacing:2px;color:var(--dim);display:block;margin-bottom:6px}
.side-keyval{font-size:12px;color:var(--amber);word-break:break-all;display:block;margin-bottom:8px}
.live{color:#8affc1;font-size:10px;letter-spacing:1px}
.side-nav{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.side-nav .tab{display:flex;align-items:center;gap:12px;background:transparent;border:none;color:var(--muted);
  padding:12px 14px;border-radius:10px;cursor:pointer;font-size:13px;letter-spacing:.5px;text-align:left;width:100%}
.side-nav .tab i{font-style:normal;opacity:.85;display:flex;align-items:center}
.side-nav .tab i svg{width:17px;height:17px}
.side-nav .tab:hover{background:#0e1520;color:var(--text)}
.side-nav .tab.active{background:linear-gradient(90deg,#f5a5241f,#0e1520);color:var(--amber);box-shadow:inset 2px 0 0 var(--amber)}
.side-logout{margin-top:auto;width:100%}

.main{min-width:0}
.tab-pane{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.page-head h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.5px}
.pill{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.live-dot{color:#8affc1;font-size:12px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ---- scripts grid ---- */
.scripts{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:20px}
.script-card{padding:16px;margin:0}
.sc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sc-name{font-size:16px}
.sc-badge{font-size:10px;letter-spacing:1px;padding:3px 9px;border-radius:999px}
.sc-badge.free{color:#8affc1;border:1px solid #8affc133}
.sc-badge.paid{color:var(--amber);border:1px solid #f5a52444}
.loader-box{background:#05070b;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.loader-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#0b0f14;color:var(--dim);font-size:11px}
.mini,.sc-update{background:#0e1520;border:1px solid #24d1c233;color:#7defe2;padding:5px 11px;border-radius:6px;cursor:pointer;font-size:11px}
.sc-loader{margin:0;padding:11px;font-size:11px;line-height:1.55;color:#c9c4b6;white-space:pre-wrap;word-break:break-all}
.sc-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sc-del{color:#ff8f8f !important;border-color:#ff8f8f33 !important}
.sc-msg{margin-top:8px;font-size:11px;color:var(--amber);min-height:14px;word-break:break-all}
.add-box .add-row{display:flex;gap:10px;margin-top:10px}.add-box .add-row .input{flex:1}
.hint{font-size:11.5px;line-height:1.6;color:var(--dim);margin:0 0 12px}.hint b{color:var(--muted)}.hint code{color:var(--teal)}
.sc-remote{margin-top:10px}
.sc-remote summary{cursor:pointer;font-size:11px;color:var(--dim);letter-spacing:1px}
.sc-remote summary:hover{color:var(--amber)}
.sc-remote .input{margin-top:8px;font-size:12px}
.sc-remote .mini{margin-top:8px}

/* ---- analytics ---- */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
@media(max-width:640px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-box{background:linear-gradient(180deg,#0b0f18d9,#080b12ee);border:1px solid #ffffff14;border-radius:16px;padding:22px;text-align:center}
.stat-box b{display:block;font-size:40px;font-weight:800;color:var(--amber);letter-spacing:-1px}
.stat-box span{font-size:11px;color:var(--dim);letter-spacing:.5px}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bar-label{font-size:12px;color:#cfc9bb;width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;height:10px;background:#0c1016;border-radius:99px;overflow:hidden}
.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--burnt));border-radius:99px;transition:width .5s}
.bar-count{font-size:12px;color:var(--muted);width:44px;text-align:right}
.empty{color:var(--dim);font-size:12px;text-align:center;padding:10px}
/* live event feed */
.feed-alert{float:right;color:#ff5566;background:#ff33440f;border:1px solid #ff33443d;border-radius:99px;padding:2px 9px;font-size:10px;letter-spacing:.5px}
.ev-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;border:1px solid var(--line);margin-bottom:7px;background:#080b12}
.ev-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0}
.ev-main{flex:1;font-size:12px;color:#cfc9bb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-main b{color:var(--muted);font-weight:700}
.ev-meta{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%}
.ev-time{font-size:10.5px;color:var(--dim);white-space:nowrap;flex-shrink:0}
.ev-ok .ev-icon{color:#36e28e}
.ev-deny{border-color:#f5a52433}.ev-deny .ev-main b{color:var(--amber)}
.ev-alert{border-color:#ff33445c;background:linear-gradient(90deg,#ff33441a,#080b12)}
.ev-alert .ev-main b{color:#ff5566}

/* ---- profile ---- */
.prof-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.prof-row:last-child{border-bottom:none}
.prof-row span{color:var(--dim)}
.prof-key{color:var(--amber);word-break:break-all;text-align:right;max-width:60%}
.lic-key{font-size:18px;letter-spacing:1px;text-align:center}

/* ---- responsive ---- */
@media(max-width:860px){
  .dash{padding:88px 16px 50px}
  .app{grid-template-columns:1fr;gap:16px}
  .side{position:static;min-height:0;flex-direction:column}
  .side-nav{flex-direction:row}.side-nav .tab{justify-content:center}
  .side-nav .tab.active{box-shadow:inset 0 -2px 0 var(--amber)}
  .side-logout{margin-top:8px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .scripts{grid-template-columns:1fr}
  .page-head h2{font-size:24px}
}

/* ---- glass buttons (premium, less flat) ---- */
.btn-primary{background:linear-gradient(180deg,#f7b23a,#e0490b);border:1px solid #ffffff22;color:#160c02;font-weight:700;
  box-shadow:0 8px 22px #e0490b33, inset 0 1px 0 #ffffff70, inset 0 -2px 6px #0003;transition:filter .2s,transform .08s}
.btn-primary:hover{filter:brightness(1.08)}.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:#ffffff0a;border:1px solid #ffffff1c;color:var(--text);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 #ffffff14;transition:background .2s,border-color .2s,color .2s}
.btn-ghost:hover{background:#ffffff14;border-color:#f5a52455;color:var(--amber)}

/* ---- projects bar ---- */
.projects-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.proj-pill{display:flex;flex-direction:column;gap:4px;min-width:160px;padding:14px 16px;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#0d1220cc,#0a0e18ee);border:1px solid #ffffff12;box-shadow:0 10px 30px #0007;transition:.2s}
.proj-pill:hover{border-color:#f5a52455;transform:translateY(-2px)}
.proj-pill.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 12px 34px #0008}
.proj-pill b{font-size:14px}.proj-pill span{font-size:11px;color:var(--dim)}
.newproj{display:flex;align-items:center;justify-content:center;min-width:58px;border-radius:14px;cursor:pointer;
  background:#ffffff08;border:1px dashed #ffffff26;color:var(--dim);font-size:24px;transition:.2s}
.newproj:hover{color:var(--amber);border-color:#f5a52466}

/* ---- add options row ---- */
.add-opts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:12px 0}
.opt-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer}

/* ---- script card settings button ---- */
.sc-set{margin-left:auto}

/* ---- settings modal ---- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;
  background:#04050799;backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.modal-card{width:100%;max-width:540px;max-height:88vh;overflow:auto;padding:26px;
  background:linear-gradient(180deg,#0c1119f2,#080b12fa);border:1px solid #ffffff18;border-radius:18px;
  box-shadow:0 40px 120px #000c;animation:rise .35s cubic-bezier(.22,1,.36,1)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal-head h3{margin:0;font-size:20px}
.x-close{background:none;border:none;color:var(--dim);font-size:22px;line-height:1;cursor:pointer}.x-close:hover{color:var(--amber)}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.set-row .set-lbl{font-size:13px;color:var(--text)}.set-row .set-sub{font-size:11px;color:var(--dim);margin-top:2px}
.set-block{padding:14px 0;border-bottom:1px solid var(--line)}
.set-block>label{display:block;margin-bottom:8px}
.set-block:last-child{border-bottom:none}
.set-actions{display:flex;gap:10px;margin-top:18px}
.mono-key{font-size:12px;color:var(--amber);word-break:break-all;margin-top:8px;min-height:14px}
.keycount{color:var(--dim);font-size:11px}
.keylist{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto}
.kl-empty{color:var(--dim);font-size:11px;padding:4px 2px}
.kl-row{display:flex;align-items:center;gap:8px;background:#05070d;border:1px solid #ffffff12;border-radius:9px;padding:7px 9px}
.kl-row.kl-banned{border-color:#ff33443d;background:#ff33440a}
.kl-key{flex:1;font-size:11.5px;color:var(--text);word-break:break-all;font-family:ui-monospace,monospace}
.kl-badge{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;border-radius:99px;padding:2px 8px;white-space:nowrap}
.kl-badge.b-bound{color:var(--teal);border:1px solid #2dd4bf3d;background:#2dd4bf12}
.kl-badge.b-unused{color:var(--dim);border:1px solid #ffffff1c}
.kl-badge.b-banned{color:#ff5566;border:1px solid #ff33443d;background:#ff33440f}
.kl-actions{display:flex;gap:4px}
.kl-btn{font-size:10.5px;color:var(--muted);background:#ffffff0a;border:1px solid #ffffff1c;border-radius:7px;padding:3px 8px;cursor:pointer;transition:.15s}
.kl-btn:hover{background:#ffffff14;color:var(--amber);border-color:#f5a52455}
.kl-btn:disabled{opacity:.5;cursor:default}
.kl-btn.kl-del{color:#ff8f8f}.kl-btn.kl-del:hover{color:#ff8f8f;border-color:#ff8f8f55;background:#ff33440f}

/* ---- toggle switch ---- */
.switch{position:relative;width:46px;height:26px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch i{position:absolute;inset:0;background:#1a2230;border:1px solid #ffffff1c;border-radius:99px;transition:.2s}
.switch i::before{content:"";position:absolute;width:19px;height:19px;left:3px;top:2.5px;background:#8a8f98;border-radius:50%;transition:.2s}
.switch input:checked + i{background:linear-gradient(90deg,#f5a524,#e0490b);border-color:transparent}
.switch input:checked + i::before{transform:translateX(20px);background:#fff}
.danger{color:#ff8f8f !important;border-color:#ff8f8f44 !important}

/* ---- custom file button (English, replaces browser-locale native input) ---- */
.filebtn{display:inline-block;background:#080a0e;border:1px dashed #2a2f38;color:var(--muted);padding:11px 14px;border-radius:8px;cursor:pointer;font-size:13px;letter-spacing:.3px;transition:.15s}
.filebtn:hover{border-color:var(--amber);color:var(--text)}
.filebtn .fb-tick{color:var(--amber);font-weight:700;margin-right:6px}
.filename{margin-left:10px;font-size:12px;color:var(--dim)}

/* ---- upload viz (cpu-architecture, vanilla SVG) ---- */
.upload-viz{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 14px;animation:fade .3s ease}
.upload-viz[hidden]{display:none}
.cpu-svg{width:290px;max-width:90%;height:auto;color:#3a3a3a}
.uv-label{font-size:12px;letter-spacing:1px;color:var(--amber)}
.cpu-architecture{offset-anchor:10px 0px;animation:animation-path;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.75,-0.01,0,0.99)}
.cpu-line-1{offset-path:path("M 10 20 h 79.5 q 5 0 5 5 v 30");animation-delay:.2s;animation-duration:2s}
.cpu-line-2{offset-path:path("M 180 10 h -69.7 q -5 0 -5 5 v 40");animation-delay:.5s;animation-duration:1.8s}
.cpu-line-3{offset-path:path("M 130 20 v 21.8 q 0 5 -5 5 h -25");animation-delay:.1s;animation-duration:2.2s}
.cpu-line-4{offset-path:path("M 170 80 v -21.8 q 0 -5 -5 -5 h -65");animation-delay:.8s;animation-duration:1.6s}
.cpu-line-5{offset-path:path("M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -35");animation-delay:.3s;animation-duration:2s}
.cpu-line-6{offset-path:path("M 94.8 95 v -46");animation-delay:.6s;animation-duration:1.9s}
.cpu-line-7{offset-path:path("M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 28");animation-delay:0s;animation-duration:1.7s}
.cpu-line-8{offset-path:path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35");animation-delay:.4s;animation-duration:2.1s}
@keyframes animation-path{0%{offset-distance:0%}100%{offset-distance:100%}}
@media(prefers-reduced-motion:reduce){.cpu-architecture{animation:none}}

/* checkpoint reward-site picker */
.cp-provs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.cp-prov{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:#0c141d;color:var(--muted);font-family:var(--mono);
  font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.cp-prov:hover{border-color:var(--pc);color:var(--txt)}
.cp-prov.on{border-color:var(--pc);color:#fff;background:color-mix(in srgb,var(--pc) 16%,#0c141d)}
.cp-logo{width:20px;height:20px;border-radius:6px;background:var(--pc);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex:0 0 auto}

/* JSON textareas in hosted-compute settings */
textarea.input{resize:vertical;line-height:1.45;white-space:pre;overflow:auto;font-size:12px}
