/**
 * Hero Design System — CSS unificado para todos os template parts.
 *
 * OVERRIDE: este CSS é carregado PELO TEMA e sobrescreve o CSS base
 * que cada plugin carrega por conta própria. Se este tema for trocado
 * por outro, os plugins mantêm visual funcional com seus próprios CSS.
 *
 * Paleta: branco, verde lima (#A3D900), preto (#1A1A1A)
 * Fontes: Bangers (display) + Outfit (body)
 * Mobile-first, dark mode, bordas suaves
 *
 * Estrutura:
 * 1. Variáveis e reset
 * 2. Tipografia e utilitários
 * 3. Componentes base (input, btn, card, tab)
 * 4. Hero Core (profile, leaderboard, login, checkin)
 * 5. Hero Blade (feed, stories, profile-page, messages, groups, members, notifications)
 * 6. Hero Market (products, stores, cart, checkout, my-store, qr-pay, orders)
 * 7. Hero Quiz (lobby, host, list, leaderboard, challenge, history)
 */

/* ══════════════════════════════════════
   1. VARIÁVEIS & RESET
   ══════════════════════════════════════ */
:root {
    --lime: #A3D900;
    --lime-dark: #8BC200;
    --lime-light: rgba(163, 217, 0, .08);
    --dark: #1A1A1A;
    --charcoal: #2D2D2D;
    --surface: rgba(255, 255, 255, .04);
    --border: rgba(255, 255, 255, .06);
    --mid: #888;
    --light-text: rgba(255, 255, 255, .5);
    --white: #FFF;
    --green: #27AE60;
    --red: #FF3B3B;
    --orange: #FF8C42;
    --cyan: #00D4FF;
    --purple: #9B59FF;
    --pink: #FF4D8D;
    --gold: #FFD700;
    --font-d: 'Bangers', cursive;
    --font-b: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-pill: 50px;
    --shadow: 0 4px 16px rgba(0, 0, 0, .12);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
    --transition: all .2s ease;
}

/* ══════════════════════════════════════
   2. TIPOGRAFIA & UTILITÁRIOS
   ══════════════════════════════════════ */
.hero-title { font-family: var(--font-d); font-size: 24px; letter-spacing: .5px; color: var(--white); }
.hero-title-sm { font-family: var(--font-d); font-size: 18px; color: var(--white); }
.hero-subtitle { font-size: 13px; color: var(--mid); }
.hero-gc { color: var(--gold) !important; }
.hero-loading { text-align: center; padding: 32px; color: var(--mid); font-size: 13px; animation: heroPulse 1.5s ease infinite; }
.hero-empty { text-align: center; padding: 32px; color: var(--mid); font-size: 14px; }
.hero-error { color: var(--red); font-size: 13px; margin-top: 8px; }
.hero-success { color: var(--green); font-size: 13px; margin-top: 8px; }

@keyframes heroPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════
   3. COMPONENTES BASE
   ══════════════════════════════════════ */

/* ── Input ── */
.hero-input {
    width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--white); font-family: var(--font-b); font-size: 14px;
    transition: var(--transition); outline: none;
}
.hero-input:focus { border-color: var(--lime); }
.hero-input::placeholder { color: var(--light-text); }
.hero-input-lg { font-size: 18px; padding: 16px; }
.hero-input-pin { font-family: var(--font-d); font-size: 28px; text-align: center; letter-spacing: 6px; }
.hero-select { padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--white); font-size: 13px; }
.hero-select-block { width: 100%; }
.hero-label { font-size: 12px; color: var(--mid); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: .5px; }
.hero-search-input { padding-left: 36px; }

/* ── Button ── */
.hero-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 24px; border: none; border-radius: var(--radius); font-family: var(--font-b);
    font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none;
}
.hero-btn:hover { transform: translateY(-1px); }
.hero-btn:active { transform: scale(.98); }
.hero-btn-primary { background: var(--lime); color: var(--dark); }
.hero-btn-primary:hover { background: var(--lime-dark); }
.hero-btn-outline { background: transparent; border: 2px solid var(--border); color: var(--white); }
.hero-btn-outline:hover { border-color: var(--lime); color: var(--lime); }
.hero-btn-sm { padding: 8px 16px; font-size: 12px; border-radius: var(--radius-sm); }
.hero-btn-lg { padding: 16px 32px; font-size: 16px; }
.hero-btn-block { width: 100%; }
.hero-btn i { font-size: 16px; }

/* ── Tab ── */
.hero-tab {
    padding: 8px 16px; border-radius: var(--radius-sm); border: none; font-family: var(--font-b);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition);
    background: transparent; color: var(--mid);
}
.hero-tab.active { background: var(--lime); color: var(--dark); }
.hero-tab:hover:not(.active) { color: var(--white); }

/* ── Badge ── */
.hero-badge { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.hero-badge-approved, .hero-badge-confirmed { background: rgba(39,174,96,.15); color: var(--green); }
.hero-badge-pending { background: rgba(255,140,66,.15); color: var(--orange); }
.hero-badge-cancelled, .hero-badge-rejected { background: rgba(255,59,59,.15); color: var(--red); }

/* ── Section ── */
.hero-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

/* ── Radio card ── */
.hero-radio-card {
    display: flex; align-items: center; gap: 10px; padding: 14px; border: 2px solid var(--border);
    border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: var(--transition);
}
.hero-radio-card:has(input:checked) { border-color: var(--lime); background: var(--lime-light); }
.hero-radio-card input { accent-color: var(--lime); }
.hero-radio-card i { font-size: 20px; color: var(--mid); }

/* ── Stat card ── */
.hero-stat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; text-align: center;
}
.hero-stat-card strong { display: block; font-size: 24px; font-family: var(--font-d); }
.hero-stat-card span { font-size: 11px; color: var(--mid); }

/* ══════════════════════════════════════
   4. HERO CORE
   ══════════════════════════════════════ */

/* ── Profile card ── */
.hero-profile-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; text-align: center;
}
.hero-profile-cover { height: 80px; background: linear-gradient(135deg, var(--lime) 0%, var(--cyan) 100%); }
.hero-profile-body { padding: 0 20px 20px; margin-top: -40px; }
.hero-profile-avatar { width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--dark); object-fit: cover; }
.hero-profile-name { font-family: var(--font-d); font-size: 22px; margin-top: 8px; }
.hero-profile-level { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--lime-light); color: var(--lime); font-size: 11px; font-weight: 700; margin-top: 4px; }
.hero-profile-stats { display: flex; justify-content: center; gap: 24px; margin: 16px 0; }
.hero-profile-stat { text-align: center; }
.hero-stat-value { display: block; font-family: var(--font-d); font-size: 20px; }
.hero-stat-label { font-size: 11px; color: var(--mid); }

/* ── Leaderboard ── */
.hero-leaderboard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.hero-leaderboard-tabs { display: flex; gap: 4px; }
.hero-leaderboard-list { margin-top: 12px; }
.hero-lb-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); margin-bottom: 4px; transition: var(--transition); animation: heroFadeUp .3s ease backwards; }
.hero-lb-item:hover { background: var(--surface); }
.hero-lb-item.hero-lb-top { background: rgba(255,215,0,.04); }
.hero-lb-rank { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 14px; flex-shrink: 0; }
.hero-lb-r1 { background: var(--gold); color: var(--dark); }
.hero-lb-r2 { background: rgba(192,192,192,.2); color: #ccc; }
.hero-lb-r3 { background: rgba(205,127,50,.2); color: #cd7f32; }
.hero-lb-rn { background: var(--surface); color: var(--mid); }
.hero-lb-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hero-lb-name { flex: 1; font-weight: 600; font-size: 13px; }
.hero-lb-level { font-size: 10px; color: var(--purple); background: rgba(155,89,255,.1); padding: 2px 8px; border-radius: var(--radius-pill); }
.hero-lb-score { font-family: var(--font-d); font-size: 16px; color: var(--lime); }
.hero-lb-detail { font-size: 11px; color: var(--mid); }

/* ── Login form ── */
.hero-login-form { max-width: 360px; margin: 0 auto; }
.hero-login-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.hero-login-form form { display: flex; flex-direction: column; gap: 10px; }
.hero-login-hint { font-size: 12px; color: var(--cyan); margin-top: 12px; text-align: center; }

/* ══════════════════════════════════════
   5. HERO BLADE (Rede Social)
   ══════════════════════════════════════ */

/* ── Stories ── */
.hero-stories-bar { display: flex; gap: 14px; padding: 16px 0; overflow-x: auto; scrollbar-width: none; }
.hero-stories-bar::-webkit-scrollbar { display: none; }
.hero-story-circle { text-align: center; cursor: pointer; flex-shrink: 0; }
.hero-story-ring { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--lime), var(--cyan)); }
.hero-story-ring.viewed { background: var(--border); }
.hero-story-ring.add { background: var(--surface); border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; }
.hero-story-inner { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--dark); object-fit: cover; }
.hero-story-ring.add .hero-story-inner { border: none; color: var(--lime); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.hero-story-name { font-size: 11px; color: var(--mid); margin-top: 4px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Composer ── */
.hero-composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; }
.hero-composer-top { display: flex; gap: 12px; }
.hero-composer-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.hero-composer-input {
    flex: 1; background: transparent; border: none; color: var(--white); font-family: var(--font-b);
    font-size: 14px; resize: none; min-height: 48px; outline: none;
}
.hero-composer-input::placeholder { color: var(--light-text); }
.hero-composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.hero-composer-btns { display: flex; gap: 4px; }
.hero-composer-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--mid); cursor: pointer; font-size: 16px; transition: var(--transition); }
.hero-composer-btn:hover { background: var(--lime-light); color: var(--lime); }

/* ── Feed post ── */
.hero-feed-wrapper { max-width: 600px; margin: 0 auto; }
.hero-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; animation: heroFadeUp .3s ease backwards; }
.hero-post-header { display: flex; gap: 10px; margin-bottom: 12px; }
.hero-post-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.hero-post-name { font-weight: 700; font-size: 14px; }
.hero-post-level { font-size: 10px; color: var(--purple); background: rgba(155,89,255,.1); padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 6px; }
.hero-post-meta { font-size: 11px; color: var(--mid); margin-top: 2px; }
.hero-post-content { font-size: 14px; line-height: 1.6; margin-bottom: 12px; word-wrap: break-word; }
.hero-post-media { width: 100%; border-radius: var(--radius); margin-bottom: 12px; }
.hero-post-stats { display: flex; gap: 12px; font-size: 12px; color: var(--mid); margin-bottom: 10px; }
.hero-reaction-badge { display: inline-flex; padding: 2px 6px; border-radius: var(--radius-pill); font-size: 11px; margin-right: 2px; }
.hero-post-actions { display: flex; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.hero-post-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--mid); font-size: 13px; cursor: pointer; transition: var(--transition); }
.hero-post-action:hover { background: var(--lime-light); color: var(--lime); }

/* ── Full profile ── */
.hero-profile-full { max-width: 700px; margin: 0 auto; }
.hero-profile-cover-lg { height: 180px; background: linear-gradient(135deg, var(--charcoal), var(--dark)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: relative; background-size: cover; background-position: center; }
.hero-profile-avatar-lg { width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--dark); position: absolute; bottom: -48px; left: 24px; object-fit: cover; }
.hero-profile-info { padding: 56px 24px 20px; }
.hero-profile-name-lg { font-family: var(--font-d); font-size: 28px; }
.hero-profile-handle { font-size: 13px; color: var(--mid); }
.hero-profile-level-lg { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--lime-light); color: var(--lime); font-size: 11px; font-weight: 700; margin-top: 6px; }
.hero-profile-bio { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 8px; line-height: 1.5; }
.hero-profile-stats-lg { display: flex; gap: 20px; margin: 16px 0; font-size: 14px; }
.hero-profile-stats-lg div strong { font-weight: 800; }
.hero-profile-tabs { display: flex; gap: 4px; padding: 0 24px; margin-bottom: 16px; }
.hero-profile-posts { padding: 0 24px; }

/* ── Messages ── */
.hero-messages-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; min-height: 500px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hero-messages-sidebar { background: var(--surface); border-right: 1px solid var(--border); }
.hero-messages-header { padding: 16px; border-bottom: 1px solid var(--border); }
.hero-threads-list { overflow-y: auto; max-height: 460px; }
.hero-thread-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; transition: var(--transition); }
.hero-thread-item:hover { background: rgba(255,255,255,.03); }
.hero-thread-item.unread { border-left: 3px solid var(--lime); }
.hero-thread-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.hero-thread-info { flex: 1; min-width: 0; }
.hero-thread-info strong { font-size: 13px; display: block; }
.hero-thread-preview { font-size: 12px; color: var(--mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.hero-thread-badge { background: var(--lime); color: var(--dark); font-size: 10px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hero-messages-chat { padding: 16px; display: flex; flex-direction: column; }
.hero-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.hero-chat-msg { max-width: 70%; }
.hero-chat-msg.own { align-self: flex-end; }
.hero-chat-msg.other { align-self: flex-start; }
.hero-chat-bubble { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; line-height: 1.4; }
.hero-chat-msg.own .hero-chat-bubble { background: var(--lime); color: var(--dark); border-bottom-right-radius: 4px; }
.hero-chat-msg.other .hero-chat-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.hero-chat-input { display: flex; gap: 8px; margin-top: auto; }

/* ── Groups ── */
.hero-groups-page .hero-section-header { flex-wrap: wrap; gap: 12px; }
.hero-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hero-group-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.hero-group-card:hover { border-color: rgba(255,255,255,.1); transform: translateY(-2px); }
.hero-group-cover { height: 80px; background: linear-gradient(135deg, var(--charcoal), var(--purple)); background-size: cover; background-position: center; position: relative; }
.hero-group-status { position: absolute; top: 8px; right: 8px; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(0,0,0,.4); color: var(--white); }
.hero-group-name { font-weight: 700; font-size: 15px; padding: 12px 14px 4px; }
.hero-group-desc { font-size: 12px; color: var(--mid); padding: 0 14px; line-height: 1.4; }
.hero-group-meta { display: flex; gap: 12px; padding: 10px 14px; font-size: 11px; color: var(--mid); }
.hero-group-card .hero-btn { margin: 0 14px 14px; }

/* ── Members ── */
.hero-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.hero-member-card { display: flex; flex-direction: column; align-items: center; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--white); transition: var(--transition); }
.hero-member-card:hover { border-color: var(--lime); transform: translateY(-2px); }
.hero-member-avatar { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px; object-fit: cover; }
.hero-member-card strong { font-size: 13px; text-align: center; }
.hero-member-level { font-size: 10px; color: var(--lime); margin-top: 2px; }

/* ── Notifications ── */
.hero-notifs-page .hero-section-header { margin-bottom: 12px; }
.hero-notif-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius); transition: var(--transition); }
.hero-notif-item.unread { background: var(--lime-light); border-left: 3px solid var(--lime); }
.hero-notif-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.hero-notif-text { flex: 1; font-size: 13px; color: rgba(255,255,255,.7); }
.hero-notif-text strong { color: var(--white); }
.hero-notif-time { font-size: 11px; color: var(--mid); white-space: nowrap; }

/* ══════════════════════════════════════
   6. HERO MARKET
   ══════════════════════════════════════ */

.hero-market-page { max-width: 1000px; margin: 0 auto; }
.hero-market-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-market-search { position: relative; flex: 1; min-width: 200px; }
.hero-market-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mid); }
.hero-market-search .hero-input { padding-left: 36px; }

/* ── Product grid ── */
.hero-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.hero-product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.hero-product-card:hover { border-color: rgba(255,255,255,.1); transform: translateY(-2px); }
.hero-product-card.promoted { border-color: var(--gold); }
.hero-product-img { height: 160px; background: var(--charcoal); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hero-product-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-product-img i { font-size: 32px; color: var(--mid); }
.hero-product-gc-badge { position: absolute; top: 8px; right: 8px; background: var(--gold); color: var(--dark); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); display: flex; align-items: center; gap: 2px; }
.hero-product-body { padding: 12px; }
.hero-product-store { font-size: 11px; color: var(--mid); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.hero-product-store i { color: var(--cyan); font-size: 12px; }
.hero-product-name { font-weight: 700; font-size: 14px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-product-prices { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hero-price-brl { font-family: var(--font-d); font-size: 18px; color: var(--lime); }
.hero-price-gc { font-size: 12px; color: var(--gold); display: flex; align-items: center; gap: 3px; }
.hero-product-meta { display: flex; gap: 8px; font-size: 11px; color: var(--mid); align-items: center; }
.hero-cond { padding: 1px 6px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; }
.hero-cond-new { background: rgba(39,174,96,.1); color: var(--green); }
.hero-cond-used { background: rgba(255,140,66,.1); color: var(--orange); }

/* ── Stores ── */
.hero-stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hero-store-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--white); transition: var(--transition); }
.hero-store-card:hover { border-color: var(--lime); }
.hero-store-banner { height: 80px; background: linear-gradient(135deg, var(--charcoal), var(--purple)); background-size: cover; }
.hero-store-card h3 { padding: 12px 14px 4px; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.hero-store-meta { display: flex; gap: 12px; padding: 4px 14px 14px; font-size: 12px; color: var(--mid); }

/* ── Cart & Checkout ── */
.hero-cart-page, .hero-checkout-page, .hero-orders-page { max-width: 700px; margin: 0 auto; }
.hero-cart-summary { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.hero-cart-total { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin-bottom: 8px; }
.hero-cart-total strong { font-family: var(--font-d); font-size: 22px; }
.hero-checkout-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
.hero-checkout-sidebar { position: sticky; top: 20px; }
.hero-checkout-payment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.hero-checkout-payment h3 { font-size: 15px; margin-bottom: 12px; }

/* ── My Store ── */
.hero-my-store .hero-store-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }

/* ── QR Pay ── */
.hero-qr-pay-page { max-width: 400px; margin: 0 auto; text-align: center; }
.hero-qr-form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.hero-qr-display { margin-top: 20px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hero-qr-code { font-family: var(--font-d); font-size: 16px; letter-spacing: 2px; color: var(--mid); }
.hero-qr-amount { font-family: var(--font-d); font-size: 36px; color: var(--gold); margin: 8px 0; }
.hero-qr-expire { font-size: 12px; color: var(--orange); }
.hero-qr-status { margin-top: 12px; font-size: 13px; padding: 8px; border-radius: var(--radius-sm); }
.hero-qr-status.waiting { background: rgba(255,215,0,.08); color: var(--gold); animation: heroPulse 2s ease infinite; }

/* ── Orders ── */
.hero-order-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; }
.hero-order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.hero-order-total { font-family: var(--font-d); font-size: 18px; }

/* ══════════════════════════════════════
   7. HERO QUIZ
   ══════════════════════════════════════ */

/* ── Lobby ── */
.hero-quiz-lobby { max-width: 400px; margin: 0 auto; }
.hero-quiz-lobby-inner { text-align: center; padding: 24px; }
.hero-quiz-lobby-inner .hero-input { margin-bottom: 12px; }
.hero-quiz-waiting { padding: 40px 0; }
.hero-quiz-waiting i { font-size: 48px; margin-bottom: 12px; }
.hero-quiz-login-required { max-width: 400px; margin: 0 auto; text-align: center; padding: 20px; }

/* ── Host ── */
.hero-quiz-host { min-height: 400px; }
.hero-quiz-host-phase { animation: heroFadeUp .3s ease; }
.hero-quiz-lobby-host { text-align: center; padding: 40px 20px; }
.hero-quiz-pin-display { font-family: var(--font-d); font-size: 72px; color: var(--lime); letter-spacing: 10px; margin: 16px 0; }
.hero-quiz-players { margin: 16px 0; }
.hero-quiz-q-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; color: var(--mid); }
.hero-quiz-timer { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--lime); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 22px; color: var(--lime); }
.hero-quiz-q-text { font-family: var(--font-d); font-size: 24px; text-align: center; margin: 16px 0 20px; line-height: 1.3; }
.hero-quiz-q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-quiz-q-opt { padding: 16px; border-radius: var(--radius); font-size: 15px; font-weight: 700; color: var(--white); min-height: 56px; display: flex; align-items: center; gap: 10px; }
.hero-quiz-q-answered { text-align: center; font-size: 12px; color: var(--mid); margin-top: 10px; }
.hero-quiz-podium-title { font-family: var(--font-d); font-size: 28px; color: var(--gold); text-align: center; margin-bottom: 20px; }
.hero-quiz-podium-places { display: flex; justify-content: center; gap: 16px; }
.hero-quiz-podium-place { text-align: center; padding: 16px; background: var(--surface); border-radius: var(--radius); min-width: 100px; }

/* ── Quiz grid ── */
.hero-quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hero-quiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.hero-quiz-card:hover { border-color: var(--lime); }
.hero-quiz-card-img { height: 120px; background: linear-gradient(135deg, var(--charcoal), rgba(163,217,0,.1)); display: flex; align-items: center; justify-content: center; }
.hero-quiz-card-img.placeholder i { font-size: 40px; color: rgba(163,217,0,.2); }
.hero-quiz-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-quiz-card-body { padding: 14px; }
.hero-quiz-card-body h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.hero-quiz-card-meta { display: flex; gap: 10px; font-size: 11px; color: var(--mid); margin-bottom: 10px; align-items: center; }

/* ── Quiz leaderboard & history ── */
.hero-quiz-lb { max-width: 600px; margin: 0 auto; }
.hero-quiz-history { max-width: 600px; margin: 0 auto; }
.hero-quiz-history-item { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; font-size: 13px; }

/* ── Challenge ── */
.hero-quiz-challenge { max-width: 480px; margin: 0 auto; }
.hero-challenge-form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }

/* ══════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .hero-messages-layout { grid-template-columns: 1fr; }
    .hero-messages-chat { display: none; }
    .hero-checkout-grid { grid-template-columns: 1fr; }
    .hero-product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hero-quiz-q-options { grid-template-columns: 1fr; }
    .hero-profile-stats-lg { flex-wrap: wrap; }
    .hero-quiz-pin-display { font-size: 48px; }
    .hero-groups-grid { grid-template-columns: 1fr; }
    .hero-quiz-history-item { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .hero-product-grid { grid-template-columns: 1fr 1fr; }
    .hero-product-img { height: 120px; }
    .hero-members-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-market-header { flex-direction: column; }
}