/* Kilole Awards - TrustLotto Casino Felt & Gold Theme */
/* BikilaTechno Trading PLC */

:root {
    /* TrustLotto Channel RGB Variables */
    --color-felt: 23 54 41;
    --color-felt-light: 34 73 57;
    --color-felt-lighter: 49 94 75;
    --color-felt-deep: 16 40 30;
    --color-felt-deepest: 10 26 19;

    --color-gold: 212 175 55;
    --color-gold-bright: 232 197 92;
    --color-gold-dim: 168 132 42;
    --color-gold-foil: 243 222 150;

    --color-ivory: 246 238 218;
    --color-ivory-dim: 233 220 190;
    --color-ink: 10 26 19;

    --color-jade: 44 150 79;
    --color-jade-bright: 47 198 92;
    --color-jade-dim: 31 92 59;

    --color-stamp: 163 36 42;
    --color-stamp-bright: 221 75 87;
    --color-stamp-dim: 107 23 27;

    /* Semantic Hex Mapping */
    --bg-dark: #0A1A13;                     /* felt-deepest */
    --bg-field: #10281E;                    /* felt-deep */
    --bg-card: rgba(23, 54, 41, 0.82);      /* felt surface with blur */
    --bg-card-hover: rgba(34, 73, 57, 0.92);/* felt-light surface */
    --border-color: rgba(49, 94, 75, 0.65); /* felt-lighter hairline */
    --border-gold-tooled: rgba(212, 175, 55, 0.35);

    --primary-gold: #D4AF37;                /* Casino brass gold */
    --primary-gold-light: #E8C55C;          /* Radiant gold tooling */
    --primary-gold-dark: #A8842A;           /* Burnished brass */
    --primary-gold-foil: #F3DE96;           /* Gold foil shimmer */

    --accent-emerald: #2FC65C;              /* Jade bright */
    --accent-jade: #2C964F;                 /* Jade default */
    --accent-blue: #38BDF8;                 /* Telemetry cyan */
    --accent-stamp: #A3242A;                /* Crimson wax seal */
    --accent-stamp-bright: #DD4B57;

    --text-white: #FAF6EC;                  /* Warm ivory white */
    --text-light: #F6EEDA;                  /* Ivory running text on felt */
    --text-muted: #D9CDB8;                  /* Dim ivory labels */
    --text-ink: #0A1A13;                    /* Fixed dark ink on gold */

    --paper-bg: #F6EEDA;                    /* Fixed vintage paper/ticket stock */
    --paper-ink: #3A2A1E;                   /* Fixed ticket text ink */

    --radius-md: 12px;
    --radius-lg: 18px;
    --font-main: 'Plus Jakarta Sans', 'Noto Sans Ethiopic', system-ui, sans-serif;
    --font-heading: 'Fraunces', 'Noto Sans Ethiopic', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Noto Sans Ethiopic', 'IBM Plex Mono', monospace;
}

/* Ethiopic & Amharic Typography Normalization */
:lang(am), [lang="am"], .lang-am, .amharic-text {
    font-family: 'Noto Sans Ethiopic', 'Plus Jakarta Sans', system-ui, sans-serif !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.65;
}

:lang(am) h1, :lang(am) h2, :lang(am) h3, :lang(am) h4,
[lang="am"] h1, [lang="am"] h2, [lang="am"] h3, [lang="am"] h4,
.lang-am h1, .lang-am h2, .lang-am h3, .lang-am h4 {
    letter-spacing: normal !important;
    line-height: 1.35 !important;
}

:lang(am) .btn, :lang(am) .badge, :lang(am) .sub-tag, :lang(am) .hero-badge,
[lang="am"] .btn, [lang="am"] .badge, [lang="am"] .sub-tag, [lang="am"] .hero-badge,
.lang-am .btn, .lang-am .badge, .lang-am .sub-tag, .lang-am .hero-badge {
    letter-spacing: normal !important;
    text-transform: none !important;
}

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

body {
    background-color: var(--bg-field);
    background-image: 
        radial-gradient(ellipse 120% 80% at 15% -10%, rgba(243, 222, 150, 0.14), transparent 60%),
        radial-gradient(ellipse 90% 60% at 100% 110%, rgba(243, 222, 150, 0.09), transparent 55%),
        linear-gradient(180deg, rgba(10, 26, 19, 0.90) 0%, rgba(16, 40, 30, 0.96) 100%);
    background-attachment: fixed;
    color: var(--text-light);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-white);
    letter-spacing: -0.01em;
}

/* Nav */
.top-nav {
    background: rgba(16, 40, 30, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-gold-tooled);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 14px 0;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-group {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo-img {
    width: 48px;
    height: 48px;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), filter 0.22s ease;
}

.brand-group:hover .brand-logo-img {
    transform: translateY(-1px) scale(1.08) rotate(2deg);
    filter: drop-shadow(0 4px 16px rgba(212, 175, 55, 0.55));
}

.pass-emblem-img {
    width: 44px;
    height: 44px;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.brand-logo-badge {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-gold-foil, #F3DE96) 0%, var(--primary-gold, #D4AF37) 50%, var(--color-gold-dim, #A8842A) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0A1A13;
    font-weight: 800;
    font-size: 20px;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.brand-group:hover .brand-logo-badge {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.brand-titles {
    display: flex;
    flex-direction: column;
}

.company-name {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.05em;
    color: var(--text-white);
}

.compliance-tag {
    font-size: 11px;
    color: var(--primary-gold-light);
}

.nav-links {
    display: flex;
    gap: 24px;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--primary-gold-light);
}

.user-profile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.user-phone {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
}

.user-status-pill {
    background: rgba(245, 158, 11, 0.15);
    color: var(--primary-gold-light);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Hero */
.hero-section {
    padding: 70px 24px 50px;
    background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
    text-align: center;
}

.hero-container {
    max-width: 980px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.15);
    color: var(--primary-gold);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #CBD5E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 720px;
    margin: 0 auto 36px;
}

.hero-mechanics-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    max-width: 860px;
    margin: 0 auto 40px;
}

.mech-card {
    flex: 1;
    padding: 0 16px;
}

.highlight-mech .mech-val {
    color: var(--primary-gold);
}

.mech-val {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-white);
}

.mech-lbl {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.mech-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

.edition-status-card {
    background: rgba(19, 27, 46, 0.8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.edition-live-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text-white);
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background: var(--accent-emerald);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-emerald);
}

.edition-metrics {
    display: flex;
    gap: 20px;
    align-items: center;
}

.metric-label {
    font-size: 13px;
    color: var(--text-muted);
}

.metric-value {
    font-weight: 700;
    color: var(--text-white);
}

.text-accent {
    color: var(--primary-gold-light);
}

.status-pill {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-emerald);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* Sections */
.section {
    padding: 60px 24px;
}

.section-container {
    max-width: 1280px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}

.section-header p {
    font-size: 16px;
    color: var(--text-muted);
}

/* Prizes Grid */
.prizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.prize-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.prize-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.prize-rank-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    color: var(--primary-gold-light);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    z-index: 2;
}

.voter-badge {
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
    border: none;
}

.prize-img-wrap {
    height: 180px;
    width: 100%;
    overflow: hidden;
}

.prize-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.prize-card:hover .prize-img-wrap img {
    transform: scale(1.05);
}

.prize-details {
    padding: 20px;
}

.prize-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.prize-location {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.prize-value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-gold-light);
}

/* Voter Rewards Dashboard */
.rewards-dashboard-panel {
    background: linear-gradient(145deg, #131B2E 0%, #0F1626 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 36px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.sub-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-gold);
    letter-spacing: 0.1em;
}

.daily-claim-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.claim-lbl {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}

.claim-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-emerald);
}

.qualification-meter-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 26px;
    border: 1px solid var(--border-color);
}

.progress-bar-container {
    margin: 20px 0;
}

.progress-bar-track {
    background: #0A1A13;
    height: 18px;
    border-radius: 9px;
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

.progress-bar-fill {
    background: linear-gradient(90deg, #A8842A 0%, #D4AF37 50%, #2C964F 100%);
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(44, 150, 79, 0.45);
}

.milestone-pip {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10281E;
    border: 2px solid var(--primary-gold);
    z-index: 2;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.milestone-pip.achieved {
    background: #2C964F;
    border-color: #FFF3C4;
    box-shadow: 0 0 10px #2C964F, inset 0 0 4px #FFF;
}

.milestone-pip:hover {
    transform: translate(-50%, -50%) scale(1.35);
}

.pip-50 { left: 10%; }
.pip-150 { left: 30%; }
.pip-300 { left: 60%; }
.pip-500 { left: 100%; }

.progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    color: var(--text-muted);
}

.qualification-status-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(245, 158, 11, 0.05);
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}

.status-icon {
    font-size: 32px;
}

.vpr-ticket {
    margin-left: auto;
    background: #000;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--primary-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vpr-label {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.vpr-code {
    font-family: monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-gold-light);
}

.vpr-badge {
    background: var(--accent-emerald);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.payment-action-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 41, 59, 0.6);
    padding: 16px 20px;
    border-radius: var(--radius-md);
}

.banner-text {
    display: flex;
    flex-direction: column;
}

/* Category Filters */
.category-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.filter-chip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-chip.active, .filter-chip:hover {
    background: var(--primary-gold);
    color: #000;
    border-color: var(--primary-gold);
}

/* Creators Grid */
.creators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.creator-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s;
}

.creator-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, 0.4);
}

.creator-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.creator-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-gold);
}

.creator-info h4 {
    font-size: 18px;
    margin-bottom: 2px;
}

.creator-brand {
    font-size: 13px;
    color: var(--primary-gold-light);
    font-weight: 600;
}

.creator-rank-tag {
    position: absolute;
    top: 18px;
    right: 18px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #1E293B;
}

.rank-gold {
    background: #FEF3C7;
    color: #92400E;
}

.rank-silver {
    background: #F1F5F9;
    color: #334155;
}

.rank-bronze {
    background: #FFEDD5;
    color: #9A3412;
}

.creator-bio {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex-grow: 1;
}

.creator-award-banner {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--primary-gold);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-gold-light);
    margin-bottom: 16px;
}

.creator-vote-stats {
    background: rgba(0, 0, 0, 0.25);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
}

.stat-group {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

.stat-val {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-white);
}

.creator-actions {
    display: flex;
    gap: 10px;
}

/* Audit / Verifier */
.audit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
}

.audit-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.audit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.audit-field {
    margin-bottom: 16px;
}

.audit-field label {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}

.hash-box {
    background: #0A0F1D;
    font-family: monospace;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    word-break: break-all;
    color: var(--primary-gold-light);
}

.val-box {
    background: #0A0F1D;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.highlight-vpr {
    color: var(--accent-emerald);
    font-family: monospace;
}

.verifier-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.input-group {
    display: flex;
    gap: 10px;
}

.input-group input {
    flex: 1;
    background: #0A0F1D;
    border: 1px solid var(--border-color);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: monospace;
}

.verification-result-box {
    margin-top: 20px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid var(--accent-emerald);
    border-radius: var(--radius-md);
    padding: 16px;
}

.result-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-emerald);
    font-size: 14px;
    margin-bottom: 12px;
}

.proof-details {
    font-size: 12px;
    line-height: 1.8;
}

.hash-text {
    font-family: monospace;
    color: var(--primary-gold-light);
    word-break: break-all;
}

.winner-alert {
    margin-top: 12px;
    background: var(--primary-gold);
    color: #000;
    font-weight: 800;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

/* Admin Controls */
.admin-panel-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.admin-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.admin-action-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
}

.admin-action-item h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.admin-action-item p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    flex-grow: 1;
}

.reconciliation-report {
    margin-top: 24px;
    background: #0A0F1D;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--radius-md);
}

.report-content {
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    color: var(--text-light);
    margin-top: 10px;
}

/* Buttons */
.btn {
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary-gold);
    color: #000;
}

.btn-primary:hover {
    background: var(--primary-gold-light);
}

.btn-gold {
    background: linear-gradient(135deg, #F3DE96 0%, #D4AF37 50%, #A8842A 100%);
    color: #0A1A13 !important;
    font-weight: 800;
    border: 1px solid #E8C55C;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 12px rgba(212, 175, 55, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-gold:hover {
    background: linear-gradient(135deg, #FFF0B8 0%, #E8C55C 50%, #BD9632 100%);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 20px rgba(232, 197, 92, 0.4);
    transform: translateY(-2px);
    opacity: 1;
}

.btn-outline {
    background: rgba(23, 54, 41, 0.4);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    transition: all 0.2s ease;
}

.btn-outline:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold-light);
    background: rgba(34, 73, 57, 0.6);
}

.btn-outline-sm {
    background: rgba(23, 54, 41, 0.5);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-outline-sm:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold-light);
}

.btn-secondary {
    background: rgba(34, 73, 57, 0.85);
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.btn-secondary:hover {
    background: rgba(49, 94, 75, 0.95);
    border-color: var(--border-gold-tooled);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 6px;
    flex: 1;
}

/* Creator Studio Styles */
.creator-modal-card {
    max-width: 660px !important;
}

.studio-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.studio-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-gold);
}

.studio-brand {
    font-size: 14px;
    color: var(--primary-gold-light);
    font-weight: 600;
}

.cat-pill {
    background: #1E293B;
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.studio-rank-badge {
    display: inline-block;
    background: var(--primary-gold);
    color: #000;
    font-weight: 800;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    margin-top: 6px;
}

.studio-award-box {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid var(--primary-gold);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #fff;
    margin-bottom: 14px;
}

.gap-alert {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid var(--accent-blue);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    color: #93C5FD;
    margin-bottom: 16px;
}

.studio-metrics-strip {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.metric-box {
    flex: 1;
    background: #0A0F1D;
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.m-val {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: var(--text-white);
    display: block;
}

.m-lbl {
    font-size: 11px;
    color: var(--text-muted);
}

.studio-section {
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.studio-section h4 {
    font-size: 15px;
    margin-bottom: 4px;
}

.studio-subtext {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.studio-fans-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.studio-fans-table th {
    text-align: left;
    color: var(--text-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.studio-fans-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.phone-masked {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 4px;
}

.fan-votes {
    color: var(--primary-gold-light);
    font-weight: 700;
}

.badge-muted {
    background: #1E293B;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.campaign-link-box label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

/* Sponsor Ticker Marquee (Delegated to public.css for full rich branding) */
.sponsor-ticker-section {
    background: #081710;
    overflow: hidden;
}

/* Gamified Grid & Golden Pass */
.streak-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid var(--primary-gold);
    padding: 8px 16px;
    border-radius: 20px;
}

.streak-flame {
    font-size: 24px;
}

.streak-count {
    font-weight: 800;
    font-size: 14px;
    color: var(--primary-gold-light);
    display: block;
}

.streak-sub {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.gamified-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .gamified-grid { grid-template-columns: 1fr; }
}

.gamified-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
}

.card-inner-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.badge-tier {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-gold-light);
    background: rgba(245, 158, 11, 0.15);
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 6px;
}

.daily-vote-badge {
    background: #0A0F1D;
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 10px;
    text-align: center;
}

.d-val {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: var(--accent-emerald);
    display: block;
}

.d-lbl {
    font-size: 10px;
    color: var(--text-muted);
}

.action-buttons-strip {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.action-buttons-strip .btn {
    flex: 1;
}

/* Achievements Shelf */
.achievements-shelf {
    border-top: 1px solid var(--border-color);
    padding-top: 18px;
    margin-top: 20px;
}

.achievements-shelf h4 {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.achievements-flex {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.achievement-badge {
    background: #0A0F1D;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    opacity: 0.5;
    transition: all 0.2s;
}

.achievement-badge.unlocked {
    opacity: 1;
    border-color: var(--primary-gold);
    background: rgba(245, 158, 11, 0.08);
}

.ach-icon {
    font-size: 18px;
}

/* 3D Holographic Golden Pass - TrustLotto Collectible Card */
.golden-pass-card {
    background: #F6EEDA;
    color: #3A2A1E;
    border: 2px solid #D4AF37;
    border-radius: var(--radius-lg);
    padding: 26px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 25px rgba(212, 175, 55, 0.25), inset 0 0 0 1px rgba(212, 175, 55, 0.4);
    min-height: 290px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.golden-pass-card:hover {
    transform: translateY(-4px) scale(1.01);
}

.pass-hologram {
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: linear-gradient(115deg, transparent 35%, rgba(243, 222, 150, 0.35) 48%, rgba(212, 175, 55, 0.2) 52%, transparent 65%);
    transform: rotate(30deg);
    pointer-events: none;
    animation: holoShine 9s infinite linear;
}

@keyframes holoShine {
    0% { transform: translateY(-50%) rotate(30deg); }
    100% { transform: translateY(50%) rotate(30deg); }
}

.pass-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pass-emblem {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #F3DE96 0%, #D4AF37 50%, #A8842A 100%);
    color: #0A1A13;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #E8C55C;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pass-title-block {
    display: flex;
    flex-direction: column;
}

.pass-org {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #3A2A1E;
}

.pass-series {
    font-size: 10px;
    color: #8A6A1E;
    font-weight: 700;
}

.pass-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.pass-chip {
    width: 48px;
    height: 34px;
    background: linear-gradient(135deg, #F3DE96 0%, #D4AF37 60%, #8A6A1E 100%);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pass-status-indicator {
    background: rgba(10, 26, 19, 0.08);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(138, 106, 30, 0.3);
}

.pass-status-text {
    font-size: 11px;
    font-weight: 700;
    color: #1F5C3B;
}

.pass-vpr-display {
    background: #0A1A13;
    border: 1px solid #D4AF37;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.pass-vpr-label {
    font-size: 9px;
    color: #D9CDB8;
    letter-spacing: 0.08em;
    display: block;
}

.pass-vpr-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: #F3DE96;
    letter-spacing: 0.05em;
}

.pass-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px dashed rgba(58, 42, 30, 0.25);
    padding-top: 14px;
}

.pass-lbl {
    font-size: 9px;
    color: #A39682;
    display: block;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.pass-owner {
    font-size: 13px;
    font-weight: 800;
    color: #FAF6EC;
    font-family: var(--font-mono);
}

.pass-vrf-stamp {
    text-align: right;
    font-size: 10px;
    color: var(--accent-emerald);
}

.pass-vrf-stamp strong {
    display: block;
    font-size: 11px;
}

/* Section Header Flex */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-header-text h2 {
    font-size: 30px;
    margin-bottom: 4px;
}

.section-header-text p {
    color: var(--text-muted);
    font-size: 15px;
}

/* Sponsors Tier Matrix */
.sponsors-tier-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.sponsor-tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
}

.sponsor-tier-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-gold);
}

.sponsor-tier-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--primary-gold);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sponsor-company-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.sponsor-partner-role {
    font-size: 12px;
    color: var(--primary-gold-light);
    margin-bottom: 12px;
}

.sponsor-tagline {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex-grow: 1;
}

.sponsor-value-tag {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: var(--text-white);
}

.sponsor-cta-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid var(--primary-gold);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cta-text h3 {
    font-size: 20px;
    margin-bottom: 4px;
}

.cta-text p {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 600px;
}

/* Admin Tabs */
.admin-tabs {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
    padding-bottom: 12px;
}

.admin-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}

.admin-tab-btn.active, .admin-tab-btn:hover {
    background: var(--bg-card-hover);
    color: var(--primary-gold);
}

.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 12px;
}

.logs-table th {
    text-align: left;
    color: var(--text-muted);
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.logs-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.badge-low {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-emerald);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.badge-medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--primary-gold);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
}

.modal-body {
    padding: 24px;
}

.modal-intro {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.modal-field {
    margin-bottom: 16px;
}

.modal-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}

.form-select, .form-input {
    width: 100%;
    background: #0A0F1D;
    border: 1px solid var(--border-color);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.vote-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pack-opt {
    background: #0A0F1D;
    border: 1px solid var(--border-color);
    padding: 10px 8px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.pack-opt.active, .pack-opt:hover {
    border-color: var(--primary-gold);
    background: rgba(245, 158, 11, 0.1);
}

.pack-votes {
    font-weight: 700;
    font-size: 13px;
    display: block;
}

.pack-price {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}

.pack-tag {
    position: absolute;
    top: -6px;
    right: 4px;
    background: var(--primary-gold);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
}

.payment-methods {
    display: flex;
    gap: 12px;
}

.provider-radio {
    flex: 1;
    cursor: pointer;
}

.provider-radio input {
    display: none;
}

.provider-badge {
    display: block;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    background: #0A0F1D;
}

.provider-radio input:checked + .provider-badge.telebirr {
    border-color: #0EA5E9;
    color: #38BDF8;
    background: rgba(14, 165, 233, 0.1);
}

.provider-radio input:checked + .provider-badge.cbe {
    border-color: #8B5CF6;
    color: #A78BFA;
    background: rgba(139, 92, 246, 0.1);
}

.checkout-summary {
    background: #0A0F1D;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.total-line {
    font-size: 15px;
    color: var(--primary-gold-light);
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: 8px;
    margin-bottom: 0;
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 14px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 13px;
    animation: toastIn 0.3s ease;
}

.toast.success { border-color: var(--accent-emerald); }
.toast.error { border-color: #EF4444; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Footer */
.footer {
    background: #060913;
    border-top: 1px solid var(--border-color);
    padding: 50px 24px 24px;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-col h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--primary-gold);
}

.footer-col p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.footer-bottom {
    text-align: center;
    font-size: 12px;
    color: #64748B;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

/* ==========================================================================
   ADVANCED GAMIFICATION & TRUSTLOTTO-INSPIRED ENHANCEMENTS
   ========================================================================== */

/* Round Icon Buttons */
.btn-icon-round {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.btn-icon-round:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--primary-gold);
    transform: scale(1.08);
}

/* 1. Voter Roadmap & Cost Calculator Widget */
.calculator-panel {
    background: linear-gradient(145deg, #131B2E, #0E1626);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-top: 30px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.calculator-panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.08), transparent 70%);
    pointer-events: none;
}

.calc-header {
    margin-bottom: 24px;
}

.calc-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--primary-gold-light);
    background: rgba(245, 158, 11, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.calc-header h3 {
    font-size: 20px;
    margin-bottom: 6px;
}

.calc-header p {
    font-size: 13px;
    color: var(--text-muted);
}

.calc-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    background: rgba(10, 15, 29, 0.6);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 24px;
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.s-label {
    color: var(--text-light);
    font-weight: 600;
}

.s-val {
    font-size: 14px;
    font-family: var(--font-heading);
}

.custom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #1E293B;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-gold-light), var(--primary-gold-dark));
    cursor: pointer;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
    transition: transform 0.15s ease;
}

.custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
}

.calc-results-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: center;
    background: rgba(245, 158, 11, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.res-box {
    display: flex;
    flex-direction: column;
}

.r-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.r-val {
    font-size: 17px;
    font-family: var(--font-heading);
    color: #fff;
}

.text-gold { color: var(--primary-gold-light) !important; }
.text-emerald { color: var(--accent-emerald) !important; }

/* 2. Voter Daily Quests & Missions Board */
.missions-panel {
    background: rgba(10, 15, 29, 0.7);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 24px;
}

.missions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.missions-header h3 {
    font-size: 18px;
}

.voter-xp-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold-light);
    font-weight: 700;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
}

.missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.mission-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.mission-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 158, 11, 0.4);
}

.mission-status-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mission-card.completed .mission-status-icon {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-emerald);
}

.mission-card.completed {
    border-color: rgba(16, 185, 129, 0.4);
}

.mission-card.highlight-mission {
    border-color: var(--primary-gold);
    background: linear-gradient(145deg, var(--bg-card), rgba(245, 158, 11, 0.08));
}

.mission-info h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}

.mission-info p {
    font-size: 11px;
    color: var(--text-muted);
}

.mission-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-emerald);
    white-space: nowrap;
}

.mission-badge.in-progress-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.mission-badge.gold-badge {
    background: rgba(245, 158, 11, 0.2);
    color: var(--primary-gold-light);
}

/* 3. Head-to-Head Creator Battle Comparison Arena */
.battle-arena-panel {
    background: linear-gradient(145deg, #111827, #0B111E);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 35px;
    position: relative;
    overflow: hidden;
}

.battle-arena-panel::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.12), transparent 70%);
    pointer-events: none;
}

.battle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.battle-selector-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.battle-vs-badge {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #EF4444;
    background: rgba(239, 68, 68, 0.15);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.battle-stage {
    background: rgba(10, 15, 29, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 24px;
}

.battle-fighters-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.battle-fighter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.battle-fighter.fighter-right {
    flex-direction: row-reverse;
    text-align: right;
}

.fighter-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-gold);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.battle-fighter.fighter-right .fighter-avatar {
    border-color: #3B82F6;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.fighter-meta h4 {
    font-size: 17px;
    margin-bottom: 2px;
}

.fighter-brand {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.fighter-votes {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.battle-center-divider {
    text-align: center;
}

.battle-swords {
    font-size: 28px;
    animation: battlePulse 1.8s infinite ease-in-out;
}

@keyframes battlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(5deg); }
}

.battle-tug-track {
    width: 100%;
    height: 18px;
    background: #1E293B;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tug-fill-left {
    background: linear-gradient(90deg, #D97706, #F59E0B);
    transition: width 0.4s ease;
}

.tug-fill-right {
    background: linear-gradient(90deg, #3B82F6, #2563EB);
    transition: width 0.4s ease;
}

.battle-percentage-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 16px;
}

.battle-status-callout {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    padding: 10px 16px;
    text-align: center;
    font-size: 13px;
    margin-bottom: 18px;
}

.battle-actions-strip {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* 4. Interactive Corporate Sponsorship Planner */
.sponsor-planner-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.planner-tier-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.planner-tab {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.planner-tab:hover {
    color: #fff;
    border-color: rgba(245, 158, 11, 0.5);
}

.planner-tab.active {
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-dark));
    color: #000;
    border-color: var(--primary-gold-light);
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.planner-card-body {
    background: rgba(10, 15, 29, 0.7);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
}

.planner-deliverables-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.planner-deliverables-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-light);
}

.planner-deliverables-list li .bullet-check {
    color: var(--accent-emerald);
    font-weight: 900;
}

/* 5. Full-Screen Draw Suspense Overlay & 3D Notary Seal (TrustLotto-Style) */
.draw-suspense-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #10162A 0%, #050811 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 30px;
}

.entropy-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.overlay-close-btn {
    position: absolute;
    top: 24px;
    right: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    color: #fff;
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.overlay-close-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: #EF4444;
}

.suspense-container {
    position: relative;
    z-index: 2;
    max-width: 720px;
    width: 100%;
    text-align: center;
}

/* Golden Rotating Notary Seal */
.notary-seal-wrapper {
    width: 140px;
    height: 140px;
    margin: 0 auto 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sealRotate 20s linear infinite;
}

@keyframes sealRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.seal-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed rgba(245, 158, 11, 0.6);
}

.outer-ring {
    width: 100%;
    height: 100%;
}

.inner-ring {
    width: 78%;
    height: 78%;
    border-style: solid;
    border-width: 1px;
    border-color: var(--primary-gold-light);
}

.seal-disc {
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, #D97706, #92400E);
    border-radius: 50%;
    border: 2px solid var(--primary-gold-light);
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 900;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    padding: 6px;
}

.seal-brand {
    font-size: 7px;
    letter-spacing: 0.15em;
}

.seal-star {
    font-size: 6px;
    color: #FFFBEB;
}

.seal-center {
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    font-family: var(--font-heading);
}

.seal-sub {
    font-size: 6px;
    letter-spacing: 0.1em;
}

.telemetry-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--primary-gold-light);
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.suspense-headline {
    font-size: 28px;
    margin-bottom: 8px;
}

.suspense-sub {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto 24px;
}

.entropy-visualizer {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 24px;
}

.entropy-hex-stream {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--primary-gold-light);
    word-break: break-all;
    margin-bottom: 8px;
}

.entropy-formula {
    font-size: 12px;
    color: var(--text-muted);
}

.suspense-timer-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--primary-gold);
    border-radius: var(--radius-md);
    padding: 12px 24px;
}

.timer-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--primary-gold-light);
    margin-bottom: 4px;
}

.timer-val {
    font-size: 26px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: #fff;
}

/* Stage 3: Winner Proclamation Showcase Card */
.suspense-winner-card {
    background: linear-gradient(145deg, #182238, #0E1628);
    border: 2px solid var(--primary-gold);
    border-radius: var(--radius-lg);
    padding: 36px 30px;
    box-shadow: 0 0 60px rgba(245, 158, 11, 0.4), 0 20px 40px rgba(0, 0, 0, 0.8);
    animation: winnerCardPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes winnerCardPop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.winner-trophy-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-dark));
    color: #000;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 6px 18px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.winner-title {
    font-size: 32px;
    color: #fff;
    margin-bottom: 4px;
}

.winner-edition-tag {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.winner-showcase-box {
    background: rgba(10, 15, 29, 0.8);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-md);
    padding: 22px;
    margin-bottom: 24px;
}

.winner-vpr-highlight {
    font-family: 'JetBrains Mono', monospace;
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-gold-light);
    letter-spacing: 0.05em;
    margin-bottom: 14px;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.winner-meta-strip {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

.winner-meta-strip span {
    color: var(--text-muted);
    margin-right: 4px;
}

.overlay-secondaries-section {
    margin-bottom: 24px;
    text-align: left;
}

.overlay-secondaries-section h4 {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 12px;
    text-align: center;
}

.overlay-secondaries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.secondary-winner-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
}

.sec-vpr {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary-gold-light);
    font-weight: 700;
}

.sec-prize {
    font-size: 11px;
    color: var(--text-muted);
}

.winner-actions-strip {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* 6. Creator Campaign Poster Canvas Modal */
.poster-modal-card {
    max-width: 540px !important;
}

.poster-preview-wrap {
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.poster-canvas-preview {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
}

/* 7. Retro-Futuristic USSD Feature Phone Simulator (*805#) */
.ussd-modal-card {
    max-width: 380px !important;
    background: #111827 !important;
    border: 2px solid #374151 !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.2) !important;
    padding: 24px !important;
}

.ussd-phone-screen {
    background: #064e3b;
    border: 3px inset #047857;
    border-radius: 12px;
    padding: 16px;
    color: #6ee7b7;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    min-height: 180px;
    white-space: pre-wrap;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 16px;
    overflow-y: auto;
    max-height: 220px;
}

.ussd-input-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ussd-input-field {
    flex: 1;
    background: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 8px;
    color: #f9fafb;
    font-family: monospace;
    padding: 8px 12px;
    font-size: 14px;
}

.ussd-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ussd-key {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
}

.ussd-key:hover {
    background: #374151;
    border-color: #6b7280;
}

.ussd-key:active {
    background: #10b981;
    color: #064e3b;
    transform: scale(0.95);
}

.ussd-key sub {
    display: block;
    font-size: 9px;
    color: #9ca3af;
    font-weight: 400;
}

.ussd-quick-dial-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #374151;
}

.ussd-quick-btn {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    border-radius: 6px;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
    font-family: monospace;
    transition: background 0.15s ease;
}

.ussd-quick-btn:hover {
    background: rgba(16, 185, 129, 0.3);
}


/* ==========================================================================
   DEEP LINKS, DYNAMIC QR CODES & SOCIAL SHARING STYLES
   ========================================================================== */

@keyframes deepLinkGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7), inset 0 0 0 2px var(--primary-gold-bright);
        transform: scale(1.02);
    }
    50% {
        box-shadow: 0 0 35px 8px rgba(212, 175, 55, 0.9), inset 0 0 0 3px var(--primary-gold-foil);
        transform: scale(1.03);
    }
    100% {
        box-shadow: 0 0 16px 2px rgba(212, 175, 55, 0.4), inset 0 0 0 2px var(--primary-gold);
        transform: scale(1);
    }
}

.deep-link-highlight {
    animation: deepLinkGlow 2.5s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
    border-color: var(--primary-gold-bright) !important;
    position: relative;
    z-index: 20;
}

/* Share & Deep Link Modal */
.share-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.share-creator-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(16, 40, 30, 0.85);
    border: 1px solid var(--border-gold-tooled);
    border-radius: 12px;
}

.share-creator-preview img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--primary-gold);
}

.share-copy-strip {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-copy-input {
    flex: 1;
    background: #0A1A13;
    border: 1px solid var(--border-gold-tooled);
    color: var(--color-gold-bright);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    outline: none;
}

.share-copy-input:focus {
    border-color: var(--primary-gold-bright);
}

.share-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.share-channel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
    border: none;
    cursor: pointer;
}

.share-channel-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.share-btn-telegram {
    background: #229ED9;
    color: #FFFFFF;
}

.share-btn-whatsapp {
    background: #25D366;
    color: #FFFFFF;
}

.share-btn-ussd {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
}

.share-btn-x {
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.share-qr-section {
    background: #F6EEDA;
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    color: #3A2A1E;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.share-qr-image {
    max-width: 180px;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-qr-hint {
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
    display: block;
    color: #5A4432;
}

/* Scannable QR on Golden Pass */
.pass-qr-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(58, 42, 30, 0.25);
}

.pass-qr-box {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(58, 42, 30, 0.15);
    transition: background 0.15s ease;
}

.pass-qr-box:hover {
    background: rgba(255, 255, 255, 0.85);
}

.pass-qr-img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
}

.pass-qr-text {
    font-size: 10px;
    font-weight: 700;
    color: #3A2A1E;
    text-align: left;
    line-height: 1.2;
}

/* Public Pass Verification Modal */
.verify-modal-card {
    background: linear-gradient(135deg, #10281E 0%, #173629 100%);
    border: 2px solid var(--primary-gold);
    border-radius: 16px;
    padding: 1.5rem;
    color: var(--color-ivory);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.verify-stamp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gold-tooled);
}

.verify-badge-icon {
    width: 48px;
    height: 48px;
    background: var(--color-jade);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 0 16px rgba(44, 150, 79, 0.4);
}

.verify-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 1rem;
}

.verify-details-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.verify-details-table td:first-child {
    color: var(--color-gold-foil);
    font-weight: 600;
    width: 40%;
}

.verify-details-table td:last-child {
    font-family: var(--font-mono);
    color: var(--color-ivory);
    word-break: break-all;
}

/* Quick Vote Modal */
.quick-vote-bundles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 1rem 0;
}

.quick-vote-btn {
    background: rgba(16, 40, 30, 0.85);
    border: 1px solid var(--border-gold-tooled);
    color: var(--color-ivory);
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.quick-vote-btn:hover {
    border-color: var(--primary-gold-bright);
    background: rgba(34, 73, 57, 0.9);
    transform: translateY(-2px);
}

.quick-vote-btn.highlight-bundle {
    border-color: var(--color-jade-bright);
    background: rgba(44, 150, 79, 0.2);
}

.quick-vote-btn strong {
    display: block;
    font-size: 16px;
    color: var(--primary-gold-bright);
}

.quick-vote-btn span {
    font-size: 11px;
    color: var(--text-muted);
}