/* =========================================================
MANA GLOBAL CSS
Unified stylesheet for entire MANA TCG platform
========================================================= */

/* ================= DESIGN TOKENS ================= */

:root{
--bg:#0d1117;
--s1:#161b22;
--s2:#1c2230;
--s3:#21293b;
--border:rgba(255,255,255,.07);
--border2:rgba(255,255,255,.14);
--text:#cdd9e5;
--muted:#6e7f96;
--dim:#3d4e60;

--accent:#f5c842;
--cyan:#22d3ee;

--gain:#3fb950;
--loss:#f85149;

--mtg:#a78bfa;
--pkm:#fbbf24;

--r:10px;
--r-sm:7px;

/* UX-15: spacing scale tokens. Adopt incrementally — page-by-page during
   normal UX work. The 11+ ad-hoc padding/gap values across the codebase
   collapse to these 5 plus the existing component-specific overrides. */
--sp-xs:0.25rem;
--sp-sm:0.5rem;
--sp-md:0.75rem;
--sp-lg:1rem;
--sp-xl:1.5rem;

--shadow:0 4px 24px rgba(0,0,0,.35);
}

/* UX-12: shared skeleton shimmer. Pages that need a loading state can drop
   a <div class="skel"> placeholder of any size and get a soft animated
   gradient. Promoted from index.html inline so all pages can use it. */
.skel{
  background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 50%,var(--s1) 75%);
  background-size:200% 100%;
  animation:mana-shimmer 1.4s infinite;
  border-radius:4px;
}
@keyframes mana-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* UX-13: shared error-state card. Pages replace silent-catch blocks with:
   <div class="mana-err">
     <div class="mana-err-icon">⚠️</div>
     <div class="mana-err-msg">Gagal memuat data. Cek koneksi dan coba lagi.</div>
     <button class="mana-err-btn" onclick="location.reload()">Coba Lagi</button>
   </div>
   Translations: msg + button text routed through page's I18N dict. */
.mana-err{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;padding:2rem 1rem;text-align:center;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);
}
.mana-err-icon{font-size:2.5rem;opacity:.8}
.mana-err-msg{font-size:.95rem;color:var(--muted);max-width:340px;line-height:1.5}
.mana-err-btn{
  padding:.55rem 1.25rem;border-radius:8px;background:var(--accent);color:#000;
  font-size:.92rem;font-weight:700;border:none;cursor:pointer;min-height:40px;
  font-family:inherit;transition:filter .15s;touch-action:manipulation;
}
.mana-err-btn:hover,.mana-err-btn:active{filter:brightness(1.08)}

[data-theme="light"]{
--bg:#f4f6f9;
--s1:#ffffff;
--s2:#edf0f4;
--s3:#e2e6eb;
--border:rgba(0,0,0,.08);
--border2:rgba(0,0,0,.15);
--text:#1a2332;
--muted:#5a6a7e;
--dim:#a0aeba;

--accent:#c9960f;
--cyan:#0891b2;

--gain:#16a34a;
--loss:#dc2626;

--shadow:0 2px 16px rgba(0,0,0,.1);
}

/* ================= BASE ================= */

*,*::before,*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
color-scheme:dark;
}

[data-theme="light"]{
color-scheme:light;
}

body{
font-family:'Sora',sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
font-size:14px;
-webkit-font-smoothing:antialiased;
transition:background .2s,color .2s;
}

a{
color:inherit;
text-decoration:none;
}

button{
cursor:pointer;
font-family:inherit;
border:none;
background:none;
}

select,input,textarea{
font-family:inherit;
}

/* ================= NAV ================= */

.nav{
display:flex;
align-items:center;
gap:.75rem;
padding:.65rem 1.25rem;
background:var(--s1);
border-bottom:none;
position:sticky;
top:0;
z-index:200;
flex-wrap:nowrap;
}

/* ── TCG Sub-navbar (second row) ── */
.mana-subnav{
background:var(--bg);
border-bottom:1px solid var(--border);
padding:0 1.25rem;
position:sticky;
top:var(--nav-h,46px);
z-index:90;
}
.subnav-inner{
display:flex;
align-items:stretch;
gap:0;
max-width:1440px;
margin:0 auto;
overflow-x:auto;
scrollbar-width:none;
}
.subnav-inner::-webkit-scrollbar{display:none}
.tcg-tab-scroll::-webkit-scrollbar{display:none}
.subnav-left{display:flex;align-items:stretch;gap:0;flex:1;min-width:0}
.subnav-left .subnav-tab{min-width:110px;justify-content:center}
.subnav-right{display:flex;align-items:stretch;gap:0;flex-shrink:0;margin-left:auto}
.subnav-tab{
display:inline-flex;align-items:center;gap:.3rem;
padding:.45rem .75rem;
font-size:.82rem;
font-weight:600;
color:var(--muted);
text-decoration:none;
white-space:nowrap;
border-top:2px solid transparent;
border-bottom:1px solid transparent;
margin-bottom:-1px;
transition:color .15s,border-color .15s;
}
.subnav-tab:hover{color:var(--text);border-top-color:var(--border2)}
.subnav-tab.active{color:var(--text);border-top-color:var(--accent);border-bottom-color:var(--bg);position:relative}
.subnav-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--bg)}
.subnav-tab.active.subnav-foil{
background:linear-gradient(115deg,
  transparent 0%,
  rgba(232,83,29,.06) 15%,
  rgba(167,139,250,.05) 30%,
  rgba(245,200,66,.06) 50%,
  rgba(167,139,250,.05) 70%,
  rgba(232,83,29,.06) 85%,
  transparent 100%);
background-size:400% 100%;
animation:subnav-shimmer 10s linear infinite;
}
.subnav-new{font-size:.6rem;font-weight:700;letter-spacing:.05em;padding:.1rem .35rem;border-radius:6px;background:#e63946;color:#fff;margin-left:.3rem;vertical-align:middle;line-height:1}
@keyframes subnav-shimmer{
0%{background-position:100% center}
100%{background-position:-100% center}
}
.subnav-tab svg,.subnav-tab i,.subnav-tab img{flex-shrink:0}
/* Phones + small tablets — collapse subnav-right (Shop/Market/WTB/WTS/Sell)
   into the hamburger so TCG tabs (Magic/Pokémon/Lorcana/One Piece) own the
   row. Without this they share the row, lay out side-by-side, and at narrow
   widths the right group wraps under the left group → text overlap.
   !important guards against page-local .nav overrides setting flex-wrap. */
@media(max-width:820px){
.mana-subnav{padding:0 .5rem}
.subnav-inner{flex-wrap:nowrap !important}
.subnav-right{display:none !important}
.subnav-new{display:none !important}
}
@media(max-width:600px){
.subnav-tab{padding:.35rem .5rem;font-size:.72rem;gap:.2rem}
.subnav-left .subnav-tab{min-width:0}
}

.nav-logo{
font-size:1.05rem;
font-weight:800;
letter-spacing:.08em;
color:var(--accent);
display:flex;
align-items:center;
gap:.4rem;
flex-shrink:0;
}

.nav-logo svg{
width:18px;
height:18px;
}

.nav-sep{
width:1px;
height:16px;
background:var(--border2);
flex-shrink:0;
}

.nav-links{
display:flex;
align-items:center;
gap:.1rem;
}

.nav-a{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.4rem .85rem;
border-radius:6px;
font-size:1.15rem;
font-weight:600;
color:var(--text);
transition:color .15s,background .15s;
white-space:nowrap;
line-height:1;
}

.nav-a:hover{
color:var(--text);
background:var(--s2);
}

.nav-a.active{
color:var(--text);
}

.nav-a.tcg-mtg{
color:var(--mtg);
}

.nav-a.tcg-mtg:hover,
.nav-a.tcg-mtg.active{
color:var(--mtg);
background:rgba(167,139,250,.1);
}

.nav-a.tcg-pkm{
color:var(--pkm);
}

.nav-a.tcg-pkm:hover,
.nav-a.tcg-pkm.active{
color:var(--pkm);
background:rgba(251,191,36,.1);
}

/* Nav dropdown (Codex, etc) */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}
.nav-drop-trigger {
  cursor: pointer;
}
.nav-drop-arrow {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s;
  margin-left: .15rem;
}
.nav-dropdown.open .nav-drop-arrow {
  transform: rotate(180deg);
}
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  z-index: 200;
  overflow: hidden;
  min-width: 160px;
}
.nav-dropdown.open .nav-drop-menu {
  display: block;
}
.nav-drop-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: background .1s;
  white-space: nowrap;
}
.nav-drop-opt:hover {
  background: var(--s2);
}
.nav-drop-opt.active {
  color: var(--accent);
}

.nav-sp{
display:none;
}

/* ================= NAV CONTROLS ================= */

.nav-controls{
display:flex;
align-items:center;
gap:.35rem;
flex-shrink:0;
}

.nc-pill{
display:inline-flex;
background:var(--s2);
border:1px solid var(--border2);
border-radius:20px;
padding:2px;
gap:0;
}

.nc-pill button{
padding:.32rem .8rem;
border-radius:17px;
font-size:.88rem;
font-weight:700;
color:var(--muted);
transition:all .18s;
letter-spacing:.03em;
}

.nc-pill button.on{
background:var(--accent);
color:#000;
}

[data-theme="light"] .nc-pill button.on{
color:#fff;
background:var(--cyan);
}

.nc-icon{
width:40px;
height:40px;
border-radius:8px;
border:none;
background:transparent;
color:var(--muted);
font-size:1.1rem;
display:flex;
align-items:center;
justify-content:center;
transition:all .15s;
}

.nc-icon:hover{
color:var(--text);
}
.nav-icon-lg{width:44px;height:44px}
.nav-icon-lg svg{width:24px;height:24px}

.nav-cart-btn,
.nav-wishlist-btn,
.nav-col-icon{
border:none !important;
background:transparent !important;
color:var(--text) !important;
}
.nav-cart-btn.has-items{
color:var(--accent) !important;
}

/* ================= PAGE ================= */

.page{
max-width:1440px;
margin:0 auto;
padding:1.25rem 1.5rem;
}

/* ================= PANELS ================= */

.panel{
background:var(--s1);
border:1px solid var(--border);
border-radius:var(--r);
padding:1.1rem 1.25rem;
margin-bottom:.85rem;
}

.panel-hdr{
display:flex;
align-items:center;
cursor:pointer;
user-select:none;
gap:.65rem;
}

.panel-hdr h2{
font-size:.82rem;
font-weight:700;
color:var(--text);
text-transform:uppercase;
letter-spacing:.06em;
flex:1;
}

.panel-chev{
color:var(--muted);
font-size:.8rem;
transition:transform .2s;
}

.panel-chev.open{
transform:rotate(180deg);
}

.panel-body{
margin-top:1rem;
}

.panel-body.hidden{
display:none;
}

/* ================= CARD GRID ================= */

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:1rem;
}

.c-card{
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--r-sm);
overflow:hidden;
transition:transform .15s,border-color .15s,box-shadow .15s;
cursor:pointer;
}

.c-card:hover{
transform:translateY(-3px);
border-color:var(--border2);
box-shadow:var(--shadow);
}

.c-img{
aspect-ratio:63/88;
background:var(--s3);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
font-size:2rem;
color:var(--dim);
}

.c-img img{
width:100%;
height:100%;
object-fit:cover;
display:none;
}

.c-img img.loaded{
display:block;
}

.c-meta{
padding:.45rem .55rem;
}

.c-name{
font-size:.72rem;
font-weight:600;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.c-set{
font-size:.65rem;
color:var(--muted);
margin-top:.1rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.c-price{
font-family:'Space Mono',monospace;
font-size:.73rem;
color:var(--accent);
margin-top:.15rem;
}

.c-price.dim{
color:var(--muted);
}

/* ================= FOIL EFFECT ================= */

/* ================= SEARCH ================= */

.search-wrap{
position:relative;
margin-bottom:.65rem;
}

.search-inp{
width:100%;
padding:.75rem 3.5rem .75rem .9rem;
font-size:1rem;
font-weight:500;
background:var(--s2);
border:1.5px solid var(--border2);
border-radius:var(--r);
color:var(--text);
transition:border-color .2s;
}

.search-inp:focus{
outline:none;
border-color:var(--cyan);
box-shadow:0 0 0 3px rgba(34,211,238,.08);
}

.search-btn{
position:absolute;
right:.45rem;
top:50%;
transform:translateY(-50%);
padding:.4rem .9rem;
background:var(--accent);
color:#000;
border-radius:var(--r-sm);
font-size:.8rem;
font-weight:700;
}

/* ================= PAGINATION ================= */

.pagi{
display:flex;
gap:.3rem;
justify-content:center;
flex-wrap:wrap;
margin:.85rem 0;
}

.pgi{
min-width:30px;
height:30px;
padding:0 .45rem;
border-radius:6px;
border:1px solid var(--border2);
background:var(--s2);
color:var(--muted);
font-size:.75rem;
font-weight:600;
}

.pgi.on{
background:var(--accent);
color:#000;
border-color:var(--accent);
}

/* ================= LOADING ================= */

.loading-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap:.75rem;
padding:3rem;
color:var(--muted);
font-size:.85rem;
}

.spinner{
width:28px;
height:28px;
border-radius:50%;
border:2.5px solid var(--border2);
border-top-color:var(--cyan);
animation:spin .8s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg)}
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
width:5px;
height:5px;
}

::-webkit-scrollbar-track{
background:transparent;
}

::-webkit-scrollbar-thumb{
background:var(--border2);
border-radius:3px;
}

/* =========================================================
   MANA CSS — EXTENDED COMPONENTS  (appended v3.0)
   All page-specific classes unified here.
   ========================================================= */

/* ================= TOKENS (already in :root above) ================= */
/* No duplication — tokens defined at top of file */

/* ================= BUTTONS ================= */

.btn {
  padding: .42rem 1rem;
  border-radius: var(--r-sm);
  font-size: .8rem;
  font-weight: 600;
  border: none;
  transition: all .15s;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-p { background: var(--accent); color: #000; }
.btn-p:hover { filter: brightness(1.1); }

.btn-d { background: var(--s2); border: 1px solid var(--border2); color: var(--muted); }
.btn-d:hover { border-color: var(--loss); color: var(--loss); }

/* ===== UX-05: Size tokens =====
   Three tiers covering all primary/secondary/tertiary actions. Use as a
   modifier on .btn or any custom button: <button class="btn btn-p btn-lg">.
   Standalone .btn-lg/.btn-md/.btn-sm just enforce the height + min font;
   compose with your own bg/border styling.

   - btn-lg (44px): primary CTAs, POS confirm, queue actions, drawer save
   - btn-md (36px): secondary actions, filter pills, pagi, table row actions
   - btn-sm (32px): tertiary, dense table chrome, status pills

   Floor: never define a button shorter than 32px for a tap target. Icon-
   only buttons (close X, row edit ✏️) are exempt from this floor — they
   live in the 24-30px range and are addressed by the surrounding hit area.
*/
.btn-lg { min-height: 44px; padding: .55rem 1.1rem; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn-md { min-height: 36px; padding: .42rem .85rem; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.btn-sm { min-height: 32px; padding: .32rem .65rem; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }

.steps-toggle,
.translate-btn {
  font-size: .72rem;
  font-weight: 600;
  padding: .28rem .65rem;
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--border2);
  color: var(--muted);
  transition: all .15s;
}
.steps-toggle:hover,
.translate-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ================= PAGE HEADER ================= */

.page-hdr {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.page-hdr-ico { font-size: 1.5rem; flex-shrink: 0; }
.page-hdr h1  { font-size: 1rem; font-weight: 800; color: var(--text); }
.page-hdr p   { font-size: .75rem; color: var(--muted); margin-top: .15rem; }

/* ================= HERO ================= */

.hero {
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.2rem;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--s2), var(--s1));
  border: 1px solid var(--border);
}

.hero-text h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: .08em; color: var(--text); }
.hero-text p  { margin-top: .2rem; color: var(--muted); font-size: .85rem; }

.db-stats { display: flex; gap: .9rem; margin-top: .9rem; flex-wrap: wrap; }
.db-stat  { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .55rem .8rem; }
.db-stat-v { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .9rem; }
.db-stat-l { font-size: .6rem; color: var(--muted); text-transform: uppercase; }

/* ================= QUICK LINKS (index) ================= */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.q-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem .9rem;
  border-radius: var(--r);
  background: var(--s2);
  border: 1px solid var(--border);
  transition: all .15s;
}

.q-card:hover { transform: translateY(-2px); border-color: var(--border2); }
.q-ico   { font-size: 1.3rem; }
.q-label { font-weight: 700; font-size: .85rem; }
.q-desc  { font-size: .7rem; color: var(--muted); }

/* ================= STATS STRIP ================= */

.stats-strip {
  display: flex;
  align-items: stretch;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: .85rem;
  overflow: hidden;
}

.sstat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .75rem 1rem;
  border-right: 1px solid var(--border);
  min-width: 64px;
  flex-shrink: 0;
}

.sstat:last-child { border-right: none; }

.sstat-v {
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.sstat-l {
  font-size: .58rem;
  color: var(--muted);
  margin-top: .25rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.sstat-s { font-size: .65rem; color: var(--muted); margin-top: .15rem; }

.sstat.value-sstat { flex: 2; display: flex; align-items: center; gap: 1.25rem; }

/* ================= RARITY & FOIL BADGES ================= */

.rarity {
  display: inline-block;
  font-size: .88rem;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.mythic   { background: rgba(251,146,60,.12);  color: #fb923c; }
.rare     { background: rgba(245,200,66,.1);   color: #f5c842; }
.uncommon { background: rgba(148,163,184,.1);  color: #94a3b8; }
.common   { background: rgba(71,85,105,.15);   color: #64748b; }

/* ================= FORMAT TABS ================= */

.format-tabs { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: .85rem; border-bottom: 1px solid var(--border); }

.ftab {
  padding: .5rem 1.15rem;
  border-radius: 0;
  font-size: .82rem;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.ftab:hover  { color: var(--text); border-bottom-color: var(--border2); }
.ftab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ================= SEARCH ================= */

.search-wrap { position: relative; margin-bottom: .65rem; }

.search-inp {
  width: 100%;
  padding: .75rem 3.5rem .75rem .9rem;
  font-size: 1rem;
  font-weight: 500;
  background: var(--s2);
  border: 1.5px solid var(--border2);
  border-radius: var(--r);
  color: var(--text);
  transition: border-color .2s;
}

.search-inp::placeholder { color: var(--muted); }
.search-inp:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.08); }

.search-btn {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .4rem .9rem;
  background: var(--accent);
  color: #000;
  border-radius: var(--r-sm);
  font-size: .8rem;
  font-weight: 700;
  transition: all .15s;
}

.search-btn:hover { filter: brightness(1.1); }

.fuzzy-banner {
  font-size: .82rem;
  color: var(--accent);
  padding: .45rem .75rem;
  background: rgba(245,200,66,.08);
  border: 1px solid rgba(245,200,66,.2);
  border-radius: var(--r-sm);
  margin-bottom: .65rem;
}

.results-hdr {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}

.results-count { font-size: .82rem; color: var(--muted); }

/* ================= SEARCH HISTORY ================= */

.hist-wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .65rem;
  min-height: 1.5rem;
}

.hist-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }

.hist-chip {
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 500;
  background: var(--s2);
  border: 1px solid var(--border2);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}

.hist-chip:hover { border-color: var(--accent); color: var(--accent); }

.hist-clear {
  font-size: .65rem;
  color: var(--muted);
  padding: .18rem .5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  transition: all .15s;
}

.hist-clear:hover { color: var(--loss); border-color: var(--loss); }

/* ================= FILTER ROW ================= */

.filter-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}

.filter-row label { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.filter-row select,
.fbar select {
  background: var(--s2);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: .42rem .75rem;
  font-size: .85rem;
  min-height: 38px;
}

.filter-row select:focus,
.fbar select:focus { outline: none; border-color: var(--cyan); }

.filter-row select option,
.fbar select option { background: var(--s2); }

/* Fbar (filter bar) */
.fbar {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}

.fbar input[type=text],
.fbar select {
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: .35rem .65rem;
  font-size: .78rem;
}

.fbar input[type=text]:focus,
.fbar select:focus { outline: none; border-color: var(--cyan); }

/* ================= PAGINATION ================= */

.pagi { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin: .85rem 0; }
.pagi-wrap { margin: .85rem 0; }

.pgi {
  min-width: 30px;
  height: 30px;
  padding: 0 .45rem;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--s2);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  transition: all .15s;
  cursor: pointer;
}

.pgi.on { background: var(--accent); color: #000; border-color: var(--accent); }
.pgi:hover:not(.on):not(:disabled) { border-color: var(--text); color: var(--text); }
.pgi:disabled { opacity: .3; cursor: not-allowed; }

/* ================= LOADING / EMPTY ================= */

.empty-state { text-align: center; padding: 3.5rem 2rem; color: var(--muted); }
.empty-ico   { font-size: 2.5rem; margin-bottom: .65rem; }
.empty-state p { font-size: .83rem; line-height: 1.6; }
.empty       { color: var(--muted); font-size: .82rem; padding: 1.5rem; text-align: center; }

.live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gain);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.85); }
}

/* ================= CARD GRID SYSTEM (.s-card) ================= */
/* Shared across: MTG search, Pokémon search, collection, wishlist,
   top cards, weekly spikes, shop — TCGPlayer-matched sizing */

.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.search-grid.sz-md { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.search-grid.sz-lg { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.s-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.s-card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: var(--shadow); }
.s-card.foil  { border-color: rgba(245,200,66,.25); }

.s-img {
  aspect-ratio: 63/88;
  background: var(--s2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--dim);
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.s-img img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

/* Card info area */
.s-info      { padding: .55rem .65rem; display: flex; flex-direction: column; flex: 1; }
.s-name      { font-size: .95rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-variant   { color: var(--muted); font-weight: 400; font-size: .85rem; }
.s-set       { font-size: .95rem; color: var(--text); margin: .2rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-set-code  { font-family: 'Space Mono', monospace; font-size: .95rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.s-cn        { font-family: 'Space Mono', monospace; font-size: .95rem; font-weight: 600; color: var(--accent); }
.s-src-row   { display: flex; flex-wrap: wrap; align-items: center; gap: .28rem; margin: .3rem 0 .1rem; }
.s-src-lbl   { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.s-src       { font-size: .72rem; font-weight: 600; color: var(--text); background: var(--s2); border: 1px solid var(--border2); border-radius: 4px; padding: .1rem .4rem; white-space: nowrap; }
.s-lang-tag  { display: inline-block; font-size: .85rem; font-weight: 700; padding: .22rem .5rem; border-radius: 4px; letter-spacing: .04em; vertical-align: middle; border: 1px solid var(--border2); color: var(--text); line-height: 1; background: var(--s2); }

/* Price — hero element, largest text in card (TCGPlayer style ~20-24px) */
.s-price-row { display: flex; gap: .35rem; align-items: baseline; flex-wrap: wrap; margin-top: .35rem; }
.s-price     { font-family: 'Space Mono', monospace; font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.s-price.foil-p { color: var(--cyan); }
.s-price.na  { color: var(--muted); font-weight: 400; font-size: .92rem; }
.s-market-price { font-size: .78rem; color: var(--muted); font-weight: 500; margin-top: .15rem; }

/* Stock badge */
.s-stock-badge { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; font-weight: 700; padding: .35rem .65rem; border-radius: 6px; margin-top: .35rem; width: 100%; }
.s-weekly-sold { font-size: .65rem; color: var(--muted); margin-top: .1rem; }

/* Buttons */
.s-btn-group { margin-top: auto; padding-top: .45rem; display: flex; flex-direction: column; gap: .35rem; }
.s-row-btns  { display: flex; gap: .35rem; width: 100%; }
.s-wish-btn  { padding: .45rem .6rem; background: transparent; border: 1px solid var(--border2); border-radius: var(--r-sm); font-size: 1.1rem; font-weight: 700; color: var(--muted); transition: all .15s; font-family: 'Sora', sans-serif; flex: 1; text-align: center; min-height: 40px; }
.s-wish-btn:hover { border-color: var(--loss); color: var(--loss); }
.s-wish-btn.wished { border-color: rgba(248,81,73,.4); color: var(--loss); background: rgba(248,81,73,.08); }
.s-buy-btn   { padding: .55rem .8rem; background: var(--accent); border: none; border-radius: var(--r-sm); font-size: 1rem; font-weight: 700; color: #000; transition: all .15s; font-family: 'Sora', sans-serif; width: 100%; min-height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .4rem; box-shadow: 0 2px 8px rgba(245,200,66,.25); }
.s-buy-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 16px rgba(245,200,66,.35); transform: translateY(-1px); }

/* Buy dropdown menu */
.s-buy-wrap  { position: relative; flex: 1; display: flex; flex-direction: column; }
.s-buy-menu  { display: none; position: absolute; bottom: calc(100% + 6px); left: -20%; right: -20%; background: var(--s1); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: 0 -6px 24px rgba(0,0,0,.4); z-index: 10; overflow: hidden; min-width: 200px; }
.s-buy-menu.open { display: block; }
.s-buy-opt   { display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; font-size: .88rem; font-weight: 600; color: var(--text); cursor: pointer; transition: background .1s; font-family: 'Sora', sans-serif; border: none; background: none; width: 100%; text-align: left; flex-wrap: wrap; }
.s-buy-opt:hover { background: var(--s2); }
.s-buy-opt .opt-icon  { font-size: 1.05rem; flex-shrink: 0; }
.s-buy-opt .opt-label { flex: 1; }
.s-buy-opt .opt-desc  { width: 100%; font-size: .75rem; font-weight: 400; color: var(--muted); margin-left: 1.55rem; margin-top: -.15rem; }
.s-buy-opt .opt-tag   { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; }
.s-buy-opt .opt-tag.shop { background: rgba(63,185,80,.12); color: var(--gain); }
.s-buy-opt .opt-tag.wtb  { background: rgba(34,211,238,.12); color: var(--cyan); }
.s-buy-sep   { height: 1px; background: var(--border); margin: 0; }

/* ── Condition Guide Modal ── */
.cond-guide-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9998;display:none;align-items:center;justify-content:center;padding:1rem}
.cond-guide-bg.open{display:flex}
.cond-guide{background:var(--s1,#161b22);border:1px solid rgba(255,255,255,.1);border-radius:12px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;padding:0}
.cond-guide-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:var(--s1,#161b22);z-index:1}
.cond-guide-head h3{font-size:1.15rem;font-weight:700;color:#cdd9e5}
.cond-guide-close{width:36px;height:36px;border-radius:8px;border:none;background:none;color:#6e7f96;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cond-guide-close:hover{background:rgba(255,255,255,.06);color:#cdd9e5}
.cond-guide-body{padding:1rem 1.25rem 1.5rem}
.cond-row{display:flex;gap:.85rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.cond-row:last-child{border-bottom:none}
.cond-badge{width:48px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:800;flex-shrink:0}
.cond-badge-NM{background:rgba(63,185,80,.15);color:#3fb950}
.cond-badge-SP{background:rgba(245,200,66,.15);color:#f5c842}
.cond-badge-MP{background:rgba(249,115,22,.15);color:#f97316}
.cond-badge-HP{background:rgba(248,81,73,.15);color:#f85149}
.cond-badge-DMG{background:rgba(248,81,73,.25);color:#f85149}
.cond-info{flex:1;min-width:0}
.cond-name{font-size:1rem;font-weight:700;color:#cdd9e5;margin-bottom:.15rem}
.cond-desc{font-size:.88rem;color:#6e7f96;line-height:1.5}
.cond-link{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;font-weight:600;color:#22d3ee;cursor:pointer;border:none;background:none;padding:0;font-family:inherit;text-decoration:underline;text-decoration-style:dotted}

/* ── SiMANA Empty/Error State ── */
.mana-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.5rem;gap:.5rem}
.mana-empty img{width:100px;height:100px;object-fit:contain;opacity:.75;filter:drop-shadow(0 4px 12px rgba(245,200,66,.1))}
.mana-empty-title{font-size:1rem;font-weight:600;color:var(--text,#cdd9e5)}
.mana-empty-sub{font-size:.88rem;color:var(--muted,#6e7f96);line-height:1.5;max-width:360px}

/* "I have this" button + quantity */
.s-have-btn  { width: 100%; padding: .35rem .6rem; background: var(--s2); border: 1.5px solid var(--border2); border-radius: var(--r-sm); font-size: .78rem; font-weight: 700; color: var(--muted); cursor: pointer; min-height: 34px; font-family: 'Sora', sans-serif; transition: all .15s; }
.s-have-btn:hover { border-color: var(--gain); color: var(--gain); }
.s-qty-row   { width: 100%; display: flex; align-items: center; border-radius: var(--r-sm); overflow: hidden; border: 1.5px solid rgba(63,185,80,.5); background: rgba(63,185,80,.07); min-height: 34px; font-family: 'Sora', sans-serif; }
.s-qty-minus, .s-qty-plus { background: transparent; border: none; padding: 0 .7rem; font-size: 1.1rem; font-weight: 700; color: var(--muted); cursor: pointer; min-height: 34px; transition: color .12s; }
.s-qty-minus:hover { color: var(--loss); }
.s-qty-plus:hover  { color: var(--gain); }
.s-qty-lbl   { flex: 1; text-align: center; font-size: .78rem; font-weight: 700; color: var(--gain); border-left: 1px solid rgba(63,185,80,.25); border-right: 1px solid rgba(63,185,80,.25); min-height: 34px; display: flex; align-items: center; justify-content: center; }

/* Filter pills */
.lang-pills  { display: inline-flex; gap: .3rem; align-items: center; }
.lang-pill   { padding: .4rem .75rem; border-radius: 100px; font-size: .82rem; font-weight: 700; border: 1.5px solid var(--border2); color: var(--muted); transition: all .15s; cursor: pointer; letter-spacing: .02em; min-height: 36px; display: inline-flex; align-items: center; }
.foil-pill   { padding: .4rem .75rem; border-radius: 100px; font-size: .82rem; font-weight: 700; border: 1.5px solid var(--border2); color: var(--muted); transition: all .15s; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; }
.stock-pill  { padding: .45rem .9rem; border-radius: 100px; font-size: .88rem; font-weight: 700; border: 2px solid rgba(63,185,80,.3); color: var(--gain); transition: all .15s; cursor: pointer; background: rgba(63,185,80,.06); min-height: 38px; display: inline-flex; align-items: center; }

/* Recently viewed */
.rv-section  { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.rv-label    { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: .6rem; display: flex; align-items: center; justify-content: space-between; }
.rv-grid     { display: flex; gap: .4rem; flex-wrap: wrap; }
.rv-chip     { display: flex; align-items: center; gap: .35rem; background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .28rem .5rem .28rem .35rem; cursor: pointer; transition: border-color .15s; max-width: 160px; overflow: hidden; }
.rv-chip:hover { border-color: var(--accent); }
.rv-chip img { width: 20px; height: 28px; border-radius: 2px; object-fit: cover; flex-shrink: 0; background: var(--s2); }
.rv-chip-name { font-size: .72rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-chip-set  { font-size: .62rem; color: var(--muted); }
.rv-clear    { font-size: .65rem; color: var(--muted); cursor: pointer; border: none; background: none; font-family: inherit; }

/* SiMANA mascot float */
@keyframes _manaFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* Progress bar */
.mana-progress-bar  { width: 220px; height: 4px; background: var(--s2); border-radius: 100px; overflow: hidden; margin: .75rem auto 0; }
.mana-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); border-radius: 100px; animation: _manaProgress 15s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes _manaProgress { from { width: 0; } to { width: 95%; } }

/* Card grid responsive */
@media (max-width: 768px) {
  .search-grid { grid-template-columns: repeat(3, 1fr) !important; gap: .6rem; }
}
@media (max-width: 480px) {
  .search-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem; }
  .s-name  { font-size: .85rem; }
  .s-price { font-size: 1.1rem; }
}

/* ================= TOP CARDS RANK GRID ================= */

.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

.rank-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
}

.rank-card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: var(--shadow); }

.rank-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  z-index: 2;
  font-family: 'Space Mono', monospace;
}

.rk1 { background: #f5c842; color: #000; }
.rk2 { background: #94a3b8; color: #000; }
.rk3 { background: #c97c3e; color: #fff; }
.rkn { background: var(--s3); color: var(--muted); }

.rk-img {
  aspect-ratio: 63/88;
  background: var(--s2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--dim);
}

.rk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rk-info  { padding: .55rem .65rem; display: flex; flex-direction: column; flex: 1; }
.rk-name  { font-size: .95rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-set   { font-size: .82rem; color: var(--muted); margin-top: .12rem; }
.rk-price { font-family: 'Space Mono', monospace; font-size: 1.2rem; font-weight: 700; color: var(--accent); margin-top: .3rem; }
.rk-idr   { font-family: 'Space Mono', monospace; font-size: .78rem; color: var(--muted); margin-top: .05rem; }

/* ================= INDEX COMPACT TOP CARDS (.tc-*) ================= */

.tc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .8rem;
}

.tc-item {
  display: flex;
  gap: .6rem;
  padding: .55rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .15s;
}

.tc-item:hover { transform: translateY(-2px); border-color: var(--border2); }

.tc-img {
  width: 58px;
  aspect-ratio: 63/88;
  background: var(--s3);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.tc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tc-info  { flex: 1; min-width: 0; }
.tc-name  { font-size: .75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-price { font-family: 'Space Mono', monospace; font-size: .72rem; color: var(--accent); }

/* ================= POKÉMON CARDS (.p-card) ================= */

.p-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}

.p-card:hover { transform: translateY(-3px); border-color: var(--border2); box-shadow: var(--shadow); }

.p-img {
  aspect-ratio: 63/88;
  background: var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--dim);
  overflow: hidden;
}

.p-img img { width: 100%; height: 100%; object-fit: cover; }
.p-img img.loaded { display: block; }

.p-info   { padding: .45rem .55rem; }
.p-name   { font-size: .72rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-set    { font-size: .6rem; color: var(--muted); margin-top: .1rem; }
.p-num    { font-size: .6rem; color: var(--dim); }
.p-rarity { font-size: .6rem; color: var(--muted); margin-top: .08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-hp     { font-family: 'Space Mono', monospace; font-size: .65rem; color: var(--loss); font-weight: 700; }
.p-price  { font-family: 'Space Mono', monospace; font-size: .73rem; color: var(--accent); margin-top: .15rem; }
.p-price.na { color: var(--muted); }
.p-chips  { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; }
.p-chip   { font-size: .58rem; font-weight: 700; padding: .1rem .3rem; border-radius: 3px; text-transform: uppercase; }

/* Pokémon type colours */
.chip-type-fire       { background: rgba(239,68,68,.15);   color: #ef4444; }
.chip-type-water      { background: rgba(59,130,246,.15);  color: #3b82f6; }
.chip-type-grass      { background: rgba(34,197,94,.15);   color: #22c55e; }
.chip-type-lightning,
.chip-type-electric   { background: rgba(234,179,8,.15);   color: #eab308; }
.chip-type-psychic    { background: rgba(236,72,153,.15);  color: #ec4899; }
.chip-type-fighting   { background: rgba(234,88,12,.15);   color: #ea580c; }
.chip-type-darkness   { background: rgba(55,48,163,.15);   color: #818cf8; }
.chip-type-metal      { background: rgba(148,163,184,.15); color: #94a3b8; }
.chip-type-dragon     { background: rgba(99,102,241,.15);  color: #818cf8; }
.chip-type-fairy      { background: rgba(244,114,182,.15); color: #f472b6; }
.chip-type-colorless,
.chip-type-normal     { background: rgba(100,116,139,.15); color: #94a3b8; }
.chip-type-default    { background: var(--s3); color: var(--muted); }
.chip-super           { background: rgba(245,200,66,.12);  color: var(--accent); }

/* ================= WEEKLY SPIKES ================= */

.spikes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .85rem;
}

.spike-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.spike-card:hover  { transform: translateY(-3px); box-shadow: var(--shadow); }
.spike-card.gainer { border-color: rgba(63,185,80,.2); }
.spike-card.loser  { border-color: rgba(248,81,73,.2); }

.sp-img { aspect-ratio: 63/88; background: var(--s3); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--dim); }
.sp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sp-body   { padding: .6rem .7rem; }
.sp-name   { font-size: .75rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-set    { font-size: .62rem; color: var(--muted); margin-top: .1rem; }
.sp-prices { display: flex; gap: .4rem; align-items: center; margin-top: .4rem; flex-wrap: wrap; }
.sp-row    { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; margin-top: .15rem; }
.sp-row .lbl { color: var(--muted); }
.sp-row .val { font-family: 'Space Mono', monospace; }

.sp-delta       { font-family: 'Space Mono', monospace; font-size: .72rem; font-weight: 700; padding: .12rem .35rem; border-radius: 4px; }
.sp-delta.up    { background: rgba(63,185,80,.12); color: var(--gain); }
.sp-delta.down  { background: rgba(248,81,73,.12);  color: var(--loss); }

.summary-grid { display: flex; gap: .6rem; margin-bottom: .85rem; flex-wrap: wrap; }

.sum-box {
  flex: 1;
  min-width: 130px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .75rem 1rem;
}

.sum-box.gain  { border-color: rgba(63,185,80,.25); }
.sum-box.loss  { border-color: rgba(248,81,73,.25); }
.sum-box.gain .sum-v { color: var(--gain); }

.sum-v { font-family: 'Space Mono', monospace; font-size: 1.3rem; font-weight: 700; }
.sum-l { font-size: .65rem; color: var(--muted); margin-top: .2rem; text-transform: uppercase; letter-spacing: .06em; }

.set-tabs   { display: flex; gap: .35rem; flex-wrap: nowrap; overflow-x: auto; margin-bottom: .85rem; padding-bottom: .2rem; }
.set-scroll { display: flex; gap: .35rem; }
.set-scroll::-webkit-scrollbar { height: 3px; }

.stab {
  padding: .3rem .75rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  border: 1.5px solid var(--border2);
  background: transparent;
  color: var(--muted);
  transition: all .15s;
  white-space: nowrap;
  cursor: pointer;
}

.stab:hover  { border-color: var(--accent); color: var(--accent); }
.stab.active { background: var(--accent); border-color: var(--accent); color: #000; }

.section-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .45rem;
}

.no-data-msg { padding: 2rem; text-align: center; color: var(--muted); font-size: .82rem; }
.no-data-msg code { background: var(--s2); border: 1px solid var(--border2); padding: .1rem .4rem; border-radius: 4px; font-size: .78rem; }

/* ================= COMBO CODEX ================= */

.cc-hero {
  padding: 1.5rem 1.6rem;
  margin-bottom: 1rem;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--s2), var(--s1));
  border: 1px solid var(--border);
}

.cc-hero h1 { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.cc-hero p  { color: var(--muted); font-size: .82rem; margin-top: .2rem; }

.cc-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .85rem; }

.cc-search {
  flex: 1;
  min-width: 200px;
  padding: .55rem .85rem;
  background: var(--s2);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .82rem;
  transition: border-color .2s;
}

.cc-search::placeholder { color: var(--muted); }
.cc-search:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.08); }

.cc-select {
  padding: .52rem .75rem;
  background: var(--s2);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .8rem;
}

.cc-select option { background: var(--s2); }
.cc-select:focus  { outline: none; border-color: var(--cyan); }

.bracket-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .85rem; }

.b-tab { padding: .3rem .7rem; border-radius: 20px; font-size: .72rem; font-weight: 700; border: 1.5px solid var(--border2); background: transparent; color: var(--muted); transition: all .15s; cursor: pointer; }
.b-tab:hover  { border-color: var(--accent); color: var(--accent); }
.b-tab.active { background: var(--accent); border-color: var(--accent); color: #000; }

.b-badge { display: inline-block; font-size: .6rem; font-weight: 800; padding: .1rem .35rem; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.b-badge.b-casual,   .b-badge.b-Casual                    { background: rgba(148,163,184,.12); color: #94a3b8; }
.b-badge.b-staple,   .b-badge.b-Staple,
.b-badge.b-spicy,    .b-badge.b-Spicy                     { background: rgba(34,211,238,.12);  color: var(--cyan); }
.b-badge.b-powerful, .b-badge.b-Powerful,
.b-badge.b-precon,   .b-badge.b-Precon                    { background: rgba(245,200,66,.12);  color: var(--accent); }
.b-badge.b-ruthless, .b-badge.b-Ruthless                  { background: rgba(251,146,60,.12);  color: #fb923c; }
.b-badge.b-cedh,     .b-badge.b-cEDH,
.b-badge.b-banned,   .b-badge.b-Banned                    { background: rgba(248,81,73,.12);   color: var(--loss); }

.combo-row { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: .45rem; overflow: hidden; transition: border-color .15s; }
.combo-row:hover { border-color: var(--border2); }

.combo-row-inner { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem .9rem; cursor: pointer; }

.combo-art { width: 48px; aspect-ratio: 63/88; background: var(--s3); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.combo-art img { width: 100%; height: 100%; object-fit: cover; }
.combo-art img.loaded { display: block; }

.combo-meta   { flex: 1; min-width: 0; }
.combo-cards  { font-size: .75rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.combo-desc   { font-size: .7rem; color: var(--muted); line-height: 1.45; }
.combo-steps  { font-size: .65rem; color: var(--dim); margin-top: .25rem; }
.combo-content { padding: 0 .9rem .75rem; }

.combo-chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.combo-chip  { font-size: .65rem; font-weight: 600; padding: .12rem .4rem; border-radius: 4px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); cursor: pointer; transition: all .15s; }
.combo-chip:hover { border-color: var(--accent); color: var(--accent); }

.combo-badge       { display: inline-flex; align-items: center; gap: .25rem; font-size: .62rem; font-weight: 700; padding: .1rem .35rem; border-radius: 3px; }
.combo-count-badge { font-size: .68rem; font-weight: 700; padding: .12rem .4rem; border-radius: 4px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); }

.r-chip { font-size: .6rem; font-weight: 700; padding: .1rem .32rem; border-radius: 3px; text-transform: uppercase; }
.r-chip.result-infinite { background: rgba(245,200,66,.12); color: var(--accent); }
.r-chip.result-draw     { background: rgba(34,211,238,.12);  color: var(--cyan); }
.r-chip.result-damage   { background: rgba(248,81,73,.12);   color: var(--loss); }
.r-chip.result-mana     { background: rgba(63,185,80,.12);   color: var(--gain); }
.r-chip.result-token    { background: rgba(167,139,250,.12); color: var(--mtg); }

.inf-badge { font-size: .58rem; font-weight: 800; padding: .08rem .28rem; border-radius: 3px; background: rgba(245,200,66,.15); color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }

.toggle-btn { font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: var(--r-sm); background: var(--s2); border: 1px solid var(--border2); color: var(--muted); transition: all .15s; }
.toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

.steps-list { padding: .6rem .9rem; font-size: .73rem; color: var(--text); line-height: 1.6; background: var(--s2); border-top: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.steps-id-banner { font-size: .68rem; color: var(--muted); padding: .3rem .9rem; background: var(--s2); border-top: 1px solid var(--border); font-style: italic; }

.set-pills-wrap { overflow-x: auto; margin-bottom: .85rem; padding-bottom: .2rem; scrollbar-width: none; }
.set-pills-wrap::-webkit-scrollbar { }

.set-pill-row { display: flex; gap: .35rem; flex-wrap: nowrap; }
.set-pill-row::-webkit-scrollbar { }

.set-pills { display: flex; flex-wrap: wrap; gap: .35rem; padding-bottom: .2rem; }

.spill { padding: .28rem .65rem; border-radius: 20px; font-size: .7rem; font-weight: 600; border: 1.5px solid var(--border2); background: transparent; color: var(--muted); white-space: nowrap; cursor: pointer; transition: all .15s; }
.spill:hover  { border-color: var(--accent); color: var(--accent); }
.spill.active { background: var(--accent); border-color: var(--accent); color: #000; }

.c-chip { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .68rem; font-weight: 600; background: var(--s2); border: 1px solid var(--border2); color: var(--text); cursor: pointer; transition: all .15s; }
.c-chip:hover { border-color: var(--mtg); color: var(--mtg); }

/* Combo overlay panel */
.combo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
}

.combo-panel {
  width: min(480px, 100vw);
  height: 100vh;
  background: var(--s1);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s;
}

.combo-panel.open { transform: translateX(0); }

.combo-panel-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--s1);
  z-index: 2;
}

.combo-panel-header img { width: 40px; aspect-ratio: 63/88; border-radius: 4px; object-fit: cover; }

.combo-panel-title { font-size: .88rem; font-weight: 700; color: var(--text); }
.combo-panel-sub   { font-size: .68rem; color: var(--muted); margin-top: .1rem; }

.combo-close-btn { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.combo-close-btn:hover { color: var(--loss); border-color: var(--loss); }

.combo-list { padding: .6rem .75rem; }

.combo-item { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .65rem .75rem; margin-bottom: .45rem; transition: border-color .15s; }
.combo-item:hover { border-color: var(--border2); }

.combo-item-header { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; flex-wrap: wrap; }

.combo-filter-row { display: flex; gap: .35rem; flex-wrap: wrap; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
.combo-filter-btn { padding: .22rem .6rem; border-radius: 20px; font-size: .68rem; font-weight: 700; border: 1.5px solid var(--border2); background: transparent; color: var(--muted); transition: all .15s; cursor: pointer; }
.combo-filter-btn:hover  { border-color: var(--accent); color: var(--accent); }
.combo-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #000; }

.combo-load-more { display: block; width: 100%; padding: .5rem; text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); background: var(--s2); border: 1px solid var(--border2); border-radius: var(--r-sm); margin-top: .5rem; transition: all .15s; }
.combo-load-more:hover { border-color: var(--accent); color: var(--accent); }

.combo-loading { display: flex; align-items: center; gap: .5rem; padding: 1rem .75rem; color: var(--muted); font-size: .78rem; }
.combo-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border2); border-top-color: var(--cyan); animation: spin .7s linear infinite; }

/* Legacy .cp-* panel (mtg_card_search) */
.cp-header   { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--s1); z-index: 2; }
.cp-art      { width: 38px; aspect-ratio: 63/88; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.cp-title    { font-size: .85rem; font-weight: 700; }
.cp-sub      { font-size: .65rem; color: var(--muted); }
.cp-count    { font-size: .7rem; color: var(--muted); margin-left: auto; }
.cp-close    { width: 26px; height: 26px; border-radius: 6px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.cp-close:hover { color: var(--loss); border-color: var(--loss); }
.cp-filters  { display: flex; gap: .3rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.cp-filter-btn { padding: .2rem .55rem; border-radius: 20px; font-size: .67rem; font-weight: 700; border: 1.5px solid var(--border2); background: transparent; color: var(--muted); transition: all .15s; cursor: pointer; }
.cp-filter-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.cp-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #000; }
.cp-list     { padding: .5rem .65rem; }
.cp-combo    { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .6rem .7rem; margin-bottom: .4rem; }
.cp-combo-cards { font-size: .73rem; font-weight: 600; margin-bottom: .25rem; }
.cp-chips    { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .3rem; }
.cp-chip     { font-size: .62rem; font-weight: 600; padding: .1rem .32rem; border-radius: 3px; }
.cp-chip.rt  { background: rgba(34,211,238,.12);  color: var(--cyan); }
.cp-chip.rd  { background: rgba(63,185,80,.1);    color: var(--gain); }
.cp-chip.ri  { background: rgba(34,211,238,.1);   color: var(--cyan); }
.cp-chip.rm  { background: rgba(245,200,66,.1);   color: var(--accent); }
.cp-chip.rdmg{ background: rgba(248,81,73,.1);    color: var(--loss); }
.cp-badge    { font-size: .6rem; font-weight: 800; padding: .08rem .28rem; border-radius: 3px; text-transform: uppercase; }
.cp-steps    { padding: .5rem .65rem; border-top: 1px solid var(--border); font-size: .7rem; color: var(--muted); line-height: 1.5; }
.cp-step-btn { font-size: .68rem; padding: .25rem .6rem; border-radius: var(--r-sm); background: var(--s2); border: 1px solid var(--border2); color: var(--muted); transition: all .15s; }
.cp-step-btn:hover { border-color: var(--accent); color: var(--accent); }
.cp-load-more { display: block; width: 100%; padding: .45rem; text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--s2); border: 1px solid var(--border2); border-radius: var(--r-sm); margin-top: .4rem; transition: all .15s; }
.cp-load-more:hover { border-color: var(--accent); color: var(--accent); }
.cp-loading  { display: flex; align-items: center; gap: .4rem; padding: .75rem .65rem; color: var(--muted); font-size: .75rem; }

/* ================= MY COLLECTION ================= */

.portfolio-wrap   { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.25rem; margin-bottom: .85rem; }
.portfolio-val    { font-family: 'Space Mono', monospace; font-size: 2rem; font-weight: 700; color: var(--accent); }
.portfolio-label  { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .1rem; }
.portfolio-sub    { font-size: .72rem; color: var(--muted); margin-top: .2rem; }

/* .val-block/.val-main/.val-sub/.val-gain/.val-rate/.fvb* — defined in my_collection.html <style> */

.col-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: .65rem; flex-wrap: wrap; }
.col-name-input { flex: 1; min-width: 120px; background: transparent; border: none; color: var(--text); font-size: .85rem; font-weight: 700; }
.col-name-input:focus { outline: none; }
.col-sp { flex: 1; }

.col-select { background-color: var(--s2); border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--text); padding: .35rem .65rem; font-size: .78rem; }
.col-select:focus { outline: none; border-color: var(--cyan); }
[data-theme="light"] .col-select { background-color: var(--s1); }

.tcg-pill      { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px; border: 1.5px solid var(--border2); }
.tcg-pill.mtg  { color: var(--mtg); border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.tcg-pill.pkm  { color: var(--pkm); border-color: rgba(251,191,36,.3);  background: rgba(251,191,36,.07); }

.cpill        { display: inline-flex; background: var(--s2); border: 1px solid var(--border2); border-radius: 20px; padding: 2px; }
.cpill button { padding: .2rem .55rem; border-radius: 17px; font-size: .67rem; font-weight: 700; color: var(--muted); transition: all .18s; }
.cpill button.on { background: var(--accent); color: #000; }

.size-toggle { display: flex; gap: .3rem; align-items: center; }
.size-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); font-size: .75rem; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.size-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.size-btn:hover:not(.active) { color: var(--text); }

.view-tog { display: flex; gap: .3rem; }

.id-mode { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); padding: .85rem 1rem; margin-bottom: .65rem; }
.import-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin-top: .6rem; }

.ic { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; background: var(--s1); border: 1px solid var(--border2); border-radius: var(--r-sm); cursor: pointer; transition: all .15s; }
.ic:hover     { border-color: var(--cyan); background: var(--s3); }
.ic.exp       { border-color: rgba(63,185,80,.3); }
.ic.exp:hover { border-color: var(--gain); }
.ic-ico { font-size: 1.1rem; }
.ic-nm  { font-size: .77rem; font-weight: 600; }
.ic-sb  { font-size: .65rem; color: var(--muted); }

.file-bar      { display: none; align-items: center; gap: .5rem; padding: .45rem .7rem; background: var(--s2); border: 1px solid var(--border2); border-radius: var(--r-sm); margin-top: .5rem; font-size: .75rem; }
.file-bar.show { display: flex; }
.fb-name  { flex: 1; color: var(--text); font-weight: 500; }
.fb-rows  { color: var(--muted); font-size: .7rem; }
.fb-clear { color: var(--muted); transition: color .15s; }
.fb-clear:hover { color: var(--loss); }

.deck-input { width: 100%; min-height: 120px; background: var(--s2); border: 1.5px solid var(--border2); border-radius: var(--r-sm); color: var(--text); padding: .65rem .8rem; font-size: .8rem; resize: vertical; transition: border-color .2s; }
.deck-input:focus { outline: none; border-color: var(--cyan); }
.deck-summary { font-size: .75rem; color: var(--muted); margin-top: .4rem; }
.deck-sec-hdr { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .5rem 0 .25rem; }

.deck-row         { display: flex; align-items: center; gap: .5rem; padding: .3rem .1rem; font-size: .75rem; border-bottom: 1px solid var(--border); }
.deck-row.have    { color: var(--gain); }
.deck-row.miss    { color: var(--loss); }
.deck-row.partial { background: rgba(248,163,40,.08); }

/* .analytics-grid/.a-card/.a-title/.a-note/.donut-legend — defined in my_collection.html <style> */

.tbl-wrap { overflow-x: auto; margin-top: .5rem; }

table { width: 100%; border-collapse: collapse; font-size: .78rem; }
th    { text-align: left; padding: .4rem .6rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border2); white-space: nowrap; }
td    { padding: .38rem .6rem; border-bottom: 1px solid var(--border); color: var(--text); }
tr:hover td { background: var(--s2); }

.unit-price  { font-family: 'Space Mono', monospace; font-size: .78rem; color: var(--text); }
.total-price { font-family: 'Space Mono', monospace; font-size: .78rem; color: var(--accent); font-weight: 700; }
.purchase    { color: var(--cyan); }
.est         { color: var(--muted); }

/* .color-row/.color-btn — defined in my_collection.html <style> */

.refresh-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.refresh-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.refresh-btn:disabled { opacity: .4; cursor: not-allowed; }
.refresh-btn svg { width: 14px; height: 14px; transition: transform .5s; }
.refresh-btn.spinning svg { animation: spin .8s linear infinite; }

.icon-btn         { width: 28px; height: 28px; border-radius: 6px; background: var(--s2); border: 1px solid var(--border2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: .82rem; transition: all .15s; }
.icon-btn:hover         { color: var(--text); }
.icon-btn.danger:hover  { color: var(--loss); border-color: var(--loss); }
.icon-btn.primary:hover { color: var(--cyan); border-color: var(--cyan); }

.dlg    { background: var(--s1); border: 1px solid var(--border2); border-radius: var(--r); padding: 1.25rem 1.4rem; max-width: 400px; width: 100%; box-shadow: var(--shadow); }
.dlg h3 { font-size: .9rem; font-weight: 700; margin-bottom: .85rem; }

.dlg-btn        { padding: .42rem 1rem; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; border: 1px solid var(--border2); background: var(--s2); color: var(--text); transition: all .15s; }
.dlg-btn:hover  { border-color: var(--accent); color: var(--accent); }
.dlg-btn.cancel { color: var(--muted); }
.dlg-btn strong { display: block; margin-bottom: .15rem; }
.dlg-btn span   { font-size: .72rem; color: var(--muted); }

#newColModal,
#importModeDialog { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 400; align-items: center; justify-content: center; }
#newColModal.show,
#importModeDialog.show { display: flex; }

.modal-in { background: var(--s1); border: 1px solid var(--border2); border-radius: var(--r); padding: 1.4rem 1.5rem; min-width: 300px; max-width: 420px; width: 100%; box-shadow: var(--shadow); }
.modal-in h3 { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }

.modal-in input,
.modal-in select { width: 100%; padding: .5rem .75rem; background: var(--s2); border: 1.5px solid var(--border2); border-radius: var(--r-sm); color: var(--text); font-size: .82rem; margin-bottom: .6rem; transition: border-color .2s; }
.modal-in input:focus,
.modal-in select:focus { outline: none; border-color: var(--cyan); }

.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; }

/* ================= RESPONSIVE — MOBILE FIRST ================= */
/* Breakpoints: 430px (phone), 768px (tablet), 1024px (small desktop) */

/* ── Shared mobile utilities ── */
@media (max-width: 1024px) {
  .page { padding: 1rem 1rem; }
}

@media (max-width: 768px) {
  .page { padding: .85rem .85rem; }

  /* Nav: hide link groups, show hamburger */
  #navLinksLeft, #navLinksRight { display: none !important; }
  .nav-sep:not(:first-of-type) { }
  .nav-hamburger { display: flex !important; }

  /* Controls: compress pills */
  .nc-pill button { padding: .22rem .55rem; font-size: .78rem; }
  .nc-icon { width: 36px; height: 36px; font-size: 1rem; }
  .nav-icon-lg { width: 40px; height: 40px; }
  .nav-icon-lg svg { width: 20px; height: 20px; }

  /* Stats strip: wrap */
  .stats-strip { flex-wrap: wrap; }
  .sstat { min-width: 80px; border-right: none; border-bottom: 1px solid var(--border); }
  .sstat:last-child { border-bottom: none; }

  /* Format tabs: scroll */
  .format-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; }
  .format-tabs::-webkit-scrollbar { }

  /* Filter row: wrap */
  .filter-row { flex-wrap: wrap; gap: .4rem; }

  /* Card grid: 2 cols */
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .search-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .65rem; }

  /* Table: horizontal scroll */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Summary grid */
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .sum-box-dual { grid-column: span 2; }
}

@media (max-width: 480px) {
  .page { padding: .7rem .7rem; }
  .nav { padding: .5rem .85rem; gap: .35rem; }
  .nav-logo { font-size: .9rem; }

  /* Nav controls: minimal — hide currency pill, keep lang + hamburger */
  .nav-controls .nc-pill:first-child { } /* hide $ / Rp */
  .nc-icon#themeToggle { }

  /* Card grid: 2 cols tight */
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .search-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem; }

  /* Panels: full width */
  .combo-panel { width: 100% !important; }

  /* Filter row: 2-col grid */
  .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; align-items: center; }
  .filter-row label { font-size: .65rem; }
  .filter-row select { font-size: .72rem; }

  /* Stats strip: 2x2 */
  .stats-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .sstat { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .sstat:nth-child(2n) { border-right: none; }
  .sstat-v { font-size: .95rem; }

  /* Summary: 2 cols */
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .sum-box-dual { grid-column: span 2; }
  .sum-v { font-size: 1.1rem; }

  /* Pagi: compact */
  .pagi { gap: .2rem; flex-wrap: wrap; justify-content: center; }
  .pgi { min-width: 28px; height: 28px; font-size: .72rem; }

  /* History chips: scroll */
  .hist-wrap { overflow-x: auto; flex-wrap: nowrap; }
  .hist-wrap::-webkit-scrollbar { }

  /* Sort bar: wrap */
  .sort-bar { flex-wrap: wrap; gap: .35rem; }
  .sort-btn, .stab { padding: .28rem .65rem; font-size: .75rem; }

  /* Spikes grid */
  .spikes-grid, .spikes-grid.comfortable {
    grid-template-columns: 1fr !important;
  }
  .sp-img { width: 72px; }

  /* Search wrap: stack on very small */
  .search-wrap { flex-direction: column; gap: .4rem; }
  .search-wrap .search-btn { align-self: flex-end; }
  .search-wrap .inp-wrap { width: 100%; }
}

/* ── Portfolio / collection mobile ── */
@media (max-width: 768px) {
  .col-bar { gap: .35rem; }
  .view-tog { gap: .2rem; }
  .size-toggle { gap: .2rem; }
}

@media (max-width: 480px) {
  .portfolio-wrap { padding: .85rem .9rem; }
  .portfolio-val { font-size: 1.5rem; }
  .col-bar { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .cpill button { padding: .18rem .42rem; font-size: .62rem; }
}

/* ── Market / auction panels mobile ── */
@media (max-width: 768px) {
  .market-grid, .market-wrap { grid-template-columns: 1fr !important; }
  .market-stats-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .market-stats-row { grid-template-columns: 1fr 1fr; gap: 1px; }
  .mstat-v { font-size: .9rem; }
}