/* Suthra Punjab 3R Finale - clean bento theme.
   Soft off-white canvas, white rounded cards, deep green + fresh green accents, gold only for winners.
   Light for judges / admin / guests; body.screen flips to a dark green stage. */
:root{
  --e950:#06251c; --e900:#0a3a2c; --e800:#0e4c39; --e700:#13654b; --e600:#1a8a64; --e500:#2db37f; --lime:#3ddc84; --lime-soft:#dff7e8;
  --gold:#e7b93a; --gold-soft:#fff3cc; --gold-deep:#8a6a0e; --silver:#c9d2d8; --bronze:#d58f50;
  --danger:#d64533; --amber:#e08a1e; --blue:#2f7fc0;
  --sage:#a9c9b4; --mint:#e3f1e8; --fern:#2f8f63; --forest:#0b2e24;
  --page-bg:linear-gradient(180deg,#e9f2ec 0%,#f4f8f5 340px,#f4f8f5 100%);
  --surface:#ffffff; --surface-2:#f4f7f5; --text:#0f231b; --muted:#6a7f75; --line:rgba(15,35,27,.09);
  --heading:#0a3a2c; --accent-text:#13654b; --input-bg:#ffffff;
  --card-shadow:0 1px 2px rgba(10,58,44,.05),0 8px 28px rgba(10,58,44,.06);
  --radius:26px; --shadow:0 18px 50px rgba(0,0,0,.28);
  --font-en:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,sans-serif; --font-display:var(--font-en);
}
body.screen{
  --page-bg:radial-gradient(1200px 700px at 85% -10%,rgba(61,220,132,.18),transparent 60%),linear-gradient(180deg,#0b3f30 0%,#06271d 60%,#041a13 100%);
  --surface:rgba(255,255,255,.07); --surface-2:rgba(255,255,255,.06); --text:#f2f8f4; --muted:#9fbcae; --line:rgba(255,255,255,.14);
  --heading:#ffffff; --accent-text:#7ff0b4; --input-bg:rgba(0,0,0,.3);
  --card-shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{font-family:var(--font-en);color:var(--text);line-height:1.45;background:var(--page-bg);background-attachment:fixed;-webkit-font-smoothing:antialiased}
a{color:var(--e700)} body.screen a{color:var(--lime)}
button{font-family:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.gold{color:var(--accent-text)}

/* ---------- hero banner: layered greens, big logos, bold competition name ---------- */
.banner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,44px);
  padding:clamp(24px,3.2vw,46px) clamp(22px,4vw,56px);margin:16px;border-radius:38px;position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:
    radial-gradient(620px 360px at 4% 125%,rgba(61,220,132,.38),transparent 70%),
    radial-gradient(700px 460px at 102% -25%,rgba(169,201,180,.34),transparent 65%),
    linear-gradient(118deg,#0a2b22 0%,#0f4a38 52%,#1a7a58 100%);
  box-shadow:0 24px 60px rgba(8,46,35,.28);
}
.banner::before,.banner::after{content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
.banner::before{width:560px;height:560px;right:-160px;top:-300px;border:70px solid rgba(255,255,255,.05)}
.banner::after{width:380px;height:380px;left:32%;bottom:-260px;border:50px solid rgba(61,220,132,.08)}
.banner__side{display:flex;gap:clamp(12px,1.6vw,22px);align-items:center}
.banner__center{min-width:0}
.banner__en{font-weight:800;letter-spacing:-.035em;line-height:1.04;color:#fff;font-size:clamp(1.7rem,3.9vw,3.6rem);text-wrap:balance}
.banner__sub{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.chip-pill{display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.13);color:#d7f3e3;font-weight:700;font-size:clamp(.8rem,1.1vw,1rem);border:1px solid rgba(255,255,255,.16)}
.chip-pill--gold{background:rgba(231,185,58,.18);color:#ffe29a;border-color:rgba(231,185,58,.4)}
.banner .medallion__ring{border:0;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.banner .medallion{--size:clamp(84px,9vw,140px)}
.banner--compact{padding:14px 22px;gap:18px;margin:12px;border-radius:26px}
.banner--compact::before,.banner--compact::after{display:none}
.banner--compact .banner__en{font-size:clamp(1.05rem,1.9vw,1.6rem)}
.banner--compact .medallion{--size:62px}
.banner--compact .banner__sub{display:none}
.banner--xl{padding:clamp(26px,3vw,46px) clamp(28px,4vw,60px)}
.banner--xl .medallion{--size:clamp(100px,12vh,150px)}
.banner--xl .banner__en{font-size:clamp(2rem,4.6vw,4.6rem)}
.banner--xl .chip-pill{font-size:clamp(.95rem,1.5vw,1.4rem);padding:9px 22px}

.medallion{--size:96px;display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--size);position:relative}
.medallion__ring{width:var(--size);height:var(--size);border-radius:28%;padding:0;position:relative;background:#fff;
  box-shadow:0 1px 2px rgba(10,58,44,.08),0 10px 26px rgba(10,58,44,.14);border:1px solid var(--line)}
.medallion__face{width:100%;height:100%;border-radius:inherit;overflow:hidden;display:grid;place-items:center;background:#fff;color:var(--e800)}
.medallion__face img,.medallion__face svg{width:100%;height:100%;object-fit:contain;padding:12%}
.medallion__face .mono{font-weight:800;letter-spacing:-.03em;font-size:calc(var(--size)*.36);color:var(--e700);background:var(--lime-soft);width:100%;height:100%;display:grid;place-items:center}
.medallion__label{display:none}
.pencil{position:absolute;right:-6px;top:-6px;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--e800);color:#fff;cursor:pointer;font-size:14px;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.3);z-index:3}
.pencil:hover{background:var(--e600)}

/* ---------- layout bits ---------- */
.page{max-width:1400px;margin:0 auto;padding:0 16px 110px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--card-shadow)}
body.screen .card{backdrop-filter:blur(8px)}
.card h2,.card h3{font-weight:800;letter-spacing:-.02em;color:var(--heading)}
h2.section{font-weight:800;color:var(--heading);letter-spacing:-.025em;font-size:clamp(1.3rem,2.2vw,1.9rem);margin:6px 0 14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.grid{display:grid;gap:16px}
.sep{height:1px;background:var(--line);margin:16px 0;border:0}

/* ---------- buttons / inputs ---------- */
.btn{border:1.5px solid rgba(14,76,57,.22);background:#fff;color:var(--e800);padding:10px 18px;border-radius:999px;font-weight:700;font-size:.92rem;cursor:pointer;transition:.15s;min-height:44px}
.btn:hover{background:var(--lime-soft);border-color:var(--e600)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
body.screen .btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.btn--gold{background:linear-gradient(135deg,#17785a,#0a3a2c);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(10,58,44,.28)}
.btn--gold:hover{background:linear-gradient(135deg,#1c8a68,#0e4c39);border-color:transparent}
.btn--danger{border-color:rgba(214,69,51,.5);color:#b53424;background:#fff}
.btn--danger:hover{background:#fdecea}
.btn--sm{padding:6px 12px;min-height:34px;font-size:.82rem}
.btn--lg{padding:14px 28px;font-size:1.05rem;min-height:56px}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=url],textarea,select{
  width:100%;background:var(--input-bg);border:1.5px solid var(--line);color:var(--text);border-radius:14px;padding:11px 14px;font-size:.95rem;font-family:inherit;min-height:46px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--e500);outline-offset:1px}
label.f{display:block;font-size:.8rem;color:var(--muted);margin:12px 0 5px;font-weight:700}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:.72rem;font-weight:700;border:1px solid transparent;white-space:nowrap}
.badge--draft{background:#eef1ef;color:#5b6b64;border-color:#dbe3df}
.badge--submitted{background:var(--lime-soft);color:#0b6b48;border-color:#a9e6c5}
.badge--revised{background:var(--gold-soft);color:var(--gold-deep);border-color:#f0d88a}
.badge--tie{background:#fde6e2;color:#a8321f;border-color:#eda49a}
.badge--lock{background:#e0eefb;color:#1f5f99;border-color:#b3d3ef}
body.screen .badge--draft{background:rgba(255,255,255,.1);color:#cfe0d8;border-color:rgba(255,255,255,.25)}
body.screen .badge--submitted{background:rgba(61,220,132,.18);color:#8ff0cb;border-color:rgba(61,220,132,.5)}
body.screen .badge--revised{background:rgba(231,185,58,.2);color:#ffe3a0;border-color:rgba(231,185,58,.6)}
body.screen .badge--lock{background:rgba(47,127,192,.25);color:#bcdcf7;border-color:rgba(47,127,192,.6)}

/* ---------- judge scoring ---------- */
.judge{display:grid;grid-template-columns:310px 1fr;gap:16px;align-items:start}
.rail{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:14px}
.rail h3{padding:6px 8px 12px;font-size:1.05rem}
.school-btn{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;border-radius:18px;border:1.5px solid transparent;background:var(--surface-2);color:var(--text);cursor:pointer;min-height:58px}
.school-btn:hover{background:var(--lime-soft)}
.school-btn.active{background:var(--e900);color:#fff}
.school-btn.active .no{color:var(--lime)}
.school-btn .no{font-weight:800;font-size:1.15rem;color:var(--e700);text-align:center}
.school-btn .nm{font-size:.84rem;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sheet-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sheet-head .medallion{--size:96px}
.sheet-title{min-width:0;flex:1}
.sheet-title .booth{color:var(--accent-text);font-size:.85rem;font-weight:800;letter-spacing:.04em}
.sheet-title h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(1.4rem,2.6vw,2.3rem);line-height:1.1;color:var(--heading)}
.total{margin-left:auto;text-align:center;min-width:140px;padding:14px 22px;border-radius:22px;background:linear-gradient(135deg,#17785a,#0a3a2c);color:#fff}
.total__num{font-weight:800;font-size:3.4rem;line-height:1;letter-spacing:-.04em;color:#fff}
.total__max{font-size:.8rem;color:#a8e8c8;font-weight:700;margin-top:2px}
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.track{padding:20px}
.track__head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.track__head h3{font-size:1.05rem;line-height:1.2}
.track__score{font-weight:800;font-size:1.6rem;letter-spacing:-.03em;color:var(--e700);white-space:nowrap}
.track__score small{color:var(--muted);font-size:.8rem;font-weight:700}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip{display:flex;align-items:center;gap:9px;min-height:54px;padding:8px 12px;border-radius:16px;cursor:pointer;user-select:none;background:var(--surface-2);border:1.5px solid transparent;color:var(--text);font-weight:700;font-size:.9rem;text-align:left;transition:.12s}
.chip::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid #b9c9c0;flex:none;display:grid;place-items:center;font-size:13px;color:#fff;background:#fff}
.chip:hover{border-color:var(--e500)}
.chip.on{background:var(--e800);color:#fff;box-shadow:0 6px 16px rgba(10,58,44,.25)}
.chip.on::before{content:"✓";background:var(--lime);color:var(--e950);border-color:var(--lime);font-weight:800}
.chip:active{transform:scale(.97)}
.chip[disabled]{opacity:.55;pointer-events:none}
.chip.on[disabled]{opacity:.9}
.actionbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;width:min(1000px,calc(100% - 24px));border-radius:999px;background:rgba(255,255,255,.95);border:1px solid var(--line);backdrop-filter:blur(12px);box-shadow:0 14px 40px rgba(10,58,44,.22)}
.savestate{font-size:.85rem;color:var(--muted);font-weight:600}
.savestate.ok{color:#0b7a52}
.savestate.err{color:#b13a28}
.notice{padding:12px 16px;border-radius:16px;background:#eaf3fb;color:#1f4f7d;margin-bottom:12px;font-size:.9rem;font-weight:600}
.notice--warn{background:var(--gold-soft);color:#7a5a0a}

/* ---------- tables / tabs / stats ---------- */
.tbl-wrap{overflow:auto;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-size:.75rem;font-weight:800;text-align:left;padding:12px;white-space:nowrap}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--lime-soft)}
.tbl input{min-height:36px;padding:5px 9px;font-size:.88rem;border-radius:10px}
.tbl td.num{font-variant-numeric:tabular-nums;text-align:right}
.tbl tr.tie td{background:#fdeceb}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.tab{padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--e800);cursor:pointer;font-weight:700}
.tab:hover{border-color:var(--e500)}
.tab.active{background:var(--forest);color:#fff;border-color:var(--e900)}
.stat{padding:20px 22px;text-align:left}
.stat b{display:block;font-weight:800;font-size:2.6rem;letter-spacing:-.04em;color:var(--heading);line-height:1.05}
.stat span{font-size:.85rem;color:var(--muted);font-weight:700}
.bar{height:14px;border-radius:99px;background:#e3ebe6;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--e600),var(--lime));border-radius:99px;transition:width .6s ease}
body.screen .bar{background:rgba(0,0,0,.35)}

/* ---------- toast / modal / login ---------- */
#toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;display:grid;gap:8px;width:min(92vw,520px)}
.toast{padding:14px 18px;border-radius:18px;background:var(--e900);color:#fff;font-weight:600;box-shadow:var(--shadow);animation:pop .25s}
.toast.err{background:#7a1f14}
.toast.ok{background:var(--e700)}
@keyframes pop{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.modal-back{position:fixed;inset:0;background:rgba(6,37,28,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:150;padding:14px}
.modal{width:min(560px,100%);max-height:92vh;overflow:auto;padding:26px;background:#fff;color:var(--text)}
.modal h2{margin-bottom:14px;color:var(--heading)}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.login{min-height:70vh;display:grid;place-items:center;padding:16px}
.login .card{width:min(440px,100%);padding:32px}
.demo-ribbon{position:fixed;top:0;right:0;z-index:300;background:var(--amber);color:#2a1700;font-weight:800;font-size:.7rem;padding:4px 12px;border-bottom-left-radius:10px}
.preview{width:104px;height:104px;border-radius:28%;margin:8px auto;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:var(--card-shadow)}
.preview img{width:100%;height:100%;object-fit:contain}

body:not(.screen) .banner{max-width:1400px;width:calc(100% - 32px);margin:16px auto}
body:not(.screen) .banner--compact{margin:12px auto}
@media (max-width:900px){
  .judge{grid-template-columns:1fr}
  .rail{position:static;max-height:none;padding:14px}
  .rail .schoollist{display:none}
  .banner{grid-template-columns:1fr;text-align:center;padding:18px;gap:14px}
  .banner__side{justify-content:center}
  .tracks{grid-template-columns:1fr}
  .total{margin-left:0;width:100%}
  .chips{grid-template-columns:1fr}
}
@media print{.no-print{display:none!important}}

/* ---------- booth picker (judge) ---------- */
.jumprow{display:flex;gap:8px;margin-bottom:12px}
.jumprow input{flex:1;min-width:0;font-size:1.3rem;font-weight:800;text-align:center;letter-spacing:.02em}
.jumprow .btn{min-width:56px}
.numgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.numbtn{aspect-ratio:1;min-height:48px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--text);font-weight:800;font-size:1.05rem;cursor:pointer;transition:.12s}
.numbtn:hover{border-color:var(--e500)}
.numbtn.is-draft{background:var(--gold-soft);border-color:#ecd48a;color:#7a5a0a}
.numbtn.is-done,.numbtn.is-revised{background:var(--lime-soft);border-color:#9fe0bc;color:#0b6b48}
.numbtn.active{background:var(--e900);border-color:var(--e900);color:#fff;box-shadow:0 6px 16px rgba(10,58,44,.3)}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin:12px 2px 6px;font-size:.75rem;font-weight:700;color:var(--muted)}
.legend .lg::before{content:"";display:inline-block;width:11px;height:11px;border-radius:4px;background:var(--surface-2);border:1.5px solid var(--line);margin-right:6px;vertical-align:-1px}
.legend .lg-done::before{background:var(--lime-soft);border-color:#9fe0bc}
.legend .lg-draft::before{background:var(--gold-soft);border-color:#ecd48a}
.schoollist{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.kp-disp{font-weight:800;font-size:3rem;text-align:center;letter-spacing:.06em;padding:14px;border-radius:20px;background:var(--surface-2);margin-bottom:12px;min-height:84px;display:grid;place-items:center}
.kp-disp.kp-empty{font-size:1.2rem;color:var(--muted);letter-spacing:0}
.kp-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kp-key{min-height:68px;border-radius:20px;border:0;background:var(--lime-soft);color:var(--e900);font-weight:800;font-size:1.7rem;cursor:pointer}
.kp-key:active{transform:scale(.96);background:#c4efd6}
.kp-key.kp-alt{background:var(--surface-2);font-size:1.05rem;color:var(--muted)}

/* ---------- login ---------- */
.login-wrap{display:grid;place-items:center;padding:8px 16px 60px}
.login-card{width:min(480px,100%);padding:36px}
.login-card h1{font-weight:800;letter-spacing:-.03em;font-size:1.9rem;color:var(--heading)}
.login-card .sub{color:var(--muted);margin:6px 0 18px;font-weight:600}
.login-card .btn--gold{width:100%;margin-top:20px;min-height:56px;font-size:1.05rem}