/* App shell: desktop icon rail + top bar, phone tab bar, and the page chrome
   around the cards (panels, toolbars, buttons). Cards, slabs and packs keep
   their own look from card.css and app.css; nothing here touches them. */
:root { --rail: 96px; --surf: #0e1019; --surf2: #141724; --edge: #1f2232; --edge2: #262a3b; }

/* ---------- shared pieces ---------- */
.vswitch { flex: none; display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #11131d; border: 1px solid var(--edge); align-self: center; }
.vswitch a { padding: 7px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); }
.vswitch a:hover { color: var(--text); }
.vswitch a.on { background: #232737; color: var(--text); font-weight: 700; }
.toolbar input:not([type=checkbox]), .toolbar select { height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surf2); border-color: var(--edge2); }
.pk-info { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---------- desktop: left icon rail, top bar ---------- */
@media (min-width: 761px) {
  #app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh;
    background: linear-gradient(90deg, #0c0e17 0 var(--rail), rgba(255,255,255,.07) var(--rail) calc(var(--rail) + 1px), transparent calc(var(--rail) + 1px)); }
  #app > .top { display: contents; }
  #app > .top .logo { grid-column: 1; grid-row: 1; justify-content: center; align-self: stretch; padding: 0; }
  #app > .top .logo span { display: none; }
  #app > .top .logo svg { width: 32px; }
  #app > .top #nav { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 0; flex-direction: column; gap: 2px; padding: 6px 0 24px; }
  #nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 0; border-radius: 0; font-size: 11px; font-weight: 600; color: var(--muted); transition: color .15s, background .15s; }
  #nav a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  #nav a:hover { color: var(--text); background: rgba(255,255,255,.04); }
  #nav a.on { color: var(--gold); background: rgba(246,196,83,.07); }
  #nav a.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
  #nav a .nbadge { position: absolute; top: 5px; left: calc(50% + 6px); margin: 0; }

  #app > .top .me { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 20; justify-content: flex-end; gap: 10px; min-height: 72px; padding: 0 28px;
    background: rgba(7,8,15,.94); border-bottom: 1px solid rgba(255,255,255,.06); }
  #app > main { grid-column: 2; grid-row: 2; width: 100%; padding-top: 26px; }
  .feed { top: 96px; }

  /* top bar controls */
  .top .me .btn.sm { height: 40px; border-radius: 12px; }
  .top .me .btn.ghost { min-width: 40px; padding: 0 10px; background: var(--surf2); border-color: var(--edge2); }
  .top .me .coins { height: 40px; padding: 0 5px 0 14px; gap: 8px; background: var(--surf2); border-color: var(--edge2); color: var(--text); font-size: 15px; }
  .top .me .coins i { width: 16px; height: 16px; }
  .top .me .coins-plus { width: 30px; height: 30px; margin-left: 2px; font-size: 18px; }
  .top .me .freepk { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 20px; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.35); color: #d9ccff; font-size: 13px; }
  .top .me .me-link { gap: 8px; padding: 0 12px 0 4px; }
  .top .me .me-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 800 16px 'Barlow Condensed', sans-serif; color: #2a1a00; background: linear-gradient(180deg, #ffd978, #e0a526); }

  /* packs: one wide stage per pack, pack on the left */
  .shop { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .packs { display: grid; gap: 24px; }
  .packcard { flex-direction: row; justify-content: flex-start; gap: 56px; padding: 44px 52px; border-radius: 24px; min-width: 0;
    background: radial-gradient(440px 440px at 180px 50%, rgba(246,196,83,.13), transparent 70%), var(--surf); border-color: #1c1f2e; }
  .packcard .pk { flex: none; }
  .packcard .pk-info { align-items: flex-start; gap: 16px; max-width: 460px; }
  .packcard h3 { font-size: 52px; line-height: .95; letter-spacing: .02em; }
  .packcard .tag { text-align: left; font-size: 15px; line-height: 1.5; color: #b3b9cf; }
  .packcard .row { justify-content: flex-start; gap: 10px; margin-top: 4px; }
  .packcard .row .btn { height: 56px; padding: 0 24px; border-radius: 16px; font-size: 15px; }
  .packcard .row .buy { font: 800 22px 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 0 30px; }
  .packcard .row .buy .coins { font: 700 15px Inter, sans-serif; }
  .packcard .stockbar { width: 100%; }
  .side .panel, .feed { border-radius: 20px; background: var(--surf); border-color: #1c1f2e; }

  /* card page: the card stays put on the left, only the details scroll */
  .mbox:has(> .detail) { max-width: 1240px; height: min(92vh, 900px); max-height: none; overflow: hidden; display: flex; }
  .detail { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); }
  .detail .stage { min-height: 0; overflow: hidden; padding: 28px 24px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc, #888) 20%, transparent), transparent 62%), #0a0b13; }
  .detail .info { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2a2e40 transparent; gap: 20px; padding: 34px 32px 0; }
  .detail h2 { font-size: 46px; padding-right: 48px; }
  .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv > div { background: #11131d; border-color: var(--edge); border-radius: 14px; min-width: 0; }
  .kv b { overflow-wrap: anywhere; }
  .kv > div { padding: 9px 12px; }
  .detail .kv { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .detail .actions:empty { display: none; }
  /* the float number sits on the label's line, saving a row */
  .detail .floatbar .val { position: absolute; right: 0; top: -27px; margin: 0; font-size: 17px; }
  .kv b .muted { display: block; font-size: 11px !important; line-height: 1.3; }
  .detail .info { gap: 16px; }
  .detail .info [hidden] { display: none !important; }
  .dtabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #11131d; border: 1px solid var(--edge); }
  .dtabs button { flex: 1; height: 36px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; }
  .dtabs button:hover { color: var(--text); }
  .dtabs button.on { background: #232737; color: var(--text); font-weight: 700; }
  .detail .actions { position: sticky; bottom: 0; z-index: 2; margin: auto -32px 0; padding: 14px 32px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
    background: rgba(12,14,23,.97); border-top: 1px solid #1c1f2e; }
  .detail .actions .btn { height: 44px; border-radius: 12px; padding: 0 12px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  #tabbar > * { font-size: 10px; }
  .section-title:has(.vswitch) { flex-wrap: wrap; align-items: center; row-gap: 4px; }
  .section-title .vswitch { margin-left: auto; }
  .section-title:has(.vswitch) > .muted { order: 3; flex-basis: 100%; font-size: 12px; }
  html.ph-fit .section-title:has(.vswitch) > .muted { display: none !important; }
  .section-title .vswitch a { padding: 6px 12px; }
}

/* guide: one panel per pack on sale */
.guide-packs { display: grid; gap: 16px; max-width: 980px; }
.guide-pack { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: 22px 26px; }
.guide-pack .gp-pack { flex: none; }
.guide-pack .gp-info { flex: 1 1 320px; min-width: 0; }
.guide-pack .tbl td { padding: 6px 10px 6px 0; font-size: 13.5px; }
@media (max-width: 760px) { .guide-pack { padding: 16px; gap: 16px; justify-content: center; } }