/* ============================================================
   Panini WC2026 Malta – Mobile-First Stylesheet
   ============================================================ */

:root {
  --bg:          #0f0f1a;
  --bg2:         #1a1a2e;
  --bg3:         #16213e;
  --card:        #1e1e35;
  --border:      #2a2a45;
  --accent:      #e63946;
  --accent2:     #ffd60a;
  --green:       #2ecc71;
  --blue:        #3498db;
  --text:        #f0f0f0;
  --text2:       #a0a0c0;
  --missing:     #3a1a1a;
  --owned:       #1a3a1a;
  --dup:         #1a2a3a;
  --special:     #2a2000;
  --radius:      12px;
  --radius-sm:   8px;
  --nav-h:       64px;
  --top-h:       52px;
  font-size:     16px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ── App shell ─────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

.top-bar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--top-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 100;
}
.top-bar-title { font-weight: 700; font-size: 1rem; }
.top-bar-logo  { font-size: 1.4rem; }

.main-content {
  flex: 1;
  padding: calc(var(--top-h) + 1rem) 1rem calc(var(--nav-h) + 1rem);
  overflow-y: auto;
}
.main-content.no-nav { padding: 0; }

/* ── Bottom nav ────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--nav-h);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text2);
  font-size: 0.65rem;
  transition: color 0.15s;
}
.nav-item.active, .nav-item:active { color: var(--accent); }
.nav-icon  { font-size: 1.3rem; }
.nav-label { font-weight: 600; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  transition: opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost   { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-danger  { background: #c0392b; color: #fff; }
.btn-full    { width: 100%; }
.btn-sm      { padding: .5rem 1rem; font-size: .85rem; }
.btn-lg      { font-size: 1.1rem; padding: 1rem 2rem; }

/* ── Badges ────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
}
.badge-green  { background: #1a3a1a; color: var(--green); }
.badge-grey   { background: var(--border); color: var(--text2); }
.badge-red    { background: #3a1010; color: #ff6b6b; }
.badge-blue   { background: #0a1a3a; color: var(--blue); }

/* ── Alerts ────────────────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: .9rem;
}
.alert-error   { background: #3a1010; color: #ff6b6b; border: 1px solid #5a1010; }
.alert-success { background: #0a2a0a; color: var(--green); }

/* ── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block;
  font-size: .85rem;
  color: var(--text2);
  margin-bottom: .4rem;
  font-weight: 600;
}
.form-group small { display: block; color: var(--text2); font-size: .75rem; margin-top: .3rem; }
.optional { color: var(--text2); font-weight: 400; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--accent); }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23a0a0c0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }

/* ── Landing ───────────────────────────────────────────── */
.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.25rem 2rem;
  background: linear-gradient(180deg, #0d1b3e 0%, var(--bg) 60%);
}
.landing-hero { text-align: center; margin-bottom: 2rem; padding-top: 1rem; }
.landing-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .8rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  letter-spacing: .05em;
}
.landing-title {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: .75rem;
  color: #fff;
}
.landing-sub { color: var(--text2); font-size: 1.05rem; line-height: 1.5; }

.landing-features { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.feature-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.feature-icon { font-size: 1.8rem; flex-shrink: 0; }
.feature-card strong { display: block; margin-bottom: .2rem; }
.feature-card p { color: var(--text2); font-size: .9rem; line-height: 1.4; }

.landing-cta { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.landing-install {
  text-align: center;
  font-size: .85rem;
  color: var(--text2);
  background: var(--card);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.landing-disclaimer {
  text-align: center;
  font-size: .75rem;
  color: var(--text2);
  line-height: 1.6;
}

/* ── Auth pages ────────────────────────────────────────── */
.auth-page {
  max-width: 400px;
  margin: 0 auto;
  padding: .5rem 0 2rem;
}
.auth-logo { font-size: 3rem; text-align: center; margin-bottom: .75rem; }
.auth-title { text-align: center; font-size: 1.4rem; font-weight: 800; margin-bottom: 1.5rem; }
.auth-form  { margin-bottom: 1rem; }
.auth-switch { text-align: center; font-size: .9rem; color: var(--text2); }
.auth-switch a { color: var(--accent); font-weight: 600; }
.safety-note { font-size: .8rem; color: var(--text2); margin: 1rem 0; text-align: center; line-height: 1.5; }
.disclaimer  { font-size: .75rem; color: #666; text-align: center; margin-top: .5rem; }

/* ── Dashboard ─────────────────────────────────────────── */
.dashboard { padding-bottom: 1rem; }
.dashboard-greeting { margin-bottom: 1.25rem; }
.dashboard-greeting h2 { font-size: 1.5rem; font-weight: 800; }
.dashboard-greeting p  { color: var(--text2); font-size: .9rem; }

.progress-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.progress-numbers {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
}
.prog-stat { text-align: center; }
.prog-num  { display: block; font-size: 1.8rem; font-weight: 900; line-height: 1; }
.prog-label{ color: var(--text2); font-size: .75rem; margin-top: .2rem; }
.prog-stat.highlight .prog-num { color: var(--accent2); }
.progress-bar-wrap { background: var(--border); border-radius: 8px; height: 8px; overflow: hidden; margin-bottom: .5rem; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 8px; transition: width .4s; }
.progress-sub { font-size: .8rem; color: var(--text2); text-align: center; }

.quick-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.quick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.quick-card span { font-size: 1.6rem; }
.quick-card strong { font-size: .95rem; }
.quick-card small { color: var(--text2); font-size: .8rem; }

.exchange-status-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.exc-status-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.exc-status-row strong { display: block; margin-bottom: .2rem; }
.exc-status-row p { font-size: .85rem; color: var(--text2); }
.exc-updated { font-size: .75rem; color: var(--text2); margin-top: .5rem; }

.toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 28px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
input:checked + .toggle-slider { background: var(--green); }
input:checked + .toggle-slider::before { transform: translateX(24px); }

.notification-banner {
  display: block;
  background: #1a2a0a;
  border: 1px solid #2a4a10;
  color: var(--green);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 1rem;
  text-align: center;
}
.logout-btn { margin-top: 1rem; color: var(--text2); }

/* ── Family members ─────────────────────────────────────── */
.member-banner {
  background: var(--accent2);
  color: #000;
  font-size: .8rem;
  padding: .4rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.member-back-btn {
  margin-left: auto;
  background: rgba(0,0,0,.15);
  border: none;
  border-radius: 4px;
  padding: .2rem .5rem;
  font-size: .75rem;
  cursor: pointer;
  font-weight: 600;
}

.family-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.family-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.family-list { display: flex; flex-direction: column; gap: .5rem; }
.family-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  background: var(--bg3);
  border-radius: var(--radius-sm);
}
.family-name  { font-weight: 700; font-size: .9rem; flex: 1; }
.family-area  { font-size: .75rem; color: var(--text2); }
.family-actions { display: flex; gap: .3rem; }
.family-empty { font-size: .85rem; color: var(--text2); margin: 0; }

/* ── Album ─────────────────────────────────────────────── */
.album-page { padding-bottom: 1rem; }
.album-summary { font-size: .85rem; color: var(--text2); margin-bottom: .5rem; text-align: right; }

/* ── Album filters ─────────────────────────────────────── */
.album-filters { margin-bottom: .75rem; }

.filter-search-wrap { margin-bottom: .5rem; }
.filter-search-wrap input {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .55rem .75rem;
  font-size: .9rem;
}
.filter-search-wrap input::placeholder { color: var(--text2); }

.filter-chips { display: flex; gap: .4rem; }
.fchip {
  flex: 1;
  padding: .4rem 0;
  border-radius: 20px;
  border: 1.5px solid #3a3a60;
  background: #1e1e35;
  color: #c0c0e0;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.fchip.active                        { background: var(--accent); border-color: var(--accent); color: #fff; }
.fchip[data-status="missing"].active { background: var(--accent); border-color: var(--accent); color: #fff; }
.fchip[data-status="have"].active    { background: var(--green);  border-color: var(--green);  color: #fff; }
.fchip[data-status="dup"].active     { background: var(--blue);   border-color: var(--blue);   color: #fff; }

.section-jump { margin-bottom: 1rem; }
.section-jump select {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .55rem .75rem;
  font-size: .9rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0a0c0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
}

.section-block { margin-bottom: 1.5rem; }
.section-title { font-size: 1rem; font-weight: 800; color: var(--accent2); margin-bottom: .75rem; }

.team-block { margin-bottom: 1rem; }
.team-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.team-flag { font-size: 1.2rem; }
.team-name { font-weight: 700; font-size: .9rem; flex: 1; }
.team-count { font-size: .75rem; color: var(--text2); }
.team-page  { font-size: .7rem; color: var(--text2); margin-right: .4rem; opacity: .6; }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
}
.sticker-cell {
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s;
}
.sticker-cell:active { transform: scale(.92); }
.sticker-cell.missing { background: var(--missing); border-color: #5a2020; }
.sticker-cell.owned   { background: var(--owned);   border-color: #2a5a2a; }
.sticker-cell.dup     { background: var(--dup);     border-color: #1a3a5a; }
.sticker-cell.special { border-color: var(--accent2) !important; }
.sticker-code { font-size: .6rem; color: var(--text2); font-weight: 600; line-height: 1; }
.sticker-qty  { font-size: .7rem; font-weight: 800; color: var(--text); margin-top: 2px; }
.sticker-cell.dup .sticker-qty { color: var(--blue); }
.sticker-cell.owned .sticker-qty { color: var(--green); }

/* ── Sticker drawer ────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }

.sticker-drawer {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  background: var(--bg2);
  border-radius: var(--radius) var(--radius) 0 0;
  border-top: 1px solid var(--border);
  z-index: 201;
  transition: transform .3s cubic-bezier(.32,0,.67,0);
  padding: 0 1.25rem 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
.sticker-drawer.open { transform: translateX(-50%) translateY(0); }
.drawer-handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin: 1rem auto .75rem;
}
.drawer-content { text-align: center; }
.drawer-badge {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.badge-missing { background: #3a1010; color: #ff6b6b; }
.badge-owned   { background: #0a2a0a; color: var(--green); }
.badge-dup     { background: #0a1a3a; color: var(--blue); }
#drawerCode    { font-size: 1.5rem; font-weight: 900; margin-bottom: .25rem; }
#drawerName    { color: var(--text2); font-size: .9rem; margin-bottom: 1.25rem; }

.qty-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: .75rem;
}
.qty-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.qty-btn:active { background: var(--border); }
.qty-display { font-size: 2.5rem; font-weight: 900; min-width: 3rem; text-align: center; }
.qty-hint { font-size: .8rem; color: var(--text2); margin-bottom: 1rem; }

/* ── Lists (Need / Dups) ───────────────────────────────── */
.list-page { padding-bottom: 1rem; }
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.list-header h2 { font-size: 1.3rem; font-weight: 800; }
.list-hint { font-size: .85rem; color: var(--text2); margin-bottom: 1rem; }

.list-group  { margin-bottom: 1.25rem; }
.list-group-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--text2);
  font-weight: 700;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.list-count {
  background: var(--border);
  color: var(--text2);
  font-size: .7rem;
  padding: .1rem .4rem;
  border-radius: 10px;
}

.code-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.code-chip {
  padding: .3rem .6rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.code-chip.missing { background: var(--missing); border: 1px solid #5a2020; }
.code-chip.dup     { background: var(--dup);     border: 1px solid #1a3a5a; }
.code-chip.special { border-color: var(--accent2) !important; }
.chip-star { color: var(--accent2); margin-left: 2px; }

.dups-list { display: flex; flex-direction: column; gap: .6rem; }
.dup-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
}
.special-row { border-color: var(--accent2); }
.dup-info { flex: 1; min-width: 0; }
.dup-code { display: block; font-weight: 800; font-size: .9rem; }
.dup-meta { display: flex; gap: .5rem; align-items: center; margin-top: .15rem; }
.dup-team { font-size: .75rem; color: var(--text2); }
.dup-name { font-size: .75rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dup-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.dup-extras { font-size: 1.1rem; font-weight: 900; color: var(--blue); }
.special-badge { color: var(--accent2); font-size: 1rem; }

/* ── Exchange ──────────────────────────────────────────── */
.exchange-page { padding-bottom: 1rem; }
.exchange-tabs {
  display: flex;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.tab {
  flex: 1;
  text-align: center;
  padding: .6rem .25rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text2);
  border-right: 1px solid var(--border);
}
.tab:last-child { border-right: none; }
.tab.active { background: var(--accent); color: #fff; }

.publish-prompt {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.publish-prompt p { font-size: .85rem; color: var(--text2); flex: 1; }

.match-list { display: flex; flex-direction: column; gap: .75rem; }
.match-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: block;
}
.match-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.match-name   { font-weight: 700; font-size: 1rem; }
.match-score  { background: var(--accent); color: #fff; font-size: .75rem; font-weight: 800; padding: .2rem .6rem; border-radius: 12px; }
.match-detail { display: flex; gap: 1rem; font-size: .8rem; color: var(--text2); margin-bottom: .35rem; flex-wrap: wrap; }
.match-freshness { font-size: .7rem; color: var(--text2); }

.browse-filters {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .5rem;
  margin-bottom: 1rem;
}
.browse-filters input,
.browse-filters select {
  padding: .65rem .75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9rem;
  width: 100%;
}

.browse-list   { display: flex; flex-direction: column; gap: .75rem; }
.browse-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: block;
}
.browse-name { font-weight: 700; margin-bottom: .35rem; }
.browse-meta { display: flex; gap: .75rem; font-size: .8rem; color: var(--text2); flex-wrap: wrap; margin-bottom: .3rem; }
.browse-note { font-size: .85rem; font-style: italic; color: var(--text2); margin-bottom: .3rem; }
.browse-updated { font-size: .7rem; color: var(--text2); }

.wanted-subtitle { font-size: .85rem; color: var(--text2); margin-bottom: 1rem; }
.wanted-list { display: flex; flex-direction: column; gap: .5rem; }
.wanted-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
}
.wanted-rank { font-size: .75rem; font-weight: 900; color: var(--text2); min-width: 1.5rem; }
.wanted-info { flex: 1; min-width: 0; }
.wanted-code { font-weight: 800; font-size: .9rem; display: block; }
.wanted-name { font-size: .75rem; color: var(--text2); }
.wanted-right { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.wanted-count { font-size: 1.2rem; font-weight: 900; }
.wanted-label { font-size: .7rem; color: var(--text2); }

/* Requests */
.requests-section { margin-bottom: 1.5rem; }
.requests-heading { font-size: 1rem; font-weight: 700; display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.request-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .6rem;
}
.req-from { font-size: .9rem; margin-bottom: .3rem; }
.req-message { font-size: .85rem; font-style: italic; color: var(--text2); margin-bottom: .3rem; }
.req-date    { font-size: .75rem; color: var(--text2); margin-bottom: .75rem; }
.req-actions { display: flex; gap: .5rem; }
.status-badge { display: inline-block; padding: .2rem .55rem; border-radius: 12px; font-size: .75rem; font-weight: 700; margin-bottom: .4rem; }
.status-pending   { background: #2a2000; color: var(--accent2); }
.status-accepted  { background: #0a2a0a; color: var(--green); }
.status-declined  { background: #2a1010; color: #ff6b6b; }
.status-completed { background: #0a1a3a; color: var(--blue); }
.status-cancelled { background: var(--border); color: var(--text2); }
.empty-inline { font-size: .85rem; color: var(--text2); padding: .5rem 0; }

/* ── Profile ───────────────────────────────────────────── */
.profile-page { padding-bottom: 1rem; }
.profile-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-avatar {
  width: 52px; height: 52px;
  background: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900;
  flex-shrink: 0;
}
.profile-header h2 { font-size: 1.3rem; font-weight: 800; }
.profile-header p  { font-size: .85rem; color: var(--text2); }
.profile-note { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .85rem; font-style: italic; color: var(--text2); margin-bottom: 1rem; }

.match-summary-card { text-align: center; padding: 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; }
.match-score-big { font-size: 3rem; font-weight: 900; color: var(--accent2); line-height: 1; }
.match-summary-card p { color: var(--text2); font-size: .9rem; margin-top: .25rem; }

.swap-section { margin-bottom: 1.25rem; }
.swap-section h3 { font-size: .95rem; font-weight: 700; margin-bottom: .25rem; }
.swap-hint { font-size: .8rem; color: var(--text2); margin-bottom: .5rem; }

.send-request-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.send-request-form h3 { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; }
.send-request-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .75rem;
  font-size: .9rem;
  resize: none;
  margin-bottom: .75rem;
}
.profile-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }

/* ── Empty state ───────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text2);
}
.empty-state span { font-size: 3rem; display: block; margin-bottom: .75rem; }
.empty-state p    { font-size: 1rem; margin-bottom: 1rem; }

/* ── Quick entry bar ───────────────────────────────────── */
.quick-entry-bar { margin-bottom: .75rem; display: flex; gap: .5rem; }
.quick-entry-bar input {
  flex: 1; background: var(--card); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: .6rem .85rem; font-size: 1rem; font-family: monospace;
  letter-spacing: .04em; transition: border-color .2s, box-shadow .2s, color .2s;
  outline: none;
}
.quick-entry-bar input:focus { border-color: var(--accent); }
.quick-entry-bar button {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: .6rem 1rem;
  font-size: .9rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
}

@keyframes qe-ok {
  0%   { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,204,113,.35); color: var(--green); }
  70%  { border-color: var(--green); box-shadow: 0 0 0 1px rgba(46,204,113,.1);  color: var(--green); }
  100% { border-color: var(--border); box-shadow: none; color: var(--text); }
}
@keyframes qe-err {
  0%,100% { transform: translateX(0);   border-color: var(--accent); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px);  }
  60%     { transform: translateX(-4px); border-color: var(--accent); }
  80%     { transform: translateX(4px);  }
}
.qe-ok  { animation: qe-ok  1s ease forwards; }
.qe-err { animation: qe-err .45s ease; border-color: var(--accent) !important; }

.quick-toast {
  position: fixed; top: calc(var(--top-h) + .5rem); left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: .45rem 1.1rem; font-size: .85rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 999; white-space: nowrap;
}
.quick-toast.show { opacity: 1; }
.quick-toast.ok   { border-color: var(--green); color: var(--green); }
.quick-toast.err  { border-color: var(--accent); color: var(--accent); }

/* ── Pack result ───────────────────────────────────────── */
.pack-result { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.pack-added  { display: flex; flex-direction: column; gap: .35rem; }
.pack-row    { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }

/* ── Activity feed ─────────────────────────────────────── */
.activity-feed { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.activity-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; padding: .25rem 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
.act-code  { font-family: monospace; font-weight: 700; color: var(--text); min-width: 68px; }
.act-name  { color: var(--text2); flex: 1; font-size: .78rem; }
.act-delta { font-weight: 700; min-width: 28px; text-align: right; }
.act-plus  { color: var(--green); }
.act-minus { color: var(--red); }
.act-time  { color: var(--text2); font-size: .72rem; min-width: 40px; text-align: right; }

/* ── Swap message thread ───────────────────────────────── */
.msg-thread { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; }
.msg-bubble {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .4rem .65rem; font-size: .82rem; color: var(--text); max-width: 90%;
  align-self: flex-start;
}
.msg-bubble.msg-mine { background: #1a2a4a; border-color: var(--accent); align-self: flex-end; }
.msg-who { font-weight: 700; font-size: .75rem; color: var(--text2); margin-right: .4rem; }
.msg-ts  { font-size: .7rem;  color: var(--text2); margin-left: .4rem; }
.msg-form { display: flex; gap: .4rem; margin-top: .5rem; }
.msg-form input { flex: 1; }

/* ── Stats page ────────────────────────────────────────── */
.stats-page { display: flex; flex-direction: column; gap: 1rem; }
.stats-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
}
.stats-section-title { font-size: .9rem; font-weight: 700; margin-bottom: .65rem; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.stats-big-pct { font-size: 3rem; font-weight: 900; text-align: center; color: var(--accent); line-height: 1; margin-bottom: .5rem; }
.stats-pct-bar { background: var(--border); border-radius: 4px; height: 8px; overflow: hidden; }
.stats-pct-fill { background: var(--accent); height: 100%; border-radius: 4px; transition: width .4s; }
.stats-row3 { display: flex; justify-content: space-around; margin-top: .75rem; }
.stats-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats-num { font-size: 1.4rem; font-weight: 700; }
.stats-lbl { font-size: .7rem; color: var(--text2); }
.stats-hint { font-size: .8rem; color: var(--text2); }
.stats-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.stats-group-pct { font-size: .85rem; font-weight: 700; color: var(--accent); }

/* Close teams */
.close-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.close-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.close-flag { font-size: 1.1rem; }
.close-name { flex: 1; font-weight: 600; }
.close-count { color: var(--text2); font-size: .8rem; }
.close-missing { font-size: .75rem !important; }

/* 7-day trend */
.trend-list { display: flex; flex-direction: column; gap: .4rem; }
.trend-row { display: flex; align-items: center; gap: .6rem; font-size: .8rem; }
.trend-day { min-width: 38px; color: var(--text2); }
.trend-bar-wrap { flex: 1; background: var(--border); border-radius: 3px; height: 10px; overflow: hidden; }
.trend-bar-fill { background: var(--green); height: 100%; border-radius: 3px; min-width: 2px; }
.trend-count { min-width: 28px; text-align: right; color: var(--green); font-weight: 700; }

/* Section/team stat rows */
.section-stat-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .82rem; }
.sec-name { min-width: 90px; color: var(--text); font-size: .8rem; }
.sec-bar-wrap { flex: 1; background: var(--border); border-radius: 3px; height: 8px; overflow: hidden; }
.sec-bar-fill { background: var(--blue); height: 100%; border-radius: 3px; }
.sec-pct { min-width: 40px; text-align: right; font-size: .78rem; color: var(--text2); }
.team-stat-row { display: flex; align-items: center; gap: .4rem; padding: .25rem 0; font-size: .8rem; border-bottom: 1px solid var(--border); }
.team-stat-row:last-child { border-bottom: none; }
.team-stat-row.team-done .team-stat-name { color: var(--green); }
.team-stat-flag { font-size: 1rem; min-width: 22px; }
.team-stat-name { min-width: 90px; font-size: .78rem; }
.team-stat-bar { flex: 1; background: var(--border); border-radius: 3px; height: 6px; overflow: hidden; }
.team-stat-fill { background: var(--green); height: 100%; border-radius: 3px; }
.team-stat-pct { min-width: 38px; text-align: right; font-size: .72rem; color: var(--text2); }

/* ── Trades page ───────────────────────────────────────── */
.trades-list { display: flex; flex-direction: column; gap: .75rem; }
.trade-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; }
.trade-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.trade-partner { font-size: .88rem; }
.trade-date { font-size: .75rem; color: var(--text2); }
.trade-stickers { display: flex; flex-direction: column; gap: .5rem; }
.trade-side {}
.trade-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: .25rem; }
.trade-gave { color: var(--accent); }
.trade-received { color: var(--green); }
.trade-codes { display: flex; flex-wrap: wrap; gap: .3rem; }
.trade-code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .15rem .4rem; font-size: .75rem; font-family: monospace; }

/* ── Share / Progress card ─────────────────────────────── */
.share-page { display: flex; flex-direction: column; }
.share-card {
  background: linear-gradient(135deg, #1e1e35 0%, #16213e 100%);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.share-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.share-icon { font-size: 2rem; }
.share-username { font-size: 1.1rem; font-weight: 700; }
.share-loc { font-size: .8rem; color: var(--text2); margin-top: .1rem; }
.share-pct-big { font-size: 3.5rem; font-weight: 900; text-align: center; color: var(--accent); line-height: 1; }
.share-pct-sub { text-align: center; color: var(--text2); font-size: .85rem; margin-top: .2rem; }
.share-missing-label { font-size: .78rem; color: var(--text2); margin-bottom: .4rem; margin-top: .5rem; }
.share-missing-codes { display: flex; flex-wrap: wrap; gap: .3rem; }
.share-code { background: var(--missing); border: 1px solid #6a1a1a; color: #ff9999; border-radius: 4px; padding: .15rem .4rem; font-size: .72rem; font-family: monospace; }
.share-code-more { color: var(--text2); font-size: .72rem; align-self: center; }
.share-complete { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--accent2); padding: .5rem; }
.share-footer { text-align: center; font-size: .7rem; color: var(--text2); margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .5rem; }

/* ── Collectors map ────────────────────────────────────── */
.area-list { display: flex; flex-direction: column; gap: .65rem; }
.area-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; }
.area-card.area-mine { border-color: var(--accent); }
.area-name { font-size: .92rem; font-weight: 700; margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem; }
.area-you-badge { font-size: .65rem; background: var(--accent); color: #fff; border-radius: 10px; padding: .1rem .4rem; font-weight: 600; }
.area-counts { display: flex; gap: 1rem; font-size: .82rem; color: var(--text2); }
.area-stat strong { color: var(--text); }
.area-swap strong { color: var(--green); }

/* ── Swap terms (dups) ─────────────────────────────────── */
.terms-badge { display: inline-block; font-size: .72rem; background: #1a2a3a; border: 1px solid var(--blue); color: var(--blue); border-radius: 4px; padding: .1rem .35rem; margin-top: .2rem; }
.terms-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem; margin-bottom: .3rem; }
.terms-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.terms-select { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .5rem; color: var(--text); font-size: .82rem; }
.terms-price { width: 80px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .5rem; color: var(--text); font-size: .82rem; }

/* ── Nav badge ─────────────────────────────────────────── */
.nav-icon-wrap { position: relative; display: inline-flex; justify-content: center; }
.nav-badge {
  position: absolute; top: -4px; right: -8px;
  background: var(--accent); color: #fff;
  font-size: .6rem; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none;
}
.qcard-notify { border-color: var(--accent) !important; }

/* ── DM inbox ──────────────────────────────────────────── */
.dm-list { display: flex; flex-direction: column; gap: 0; }
.dm-conv-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem .5rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.dm-conv-row:hover { background: var(--card); }
.dm-conv-row.dm-unread { background: #1a1a2e; }
.dm-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.dm-conv-info { flex: 1; min-width: 0; }
.dm-conv-name { font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: .4rem; }
.dm-unread-dot {
  background: var(--accent); color: #fff;
  font-size: .65rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
}
.dm-snippet { font-size: .78rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-conv-time { font-size: .72rem; color: var(--text2); flex-shrink: 0; }
.dm-empty { color: var(--text2); font-size: .88rem; text-align: center; padding: 2rem 0; }

/* ── DM thread ─────────────────────────────────────────── */
.dm-thread-page {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--top-h) - var(--nav-h));
}
.dm-thread-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0; font-size: .8rem; color: var(--text2); flex-shrink: 0;
}
.dm-back, .dm-profile-link { color: var(--blue); }
.dm-thread {
  flex: 1; overflow-y: auto; padding: .5rem 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.dm-bubble {
  max-width: 80%; align-self: flex-start;
}
.dm-bubble.dm-mine { align-self: flex-end; }
.dm-bubble-body {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  padding: .5rem .75rem; font-size: .88rem; word-break: break-word;
}
.dm-bubble.dm-mine .dm-bubble-body {
  background: #1a2a4a; border-color: var(--blue);
  border-radius: 12px 12px 4px 12px;
}
.dm-bubble-time { font-size: .68rem; color: var(--text2); margin-top: 2px; padding: 0 .25rem; }
.dm-bubble.dm-mine .dm-bubble-time { text-align: right; }
.dm-compose {
  display: flex; gap: .5rem; padding: .65rem 0; flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.dm-compose input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .5rem .75rem;
  color: var(--text); font-size: .9rem;
}

/* ── Fast Add ──────────────────────────────────────────── */
.fast-add-page { display: flex; flex-direction: column; gap: .75rem; }

.fast-team-select select {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .7rem .85rem; font-size: 1rem;
}

.fast-team-header {
  display: flex; align-items: center; justify-content: space-between; margin-top: .25rem;
}
.fast-team-label { font-size: 1rem; font-weight: 700; }
.fast-owned-count { font-size: .8rem; color: var(--text2); }
.fast-owned-count-done { color: var(--green); font-weight: 700; }

.fast-controls { display: flex; gap: .5rem; }

.fast-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .45rem;
}

.fast-tile {
  aspect-ratio: 1;
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
.fast-tile:active { transform: scale(.93); }
.fast-tile-label { font-size: clamp(.6rem, 3.5vw, 1.05rem); line-height: 1; text-align: center; padding: 2px; word-break: break-all; }

.fast-tile.fast-special {
  border-color: var(--accent2); color: var(--accent2);
}

.fast-tile.fast-selected {
  background: var(--owned); border-color: var(--green); color: var(--green);
}
.fast-tile.fast-selected.fast-special {
  border-color: var(--green);
}

.fast-tile.fast-owned {
  background: #1a3a1a; border-color: var(--green);
  color: var(--green); cursor: default; opacity: .65;
}
.fast-tile.fast-owned::after {
  content: '✓'; position: absolute; font-size: .6rem; bottom: 2px; right: 3px;
}
.fast-tile.fast-owned { position: relative; }

.fast-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 0;
}
.fast-sel-count { font-size: .85rem; color: var(--text2); }
.fast-submit-btn { min-width: 140px; }

.fast-feedback {
  text-align: center; padding: .65rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .9rem;
}
.fast-fb-ok  { background: var(--owned); color: var(--green); border: 1px solid var(--green); }
.fast-fb-err { background: var(--missing); color: var(--accent); border: 1px solid var(--accent); }

/* ── Donate card ───────────────────────────────────────── */
.donate-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; display: flex;
  flex-direction: column; gap: .75rem;
}
.donate-text { display: flex; align-items: flex-start; gap: .75rem; }
.donate-icon { font-size: 1.6rem; flex-shrink: 0; }
.donate-text p { font-size: .82rem; color: var(--text2); margin-top: .15rem; }
.donate-btn { background: #0075eb; }
.donate-btn:hover { background: #005bbf; }

/* ── Page Finder ───────────────────────────────────────── */
.pf-page { display: flex; flex-direction: column; gap: .75rem; }

.pf-search-wrap input {
  width: 100%; background: var(--card); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: .75rem 1rem; font-size: 1rem;
  transition: border-color .15s;
}
.pf-search-wrap input:focus { border-color: var(--accent); outline: none; }

/* Big result display */
.pf-result {
  background: var(--card); border: 2px solid var(--accent);
  border-radius: var(--radius); padding: 2rem 1rem;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.pf-result-flag  { font-size: 3rem; line-height: 1; }
.pf-result-name  { font-size: 1rem; font-weight: 700; margin-top: .4rem; color: var(--text2); }
.pf-result-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text2); margin-top: 1rem; }
.pf-result-page  {
  font-size: 5rem; font-weight: 900; line-height: 1;
  color: var(--accent); letter-spacing: -.02em;
}

/* Filter list */
.pf-list { display: flex; flex-direction: column; }
.pf-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .25rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.pf-row:hover, .pf-row:active { background: var(--card); border-radius: var(--radius-sm); }
.pf-row-flag { font-size: 1.3rem; min-width: 28px; text-align: center; }
.pf-row-abbr { font-family: monospace; font-weight: 700; font-size: .8rem; color: var(--text2); min-width: 38px; }
.pf-row-name { flex: 1; font-size: .92rem; }
.pf-row-page { font-size: 1rem; font-weight: 700; color: var(--accent); min-width: 50px; text-align: right; }
.pf-empty    { text-align: center; color: var(--text2); padding: 2rem 0; }