:root{
      --bg:#0b1220;
      --panel:#0f1b33;
      --panel2:#122246;
      --ink:#eaf0ff;
      --muted:#b9c6ea;
      --accent:#5aa7ff;
      --good:#38d07c;
      --bad:#ff4d6d;
      --warn:#ffcc66;
      --line: rgba(255,255,255,.12);
      --shadow: 0 12px 28px rgba(0,0,0,.35);
      --r: 18px;

      --blue1:#0f3b86;
      --blue2:#1e63d6;
      --columbiaBlue:#b9d9eb;

      --fsBase: 22px;
      --fsButton: 28px;
      --fsRedeem: 34px;
      --fsLeaderboard: 30px;

      --btnH: 84px;

      --navBtnH: 92px;
      --navBtnFs: 28px;
      --navGap: 10px;
      --navRadius: 18px;
      --navIcon: 22px;
    }
    *{box-sizing:border-box}
    html{ min-height: 100%; }
    html,body{ height: 100%; }
    body{
      margin:0;
      background:
        radial-gradient(1200px 600px at 50% 0%, #0b244f 0%, rgba(11,36,79,0) 55%),
        radial-gradient(900px 500px at 20% 30%, rgba(46,105,214,.18) 0%, rgba(46,105,214,0) 60%),
        linear-gradient(180deg, #070b12, #05070b);
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: center;
      color:var(--ink);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow-x:hidden;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      font-size: var(--fsBase);
    }
    a{color:inherit}

    /* Page shell is .wrap.lanternContent (lantern-header.css). Store tab is embedded in Locker — no global .wrap here (avoids overriding header padding-top). */

    .titleRow{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      margin: 4px 0 10px;
      text-align:center;
    }
    .appTitle{
      font-weight: 1000;
      letter-spacing:.4px;
      font-size: 40px;
      line-height:1.05;
      opacity:.98;
    }
    .subTitle{
      color: var(--muted);
      font-weight: 900;
      font-size: 22px;
      letter-spacing:.2px;
    }

    .dailyHuntHint{
      padding: 12px 16px;
      margin-bottom: 12px;
      border-radius: 14px;
      border: 1px solid rgba(242,194,48,.4);
      background: rgba(242,194,48,.12);
      font-size: 22px;
      font-weight: 800;
      color: var(--warn);
      text-align: center;
    }
    .dailyHuntHint.found{ border-color: rgba(56,208,124,.4); background: rgba(56,208,124,.12); color: var(--good); }
    .dailyHuntNugget{
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 44px;
      height: 44px;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 5;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      animation: dailyHuntSparkle 2s ease-in-out infinite;
      opacity: 0.82;
    }
    .dailyHuntNugget img{ width: 36px; height: 36px; object-fit: contain; }
    .dailyHuntNugget:hover{ opacity: 1; transform: scale(1.12); }
    .dailyHuntNugget:active{ transform: scale(0.95); }
    @keyframes dailyHuntSparkle{
      0%,100%{ filter: drop-shadow(0 0 6px rgba(242,194,48,.6)); opacity: 0.9; }
      50%{ filter: drop-shadow(0 0 14px rgba(242,194,48,.9)); opacity: 1; }
    }

    .btn{
      height: var(--btnH);
      padding: 0 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--ink);
      font-weight: 800;
      font-size: 22px;
      letter-spacing:.2px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      cursor:pointer;
      user-select:none;
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
      text-decoration:none;
      white-space:nowrap;
    }
    .btn:active{transform: translateY(1px)}
    .btn.primary{
      background: linear-gradient(180deg, rgba(90,167,255,.24), rgba(90,167,255,.10));
      border-color: rgba(90,167,255,.40);
    }
    .btn.good{
      background: linear-gradient(180deg, rgba(56,208,124,.22), rgba(56,208,124,.10));
      border-color: rgba(56,208,124,.42);
    }
    .btn.bad{
      background: linear-gradient(180deg, rgba(255,77,109,.24), rgba(255,77,109,.10));
      border-color: rgba(255,77,109,.42);
    }

    .actionRow{
      display: flex;
      gap: 10px;
      margin-top: 12px;
    }
    .actionRow .btn{
      flex: 1;
      min-width: 0;
    }

    .qtyRow{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top: 6px;
    }
    .qtyRow .qtyMinus,
    .qtyRow .qtyVal,
    .qtyRow .qtyPlus{
      flex: 1 1 33.333%;
      min-width: 0;
    }
    .qtyMinus, .qtyPlus{
      height: var(--btnH);
      border-radius: 14px;
      border: 0;
      font-weight: 900;
      font-size: 38px;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(0,0,0,.3);
    }
    .qtyMinus{
      background: var(--blue1);
      color: var(--columbiaBlue);
    }
    .qtyPlus{
      background: var(--columbiaBlue);
      color: var(--blue1);
    }
    .qtyMinus:active, .qtyPlus:active{ transform: translateY(1px); filter: brightness(.92); }
    .qtyVal{
      height: var(--btnH);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 26px;
      background: rgba(255,255,255,.06);
      border: 1px solid var(--line);
      border-radius: 14px;
      color: var(--ink);
    }

    .card{
      margin-top: 12px;
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow: hidden;
      min-width: 0;
    }
    .cardHd{
      padding: 12px 14px;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .cardHd .h{
      font-weight:900;
      letter-spacing:.2px;
      font-size: 26px;
    }
    .card.redeemCard .cardHd .h{
      font-size: var(--fsRedeem);
    }
    .card.redeemCard .cardBd label,
    .card.redeemCard .cardBd select,
    .card.redeemCard .cardBd input,
    .card.redeemCard .cardBd textarea,
    .card.redeemCard .cardBd .stat .k,
    .card.redeemCard .cardBd .stat .v,
    .card.redeemCard .cardBd .btn{
      font-size: var(--fsBase);
    }
    .card.storeWalletCard .cardHd .h{
      font-size: var(--fsRedeem);
    }
    .card.storeWalletCard .cardBd label,
    .card.storeWalletCard .cardBd select,
    .card.storeWalletCard .cardBd input,
    .card.storeWalletCard .cardBd textarea,
    .card.storeWalletCard .cardBd .stat .k,
    .card.storeWalletCard .cardBd .stat .v,
    .card.storeWalletCard .cardBd .btn{
      font-size: var(--fsBase);
    }
    .card.leaderboardCard .cardHd .h,
    .card.leaderboardCard .cardBd{
      font-size: var(--fsLeaderboard);
    }
    .card.leaderboardCard .cardBd table,
    .card.leaderboardCard .cardBd .note{
      font-size: var(--fsLeaderboard);
    }
    .cardBd{ padding: 16px; min-width: 0; }

    /* Scope form chrome to Store tab only — Locker also loads this sheet; unscoped input rules
       were overriding #lanternAppBarRoot search (Explore does not load this file). */
    .storePanelRoot label{
      display:block;
      font-weight:800;
      color: var(--muted);
      font-size: 22px;
      margin: 0 0 6px 2px;
    }
    .storePanelRoot select,
    .storePanelRoot input,
    .storePanelRoot textarea{
      width:100%;
      height: var(--btnH);
      border-radius: 14px;
      border:1px solid var(--line);
      background: #0a1428;
      color: #fff;
      padding: 0 12px;
      font-size: 22px;
      outline:none;
    }
    .storePanelRoot select option{ background: #0a1428; color: #fff; }
    .storePanelRoot textarea{
      height: 110px;
      padding: 10px 12px;
      resize:vertical;
    }
    .storePanelRoot select:focus,
    .storePanelRoot input:focus,
    .storePanelRoot textarea:focus{
      border-color: rgba(90,167,255,.65);
      box-shadow: 0 0 0 3px rgba(90,167,255,.20);
    }

    .studentCombo{ position: relative; }
    .studentDropdown{
      position: absolute;
      left:0; right:0; top:100%;
      margin-top: 4px;
      max-height: 220px;
      overflow: auto;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.2);
      background: #0a1428;
      color: #fff;
      z-index: 20;
      display: none;
      box-shadow: var(--shadow);
    }
    .studentDropdown.show{ display: block; }
    .studentDropdownItem{
      padding: 12px 14px;
      font-size: 28px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,.15);
      color: #fff;
    }
    .studentDropdownItem:last-child{ border-bottom: none; }
    .studentDropdownItem:hover,
    .studentDropdownItem[aria-selected="true"],
    .studentDropdownItem.selected{
      background: rgba(90,167,255,.28);
      color: #fff;
    }

    .scrollArea{
      min-width: 0;
    }
    .scrollArea::-webkit-scrollbar,
    .studentDropdown::-webkit-scrollbar{ width: 40px; }
    .scrollArea::-webkit-scrollbar-thumb,
    .studentDropdown::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,.25);
      border-radius: 10px;
      min-height: 44px;
    }
    .scrollArea::-webkit-scrollbar-track,
    .studentDropdown::-webkit-scrollbar-track{ background: rgba(0,0,0,.2); border-radius: 10px; }

    .stats{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:10px;
      margin-top: 10px;
    }
    @media (max-width: 420px){
      .stats{ grid-template-columns: 1fr; }
    }
    .stat{
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius: 14px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 4px;
      min-height: unset;
    }
    .stat .k{
      color: var(--muted);
      font-weight:800;
      font-size: 22px;
      letter-spacing:.2px;
      margin-bottom: 0;
    }
    .stat .v{
      font-weight:900;
      font-size: 22px;
      letter-spacing:.2px;
      min-height: unset;
      display: inline;
    }
    .stat.good .v{ color: var(--good); }
    .stat.warn .v{ color: var(--warn); }
    @keyframes balanceSpin{ to{ transform: rotate(360deg); } }
    .balanceSpinner{
      display: inline-block;
      width: 28px;
      height: 28px;
      border: 3px solid rgba(255,255,255,.25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: balanceSpin 0.75s linear infinite;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 12px;
    }

    .list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .item{
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius: 16px;
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .item .nm{
      font-weight:900;
      font-size: 26px;
      line-height:1.1;
    }
    .item .meta{
      color: var(--muted);
      font-weight:800;
      font-size: 22px;
      margin-top: 2px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 76px;
      height: 38px;
      padding: 0 10px;
      border-radius: 999px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.18);
      font-weight:900;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .pill.good{ border-color: rgba(56,208,124,.45); background: rgba(56,208,124,.12); }
    .pill.accent{ border-color: rgba(90,167,255,.45); background: rgba(90,167,255,.12); }

    .note{
      color: var(--muted);
      font-size: 22px;
      margin-top: 8px;
      line-height:1.35;
    }

    .overlay{
      position:fixed; inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.58);
      z-index: 9999;
      padding: 18px;
    }
    .modal{
      width: min(860px, 96vw);
      max-width: 90vw;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 28px;
      border-radius: 18px;
      border: 2px solid rgba(233,241,255,.14);
      background: linear-gradient(180deg, rgba(10,19,36,.96), rgba(7,12,20,.92));
      box-shadow: var(--shadow);
      overflow: auto;
      position: relative;
    }
    .modalHd{
      position: relative;
      padding: 12px 60px 16px 14px;
      border-bottom: 1px solid rgba(233,241,255,.14);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }
    .modalHd .t{ font-weight: 1000; font-size: 36px; line-height: 1.2; margin: 0; }
    .modalBd{ padding: 20px 14px 14px; font-size: 78px; line-height: 1.3; font-weight: 800; }
    .modalHd .x{
      position: absolute;
      top: 18px;
      right: 18px;
      width: 56px;
      height: 56px;
      border-radius: 14px;
      border: 2px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.1);
      cursor: pointer;
      color: var(--ink);
      font-weight: 900;
      font-size: 28px;
    }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius: 16px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.12);
    }
    .scrollArea table{
      overflow:visible;
    }
    th, td{
      padding: 10px 10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      font-size: 22px;
    }
    .leaderboardCard table th,
    .leaderboardCard table td{
      font-size: var(--fsLeaderboard);
    }
    .placeholderRow{ color: var(--muted); font-size: var(--fsLeaderboard); text-align: center; padding: 18px; }
    th{
      text-align:left;
      color: var(--muted);
      font-weight:900;
      background: rgba(255,255,255,.06);
      position:sticky;
      top:0;
      z-index:1;
    }
    .scrollArea thead th{
      background: var(--panel);
      box-shadow: 0 2px 6px rgba(0,0,0,.25);
    }
    tr:last-child td{ border-bottom:none; }
    td.num{ text-align:right; font-variant-numeric: tabular-nums; }

    .cosmeticsCard{ margin-top: 16px; }
    .cosmeticCategorySection{ margin-bottom: 24px; }
    .cosmeticCategoryTitle{ font-size: 24px; font-weight: 900; color: var(--accent); margin-bottom: 12px; letter-spacing: .2px; }
    .cosmeticsGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 12px; }
    @media (max-width: 500px){ .cosmeticsGrid{ grid-template-columns: 1fr; } }
    .selectedStudentPill{ margin-top: 8px; }
    .selectedStudentPill .pill{ font-size: 22px; padding: 8px 14px; }
    .selectedItemHint{ margin-top: 8px; font-size: 22px; color: var(--muted); font-weight: 800; }
    .selectedItemHint.hasSelection{ color: var(--accent); }

    /* ===== Store tab — host rhythm only; card chrome lives in lantern-cards.css (LanternCards factory) ===== */
    #lockerPanelStore{
      --storeCard-min: 248px;
      --storeCard-max: 288px;
      --storeCard-visual-h: 132px;
      /* Align with Locker shell rhythm when both stylesheets load (parity; standalone falls back) */
      --store-gutter-x: var(--lantern-pad-x, 12px);
      --store-section-gap: 20px;
    }
    #lockerPanelStore .lockerSection{
      margin-bottom: var(--store-section-gap, 20px);
    }
    /* L-Rail-3b: Store rails = `.lanternScroller` under `.wrap.lanternContent` — same spacing tokens as §11 (lantern-header + lantern-cards.css). */
    #lockerPanelStore .lanternScroller{
      gap: var(--lantern-rail-gap);
      padding: var(--lantern-rail-pad-y-start) var(--lantern-rail-pad-x) var(--lantern-rail-pad-y-end);
      align-items: flex-start;
    }
    #lockerPanelStore #storeLbRailTrack.lanternScroller{
      margin-left: calc(-1 * var(--lantern-pad-x, 12px));
      margin-right: calc(-1 * var(--lantern-pad-x, 12px));
      padding-top: 0;
    }

    @media (max-width: 420px){
      #lockerPanelStore{
        --storeCard-min: 220px;
        --storeCard-max: 100%;
      }
    }