/* ==========================================================================
   Emerald & Gold theme (Custom UI -> theme: emerald)
   Inspired by event-poster styling: forest green, mustard gold, dashed
   "ticket" panels, pill tags and a stamp-style status badge.
   ========================================================================== */
[data-theme="emerald"] {
    --bg: #0a2619; --bg-2: #071c12; --card: #0f3524; --card-2: #14442f;
    --line: rgba(222, 201, 110, .3); --text: #f7f3e2; --muted: #b4c7b2;
    --tint: rgba(222, 201, 110, .09);
    --nav-bg: rgba(10, 38, 25, .7); --nav-bg-solid: rgba(7, 28, 18, .95);
    --chip-bg: rgba(7, 28, 18, .8);
    --ink: #0a2619;
    --emerald: #0f8a5a;
    --gold: #dec96e;
    --shadow: 0 22px 50px -24px rgba(0, 0, 0, .85);
    --radius: 22px;
}

/* Tone-on-tone geometric pattern (hero + page headers) */
[data-theme="emerald"] .hero,
[data-theme="emerald"] .page-hero,
[data-theme="emerald"] .profile {
    background:
        repeating-linear-gradient(118deg, transparent 0 58px, rgba(222, 201, 110, .07) 58px 61px),
        repeating-linear-gradient(62deg, transparent 0 94px, rgba(222, 201, 110, .05) 94px 96px),
        radial-gradient(800px 460px at 80% 25%, rgba(222, 201, 110, .2), transparent 70%),
        radial-gradient(700px 420px at 0% 100%, rgba(15, 138, 90, .35), transparent 70%),
        var(--bg);
}
[data-theme="emerald"] .hero::before { display: none; }

/* Dashed "ticket" panels */
[data-theme="emerald"] .step,
[data-theme="emerald"] .award,
[data-theme="emerald"] .cand,
[data-theme="emerald"] .panel,
[data-theme="emerald"] .scorecard,
[data-theme="emerald"] .stats-grid,
[data-theme="emerald"] .cta,
[data-theme="emerald"] .cd-box,
[data-theme="emerald"] .notice,
[data-theme="emerald"] .search input {
    border: 2px dashed var(--line);
}
[data-theme="emerald"] .stats-grid,
[data-theme="emerald"] .scorecard { background: transparent; gap: 0; }
[data-theme="emerald"] .stat,
[data-theme="emerald"] .scorecard div { background: var(--bg-2); }
[data-theme="emerald"] .stat + .stat,
[data-theme="emerald"] .scorecard div + div { border-left: 2px dashed var(--line); }
[data-theme="emerald"] .stat i { background: var(--gold); color: var(--ink); border-radius: 50%; }

/* Gold + green pill buttons */
/* Buttons: one loud button per group (solid gold); every secondary action is a quiet outline,
   so the two never compete. Green stays the theme's surface/accent colour, not a button fill. */
[data-theme="emerald"] .btn-primary { background: var(--gold); color: var(--ink); box-shadow: none; border: 2px solid var(--gold); }
[data-theme="emerald"] .btn-primary:hover { background: color-mix(in srgb, var(--gold) 82%, #ffffff); border-color: color-mix(in srgb, var(--gold) 82%, #ffffff); color: var(--ink); box-shadow: 0 10px 24px -12px var(--gold); }
[data-theme="emerald"] .btn-ghost { background: transparent; color: var(--text); border: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); }
[data-theme="emerald"] .btn-ghost:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); border-color: var(--gold); }
[data-theme="emerald"] .btn-ghost.is-disabled { background: transparent; color: var(--muted); border-color: var(--line); }

/* Gold tag pills */
[data-theme="emerald"] .eyebrow,
[data-theme="emerald"] .pill { display: inline-block; background: var(--gold); color: var(--ink); padding: .3rem 1rem; border-radius: 999px; letter-spacing: .08em; font-weight: 800; }
[data-theme="emerald"] .filter { border: 2px solid var(--line); }
[data-theme="emerald"] .filter.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Headline: white with gold highlight (solid, like the poster) */
[data-theme="emerald"] .grad { background: none; color: var(--gold); -webkit-text-fill-color: var(--gold); }
[data-theme="emerald"] .hero h1,
[data-theme="emerald"] .title { text-transform: none; }

/* Stamp-style status badge */
[data-theme="emerald"] .chip {
    padding: .5rem 1.2rem; border-radius: 12px; border: 3px double currentColor; background: transparent;
    text-transform: uppercase; letter-spacing: .14em; font-weight: 800; transform: rotate(-3deg);
}
[data-theme="emerald"] .chip.live { color: #6ef0b0; }
[data-theme="emerald"] .chip.soon { color: var(--gold); }

/* Cards */
[data-theme="emerald"] .award-ico,
[data-theme="emerald"] .brand-mark { background: var(--gold); color: var(--ink); }
[data-theme="emerald"] .step i { background: var(--emerald); color: #fff; }
[data-theme="emerald"] .rank { border: 2px solid var(--gold); color: var(--gold); }
[data-theme="emerald"] .rank.r1 { background: var(--gold); color: var(--ink); }
[data-theme="emerald"] .bar i { background: linear-gradient(90deg, var(--emerald), var(--gold)); }
[data-theme="emerald"] .cand-photo { border-bottom: 2px dashed var(--line); }
[data-theme="emerald"] .profile-photo { border: 3px dashed var(--gold); padding: 10px; background: var(--card); }
[data-theme="emerald"] .profile-photo img,
[data-theme="emerald"] .profile-photo .initials { border-radius: 18px; }
[data-theme="emerald"] .profile-photo .initials { inset: 10px; background: var(--card-2); }
[data-theme="emerald"] .cta { background: linear-gradient(135deg, var(--emerald), #0b5c3b); }
[data-theme="emerald"] .cta p { color: #d7eadb; }

/* Footer: dark info bar with the green stripe motif */
[data-theme="emerald"] footer { background: var(--bg-2); border-top: 0; position: relative; }
[data-theme="emerald"] footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(90deg, var(--emerald) 0 38%, var(--gold) 38% 41%, var(--emerald) 41% 100%); }
[data-theme="emerald"] .nav.scrolled { border-bottom: 2px dashed var(--line); }