:root{
  --shell:#0E1A20; --vinyl:#16242C; --ink:#0A1216;
  --sleeve:rgba(255,255,255,.055); --sleeveEdge:rgba(255,255,255,.13);
  --paper:#E4E8E7; --muted:#8FA3AD; --gold:#E8B84B;
  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --util:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --bc:#4F86B8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--shell);color:var(--paper);font-family:var(--disp);
  min-height:100vh;padding-bottom:162px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 22px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky;top:0;z-index:30}
.brand{font-weight:900;font-size:18px;letter-spacing:-.02em}
.brand em{font-style:normal;color:var(--gold)}
.topR{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.modes{display:flex;gap:2px;background:rgba(255,255,255,.05);border-radius:7px;padding:3px}
.modes button{font-family:var(--util);font-size:15px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 15px;border-radius:5px;color:var(--muted)}
.modes button.on{background:var(--gold);color:#1A1206}

.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:10px;padding:20px 22px 6px}
.packBtn{text-align:left;padding:14px 15px;border-radius:10px;background:var(--vinyl);
  border:1px solid rgba(255,255,255,.08);transition:transform .15s,border-color .15s}
.packBtn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}
.packBtn.on{border-color:var(--gold);background:#1E2C24}
.packBtn.vault{background:linear-gradient(160deg,#3A1622,var(--vinyl))}
.packBtn.vault.on{border-color:#E0607E;background:linear-gradient(160deg,#4A1A2A,#1E2C24)}
.packBtn h3{margin:0;font-size:20px;font-weight:900;letter-spacing:-.02em}
.packBtn .seven{font-family:var(--util);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:2px;display:block}
.recipe{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.chipR{font-family:var(--util);font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:2px 7px;
  border-radius:20px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.06)}
.chipR i{width:8px;height:8px;border-radius:2px;display:block;flex:0 0 auto}
.lowFlag{font-family:var(--util);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:#E0995C;margin-top:8px;display:block}

.filters{display:flex;gap:6px;flex-wrap:wrap;padding:10px 22px 0;justify-content:center}
.fchip{font-family:var(--util);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 13px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--muted);border:1px solid transparent}
.fchip:hover{background:rgba(255,255,255,.13)}
.fchip.on{background:var(--bc);color:#0B1116;border-color:var(--bc)}

.binderWrap{padding:14px 22px 0;display:flex;justify-content:center}
.binder{width:100%;max-width:660px;border-radius:12px;padding:20px 20px 20px 44px;position:relative;
  background:linear-gradient(160deg,color-mix(in srgb,var(--bc) 22%,var(--vinyl)),var(--vinyl));
  border:1px solid color-mix(in srgb,var(--bc) 34%,transparent);
  box-shadow:0 20px 50px rgba(0,0,0,.5);transition:background .3s,border-color .3s}
.spine{position:absolute;left:0;top:0;bottom:0;width:26px;border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,var(--bc),color-mix(in srgb,var(--bc) 62%,#000));transition:background .3s}
.rings{position:absolute;left:8px;top:0;bottom:0;width:11px;display:flex;flex-direction:column;
  justify-content:space-evenly;padding:34px 0;z-index:2}
.ring{width:11px;height:11px;border-radius:50%;background:rgba(0,0,0,.5);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.16)}
.binderHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.bName{font-family:var(--util);font-weight:700;font-size:19px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px}
.bName i{width:14px;height:14px;border-radius:3px;background:var(--bc);display:block;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.pager{display:flex;align-items:center;gap:8px;font-family:var(--util);font-size:14.5px;
  letter-spacing:.06em;color:var(--muted)}
.pager button{width:29px;height:29px;border-radius:6px;background:rgba(255,255,255,.09);font-size:15px}
.pager button:disabled{opacity:.28;cursor:default}
.pager button:not(:disabled):hover{background:var(--gold);color:#1A1206}

.page{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;animation:fade .24s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pocket{aspect-ratio:5/7;border-radius:7px;background:var(--sleeve);border:1px solid var(--sleeveEdge);
  padding:5px;position:relative;overflow:hidden;transition:transform .16s,box-shadow .16s}
.pocket.filled:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.45)}
.pocket.empty{background:rgba(255,255,255,.02);border-style:dashed;border-color:rgba(255,255,255,.07)}
.pocket.sel{box-shadow:0 0 0 3px #E0607E}
.pocket::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:7px;
  background:linear-gradient(118deg,rgba(255,255,255,.11) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.05) 100%)}
.pocketBtn{display:block;width:100%;height:100%;padding:0;border-radius:4px}
.vprice{position:absolute;left:5px;right:5px;bottom:5px;z-index:3;background:rgba(10,18,22,.9);
  border-radius:0 0 4px 4px;padding:4px 6px;font-family:var(--util);text-align:center;line-height:1.15}
.vprice b{display:block;font-size:15px;color:var(--paper)}
.vprice span{font-size:11.5px;color:var(--muted);letter-spacing:.04em}

.face{width:100%;height:100%;border-radius:4px;overflow:hidden;position:relative;background:#1B2830;
  display:flex;flex-direction:column}
.faceImg{width:100%;height:100%;object-fit:cover;display:block}
.ph{background:linear-gradient(165deg,#22323B,#16232A);padding:7px}
.phTop{display:flex;justify-content:space-between;gap:4px;font-family:var(--util);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.42);overflow:hidden;white-space:nowrap}
.phArt{flex:1;margin:5px 0;border-radius:3px;background:rgba(255,255,255,.045);
  display:flex;align-items:flex-end;overflow:hidden}
.phArt svg{width:100%;height:100%;display:block}
.phName{font-size:10.5px;font-weight:700;line-height:1.2;color:var(--paper);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pmark{position:absolute;top:5px;right:5px;font-family:var(--util);font-weight:700;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:#0B1116;padding:1px 6px;border-radius:3px;
  background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:2}
.emptyBinder{grid-column:1/-1;padding:44px 20px;text-align:center;color:var(--muted);font-size:14px;line-height:1.7}

.tray{position:fixed;left:0;right:0;bottom:0;background:var(--ink);border-top:1px solid rgba(255,255,255,.1);
  padding:11px 22px 14px;z-index:25;box-shadow:0 -12px 34px rgba(0,0,0,.55)}
.trayHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.trayHead h4{margin:0;font-family:var(--util);font-size:15.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.trayHead span{font-family:var(--util);font-size:14.5px;letter-spacing:.06em;color:var(--muted)}
.slots{display:flex;gap:7px;overflow-x:auto;padding:4px 0;align-items:center}
.slot{flex:0 0 auto;width:54px;aspect-ratio:5/7;border-radius:6px;position:relative;padding:3px;
  border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center}
.slot.on{box-shadow:0 0 0 2px rgba(232,184,75,.35);border-color:var(--gold);border-style:solid}
.slot.filled{border-style:solid;animation:drop .22s ease}
@keyframes drop{from{transform:translateY(-9px);opacity:.4}to{transform:none;opacity:1}}
.slot .inner{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:3px;border-radius:4px}
.slotSwatch{width:17px;height:17px;border-radius:4px;display:block}
.slotLabel{font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.slot .x{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;
  background:#B85C5C;color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.trayGo{flex:0 0 auto;margin-left:8px;padding:11px 20px;border-radius:8px;background:var(--gold);
  color:#1A1206;font-weight:900;font-size:14.5px;white-space:nowrap}
.trayGo:disabled{background:rgba(255,255,255,.09);color:var(--muted);cursor:default}
.vsel{display:flex;align-items:center;gap:12px}
.vsel .slot{width:60px}
.vsel .meta{flex:1;min-width:0;font-size:14px}
.vsel .meta small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

.inv{padding:20px 22px;max-width:960px}
.invHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.invHead h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.02em}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{padding:9px 16px;border-radius:7px;background:var(--gold);color:#1A1206;font-weight:700;font-size:14px}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--paper)}
.btn.ghost:hover{background:rgba(255,255,255,.15)}
.stat{font-family:var(--util);font-size:14.5px;letter-spacing:.07em;color:var(--muted)}
.fxLine{font-family:var(--util);font-size:14px;letter-spacing:.05em;color:var(--muted);margin:-4px 0 16px}
.health{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px;margin-bottom:24px}
.hCard{padding:11px 12px;border-radius:9px;background:var(--vinyl);border:1px solid rgba(255,255,255,.08);
  border-left:4px solid var(--hc)}
.hCard .n{font-size:25px;font-weight:900;line-height:1;letter-spacing:-.03em}
.hCard .l{font-family:var(--util);font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  margin-top:5px;color:var(--paper)}
.hCard .r{font-family:var(--util);font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.hCard .avg{font-family:var(--util);font-size:12.5px;color:var(--muted);letter-spacing:.04em;margin-top:3px}
.hCard .w{font-family:var(--util);font-size:12.5px;color:#E0995C;margin-top:3px;letter-spacing:.04em}

.econ{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:8px}
.econ th{text-align:left;font-family:var(--util);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.09)}
.econ td{padding:9px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.econ .num{font-family:var(--util);font-size:16px;font-weight:700}
.pctTag{font-family:var(--util);font-size:14px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:20px}
.pctTag.good{background:rgba(78,158,122,.2);color:#7FC4AB}
.pctTag.warn{background:rgba(224,153,92,.18);color:#E0995C}
.pctTag.bad{background:rgba(182,84,80,.22);color:#E08585}
.note{color:var(--muted);font-size:12.5px;line-height:1.6;margin:0 0 26px}

h3.sec{font-size:16px;font-weight:900;margin:0 0 8px}
.bulkBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bulkNote{font-family:var(--util);font-size:14px;letter-spacing:.06em;color:var(--muted)}
.bulkBar select,.rowBin{background:var(--ink);border:1px solid rgba(255,255,255,.14);border-radius:6px;
  color:var(--paper);padding:6px 8px;font-size:13px}
.rowBin{padding:4px 6px;font-size:12.5px;flex:0 0 auto}
.forcedTag{font-family:var(--util);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 6px;border-radius:20px;background:rgba(232,184,75,.18);color:var(--gold);margin-left:5px}
.needsTag{font-family:var(--util);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 6px;border-radius:20px;background:rgba(224,133,133,.18);color:#E08585;margin-left:5px}
.search{width:100%;max-width:300px;padding:8px 12px;border-radius:7px;background:var(--ink);
  border:1px solid rgba(255,255,255,.12);color:var(--paper);font-size:14px}
.rows{margin-top:10px}
.row{display:flex;align-items:center;gap:11px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.row .thumb{width:34px;height:47px;border-radius:3px;flex:0 0 auto;overflow:hidden;background:#1B2830}
.row .thumb img{width:100%;height:100%;object-fit:cover}
.row .nm{flex:1;min-width:0;font-size:13.5px}
.row .nm small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.row .pr{font-family:var(--util);font-size:16px;font-weight:700;text-align:right;line-height:1.15}
.row .pr small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.row .prIn{width:64px;font-family:var(--util);font-size:14px;font-weight:700;background:var(--ink);
  border:1px solid rgba(255,255,255,.16);border-radius:6px;color:var(--paper);padding:4px 6px}
.bdot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.mini{padding:5px 10px;border-radius:5px;background:rgba(255,255,255,.08);font-size:12.5px;font-weight:600}
.mini:hover{background:rgba(255,255,255,.18)}
.mini:disabled{opacity:.45;cursor:default}
.tag{font-family:var(--util);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.08);color:var(--muted)}
.tag.held{background:rgba(232,184,75,.16);color:var(--gold)}
.tag.sold{background:rgba(95,168,142,.16);color:#7FC4AB}

.ordTable{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:26px}
.ordTable th{text-align:left;font-family:var(--util);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.09)}
.ordTable td{padding:9px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.ordTable .cl{color:var(--muted);font-size:12.5px;line-height:1.55}

.sheet{position:fixed;inset:0;background:rgba(6,12,15,.85);z-index:60;display:flex;align-items:center;
  justify-content:center;padding:20px}
.sheet[hidden]{display:none}
.box{background:var(--vinyl);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:22px;
  width:100%;max-width:560px;max-height:88vh;overflow:auto}
.box h3{margin:0 0 6px;font-size:19px;font-weight:900}
.box p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.6}
.box code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:4px;font-size:12.5px}
.box textarea{width:100%;height:110px;background:var(--ink);border:1px solid rgba(255,255,255,.14);
  border-radius:8px;color:var(--paper);padding:11px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;resize:vertical}
.box input[type=text],.box input[type=password]{width:100%;background:var(--ink);border:1px solid rgba(255,255,255,.14);
  border-radius:7px;color:var(--paper);padding:8px 10px;font-size:13.5px}
.fieldCol{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13.5px;color:var(--muted)}
.drop{border:1px dashed rgba(255,255,255,.22);border-radius:9px;padding:16px;text-align:center;
  margin-bottom:12px;font-size:13.5px;color:var(--muted)}
.drop.over{border-color:var(--gold);background:rgba(232,184,75,.08)}
.err{color:#E08585;font-size:13px;margin-top:8px}
.acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}

.toast{position:fixed;bottom:174px;left:50%;transform:translateX(-50%);background:var(--gold);
  color:#1A1206;padding:10px 18px;border-radius:8px;font-weight:700;font-size:13.5px;z-index:70;
  box-shadow:0 8px 24px rgba(0,0,0,.45);animation:drop .22s ease;max-width:calc(100% - 40px);text-align:center}
.toast[hidden]{display:none}

@media(max-width:600px){
  .binder{padding:15px 15px 15px 38px}
  .packs{padding:15px 15px 4px}.binderWrap{padding:12px 15px 0}.filters{padding:9px 15px 0}
  .inv{padding:16px 15px}.tray{padding:9px 15px 12px}.slot{width:48px}
  .bName{font-size:16px;letter-spacing:.1em}
  .top{padding:12px 15px}
  .row{flex-wrap:wrap}.row .nm{flex-basis:calc(100% - 50px)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- phase 1: promo, sort, floating page arrows, My packs strip, cart ---- */
.promo{margin:14px 22px 0;padding:8px 14px;border-radius:8px;text-align:center;font-family:var(--util);
  font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(232,184,75,.12);color:var(--gold);border:1px solid rgba(232,184,75,.25)}
.filters{align-items:center}
.sortSel{font-family:var(--util);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px;margin-left:6px}
.sortSel select{background:var(--ink);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:var(--paper);
  padding:5px 8px;font-size:13px;text-transform:none;letter-spacing:0}
.sideNav{position:fixed;top:50%;transform:translateY(-50%);z-index:20;width:48px;height:88px;border-radius:12px;
  background:rgba(10,18,22,.82);border:1px solid rgba(255,255,255,.16);color:var(--paper);font-size:34px;line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transition:background .15s,opacity .15s}
.sideNav:not(:disabled):hover{background:var(--gold);color:#1A1206}
.sideNav:disabled{opacity:.18;cursor:default}
.sideNav.prev{left:max(8px, calc(50% - 330px - 64px))}
.sideNav.next{right:max(8px, calc(50% - 330px - 64px))}
@media(max-width:800px){
  .sideNav{width:38px;height:70px;font-size:28px;background:rgba(10,18,22,.7)}
  .sideNav.prev{left:4px}.sideNav.next{right:4px}
  .binderWrap{padding-left:40px;padding-right:40px}
}
.linkBtn{font-family:var(--util);font-size:14.5px;letter-spacing:.06em;color:var(--gold);text-decoration:underline;padding:0}
.strip{display:flex;align-items:center;gap:10px;padding:0 0 9px;margin-bottom:9px;border-bottom:1px solid rgba(255,255,255,.08)}
.stripLbl{font-family:var(--util);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.stripItems{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;padding:2px 0}
.stripChip{flex:0 0 auto;display:flex;align-items:center;border-radius:20px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:700;overflow:hidden}
.stripChip button{padding:5px 10px;white-space:nowrap}
.stripChip .rm{padding:5px 9px 5px 4px;color:var(--muted)}
.stripChip.on{border-color:var(--gold);background:rgba(232,184,75,.15)}
.stripChip.vaultChip{border-color:rgba(224,96,126,.45)}
.stripChip.warn{border-color:#E0995C;color:#E0995C}
.stripCart{flex:0 0 auto;padding:7px 14px;border-radius:7px;background:var(--gold);color:#1A1206;font-weight:900;font-size:13.5px;white-space:nowrap}
body.hasStrip{padding-bottom:214px}
.cart .cartRow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.cartThumbs{display:flex;gap:4px}
.cartThumb{width:40px;aspect-ratio:5/7;border-radius:4px;overflow:hidden;background:#1B2830;position:relative}
.cartThumb .pmark{display:none}
.cartThumb.gone{opacity:.3;outline:2px solid #E08585}
.cartMeta{flex:1;min-width:160px;font-size:14px}
.cartMeta small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.goneTxt{color:#E0995C!important}
.cartPrice{font-family:var(--util);font-size:18px;font-weight:700}
.cartSum{max-width:420px;margin:18px 0 0 auto;background:var(--vinyl);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px}
.sumRow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;gap:10px}
.sumRow b{font-family:var(--util);font-size:17px}
.sumRow.total{border-top:1px solid rgba(255,255,255,.1);margin-top:4px;padding-top:10px}
.sumRow.total b{font-size:21px;color:var(--gold)}
.sumRow select{background:var(--ink);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:var(--paper);padding:4px 6px;font-size:13px;margin-left:6px}
/* bottom bar = strip + tray, fixed together */
#tray{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--ink);
  border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -12px 34px rgba(0,0,0,.55)}
#tray:empty{display:none}
#tray .tray{position:static;box-shadow:none;border-top:0}
#tray .strip{padding:9px 22px;margin:0}
@media(max-width:600px){ #tray .strip{padding:8px 15px} }
.sideNav{opacity:0;pointer-events:none}
.sideNav.show{opacity:1;pointer-events:auto}
.sideNav.show:disabled{opacity:.18;pointer-events:none}
/* ---- phase 2/3: live data, admin ---- */
.loading{padding:80px 20px;text-align:center;color:var(--muted);font-family:var(--util);font-size:18px;letter-spacing:.06em}
.qmark{position:absolute;bottom:5px;right:5px;font-family:var(--util);font-weight:700;font-size:11px;color:#0B1116;
  padding:1px 6px;border-radius:3px;background:var(--gold);z-index:2}
.foot{padding:30px 22px 10px;text-align:center;font-family:var(--util);font-size:13px;letter-spacing:.08em;color:rgba(143,163,173,.55)}
.foot a{color:inherit}
body.adminMode #tray{display:none}
body.adminMode{padding-bottom:40px}
.admin{max-width:1100px}
.admin .tools .btn{padding:7px 12px;font-size:13px}
.loginBox{max-width:420px;margin:60px auto;display:flex;flex-direction:column;gap:12px}
.loginBox .search{max-width:none}
.adminMsg{background:rgba(232,184,75,.12);border:1px solid rgba(232,184,75,.3);color:var(--gold);padding:9px 12px;border-radius:8px;margin-bottom:14px;font-size:13.5px}
.admin select{background:var(--ink);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:var(--paper);padding:6px 8px;font-size:13px}
.aRow .adj{display:flex;align-items:center;gap:4px;font-family:var(--util);font-size:15px}
.aRow .adj b{min-width:42px;text-align:center}
.aRow .adj b.up{color:#7FC4AB}.aRow .adj b.down{color:#E08585}
.aRow .pr small{font-size:11px}
.needsCell{display:flex;gap:6px;align-items:center}
.aPager{padding:14px 4px;font-family:var(--util);color:var(--muted);display:flex;gap:10px;align-items:center}
.formGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px;margin:12px 0}
.formGrid label{display:flex;flex-direction:column;gap:4px;font-family:var(--util);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.formGrid label.wide{grid-column:1/-1}
.formGrid input,.formGrid select,.formGrid textarea,.noteCard textarea{background:var(--ink);border:1px solid rgba(255,255,255,.14);border-radius:6px;
  color:var(--paper);padding:7px 9px;font-size:14px;font-family:var(--disp);text-transform:none;letter-spacing:0}
.wideBox{max-width:760px}
.pcBox{margin:6px 0 4px}
.pcList{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:260px;overflow:auto}
.pcItem{display:flex;gap:10px;align-items:baseline;text-align:left;padding:7px 10px;border-radius:6px;background:rgba(255,255,255,.05);font-size:13px}
.pcItem:hover{background:rgba(232,184,75,.14)}
.pcItem span{color:var(--muted);flex:1}.pcItem em{font-style:normal;font-family:var(--util);font-weight:700}
.btn.danger{color:#E08585}
.devGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.devCol{background:rgba(255,255,255,.03);border-radius:10px;padding:12px}
.devCard{background:var(--vinyl);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 10px;margin-bottom:8px;font-size:13.5px}
.devCard small{display:block;color:var(--muted);margin-top:4px}
.devActs{display:flex;gap:4px;margin-top:6px;justify-content:flex-end}
.devCat{font-family:var(--util);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border-radius:20px;background:rgba(255,255,255,.08);color:var(--muted)}
.devCat.c_build{color:#7FB4E0}.devCat.c_marketing{color:#E0A0C0}.devCat.c_ops{color:var(--gold)}.devCat.c_idea{color:#9FD8A8}
.noteCard{background:var(--vinyl);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.noteHead{display:flex;gap:10px;align-items:center}.noteHead b{flex:1}