:root {
      --navy: #0f2044;
      --navy-light: #1d3a7a;
      --blue-accent: #2563eb;
      --blue-light: #dbeafe;
      --bg: #f1f5fb;
      --bg-card: #ffffff;
      --text-main: #0f2044;
      --text-muted: #64748b;
      --border: #e2e8f0;
      --amber: #f59e0b;
      --red: #dc2626;
      --radius: 16px;
      --radius-sm: 10px;
      --shadow: 0 4px 24px rgba(15,32,68,0.06);
      --sidebar-w: 240px;
    }

    /* ── viewport overflow guard (responsive fix) ── */
    html, body { overflow-x: clip; max-width: 100%; }

    html, body { scrollbar-width: none; }

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

    .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); transition: background .2s, color .2s; }

    .sidebar-link.active, .sidebar-link:hover { background: var(--blue-light); color: var(--navy); }

    .topbar { display: flex; align-items: center; gap: 24px; padding: 18px 32px; background: var(--bg); position: static; border-bottom: 0; height: auto; }

    .icon-btn, .profile-trigger-avatar { background: none; border: 0; cursor: pointer; color: var(--navy); display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 50%; transition: background .2s; }
    .icon-btn:hover, .profile-trigger-avatar:hover { background: var(--blue-light); }
    /* fixed avatar size so the profile picture fills a 38px circle instead of expanding to its natural size */
    .profile-trigger-avatar { width: 38px; height: 38px; padding: 0; background: var(--blue-light); color: var(--blue-accent); overflow: hidden; flex-shrink: 0; }

    .profile-menu { position: absolute; top: calc(100% + 12px); right: 0; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow); width: 260px; padding: 18px; display: none; flex-direction: column; gap: 14px; z-index: 80; border: 1px solid var(--border); }

    .profile-avatar { width: 48px; height: 48px; border-radius: 12px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; color: var(--blue-accent); flex-shrink: 0; }

    .profile-menu-link { display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 600; color: var(--navy); padding: 6px 2px; border-radius: var(--radius-sm); transition: background .2s; }
    .profile-menu-link:hover { background: var(--bg); }

    .search-bar, .mobile-search { display: flex; align-items: center; gap: 10px; background: var(--blue-light); border-radius: 999px; padding: 12px 20px; color: var(--text-muted); border: 0; }
    .search-bar { flex: 1; max-width: 480px; }
    .search-bar input, .mobile-search input { border: 0; background: none; outline: none; font-family: inherit; font-size: .9rem; color: var(--text-main); width: 100%; }
    .search-bar input::placeholder, .mobile-search input::placeholder { color: #94a3b8; }
    .content { padding: 0 32px 40px; display: flex; flex-direction: column; gap: 24px; }
    .mobile-search { display: none; margin-bottom: 4px; }
    .filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
    .filter-chip-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .filter-chip { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--navy); font-size: .88rem; font-weight: 700; padding: 11px 18px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s; }
    .filter-chip:hover, .filter-chip.active { background: var(--blue-light); border-color: var(--blue-accent); color: var(--blue-accent); }
    .filter-chip .star { color: var(--amber); display: flex; }
    .btn-filter { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--blue-accent); color: #fff; border: 0; font-size: .9rem; font-weight: 700; padding: 12px 22px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: background .2s; }
    .btn-filter:hover { background: var(--navy); }
    .filter-overlay { display: none; position: fixed; inset: 0; background: rgba(15,32,68,.5); backdrop-filter: blur(4px); z-index: 300; padding: 0; }
    .filter-overlay.open { display: block; }
    .filter-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 90vw; background: #fff; box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; border-radius: 0; }
    .filter-overlay.open .filter-panel { transform: translateX(0); }
    .filter-panel-handle { display: none; }
    .filter-panel-header { display: flex; align-items: center; justify-content: space-between; }
    .filter-panel-header h2 { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin: 0; }
    .filter-reset { background: none; border: 0; font-family: inherit; font-size: .88rem; font-weight: 700; color: var(--blue-accent); cursor: pointer; }
    .filter-section-label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 12px; }
    .filter-option { background: var(--bg); border: 1px solid var(--border); color: var(--navy); font-size: .86rem; font-weight: 600; padding: 10px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; }
    select.filter-option { width: 100%; border-radius: var(--radius-sm); }
    .filter-option.active { background: var(--blue-light); border-color: var(--blue-accent); color: var(--blue-accent); }
    .btn-apply-filters { margin-top: auto; border: 0; padding: 16px; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit; }
    .empty-state { grid-column: 1/-1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--text-muted); }

    .moderation-dialog {
      width: min(520px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      margin: auto;
      padding: 0;
      border: 0;
      border-radius: var(--radius);
      background: #fff;
      color: var(--text-main);
      box-shadow: 0 24px 70px rgba(15, 32, 68, .25);
    }
    .moderation-dialog::backdrop { background: rgba(15, 32, 68, .58); backdrop-filter: blur(3px); }
    .moderation-dialog form { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
    .moderation-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
    .moderation-dialog-header h2 { margin: 0 0 6px; color: var(--navy); font-family: 'Poppins', sans-serif; font-size: 1.25rem; }
    .moderation-dialog-header p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
    .moderation-dialog-close { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--navy); cursor: pointer; }
    .moderation-field { display: flex; flex-direction: column; gap: 8px; color: var(--navy); font-size: .86rem; font-weight: 700; }
    .moderation-field small { color: var(--text-muted); font-weight: 500; }
    .moderation-field select,
    .moderation-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text-main); font: inherit; outline: none; }
    .moderation-field textarea { resize: vertical; line-height: 1.45; }
    .moderation-field select:focus,
    .moderation-field textarea:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
    .moderation-error { padding: 10px 12px; border-radius: var(--radius-sm); background: #fef2f2; color: var(--red); font-size: .84rem; font-weight: 700; }
    .moderation-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
    .moderation-dialog-actions button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: var(--radius-sm); font-family: inherit; font-weight: 700; cursor: pointer; }
    .moderation-cancel { border: 1px solid var(--border); background: #fff; color: var(--navy); }
    .moderation-confirm { border: 1px solid var(--red); background: var(--red); color: #fff; }
    .moderation-confirm:hover { background: #b91c1c; }
    .mobile-topbar, .mobile-sidebar { display: none; }

    @media (max-width: 900px) {

      .sidebar { display: none; }
      .topbar { display: none; }
      .mobile-topbar { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--bg); position: relative; }
      .mobile-topbar .back-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--navy);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        flex-shrink: 0;
      }

      .mobile-logo-text .subtitle { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

      .content { padding: 0 20px 100px; }
      .mobile-search { display: flex; align-items: center; gap: 10px; background: var(--blue-light); border-radius: 999px; padding: 12px 18px; color: var(--text-muted); }
      .mobile-search input { width: 100%; }
      .filter-bar.marketplace-filter-bar { width: 100%; flex-wrap: nowrap; overflow-x: visible; padding-bottom: 4px; }
      .marketplace-filter-bar .filter-chip-group { flex: 0 1 auto; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
      .filter-chip-group::-webkit-scrollbar { display: none; }
      .filter-chip { flex-shrink: 0; }
      .marketplace-filter-bar .btn-filter { margin-left: auto; flex-shrink: 0; padding: 12px; }
      .btn-filter span { display: none; }
      .filter-panel { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh; border-radius: var(--radius) var(--radius) 0 0; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); }
      .filter-overlay.open .filter-panel { transform: translateY(0); }
      .filter-panel-handle { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: 0 auto 4px; }






      .mobile-sidebar { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(15,32,68,.5); backdrop-filter: blur(4px); }

      .mobile-sidebar-panel { background: #fff; width: 75%; max-width: 280px; height: 100%; padding: 28px 20px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }

      .moderation-dialog form { padding: 20px; }
      .moderation-dialog-actions { flex-direction: column-reverse; }
      .moderation-dialog-actions button { width: 100%; }

    }