/* ==========================================================================
   3 ANDHRA NAVAL UNIT NCC — DEFENCE DESIGN SYSTEM
   A single stylesheet shared by the public site, the LMS and the admin console.
   Palette draws from naval service dress (deep navy + gold braid), the national
   tricolour (saffron / white / india green) and chakra blue.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Naval navy ramp */
  --navy-950:#02101f;
  --navy-900:#04182f;
  --navy-850:#062240;
  --navy-800:#082c52;
  --navy-700:#0b3a6b;
  --navy-600:#0f4d8c;
  --navy-500:#1665b3;
  --navy-400:#3d8bd4;

  /* Gold braid / rank lace */
  --gold-600:#9c7715;
  --gold-500:#c2971f;
  --gold-400:#dcb43c;
  --gold-300:#efd071;
  --gold-100:#fbf1d3;

  /* National tricolour */
  --saffron:#ff9933;
  --saffron-dark:#e07b18;
  --india-green:#128807;
  --chakra:#0a1f8f;

  /* Steel neutrals */
  --ink:#101a28;
  --ink-2:#2b3a4d;
  --muted:#66748a;
  --muted-2:#8e9aab;
  --line:#dfe6ee;
  --line-2:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f4f7fb;
  --surface-3:#e9eff6;

  /* Status */
  --ok:#0f8a4d;
  --ok-bg:#e6f6ed;
  --warn:#b8730a;
  --warn-bg:#fdf3e2;
  --danger:#c2352b;
  --danger-bg:#fdeceb;
  --info:#0f4d8c;
  --info-bg:#e8f1fa;

  /* Type */
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Geometry */
  --r-sm:4px; --r:8px; --r-lg:14px; --r-xl:20px;
  --shadow-1:0 1px 2px rgba(8,26,50,.06), 0 2px 8px rgba(8,26,50,.06);
  --shadow-2:0 4px 12px rgba(8,26,50,.08), 0 16px 40px rgba(8,26,50,.10);
  --shadow-3:0 24px 60px rgba(3,16,32,.28);
  --ring:0 0 0 3px rgba(22,101,179,.28);

  --header-h:64px;
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--surface);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy-500);outline-offset:2px}
::selection{background:var(--gold-300);color:var(--navy-900)}

/* Scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--surface-2)}
*::-webkit-scrollbar-thumb{background:#c3cede;border-radius:20px;border:2px solid var(--surface-2)}
*::-webkit-scrollbar-thumb:hover{background:#a8b6cb}

/* --- 2. Layout primitives ------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.section--band{background:var(--surface-2);border-block:1px solid var(--line)}
.section--dark{background:var(--navy-900);color:#dbe7f4}
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
/* Grid children default to min-width:auto, which lets a wide child (a table,
   a long unbroken string) stretch the whole track. This lets them shrink so
   the child's own overflow-x can do its job. */
.grid > *, .stack > *, .split > *{min-width:0}
/* Rows wrap by default — on a phone a non-wrapping flex row is the single
   most common cause of horizontal page overflow. */
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.row--nowrap{flex-wrap:nowrap;min-width:0}
.spacer{flex:1}

/* Two-column splits that collapse on narrow screens. Using a class rather than
   an inline grid-template-columns keeps the media query able to win. */
.split{display:grid;gap:26px;grid-template-columns:1.25fr .95fr;align-items:start}
.split--even{grid-template-columns:1fr 1fr;gap:32px}
.split--side{grid-template-columns:1fr 360px;gap:36px}
@media (max-width:960px){ .split,.split--even,.split--side{grid-template-columns:1fr} }
.stack{display:grid;gap:14px}
.hide{display:none !important}

/* --- 3. Typography ------------------------------------------------------- */
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy-600);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-400)}
.section--dark .eyebrow{color:var(--gold-300)}
h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0;line-height:1.18;letter-spacing:-.01em}
.display{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.02em}
.h1{font-size:clamp(26px,3vw,38px);font-weight:800}
.h2{font-size:clamp(22px,2.4vw,30px);font-weight:800}
.h3{font-size:20px;font-weight:700}
.h4{font-size:16px;font-weight:700}
.lede{font-size:17px;color:var(--muted);max-width:62ch}
.section--dark .lede{color:#a9c0d8}
.small{font-size:13px}
.tiny{font-size:11.5px}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.uc{text-transform:uppercase;letter-spacing:.12em}
.center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.section-head .lede{margin:12px auto 0}
.section-head--left{margin-left:0;text-align:left}
.section-head--left .lede{margin-left:0}

/* Gold hairline rule with a centred diamond — echoes ceremonial rank lace */
.rule{display:flex;align-items:center;gap:10px;justify-content:center;margin:18px 0}
.rule::before,.rule::after{content:"";height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--gold-400))}
.rule::after{background:linear-gradient(90deg,var(--gold-400),transparent)}
.rule i{width:7px;height:7px;background:var(--gold-400);transform:rotate(45deg)}

/* --- 4. Tricolour + service ribbons -------------------------------------- */
.tricolour{height:4px;background:linear-gradient(90deg,var(--saffron) 0 33.33%,#ffffff 33.33% 66.66%,var(--india-green) 66.66% 100%)}
.tricolour--thin{height:3px}
.ribbon-bar{display:flex;height:10px;width:56px;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ribbon-bar span{flex:1}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn{
  --btn-bg:var(--navy-800); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn--gold{--btn-bg:linear-gradient(180deg,var(--gold-400),var(--gold-500));--btn-fg:#231a00}
.btn--gold:hover{box-shadow:0 6px 18px rgba(194,151,31,.35)}
.btn--saffron{--btn-bg:linear-gradient(180deg,#ffa64d,var(--saffron-dark));--btn-fg:#2a1400}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5)}
.btn--ghost:hover{--btn-bg:rgba(255,255,255,.12)}
.btn--outline{--btn-bg:#fff;--btn-fg:var(--navy-800);--btn-bd:var(--line)}
.btn--outline:hover{--btn-bd:var(--navy-500);--btn-fg:var(--navy-600)}
.btn--quiet{--btn-bg:var(--surface-2);--btn-fg:var(--ink-2);--btn-bd:var(--line)}
.btn--danger{--btn-bg:#fff;--btn-fg:var(--danger);--btn-bd:#f0c5c1}
.btn--danger:hover{--btn-bg:var(--danger);--btn-fg:#fff}
.btn--sm{padding:7px 13px;font-size:12.5px;border-radius:var(--r-sm)}
.btn--lg{padding:15px 28px;font-size:15.5px}
.btn--block{width:100%}
.btn--icon{padding:8px;width:34px;height:34px;border-radius:var(--r-sm)}

.linkish{color:var(--navy-600);font-weight:700;cursor:pointer;border:0;background:none;padding:0}
.linkish:hover{text-decoration:underline}

/* --- 6. Chips, badges, pills --------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;background:var(--surface-3);color:var(--navy-700);
  border:1px solid transparent;white-space:nowrap;
}
.chip--ok{background:var(--ok-bg);color:var(--ok)}
.chip--warn{background:var(--warn-bg);color:var(--warn)}
.chip--danger{background:var(--danger-bg);color:var(--danger)}
.chip--info{background:var(--info-bg);color:var(--info)}
.chip--gold{background:var(--gold-100);color:var(--gold-600)}
.chip--dark{background:rgba(255,255,255,.12);color:#dbe7f4;border-color:rgba(255,255,255,.2)}
.chip--outline{background:#fff;border-color:var(--line);color:var(--muted)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--live .dot{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.stencil{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-500);
}

/* --- 7. Cards ------------------------------------------------------------ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-1);position:relative;
  transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#c9d7e6}
.card--flat{box-shadow:none}
.card--pad-0{padding:0;overflow:hidden}
/* Wide tables scroll inside their card instead of widening the page. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.table-scroll .table{min-width:560px}

/* Dossier card: notched top-left corner + gold accent bar, like a file jacket */
.card--dossier{padding-top:26px}
.card--dossier::before{
  content:"";position:absolute;left:22px;top:0;width:44px;height:4px;
  background:var(--gold-400);border-radius:0 0 3px 3px;
}

.feature{padding:26px 24px}
.feature .ficon{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(160deg,var(--navy-800),var(--navy-600));color:var(--gold-300);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);margin-bottom:16px;
}
.feature h4{margin-bottom:8px;color:var(--navy-800)}
.feature p{margin:0;color:var(--muted);font-size:14.5px}

/* --- 8. Global chrome: top strip, masthead, nav -------------------------- */
.gov-strip{
  background:var(--navy-950);color:#9fb4cb;font-size:12px;
  display:flex;align-items:center;gap:16px;padding:7px 24px;justify-content:center;
}
.gov-strip .wrap{display:flex;align-items:center;gap:16px;width:100%;max-width:var(--maxw);padding:0}
.gov-strip a{color:#c9dcee}
.gov-strip a:hover{color:var(--gold-300)}
.gov-strip .sep{width:1px;height:12px;background:rgba(255,255,255,.18)}

.masthead{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.masthead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 200px at 88% -20%, rgba(61,139,212,.35), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px);
}
.masthead .wrap{display:flex;align-items:center;gap:18px;padding-block:16px;position:relative;z-index:2}
.crest{
  width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#123c6d,#04182f 70%);
  border:2px solid var(--gold-400);box-shadow:0 0 0 4px rgba(220,180,60,.14);
  overflow:hidden;
}
.crest img{width:100%;height:100%;object-fit:cover}
.crest .crest-txt{font-size:9.5px;font-weight:800;line-height:1.15;text-align:center;color:var(--gold-300);letter-spacing:.04em}
.masthead h1{font-size:22px;letter-spacing:.01em}
.masthead .sub{font-size:13px;color:#a9c0d8;margin-top:3px}
.masthead-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

.navbar{
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 rgba(8,26,50,.03);
}
.navbar .wrap{display:flex;align-items:center;gap:4px;height:var(--header-h)}
.navlink{
  font-size:13.5px;font-weight:700;color:var(--ink-2);padding:10px 14px;border-radius:var(--r-sm);
  position:relative;white-space:nowrap;transition:color .16s ease,background .16s ease;
}
.navlink:hover{color:var(--navy-600);background:var(--surface-2)}
.navlink.is-active{color:var(--navy-700)}
.navlink.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;
  background:var(--gold-400);border-radius:3px 3px 0 0;
}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;cursor:pointer}

.avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,var(--navy-600),var(--navy-800));color:#fff;
  font-weight:800;font-size:13px;letter-spacing:.02em;
}
.avatar--lg{width:56px;height:56px;font-size:19px}
.usermenu{position:relative}
.usermenu-panel{
  position:absolute;right:0;top:calc(100% + 10px);width:260px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  padding:8px;z-index:80;
}
.usermenu-panel a,.usermenu-panel button{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:var(--r-sm);
  background:none;border:0;text-align:left;font-size:14px;font-weight:600;cursor:pointer;
}
.usermenu-panel a:hover,.usermenu-panel button:hover{background:var(--surface-2)}

/* --- 9. Hero ------------------------------------------------------------- */
.hero{position:relative;background:var(--navy-950);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero::before{ /* radar sweep grid + horizon gradient */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(92deg, rgba(2,16,31,.96) 0%, rgba(4,24,47,.86) 45%, rgba(4,24,47,.35) 100%),
    radial-gradient(circle at 78% 34%, rgba(61,139,212,.30) 0 22%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px);
}
.hero .wrap{position:relative;padding-block:96px 108px}
.hero-inner{max-width:700px}
.hero h2{font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:-.02em;margin:18px 0 16px;line-height:1.05}
.hero h2 em{font-style:normal;color:var(--gold-300);display:block}
.hero p{font-size:18px;color:#bed3e8;max-width:56ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hero-stats b{display:block;font-size:30px;font-weight:800;color:var(--gold-300);line-height:1.1}
.hero-stats span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8fa9c4}
/* Deck line: angled navy/sky/white band across the hero base */
.hero-deck{position:absolute;left:-4%;right:-4%;bottom:-70px;height:150px;transform:rotate(-1.4deg);
  background:linear-gradient(6deg,#fff 0 42%,var(--gold-400) 43% 47%,var(--navy-700) 48% 62%,transparent 63%)}

/* --- 10. Notice board ---------------------------------------------------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.panel-head{
  background:linear-gradient(180deg,var(--navy-800),var(--navy-850));color:#fff;
  padding:14px 18px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:10px;
  border-bottom:3px solid var(--gold-400);
}
.panel-body{padding:18px}
.panel-list{list-style:none;margin:0;padding:0}
.panel-list li{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;gap:12px;align-items:flex-start}
.panel-list li:last-child{border-bottom:0}
.panel-list li:hover{background:var(--surface-2)}
.notice-date{
  flex:none;width:52px;text-align:center;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:4px 0;line-height:1.15;
}
.notice-date b{display:block;font-size:16px;color:var(--navy-700)}
.notice-date span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* --- 11. Course cards ---------------------------------------------------- */
.course-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:#c9d7e6}
.course-thumb{
  position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,var(--navy-800),var(--navy-600));
  display:grid;place-items:center;overflow:hidden;
}
.course-thumb img{width:100%;height:100%;object-fit:cover}
.course-thumb .glyph{font-size:46px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.course-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(2,16,31,.55))}
.thumb-top{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;z-index:2}
.thumb-bottom{position:absolute;bottom:10px;left:12px;right:12px;z-index:2;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:11.5px;font-weight:700}
.course-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.course-cat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-600)}
.course-card h4{font-size:16.5px;line-height:1.3}
.course-card .desc{font-size:13.5px;color:var(--muted);margin:0}
.course-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2)}
.course-meta span{display:inline-flex;align-items:center;gap:5px}

.rail{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 18px;scroll-snap-type:x mandatory}
.rail > *{flex:0 0 300px;scroll-snap-align:start}

/* --- 12. Progress -------------------------------------------------------- */
.bar{height:7px;border-radius:100px;background:var(--surface-3);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--navy-600),var(--navy-400));transition:width .4s ease}
.bar--gold > i{background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.bar--slim{height:5px}

.ring{--pct:0;width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gold-400) calc(var(--pct)*1%), rgba(255,255,255,.18) 0);position:relative}
.ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--navy-850)}
.ring b{position:relative;z-index:2;font-size:14px;color:#fff}
.ring--light::after{background:#fff}
.ring--light b{color:var(--navy-800)}

/* --- 13. Forms ----------------------------------------------------------- */
.field{display:grid;gap:6px}
.field > label{font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.field .hint{font-size:11.5px;color:var(--muted)}
.input,.select,.textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font-size:14px;transition:border-color .16s ease, box-shadow .16s ease;
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--navy-500);box-shadow:var(--ring)}
.textarea{resize:vertical;min-height:96px;line-height:1.6}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2366748a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.input--search{padding-left:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366748a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:13px center}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-weight:600}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:38px;height:22px;border-radius:100px;background:#cbd5e2;position:relative;transition:background .18s ease;flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + i{background:var(--navy-600)}
.switch input:checked + i::after{transform:translateX(16px)}
.checkline{display:flex;align-items:flex-start;gap:9px;font-size:13.5px}
.checkline input{margin-top:3px;accent-color:var(--navy-600);width:16px;height:16px}


/* --- 14. Tables ---------------------------------------------------------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);font-weight:800;
}
.table td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* --- 15. Modal, toast, empty --------------------------------------------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(3,16,32,.62);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:24px;z-index:200;animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:var(--r-xl);width:min(720px,100%);max-height:88vh;overflow:auto;
  box-shadow:var(--shadow-3);animation:rise .2s ease;
}
.modal--wide{width:min(980px,100%)}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal-head{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:#fff;z-index:3}
.modal-body{padding:24px}
.modal-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}
.x-btn{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:var(--r-sm)}
.x-btn:hover{background:var(--surface-2);color:var(--ink)}

#toasts{position:fixed;right:20px;bottom:20px;display:grid;gap:10px;z-index:300}
.toast{
  background:var(--navy-900);color:#fff;padding:13px 18px;border-radius:var(--r);
  box-shadow:var(--shadow-2);font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;
  border-left:4px solid var(--gold-400);animation:slidein .22s ease;max-width:380px;
}
.toast--ok{border-left-color:#41d38a}
.toast--err{border-left-color:#ff7a6e}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

.empty{text-align:center;padding:56px 24px;color:var(--muted)}
.empty .glyph{font-size:44px;opacity:.5;margin-bottom:12px}
.empty h4{color:var(--ink-2);margin-bottom:6px}

/* --- 16. Footer ---------------------------------------------------------- */
.site-footer{background:var(--navy-950);color:#a9c0d8;padding-top:56px;margin-top:0}
.site-footer h5{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
.site-footer a{color:#a9c0d8;font-size:14px;display:block;padding:4px 0}
.site-footer a:hover{color:var(--gold-300)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* --- 17. Breadcrumb ------------------------------------------------------ */
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.crumbs a:hover{color:var(--navy-600);text-decoration:underline}
.crumbs .sep{opacity:.5}

/* --- 18. Auth pages ------------------------------------------------------ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{
  background:var(--navy-950);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.auth-brand::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 25%,rgba(61,139,212,.30),transparent 60%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 40px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 40px)}
.auth-brand > *{position:relative;z-index:2}
.auth-panel{display:grid;place-items:center;padding:40px 24px;background:var(--surface-2)}
.auth-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-2)}
.tabs-line{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:var(--r);margin-bottom:22px}
.tabs-line button{flex:1;padding:9px;border:0;background:none;border-radius:var(--r-sm);font-weight:700;font-size:13.5px;cursor:pointer;color:var(--muted)}
.tabs-line button.is-active{background:#fff;color:var(--navy-700);box-shadow:var(--shadow-1)}

/* --- 19. Learning player ------------------------------------------------- */
.player-shell{display:grid;grid-template-columns:1fr 356px;min-height:100vh;background:var(--navy-950)}
.player-main{display:flex;flex-direction:column;min-width:0}
.player-bar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;background:var(--navy-900);
  color:#fff;border-bottom:1px solid rgba(255,255,255,.10);position:sticky;top:0;z-index:20;
  flex-wrap:wrap;
}
.player-bar .title{font-weight:700;font-size:14.5px;min-width:0;flex:1}
.player-stage{background:#000;display:grid;place-items:center;position:relative;min-height:min(62vh,560px)}
.player-stage iframe,.player-stage video{width:100%;height:100%;min-height:min(62vh,560px);border:0;display:block}
.player-stage .doc-frame{background:#525659}
/* In-site document viewer (modal) — same rendering as the player stage. */
.viewer-stage{background:#000;display:grid;place-items:center;min-height:min(68vh,600px);overflow:hidden}
.viewer-stage iframe,.viewer-stage video{width:100%;height:100%;min-height:min(68vh,600px);border:0;display:block}
.viewer-stage.doc-frame{background:#525659}
.viewer-stage img{max-width:100%;height:auto}
.modal--wide .modal-body{padding-top:0}

.reading{background:#fff;padding:34px min(6vw,56px);line-height:1.75;font-size:16px;color:var(--ink-2)}
.reading h3{margin:26px 0 12px;color:var(--navy-800)}
.reading h3:first-child{margin-top:0}
.reading p{margin:0 0 14px}
.reading ul,.reading ol{margin:0 0 16px;padding-left:22px}
.reading li{margin-bottom:7px}
.player-info{background:#fff;padding:24px min(5vw,32px) 40px;flex:1}
.lesson-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px min(5vw,32px);background:#fff;border-top:1px solid var(--line);position:sticky;bottom:0;box-shadow:0 -6px 20px rgba(8,26,50,.06)}

.player-side{background:var(--navy-900);color:#cfe0f0;border-left:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;max-height:100vh;position:sticky;top:0}
.side-head{padding:20px;border-bottom:1px solid rgba(255,255,255,.10)}
.side-scroll{overflow-y:auto;flex:1}
.module-head{
  padding:14px 18px;background:rgba(255,255,255,.05);border-block:1px solid rgba(255,255,255,.08);
  display:flex;gap:10px;align-items:center;cursor:pointer;user-select:none;
}
.module-head b{font-size:13.5px;color:#fff}
.module-head .meta{font-size:11.5px;color:#8fa9c4;margin-top:2px}
.module-head .caret{margin-left:auto;transition:transform .2s ease;color:#8fa9c4}
.module-head.is-collapsed .caret{transform:rotate(-90deg)}
.lesson-item{
  display:flex;gap:11px;align-items:flex-start;padding:12px 18px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:13.5px;transition:background .14s ease;
}
.lesson-item:hover{background:rgba(255,255,255,.06)}
.lesson-item.is-current{background:rgba(220,180,60,.14);box-shadow:inset 3px 0 0 var(--gold-400)}
.lesson-item.is-locked{opacity:.42;cursor:not-allowed}
.lesson-item .tick{
  width:19px;height:19px;flex:none;border-radius:50%;border:1.6px solid #64809e;margin-top:1px;
  display:grid;place-items:center;font-size:11px;color:transparent;
}
.lesson-item.is-done .tick{background:var(--gold-400);border-color:var(--gold-400);color:var(--navy-900)}
.lesson-item .lmeta{font-size:11.5px;color:#8fa9c4;display:flex;gap:8px;margin-top:3px;align-items:center}
.type-glyph{font-size:12px}

/* Quiz */
.quiz{max-width:760px;margin:0 auto;background:#fff;padding:32px;border-radius:var(--r-lg)}
.quiz-q{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:16px}
.quiz-opt{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);margin-top:9px;cursor:pointer;font-size:14px}
.quiz-opt:hover{border-color:var(--navy-400);background:var(--surface-2)}
.quiz-opt.is-picked{border-color:var(--navy-600);background:var(--info-bg)}
.quiz-opt.is-right{border-color:var(--ok);background:var(--ok-bg)}
.quiz-opt.is-wrong{border-color:var(--danger);background:var(--danger-bg)}
.quiz-opt input{accent-color:var(--navy-600);margin-top:2px}

/* --- 20. Admin shell ----------------------------------------------------- */
.admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:var(--surface-2)}
.admin-side{background:var(--navy-950);color:#a9c0d8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.admin-brand{padding:20px;display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.10)}
.admin-nav{padding:12px 10px;overflow-y:auto;flex:1}
.admin-nav .group{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin:16px 12px 8px;color:#5f7791}
.admin-nav button{
  width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;border:0;background:none;
  color:#c3d6e8;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;text-align:left;
}
.admin-nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.admin-nav button.is-active{background:linear-gradient(90deg,rgba(220,180,60,.22),transparent);color:#fff;box-shadow:inset 3px 0 0 var(--gold-400)}
.admin-nav .ico{width:20px;text-align:center;font-size:15px}
.admin-foot{padding:14px;border-top:1px solid rgba(255,255,255,.10);font-size:12px}

.admin-main{min-width:0;display:flex;flex-direction:column}
.admin-top{
  background:#fff;border-bottom:1px solid var(--line);padding:16px 28px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:40;
  flex-wrap:wrap;
}
.admin-body{padding:28px;flex:1}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-1)}
.kpi .label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.kpi .value{font-size:30px;font-weight:800;color:var(--navy-800);margin:8px 0 2px;line-height:1}
.kpi .delta{font-size:12px;color:var(--muted)}

/* Curriculum builder */
.builder-module{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden}
.builder-module-head{display:flex;gap:10px;align-items:center;padding:13px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.builder-lesson{
  display:flex;gap:11px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line-2);
  background:#fff;font-size:13.5px;
}
.builder-lesson:last-child{border-bottom:0}
.builder-lesson.is-dragging{opacity:.4}
.builder-lesson.is-drop-target{box-shadow:inset 0 -3px 0 var(--navy-500)}
.drag-handle{cursor:grab;color:var(--muted-2);font-size:15px;padding:2px 4px;user-select:none}
.drag-handle:active{cursor:grabbing}
.seq{
  width:24px;height:24px;flex:none;border-radius:6px;background:var(--navy-800);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:800;
}
.type-pill{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px}
.type-video{background:#e8f1fa;color:#0f4d8c}
.type-pdf{background:#fdeceb;color:#c2352b}
.type-ppt{background:#fdf3e2;color:#b8730a}
.type-reading{background:#eef2f7;color:#48586d}
.type-quiz{background:#e6f6ed;color:#0f8a4d}

/* --- 21. Misc ------------------------------------------------------------ */
.media-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2)}
.thumb-mini{width:78px;height:46px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);flex:none;background:var(--surface-3)}
.divider{height:1px;background:var(--line);margin:22px 0}
.tag-list{display:flex;gap:7px;flex-wrap:wrap}
.sticky-side{position:sticky;top:calc(var(--header-h) + 20px)}
.print-only{display:none}

/* Certificate */
.certificate{
  background:#fffdf6;border:12px double var(--gold-500);padding:52px;text-align:center;
  position:relative;box-shadow:var(--shadow-2);
}
.certificate h2{font-size:34px;color:var(--navy-900);letter-spacing:.04em}
.certificate .name{font-size:32px;color:var(--navy-700);border-bottom:2px solid var(--gold-500);display:inline-block;padding:6px 40px;margin:18px 0}

/* --- 22. Responsive ------------------------------------------------------ */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .player-shell{grid-template-columns:1fr}
  .player-side{position:static;max-height:none;border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .admin-shell{grid-template-columns:74px 1fr}
  .admin-nav button span:not(.ico){display:none}
  .admin-brand .brand-txt{display:none}
  .admin-nav .group{display:none}
}
@media (max-width:860px){
  .g-3,.g-2{grid-template-columns:1fr}
  .auth-wrap{grid-template-columns:1fr}
  .auth-brand{display:none}
  .navbar .wrap{height:auto;padding-block:10px;flex-wrap:wrap}
  .nav-toggle{display:block}
  .navlinks{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:8px}
  .navlinks.is-open{display:flex}
  .navlink.is-active::after{display:none}
  .navlink.is-active{background:var(--surface-2)}
  .hero .wrap{padding-block:64px 84px}
  .section{padding:52px 0}
  .masthead h1{font-size:18px}
  .masthead .sub{font-size:12px}
  .gov-strip{font-size:11px}
}
@media (max-width:640px){
  /* Player controls stack rather than push the page sideways. */
  .player-bar{padding:10px 14px;gap:8px}
  .player-bar .title{order:3;flex:1 0 100%;font-size:13.5px}
  .player-bar #bar-progress{min-width:120px !important}
  .lesson-nav{padding:14px 16px}
  .lesson-nav .btn{flex:1 1 auto;justify-content:center}
  .lesson-nav .spacer{display:none}
  .reading{padding:24px 18px}
  .player-info{padding:20px 18px 32px}
  .quiz{padding:20px 16px}
}
@media (max-width:560px){
  .g-4{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .hero-stats{gap:22px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .admin-body{padding:16px}
  .modal-body{padding:18px}
}

/* --- 23. Print ----------------------------------------------------------- */
@media print{
  .gov-strip,.masthead,.navbar,.site-footer,.no-print{display:none !important}
  .print-only{display:block}
  body{background:#fff}
  .certificate{box-shadow:none}
}