:root {
    --navy: #123F8C;
    --navy-dark: #0F326F;
    --baby-blue: #0283e6;
    --yellow: #FFD43B;
    --red: #02132f;
    --red-dark: #0F326F;
    --red-bright: #0283e6;
    --red-glow: rgba(1, 18, 48, 0.4);
    --bg: #2d7abf;
    --surface: rgba(15, 50, 111, 0.85);
    --surface2: rgba(15, 50, 111, 0.6);
    --surface3: rgba(15, 50, 111, 0.7);
    --border: rgba(18,63,140,0.2);
    --text: #ffffff;
    --text-muted: rgba(255,255,255,0.75);
    --text-dim: rgba(255,255,255,0.5);
    --radius: 22px;
    --radius-sm: 16px;
    --radius-xs: 12px;
    --nav-height: 64px;
    --header-height: 52px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
  }

  body {
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
  }

  /* ── WATERMARK ── */
  body::before {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; height: 80vw;
    max-width: 400px;
    background: url('https://i.imgur.com/VSO1LXD.png') center/contain no-repeat;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
  }

  /* ── HEADER ── */
  .app-header {
    height: var(--header-height);
    background: #0F326F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(255, 212, 59, 0.5);
    position: relative;
    z-index: 100;
  }
  .header-left { display: flex; align-items: center; gap: 8px; }
  .header-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
  .header-title { font-family: 'Boogaloo', cursive; font-size: 20px; letter-spacing: 2px; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
  .header-greeting { font-size: 11px; color: rgba(255,255,255,0.7); font-family: 'DM Sans', sans-serif; }
  .header-right { display: flex; gap: 8px; align-items: center; }
  .header-icon-btn {
    background: rgba(2, 0, 21, 0.25);
    border: none;
    color: white;
    width: 34px; height: 34px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .notif-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #f5f507;
    color: white;
    font-size: 9px;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Russo One', sans-serif;
  }

  /* ── SCREENS ── */
  .screens-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .screen {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    padding-bottom: calc(var(--nav-height) + 16px);
  }
  .screen.active { display: block; }

  /* ── BOTTOM NAV ── */
  .bottom-nav {
    height: var(--nav-height);
    background: rgba(15, 50, 111, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(15, 50, 111, .075);
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(255,212,59,1);
  }
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 0;
    border: none;
    background: none;
    color: var(--text-dim);
    position: relative;
  }
  .nav-item.active { color: #fbff00; }
  .nav-item svg { transition: all 0.2s; }
  .nav-item.active svg { filter: drop-shadow(0 0 6px rgba(255, 212, 59, 0.6)); }
  .nav-item .nav-label { font-size: 9px; font-family: 'Russo One', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; }
  .nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 2px;
    background: var(--red);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 8px var(--red);
  }
  /* Center scan button */
  .nav-item.center-btn {
    position: relative;
    margin-top: -18px;
  }
  .nav-item.center-btn .nav-icon-wrap {
    width: 52px; height: 52px;
    background: #029bf3;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(255, 212, 59,0.5);
    border: 2px solid rgba(247, 235, 3, 0.5);
    transition: all 0.2s;
  }
  .nav-item.center-btn.active .nav-icon-wrap {
    box-shadow: 0 4px 24px rgba(251, 247, 0, 0.8);
    transform: scale(1.05);
  }

  /* ── LOGIN ── */
  .su-label { font-size:10px;color:var(--red);font-family:'Russo One',sans-serif;letter-spacing:1px;margin-bottom:5px;text-transform:uppercase; }
  #loginScreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 14px;
  }
  #loginScreen[style*="display: none"],
  #loginScreen[style*="display:none"] {
    pointer-events: none !important;
  }
  .login-logo { width: 110px; height: 110px; border-radius: 24px; object-fit: cover; filter: drop-shadow(0 0 24px var(--red-glow)); margin-bottom: 4px; }
  .login-title { font-family: 'Boogaloo', cursive; font-size: 32px; color: var(--red); text-shadow: 0 0 12px var(--red-glow); letter-spacing: 3px; }
  .login-sub { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 4px; }
  .input-field {
    width: 100%; padding: 13px 16px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none;
  }
  .input-field:focus { border-color: var(--red); }
  .btn-primary {
    width: 100%; padding: 14px; background: var(--red); color: white;
    border: none; border-radius: var(--radius-sm);
    font-family: 'Russo One', sans-serif; font-size: 15px; cursor: pointer; letter-spacing: 1px;
  }
  .btn-secondary {
    width: 100%; padding: 12px; background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: 'Russo One', sans-serif; font-size: 13px; cursor: pointer;
  }

  /* ── PRICE GUIDE ── */
  .price-guide { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; margin-bottom:14px; }
  .price-guide-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
  .price-guide-title { font-family:'Russo One',sans-serif; font-size:12px; color:var(--text); letter-spacing:0.5px; }
  .price-avg { font-family:'Boogaloo',cursive; font-size:22px; color:var(--red); }
  .price-row { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--border); }
  .price-row:last-child { border:none; }
  .price-source { font-size:9px; font-family:'Russo One',sans-serif; letter-spacing:1px; color:var(--text-dim); min-width:50px; }
  .price-amount { font-size:14px; font-weight:700; color:var(--text); }
  .price-condition { font-size:10px; color:var(--text-muted); flex:1; }
  .price-date { font-size:10px; color:var(--text-dim); }
  .price-ebay { color:#0096ff; }
  .price-community { color:#00cc66; }
  .price-loading { padding:14px; text-align:center; font-size:12px; color:var(--text-muted); }

  /* ── PRICE GUIDE ── */
  .price-guide-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-top:12px; }
  .price-guide-title { font-family:'Boogaloo',cursive; font-size:18px; color:var(--red); letter-spacing:1px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
  .price-avg { font-family:'Boogaloo',cursive; font-size:28px; color:var(--red); text-align:center; margin:10px 0; }
  .price-avg span { font-size:13px; color:var(--text-muted); font-family:'DM Sans',sans-serif; display:block; margin-top:2px; }
  .sold-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
  .sold-item:last-child { border:none; }
  .sold-price { font-family:'Russo One',sans-serif; font-size:14px; color:var(--red); }
  .sold-meta { font-size:11px; color:var(--text-muted); text-align:right; }
  .sold-source { font-size:9px; padding:2px 6px; border-radius:10px; font-family:'Russo One',sans-serif; }
  .sold-source.ebay { background:rgba(0,150,255,0.15); color:#0096ff; border:1px solid rgba(0,150,255,0.3); }
  .sold-source.community { background:rgba(0,204,102,0.15); color:#00cc66; border:1px solid rgba(0,204,102,0.3); }
  .price-submit-form { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }

  /* ── SOCIAL FEED ── */
  .feed-post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    animation: fadeUp 0.3s ease both;
  }
  .feed-post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .feed-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
  .feed-user { font-family: 'Russo One', sans-serif; font-size: 13px; }
  .feed-time { font-size: 10px; color: var(--text-dim); }
  .feed-type-badge { font-size: 9px; background: rgba(204,0,0,0.15); color: var(--red); border: 1px solid rgba(204,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-family: 'Russo One', sans-serif; margin-left: auto; }
  .feed-text { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
  .feed-img { width: 100%; border-radius: 10px; max-height: 300px; object-fit: cover; margin-bottom: 10px; }
  .feed-actions { display: flex; gap: 16px; padding-top: 8px; border-top: 1px solid var(--border); }
  .feed-action-btn { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: 'DM Sans', sans-serif; padding: 4px 0; }
  .feed-action-btn.liked { color: #ff4444; }
  .feed-comments { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
  .feed-comment { font-size: 12px; color: var(--text-muted); padding: 4px 0; }
  .feed-comment span { color: var(--red); font-weight: 600; }

  /* ── HOME GRID ── */
  .home-grid-card {
    background: linear-gradient(160deg, rgba(20,45,90,0.95) 0%, rgba(10,25,58,0.98) 100%);
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 10px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Embossed gold border — inner highlight + outer glow */
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 12px rgba(255,212,59,0.18),
      inset 0 1px 0 rgba(255,220,80,0.15),
      inset 0 -1px 0 rgba(100,70,0,0.3);
  }
  .home-grid-card:active {
    transform: scale(0.98);
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 20px rgba(255,212,59,0.35),
      inset 0 1px 0 rgba(255,220,80,0.2);
  }
  .hgc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .hgc-title { font-family: 'Russo One', sans-serif; font-size: 11px; color: var(--text); letter-spacing: 0.5px; }
  .hgc-count { font-family: 'Boogaloo', cursive; font-size: 18px; color: var(--red); }
  .hgc-content { flex: 1; overflow: hidden; }
  .hgc-empty { font-size: 11px; color: var(--text-dim); text-align: center; padding: 16px 0; }
  .hgc-item { font-size: 11px; color: var(--text-muted); padding: 3px 0; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hgc-item:last-child { border: none; }
  .hgc-alert { font-size: 11px; color: var(--text); padding: 3px 0; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hgc-alert.unread { color: var(--red); }

  /* ── HOME SCREEN ── */
  .home-section { padding: 12px 12px 0; }
  .section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .section-title {
    font-family: 'Boogaloo', cursive; font-size: 20px; color: var(--red);
    letter-spacing: 1px; text-shadow: 0 0 8px var(--red-glow);
  }
  .section-count {
    font-size: 11px; background: rgba(204,0,0,0.1);
    border: 1px solid rgba(204,0,0,0.2); padding: 3px 10px;
    border-radius: 20px; color: var(--red); font-family: 'Russo One', sans-serif;
  }
  .home-card {
    background: linear-gradient(160deg, rgba(20,45,90,0.95) 0%, rgba(10,25,58,0.98) 100%);
    border-radius: var(--radius); padding: 12px; margin-bottom: 8px;
    display: flex; gap: 12px; align-items: center;
    cursor: pointer; transition: box-shadow 0.2s, transform 0.15s;
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 10px rgba(255,212,59,0.15),
      inset 0 1px 0 rgba(255,220,80,0.12),
      inset 0 -1px 0 rgba(100,70,0,0.25);
  }
  .home-card:active {
    transform: scale(0.98);
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 18px rgba(255,212,59,0.3);
  }
  .home-card-img {
    width: 56px; height: 56px; border-radius: 10px;
    object-fit: contain; background: var(--surface2); flex-shrink: 0; padding: 4px;
  }
  .home-card-placeholder {
    width: 56px; height: 56px; border-radius: 10px;
    background: var(--surface2); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: 0.4;
  }
  .home-card-info { flex: 1; min-width: 0; }
  .home-card-title { font-family: 'Russo One', sans-serif; font-size: 13px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-card-sub { font-size: 11px; color: var(--text-muted); }
  .home-card-meta { font-size: 11px; color: var(--red); margin-top: 2px; }

  /* ── REUSABLE GOLD EMBOSS BORDER ── */
  .gold-card {
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 12px rgba(255,212,59,0.15),
      inset 0 1px 0 rgba(255,220,80,0.12);
    background: linear-gradient(160deg, rgba(20,45,90,0.95), rgba(10,25,58,0.98));
  }

  /* ── MARKETPLACE CARDS ── */
  .mkt-card {
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 10px rgba(255,212,59,0.12) !important;
    background: linear-gradient(160deg, rgba(20,45,90,0.95), rgba(10,25,58,0.98)) !important;
    border: none !important;
    transition: box-shadow 0.2s, transform 0.15s !important;
  }
  .mkt-card:active {
    transform: scale(0.98) !important;
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 20px rgba(255,212,59,0.28) !important;
  }

  /* ── DATABASE CARDS ── */
  .card-wrap .card-inner {
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 10px rgba(255,212,59,0.12);
    border: none !important;
    transition: box-shadow 0.2s, transform 0.15s;
  }
  .card-wrap:active .card-inner {
    transform: scale(0.98);
    box-shadow:
      0 0 0 1.5px #b8860b,
      0 0 0 2.5px #FFD43B,
      0 0 0 3.5px #8B6914,
      0 0 20px rgba(255,212,59,0.28);
  }
  /* Owned cards get green border override */
  .card-owned .card-inner {
    box-shadow:
      0 0 0 1.5px #007a3d,
      0 0 0 2.5px #00cc66,
      0 0 0 3.5px #004d26,
      0 0 12px rgba(0,204,102,0.2) !important;
    border: none !important;
  }

  /* Upcoming date badge */
  .date-badge {
    background: var(--red); color: white; border-radius: 10px;
    padding: 4px 10px; text-align: center; flex-shrink: 0; min-width: 44px;
  }
  .date-badge .day { font-family: 'Boogaloo', cursive; font-size: 20px; line-height: 1; }
  .date-badge .month { font-size: 9px; font-family: 'Russo One', sans-serif; letter-spacing: 1px; }

  /* Alert card */
  .alert-card {
    background: var(--surface); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 8px; font-size: 13px;
    transition: all 0.3s ease; overflow: hidden;
  }
  .alert-card.unread { border-left: 3px solid var(--red); background: rgba(204,0,0,0.05); }
  .alert-card.read { border-left: 3px solid var(--surface3); opacity: 0.7; }
  .alert-card .alert-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
  .alert-card .alert-time { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

  /* Stats row */
  .stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin: 12px 12px 0;
  }
  .stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px; text-align: center;
  }
  .stat-num { font-family: 'Boogaloo', cursive; font-size: 28px; color: var(--red); line-height: 1; }
  .stat-label { font-size: 10px; color: var(--text-muted); font-family: 'Russo One', sans-serif; letter-spacing: 0.5px; margin-top: 2px; }

  /* ── DATABASE SCREEN ── */
  .search-bar-wrap {
    padding: 12px 12px 0;
    position: sticky; top: 0; background: var(--bg); z-index: 10; padding-bottom: 8px;
  }
  .search-wrap { position: relative; }
  .search-icon-pos { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: 0.5; }
  .search-input {
    width: 100%; padding: 10px 14px 10px 36px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 25px; color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none;
  }
  .search-input:focus { border-color: var(--red); }

  .filter-toggle-btn {
    width: 100%; margin-top: 8px;
    background: rgba(204,0,0,0.08); border: 1px solid rgba(204,0,0,0.2);
    border-radius: var(--radius-sm); padding: 8px 14px; color: var(--red);
    font-family: 'Russo One', sans-serif; font-size: 12px; letter-spacing: 1px;
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  }
  .filter-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .filter-body.open { max-height: 400px; }
  .filter-inner {
    background: var(--surface2); border: 1px solid rgba(204,0,0,0.15);
    border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .filter-group { display: flex; flex-direction: column; gap: 4px; }
  .filter-group.full { grid-column: 1/-1; }
  .filter-label { font-size: 10px; color: var(--red); font-family: 'Russo One', sans-serif; letter-spacing: 1px; }
  .filter-select {
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: 8px; padding: 7px 10px; color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 12px; outline: none; width: 100%;
  }
  .filter-select option { background: #1a1a1a; }
  .filter-actions { grid-column: 1/-1; display: flex; gap: 8px; }
  .filter-option { display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px;color:var(--text-muted);border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.1s; }
  .filter-option:last-child { border-bottom:none; }
  .filter-option:active { background:rgba(204,0,0,0.1); }
  .filter-option.selected { color:var(--red);background:rgba(204,0,0,0.08); }
  .filter-option .fcheck { width:16px;height:16px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px; }
  .filter-option.selected .fcheck { background:var(--red);border-color:var(--red);color:white; }
  .sport-header { padding:7px 10px;font-family:'Russo One',sans-serif;font-size:10px;color:var(--red);letter-spacing:1px;background:rgba(204,0,0,0.05);border-bottom:1px solid rgba(204,0,0,0.1);cursor:pointer;display:flex;align-items:center;gap:6px; }
  .sport-header:hover { background:rgba(204,0,0,0.1); }
  .league-option { padding-left:24px; }
  .year-chip { padding:4px 10px;border-radius:20px;font-size:11px;font-family:'Russo One',sans-serif;cursor:pointer;border:1px solid var(--border);color:var(--text-muted);background:var(--surface3);transition:all 0.15s; }
  .year-chip.selected { background:var(--red);color:white;border-color:var(--red); }
  .btn-filter-apply { flex: 2; padding: 8px; background: var(--red); border: none; border-radius: 8px; color: white; font-family: 'Russo One', sans-serif; font-size: 12px; cursor: pointer; }
  .btn-filter-clear { flex: 1; padding: 8px; background: var(--surface3); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-family: 'Russo One', sans-serif; font-size: 12px; cursor: pointer; }

  .db-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px 12px; }
  .db-results-bar { padding: 4px 12px; font-size: 11px; color: var(--text-muted); }
  .db-results-bar span { color: var(--red); }

  /* Flip card */

.card-wrap { perspective: 1000px; height: 250px; cursor: pointer; animation: fadeUp 0.3s ease both; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  .card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
  .card-wrap.flipped .card-inner { transform: rotateY(180deg); }
  .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; }
  .card-front { background: linear-gradient(180deg, rgba(18,40,90,0.97) 0%, rgba(10,25,60,0.99) 100%); display: flex; flex-direction: column; }
.card-img-wrap { flex: 1; overflow: hidden; background: linear-gradient(160deg, rgba(22,50,100,0.9), rgba(8,20,52,0.95)); position: relative; box-shadow: 0 0 0 1.5px #b8860b, 0 0 0 2.5px #FFD43B, 0 0 0 3.5px #8B6914; border-radius: 12px; margin: 6px 6px 0; }  .card-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform 0.3s; }
  .card-wrap:hover .card-img { transform: scale(1.04); }
  .card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; opacity: 0.15; }
  .card-footer {
    padding: 10px 10px 8px;
    background: linear-gradient(180deg, rgba(10,28,68,0.98) 0%, rgba(8,20,52,1) 100%);
    border-top: 1px solid rgba(255,212,59,0.2);
  }
  .card-name {
    font-family: 'Boogaloo', cursive;
    font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 1px;
    color: #ffffff;
    letter-spacing: 0.3px;
    line-height: 1.2;
  }
  .card-team {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #3f9bee;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: 0.3px;
  }
  .card-hint { font-size: 9px; color: var(--text-dim); text-align: right; margin-top: 2px; font-style: italic; }
  .card-quick-btns { display: flex; gap: 5px; margin-top: 8px; }
  .cqb {
    flex: 1;
    padding: 7px 2px;
    border-radius: 8px;
    border: none;
    font-size: 10px;
    font-family: 'Russo One', sans-serif;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.3px;
    transition: all 0.15s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .cqb.want {
    background: linear-gradient(160deg, #c0392b, #96281b);
    color: #fff;
    border: 1px solid #e74c3c;
    box-shadow: 0 2px 6px rgba(192,57,43,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .cqb.want:active { transform: scale(0.95); box-shadow: none; }
  .cqb.own {
    background: linear-gradient(160deg, #1a9e5c, #117a45);
    color: #fff;
    border: 1px solid #27ae60;
    box-shadow: 0 2px 6px rgba(26,158,92,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .cqb.own:active { transform: scale(0.95); box-shadow: none; }
  .cqb.extra {
    background: linear-gradient(160deg, #1a6fb5, #145d99);
    color: #fff;
    border: 1px solid #3f9bee;
    box-shadow: 0 2px 6px rgba(26,111,181,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .cqb.extra:active { transform: scale(0.95); box-shadow: none; }
  /* Active pill state — replaces button when owned/wanted */
  .cqb.own.cqb-pill {
    background: linear-gradient(160deg, #00cc66, #009950) !important;
    border: 1px solid #00ff7f !important;
    box-shadow: 0 2px 8px rgba(0,204,102,0.5) !important;
    font-size: 9px !important;
    letter-spacing: 0.5px;
  }
  .cqb.want.cqb-pill {
    background: linear-gradient(160deg, #e84393, #c0185f) !important;
    border: 1px solid #ff69b4 !important;
    box-shadow: 0 2px 8px rgba(232,67,147,0.5) !important;
    font-size: 9px !important;
    letter-spacing: 0.5px;
  }
  .cqb.active { opacity: 0.55; }
  .card-back { background: linear-gradient(160deg, rgba(10,25,65,0.99) 0%, rgba(6,15,42,1) 100%); border: none; box-shadow: 0 0 0 1.5px #b8860b, 0 0 0 2.5px #FFD43B, 0 0 0 3.5px #8B6914; transform: rotateY(180deg); display: flex; flex-direction: column; padding: 12px; gap: 5px; border-radius: 14px; }
  .card-back-title { font-family: 'Boogaloo', cursive; font-size: 17px; color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); line-height: 1.2; margin-bottom: 1px; }
  .detail-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .detail-row:last-of-type { border: none; }
  .detail-label { font-size: 10px; color: #3f9bee; font-family: 'Russo One', sans-serif; letter-spacing: 1px; }
  .detail-value { font-size: 12px; color: #FFD43B; font-family: 'Boogaloo', cursive; letter-spacing: 0.3px; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-back-actions { margin-top: auto; display: flex; gap: 5px; }
  .card-action { flex: 1; padding: 8px 4px; border-radius: 8px; border: none; font-family: 'Russo One', sans-serif; font-size: 10px; cursor: pointer; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
  .card-action.primary { background: linear-gradient(160deg,#1a6fb5,#145d99); color: white; border: 1px solid #3f9bee; box-shadow: 0 2px 6px rgba(26,111,181,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
  .card-action.secondary { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.15); }
  .load-more-wrap { padding: 12px; text-align: center; }
  .load-more-btn { background: rgba(204,0,0,0.1); border: 1px solid rgba(204,0,0,0.3); border-radius: 25px; padding: 10px 28px; color: var(--red); font-family: 'Russo One', sans-serif; font-size: 12px; cursor: pointer; }

  /* ── SCAN SCREEN ── */
  .scan-wrap { padding: 14px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.scan-title { text-align: center; font-family: 'Boogaloo', cursive; font-size: 30px; color: #0f326f; text-shadow: none; -webkit-text-stroke: 1.5px #FFD43B; letter-spacing: 3px; text-transform: uppercase; }  .camera-area {
    width: 100%; aspect-ratio: 1; background: var(--surface);
    border: 2px dashed var(--red); border-radius: var(--radius);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
  }
  .camera-area img.preview { width: 100%; height: 100%; object-fit: cover; }
  .camera-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .camera-placeholder img { width: 160px; height: 96px; object-fit: contain; opacity: 0.9; filter: drop-shadow(0 0 12px var(--red-glow)); }
  .camera-placeholder p { font-size: 12px; color: #555; font-family: 'Russo One', sans-serif; letter-spacing: 1px; }
  .scan-btn { width: 100%; padding: 14px; border-radius: var(--radius-sm); border: none; font-size: 15px; cursor: pointer; font-family: 'Russo One', sans-serif; letter-spacing: 1px; transition: opacity 0.15s; }
  .scan-btn:active { opacity: 0.8; }
  .scan-btn.red { background: #0f326f; color: white; }
  .scan-btn.dark { background: #FFD43B; color: #0f326f; }
  .scan-btn.white { background: white; color: #0f326f; }  .scan-btn:disabled { opacity: 0.4; }
  .scan-status { text-align: center; font-size: 13px; color: #999; font-family: 'Russo One', sans-serif; min-height: 20px; }
  .scan-status.loading { color: var(--red); }
  .scan-status.success { color: #00cc66; }
  .scan-status.error { color: #ff4444; }
  .bobblebot-card { background: var(--surface); border: 1px solid var(--red); border-radius: var(--radius-sm); padding: 12px; box-shadow: 0 0 16px rgba(204,0,0,0.15); }
  .bobblebot-title { font-family: 'Boogaloo', cursive; font-size: 18px; color: var(--red); margin-bottom: 8px; letter-spacing: 1px; }
  .id-row { font-size: 13px; color: #ccc; margin-bottom: 4px; }
  .id-row span { color: white; font-weight: 700; }
  .scan-results-header { display: flex; align-items: center; justify-content: space-between; }
  .scan-results-title { font-family: 'Boogaloo', cursive; font-size: 20px; color: var(--red); letter-spacing: 1px; }
  .scan-results-count { font-size: 11px; background: rgba(204,0,0,0.1); border: 1px solid rgba(204,0,0,0.2); padding: 3px 10px; border-radius: 20px; color: var(--red); font-family: 'Russo One', sans-serif; }
  .scan-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }

  /* ── MARKETPLACE ── */
  .market-header { padding: 12px 12px 0; }
  .market-search-row { display: flex; gap: 8px; margin-bottom: 8px; }
  .market-search { flex: 1; position: relative; }
  .market-search input { width: 100%; padding: 9px 14px 9px 34px; background: var(--surface); border: 1px solid var(--border); border-radius: 25px; color: var(--text); font-size: 13px; outline: none; }
  .market-search input:focus { border-color: var(--red); }
  .market-search .si { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.5; }
  .post-btn { background: var(--red); border: none; color: white; padding: 9px 16px; border-radius: 25px; font-family: 'Russo One', sans-serif; font-size: 12px; cursor: pointer; white-space: nowrap; }
  .market-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .market-filters::-webkit-scrollbar { display: none; }
  .mfilter { flex-shrink: 0; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-family: 'Russo One', sans-serif; cursor: pointer; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); transition: all 0.15s; }
  .mfilter.active { background: var(--red); color: white; border-color: var(--red); }
  .listings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 10px 12px; }
  .listing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color 0.15s; animation: fadeUp 0.3s ease both; }
  .listing-card:active { border-color: var(--red); }
  .listing-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface2); }
  .listing-img-placeholder { width: 100%; aspect-ratio: 1; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 36px; opacity: 0.2; }
  .listing-info { padding: 8px; }
  .listing-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-family: 'Russo One', sans-serif; margin-bottom: 4px; }
  .badge-sale { background: rgba(0,204,102,0.15); color: #00cc66; border: 1px solid rgba(0,204,102,0.3); }
  .badge-trade { background: rgba(0,150,255,0.15); color: #0096ff; border: 1px solid rgba(0,150,255,0.3); }
  .listing-title { font-family: 'Russo One', sans-serif; font-size: 11px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .listing-price { font-size: 13px; color: var(--red); font-weight: 700; margin-bottom: 2px; }
  .listing-meta { font-size: 10px; color: var(--text-muted); }

  /* Detail overlay */
  .detail-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0F326F; z-index: 1000; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .detail-overlay.open { display: block; }
  .detail-top-bar { background: #0F326F; border-bottom: 2px solid #FFD43B; padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 12px rgba(0,0,0,0.5); }
  .back-btn { background: none; border: none; color: #FFD43B; font-size: 24px; cursor: pointer; font-weight: bold; }
  .detail-back { background: none; border: none; color: #FFD43B; font-size: 20px; cursor: pointer; font-weight: bold; padding: 4px 8px; }
  .detail-top-title { font-family: 'Boogaloo', cursive; font-size: 18px; flex: 1; color: white; letter-spacing: 1px; }
  .detail-img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 16px; background: var(--surface2); }
  .detail-body { padding: 14px; }
  .detail-price { font-size: 26px; color: var(--red); font-weight: 800; }
  .detail-title-big { font-family: 'Russo One', sans-serif; font-size: 16px; margin: 4px 0 12px; }
  .seller-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 12px; }
  .seller-avatar { width: 36px; height: 36px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Boogaloo', cursive; font-size: 16px; flex-shrink: 0; }
  .seller-info { flex: 1; }
  .seller-name { font-size: 13px; font-weight: 600; }
  .seller-rating { font-size: 11px; color: #ffd700; }
  .msg-btn { padding: 7px 12px; background: var(--red); color: white; border: none; border-radius: 8px; font-family: 'Russo One', sans-serif; font-size: 11px; cursor: pointer; }
  .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .info-item { background: var(--surface); border-radius: var(--radius-sm); padding: 10px; }
  .info-label { font-size: 9px; color: var(--text-dim); font-family: 'Russo One', sans-serif; letter-spacing: 1px; margin-bottom: 2px; }
  .info-value { font-size: 12px; }
  .desc-box { background: var(--surface); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
  .detail-action-row { display: flex; gap: 8px; margin-bottom: 16px; }
  .dabtn { flex: 1; padding: 13px; border-radius: var(--radius-sm); border: none; font-family: 'Russo One', sans-serif; font-size: 13px; cursor: pointer; }
  .dabtn.primary { background: var(--red); color: white; }
  .dabtn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
  .comments-wrap { margin-top: 4px; }
  .comments-heading { font-family: 'Russo One', sans-serif; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 1px; }
  .comment-item { background: var(--surface); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 6px; }
  .comment-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
  .comment-user { font-size: 12px; color: var(--red); font-weight: 600; }
  .comment-time { font-size: 10px; color: var(--text-dim); }
  .comment-text { font-size: 12px; color: var(--text-muted); }
  .comment-form { display: flex; gap: 8px; margin-top: 8px; }
  .comment-input { flex: 1; padding: 9px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; color: var(--text); font-size: 13px; outline: none; }
  .comment-input:focus { border-color: var(--red); }
  .comment-send { width: 36px; height: 36px; background: var(--red); border: none; border-radius: 50%; color: white; font-size: 16px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

  /* Post form */
  .post-form { padding: 14px; }
  .post-form h2 { font-family: 'Boogaloo', cursive; font-size: 22px; color: var(--red); margin-bottom: 14px; letter-spacing: 1px; }
  .form-group { margin-bottom: 14px; }
  .form-label { font-size: 11px; color: var(--red); font-family: 'Russo One', sans-serif; letter-spacing: 1px; display: block; margin-bottom: 6px; }
  .form-input { width: 100%; padding: 11px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; }
  .form-input:focus { border-color: var(--red); }
  .form-select { width: 100%; padding: 11px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; cursor: pointer; }
  .form-select option { background: #1a1a1a; }
  .form-textarea { width: 100%; padding: 11px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; resize: none; min-height: 80px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .type-toggle { display: flex; gap: 8px; }
  .type-btn { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-family: 'Russo One', sans-serif; font-size: 11px; cursor: pointer; text-align: center; transition: all 0.15s; }
  .type-btn.active { border-color: var(--red); color: var(--red); background: rgba(204,0,0,0.1); }
  .photo-upload { border: 2px dashed rgba(204,0,0,0.3); border-radius: var(--radius-sm); padding: 18px; text-align: center; cursor: pointer; color: var(--text-dim); font-size: 13px; }
  .img-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .img-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }

  /* Offer modal */
  .modal-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 1100; display: none; align-items: flex-end; justify-content: center; }
  .modal-bg.open { display: flex; }
  .modal-sheet { background: var(--surface); border-radius: 20px 20px 0 0; padding: 20px; width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 12px; }
  .modal-title { font-family: 'Boogaloo', cursive; font-size: 22px; color: var(--red); }

  /* ── MESSAGES ── */
  #messagesScreen iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* ── EMPTY / LOADING ── */
  .empty-state { text-align: center; padding: 30px 20px; color: var(--text-dim); }
  .empty-state .icon { font-size: 44px; margin-bottom: 10px; }
  .empty-state p { font-size: 13px; color: var(--text-muted); }
  .spinner { width: 32px; height: 32px; border: 3px solid rgba(204,0,0,0.2); border-top-color: var(--red); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 30px auto; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .pending-note { background: rgba(255,165,0,0.1); border: 1px solid rgba(255,165,0,0.3); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; color: orange; text-align: center; font-family: 'Russo One', sans-serif; margin-bottom: 10px; }

  /* Admin */
  .admin-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
  .admin-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--surface2); flex-shrink: 0; }
  .admin-info { flex: 1; min-width: 0; }
  .admin-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-meta { font-size: 11px; color: var(--text-muted); }
  .admin-btns { display: flex; gap: 6px; }
  .abtn-approve { padding: 6px 12px; background: #00cc66; border: none; border-radius: 6px; color: white; font-size: 11px; font-family: 'Russo One', sans-serif; cursor: pointer; }
  .abtn-reject { padding: 6px 12px; background: var(--red); border: none; border-radius: 6px; color: white; font-size: 11px; font-family: 'Russo One', sans-serif; cursor: pointer; }

  /* ── MESSAGES ── */
  .msg-header { display:flex;align-items:center;gap:10px;padding:12px 16px;background:#0F326F;border-bottom:2px solid #FFD43B;position:sticky;top:0;z-index:10; }
  .msg-header-title { flex:1;font-family:'Boogaloo',cursive;font-size:20px;color:white;letter-spacing:1px; }
  .msg-back-btn { background:none;border:none;color:#FFD43B;font-size:22px;font-weight:bold;cursor:pointer;padding:0 4px; }
  .msg-compose-btn { background:none;border:2px solid rgba(255,255,255,0.4);color:white;border-radius:8px;padding:6px 12px;font-family:'Russo One',sans-serif;font-size:12px;cursor:pointer; }
  .msg-tabs { display:flex;background:#123F8C;border-bottom:1px solid rgba(255,212,59,0.3); }
  .msg-tab { flex:1;padding:12px;text-align:center;color:rgba(255,255,255,0.6);font-family:'Russo One',sans-serif;font-size:12px;letter-spacing:0.5px;cursor:pointer; }
  .msg-tab.active { color:#FFD43B;border-bottom:2px solid #FFD43B; }
  .msg-view { padding:12px;display:flex;flex-direction:column;gap:8px; }
  .msg-loading { text-align:center;color:rgba(255,255,255,0.5);padding:20px;font-size:13px; }
  .msg-empty { text-align:center;padding:40px 20px;color:rgba(255,255,255,0.4); }
  .msg-empty.hidden { display:none; }
  .msg-conversation { display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,0.06);border-radius:14px;cursor:pointer;border:1px solid rgba(255,255,255,0.08); }
  .msg-conversation.unread { border-color:rgba(255,212,59,0.4);background:rgba(255,212,59,0.06); }
  .msg-avatar { width:42px;height:42px;border-radius:50%;background:#FFD43B;color:#0F326F;display:flex;align-items:center;justify-content:center;font-family:'Boogaloo',cursive;font-size:20px;font-weight:bold;flex-shrink:0; }
  .msg-avatar.sent-avatar { background:#123F8C;color:white; }
  .msg-conv-info { flex:1;min-width:0; }
  .msg-conv-from { display:flex;justify-content:space-between;align-items:center;margin-bottom:2px; }
  .msg-conv-name { font-family:'Russo One',sans-serif;font-size:13px;color:white; }
  .msg-conv-time { font-size:11px;color:rgba(255,255,255,0.4); }
  .msg-conv-listing { font-size:11px;color:#FFD43B;margin-bottom:2px; }
  .msg-conv-preview { font-size:12px;color:rgba(255,255,255,0.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .msg-unread-dot { width:10px;height:10px;border-radius:50%;background:#FFD43B;flex-shrink:0; }
  .msg-thread-view { display:flex;flex-direction:column;height:calc(100vh - 170px); }
  .msg-thread-header { padding:12px 16px;background:rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.1); }
  .msg-thread-user { font-family:'Russo One',sans-serif;font-size:14px;color:white; }
  .msg-thread-listing { font-size:12px;color:#FFD43B;margin-top:2px; }
  .msg-messages-list { flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px; }
  .msg-bubble { max-width:75%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.4;position:relative; }
  .msg-bubble.sent { background:#FFD43B;color:#0F326F;align-self:flex-end;border-bottom-right-radius:4px; }
  .msg-bubble.received { background:#123F8C;color:white;align-self:flex-start;border-bottom-left-radius:4px;border:1px solid rgba(255,255,255,0.1); }
  .msg-bubble-time { font-size:10px;opacity:0.6;margin-top:4px;display:block; }
  .msg-reply-box { display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:#0F326F;border-top:1px solid rgba(255,212,59,0.3); }
  .msg-reply-input { flex:1;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:10px 14px;color:white;font-size:14px;outline:none;resize:none;font-family:'DM Sans',sans-serif;max-height:100px;overflow-y:auto; }
  .msg-send-btn { width:40px;height:40px;border-radius:50%;background:#FFD43B;border:none;color:#0F326F;font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
  .msg-img-btn { width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex-shrink:0; }
  .msg-input { width:100%;padding:12px 14px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:10px;color:white;font-size:14px;outline:none;font-family:'DM Sans',sans-serif;box-sizing:border-box; }
  .msg-field-label { font-size:10px;color:rgba(255,255,255,0.5);font-family:'Russo One',sans-serif;letter-spacing:1px;margin-bottom:6px;text-transform:uppercase; }


  /* ── MARKETPLACE v2 ── */
  .mkt-header {
    background: #0F326F;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(255,212,59,0.2);
    padding: 10px 12px 0;
  }
  .mkt-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .mkt-search-box {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
  }
  .mkt-search-icon { opacity: 0.5; font-size: 14px; }
  .mkt-list-btn {
    background: #FFD43B;
    color: #0F326F;
    border: none;
    border-radius: 20px;
    padding: 10px 18px;
    font-family: 'Russo One', sans-serif;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }
  .mkt-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
  }
  .mkt-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
  }
  .mkt-tabs::-webkit-scrollbar { display: none; }
  .mkt-tab {
    flex-shrink: 0;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-family: 'Russo One', sans-serif;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.5px;
    transition: all 0.15s;
  }
  .mkt-tab.active {
    background: #FFD43B;
    color: #0F326F;
    border-color: transparent;
  }
  .mkt-sort-select {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    border-radius: 10px;
    padding: 5px 8px;
    font-size: 11px;
    font-family: 'Russo One', sans-serif;
    flex-shrink: 0;
    cursor: pointer;
  }
  .mkt-sort-select option { background: #0F326F; color: white; }

  /* Cards */
  .mkt-card {
    display: flex;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    margin-bottom: 8px;
    cursor: pointer;
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s, border-color 0.15s;
  }
  .mkt-card:active { background: rgba(255,255,255,0.09); }
  .mkt-card-thumb-wrap {
    position: relative;
    flex-shrink: 0;
  }
  .mkt-thumb {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
  }
  .mkt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mkt-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
  }
  .mkt-photo-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.65);
    color: white;
    font-size: 9px;
    font-family: 'Russo One', sans-serif;
    padding: 1px 5px;
    border-radius: 6px;
  }
  .mkt-card-body {
    flex: 1;
    min-width: 0;
    padding-right: 28px;
  }
  .mkt-card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .mkt-badge {
    font-size: 9px;
    font-family: 'Russo One', sans-serif;
    padding: 2px 7px;
    border-radius: 8px;
    letter-spacing: 0.3px;
  }
  .mkt-badge-sale    { background: rgba(0,204,102,0.18); color: #4dff91; }
  .mkt-badge-trade   { background: rgba(0,150,255,0.18); color: #5bc8ff; }
  .mkt-badge-both    { background: rgba(255,180,0,0.18); color: #ffcc44; }
  .mkt-badge-wanted  { background: rgba(255,100,100,0.18); color: #ff8080; }
  .mkt-badge-sold    { background: rgba(0,204,102,0.18); color: #4dff91; }
  .mkt-badge-pending { background: rgba(255,212,59,0.18); color: #FFD43B; }
  .mkt-badge-official{ background: rgba(255,80,80,0.18); color: #ff7070; margin-left: 2px; }
  .mkt-card-title {
    font-family: 'Russo One', sans-serif;
    font-size: 13px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }
  .mkt-card-team {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 3px;
  }
  .mkt-price {
    font-family: 'Boogaloo', cursive;
    font-size: 20px;
    color: #FFD43B;
    line-height: 1;
    margin-bottom: 4px;
  }
  .mkt-card-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
  }
  .mkt-seller {
    color: rgba(255,212,59,0.6);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
  }
  .mkt-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
  }
  .mkt-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.35);
  }
  .mkt-empty-icon { font-size: 48px; margin-bottom: 12px; }
  .mkt-empty p { font-family: 'Russo One', sans-serif; font-size: 13px; letter-spacing: 0.5px; }

  /* Detail overlay */
  .mkt-detail-carousel {
    position: relative;
    background: #071428;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    touch-action: pan-y;
    flex-shrink: 0;
  }
  .mkt-detail-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.25s;
    cursor: pointer;
    pointer-events: none;
  }
  .mkt-detail-img.active { opacity: 1; pointer-events: auto; }
  .mkt-detail-no-photo {
    width: 100%;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
  }
  .mkt-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
  }
  .mkt-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: background 0.15s;
  }
  .mkt-dot.active { background: #FFD43B; }
  .mkt-detail-body { padding: 16px; }
  .mkt-detail-title {
    font-family: 'Russo One', sans-serif;
    font-size: 18px;
    color: white;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  .mkt-detail-price {
    font-family: 'Boogaloo', cursive;
    font-size: 36px;
    color: #FFD43B;
    margin-bottom: 8px;
  }
  .mkt-wanted-label { color: #ff8080; font-size: 18px; font-family: 'Russo One', sans-serif; }
  .mkt-trade-label  { color: #5bc8ff; font-size: 18px; font-family: 'Russo One', sans-serif; }
  .mkt-also-trade   { font-size: 14px; color: rgba(255,255,255,0.45); }
  .mkt-detail-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
  }
  .mkt-detail-sub strong { color: rgba(255,255,255,0.8); }
  .mkt-detail-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    line-height: 1.65;
    margin: 12px 0;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
  }
  .mkt-detail-trade-for {
    font-size: 13px;
    color: #5bc8ff;
    background: rgba(0,150,255,0.08);
    border: 1px solid rgba(0,150,255,0.2);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0 12px;
  }
  .mkt-detail-seller {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    cursor: pointer;
    margin: 12px 0;
    border: 1px solid rgba(255,212,59,0.2);
    transition: background 0.15s;
  }
  .mkt-detail-seller:active { background: rgba(255,255,255,0.1); }
  .mkt-detail-seller-photo {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .mkt-seller-placeholder {
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .mkt-detail-seller-name {
    font-family: 'Russo One', sans-serif;
    font-size: 14px;
    color: white;
  }
  .mkt-detail-seller-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
  }
  .mkt-detail-view-profile {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255,212,59,0.6);
    font-family: 'Russo One', sans-serif;
    flex-shrink: 0;
  }
  .mkt-detail-actions {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: wrap;
  }
  .mkt-action-btn {
    flex: 1;
    min-width: 80px;
    padding: 11px 8px;
    border-radius: 10px;
    border: none;
    font-family: 'Russo One', sans-serif;
    font-size: 12px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: opacity 0.15s;
  }
  .mkt-action-btn:active { opacity: 0.75; }
  .mkt-action-offer  { background: rgba(255,212,59,0.15); color: #FFD43B; border: 1px solid rgba(255,212,59,0.3); }
  .mkt-action-trade  { background: rgba(0,150,255,0.15); color: #5bc8ff; border: 1px solid rgba(0,150,255,0.3); }
  .mkt-action-msg    { background: rgba(0,204,102,0.15); color: #4dff91; border: 1px solid rgba(0,204,102,0.3); }
  .mkt-action-edit   { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); }
  .mkt-action-sold   { background: rgba(0,204,102,0.15); color: #4dff91; border: 1px solid rgba(0,204,102,0.3); }
  .mkt-action-delete { background: rgba(255,80,80,0.12); color: #ff8080; border: 1px solid rgba(255,80,80,0.25); }

  /* Comments */
  .mkt-comments-section {
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 14px;
    padding-bottom: 40px;
  }
  .mkt-comments-title {
    font-family: 'Russo One', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .mkt-comment {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
  }
  .mkt-comment-user {
    color: #FFD43B;
    font-family: 'Russo One', sans-serif;
    font-size: 11px;
    margin-right: 6px;
  }
  .mkt-comment-text { color: rgba(255,255,255,0.8); }
  .mkt-comment-time {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    margin-top: 2px;
  }
  .mkt-no-comments { font-size: 12px; color: rgba(255,255,255,0.3); padding: 8px 0; }
  .mkt-comment-loading { font-size: 12px; color: rgba(255,255,255,0.3); }
  .mkt-comment-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .mkt-comment-input {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: white;
    padding: 9px 14px;
    font-size: 13px;
    outline: none;
  }
  .mkt-comment-send {
    background: #FFD43B;
    color: #0F326F;
    border: none;
    border-radius: 20px;
    padding: 9px 16px;
    font-family: 'Russo One', sans-serif;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Post form */
  .mkt-form-section { margin-bottom: 14px; }
  .mkt-form-row { display: flex; gap: 10px; }
  .mkt-form-label {
    font-family: 'Russo One', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 1.5px;
    margin-bottom: 6px;
  }
  .mkt-req { color: #FFD43B; }
  .mkt-form-input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: white;
    padding: 11px 14px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.15s;
  }
  .mkt-form-input:focus { border-color: rgba(255,212,59,0.4); }
  .mkt-form-input::placeholder { color: rgba(255,255,255,0.25); }
  .mkt-form-select { cursor: pointer; }
  .mkt-form-select option { background: #0F326F; }
  .mkt-form-textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
  }
  .mkt-type-btns {
    display: flex;
    gap: 8px;
  }
  .mkt-type-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-family: 'Russo One', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.3px;
  }
  .mkt-type-btn.active {
    background: rgba(255,212,59,0.15);
    border-color: #FFD43B;
    color: #FFD43B;
  }
  .mkt-photos-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .mkt-photo-preview {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
  }
  .mkt-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mkt-photo-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mkt-photo-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,212,59,0.8);
    color: #0F326F;
    font-size: 8px;
    font-family: 'Russo One', sans-serif;
    text-align: center;
    padding: 2px;
  }
  .mkt-photo-add {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 2px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-family: 'Russo One', sans-serif;
    transition: border-color 0.15s;
  }
  .mkt-photo-add:hover { border-color: rgba(255,212,59,0.4); color: #FFD43B; }
  .mkt-photo-uploading {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    padding: 8px;
    font-family: 'Russo One', sans-serif;
  }
  .mkt-submit-btn {
    width: 100%;
    padding: 15px;
    background: #FFD43B;
    color: #0F326F;
    border: none;
    border-radius: 12px;
    font-family: 'Russo One', sans-serif;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 0.5px;
    margin-top: 8px;
    transition: opacity 0.15s;
  }
  .mkt-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }



  /* Ensure mkt detail top bar is never covered */
  #mktDetailOverlay .detail-top-bar,
  #mktFormOverlay .detail-top-bar {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #0F326F;
  }
  #mktDetailOverlay,
  #mktFormOverlay {
    display: none;
    flex-direction: column;
  }
  #mktDetailOverlay.open,
  #mktFormOverlay.open {
    display: flex !important;
    flex-direction: column;
  }
  #mktDetailContent,
  #mktFormOverlay > div:last-child {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px;
  }

  /* Member profile overlay must appear above marketplace detail */
  #memberProfileOverlay { z-index: 1050; }

  
  #mktDetailOverlay.open .mkt-back-float,
  #mktFormOverlay.open .mkt-back-float {
    display: block !important;
  }

  /* ── MKT BACK BUTTON ── */
  .mkt-back-float {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background: #FFD43B;
    color: #0F326F;
    font-family: 'Russo One', sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }

  /* ── OFFERS SECTION ── */
  .mkt-offers-section {
    margin-top: 20px;
    border-top: 2px solid rgba(255,212,59,0.3);
    padding-top: 14px;
  }
  .mkt-offers-header {
    font-family: 'Russo One', sans-serif;
    font-size: 12px;
    color: #FFD43B;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .mkt-offer-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,212,59,0.15);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .mkt-offer-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  .mkt-offer-from {
    font-family: 'Russo One', sans-serif;
    font-size: 13px;
    color: #FFD43B;
  }
  .mkt-offer-time {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin-left: auto;
  }
  .mkt-offer-status.accepted {
    font-size: 10px;
    color: #4dff91;
    font-family: 'Russo One', sans-serif;
  }
  .mkt-offer-listing {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 6px;
  }
  .mkt-offer-listing strong { color: rgba(255,255,255,0.75); }
  .mkt-offer-amount {
    font-size: 18px;
    font-family: 'Boogaloo', cursive;
    margin-bottom: 10px;
  }
  .mkt-offer-amount.cash { color: #FFD43B; }
  .mkt-offer-amount.trade { color: #5bc8ff; font-size: 14px; font-family: 'DM Sans', sans-serif; }
  .mkt-offer-actions {
    display: flex;
    gap: 6px;
  }
  .mkt-offer-btn {
    flex: 1;
    padding: 8px 6px;
    border-radius: 8px;
    border: none;
    font-family: 'Russo One', sans-serif;
    font-size: 11px;
    cursor: pointer;
    letter-spacing: 0.3px;
  }
  .mkt-offer-btn.accept  { background: rgba(0,204,102,0.2); color: #4dff91; border: 1px solid rgba(0,204,102,0.3); }
  .mkt-offer-btn.decline { background: rgba(255,80,80,0.15); color: #ff8080; border: 1px solid rgba(255,80,80,0.25); }
  .mkt-offer-btn.message { background: rgba(0,150,255,0.15); color: #5bc8ff; border: 1px solid rgba(0,150,255,0.25); }

  /* ── HOME SCREEN v2 ── */
  .home-stats-row {
    display: flex;
    gap: 10px;
    padding: 10px 12px 12px;
    justify-content: center;
  }
  .home-stat-chip {
    background: rgba(255,255,255,0.1);
    border: 1.5px solid #FFD43B;
    border-radius: 10px;
    padding: 8px 0;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .home-stat-num {
    font-family: 'Boogaloo', cursive;
    font-size: 24px;
    color: #FFD43B;
    line-height: 1;
  }
  .home-stat-label {
    font-size: 9px;
    color: rgba(255,255,255,0.6);
    font-family: 'Russo One', sans-serif;
    letter-spacing: 0.5px;
  }
  .home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px 16px;
  }
  .home-grid-item {
    background: linear-gradient(135deg, #0d2a5a 0%, #0a1f42 100%);
    border: 1.5px solid #FFD43B;
    border-radius: 16px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .home-grid-item:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .home-grid-item img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
  }
  .home-grid-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #FFD43B;
    color: #0F326F;
    font-family: 'Russo One', sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
  }

  /* ── HOME GRID COMPACT (8 tiles, no scroll) ── */
  #homeScreen.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .home-stats-row {
    padding: 6px 10px 4px !important;
    flex-shrink: 0 !important;
  }
  .home-stat-chip {
    padding: 4px 0 !important;
  }
  .home-stat-num {
    font-size: 18px !important;
  }
  .home-stat-label {
    font-size: 8px !important;
  }
  .home-grid {
    gap: 4px !important;
    padding: 0 6px 4px !important;
    grid-template-rows: repeat(4, 1fr) !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  .home-grid-item {
    aspect-ratio: unset !important;
    border-radius: 12px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .home-grid-item img {
    width: 75% !important;
    height: 75% !important;
    object-fit: contain !important;
  }

  /* ── BOTTOM NAV IMAGES ── */
  .nav-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
  }
  .nav-img-vault {
    width: 64px;
    height: 26px;
    border-radius: 0;
  }
  .nav-img-scan {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2.5px solid #FFD43B;
    box-shadow: 0 0 16px rgba(255,212,59,0.6);
    margin-top: -86px;
    position: relative;
    z-index: 202;
    object-fit: cover;
    /* Remove white JPG background */
    background: #040f22;
    padding: 2px;
  }
  #nav-scan {
    overflow: visible !important;
    position: relative;
    z-index: 202;
  }

  /* Remove white bg from scan image using multiply blend */
  #nav-scan .nav-img-scan {
    mix-blend-mode: multiply;
    background: transparent;
  }
  /* If the nav bar bg is dark, lighten blend won't work - use this instead */
  #nav-scan {
    overflow: visible;
  }

  /* Scan tab - hide white JPG background by clipping to circle tightly */
  .nav-img-scan {
    background-color: var(--nav-bg, #040f22) !important;
    object-fit: cover !important;
  }
  /* Bottom nav background color var */
  .bottom-nav { --nav-bg: #040f22; }

  /* Scan button pokes above nav bar */
  .bottom-nav { overflow: visible !important; }
  #nav-scan { overflow: visible !important; z-index: 201 !important; }

  /* ── VAULT365 NAV BUTTON ── */
  .nav-vault-btn {
    flex: 1.2 !important;
  }
  .nav-vault-img {
    width: 54px;
    height: auto;
    max-height: 32px;
    object-fit: contain;
  }
  .nav-vault-btn.active .nav-vault-img {
    filter: drop-shadow(0 0 6px rgba(255,212,59,0.7));
  }
  /* Active state for SVG nav items */
  .nav-item.active svg {
    filter: drop-shadow(0 0 4px rgba(255,212,59,0.8));
  }

  /* ── SCAN NAV BUTTON (robot) ── */
  .nav-scan-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text-dim);
    position: relative;
    overflow: visible !important;
    padding: 0 0 6px 0;
    left: 0;
    transform: translateX(0);
    margin: 0 auto;
  }
  .nav-scan-robot {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 50%;
    margin-top: -38px;
    position: relative;
    z-index: 202;
    border: 2.5px solid #FFD43B;
    box-shadow: 0 0 12px rgba(255,212,59,0.6);
  }
  .nav-scan-btn .nav-label {
    font-size: 9px;
    font-family: 'Russo One', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
    line-height: 1;
  }
  .nav-scan-btn.active { color: #fbff00; }
  .nav-scan-btn.active .nav-scan-robot {
    filter: drop-shadow(0 -4px 14px rgba(255,212,59,0.9));
  }

  /* Force scan to true center */
  #nav-scan {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .bottom-nav {
    position: relative !important;
    justify-content: space-around !important;
  }
  /* Give home/market/inbox/database their own space so scan can be absolute */
  #nav-home, #nav-marketplace { margin-right: auto; }
  #nav-messages, #nav-database { margin-left: auto; }

  /* ── NAV EQUAL SPACING FIX ── */
  .bottom-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    position: relative !important;
  }
  #nav-home, #nav-marketplace, #nav-messages, #nav-database {
    position: static !important;
    margin: 0 !important;
    width: 100% !important;
  }
  #nav-scan {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* ── DIRECTORY OVERLAY ── */
  .dir-header {
    background: linear-gradient(135deg, #0a1f42 0%, #0F326F 100%);
    border-bottom: 2px solid #FFD43B;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .dir-back {
    font-size: 20px;
    color: #FFD43B;
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
  }
  .dir-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
  }
  .dir-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255,212,59,0.4));
  }
  .dir-title {
    font-family: 'Russo One', sans-serif;
    font-size: 18px;
    color: #FFD43B;
    letter-spacing: 1px;
    line-height: 1;
  }
  .dir-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
    font-family: 'DM Sans', sans-serif;
  }
  .dir-search-wrap {
    position: relative;
    padding: 12px 12px 8px;
  }
  .dir-search-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    font-size: 14px;
  }
  .dir-search-input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,212,59,0.25);
    border-radius: 25px;
    color: white;
    padding: 10px 14px 10px 36px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
  }
  .dir-search-input::placeholder { color: rgba(255,255,255,0.3); }
  .dir-search-input:focus { border-color: rgba(255,212,59,0.5); }
  .dir-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 12px 10px;
  }
  .dir-filters::-webkit-scrollbar { display: none; }
  .dir-chip {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-family: 'Russo One', sans-serif;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.06);
    white-space: nowrap;
    transition: all 0.15s;
  }
  .dir-chip.active {
    background: #FFD43B;
    color: #0F326F;
    border-color: transparent;
  }
  /* Member cards */
  .member-dir-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    cursor: pointer;
    border: 1px solid rgba(255,212,59,0.12) !important;
    transition: background 0.15s;
  }
  .member-dir-item:active { background: rgba(255,255,255,0.09) !important; }

  /* ── MEMBER PROFILE v2 ── */
  .mprof-hero {
    background: linear-gradient(180deg, #0a1f42 0%, #0F326F 100%);
    border-bottom: 2px solid rgba(255,212,59,0.3);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .mprof-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #FFD43B;
    box-shadow: 0 0 16px rgba(255,212,59,0.4);
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mprof-username {
    font-family: 'Boogaloo', cursive;
    font-size: 28px;
    color: #FFD43B;
    letter-spacing: 1px;
    line-height: 1;
  }
  .mprof-location {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
  }
  .mprof-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mprof-badge {
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-family: 'Russo One', sans-serif;
  }
  .mprof-badge.team {
    background: rgba(255,212,59,0.15);
    border: 1px solid rgba(255,212,59,0.3);
    color: #FFD43B;
  }
  .mprof-badge.exp {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
  }
  .mprof-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }
  .mprof-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,212,59,0.15);
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
  }
  .mprof-stat:active { background: rgba(255,255,255,0.1); }
  .mprof-stat-num {
    display: block;
    font-family: 'Boogaloo', cursive;
    font-size: 22px;
    color: #FFD43B;
    line-height: 1;
  }
  .mprof-stat-label {
    display: block;
    font-size: 9px;
    font-family: 'Russo One', sans-serif;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-transform: uppercase;
  }
  .mprof-msg-btn {
    width: 100%;
    padding: 12px;
    background: #FFD43B;
    color: #0F326F;
    border: none;
    border-radius: 12px;
    font-family: 'Russo One', sans-serif;
    font-size: 14px;
    cursor: pointer;
    margin-top: 4px;
    letter-spacing: 0.5px;
  }
  .mprof-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mprof-tabs::-webkit-scrollbar { display: none; }
  .mprof-tab {
    flex: 1;
    padding: 11px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Russo One', sans-serif;
    font-size: 10px;
    cursor: pointer;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.15s;
  }
  .mprof-tab.active {
    color: #FFD43B;
    border-bottom-color: #FFD43B;
  }