/* ── Unduk Ngadau Tracker v3 — Frontend Styles ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --unt-accent:   #c8193c;
    --unt-gold:     #d4a017;
    --unt-green:    #1a6b3c;
    --unt-dark:     #1a1a2e;
    --unt-gray:     #6b7280;
    --unt-radius:   14px;
    --unt-shadow:   0 4px 24px rgba(0,0,0,0.09);
    --unt-shadow-h: 0 14px 42px rgba(0,0,0,0.17);
    --unt-trans:    all 0.26s cubic-bezier(.4,0,.2,1);
}

.unt-wrapper { font-family:'DM Sans',sans-serif; max-width:1200px; margin:0 auto; padding:0 16px 48px; color:var(--unt-dark); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.unt-header {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    background:linear-gradient(135deg,var(--unt-dark) 0%,#2d1b4e 100%);
    color:#fff; padding:24px 28px; border-radius:var(--unt-radius); margin-bottom:16px;
    position:relative; overflow:hidden;
}
.unt-header::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.unt-header-left  { display:flex; align-items:center; gap:16px; }
.unt-header-right { display:flex; align-items:center; gap:12px; }
.unt-logo   { font-size:2.4rem; filter:drop-shadow(0 2px 8px rgba(255,255,255,.3)); }
.unt-title  { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:900; margin:0 0 2px; color:#fff; }
.unt-subtitle { font-size:.82rem; margin:0; opacity:.7; letter-spacing:.05em; text-transform:uppercase; }

.unt-status-badge { font-size:.8rem; font-weight:600; padding:8px 16px; border-radius:50px; white-space:nowrap; }
.unt-status-ongoing   { background:var(--unt-accent); color:#fff; animation:unt-pulse 2s ease-in-out infinite; }
.unt-status-upcoming  { background:#f59e0b; color:#1a1a2e; }
.unt-status-completed { background:var(--unt-gold); color:#1a1a2e; }
@keyframes unt-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,25,60,.5)} 50%{box-shadow:0 0 0 8px rgba(200,25,60,0)} }

.unt-live-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#22c55e; animation:unt-live-blink 1.5s ease-in-out infinite; }
@keyframes unt-live-blink { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }

/* ── Countdown ───────────────────────────────────────────────────────────── */
.unt-countdown { display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#1a1a2e,#2d1b4e); color:#fff; padding:20px 24px; border-radius:var(--unt-radius); margin-bottom:16px; }
.unt-countdown-block { text-align:center; }
.unt-cd-num   { display:block; font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:900; line-height:1; }
.unt-cd-label { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.unt-countdown-sep { font-size:2rem; font-weight:700; opacity:.5; line-height:1; padding-bottom:16px; }

/* ── Stats bar ───────────────────────────────────────────────────────────── */
.unt-stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.unt-stat { background:#fff; border-radius:10px; padding:14px 16px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.06); border:1px solid #f0f0f0; }
.unt-stat-num { display:block; font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; color:var(--unt-accent); }
.unt-stat-lbl { font-size:.72rem; color:var(--unt-gray); text-transform:uppercase; letter-spacing:.06em; }

/* ── Controls (filter + search + sort) ──────────────────────────────────── */
.unt-controls   { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.unt-filter-bar { display:flex; flex-wrap:wrap; gap:8px; }
.unt-filter-btn { background:#fff; border:2px solid #e5e7eb; border-radius:50px; padding:7px 16px; font-size:.82rem; font-family:'DM Sans',sans-serif; font-weight:500; cursor:pointer; transition:var(--unt-trans); color:var(--unt-dark); }
.unt-filter-btn:hover,.unt-filter-btn.active { background:var(--unt-accent); border-color:var(--unt-accent); color:#fff; }

.unt-search-sort { display:flex; gap:10px; flex-wrap:wrap; }
.unt-search-input { flex:1; min-width:200px; padding:9px 14px; border:2px solid #e5e7eb; border-radius:10px; font-size:.88rem; font-family:'DM Sans',sans-serif; transition:border-color .2s; background:#fff; }
.unt-search-input:focus { border-color:var(--unt-accent); outline:none; }
.unt-sort-select { padding:9px 14px; border:2px solid #e5e7eb; border-radius:10px; font-size:.88rem; font-family:'DM Sans',sans-serif; background:#fff; cursor:pointer; transition:border-color .2s; }
.unt-sort-select:focus { border-color:var(--unt-accent); outline:none; }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.unt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.unt-empty { grid-column:1/-1; text-align:center; padding:48px 16px; color:var(--unt-gray); font-size:.95rem; }
.unt-empty-icon { font-size:2.5rem; display:block; margin-bottom:10px; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.unt-card { background:#fff; border-radius:var(--unt-radius); box-shadow:var(--unt-shadow); overflow:hidden; transition:var(--unt-trans); border:2px solid transparent; position:relative; }
.unt-card:hover         { transform:translateY(-4px); box-shadow:var(--unt-shadow-h); }
.unt-card-winner        { border-color:var(--unt-gold); background:linear-gradient(160deg,#fffdf0,#fff); }
.unt-card-finalist      { border-color:#7c3aed; }
.unt-card-top25         { border-color:#a5b4fc; }
.unt-card-eliminated    { opacity:.55; filter:grayscale(55%); }
.unt-card.unt-hidden    { display:none; }

.unt-winner-crown { position:absolute; top:8px; right:10px; z-index:4; font-size:1.8rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); animation:unt-bounce 1.5s ease-in-out infinite; }
@keyframes unt-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ── Photo — background-image (iOS Safari reliable) ─────────────────────── */
/* Desktop: fixed height */
.unt-card-photo-wrap {
    position:relative;
    height:240px;
    overflow:hidden;
    background:linear-gradient(135deg,#f3e8d8,#e9d5b8);
    cursor:pointer;
}
.unt-card-photo-bg {
    width:100%; height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    transition:transform .4s ease;
}
.unt-card:hover .unt-card-photo-bg { transform:scale(1.04); }
.unt-card-photo-placeholder { background:linear-gradient(135deg,#f3e8d8,#e9d5b8); }
.unt-card-number {
    position:absolute; bottom:8px; left:10px;
    background:rgba(26,26,46,.85); color:#fff;
    font-size:.75rem; font-weight:700; padding:3px 9px;
    border-radius:50px; backdrop-filter:blur(4px);
}

/* Zoom hint */
.unt-zoom-hint {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0);
    font-size:1.6rem; background:rgba(26,26,46,.7);
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:.25s ease; opacity:0; pointer-events:none;
}
.unt-card-photo-wrap:hover .unt-zoom-hint { transform:translate(-50%,-50%) scale(1); opacity:1; }

/* Card body */
.unt-card-body     { padding:10px 13px 12px; }
.unt-card-name     { font-family:'Playfair Display',serif; font-size:.97rem; font-weight:700; margin:0 0 5px; line-height:1.2; }
.unt-card-meta     { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.unt-card-district { font-size:.74rem; color:var(--unt-gray); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.unt-card-age      { display:none; }
.unt-card-award    { font-size:.74rem; color:var(--unt-green); font-weight:600; margin:4px 0 0; }
.unt-card-fact     { font-size:.73rem; color:#7c3aed; margin:4px 0 0; font-style:italic; }

.unt-status-tag    { display:inline-block; font-size:.67rem; font-weight:600; padding:2px 8px; border-radius:50px; white-space:nowrap; }
.unt-tag-active     { background:#dcfce7; color:#15803d; }
.unt-tag-top25      { background:#e0e7ff; color:#3730a3; }
.unt-tag-finalist   { background:#ede9fe; color:#6d28d9; }
.unt-tag-winner     { background:#fef3c7; color:#92400e; }
.unt-tag-eliminated { background:#f3f4f6; color:#6b7280; }

/* Vote */
.unt-vote-wrap   { margin-top:8px; }
.unt-vote-bar-bg { height:3px; background:#e5e7eb; border-radius:99px; margin-bottom:7px; overflow:hidden; }
.unt-vote-bar    { height:100%; background:linear-gradient(90deg,var(--unt-accent),var(--unt-gold)); border-radius:99px; width:0; transition:width 1s ease; }
.unt-vote-row    { display:flex; align-items:center; gap:8px; }
.unt-vote-btn    { background:transparent; border:1.5px solid var(--unt-accent); color:var(--unt-accent); border-radius:50px; padding:4px 12px; font-size:.76rem; font-family:'DM Sans',sans-serif; font-weight:600; cursor:pointer; transition:var(--unt-trans); }
.unt-vote-btn:hover,.unt-vote-btn.voted { background:var(--unt-accent); color:#fff; }
.unt-vote-count  { font-size:.73rem; color:var(--unt-gray); }

/* Share */
.unt-card-share { display:flex; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid #f3f4f6; }
.unt-share-btn  { font-size:.74rem; padding:3px 9px; border-radius:50px; background:#f9fafb; border:1.5px solid #e5e7eb; text-decoration:none; color:var(--unt-dark); transition:var(--unt-trans); }
.unt-share-btn:hover { border-color:var(--unt-accent); background:#fff0f3; color:var(--unt-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Single column, tall portrait cards
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:600px) {

    /* Single column grid on mobile */
    .unt-grid,
    .unt-grid-winner,
    .unt-grid-top7 {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Card becomes a horizontal strip: photo left, info right */
    .unt-card {
        display: grid;
        grid-template-columns: 160px 1fr;
        min-height: 200px;
    }

    /* Photo: tall portrait, fills left column */
    .unt-card-photo-wrap {
        height: auto !important;
        /* Use aspect-ratio to give portrait shape */
        aspect-ratio: 3 / 4;
        /* background-size: contain shows full body if portrait,
           falls back to cover if landscape — best of both */
        border-radius: var(--unt-radius) 0 0 var(--unt-radius);
    }

    /* If photo is portrait (taller than wide), show full body */
    .unt-card-photo-bg {
        background-size: contain;
        background-position: center top !important;
        background-color: #f3e8d8;
    }

    /* For eliminated cards keep grayscale but still single column */
    .unt-card-eliminated { opacity:.5; filter:grayscale(60%); }

    /* Card body: right column, scrollable if needed */
    .unt-card-body {
        padding: 14px 14px 14px 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unt-card-name { font-size: 1rem; margin-bottom: 6px; }
    .unt-card-meta { margin-bottom: 8px; }
    .unt-card-district { max-width: none; }

    /* Vote row full width */
    .unt-vote-row { flex-wrap: wrap; }
    .unt-vote-btn { flex: 1; text-align: center; justify-content: center; padding: 7px 12px; font-size: .82rem; }

    /* Winner crown repositioned for horizontal layout */
    .unt-winner-crown { top: 6px; right: 6px; font-size: 1.5rem; }

    /* Tier badges — move inside photo area */
    .unt-tier-badge { top: 6px; left: 6px; }

    /* Number badge */
    .unt-card-number { bottom: 6px; left: 8px; font-size: .7rem; }

    /* Zoom hint — smaller on mobile */
    .unt-zoom-hint { width: 40px; height: 40px; font-size: 1.2rem; }

    /* Stats bar 2 columns on mobile */
    .unt-stats-bar { grid-template-columns: repeat(2,1fr); }

    /* Countdown smaller font */
    .unt-cd-num { font-size: 1.8rem; }

    /* Header compact */
    .unt-header { padding: 18px 16px; }
    .unt-title  { font-size: 1.3rem; }

    /* Lightbox stacks vertically on mobile */
    .unt-lb-inner   { flex-direction: column; }
    .unt-lb-photo-side {
        width: 100%;
        min-height: 55vw;
        max-height: 55vh;
    }
    .unt-lb-info-side  { padding: 18px 20px; }
    .unt-lb-panel      { max-height: 96vh; border-radius: 14px; }
    .unt-lb-prev, .unt-lb-next { top: 27.5vw; }

    /* Tier section headers compact */
    .unt-tier-header { padding: 10px 14px; font-size: .9rem; }
    .unt-tier-progress { gap: 2px; padding: 12px; }
}

/* Tablet: 2 columns is fine, slightly smaller photo */
@media (min-width:601px) and (max-width:900px) {
    .unt-grid { grid-template-columns: repeat(2, 1fr); }
    .unt-card-photo-wrap { height: 200px; }
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.unt-legend { display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; padding-top:20px; border-top:1px solid #e5e7eb; font-size:.8rem; color:var(--unt-gray); align-items:center; }
.unt-legend-item    { display:flex; align-items:center; gap:6px; }
.unt-legend-updated { margin-left:auto; font-size:.75rem; color:#9ca3af; font-style:italic; }
.unt-dot            { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.unt-dot-winner     { background:var(--unt-gold); }
.unt-dot-finalist   { background:#7c3aed; }
.unt-dot-active     { background:#16a34a; }
.unt-dot-eliminated { background:#d1d5db; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════════════════════ */
.unt-lightbox { position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; }
.unt-lb-backdrop { position:absolute; inset:0; background:rgba(10,10,20,.88); backdrop-filter:blur(6px); cursor:pointer; }

.unt-lb-panel {
    position:relative; z-index:2;
    background:#fff; border-radius:20px;
    width:92vw; max-width:900px; max-height:92vh;
    display:flex; flex-direction:column;
    box-shadow:0 32px 80px rgba(0,0,0,.5);
    overflow:hidden;
    animation:unt-lb-in .25s cubic-bezier(.4,0,.2,1);
}
@keyframes unt-lb-in { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }

.unt-lb-close {
    position:absolute; top:14px; right:16px; z-index:10;
    background:rgba(0,0,0,.35); color:#fff; border:none; border-radius:50%;
    width:36px; height:36px; font-size:1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s; backdrop-filter:blur(4px);
}
.unt-lb-close:hover { background:rgba(200,25,60,.9); }

.unt-lb-prev,.unt-lb-next {
    position:absolute; top:50%; z-index:10; transform:translateY(-50%);
    background:rgba(255,255,255,.15); color:#fff; border:2px solid rgba(255,255,255,.3);
    border-radius:50%; width:44px; height:44px; font-size:1.2rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:var(--unt-trans); backdrop-filter:blur(4px);
}
.unt-lb-prev { left:12px; } .unt-lb-next { right:12px; }
.unt-lb-prev:hover,.unt-lb-next:hover { background:rgba(200,25,60,.8); border-color:transparent; }

/* Inner layout */
.unt-lb-inner { display:flex; flex:1; overflow:hidden; }

/* Photo side */
.unt-lb-photo-side {
    width:52%; flex-shrink:0;
    background:linear-gradient(135deg,#1a1a2e,#2d1b4e);
    position:relative; min-height:360px; overflow:hidden;
}
/* img-wrap fills the entire photo side */
.unt-lb-img-wrap {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
}
/* Real <img> tag — works on all mobile browsers */
.unt-lb-img-wrap img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:opacity .3s;
    /* object-position set inline via JS per contestant face focus */
}
.unt-lb-number { position:absolute; bottom:14px; left:16px; background:rgba(26,26,46,.8); color:#fff; font-size:.8rem; font-weight:700; padding:4px 12px; border-radius:50px; backdrop-filter:blur(4px); z-index:2; }

/* Loading spinner */
.unt-lb-loading .unt-lb-img-wrap::before {
    content:''; position:absolute; top:50%; left:50%;
    width:36px; height:36px; margin:-18px 0 0 -18px;
    border:3px solid rgba(255,255,255,.2); border-top-color:#fff;
    border-radius:50%; animation:unt-spin .7s linear infinite; z-index:3;
}
@keyframes unt-spin { to { transform:rotate(360deg); } }
.unt-lb-loading .unt-lb-img-wrap img { opacity:0.2; }

/* Info side */
.unt-lb-info-side { flex:1; padding:28px 28px 24px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.unt-lb-status-tag { display:inline-block; font-size:.72rem; font-weight:700; padding:4px 12px; border-radius:50px; width:fit-content; }
.unt-lb-name     { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; margin:4px 0 0; line-height:1.2; color:var(--unt-dark); }
.unt-lb-district { font-size:.88rem; color:var(--unt-gray); margin:0; }
.unt-lb-age      { font-size:.84rem; color:var(--unt-gray); margin:0; }
.unt-lb-bio      { font-size:.86rem; color:#4b5563; margin:8px 0 0; line-height:1.55; }
.unt-lb-award    { font-size:.84rem; color:var(--unt-green); font-weight:600; margin:4px 0 0; }
.unt-lb-fact     { font-size:.82rem; color:#7c3aed; margin:4px 0 0; font-style:italic; }
.unt-lb-vote-wrap { margin-top:12px; }
.unt-lb-vote-btn  { font-size:.84rem; padding:7px 18px; }

/* Share in lightbox — IG only */
.unt-lb-share { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid #e5e7eb; }
.unt-lb-share-label { font-size:.75rem; color:var(--unt-gray); font-weight:600; }
.unt-lb-share-btn   { font-size:.8rem; padding:6px 14px; border-radius:50px; background:#f9fafb; border:1.5px solid #e5e7eb; text-decoration:none; color:var(--unt-dark); transition:var(--unt-trans); }
.unt-lb-share-btn:hover { border-color:var(--unt-accent); background:#fff0f3; color:var(--unt-accent); }

/* Lightbox animation out */
.unt-lightbox.unt-lb-closing .unt-lb-panel { animation:unt-lb-out .2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes unt-lb-out { to{opacity:0;transform:scale(.94)} }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:700px) {
    .unt-stats-bar  { grid-template-columns:repeat(2,1fr); }
    .unt-cd-num     { font-size:1.8rem; }
    .unt-grid       { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
    .unt-card-photo-wrap { height:170px; }
    .unt-card-body  { padding:9px 11px 10px; }
    .unt-card-name  { font-size:.9rem; }
    .unt-header     { padding:18px 16px; }
    .unt-title      { font-size:1.3rem; }
    /* Lightbox stacks on mobile */
    .unt-lb-inner   { flex-direction:column; }
    .unt-lb-photo-side { width:100%; min-height:240px; max-height:42vh; }
    .unt-lb-info-side  { padding:18px 20px; }
    .unt-lb-panel   { max-height:96vh; border-radius:14px; }
    .unt-lb-prev,.unt-lb-next { top:calc(42vh / 2); }
}
@media (max-width:400px) {
    .unt-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .unt-card-photo-wrap { height:150px; }
}

/* ── Tier Progression Banner ─────────────────────────────────────────────── */
.unt-tier-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    background: linear-gradient(135deg,#1a1a2e,#2d1b4e);
    border-radius: var(--unt-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.unt-tier-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    transition: all .25s ease;
    min-width: 72px;
}
.unt-tier-step span { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.unt-tier-step .unt-tier-icon,
.unt-tier-step > :first-child { font-size: 1.4rem; display: block; }

.unt-tier-done    { background: rgba(255,255,255,.1); color: #9ca3af; }
.unt-tier-pending { background: rgba(255,255,255,.05); color: #4b5563; border: 1px dashed rgba(255,255,255,.15); }
.unt-tier-active  { background: rgba(245,158,11,.2); color: #fbbf24; border: 1px solid rgba(245,158,11,.4); }
.unt-tier-active.unt-tier-winner { background: rgba(212,160,23,.25); color: var(--unt-gold); border-color: var(--unt-gold); }

.unt-tier-arrow { color: rgba(255,255,255,.3); font-size: 1.3rem; font-weight: 700; padding: 0 2px; }

/* ── Tier Sections ───────────────────────────────────────────────────────── */
.unt-tier-section { margin-bottom: 32px; }

.unt-tier-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--unt-dark);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}
.unt-tier-label-muted { font-size: .95rem; font-weight: 600; color: var(--unt-gray); }
.unt-tier-icon { font-size: 1.3rem; }

.unt-tier-section-winner .unt-tier-label  { color: #92400e; border-color: var(--unt-gold); }
.unt-tier-section-top7   .unt-tier-label  { color: #5b21b6; border-color: #c4b5fd; }
.unt-tier-section-top25  .unt-tier-label  { color: #78350f; border-color: #fde68a; }

/* Winner tier — bigger cards */
.unt-grid-winner {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Top 7 — slightly larger */
.unt-grid-top7 {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Top 25 card styling */
.unt-card-top25 { border-color: #f59e0b; background: linear-gradient(160deg,#fffbeb,#fff); }
.unt-tag-top25  { background: #fef3c7; color: #78350f; }

/* Top 25 badge on card */
.unt-top25-badge {
    position: absolute; top: 8px; right: 10px; z-index: 4;
    background: linear-gradient(135deg,#f59e0b,#d97706);
    color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: 3px 8px; border-radius: 50px;
    box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.unt-top7-badge {
    position: absolute; top: 8px; right: 10px; z-index: 4;
    background: linear-gradient(135deg,#7c3aed,#5b21b6);
    color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: 3px 8px; border-radius: 50px;
    box-shadow: 0 2px 8px rgba(124,58,237,.4);
}

/* Legend dot for top25 */
.unt-dot-top25 { background: #f59e0b; }

/* ── Year Switcher Tabs (frontend) ───────────────────────────────────────── */
.unt-year-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: rgba(0,0,0,.03);
    border-radius: var(--unt-radius);
    border: 1px solid rgba(0,0,0,.06);
}
.unt-year-tab {
    padding: 7px 20px;
    border: 2px solid transparent;
    border-radius: 50px;
    background: #fff;
    color: var(--unt-gray);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.unt-year-tab:hover { border-color: var(--unt-accent); color: var(--unt-accent); }
.unt-year-tab-active { background: var(--unt-accent) !important; color: #fff !important; border-color: var(--unt-accent) !important; }
.unt-year-live-pip { width:7px; height:7px; border-radius:50%; background:#4ade80; display:inline-block; animation: unt-pip-pulse 1.4s ease-in-out infinite; }
@keyframes unt-pip-pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }