/* UTEC English | Public Live Leaderboard — Premium Edition v1.0.22
   Scoped to the public page. Dynamic IDs, scoring rules, refresh cycles and backend untouched. */
body:has(.public-main){
  background:
    radial-gradient(ellipse 540px 340px at 2% 270px, rgba(79,171,255,.20), transparent 82%),
    radial-gradient(ellipse 350px 280px at 99% 340px, rgba(255,201,34,.14), transparent 86%),
    linear-gradient(180deg, #f6fbff 0%, #eef7ff 42%, #f9fcff 100%);
  color:#0b3278;
  overflow-x:hidden;
}
body:has(.public-main) .site-header{
  background:rgba(255,255,255,.96);height:72px;
  border-bottom:1px solid #e5effb;
  box-shadow:0 6px 28px rgba(13,71,152,.045);
  backdrop-filter:blur(9px);
}
body:has(.public-main) .site-header-inner{max-width:1580px;gap:18px}
body:has(.public-main) .site-logo.official-logo{width:218px;height:auto;max-height:66px;object-fit:contain;mix-blend-mode:normal}
body:has(.public-main) .nav-links{gap:34px;margin-right:22px}
body:has(.public-main) .nav-links a{font-size:13px;font-weight:750;color:#214478;padding:24px 0;position:relative}
body:has(.public-main) .nav-links a.active{color:#0462e5}
body:has(.public-main) .nav-links a.active::after{content:"";position:absolute;bottom:13px;left:0;right:0;height:3px;border-radius:5px;background:#096ff4}
body:has(.public-main) .header-actions{gap:10px}
body:has(.public-main) .header-actions .btn{min-height:42px;padding:10px 19px;font-size:12px;border-radius:10px}
body:has(.public-main) .header-cta{background:linear-gradient(120deg,#ffe263,#ffbd23);color:#082e76;box-shadow:0 6px 16px #f3b82725}
body:has(.public-main) .public-main{max-width:1580px;padding-top:16px;padding-bottom:36px}
body:has(.public-main) .breadcrumbs{font-size:12px;color:#5d7fae;margin:1px 0 12px;font-weight:650}
body:has(.public-main) .breadcrumbs span{color:#92b7e1}

/* Hero: illustration from the approved concept; original brand logo remains unchanged. */
body:has(.public-main) .hero-grid{
  position:relative;grid-template-columns:minmax(0,1.18fr) minmax(0,.96fr);
  gap:22px;align-items:center;margin:1px 0 17px;min-height:181px;
}
body:has(.public-main) .hero-title{
  position:relative;min-height:178px;
  display:flex;flex-direction:column;justify-content:center;
  padding:8px 0 6px 180px;
}
body:has(.public-main) .v22-bee{
  position:absolute;z-index:0;left:-74px;top:-32px;width:272px;height:198px;
  object-fit:contain;pointer-events:none;user-select:none;
  filter:drop-shadow(0 9px 8px rgba(22,98,180,.07));
}
body:has(.public-main) .hero-title>*:not(.v22-bee){position:relative;z-index:1}
body:has(.public-main) .hero-title .eyebrow.blue{
  margin-bottom:6px;letter-spacing:.105em;font-size:11px;color:#0366e1;
}
body:has(.public-main) .hero-title .eyebrow.blue::before{content:"✦";margin-right:6px;color:#ffbd1f}
body:has(.public-main) .hero-title h1{
  font-size:clamp(40px,3.2vw,59px);letter-spacing:-.058em;line-height:1.06;
  font-weight:900;display:block;white-space:nowrap;color:#092f78;
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
body:has(.public-main) .hero-title h1 em{
  color:#ffb700;font-style:normal;text-shadow:0 1px 0 rgba(255,255,255,.8);
}
body:has(.public-main) .v22-event-subtitle{
  font-weight:850;letter-spacing:-.02em;font-size:18px;color:#0d377e;margin-top:3px;
}
body:has(.public-main) .hero-title p{
  margin-top:8px;font-size:14px;line-height:1.5;max-width:620px;color:#5274a3;
}
body:has(.public-main) .event-banner{
  min-height:156px;max-width:100%;padding:19px 24px 19px 12px;
  border-radius:23px;border:1px solid #daebff;gap:12px;
  background:
    radial-gradient(circle at 6% 80%,rgba(255,234,156,.43),transparent 36%),
    radial-gradient(circle at 91% 26%,rgba(255,223,120,.23),transparent 22%),
    linear-gradient(120deg,#fffefa 0%,#ffffff 65%,#fffbef 100%);
  box-shadow:0 14px 30px rgba(20,83,167,.09);
}
body:has(.public-main) .banner-left{gap:9px;min-width:0}
body:has(.public-main) .trophy-shape{width:106px;height:114px;flex-shrink:0;filter:none;display:grid;place-items:center}
body:has(.public-main) .trophy-shape img{width:105px;height:112px;object-fit:contain;filter:drop-shadow(0 5px 10px #c788142b)}
body:has(.public-main) .banner-title strong{font-size:clamp(21px,2.05vw,30px);line-height:1.13;white-space:nowrap;color:#ffc522;text-shadow:2px 2px 0 #073e89,-1px -1px 0 #095ba8;}
body:has(.public-main) .banner-title span{font-size:11px;background:#093b90;box-shadow:0 5px 8px #062c761c;padding:6px 15px;border-radius:16px;margin-top:3px}
body:has(.public-main) .banner-divider{height:87px;background:#dbe8f8}
body:has(.public-main) .banner-right{font-size:12px;color:#6383a9;white-space:normal;min-width:166px;gap:7px}
body:has(.public-main) .banner-right strong{font-size:12px;color:#123a7e;white-space:normal}
body:has(.public-main) .banner-right>span:last-child{display:flex;align-items:center;gap:4px}
body:has(.public-main) .live-chip{padding:8px 12px;border-radius:8px;font-size:12px;background:linear-gradient(130deg,#f22c47,#e91837);box-shadow:0 6px 15px rgba(214,35,65,.18)}

/* Competition navigation */
body:has(.public-main) .filter-bar{gap:17px;margin:8px 0 14px}
body:has(.public-main) .segmented{
  min-height:48px;border:1px solid #dfebf9;border-radius:13px;
  box-shadow:0 6px 18px #1356a10a;padding:4px;gap:2px;
}
body:has(.public-main) .segmented button{
  border-radius:10px;min-width:124px;padding:9px 16px;color:#174784;
  font-size:12px;font-weight:800;white-space:nowrap;
}
body:has(.public-main) .segmented button.selected{
  color:white;background:linear-gradient(145deg,#168bf7,#0661db 80%);
  box-shadow:0 5px 10px #0765d92a;
}
body:has(.public-main) .phase-tabs button{min-width:127px}
body:has(.public-main) .round-select{
  min-width:252px;min-height:48px;border-radius:13px;background:#fff;
  border:1px solid #dbe9fb;box-shadow:0 6px 18px #1356a10a;
  color:#0b357b;font-size:12px;font-weight:800;padding:10px 14px;
}
body:has(.public-main) .segmented button:focus-visible,
body:has(.public-main) .round-select:focus-visible,
body:has(.public-main) #manualRefresh:focus-visible{outline:3px solid #ffc63a;outline-offset:2px}

/* Two-column leaderboard body */
body:has(.public-main) .public-layout{
  display:grid;grid-template-columns:minmax(0,2.65fr) minmax(298px,.87fr);
  gap:16px;align-items:start;
}
body:has(.public-main) .main-column,
body:has(.public-main) .side-column{min-width:0}
body:has(.public-main) .side-column{gap:14px}
body:has(.public-main) .stats-grid{gap:11px;margin-bottom:13px}
body:has(.public-main) .stat-card{
  min-height:114px;padding:13px;gap:12px;border:1px solid #e5f0ff;border-radius:19px;
  background:#fff;box-shadow:0 11px 24px rgba(21,76,159,.055);
}
body:has(.public-main) .stat-card:nth-child(2){background:linear-gradient(135deg,#fff,#fffdf4)}
body:has(.public-main) .stat-card:nth-child(3){background:linear-gradient(135deg,#fff,#fffcf8)}
body:has(.public-main) .stat-card:nth-child(4){background:linear-gradient(135deg,#fff,#f4fff9)}
body:has(.public-main) .stat-icon{height:60px;width:60px;min-width:60px;border-radius:21px;}
body:has(.public-main) .v22-icon{display:inline-block;width:20px;height:20px;vertical-align:middle;flex:none}
body:has(.public-main) .stat-icon .v22-icon{width:29px;height:29px;stroke-width:2.4}
body:has(.public-main) .stat-card small{font-size:11px;font-weight:650;color:#5176a6;margin-bottom:2px}
body:has(.public-main) .stat-card strong{font-size:clamp(22px,1.8vw,28px);line-height:1.18;letter-spacing:-.04em;color:#0b397f;font-weight:900}
body:has(.public-main) .stat-card:last-child strong{font-size:clamp(15px,1.18vw,19px);white-space:normal;letter-spacing:-.035em}
body:has(.public-main) .stat-card i{font-size:11px;font-weight:600}

body:has(.public-main) .public-countdown{
  display:flex;align-items:center;min-height:123px;position:relative;isolation:isolate;
  padding:18px 20px 24px 91px;margin:0 0 13px;
  border:2px solid #90c8ff;border-top:3px solid #197af4;border-radius:19px;
  background:linear-gradient(112deg,#e6f5ff 1%,#fff 50%,#fffae9 100%);
  box-shadow:0 11px 24px #1354a112;
}
body:has(.public-main) .public-countdown::before{
  content:"";position:absolute;z-index:-1;top:-3px;left:68%;right:0;height:3px;
  background:linear-gradient(90deg,#1fa2db,#fbc62b);border-radius:0 19px 0 0;
}
body:has(.public-main) .v22-countdown-icon{
  position:absolute;left:19px;top:26px;width:57px;height:57px;
  display:grid;place-items:center;background:linear-gradient(135deg,#d7edff,#f7fbff);
  color:#0364da;border-radius:17px;
}
body:has(.public-main) .v22-countdown-icon .v22-icon{width:32px;height:32px}
body:has(.public-main) .public-countdown-person{flex:1;min-width:0}
body:has(.public-main) .countdown-kicker{font-size:10px;letter-spacing:.13em;font-weight:900;color:#0964d5}
body:has(.public-main) .public-countdown-person strong{
  font-size:clamp(19px,1.55vw,25px);font-weight:900;letter-spacing:-.035em;line-height:1.26;
  color:#0b367c;display:block;margin:3px 0;
}
body:has(.public-main) .public-countdown-person small{font-size:12px;color:#5d7fab;display:block;line-height:1.5}
body:has(.public-main) .public-countdown-readout{gap:14px;flex:none;align-items:center;margin-left:12px}
body:has(.public-main) #publicTimerBadge{padding:8px 12px;font-size:11px;border-radius:99px;color:#00885f;background:#d8f8ea;letter-spacing:.015em;font-weight:850}
body:has(.public-main) #publicTimerDigits{
  font-size:clamp(28px,2.35vw,42px);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:#092f77;font-weight:900;line-height:1.2;
}
body:has(.public-main) .public-countdown-track{
  position:absolute;left:19px;right:19px;bottom:11px;width:auto;height:7px;
  margin:0;border-radius:99px;background:#dcecfb;overflow:hidden;
}
body:has(.public-main) .public-countdown-track span{background:linear-gradient(90deg,#167bed,#079ef4,#1fc9a0);border-radius:99px}

/* Main scoring table */
body:has(.public-main) .leader-card{
  border-radius:17px;border:1px solid #e3edfa;
  box-shadow:0 12px 26px #1858a10e;
}
body:has(.public-main) .leader-table{width:100%;table-layout:auto}
body:has(.public-main) .leader-table th{
  padding:15px 8px;font-weight:850;font-size:12px;
  background:linear-gradient(130deg,#0762d3,#083f9b);
  border-right:1px solid rgba(255,255,255,.10);
}
body:has(.public-main) .leader-table th:nth-child(2){width:auto;min-width:142px}
body:has(.public-main) .leader-table th:first-child{width:55px}
body:has(.public-main) .leader-table th:nth-child(n+3){width:auto}
body:has(.public-main) .leader-table td{
  padding:9px 7px;height:53px;font-size:12px;color:#143d7e;
  border-right:1px solid #e9f0f9;
}
body:has(.public-main) .leader-table tr:nth-child(even) td{background:#f7fbff}
body:has(.public-main) .leader-table tbody tr:hover td{background:#eef7ff}
body:has(.public-main) .v22-participant{display:flex;align-items:center;gap:9px;min-width:0}
body:has(.public-main) .v22-avatar{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:linear-gradient(135deg,#3a91f8,#0b56c3);color:#fff;
  font-size:13px;font-weight:850;box-shadow:inset 0 1px 0 #ffffff30;
}
body:has(.public-main) .leader-table tr:nth-child(3n+2) .v22-avatar{background:linear-gradient(140deg,#ffb357,#dc8024)}
body:has(.public-main) .leader-table tr:nth-child(3n+3) .v22-avatar{background:linear-gradient(140deg,#92a8e3,#4b6abc)}
body:has(.public-main) .v22-name{font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis}
body:has(.public-main) .rank-bubble{width:29px;height:29px;font-size:13px}
body:has(.public-main) .score-cell{gap:4px}
body:has(.public-main) .score-cell>strong{font-weight:850;color:#0b3478}
body:has(.public-main) .result-dot{width:21px;height:21px;min-width:21px;font-size:0}
body:has(.public-main) .result-dot .v22-icon{width:14px;height:14px;stroke-width:2.5}
body:has(.public-main) .result-dot.good{background:#0aa66a}
body:has(.public-main) .result-dot.bad{background:#f02649}
body:has(.public-main) .indicator{min-width:19px;height:20px;padding:2px 4px;border-radius:6px;font-size:10px;}
body:has(.public-main) .score-total{font-size:17px;font-weight:900;color:#093e9b}
body:has(.public-main) .status-badge{padding:6px 8px;min-width:78px;font-size:10px}
body:has(.public-main) .table-foot{padding:12px 13px;gap:14px;background:#f8fbff;color:#527cae;font-weight:600;line-height:1.4}
body:has(.public-main) .notice-card{
  margin:12px 0 0;border:1px solid #b9dbff;background:#e5f2ff;border-radius:13px;
  padding:14px 16px;gap:11px;color:#346ca9;font-size:11px;
}
body:has(.public-main) .notice-card .v22-icon{width:24px;height:24px;color:#126de3}
body:has(.public-main) .notice-card strong{color:#0e4b94}

/* Informational sidebar */
body:has(.public-main) .side-card{
  padding:18px 16px;border:1px solid #e2ecf9;border-radius:19px;
  background:#fff;box-shadow:0 11px 24px rgba(22,80,160,.07)
}
body:has(.public-main) .card-title{margin:0 0 8px;gap:9px}
body:has(.public-main) .card-title h2{font-size:17px;font-weight:900;letter-spacing:-.028em;color:#0a347d}
body:has(.public-main) .heading-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#fff3d4;color:#e5a200}
body:has(.public-main) .heading-icon .v22-icon{width:19px;height:19px}
body:has(.public-main) .rule-row{padding:10px 0;gap:8px;font-size:12px;font-weight:600;color:#183e7c}
body:has(.public-main) .rule-row strong{font-size:12px;font-weight:850}
body:has(.public-main) .rule-symbol{width:23px;height:23px;min-width:23px}
body:has(.public-main) .rule-symbol .v22-icon{width:16px;height:16px;stroke-width:2.7}
body:has(.public-main) .rule-symbol.good{background:#04a76f;color:white}
body:has(.public-main) .rule-symbol.bad{background:#ed2449;color:white}
body:has(.public-main) .rule-symbol.info{background:#e6f2ff;color:#116be1}
body:has(.public-main) .penalty-note{
  margin-top:12px;border-radius:10px;background:#fff3d2;padding:12px;color:#9b5d04;font-weight:750;font-size:11px;
}
body:has(.public-main) .side-card .small-note{font-size:10px;color:#6686ae;line-height:1.7;margin-top:10px}
body:has(.public-main) .ongoing-body{padding:13px 0 8px;gap:14px}
body:has(.public-main) .progress-ring{
  position:relative;width:105px;height:105px;background:conic-gradient(#13ad83 0 30%,#1371e4 30% 100%);
}
body:has(.public-main) .progress-ring::before{width:79px;height:79px}
body:has(.public-main) .progress-ring strong{font-size:24px}
body:has(.public-main) .ongoing-meta{gap:8px;font-size:11px}
body:has(.public-main) .ongoing-meta strong{font-size:12px;color:#0b397e}
body:has(.public-main) .ongoing-meta>span{display:flex;align-items:center;gap:5px}
body:has(.public-main) .ongoing-meta .v22-icon{width:14px;height:14px;color:#3674c4}
body:has(.public-main) .info-pill{display:flex;align-items:center;gap:7px;border-radius:9px;font-size:10px;line-height:1.6;padding:12px;background:#e7f2ff;color:#3773bb}
body:has(.public-main) .info-pill .v22-icon{width:17px;height:17px}
body:has(.public-main) .update-footer{font-size:10px;color:#6d8aad}
body:has(.public-main) .link-button{display:flex;align-items:center;gap:5px;font-size:11px;color:#0969df}
body:has(.public-main) .link-button .v22-icon{width:15px;height:15px}
body:has(.public-main) .guideline-card{display:none}
body:has(.public-main) .site-footer{background:#fff;border-top:1px solid #e5edf7}

/* Maintain readability across widths. No change to live polling or scoring behavior. */
@media(max-width:1500px){
 body:has(.public-main) .hero-title{padding-left:155px}
 body:has(.public-main) .v22-bee{left:-70px;width:239px}
 body:has(.public-main) .hero-title h1{font-size:clamp(36px,3.25vw,55px)}
 body:has(.public-main) .event-banner{padding-right:15px}
 body:has(.public-main) .trophy-shape{width:85px}
 body:has(.public-main) .trophy-shape img{width:90px}
 body:has(.public-main) .banner-title strong{font-size:24px}
 body:has(.public-main) .segmented button{min-width:108px}
 body:has(.public-main) .phase-tabs button{min-width:107px}
 body:has(.public-main) .stat-card{gap:8px;padding:11px}
 body:has(.public-main) .stat-icon{width:50px;height:50px;min-width:50px;border-radius:17px}
 body:has(.public-main) .stat-icon .v22-icon{width:25px;height:25px}
}
@media(max-width:1160px){
 body:has(.public-main) .hero-grid{grid-template-columns:1fr;gap:6px}
 body:has(.public-main) .hero-title{padding-left:180px;min-height:200px}
 body:has(.public-main) .v22-bee{left:-35px;top:-20px;width:245px;height:210px}
 body:has(.public-main) .hero-title h1{font-size:clamp(35px,4.8vw,57px)}
 body:has(.public-main) .event-banner{max-width:none;min-height:124px}
 body:has(.public-main) .filter-bar{flex-wrap:wrap;justify-content:flex-start}
 body:has(.public-main) .round-select{flex:1;min-width:240px}
 body:has(.public-main) .public-layout{grid-template-columns:minmax(0,1fr)}
 body:has(.public-main) .side-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 body:has(.public-main) .stats-grid{gap:11px}
 body:has(.public-main) .stat-icon{width:60px;height:60px;min-width:60px}
 body:has(.public-main) .leader-table{min-width:800px}
}
@media(max-width:680px){
 body:has(.public-main) .site-header{height:62px}
 body:has(.public-main) .site-logo.official-logo{width:156px;max-height:55px}
 body:has(.public-main) .site-header-inner{gap:7px}
 body:has(.public-main) .header-actions{gap:5px}
 body:has(.public-main) .header-actions .btn{font-size:10px;padding:8px;min-height:37px}
 body:has(.public-main) .public-main{padding-top:12px}
 body:has(.public-main) .breadcrumbs{font-size:10px;margin-bottom:8px}
 body:has(.public-main) .hero-title{min-height:174px;padding:6px 0 8px 117px}
 body:has(.public-main) .v22-bee{left:-58px;top:-10px;width:184px;height:175px}
 body:has(.public-main) .hero-title .eyebrow.blue{font-size:8px;letter-spacing:.04em}
 body:has(.public-main) .hero-title h1{font-size:clamp(27px,7vw,39px);white-space:normal;line-height:1.02}
 body:has(.public-main) .v22-event-subtitle{font-size:12px;margin-top:7px}
 body:has(.public-main) .hero-title p{font-size:10px;margin-top:6px}
 body:has(.public-main) .event-banner{padding:12px 10px;min-height:107px;gap:6px;border-radius:15px}
 body:has(.public-main) .trophy-shape{width:57px;height:72px}
 body:has(.public-main) .trophy-shape img{width:58px;height:74px}
 body:has(.public-main) .banner-title strong{font-size:clamp(14px,4vw,20px)}
 body:has(.public-main) .banner-title span{font-size:8px;padding:5px 7px}
 body:has(.public-main) .banner-divider{height:64px}
 body:has(.public-main) .banner-right{min-width:0;gap:3px;font-size:9px}
 body:has(.public-main) .banner-right strong{font-size:9px}
 body:has(.public-main) .live-chip{padding:5px 7px;font-size:9px}
 body:has(.public-main) .filter-bar{gap:9px;margin-top:12px}
 body:has(.public-main) .segmented{width:100%}
 body:has(.public-main) .segmented button{min-width:0;flex:1;font-size:11px;padding:8px 5px}
 body:has(.public-main) .round-select{width:100%;min-width:0}
 body:has(.public-main) .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 body:has(.public-main) .stat-card{min-height:91px;padding:10px;gap:8px;border-radius:13px}
 body:has(.public-main) .stat-icon{width:40px;height:40px;min-width:40px;border-radius:14px}
 body:has(.public-main) .stat-icon .v22-icon{width:22px;height:22px}
 body:has(.public-main) .stat-card strong{font-size:19px}
 body:has(.public-main) .stat-card:last-child strong{font-size:14px}
 body:has(.public-main) .stat-card small{font-size:9px}
 body:has(.public-main) .public-countdown{min-height:155px;padding:13px 13px 24px 59px;align-items:flex-start;flex-wrap:wrap;gap:5px}
 body:has(.public-main) .v22-countdown-icon{left:12px;top:18px;width:40px;height:40px;border-radius:11px}
 body:has(.public-main) .v22-countdown-icon .v22-icon{width:24px;height:24px}
 body:has(.public-main) .public-countdown-person{flex-basis:100%;padding-right:0}
 body:has(.public-main) .public-countdown-person strong{font-size:18px}
 body:has(.public-main) .public-countdown-person small{font-size:10px}
 body:has(.public-main) .countdown-kicker{font-size:8px}
 body:has(.public-main) .public-countdown-readout{width:100%;margin-left:0;justify-content:flex-start;gap:12px}
 body:has(.public-main) #publicTimerDigits{font-size:26px}
 body:has(.public-main) #publicTimerBadge{font-size:9px;padding:6px 9px}
 body:has(.public-main) .side-column{display:flex;flex-direction:column}
 body:has(.public-main) .side-card{width:100%}
 body:has(.public-main) .leader-table{min-width:790px}
 body:has(.public-main) .leader-table td{padding:8px 6px}
 body:has(.public-main) .leader-card{position:relative}
 body:has(.public-main) .table-scroll{overflow-x:auto;overscroll-behavior-inline:contain}
}
@media(max-width:390px){
 body:has(.public-main) .hero-title{padding-left:108px}
 body:has(.public-main) .v22-bee{left:-49px;width:168px}
 body:has(.public-main) .hero-title h1{font-size:26px}
 body:has(.public-main) .banner-title strong{font-size:14px}
 body:has(.public-main) .trophy-shape{width:50px}
 body:has(.public-main) .trophy-shape img{width:54px}
 body:has(.public-main) .banner-right{font-size:8px}
}
@media(prefers-reduced-motion:reduce){body:has(.public-main) .segmented button{transition:none}}