@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --brand:#1158b8;
  --brand-2:#0d7ed0;
  --brand-3:#22bfdd;
  --brand-deep:#06245f;
  --brand-navy:#071a44;
  --ink:#17223b;
  --muted:#637083;
  --soft:#f5f9ff;
  --soft-2:#eaf5ff;
  --line:#dfe9f6;
  --green:#16a05d;
  --red:#dc3545;
  --gold:#f6b72d;
  --silver:#9fb1c8;
  --bronze:#c88444;
  --shadow:0 22px 60px rgba(13,70,140,.13);
  --shadow-sm:0 12px 28px rgba(13,70,140,.10);
  --radius:26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 10%,rgba(34,191,221,.16),transparent 30%),
    radial-gradient(circle at 85% 0%,rgba(17,88,184,.13),transparent 32%),
    linear-gradient(135deg,#f8fcff 0%,#eef7ff 48%,#ffffff 100%);
  min-height:100svh;
}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button{border:0;cursor:pointer}
img{max-width:100%}
.honeypot{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12px;color:#475467}
.glass-panel{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(214,229,246,.86);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  border-radius:var(--radius);
}
.section-kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--brand);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}
.live-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:.06em;
}
.live-pill.on{background:#e9f8ef;color:#077c45}
.live-pill.off{background:#fff0f1;color:#c81e3a}
.live-pill i{font-size:8px}

/* Splash */
.splash{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(145deg,#ffffff 0%,#f5fbff 45%,#eaf6ff 100%);
  transition:opacity .46s ease,visibility .46s ease;
}
.splash.hide{opacity:0;visibility:hidden}
.splash-motion{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.splash-motion:before,.splash-motion:after{
  content:"";position:absolute;border-radius:50%;filter:blur(36px);opacity:.45;
  animation:orb 4.8s ease-in-out infinite;
}
.splash-motion:before{width:34vw;height:34vw;left:-10vw;top:8vh;background:rgba(34,191,221,.35)}
.splash-motion:after{width:28vw;height:28vw;right:-7vw;bottom:10vh;background:rgba(17,88,184,.28);animation-delay:-1.4s}
.splash-motion span{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-3));
  opacity:.18;animation:particle var(--d) ease-in-out infinite alternate;
}
.splash-card{
  position:relative;text-align:center;width:min(92vw,520px);
  padding:40px 34px;border-radius:38px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.86);
  box-shadow:0 32px 90px rgba(17,88,184,.18);
}
.splash-card.wide{width:min(92vw,660px)}
.splash-logo-ring{
  width:124px;height:124px;border-radius:36px;margin:0 auto 22px;
  display:grid;place-items:center;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(17,88,184,.08),0 22px 54px rgba(17,88,184,.18);
  position:relative;
}
.splash-logo-ring:before,.splash-logo-ring:after{
  content:"";position:absolute;inset:-10px;border-radius:46px;border:2px solid rgba(34,191,221,.32);
  animation:ring 1.9s ease-in-out infinite;
}
.splash-logo-ring:after{inset:-21px;border-color:rgba(17,88,184,.14);animation-delay:.35s}
.splash-logo-ring img{width:92px;height:92px;object-fit:contain;animation:logoBob 2.6s ease-in-out infinite}
.splash-card h1{margin:0;font-size:clamp(34px,5.2vw,60px);font-weight:950;letter-spacing:-.06em;color:var(--brand-deep)}
.splash-card p{margin:10px 0 0;color:var(--muted);font-weight:700}
.loading-line{height:7px;width:220px;max-width:70%;margin:24px auto 0;background:#e8f2ff;border-radius:999px;overflow:hidden}
.loading-line span{display:block;height:100%;width:42%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-3));animation:loadbar 1.2s ease-in-out infinite}

/* Voting page */
.app-shell-body{min-height:100svh}
.vote-app{width:min(1920px,100%);margin:0 auto;padding:18px clamp(14px,2vw,32px) 28px}
.vote-navbar{
  min-height:98px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:22px;position:sticky;top:12px;z-index:20;
}
.brand-lockup{display:flex;align-items:center;gap:16px;min-width:280px}
.brand-logo{
  width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.brand-logo img{width:48px;height:48px;object-fit:contain}
.brand-text strong{display:block;font-size:clamp(26px,3vw,44px);line-height:.94;font-weight:950;letter-spacing:-.07em;color:var(--brand-deep)}
.brand-text small{display:block;margin-top:6px;color:#66718a;font-size:16px;font-weight:800}
.desktop-nav{display:flex;align-items:center;gap:12px;flex:1;justify-content:center}
.desktop-nav a{
  display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:18px;
  color:#43506a;font-weight:850;border:1px solid transparent;
}
.desktop-nav a.active,.desktop-nav a:hover{color:var(--brand);background:#f3f8ff;border-color:#dcecff;box-shadow:inset 0 -3px 0 rgba(17,88,184,.16)}
.top-actions{display:flex;align-items:center;gap:12px}
.icon-pill,.avatar-pill{
  width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  color:var(--brand-deep);font-weight:900;box-shadow:var(--shadow-sm)
}
.avatar-pill{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff}

.vote-dashboard{
  display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:20px;margin-top:20px;
  grid-template-areas:"hero side" "contest contest" "leader guide";
}
.hero-panel{grid-area:hero;min-height:244px;border-radius:26px;overflow:hidden;position:relative;padding:44px 54px;background:#09285d;color:#fff;box-shadow:var(--shadow)}
.hero-panel:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 70% 5%,rgba(255,255,255,.45),transparent 7%),
    radial-gradient(circle at 58% 12%,rgba(255,255,255,.38),transparent 5%),
    radial-gradient(circle at 78% 15%,rgba(34,191,221,.38),transparent 16%),
    linear-gradient(120deg,rgba(17,88,184,.98),rgba(6,28,79,.98)),
    repeating-linear-gradient(100deg,rgba(255,255,255,.05) 0 3px,transparent 3px 42px);
}
.hero-panel:after{
  content:"";position:absolute;right:-110px;top:-100px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,191,221,.26),transparent 60%);
}
.hero-copy{position:relative;z-index:2;max-width:820px}
.hero-copy .section-kicker{color:#b6edff}
.hero-copy h1{font-size:clamp(38px,4.6vw,64px);line-height:.98;margin:18px 0 10px;font-weight:950;letter-spacing:-.06em}
.hero-copy p{font-size:clamp(16px,1.4vw,22px);opacity:.92;margin:0;max-width:650px}
.feature-row{display:flex;gap:18px;margin-top:32px;flex-wrap:wrap}
.feature-row span{
  display:flex;align-items:center;gap:12px;min-width:190px;padding:14px 18px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px)
}
.feature-row i{font-size:20px}
.feature-row b{display:block;line-height:1;font-size:14px}
.feature-row small{display:block;opacity:.8;font-weight:600;font-size:12px}
.dashboard-side{grid-area:side;display:grid;gap:18px}
.metric-card{
  min-height:112px;border-radius:26px;background:rgba(255,255,255,.9);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:18px;padding:20px;position:relative;overflow:hidden;
}
.metric-card:after{content:"";position:absolute;right:-50px;bottom:-80px;width:200px;height:200px;border-radius:50%;background:rgba(34,191,221,.10)}
.metric-icon{width:62px;height:62px;border-radius:22px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-3));font-size:23px;box-shadow:0 15px 28px rgba(17,88,184,.22)}
.metric-card small{display:block;font-size:12px;font-weight:950;color:#596983;letter-spacing:.08em}
.metric-card strong{display:block;color:var(--brand-deep);font-size:clamp(34px,4vw,54px);font-weight:950;line-height:1}
.metric-card em{display:block;font-style:normal;color:var(--muted);font-weight:700}
.metric-card.status{background:linear-gradient(135deg,#ffffff,#f3fff9)}
.metric-card.status .metric-icon{background:linear-gradient(135deg,#16a05d,#35d694)}
.mini-bars{margin-left:auto;display:flex;align-items:end;gap:5px;height:54px}
.mini-bars i{width:7px;border-radius:999px;background:#cfe3ff}
.mini-bars i:nth-child(1){height:16px}.mini-bars i:nth-child(2){height:28px}.mini-bars i:nth-child(3){height:22px}.mini-bars i:nth-child(4){height:42px}.mini-bars i:nth-child(5){height:32px}.mini-bars i:nth-child(6){height:48px}

.contestant-panel{grid-area:contest;padding:22px 24px}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.panel-heading h2{font-size:26px;font-weight:950;letter-spacing:-.035em;margin:6px 0 2px;color:var(--brand-deep)}
.panel-heading p{margin:0;color:var(--muted);font-weight:650}
.small-link-button{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:16px;
  background:#f7fbff;border:1px solid var(--line);font-weight:850;color:var(--brand)
}
.contestant-grid{
  display:grid;grid-template-columns:repeat(6,minmax(160px,1fr));gap:18px;align-items:stretch;
}
.contestant-card{
  position:relative;min-height:292px;padding:22px 18px 16px;border-radius:20px;border:1px solid #dce8f7;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);box-shadow:0 12px 30px rgba(13,70,140,.08);
  display:flex;flex-direction:column;align-items:center;text-align:center;transition:.22s ease;cursor:pointer;
}
.contestant-card:hover{transform:translateY(-4px);border-color:#b8d5fb;box-shadow:0 18px 42px rgba(13,70,140,.15)}
.contestant-card input{position:absolute;opacity:0;pointer-events:none}
.contestant-card.is-selected,.contestant-card:has(input:checked){border-color:var(--brand);box-shadow:0 18px 44px rgba(17,88,184,.22)}
.rank-pin{
  position:absolute;left:16px;top:16px;width:34px;height:38px;border-radius:13px 13px 9px 9px;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;font-weight:950;display:grid;place-items:center;
  box-shadow:0 12px 20px rgba(17,88,184,.24);
}
.contestant-avatar{
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin-top:14px;margin-bottom:16px;
  color:#fff;font-size:36px;background:radial-gradient(circle at 30% 25%,#2de3ff,#105bc0 45%,#061f5d 100%);
  box-shadow:0 16px 35px rgba(17,88,184,.25),inset 0 0 0 6px rgba(255,255,255,.34);
}
.contestant-name{font-size:18px;line-height:1.15;font-weight:950;color:var(--brand-deep);margin-bottom:7px}
.contestant-type{font-size:13px;color:#728098;font-weight:700;min-height:18px}
.vote-inline{margin-top:16px;display:inline-flex;align-items:center;gap:8px;color:#52627c;font-weight:700}
.vote-inline b{font-size:20px;color:#36527a}
.card-actions{display:flex;width:100%;gap:12px;margin-top:auto;padding-top:18px}
.vote-button{height:44px;flex:1;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand-2),var(--brand));font-weight:900;box-shadow:0 14px 25px rgba(17,88,184,.22)}
.heart-button{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:#49607d}
.team-check{
  position:absolute;right:15px;top:15px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:#10b981;color:#fff;transform:scale(.4);opacity:0;transition:.2s ease
}
.contestant-card:has(input:checked) .team-check,.contestant-card.is-selected .team-check{opacity:1;transform:scale(1)}
.submit-floating{
  grid-column:1/-1;justify-self:center;min-width:260px;height:54px;border-radius:18px;
  color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-deep));font-weight:950;
  box-shadow:0 18px 34px rgba(17,88,184,.27);
}
.submit-floating:disabled{opacity:.65;cursor:not-allowed}
.mini-board{grid-area:leader;padding:22px 24px}
.guide-card{grid-area:guide;padding:20px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.panel-heading.compact{margin-bottom:14px}
.auto-sync{display:inline-flex;align-items:center;gap:8px;color:#6a7890;font-weight:800;font-size:13px}
.public-leader-list{display:grid;gap:12px}
.public-leader-list article{
  display:grid;grid-template-columns:38px 42px minmax(130px,220px) minmax(140px,1fr) 94px;align-items:center;gap:12px;
  padding:10px 12px;border-radius:16px;background:#f8fbff;border:1px solid #e3edf9;
}
.medal{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:950;background:var(--brand)}
.m1{background:var(--gold)}.m2{background:var(--silver)}.m3{background:var(--bronze)}
.mini-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e9f4ff;color:var(--brand)}
.leader-progress{height:8px;border-radius:999px;background:#e7eff8;overflow:hidden}
.leader-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-3))}
.public-leader-list em{font-style:normal;color:#5d6b82;font-size:13px;font-weight:800;text-align:right}
.guide-item{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;padding:14px;border-radius:18px;background:#f8fbff;border:1px solid #e4eef9}
.guide-item i{grid-row:1/3;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;font-size:22px}
.guide-item b{font-weight:950;color:var(--brand-deep)}
.guide-item span{color:#66758b;font-size:13px;font-weight:650}
.state-card{min-height:330px;display:grid;place-items:center;text-align:center;padding:34px;border-radius:24px;background:#f8fbff;border:1px solid var(--line)}
.state-icon{width:88px;height:88px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;font-size:38px;margin:auto}
.state-card h2{font-weight:950;color:var(--brand-deep);font-size:36px;margin:18px 0 4px}
.state-card p{color:var(--muted);font-weight:700}
.state-card h3{color:var(--brand);font-weight:950}
.primary-button,.btn-glow{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:17px;
  color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-deep));font-weight:950;box-shadow:0 16px 32px rgba(17,88,184,.22)
}
.success-kicker{display:inline-block;margin-top:18px;color:#09915c;font-weight:950;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.ajax-state-in{animation:popIn .34s ease-out}
.toast{
  position:fixed;right:22px;bottom:22px;z-index:99999;max-width:min(420px,calc(100vw - 32px));
  padding:16px 18px;border-radius:18px;background:#111827;color:#fff;box-shadow:0 22px 50px rgba(0,0,0,.22);
  transform:translateY(20px);opacity:0;pointer-events:none;transition:.24s ease;font-weight:800
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:#0f8a52}.toast.bad{background:#c02637}
.confetti{position:fixed;top:-20px;width:10px;height:18px;background:var(--brand-3);z-index:99998;border-radius:3px;animation:confettiFall 3s linear forwards}
.confetti:nth-child(3n){background:var(--brand)}.confetti:nth-child(4n){background:var(--gold)}

/* TV Display */
.tv-body{
  height:100svh;overflow:hidden;background:
    radial-gradient(circle at 13% 5%,rgba(34,191,221,.12),transparent 30%),
    radial-gradient(circle at 88% 5%,rgba(17,88,184,.15),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f3f9ff 52%,#eef7ff 100%);
}
.tv-scoreboard{height:100svh;padding:2.6vh 3vw 2.6vh;display:grid;grid-template-rows:auto 1fr;gap:2.1vh}
.tv-header{display:flex;align-items:center;justify-content:space-between;gap:2vw;min-height:10vh}
.tv-brand-block{display:flex;align-items:center;gap:1.6vw}
.tv-brand-logo{width:min(8vh,86px);height:min(8vh,86px);border-radius:50%;background:#fff;border:3px solid #e7f0fb;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.tv-brand-logo img{width:76%;height:76%;object-fit:contain}
.tv-brand-block h1{margin:0;font-size:clamp(38px,4vw,74px);font-weight:950;letter-spacing:-.06em;color:var(--brand)}
.tv-brand-block p{margin:.2vh 0 0;font-size:clamp(15px,1.4vw,25px);font-weight:750;color:#23406b}
.tv-live-wrap{text-align:right;display:grid;gap:.8vh;justify-items:end}
.tv-caption{color:var(--brand);font-weight:800;font-size:clamp(13px,1.1vw,19px)}
.tv-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);grid-template-rows:1fr auto;gap:2vh 1.6vw;min-height:0}
.tv-leaderboard-card{
  min-height:0;border-radius:3vh;background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:2vh 1.6vw;display:grid;grid-template-rows:auto 1fr;overflow:hidden;
}
.tv-card-title{display:flex;align-items:center;justify-content:space-between;gap:1vw;margin-bottom:1.3vh}
.tv-card-title>span{
  min-width:32%;padding:1.2vh 1.5vw;border-radius:1.8vh;background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:#fff;font-size:clamp(17px,1.4vw,26px);font-weight:950;letter-spacing:.02em;display:flex;align-items:center;gap:12px;
  box-shadow:0 15px 32px rgba(17,88,184,.20)
}
.tv-total-box{
  flex:1;max-width:550px;height:8.4vh;min-height:78px;border-radius:2.2vh;background:#fff;border:1px solid #dfeafa;box-shadow:0 15px 36px rgba(13,70,140,.10);
  display:grid;grid-template-columns:60px auto 1fr;align-items:center;gap:12px;padding:0 1.4vw;
}
.tv-total-box i{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;font-size:24px}
.tv-total-box small{font-weight:950;color:#5b6682;letter-spacing:.08em}
.tv-total-box strong{font-size:clamp(32px,3.2vw,62px);line-height:1;font-weight:950;color:var(--brand-deep)}
.tv-leaderboard-list{display:grid;gap:.85vh;min-height:0;grid-template-rows:repeat(var(--team-count,6),minmax(0,1fr))}
.tv-rank-row{
  min-height:0;display:grid;grid-template-columns:minmax(70px,8%) minmax(62px,7%) minmax(185px,22%) minmax(180px,1fr) minmax(110px,13%) 44px;
  align-items:center;gap:1vw;padding:.9vh 1vw;border-radius:2vh;background:#fff;border:1px solid #e4edf8;box-shadow:0 8px 20px rgba(13,70,140,.07);
}
.tv-rank-row.leader{border-color:#cfe1ff;box-shadow:0 14px 28px rgba(17,88,184,.16)}
.tv-rank-number{height:100%;min-height:60px;border-radius:1.5vh;display:grid;place-items:center;color:var(--brand);font-size:clamp(30px,3vw,54px);font-weight:950;background:#eef6ff;position:relative}
.tv-rank-number.medal-1{background:linear-gradient(135deg,#ffd766,#f5a623);color:#fff}
.tv-rank-number.medal-2{background:linear-gradient(135deg,#d9e3f0,#91a7c7);color:#fff}
.tv-rank-number.medal-3{background:linear-gradient(135deg,#ffc47e,#c77a30);color:#fff}
.tv-rank-avatar{width:min(8.8vh,82px);height:min(8.8vh,82px);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#36dfff,#105bc0 46%,#061f5d);color:#fff;font-size:clamp(22px,2.2vw,36px);box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 12px 24px rgba(17,88,184,.2)}
.tv-rank-copy h2{margin:0;font-size:clamp(17px,1.5vw,29px);font-weight:950;color:var(--brand-deep);line-height:1.05}
.tv-rank-copy p{margin:.4vh 0 0;color:#5d6c85;font-size:clamp(11px,.9vw,15px);font-weight:700}
.tv-progress-track{height:1.3vh;min-height:9px;border-radius:999px;background:#e8f0fa;overflow:hidden}
.tv-progress-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0e63dc,#22bfdd);box-shadow:0 0 18px rgba(34,191,221,.35)}
.tv-vote-count{text-align:right}
.tv-vote-count strong{display:block;font-size:clamp(19px,1.8vw,34px);font-weight:950;line-height:1;color:#075bd1}
.tv-vote-count span{display:block;font-size:clamp(10px,.75vw,13px);font-weight:950;color:#536078;letter-spacing:.08em}
.tv-trend{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f5f8fc;color:#6c7a90}
.tv-trend.up{background:#e6fff3;color:#07914f}
.tv-champion-card{
  min-height:0;border-radius:3vh;background:linear-gradient(160deg,#08205a,#0b47a2 60%,#06245f);
  box-shadow:0 24px 60px rgba(6,36,95,.28);padding:2vh 1.5vw;color:#fff;display:grid;grid-template-rows:1fr auto;overflow:hidden;position:relative;
}
.tv-champion-card:before{
  content:"";position:absolute;inset:0;background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.35),transparent 7%),
    radial-gradient(circle at 18% 16%,rgba(34,191,221,.35),transparent 12%),
    radial-gradient(circle at 78% 20%,rgba(247,183,45,.20),transparent 18%);
}
.champion-stage{position:relative;z-index:1;display:grid;place-items:center;text-align:center;align-content:center}
.champion-label{padding:1.1vh 1.4vw;border-radius:1.4vh;background:linear-gradient(135deg,#0c69ef,#0f44b4);font-weight:950;font-size:clamp(15px,1.2vw,22px);box-shadow:0 16px 30px rgba(0,0,0,.18)}
.champion-medallion{
  width:min(26vh,270px);height:min(26vh,270px);border-radius:50%;margin:3vh 0 2vh;display:grid;place-items:center;
  background:radial-gradient(circle,#174da6 0,#071f5c 60%,#061333 100%);border:8px solid #f7c547;
  box-shadow:0 0 0 14px rgba(247,197,71,.17),0 26px 60px rgba(0,0,0,.35);
  color:#fff;font-size:clamp(70px,7vw,126px);position:relative;
}
.champion-medallion:before{content:"\f521";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:-42px;color:#f7c547;font-size:clamp(36px,3.4vw,58px);filter:drop-shadow(0 10px 10px rgba(0,0,0,.25))}
.champion-stage h2{font-size:clamp(34px,3.2vw,62px);font-weight:950;letter-spacing:-.04em;margin:0;color:#fff}
.champion-stage p{font-size:clamp(19px,1.6vw,30px);font-weight:850;margin:.3vh 0 0;color:#aeefff}
.champion-note{position:relative;z-index:1;padding:1.6vh 1.2vw;border-radius:2vh;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.08);display:flex;align-items:center;gap:14px}
.champion-note span{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#ffd766,#f5a623);font-size:24px}
.champion-note b{display:block;font-size:clamp(14px,1vw,18px)}
.champion-note small{display:block;opacity:.85}
.tv-step-strip{
  grid-column:1/-1;height:12.5vh;min-height:100px;border-radius:2.4vh;background:rgba(255,255,255,.92);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);display:grid;grid-template-columns:repeat(3,1fr);gap:1vw;padding:1.3vh 1.4vw;overflow:hidden;
}
.tv-step-strip div{display:grid;grid-template-columns:62px 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:0 14px;border-right:1px dashed #cddcf0}
.tv-step-strip div:last-child{border-right:0}
.tv-step-strip i{grid-row:1/3;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-3));font-size:25px}
.tv-step-strip b{color:var(--brand);font-size:clamp(13px,1vw,18px);font-weight:950}
.tv-step-strip span{color:#5d6c83;font-weight:700;font-size:clamp(11px,.8vw,15px)}
.tv-loading{display:grid;place-items:center;color:var(--muted);font-weight:850;background:#f7fbff;border:1px dashed #d7e6f8;border-radius:20px}
.error-text{color:#dc3545}
.pulse-vote .tv-total-box{animation:pulseVote .9s ease}

/* Admin / AdminLTE-like */
.admin-login-pro{min-height:100svh;display:grid;place-items:center;background:linear-gradient(135deg,#f7fbff,#eaf6ff)}
.login-pro-wrap{width:min(92vw,480px)}
.login-pro-card{padding:34px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:16px}
.login-brand-pro{display:flex;align-items:center;gap:14px}
.login-brand-pro img{width:62px;height:62px;border-radius:18px;background:#fff;border:1px solid var(--line);padding:7px}
.login-brand-pro strong{display:block;font-size:24px;font-weight:950;color:var(--brand-deep)}
.login-brand-pro span{color:var(--muted);font-weight:700}
.login-pro-card h1{font-size:34px;font-weight:950;letter-spacing:-.04em;color:var(--brand-deep);margin:10px 0 0}
.login-pro-card p{margin:0;color:var(--muted);font-weight:650}
.login-pro-card label{display:grid;gap:8px;color:#344054;font-weight:800}
.login-pro-card input,.title-form input,.add-team-form-pro input,.lock-form-pro input,.lock-form-pro select{
  width:100%;min-height:46px;border-radius:14px;border:1px solid #d8e5f4;background:#fff;padding:0 14px;outline:none;
}
.login-pro-card input:focus,.title-form input:focus,.add-team-form-pro input:focus,.lock-form-pro input:focus,.lock-form-pro select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(17,88,184,.10)}
.adminlte-body{min-height:100svh;background:#f5f8fc}
.admin-layout{display:grid;grid-template-columns:290px 1fr;min-height:100svh}
.admin-sidebar{background:#071a44;color:#dbe8ff;padding:18px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100svh;z-index:50}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:rgba(255,255,255,.08)}
.sidebar-brand img{width:50px;height:50px;background:#fff;border-radius:16px;padding:5px}
.sidebar-brand strong{display:block;font-size:20px;color:#fff}
.sidebar-brand span{color:#aebfe0;font-size:12px;font-weight:700}
.sidebar-menu{display:grid;gap:8px}
.sidebar-menu a,.sidebar-footer a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;color:#c7d7f3;font-weight:800}
.sidebar-menu a:hover,.sidebar-menu a:first-child{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.sidebar-footer{margin-top:auto;display:grid;gap:6px}
.admin-main{min-width:0}
.admin-navbar{height:88px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}
.sidebar-toggle{display:none;width:44px;height:44px;border-radius:14px;background:#edf5ff;color:var(--brand)}
.admin-breadcrumb{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6d7d94}
.admin-navbar h1{margin:4px 0 0;font-size:28px;font-weight:950;color:var(--brand-deep);letter-spacing:-.035em}
.navbar-actions{display:flex;align-items:center;gap:10px}
.status-pill{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:999px;font-weight:900;font-size:13px}
.status-pill.open{background:#e9f8ef;color:#087c49}.status-pill.closed{background:#fff0f1;color:#b4232d}
.nav-action{width:42px;height:42px;border-radius:14px;background:#f3f8ff;border:1px solid var(--line);display:grid;place-items:center;color:var(--brand)}
.admin-content{padding:24px;display:grid;gap:22px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kpi-card{min-height:126px;border-radius:22px;padding:20px;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;box-shadow:var(--shadow-sm);overflow:hidden;position:relative}
.kpi-card:after{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.16)}
.kpi-card span{font-weight:850;opacity:.9}
.kpi-card strong{display:block;font-size:42px;font-weight:950;line-height:1}
.kpi-card i{font-size:40px;opacity:.9}
.kpi-primary{background:linear-gradient(135deg,#0d7ed0,#06245f)}
.kpi-blue{background:linear-gradient(135deg,#1158b8,#0d7ed0)}
.kpi-cyan{background:linear-gradient(135deg,#22bfdd,#1175bc)}
.kpi-gold{background:linear-gradient(135deg,#f6b72d,#d99010)}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-sm);padding:22px;overflow:hidden}
.admin-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.admin-card-head h2{font-size:24px;font-weight:950;color:var(--brand-deep);margin:0 0 4px}
.admin-card-head p{margin:0;color:var(--muted);font-weight:650}
.control-grid{display:grid;grid-template-columns:360px 1fr;gap:18px}
.quick-actions{display:grid;gap:12px}
.control-button,.admin-primary-btn,.admin-secondary-btn,.admin-danger-btn{
  min-height:46px;border-radius:14px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:900;
}
.control-button{height:74px;color:#fff;justify-content:flex-start;padding:0 20px;font-size:16px}
.control-button.primary,.admin-primary-btn{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff}
.control-button.accent{background:linear-gradient(135deg,var(--brand-3),var(--brand-2));color:#fff}
.admin-secondary-btn{background:#f3f8ff;border:1px solid #dce9fa;color:var(--brand)}
.admin-danger-btn{background:#fff1f2;color:#c82335;border:1px solid #ffd6dc}
.title-form,.add-team-form-pro,.lock-form-pro{display:grid;gap:12px}
.title-form{grid-template-columns:1fr 1fr auto;align-items:end}
.title-form label,.lock-form-pro label{font-weight:800;color:#344054;font-size:13px}
.add-team-form-pro{grid-template-columns:minmax(220px,1fr) auto;align-items:center}
.table-shell{overflow:auto;border-radius:18px;border:1px solid var(--line)}
.admin-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;min-width:760px}
.admin-table th{background:#f5f9ff;color:#526176;font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:13px 14px;font-weight:950}
.admin-table td{padding:13px 14px;border-top:1px solid #edf2f8;vertical-align:middle;color:#344054;font-weight:650}
.rank-badge-admin{width:34px;height:34px;border-radius:50%;background:#e9f4ff;color:var(--brand);display:grid;place-items:center;font-weight:950}
.vote-count-admin{font-size:22px;color:var(--brand);font-weight:950}
.row-status,.status-dot,.ip-mode-badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900}
.row-status.active,.status-dot.success{background:#e9f8ef;color:#087c49}.row-status.inactive,.status-dot.blocked{background:#fff2f2;color:#b4232d}
.ip-mode-badge{background:#eef6ff;color:#2362a2}
.actions-cell{display:flex;gap:6px;flex-wrap:wrap}
.actions-cell form{display:inline}
.mini-btn{min-height:34px;border-radius:11px;padding:0 10px;background:#eef6ff;color:var(--brand);font-weight:900}
.mini-btn.danger{background:#fff1f2;color:#c82335}
.security-grid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:12px}
.security-grid span{min-height:76px;border-radius:16px;background:#f7fbff;border:1px solid #e1ecf8;display:grid;place-items:center;text-align:center;color:var(--brand-deep);font-weight:900}
.security-grid i{font-size:24px;color:var(--brand)}
.lock-form-pro{grid-template-columns:260px minmax(260px,1fr) auto;margin-bottom:16px;align-items:end}
.lock-form-pro.compact{grid-template-columns:1fr 1fr auto}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}
.captcha-note{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:16px;background:#f7fbff;border:1px solid var(--line);margin-bottom:16px}
.captcha-note strong{color:var(--brand-deep)}
.captcha-note span{color:var(--muted);font-weight:650}
.alert{border-radius:16px;border:1px solid;padding:13px 16px;font-weight:800}
.alert.success{background:#edfff6;border-color:#b6f2d3;color:#087c49}
.alert.error{background:#fff1f2;border-color:#ffcdd5;color:#b4232d}
.admin-ajax-toast{position:fixed;right:22px;bottom:22px;z-index:10000;max-width:min(420px,calc(100vw - 32px));padding:15px 18px;border-radius:16px;color:#fff;background:#111827;box-shadow:0 22px 50px rgba(0,0,0,.24);opacity:0;transform:translateY(15px);pointer-events:none;transition:.23s ease;font-weight:850}
.admin-ajax-toast.show{opacity:1;transform:translateY(0)}
.admin-ajax-toast.ok{background:#0f8a52}.admin-ajax-toast.bad{background:#c02637}

/* Responsive */
@media (max-width:1400px){
  .contestant-grid{grid-template-columns:repeat(3,1fr)}
  .vote-dashboard{grid-template-columns:1fr 330px}
  .guide-card{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .vote-navbar{position:relative;top:0;align-items:flex-start;flex-wrap:wrap}
  .desktop-nav{order:3;width:100%;justify-content:flex-start;overflow:auto;padding-bottom:4px}
  .vote-dashboard{grid-template-columns:1fr;grid-template-areas:"hero" "side" "contest" "leader" "guide"}
  .dashboard-side{grid-template-columns:1fr 1fr}
  .contestant-grid{grid-template-columns:repeat(2,1fr)}
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:.25s ease;width:290px}
  .sidebar-open .admin-sidebar{transform:translateX(0)}
  .sidebar-toggle{display:grid;place-items:center}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .control-grid,.title-form,.lock-form-pro,.lock-form-pro.compact{grid-template-columns:1fr}
  .security-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .vote-app{padding:12px}
  .brand-lockup{min-width:0}
  .brand-logo{width:54px;height:54px;border-radius:18px}.brand-logo img{width:42px;height:42px}
  .brand-text strong{font-size:26px}.brand-text small{font-size:13px}
  .top-actions{width:100%;justify-content:space-between}.icon-pill,.avatar-pill{width:44px;height:44px}
  .hero-panel{padding:30px 22px;min-height:320px}.feature-row span{width:100%;min-width:0}
  .dashboard-side,.contestant-grid,.guide-card{grid-template-columns:1fr}
  .contestant-card{min-height:250px}
  .public-leader-list article{grid-template-columns:36px 38px 1fr;grid-template-areas:"med av name" "med av bar" "votes votes votes"}
  .public-leader-list .medal{grid-area:med}.public-leader-list .mini-avatar{grid-area:av}.public-leader-list b{grid-area:name}.leader-progress{grid-area:bar}.public-leader-list em{grid-area:votes;text-align:left}
  .panel-heading,.admin-card-head,.captcha-note{display:grid}
  .add-team-form-pro{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
  .admin-content{padding:14px}
}
@media (max-width:1280px) and (orientation:landscape){
  .tv-scoreboard{padding:1.6vh 2vw}
  .tv-brand-block h1{font-size:48px}
  .tv-rank-row{grid-template-columns:70px 70px 190px 1fr 110px 36px}
}
@media (max-width:980px){
  .tv-body{overflow:auto}
  .tv-scoreboard{height:auto;min-height:100svh}
  .tv-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .tv-step-strip{height:auto;grid-template-columns:1fr}
  .tv-step-strip div{border-right:0;border-bottom:1px dashed #cddcf0;padding-bottom:10px}
  .tv-rank-row{grid-template-columns:58px 58px 1fr;grid-template-areas:"rank avatar copy" "rank bar votes";gap:10px}
  .tv-rank-number{grid-area:rank}.tv-rank-avatar{grid-area:avatar}.tv-rank-copy{grid-area:copy}.tv-progress-track{grid-area:bar}.tv-vote-count{grid-area:votes;text-align:left}.tv-trend{display:none}
}

/* Animations */
@keyframes orb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26px,-18px,0) scale(1.08)}}
@keyframes particle{from{transform:translate3d(0,0,0);opacity:.12}to{transform:translate3d(20px,-24px,0);opacity:.38}}
@keyframes ring{0%{transform:scale(.88);opacity:.75}100%{transform:scale(1.12);opacity:0}}
@keyframes logoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes loadbar{0%{transform:translateX(-120%)}100%{transform:translateX(260%)}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(540deg);opacity:.05}}
@keyframes pulseVote{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}



/* =========================================================
   RESPONSIVE PATCH - ALL SCREEN OPTIMIZATION
   Desktop, laptop, tablet, mobile, TV 720p/1080p/4K
   ========================================================= */

/* Global overflow guard */
html, body { max-width: 100%; overflow-x: hidden; }
.vote-app, .vote-dashboard, .contestant-panel, .mini-board, .guide-card,
.admin-main, .admin-content, .tv-scoreboard, .tv-grid { min-width: 0; }
.brand-text, .tv-brand-block div, .hero-copy, .tv-rank-copy { min-width: 0; }

/* More fluid desktop spacing */
.vote-app {
  padding-left: clamp(12px, 1.8vw, 34px);
  padding-right: clamp(12px, 1.8vw, 34px);
}
.vote-navbar {
  min-height: clamp(76px, 8vw, 98px);
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.8vw, 24px);
}
.brand-logo {
  width: clamp(52px, 4.2vw, 64px);
  height: clamp(52px, 4.2vw, 64px);
}
.brand-logo img {
  width: clamp(40px, 3.1vw, 48px);
  height: clamp(40px, 3.1vw, 48px);
}
.brand-text strong {
  font-size: clamp(23px, 2.65vw, 44px);
  white-space: nowrap;
}
.brand-text small {
  font-size: clamp(12px, 1vw, 16px);
}
.desktop-nav a {
  padding: clamp(10px, .85vw, 14px) clamp(12px, 1.1vw, 18px);
  font-size: clamp(12px, .95vw, 15px);
}
.hero-panel {
  min-height: clamp(190px, 17vw, 244px);
  padding: clamp(26px, 3vw, 54px);
}
.hero-copy h1 { font-size: clamp(34px, 4vw, 64px); }
.hero-copy p { font-size: clamp(14px, 1.25vw, 22px); }
.feature-row { gap: clamp(10px, 1vw, 18px); }
.feature-row span {
  min-width: clamp(148px, 14vw, 190px);
  padding: clamp(10px, .95vw, 14px) clamp(12px, 1.2vw, 18px);
}
.metric-card {
  min-height: clamp(92px, 8vw, 112px);
  padding: clamp(14px, 1.2vw, 20px);
}
.metric-icon {
  width: clamp(50px, 4vw, 62px);
  height: clamp(50px, 4vw, 62px);
}
.metric-card strong { font-size: clamp(30px, 3.4vw, 54px); }

/* Voting grid: adaptive instead of fixed only */
.contestant-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
}
@media (min-width: 1500px) {
  .contestant-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1180px) and (max-width: 1499px) {
  .contestant-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 780px) and (max-width: 1179px) {
  .contestant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.contestant-card {
  min-height: clamp(238px, 21vw, 292px);
  padding: clamp(16px, 1.35vw, 22px) clamp(13px, 1.2vw, 18px);
}
.contestant-avatar {
  width: clamp(72px, 6vw, 88px);
  height: clamp(72px, 6vw, 88px);
  font-size: clamp(28px, 2.4vw, 36px);
}
.contestant-name {
  font-size: clamp(16px, 1.15vw, 18px);
  overflow-wrap: anywhere;
}
.vote-button, .heart-button {
  height: clamp(40px, 3.2vw, 44px);
}

/* Laptop 1366 / 1280 safety */
@media (max-width: 1366px) {
  .vote-dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    gap: 16px;
  }
  .dashboard-side { gap: 14px; }
  .public-leader-list article {
    grid-template-columns: 34px 38px minmax(120px, 190px) minmax(120px, 1fr) 86px;
  }
  .guide-card { padding: 18px; }
  .guide-item { padding: 12px; }
}

/* Tablet landscape */
@media (max-width: 1180px) {
  .vote-dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "side"
      "contest"
      "leader"
      "guide";
  }
  .dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .desktop-nav {
    flex: 0 1 auto;
    justify-content: flex-start;
  }
  .vote-navbar {
    flex-wrap: wrap;
  }
  .top-actions {
    margin-left: auto;
  }
}

/* Tablet portrait and small laptop */
@media (max-width: 900px) {
  .vote-navbar {
    position: relative;
    top: 0;
    border-radius: 20px;
  }
  .brand-lockup {
    flex: 1 1 auto;
    min-width: 0;
  }
  .brand-text strong {
    white-space: normal;
    line-height: 1;
  }
  .desktop-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .desktop-nav::-webkit-scrollbar { display: none; }
  .desktop-nav a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .hero-panel { min-height: 250px; }
  .feature-row span {
    flex: 1 1 180px;
  }
  .dashboard-side {
    grid-template-columns: 1fr;
  }
  .panel-heading {
    display: grid;
  }
  .small-link-button {
    justify-self: start;
  }
  .guide-card {
    grid-template-columns: 1fr;
  }
  .mini-board, .contestant-panel, .guide-card {
    padding: 18px;
    border-radius: 22px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  body {
    background: linear-gradient(135deg,#f8fcff,#eef8ff 50%,#fff);
  }
  .vote-app { padding: 10px; }
  .vote-navbar {
    gap: 12px;
    padding: 12px;
  }
  .brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .brand-logo img {
    width: 38px;
    height: 38px;
  }
  .brand-text strong { font-size: 22px; }
  .brand-text small { font-size: 11px; }
  .top-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .live-pill {
    padding: 9px 12px;
    font-size: 11px;
  }
  .icon-pill, .avatar-pill {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .vote-dashboard { gap: 12px; margin-top: 12px; }
  .hero-panel {
    min-height: unset;
    padding: 22px;
    border-radius: 22px;
  }
  .hero-copy h1 {
    font-size: 32px;
    letter-spacing: -.04em;
  }
  .hero-copy p { font-size: 14px; }
  .feature-row { margin-top: 18px; }
  .feature-row span {
    min-width: 100%;
    border-radius: 18px;
  }
  .metric-card {
    min-height: 92px;
    border-radius: 20px;
  }
  .metric-card strong { font-size: 34px; }
  .mini-bars { display: none; }
  .panel-heading h2 { font-size: 22px; }
  .contestant-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contestant-card {
    min-height: 208px;
    display: grid;
    grid-template-columns: 74px 1fr;
    grid-template-rows: auto auto auto auto;
    text-align: left;
    align-items: center;
    column-gap: 14px;
    padding: 16px;
  }
  .rank-pin {
    left: auto;
    right: 14px;
    top: 14px;
  }
  .contestant-avatar {
    grid-row: 1 / 5;
    margin: 0;
    width: 70px;
    height: 70px;
    font-size: 27px;
  }
  .contestant-name { font-size: 18px; padding-right: 44px; }
  .contestant-type { min-height: 0; }
  .vote-inline { margin-top: 6px; }
  .card-actions {
    padding-top: 10px;
    margin-top: 0;
  }
  .submit-floating {
    width: 100%;
    min-width: 0;
  }
  .public-leader-list article {
    grid-template-columns: 32px 38px 1fr;
    grid-template-areas:
      "med av name"
      "med av bar"
      "votes votes votes";
    gap: 8px 10px;
  }
  .public-leader-list .medal { grid-area: med; }
  .public-leader-list .mini-avatar { grid-area: av; }
  .public-leader-list b { grid-area: name; }
  .leader-progress { grid-area: bar; }
  .public-leader-list em {
    grid-area: votes;
    text-align: left;
  }
  .state-card {
    min-height: 260px;
    padding: 22px;
  }
  .state-card h2 { font-size: 26px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .brand-text strong { font-size: 20px; }
  .hero-copy h1 { font-size: 28px; }
  .contestant-card {
    grid-template-columns: 62px 1fr;
  }
  .contestant-avatar {
    width: 60px;
    height: 60px;
    font-size: 23px;
  }
}

/* TV 16:9 scoreboard height fitting */
.tv-scoreboard {
  padding: clamp(10px, 2.3vh, 28px) clamp(14px, 2.6vw, 58px);
  gap: clamp(8px, 1.6vh, 20px);
}
.tv-header {
  min-height: clamp(70px, 10vh, 120px);
}
.tv-brand-logo {
  width: clamp(54px, 7.5vh, 86px);
  height: clamp(54px, 7.5vh, 86px);
}
.tv-brand-block h1 {
  font-size: clamp(32px, 4.3vw, 74px);
  max-width: 68vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-brand-block p {
  font-size: clamp(13px, 1.25vw, 25px);
}
.tv-grid {
  gap: clamp(8px, 1.6vh, 20px) clamp(10px, 1.5vw, 30px);
}
.tv-leaderboard-card {
  padding: clamp(10px, 1.6vh, 22px) clamp(12px, 1.5vw, 30px);
}
.tv-card-title {
  margin-bottom: clamp(7px, 1vh, 14px);
}
.tv-card-title > span {
  padding: clamp(8px, 1vh, 13px) clamp(12px, 1.2vw, 24px);
  font-size: clamp(15px, 1.35vw, 26px);
}
.tv-total-box {
  min-height: 0;
  height: clamp(62px, 8vh, 92px);
}
.tv-leaderboard-list {
  gap: clamp(5px, .75vh, 9px);
}
.tv-rank-row {
  padding: clamp(6px, .75vh, 9px) clamp(9px, 1vw, 18px);
  border-radius: clamp(14px, 1.6vh, 22px);
  grid-template-columns:
    clamp(52px, 6.2vw, 92px)
    clamp(50px, 5.6vw, 82px)
    minmax(150px, 22%)
    minmax(150px, 1fr)
    minmax(90px, 12%)
    clamp(30px, 3vw, 44px);
}
.tv-rank-number {
  min-height: clamp(46px, 7.6vh, 70px);
  font-size: clamp(26px, 2.8vw, 54px);
}
.tv-rank-avatar {
  width: clamp(48px, 7.5vh, 82px);
  height: clamp(48px, 7.5vh, 82px);
}
.tv-rank-copy h2 {
  font-size: clamp(15px, 1.45vw, 29px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-rank-copy p {
  font-size: clamp(10px, .85vw, 15px);
}
.tv-vote-count strong {
  font-size: clamp(17px, 1.75vw, 34px);
}
.tv-progress-track {
  height: clamp(8px, 1.15vh, 13px);
}
.tv-champion-card {
  padding: clamp(12px, 1.6vh, 22px) clamp(12px, 1.4vw, 28px);
}
.champion-label {
  font-size: clamp(13px, 1.15vw, 22px);
}
.champion-medallion {
  width: clamp(135px, 24vh, 270px);
  height: clamp(135px, 24vh, 270px);
  margin: clamp(20px, 2.6vh, 34px) 0 clamp(12px, 1.8vh, 24px);
  font-size: clamp(56px, 6.2vw, 126px);
}
.champion-stage h2 {
  font-size: clamp(28px, 3vw, 62px);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.champion-stage p {
  font-size: clamp(16px, 1.45vw, 30px);
}
.champion-note {
  padding: clamp(10px, 1.2vh, 18px) clamp(10px, 1vw, 22px);
}
.tv-step-strip {
  height: clamp(72px, 11vh, 110px);
  min-height: 0;
  padding: clamp(8px, 1vh, 14px) clamp(10px, 1.2vw, 24px);
}
.tv-step-strip i {
  width: clamp(44px, 6vh, 60px);
  height: clamp(44px, 6vh, 60px);
}
.tv-step-strip div {
  grid-template-columns: clamp(46px, 6vh, 62px) 1fr;
}
.tv-step-strip b {
  font-size: clamp(11px, .95vw, 18px);
}
.tv-step-strip span {
  font-size: clamp(10px, .78vw, 15px);
}

/* Low-height TV / laptop presentation mode */
@media (min-width: 981px) and (max-height: 760px) {
  .tv-scoreboard {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }
  .tv-header { min-height: 58px; }
  .tv-brand-logo { width: 54px; height: 54px; }
  .tv-brand-block h1 { font-size: 34px; }
  .tv-brand-block p, .tv-caption { font-size: 12px; }
  .live-pill { padding: 7px 12px; font-size: 10px; }
  .tv-card-title > span { font-size: 15px; padding: 8px 12px; }
  .tv-total-box { height: 58px; }
  .tv-total-box i { width: 42px; height: 42px; font-size: 18px; }
  .tv-total-box strong { font-size: 34px; }
  .tv-rank-row {
    padding: 5px 10px;
    grid-template-columns: 52px 48px minmax(130px,20%) minmax(140px,1fr) 85px 30px;
  }
  .tv-rank-number { min-height: 42px; font-size: 24px; }
  .tv-rank-avatar { width: 44px; height: 44px; font-size: 19px; }
  .tv-rank-copy h2 { font-size: 15px; }
  .tv-rank-copy p { font-size: 10px; margin-top: 1px; }
  .tv-progress-track { height: 8px; }
  .tv-vote-count strong { font-size: 18px; }
  .tv-vote-count span { font-size: 9px; }
  .tv-trend { width: 28px; height: 28px; font-size: 11px; }
  .champion-medallion {
    width: 132px;
    height: 132px;
    margin: 18px 0 10px;
    font-size: 54px;
    border-width: 6px;
  }
  .champion-medallion:before { top: -30px; font-size: 34px; }
  .champion-stage h2 { font-size: 28px; }
  .champion-stage p { font-size: 16px; }
  .champion-note span { width: 42px; height: 42px; font-size: 18px; }
  .champion-note b { font-size: 12px; }
  .champion-note small { font-size: 11px; }
  .tv-step-strip { height: 68px; padding: 6px 10px; }
  .tv-step-strip i { width: 42px; height: 42px; font-size: 18px; }
  .tv-step-strip b { font-size: 11px; }
  .tv-step-strip span { font-size: 10px; }
}

/* TV / tablet portrait graceful fallback */
@media (max-width: 980px) {
  .tv-body { overflow: auto; }
  .tv-scoreboard {
    height: auto;
    min-height: 100svh;
    padding: 14px;
  }
  .tv-header {
    display: grid;
    gap: 12px;
  }
  .tv-brand-block h1 {
    white-space: normal;
    max-width: none;
  }
  .tv-live-wrap {
    justify-items: start;
    text-align: left;
  }
  .tv-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .tv-champion-card {
    min-height: 430px;
  }
  .tv-step-strip {
    height: auto;
    grid-template-columns: 1fr;
  }
  .tv-step-strip div {
    border-right: 0;
    border-bottom: 1px dashed #cddcf0;
    padding: 10px 0;
  }
  .tv-step-strip div:last-child {
    border-bottom: 0;
  }
  .tv-rank-row {
    grid-template-columns: 54px 54px 1fr;
    grid-template-areas:
      "rank avatar copy"
      "rank bar votes";
    gap: 10px;
  }
  .tv-rank-number { grid-area: rank; }
  .tv-rank-avatar { grid-area: avatar; }
  .tv-rank-copy { grid-area: copy; min-width: 0; }
  .tv-progress-track { grid-area: bar; }
  .tv-vote-count { grid-area: votes; text-align: left; }
  .tv-trend { display: none; }
}

/* Admin responsiveness */
@media (max-width: 1366px) {
  .admin-layout {
    grid-template-columns: 260px 1fr;
  }
  .admin-sidebar {
    padding: 14px;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .control-grid {
    grid-template-columns: 300px 1fr;
  }
  .security-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .admin-navbar {
    height: auto;
    min-height: 76px;
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .navbar-actions {
    width: 100%;
    justify-content: space-between;
  }
  .admin-navbar h1 { font-size: 23px; }
  .admin-content { padding: 14px; gap: 14px; }
  .kpi-grid, .control-grid, .title-form, .lock-form-pro,
  .lock-form-pro.compact, .security-grid {
    grid-template-columns: 1fr;
  }
  .admin-card {
    padding: 16px;
    border-radius: 20px;
  }
  .admin-card-head {
    display: grid;
  }
  .head-actions {
    display: grid;
  }
  .table-shell {
    max-width: calc(100vw - 28px);
  }
}

/* Print/embedded browser fallback */
@supports not (height: 100svh) {
  body { min-height: 100vh; }
  .tv-body { height: 100vh; }
  .tv-scoreboard { height: 100vh; }
}


/* =========================================================
   NO CATEGORY PATCH
   Peserta dibuat lebih umum tanpa label kategori/performance
   ========================================================= */
.contestant-type,
.tv-rank-copy p,
.champion-subtitle {
  display: none !important;
}
.contestant-card {
  justify-content: center;
  min-height: clamp(218px, 18vw, 260px);
}
.contestant-avatar {
  margin-bottom: 18px;
}
.contestant-name {
  margin-bottom: 14px;
  min-height: 42px;
  display: grid;
  place-items: center;
}
.vote-inline {
  margin-top: 0;
}
.card-actions {
  margin-top: auto;
}
@media (min-width:1500px) {
  .contestant-card {
    min-height: 245px;
  }
}
@media (max-width:640px) {
  .contestant-card {
    min-height: 178px;
    grid-template-rows: auto auto auto;
  }
  .contestant-name {
    min-height: 0;
    margin-bottom: 4px;
  }
  .vote-inline {
    margin-top: 2px;
  }
}

/* TV no category, lebih rapat dan umum */
.tv-rank-copy.no-category {
  align-self: center;
}
.tv-rank-copy.no-category h2 {
  margin-top: 0;
  margin-bottom: 0;
}
.tv-rank-row {
  align-items: center;
}
.champion-stage h2 {
  margin-top: clamp(8px, 1.2vh, 16px);
}
@media (min-width: 981px) and (max-height: 760px) {
  .tv-rank-copy.no-category h2 {
    font-size: 17px;
  }
}


/* =========================================================
   GENERIC AVATAR + FULL RESPONSIVE PATCH
   ========================================================= */
.avatar-generic{
  background: radial-gradient(circle at 28% 25%, #83e6ff 0%, #5ea9ef 36%, #2f61c8 70%, #183a8e 100%) !important;
  display:grid !important;
  place-items:center !important;
}
.avatar-initial{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  font-size:clamp(22px,2vw,30px);
  line-height:1;
}
.avatar-initial.large{
  font-size:clamp(46px,4vw,74px);
}

.contestant-card{
  overflow:hidden;
}
.contestant-name{
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.vote-inline{
  justify-content:center;
}

/* Guide section: stronger responsive behavior */
.guide-card{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  overflow:hidden;
}
.guide-item{
  display:flex !important;
  align-items:center;
  gap:14px;
  min-width:0;
  border-radius:18px;
  padding:16px !important;
}
.guide-item i{
  flex:0 0 auto;
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:22px;
}
.guide-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
.guide-copy b{
  display:block;
  font-size:clamp(16px,1.05vw,20px);
  line-height:1.15;
  word-break:break-word;
}
.guide-copy span{
  display:block;
  font-size:clamp(13px,.9vw,15px);
  line-height:1.45;
  word-break:break-word;
}
@media (max-width: 1100px){
  .guide-card{
    grid-template-columns:1fr !important;
  }
}
@media (max-width: 640px){
  .guide-card{
    grid-template-columns:1fr !important;
    padding:16px !important;
    gap:12px !important;
  }
  .guide-item{
    flex-direction:row;
    align-items:center;
    padding:14px !important;
  }
  .guide-item i{
    width:50px;
    height:50px;
    border-radius:16px;
    font-size:20px;
  }
  .guide-copy b{
    font-size:18px;
  }
  .guide-copy span{
    font-size:14px;
  }
}

/* Force no horizontal clipping on mobile sections */
@media (max-width: 640px){
  .glass-panel,
  .contestant-panel,
  .mini-board,
  .guide-card{
    max-width:100%;
    overflow:hidden;
  }
  .panel-heading{
    gap:10px;
  }
  .panel-heading .small-link-button{
    width:100%;
    justify-content:center;
  }
  .top-actions{
    gap:8px;
  }
}

/* TV initials avatar fit */
.tv-rank-avatar.avatar-generic{
  font-size:unset !important;
}
.tv-rank-avatar .avatar-initial{
  font-size:clamp(17px,1.6vw,28px);
}
.champion-medallion .avatar-initial.large{
  font-size:clamp(44px,4vw,72px);
}

/* Additional admin/table viewport safety */
.table-shell{
  max-width:100%;
}
.admin-content,
.admin-card,
.vote-app{
  overflow-x:hidden;
}


/* =========================================================
   CLEAN TEXT + NAMES ONLY PATCH
   - Remove public subtitle/hero descriptive texts
   - Contestants are shown as names only, no participant icon/avatar
   - TV Display leaderboard is names only
   ========================================================= */

.brand-text {
  display: grid;
  align-content: center;
}
.brand-text strong {
  line-height: 1;
}
.hero-panel {
  min-height: clamp(150px, 13vw, 198px);
  display: flex;
  align-items: center;
}
.hero-copy {
  max-width: 980px;
}
.hero-copy h1 {
  margin-bottom: 0;
}
.feature-row {
  display: none !important;
}

/* Voting cards: no contestant icon/avatar */
.contestant-avatar,
.avatar-generic,
.avatar-initial {
  display: none !important;
}
.contestant-card {
  min-height: clamp(190px, 15.5vw, 230px);
  justify-content: center;
  padding-top: clamp(20px, 1.5vw, 28px);
}
.contestant-name {
  min-height: 58px;
  margin: 28px 0 12px;
  font-size: clamp(18px, 1.28vw, 23px);
  line-height: 1.18;
  display: grid;
  place-items: center;
  max-width: 100%;
}
.rank-pin {
  top: 16px;
  left: 16px;
}
.vote-inline {
  margin-bottom: 18px;
}
.card-actions {
  margin-top: 0;
}

/* Compact clean guide cards */
.guide-card {
  align-items: stretch;
}
.guide-item {
  min-height: 96px;
}
.guide-copy b {
  color: var(--brand-deep);
}
.guide-copy span {
  color: #65748b;
}

/* TV Display: no contestant avatar and no extra copy */
.tv-caption,
.champion-note,
.champion-medallion,
.tv-rank-avatar {
  display: none !important;
}
.tv-brand-block {
  align-items: center;
}
.tv-brand-block h1 {
  line-height: .95;
}
.tv-rank-row {
  grid-template-columns:
    clamp(54px, 6.2vw, 92px)
    minmax(190px, 30%)
    minmax(160px, 1fr)
    minmax(96px, 13%)
    clamp(30px, 3vw, 44px) !important;
}
.tv-rank-copy {
  min-width: 0;
}
.tv-rank-copy h2 {
  font-size: clamp(18px, 1.65vw, 34px);
  white-space: normal;
  line-height: 1.05;
}
.tv-champion-card {
  grid-template-rows: 1fr;
}
.champion-stage {
  align-content: center;
  gap: clamp(14px, 2vh, 28px);
}
.champion-stage h2 {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 68px);
  line-height: 1.02;
}
.champion-stage p {
  margin: 0;
}
@media (min-width: 981px) and (max-height: 760px) {
  .hero-panel {
    min-height: 130px;
  }
  .contestant-card {
    min-height: 178px;
  }
  .contestant-name {
    margin-top: 24px;
    min-height: 46px;
  }
  .tv-rank-row {
    grid-template-columns: 52px minmax(150px, 30%) minmax(130px, 1fr) 86px 30px !important;
  }
  .tv-rank-copy h2 {
    font-size: 17px;
  }
  .champion-stage h2 {
    font-size: 30px;
  }
}

/* Mobile: clean list-like cards without icon */
@media (max-width: 640px) {
  .contestant-card {
    min-height: 150px;
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 16px;
  }
  .contestant-name {
    margin: 30px 0 8px;
    min-height: 0;
    font-size: 20px;
    padding: 0 42px;
  }
  .vote-inline {
    margin: 0 0 12px;
  }
  .card-actions {
    padding-top: 0;
  }
  .tv-rank-row {
    grid-template-columns: 54px 1fr !important;
    grid-template-areas:
      "rank copy"
      "rank bar"
      "rank votes";
  }
  .tv-rank-number { grid-area: rank; }
  .tv-rank-copy { grid-area: copy; }
  .tv-progress-track { grid-area: bar; }
  .tv-vote-count { grid-area: votes; text-align: left; }
}


/* =========================================================
   FINAL CLEAN PATCH
   Final clean layout for voting page and TV Display.
   Focus only on voting cards and TV leaderboard.
   ========================================================= */

/* Public voting page layout */
.vote-dashboard{
  grid-template-columns:minmax(0,1fr) minmax(280px,390px) !important;
  grid-template-areas:
    "hero side"
    "contest contest" !important;
}
.mini-board,
.guide-card,
.tv-champion-card,
.tv-step-strip{
  display:none !important;
}
.contestant-panel{
  min-height:auto;
}
.contestant-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) !important;
  align-items:stretch;
}
@media (min-width:1500px){
  .contestant-grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
}
@media (min-width:1000px) and (max-width:1499px){
  .contestant-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
.contestant-card{
  min-height:clamp(170px,13vw,215px) !important;
}
.contestant-name{
  margin-top:22px !important;
  margin-bottom:10px !important;
  min-height:48px !important;
}
.vote-inline{
  margin-bottom:14px !important;
}
.panel-heading{
  margin-bottom:18px;
}
@media (max-width:1180px){
  .vote-dashboard{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "hero"
      "side"
      "contest" !important;
  }
  .dashboard-side{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:720px){
  .dashboard-side{
    grid-template-columns:1fr !important;
  }
  .contestant-grid{
    grid-template-columns:1fr !important;
  }
  .contestant-card{
    min-height:145px !important;
  }
  .contestant-name{
    margin-top:26px !important;
    padding:0 38px;
  }
}

/* TV Display: single full leaderboard, no right panel */
.tv-grid{
  grid-template-columns:1fr !important;
  grid-template-rows:1fr !important;
}
.tv-leaderboard-card{
  grid-column:1/-1;
  min-height:0;
}
.tv-leaderboard-list{
  grid-template-rows:repeat(var(--team-count,6),minmax(0,1fr)) !important;
}
.tv-rank-row{
  grid-template-columns:
    clamp(58px,6.5vw,104px)
    minmax(220px,28%)
    minmax(180px,1fr)
    minmax(100px,12%)
    clamp(32px,3vw,46px) !important;
}
.tv-card-title{
  gap:16px;
}
.tv-total-box{
  max-width:560px;
}
.tv-rank-copy h2{
  white-space:normal !important;
  word-break:normal;
  overflow-wrap:anywhere;
}
@media (min-width:981px) and (max-height:760px){
  .tv-rank-row{
    grid-template-columns:54px minmax(150px,28%) minmax(140px,1fr) 90px 32px !important;
  }
}
@media (max-width:980px){
  .tv-grid{
    grid-template-columns:1fr !important;
  }
  .tv-rank-row{
    grid-template-columns:54px 1fr !important;
    grid-template-areas:
      "rank copy"
      "rank bar"
      "rank votes" !important;
  }
}