/* =============================================================
   SETS x Tamil Nadu Police — 5-Day AI Training Workshop
   Theme: deep navy / deep blue / teal / green-teal / light green
   ============================================================= */

:root{
  --navy:#141163;
  --blue:#17577E;
  --teal:#188A8D;
  --green:#3F9F7F;
  --lime:#60DD8E;

  --navy-d:#0D0B45;
  --blue-d:#124566;
  --ink:#16203A;
  --muted:#5B6780;
  --line:#DCE3EE;
  --bg:#F4F7FB;
  --card:#FFFFFF;

  --radius:14px;
  --radius-sm:10px;
  --shadow-s:0 2px 8px rgba(20,17,99,.07);
  --shadow-m:0 10px 26px rgba(20,17,99,.12);
  --shadow-l:0 24px 60px rgba(20,17,99,.22);
  --max:1200px;
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:130px}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= TOP IDENTITY BAR ================= */
.topbar{
  background:var(--navy-d);color:#fff;
  border-bottom:1px solid rgba(96,221,142,.22);
}
.topbar .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:22px;padding-block:16px;
}
.topbar-side{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-side.left{justify-self:end}
.topbar-side.right{justify-self:end}
.topbar-side picture{display:block;flex:0 0 auto}
/* SETS logo — light "glow" version of sets_logo.png so it reads on the navy bar */
.sets-logo{display:block;height:clamp(62px,9vh,80px);width:auto;max-width:100%;object-fit:contain}
.id-text{min-width:0;text-align:center}
.org-name{
  font-size:clamp(1.08rem,2.05vw,1.45rem);font-weight:800;letter-spacing:.2px;
  margin:0 0 7px;color:#fff;line-height:1.28;
}
.org-name .accent{color:var(--lime)}
.org-sub{
  margin:0;font-size:clamp(.72rem,.98vw,.88rem);
  color:rgba(255,255,255,.8);line-height:1.5;font-weight:500;
}
/* first description line — same light-green accent as "(SETS)" */
.org-sub.org-tag{color:var(--lime);font-weight:600;letter-spacing:.3px}
.org-sub + .org-sub{margin-top:3px}

/* ================= NAV ================= */
.nav{
  position:sticky;top:0;z-index:900;
  background:rgba(20,17,99,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 6px 24px rgba(13,11,69,.28);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px}
.brand-mini{display:flex;align-items:center;padding-block:0;flex:0 0 auto}
.brand-mini picture{display:block;flex:0 0 auto}
/* transparent artwork — sits directly on the navy bar, no background box.
   Height is capped below the fixed bar height so the logo can grow without
   making the nav taller. */
.brand-logo{display:block;height:clamp(44px,5.8vh,58px);width:auto;max-width:100%;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:2px;margin:0}
.nav-links a{
  display:block;padding:20px 15px;color:rgba(255,255,255,.82);
  font-size:.9rem;font-weight:600;letter-spacing:.2px;
  position:relative;transition:color .2s ease,background .2s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:11px;height:2px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;border-radius:2px;
}
.nav-links a:hover{color:#fff;background:rgba(24,138,141,.22)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:#fff}
.nav-toggle{
  display:none;background:transparent;border:1.5px solid rgba(96,221,142,.5);
  color:#fff;border-radius:9px;padding:8px 10px;cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;margin:4px 0;border-radius:2px;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* day pill in nav */
.day-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(96,221,142,.15);border:1px solid rgba(96,221,142,.42);
  color:var(--lime);font-size:.72rem;font-weight:700;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.day-pill i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:blip 1.6s infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(96,221,142,.6)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(96,221,142,0)}}

/* ================= HERO ================= */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1100px 600px at 78% 12%,#1E5B8A 0%,transparent 62%),
             radial-gradient(900px 520px at 8% 92%,#14666B 0%,transparent 60%),
             linear-gradient(150deg,var(--navy) 0%,#101C6B 48%,var(--navy-d) 100%);
  min-height:600px;
  display:flex;align-items:center;
  padding-block:70px 58px;
}
#neural{position:absolute;inset:0;width:100%;height:100%;opacity:.62}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:140px;
  background:linear-gradient(to top,rgba(13,11,69,.85),transparent);pointer-events:none;
}
.hero .wrap{position:relative;z-index:3}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:center}

.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(24,138,141,.28);border:1px solid rgba(96,221,142,.42);
  color:var(--lime);font-size:.74rem;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;padding:8px 15px;border-radius:999px;margin-bottom:20px;
}
.hero-kicker i{width:6px;height:6px;border-radius:50%;background:var(--lime)}

/* emblem + kicker grouped: the group shrink-wraps to the chip's width, so the
   emblem is centred over the "5-Day Professional AI Training Program" chip */
.hero-head{display:flex;flex-direction:column;align-items:center;width:fit-content;gap:20px}

/* TN Police emblem — sits on the dark hero with a soft glow so the emblem's
   blue disc still reads against the navy background */
.hero-emblem{
  display:block;height:clamp(84px,11vh,116px);width:auto;margin:0;
  filter:drop-shadow(0 0 12px rgba(214,235,255,.55))
         drop-shadow(0 0 26px rgba(120,190,255,.30))
         drop-shadow(0 8px 18px rgba(0,0,0,.5));
}

/* slider — all slides stacked in one grid cell so the tallest sets height */
.slider{position:relative;display:grid}
.slide{
  grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease,visibility .7s;pointer-events:none;
}
.slide.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.slide h1{
  font-size:clamp(1.85rem,4vw,3.05rem);font-weight:800;letter-spacing:-.5px;
  margin:0 0 18px;color:#fff;
}
.slide h1 .hl{
  background:linear-gradient(120deg,var(--lime),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.slide p.lead{
  font-size:1.03rem;color:rgba(255,255,255,.86);max-width:600px;margin-bottom:24px;
}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.meta-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  padding:9px 15px;border-radius:11px;font-size:.86rem;font-weight:600;color:#fff;
}
.meta-chip svg{width:16px;height:16px;stroke:var(--lime);fill:none;stroke-width:2}

.hero-cta{display:flex;flex-wrap:wrap;gap:13px}
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:13px 24px;border-radius:11px;font-weight:700;font-size:.92rem;
  border:1.5px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.btn svg{width:17px;height:17px;stroke-width:2.2;fill:none}
.btn-primary{background:var(--lime);color:#0D2A1B;box-shadow:0 10px 26px rgba(96,221,142,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(96,221,142,.4);background:#7BEB9F}
.btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--teal);transform:translateY(-2px)}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--green));color:#fff}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(24,138,141,.35)}
.btn-sm{padding:9px 16px;font-size:.83rem}

.dots{display:flex;gap:9px;margin-top:30px}
.dots button{
  width:34px;height:4px;border-radius:99px;border:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:.25s;padding:0;
}
.dots button.active{background:var(--lime);width:52px}

/* hero side column */
.hero-side{display:flex;flex-direction:column;gap:18px}

/* ---- AI robot canvas card ---- */
.robo-card{
  background:rgba(13,11,69,.55);border:1px solid rgba(96,221,142,.3);
  border-radius:20px;padding:12px 12px 10px;backdrop-filter:blur(12px);
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;
}
.robo-card::before{
  content:"";position:absolute;left:-70px;bottom:-70px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,138,141,.3),transparent 70%);pointer-events:none;
}
.robo-stage{position:relative;height:clamp(200px,28vh,292px);border-radius:14px;overflow:hidden;
  background:radial-gradient(420px 220px at 50% 42%,rgba(23,87,126,.42),rgba(13,11,69,.15) 70%)}
#robo{width:100%;height:100%;display:block}
.robo-chip{
  position:absolute;top:10px;left:12px;
  font-size:.6rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--lime);background:rgba(13,11,69,.65);border:1px solid rgba(96,221,142,.42);
  padding:4px 9px;border-radius:99px;backdrop-filter:blur(4px);
}
.robo-meta{
  display:flex;align-items:flex-start;gap:9px;padding:11px 6px 2px;
  font-size:.76rem;font-weight:600;color:rgba(255,255,255,.86);letter-spacing:.2px;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--lime);flex:0 0 auto;
  animation:blip 1.6s infinite;margin-top:5px;
}
/* italic "quote" tagline beside the live dot */
.robo-quote{
  min-width:0;font-style:italic;font-weight:500;color:rgba(255,255,255,.92);
  line-height:1.5;
}

/* hero side panel */
.hero-panel{
  background:rgba(13,11,69,.55);border:1px solid rgba(96,221,142,.3);
  border-radius:20px;padding:24px;backdrop-filter:blur(12px);
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;
}
.hero-panel::before{
  content:"";position:absolute;top:-60px;right:-60px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(96,221,142,.32),transparent 68%);
}
.panel-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.76rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--lime);margin-bottom:16px;position:relative;
}
.day-track{display:flex;flex-direction:column;gap:8px;position:relative}
.track-row{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  transition:.25s;
}
.track-row .n{
  width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:.78rem;background:rgba(255,255,255,.12);color:#fff;
}
.track-row .t{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.9);line-height:1.3}
.track-row .d{font-size:.7rem;color:rgba(255,255,255,.55)}
.track-row.is-current{
  background:linear-gradient(100deg,rgba(96,221,142,.24),rgba(24,138,141,.16));
  border-color:rgba(96,221,142,.65);transform:translateX(4px);
}
.track-row.is-current .n{background:var(--lime);color:#0D2A1B}
.track-row.is-current .t{color:#fff}
.track-row.is-live .t::after{content:"LIVE";margin-left:8px;font-size:.62rem;font-weight:800;color:#0D2A1B;background:var(--lime);padding:2px 7px;border-radius:99px;letter-spacing:.5px}

/* ================= STATS BAR ================= */
.stats{
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-s);position:relative;z-index:5;
}
.stats .wrap{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding-block:0;
}
.stat{
  padding:24px 18px;text-align:center;position:relative;
  border-right:1px solid var(--line);overflow:hidden;
}
.stat:last-child{border-right:0}
.stat-icon{
  width:38px;height:38px;margin:0 auto 10px;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(24,138,141,.14),rgba(96,221,142,.22));
  border:1px solid rgba(24,138,141,.25);
}
.stat-icon svg{width:19px;height:19px;fill:none;stroke:var(--blue);stroke-width:2}
.stat b{
  display:block;font-size:1.5rem;font-weight:800;color:var(--navy);
  letter-spacing:-.5px;line-height:1.1;
}
.stat span{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.3px}

/* --- "Total Hours" tile: click plays a count-up timer animation ------- */
.stat-anim{cursor:pointer;-webkit-tap-highlight-color:transparent}
.stat-anim:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
.stat-anim:hover .stat-icon{transform:translateY(-2px)}
.stat-anim .stat-icon{transition:transform .25s ease}

/* timer ring — a transparent overlay, so NO square card appears behind it */
.stat-timer{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  opacity:0;pointer-events:none;
}
.stat-timer.run{animation:timerPop 1.7s ease both}
@keyframes timerPop{
  0%{opacity:0;transform:scale(.94)}
  12%{opacity:1;transform:scale(1)}
  72%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.05)}
}
/* while it plays, the tile's own icon/number/label step aside so only the
   timer animation shows — then they come straight back */
.stat-anim.is-playing > .stat-icon,
.stat-anim.is-playing > b,
.stat-anim.is-playing > span{animation:tileStepAside 1.7s ease both}
@keyframes tileStepAside{
  0%{opacity:1}
  10%{opacity:0}
  82%{opacity:0}
  100%{opacity:1}
}
.timer-wrap{position:relative;display:grid;place-items:center}
.timer-ring{width:84px;height:84px;transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.timer-ring .rb{stroke:rgba(20,17,99,.13)}
.timer-ring .rf{
  stroke:var(--blue);stroke-dasharray:214;stroke-dashoffset:214;
  filter:drop-shadow(0 0 5px rgba(24,138,141,.55));
}
.stat-timer.run .timer-ring .rf{animation:ringSweep 1.3s linear .12s forwards}
@keyframes ringSweep{to{stroke-dashoffset:0}}
.timer-num{position:absolute;display:grid;place-items:center;line-height:1;color:var(--navy)}
.timer-num b{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;color:var(--navy)}
.timer-num small{
  font-size:.55rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--blue);margin-top:3px;
}

/* ---- shared pieces for the calendar / load / range / flight effects --- */
.fx-stage{position:relative;width:72px;height:72px;display:grid;place-items:center}
.stat-timer .fx-cap{
  display:block;margin-top:5px;line-height:1;text-align:center;
  font-size:.55rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--blue);
}

/* ---- 5 Days : calendar, the days pop in one after another ---- */
.fx-cal{width:72px;height:72px}
.cal-frame,.cal-sep,.cal-ring{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round}
.cal-dot{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center}
.stat-timer.run .cal-dot{animation:dotPop .34s ease both}
.stat-timer.run .cal-dot.d1{animation-delay:.12s}
.stat-timer.run .cal-dot.d2{animation-delay:.24s}
.stat-timer.run .cal-dot.d3{animation-delay:.36s}
.stat-timer.run .cal-dot.d4{animation-delay:.48s}
.stat-timer.run .cal-dot.d5{animation-delay:.60s}
@keyframes dotPop{
  0%{opacity:0;transform:scale(.2)}
  60%{opacity:1;transform:scale(1.3)}
  100%{opacity:1;transform:scale(1)}
}

/* ---- Hrs/Day (T + L) : circle loads once, then "T + L" closes ---- */
.fx-load svg{width:72px;height:72px;transform:rotate(-90deg)}
.ld-bg,.ld-fg{fill:none;stroke-width:5;stroke-linecap:round}
.ld-bg{stroke:rgba(20,17,99,.13)}
.ld-fg{stroke:var(--blue);stroke-dasharray:176;stroke-dashoffset:176}
.stat-timer.run .ld-fg{animation:loadDraw .95s cubic-bezier(.55,.1,.3,.95) .1s both}
@keyframes loadDraw{from{stroke-dashoffset:176}to{stroke-dashoffset:0}}
.ld-txt{
  position:absolute;white-space:nowrap;color:var(--navy);
  font-size:.62rem;font-weight:800;letter-spacing:.5px;
  opacity:0;transform:scale(.6);
}
.stat-timer.run .ld-txt{animation:tClose .85s ease .75s both}
@keyframes tClose{
  0%{opacity:0;transform:scale(.6)}
  22%{opacity:1;transform:scale(1)}
  72%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.5)}
}
/* ...and the loaded circle closes in at the very end */
.stat-timer.run .fx-load{animation:stageClose .4s ease 1.22s both}
@keyframes stageClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7)}}

/* ---- Nov 2026 : the 17 → 21 range sweeps in across the month ---- */
.fx-range{width:72px;height:72px}
.rg-frame,.rg-sep{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round}
.rg-mon{fill:var(--blue);font-size:11px;font-weight:800;letter-spacing:.8px;text-anchor:middle}
.rg-line{stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:40}
.stat-timer.run .rg-line{animation:lineDraw .5s ease .25s both}
@keyframes lineDraw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
.rg-dot{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center}
.stat-timer.run .rg-dot{animation:dotPop .3s ease both}
.stat-timer.run .rg-dot.r1{animation-delay:.30s}
.stat-timer.run .rg-dot.r2{animation-delay:.44s}
.stat-timer.run .rg-dot.r3{animation-delay:.58s}
.stat-timer.run .rg-dot.r4{animation-delay:.72s}
.stat-timer.run .rg-dot.r5{animation-delay:.86s}

/* ---- SETS Office : a flight circling the location pin ---- */
.fx-orbit{width:72px;height:72px}
.orb-path{fill:none;stroke:rgba(20,17,99,.16);stroke-width:1.6;stroke-dasharray:3 4.5}
.orb-pin{fill:var(--blue)}
.orb-hole{fill:#fff}
.fx-plane{
  position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  fill:var(--teal);transform:rotate(0deg) translateY(-27px);
}
.stat-timer.run .fx-plane{animation:orbit 1.4s linear .12s both}
@keyframes orbit{
  from{transform:rotate(0deg) translateY(-27px)}
  to{transform:rotate(360deg) translateY(-27px)}
}

@media (prefers-reduced-motion: reduce){
  .stat-timer.run{animation-duration:.8s}
  .stat-anim.is-playing > .stat-icon,
  .stat-anim.is-playing > b,
  .stat-anim.is-playing > span{animation-duration:.8s}
  .stat-anim .stat-icon{transition:none}
}

/* ================= SECTIONS ================= */
section{padding-block:76px}
.sec-head{max-width:760px;margin:0 auto 46px;text-align:center}
.sec-tag{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--teal);margin-bottom:12px;
  padding:5px 13px;border-radius:99px;background:rgba(24,138,141,.1);
  border:1px solid rgba(24,138,141,.24);
}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.15rem);color:var(--navy);margin-bottom:12px}
.sec-head h2 .bar{display:block;width:74px;height:4px;border-radius:9px;margin:14px auto 0;
  background:linear-gradient(90deg,var(--teal),var(--lime))}
.sec-head p{color:var(--muted);margin:0}

/* ---------- SCHEDULE ---------- */
.day-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-s);margin-bottom:24px;
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.day-card:hover{box-shadow:var(--shadow-m);transform:translateY(-3px)}
.day-card.is-current{border-color:var(--lime);box-shadow:0 14px 40px rgba(24,138,141,.2)}
.day-head{
  display:flex;align-items:flex-start;gap:18px;
  padding:22px 26px;background:linear-gradient(100deg,var(--blue),#0F4A6B);
  color:#fff;position:relative;overflow:hidden;
}
.day-head::after{
  content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(96,221,142,.28),transparent 70%);
}
.day-badge{
  flex:0 0 auto;width:62px;height:62px;border-radius:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(96,221,142,.5);
  display:grid;place-items:center;text-align:center;color:#fff;
}
.day-badge .dn{font-size:1.5rem;font-weight:800;line-height:1;display:block;color:var(--lime)}
.day-badge .dl{font-size:.6rem;letter-spacing:1px;text-transform:uppercase;opacity:.8}
.day-title{position:relative;z-index:2}
.day-title h3{font-size:1.14rem;margin:0 0 5px;color:#fff}
.day-title .when{font-size:.8rem;color:rgba(255,255,255,.78);display:flex;gap:14px;flex-wrap:wrap}
.day-title .when span{display:inline-flex;align-items:center;gap:6px}
svg.inline{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;opacity:.85;flex:0 0 auto}
.status{
  margin-left:auto;position:relative;z-index:2;flex:0 0 auto;
  font-size:.68rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  padding:6px 12px;border-radius:99px;white-space:nowrap;
}
.status.live{background:var(--lime);color:#0D2A1B}
.status.done{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35)}
.status.soon{background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.22)}

.day-body{padding:24px 26px 26px}
.day-summary{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.cols{display:grid;grid-template-columns:1.35fr .95fr;gap:26px}
.topics-list{display:grid;gap:9px}
.topics-list li{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 13px;border-radius:var(--radius-sm);
  background:#F7FAFC;border:1px solid #E9EFF6;font-size:.9rem;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.topics-list li:hover{background:rgba(96,221,142,.1);border-color:rgba(24,138,141,.35);transform:translateX(3px)}
.topics-list .num{
  flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:.7rem;font-weight:800;
}
.lab-box{
  background:linear-gradient(140deg,rgba(24,138,141,.08),rgba(63,159,127,.1));
  border:1px dashed rgba(24,138,141,.42);border-radius:var(--radius-sm);
  padding:16px 18px;margin-top:4px;
}
.lab-box h4{
  font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);
  margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.lab-box p{font-size:.87rem;margin:0;color:var(--ink)}
.day-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ---------- MATERIALS ---------- */
#materials{background:#EEF3F9}
.mat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px}
.mat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-s);transition:.3s;position:relative;
}
.mat-card:hover{box-shadow:var(--shadow-m);transform:translateY(-4px)}
.mat-card.is-current{outline:2px solid var(--lime);outline-offset:-2px}
.mat-top{
  padding:16px 20px;background:var(--navy);color:#fff;
  display:flex;align-items:center;gap:12px;
}
.mat-top .n{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--green));
  font-weight:800;font-size:.9rem;color:#fff;
}
.mat-top h3{font-size:.98rem;margin:0;color:#fff}
.mat-top small{display:block;font-size:.72rem;color:rgba(255,255,255,.66);font-weight:500}
.lock-chip{
  margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;background:rgba(96,221,142,.18);
  color:var(--lime);border:1px solid rgba(96,221,142,.4);white-space:nowrap;
}
.lock-chip.wait{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.26)}
.mat-body{padding:20px;display:flex;flex-direction:column;flex:1;gap:14px}

.file-row{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;background:#FBFCFE;transition:.2s;
}
.file-row:hover{border-color:rgba(24,138,141,.5);background:#F5FBF9}
.file-ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  font-size:.62rem;font-weight:800;color:#fff;background:var(--blue);letter-spacing:.4px;
}
.file-ic.pdf{background:#B3261E}
.file-ic.ppt{background:#C7501B}
.file-ic.doc{background:var(--blue)}
.file-ic.zip{background:var(--teal)}
.file-ic.link{background:var(--green)}
.file-meta{min-width:0;flex:1}
.file-meta b{display:block;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta span{font-size:.72rem;color:var(--muted)}
.file-row .dl{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid rgba(24,138,141,.4);
  background:rgba(96,221,142,.14);display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.file-row .dl:hover{background:var(--teal);border-color:var(--teal)}
.file-row .dl svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:2.2}
.file-row .dl:hover svg{stroke:#fff}

/* PPT groups: PPT 1, PPT 2 … with topic / file name, then nested sources */
.ppt-block{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#FBFCFE;overflow:hidden;transition:.2s;
}
.ppt-block:hover{border-color:rgba(24,138,141,.5);background:#F5FBF9}
.ppt-head{display:flex;align-items:center;gap:12px;padding:12px 14px}
.ppt-tag{
  flex:0 0 auto;padding:5px 9px;border-radius:8px;
  background:linear-gradient(135deg,var(--teal),var(--green));
  color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;
}
.ppt-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.ppt-meta b{font-size:.85rem;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppt-meta span{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppt-head .dl{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid rgba(24,138,141,.4);
  background:rgba(96,221,142,.14);display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.ppt-head .dl:hover{background:var(--teal);border-color:var(--teal)}
.ppt-head .dl svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:2.2}
.ppt-head .dl:hover svg{stroke:#fff}
.ppt-sources{
  border-top:1px dashed rgba(20,17,99,.14);
  padding:10px 14px 12px;display:flex;flex-direction:column;gap:8px;
  background:rgba(238,243,249,.55);
}
.ppt-sources .file-row{background:#fff;padding:9px 11px}
.ppt-sources-label{
  font-size:.62rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--teal);
}
.mat-empty{
  border:1px dashed var(--line);border-radius:var(--radius-sm);padding:18px;
  text-align:center;font-size:.82rem;color:var(--muted);background:#FBFCFE;
}

.drive-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px;border-radius:var(--radius-sm);font-weight:700;font-size:.88rem;
  background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;
  border:0;cursor:pointer;transition:.25s;margin-top:auto;width:100%;
}
.drive-btn:hover{background:linear-gradient(135deg,var(--teal),var(--green));transform:translateY(-2px);box-shadow:0 12px 26px rgba(24,138,141,.32)}
.drive-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}
.drive-btn[disabled]{
  background:#E4E9F1;color:#8A93A6;cursor:not-allowed;transform:none;box-shadow:none;
}
.drive-btn[disabled]:hover{background:#E4E9F1;box-shadow:none}

.notice{
  background:rgba(24,138,141,.09);border:1px dashed rgba(24,138,141,.45);
  border-radius:var(--radius-sm);padding:14px 18px;font-size:.86rem;color:var(--ink);
  margin-bottom:26px;display:flex;gap:12px;align-items:flex-start;
}
.notice svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--teal);fill:none;stroke-width:2;margin-top:2px}

/* ---------- LABS ---------- */
.lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.lab-card{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-s);transition:.3s;
}
.lab-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-top-color:var(--lime)}
.lab-card header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.lab-id{
  font-size:.68rem;font-weight:800;letter-spacing:.9px;color:var(--teal);
  background:rgba(24,138,141,.1);border:1px solid rgba(24,138,141,.26);
  padding:4px 10px;border-radius:99px;
}
.lab-card h3{font-size:.98rem;color:var(--navy);margin-bottom:8px}
.lab-card p{font-size:.86rem;color:var(--muted);margin-bottom:16px}
.chip{
  font-size:.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;
}
.chip.released{background:rgba(96,221,142,.2);color:#1B6B45;border:1px solid rgba(63,159,127,.4)}
.chip.locked{background:#EEF1F6;color:#7A839A;border:1px solid #DEE4EE}

/* ---------- INSTRUCTORS ---------- */
#instructors{background:linear-gradient(180deg,#fff,#F4F7FB)}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px}
.ins-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;text-align:center;box-shadow:var(--shadow-s);transition:.3s;position:relative;overflow:hidden;
}
.ins-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--teal),var(--lime));transform:scaleX(0);transform-origin:left;transition:.35s;
}
.ins-card:hover::before{transform:scaleX(1)}
.ins-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.avatar{
  width:76px;height:76px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:#0D0B45;
  background:linear-gradient(135deg,var(--lime),var(--teal));
  box-shadow:0 0 0 5px rgba(24,138,141,.12);
}
/* uploaded instructor photo — same round frame as the initials avatar */
.avatar-photo{
  display:block;object-fit:cover;object-position:center 22%;
  border:3px solid #fff;background:#E9EFF6;
}
.ins-card h3{font-size:1rem;color:var(--navy);margin-bottom:3px}
.ins-role{font-size:.78rem;font-weight:700;color:var(--teal);margin-bottom:10px}
.ins-card p{font-size:.84rem;color:var(--muted);margin-bottom:12px}
.ins-focus{
  font-size:.76rem;font-weight:600;color:var(--blue);
  background:rgba(23,87,126,.07);border:1px solid rgba(23,87,126,.16);
  border-radius:99px;padding:5px 12px;display:inline-block;
}

/* profile photo: hover/focus zoom with a square outline, click to enlarge */
.ins-face{
  display:grid;place-items:center;width:76px;height:76px;
  margin:0 auto 14px;padding:0;border:0;background:none;
  line-height:0;border-radius:50%;cursor:zoom-in;transition:transform .3s ease;
}
.ins-face .avatar{margin:0;transition:border-radius .3s ease,box-shadow .3s ease}
.ins-face:hover,.ins-face:focus-visible{transform:scale(1.16)}
.ins-face:hover .avatar,.ins-face:focus-visible .avatar{
  border-radius:18px;outline:3px solid rgba(24,138,141,.65);outline-offset:5px;
  box-shadow:0 14px 30px rgba(20,17,99,.22);
}
.ins-face:focus-visible{outline:none}

/* enlarged profile popup */
.ins-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:24px}
.ins-modal[hidden]{display:none}
.ins-modal-backdrop{position:absolute;inset:0;background:rgba(9,12,40,.72);backdrop-filter:blur(4px)}
.ins-modal-panel{
  position:relative;width:min(360px,100%);background:#fff;border-radius:20px;
  padding:26px 24px 28px;text-align:center;box-shadow:0 34px 90px rgba(6,10,40,.5);
  animation:dayModalIn .24s ease both;
}
.ins-modal-close{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--line);background:#F4F7FB;color:var(--navy);font-size:1.35rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:.2s;
}
.ins-modal-close:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.ins-modal-frame{
  width:190px;height:190px;margin:0 auto 20px;border-radius:18px;overflow:hidden;
  outline:4px solid rgba(24,138,141,.35);outline-offset:6px;
  background:linear-gradient(135deg,var(--lime),var(--teal));
  box-shadow:0 18px 40px rgba(20,17,99,.22);display:grid;place-items:center;
}
.ins-modal-img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.ins-modal-initials{font-size:3.4rem;font-weight:800;color:#0D0B45}
.ins-modal-panel h3{font-size:1.15rem;color:var(--navy);margin-bottom:4px}
.ins-modal-role{font-size:.82rem;font-weight:700;color:var(--teal);margin-bottom:12px}
.ins-modal-panel p{font-size:.86rem;color:var(--muted);margin-bottom:12px}
@media (max-width:640px){
  .ins-modal{padding:16px}
  .ins-modal-frame{width:160px;height:160px}
}
/* ---------- CONTACT ---------- */
#contact{background:linear-gradient(150deg,var(--navy),#101C6B 55%,var(--blue-d));color:#fff;position:relative;overflow:hidden}
#contact::before{
  content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(96,221,142,.16),transparent 68%);
}
#contact .sec-head h2{color:#fff}
#contact .sec-head p{color:rgba(255,255,255,.78)}
#contact .sec-tag{background:rgba(96,221,142,.14);border-color:rgba(96,221,142,.4);color:var(--lime)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;position:relative}
.c-info{display:grid;gap:16px;align-content:start}
.c-item{
  display:flex;gap:15px;align-items:flex-start;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:18px 20px;
}
.c-item .ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--green));
}
.c-item .ic svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2}
.c-item b{display:block;font-size:.72rem;letter-spacing:1.1px;text-transform:uppercase;color:var(--lime);margin-bottom:4px}
.c-item p{margin:0;font-size:.92rem;color:rgba(255,255,255,.9)}

.form-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:26px;backdrop-filter:blur(10px);
}
.form-card h3{font-size:1.05rem;color:#fff;margin-bottom:18px}
.field{margin-bottom:15px}
.field label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.78);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:10px;font-size:.9rem;font-family:inherit;
  background:rgba(13,11,69,.5);border:1px solid rgba(255,255,255,.2);color:#fff;transition:.2s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.42)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(96,221,142,.18);background:rgba(13,11,69,.72);
}
.field select option{background:var(--navy);color:#fff}
.form-msg{font-size:.84rem;margin-top:12px;color:var(--lime);display:none}
.form-msg.show{display:block}

/* ---------- participant feedback ---------- */
.form-lead{margin:-6px 0 4px;font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.55}
.form-deadline{margin:0 0 18px;font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--lime)}
.fb-closed{margin:0;padding:16px 18px;border-radius:12px;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.85);background:rgba(13,11,69,.45);border:1px solid rgba(255,255,255,.16)}
.fb-q{border:0;padding:0;margin:0 0 16px;min-width:0}
.fb-q legend{display:block;padding:0;margin-bottom:9px;font-size:.88rem;font-weight:700;line-height:1.45;color:rgba(255,255,255,.9)}
.fb-q .req{color:var(--lime)}
.fb-opts{display:flex;flex-wrap:wrap;gap:8px}
.fb-opt{
  display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:9px;cursor:pointer;
  font-size:.82rem;color:rgba(255,255,255,.86);transition:.18s;
  background:rgba(13,11,69,.5);border:1px solid rgba(255,255,255,.2);
}
.fb-opt:hover{border-color:rgba(96,221,142,.55)}
.fb-opt:has(input:checked){border-color:var(--lime);background:rgba(96,221,142,.14);color:#fff}
.fb-opt input{width:15px;height:15px;margin:0;accent-color:var(--lime);cursor:pointer}
@media(max-width:520px){.fb-opts{display:grid;grid-template-columns:1fr 1fr}.fb-opt{justify-content:flex-start}}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-d);color:rgba(255,255,255,.72);padding-block:44px 0;border-top:3px solid var(--teal)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:32px}
.f-brand{display:flex;gap:14px;align-items:flex-start}
.f-brand picture{display:block;flex:0 0 auto}
/* footer SETS logo — same artwork as the header, a touch smaller and top-aligned with the heading */
.f-brand .sets-logo{height:56px;margin-top:2px}
.f-brand h4{font-size:.95rem;color:#fff;margin-bottom:6px}
.f-brand p{font-size:.8rem;margin:0;line-height:1.5}
footer h5{font-size:.76rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.f-links{display:grid;gap:9px}
.f-links a{font-size:.85rem;transition:.2s}
.f-links a:hover{color:var(--lime);padding-left:4px}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-block:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.78rem;
}
.f-bottom .credit{color:rgba(255,255,255,.55)}
/* discreet link to the content admin panel */
.admin-link{
  margin-left:8px;color:var(--lime);opacity:.8;
  border-bottom:1px dotted rgba(96,221,142,.6);
}
.admin-link:hover{opacity:1}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- BACK TO TOP ---------- */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:950;
  width:46px;height:46px;border-radius:13px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--green));color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-m);
  opacity:0;pointer-events:none;transform:translateY(14px);transition:.3s;
}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.4}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-side{max-width:620px;margin-inline:auto;width:100%}
  .cols{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3){border-right:0}
  .stat:nth-child(n+4){border-top:1px solid var(--line)}
  .f-grid{grid-template-columns:1fr 1fr}
}
/* collapse the menu before the links start wrapping */
@media (max-width:1024px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;inset:100% 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--navy);border-bottom:1px solid rgba(96,221,142,.3);
    max-height:0;overflow:hidden;transition:max-height .34s ease;box-shadow:var(--shadow-m);
  }
  .nav-links.open{max-height:520px}
  .nav-links a{padding:15px 22px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links a::after{display:none}
  .nav .wrap{position:relative;flex-wrap:wrap}
  .nav-links li{padding-left:0!important}
  .nav-links .day-pill{margin:14px 22px;align-self:flex-start}
}
@media (max-width:860px){
  /* header: logo on one row, centred identity below */
  .topbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:14px}
  .topbar-side{order:1}
  .id-text{order:2;flex:1 1 100%}
  .hero-panel{padding:20px}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  section{padding-block:54px}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:0}
  .stat:nth-child(odd){border-right:1px solid var(--line)}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .day-head{flex-wrap:wrap}
  .status{margin-left:0}
  .day-body{padding:20px}
  .f-grid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ---------- DAY MATERIALS / LAB POPUP ---------- */
body.modal-open{overflow:hidden}
.day-modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:24px}
.day-modal[hidden]{display:none}
.day-modal-backdrop{position:absolute;inset:0;background:rgba(9,12,40,.64);backdrop-filter:blur(3px)}
.day-modal-panel{
  position:relative;display:flex;flex-direction:column;width:min(900px,100%);
  max-height:min(88vh,920px);background:#F4F7FB;border-radius:20px;overflow:hidden;
  box-shadow:0 34px 90px rgba(6,10,40,.45);animation:dayModalIn .24s ease both;
}
@keyframes dayModalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.day-modal-head{
  display:flex;align-items:flex-start;gap:18px;padding:22px 24px;
  background:linear-gradient(100deg,var(--blue),#0F4A6B);color:#fff;
}
.day-modal-head > div{min-width:0;flex:1}
.day-modal-tag{
  display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--lime);margin-bottom:6px;
}
.day-modal-head h2{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:0 0 6px;color:#fff}
.day-modal-sub{font-size:.82rem;color:rgba(255,255,255,.78);margin:0}
.day-modal-close{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.2s;
}
.day-modal-close:hover{background:rgba(255,255,255,.24);border-color:#fff}
.day-modal-days{
  display:flex;gap:8px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:thin;
}
.day-modal-days button{
  flex:0 0 auto;cursor:pointer;padding:8px 15px;border-radius:99px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:.78rem;font-weight:700;transition:.18s;
}
.day-modal-days button:hover{border-color:var(--teal);color:var(--teal)}
.day-modal-days button.on{background:linear-gradient(135deg,var(--teal),var(--green));border-color:transparent;color:#fff}
.day-modal-days button.is-off,
.day-modal-days button:disabled{
  opacity:.5;cursor:not-allowed;background:#F1F4F9;color:#8A93A6;
  border-style:dashed;box-shadow:none;
}
.day-modal-days button.is-off:hover,
.day-modal-days button:disabled:hover{border-color:var(--line);color:#8A93A6}
.modal-lock-note{
  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  background:rgba(24,138,141,.09);border:1px dashed rgba(24,138,141,.45);
  border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:16px;
  font-size:.8rem;color:var(--muted);
}
.modal-lock-note b{color:var(--navy)}
.day-modal-body{padding:22px 24px 26px;overflow:auto;overscroll-behavior:contain}
.day-modal-body .mat-card{box-shadow:none}
.day-modal-body .mat-card:hover{transform:none;box-shadow:none}
.day-modal-body .lab-card:hover{transform:none}
.day-modal-body .notice{margin-bottom:18px}
.modal-empty{
  border:1px dashed var(--line);border-radius:var(--radius-sm);padding:34px 20px;
  text-align:center;color:var(--muted);font-size:.9rem;background:#fff;
}
@media (max-width:640px){
  .day-modal{padding:0}
  .day-modal-panel{width:100%;max-height:100dvh;border-radius:0}
  .day-modal-head{padding:18px}
  .day-modal-days{padding:10px 18px}
  .day-modal-body{padding:18px}
}