/* ==========================================================================
   LIMSAR Online Admissions — v2 · Modern Corporate ERP theme
   Palette: slate neutrals + medical green primary · Inter throughout
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* neutrals */
  --bg:        #f4f7f8;
  --surface:   #ffffff;
  --surface-2: #eef2f4;
  --ink:       #14242c;
  --ink-2:     #3f525c;
  --muted:     #6a7b85;
  --line:      #e2e8eb;
  --line-2:    #cfd9de;

  /* brand */
  --primary:    #0e7c66;
  --primary-600:#0a5f4e;
  --primary-700:#084a3e;
  --primary-50: #e7f3ef;
  --primary-100:#cfe7df;

  /* support */
  --accent:     #b07d1f;   /* amber for badges */
  --accent-50:  #f7eede;
  --info:       #1f6feb;
  --info-50:    #e8f1fe;
  --danger:     #c5392c;
  --danger-50:  #fdecea;
  --ok:         #0e7c66;

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.18rem, 1.1rem + 0.35vw, 1.4rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);

  /* shape */
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(16,36,44,.06);
  --shadow: 0 1px 2px rgba(16,36,44,.05), 0 4px 14px rgba(16,36,44,.07);
  --shadow-md: 0 8px 28px rgba(16,36,44,.12);

  --container: 1200px;
  --gutter: clamp(1rem, 3.5vw, 2rem);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; animation-duration:.01ms !important; } }
body { font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); font-weight: 700; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
:focus-visible { outline: 3px solid #58b39e; outline-offset: 2px; border-radius: 6px; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--primary); color:#fff; padding:.6rem 1rem; border-radius: var(--r-sm); transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.eyebrow { font-weight: 700; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-600); }
.muted { color: var(--muted); }
.visually-hidden { position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ---- Top utility bar ---------------------------------------------------- */
.topbar { background: var(--ink); color: #c8d3d9; font-size: var(--fs-sm); }
.topbar .container { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; padding-block: .55rem; }
.topbar a { color: #e6edf0; }
.topbar .ti { display: inline-flex; align-items: center; gap: .45rem; }
.topbar .ti svg { width: 15px; height: 15px; opacity: .75; flex: none; }
.topbar .spacer { margin-left: auto; }

/* ---- Header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.site-header .container { display: flex; align-items: center; gap: clamp(1rem,2.5vw,2rem); padding-block: 1.05rem; }
.brand-lockup { display: inline-flex; align-items: center; gap: .65rem; flex: none; }
.brand-lockup img { height: 50px; width: auto; }
.brand-lockup .bt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-lockup .bt strong { font-size: 1.2rem; font-weight: 800; color: var(--primary-700); letter-spacing: -.01em; }
.brand-lockup .bt span { font-size: .62rem; letter-spacing: .03em; color: var(--muted); text-transform: uppercase; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: .1rem; list-style: none; padding: 0; }
.main-nav a { display: inline-block; padding: .55rem .8rem; border-radius: var(--r-sm); white-space: nowrap; color: var(--ink-2); font-weight: 600; font-size: .92rem; text-decoration: none; transition: color .15s, background .15s; }
.main-nav a:hover { color: var(--primary-700); background: var(--primary-50); }
.main-nav a[aria-current="page"] { color: var(--primary-700); background: var(--primary-50); }
.header-actions { display: flex; align-items: center; gap: .55rem; flex: none; }
.nav-toggle { display: none; }
@media (max-width: 1080px){ .main-nav a { padding: .55rem .6rem; font-size: .88rem; } }

/* ---- Buttons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font); font-weight: 600; font-size: .94rem; line-height: 1; padding: .72rem 1.2rem; min-height: 44px; border-radius: var(--r-sm); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:hover { text-decoration: none; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-600); box-shadow: var(--shadow); }
.btn-outline { background: var(--surface); color: var(--primary-700); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--primary); background: var(--primary-50); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { width: 100%; }
.btn-lg { min-height: 50px; padding-inline: 1.5rem; font-size: 1rem; }
.btn-on-dark { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.4); }
.btn-on-dark:hover { background: rgba(255,255,255,.2); border-color:#fff; }

/* ---- Badges ------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em; }
.badge-open { background: var(--primary-50); color: var(--primary-700); }
.badge-open .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(14,124,102,.18); }
.badge-amber { background: var(--accent-50); color: #7c560f; }
.badge-soft { background: var(--surface-2); color: var(--ink-2); }

/* ---- Section scaffolding ------------------------------------------------ */
.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section.tint { background: var(--surface); }
.section-head { max-width: 60ch; margin-bottom: clamp(1.5rem, 3.5vw, 2.4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .4rem; }
.section-head p { color: var(--ink-2); font-size: var(--fs-md); margin-top: .6rem; }

/* ---- Hero --------------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { margin-top: 1rem; }
.hero h1 .hl { color: var(--primary-600); }
.hero .lead { font-size: var(--fs-md); color: var(--ink-2); margin-top: 1rem; max-width: 50ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.trust { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; }
.trust li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-2); }
.trust svg { width: 16px; height: 16px; color: var(--primary); flex: none; }

/* hero side card */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.panel-head h3 { font-size: 1.08rem; }
.panel-head .panel-sub { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.panel-body { padding: 1.5rem 1.4rem .4rem; }
.plist { list-style: none; padding: 0; display: grid; gap: 0; }
.plist li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 1rem; padding-bottom: 1.4rem; }
.plist li:last-child { padding-bottom: 0; }
.plist li::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 4px; width: 2px; background: linear-gradient(var(--primary) 0%, var(--line-2) 100%); opacity: .4; }
.plist li:last-child::before { display: none; }
.plist .pn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1rem; background: var(--primary-50); color: var(--primary-700); border: 1.5px solid var(--primary); }
.plist .pn.alt { background: var(--accent-50); color: #7c560f; border-color: var(--accent); }
.plist b { display: block; font-size: 1rem; margin-bottom: .12rem; }
.plist span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.panel-foot { padding: 1.1rem 1.4rem 1.4rem; border-top: 1px solid var(--line); margin-top: 1.1rem; }
.panel-note { display: flex; align-items: center; gap: .5rem; font-size: .83rem; color: var(--muted); margin-bottom: .85rem; }
.panel-note svg { width: 15px; height: 15px; color: var(--primary); flex: none; }

/* ---- Stat band ---------------------------------------------------------- */
.stat-band { background: var(--surface); border-bottom: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.stat { background: var(--surface); padding: 1.4rem clamp(1rem,2vw,1.6rem); display: flex; gap: .9rem; align-items: center; }
.stat .si { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--primary-50); color: var(--primary-700); display: grid; place-items: center; flex: none; }
.stat .si svg { width: 22px; height: 22px; }
.stat b { display: block; font-size: 1.02rem; }
.stat span { color: var(--muted); font-size: .84rem; }

/* ---- Cards (features / steps) ------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-xs); transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card .ci { width: 46px; height: 46px; border-radius: var(--r); background: var(--primary-50); color: var(--primary-700); display: grid; place-items: center; margin-bottom: 1rem; }
.card .ci svg { width: 24px; height: 24px; }
.card .step-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card h3 { margin: .15rem 0 .4rem; }
.card p { color: var(--ink-2); font-size: .95rem; }

/* ---- Resource cards (link tiles) --------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 92px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; text-decoration: none; transition: transform .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: var(--primary); text-decoration: none; }
.tile .ti2 { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--primary-50); color: var(--primary-700); display: grid; place-items: center; }
.tile .ti2 svg { width: 21px; height: 21px; }
.tile b { display: block; font-size: .96rem; color: var(--ink); }
.tile span { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.tile .go { position: absolute; top: .85rem; right: .85rem; width: 15px; height: 15px; color: var(--line-2); transition: color .15s; }
.tile:hover .go { color: var(--primary); }

/* ---- Table -------------------------------------------------------------- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); background: var(--surface); }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 560px; }
table.data thead th { text-align: left; background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
table.data tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--primary-50); }
table.data td b { color: var(--ink); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #aeb9c0; padding-block: clamp(2.5rem,5vw,3.5rem) 1.4rem; }
.site-footer a { color: #e6edf0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer-brand strong { color:#fff; font-size: 1.15rem; font-weight: 800; }
.footer-brand p { font-size: .9rem; color: #94a2aa; max-width: 36ch; margin-top: .6rem; }
.footer-col h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: #7e8d95; margin-bottom: .85rem; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.2rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .84rem; color: #859099; }

/* ==========================================================================
   AUTH (login)
   ========================================================================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-aside { position: relative; background: linear-gradient(160deg, var(--primary) 0%, var(--primary-700) 100%); color: #eaf3ef; padding: clamp(2rem,4vw,3.5rem); display: flex; flex-direction: column; justify-content: space-between; }
.auth-aside .brand-lockup .bt strong { color:#fff; } .auth-aside .brand-lockup .bt span { color:#bcd9d0; }
.auth-aside h2 { color:#fff; max-width: 18ch; margin-top: auto; }
.auth-aside .a-sub { color:#c8e0d8; margin-top: .9rem; max-width: 42ch; }
.auth-aside .a-list { list-style:none; padding:0; margin-top: 1.6rem; display: grid; gap: .7rem; }
.auth-aside .a-list li { display:flex; gap:.6rem; align-items:center; font-size:.92rem; color:#d6eae3; }
.auth-aside .a-list svg { width:18px;height:18px;color:#fff;flex:none; }
.auth-main { display: flex; flex-direction: column; padding: clamp(1.4rem,4vw,3rem); background: var(--surface); }
.auth-card { width: 100%; max-width: 410px; margin: auto; }
.auth-card h1 { font-size: var(--fs-xl); margin: .4rem 0 .35rem; }
.auth-card .a-lead { color: var(--ink-2); margin-bottom: 1.6rem; }
.auth-back { display: flex; width: fit-content; align-items: center; gap: .4rem; font-size: .88rem; color: var(--muted); margin-bottom: 1.3rem; }
.auth-card .eyebrow { display: block; margin-bottom: .5rem; }
.auth-note { margin-top: 1.3rem; font-size: .9rem; color: var(--muted); }
.auth-phone { font-weight: 700; font-size: 1.05rem; color: var(--primary-700); white-space: nowrap; }
.auth-foot { margin-top: 1.6rem; padding: 1.3rem; border: 1px solid var(--primary-100); border-radius: var(--r-lg); background: var(--primary-50); }
.af-text { font-size: 1.02rem; color: var(--ink-2); margin-bottom: .85rem; text-align: center; }
.af-text strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { display: grid; gap: .4rem; margin-bottom: 1.2rem; align-content: start; }
.field > label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.field .req { color: var(--danger); margin-left: 1px; }
.field .hint { font-size: .82rem; color: var(--muted); }
.input, .select, textarea.input { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: .7rem .85rem; min-height: 46px; transition: border-color .15s, box-shadow .15s, background .15s; }
.input::placeholder { color: #9aa7ad; }
.input:hover, .select:hover { border-color: var(--primary); }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,124,102,.16); }
.select { appearance: none; -webkit-appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236a7b85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right .8rem center; padding-right: 2.4rem; }
textarea.input { min-height: 92px; resize: vertical; }
.field.has-error .input, .field.has-error .select { border-color: var(--danger); background: var(--danger-50); }
.field.has-error .input:focus, .field.has-error .select:focus { box-shadow: 0 0 0 3px rgba(197,57,44,.16); }
.field.is-valid .input, .field.is-valid .select { border-color: var(--primary); }
.error-msg { display: none; align-items: center; gap: .35rem; color: var(--danger); font-size: .82rem; font-weight: 600; }
.field.has-error .error-msg { display: flex; }
.error-msg svg { width: 14px; height: 14px; flex: none; }
.input-affix { position: relative; }
.input-affix .input { padding-right: 3rem; }
.affix-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: var(--muted); padding: .5rem; border-radius: 8px; display: grid; place-items: center; }
.affix-btn:hover { color: var(--primary-700); background: var(--primary-50); }
.affix-btn svg { width: 20px; height: 20px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--primary); flex: none; }
.check label { font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.check-inline { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.check-inline input { accent-color: var(--primary); width: 18px; height: 18px; flex: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; align-items: start; }

/* ==========================================================================
   REGISTER
   ========================================================================== */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: clamp(1.6rem,4vw,2.4rem); }
.page-head .col { max-width: 820px; margin-inline: auto; }
.crumbs { font-size: .85rem; color: var(--muted); display: flex; gap: .4rem; }
.crumbs a { color: var(--muted); }
.ph-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.ph-title h1 { font-size: var(--fs-xl); margin-top: .3rem; }
.step-count { font-size: .85rem; color: var(--muted); white-space: nowrap; padding-bottom: .25rem; }
.step-count b { color: var(--primary-700); }
.reg-intro { color: var(--ink-2); margin-top: .5rem; font-size: .97rem; }
.reg-intro .req { color: var(--danger); font-weight: 700; }
.progress { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; align-items: center; }
.pstep { display: flex; align-items: center; gap: .6rem; flex: none; }
.pstep:not(:last-child) { flex: 1; }
.pstep:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--line-2); margin: 0 .85rem; border-radius: 2px; }
.pdot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--muted); flex: none; }
.pmeta { display: flex; flex-direction: column; line-height: 1.2; }
.pmeta b { font-size: .9rem; color: var(--ink); }
.pmeta span { font-size: .78rem; color: var(--muted); }
.pstep.is-current .pdot { background: var(--primary); border-color: var(--primary); color:#fff; box-shadow: 0 0 0 4px var(--primary-50); }
.pstep.is-current .pmeta b { color: var(--primary-700); }

.reg-single { max-width: 820px; margin-inline: auto; padding-block: 1.8rem clamp(3rem,6vw,4.5rem); }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.fieldset { border: none; padding: clamp(1.4rem,3.2vw,2rem); border-bottom: 1px solid var(--line); }
.fieldset:last-of-type { border-bottom: none; }
.fieldset > .field:last-child, .fieldset > .grid-2:last-child .field { margin-bottom: 0; }
.fs-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.4rem; }
.fs-head .fs-n { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--primary-50); color: var(--primary-700); display: grid; place-items: center; font-weight: 800; font-size: .95rem; flex: none; }
.fs-head h2 { font-size: 1.18rem; }
.fs-head .fs-sub { font-size: .84rem; color: var(--muted); margin-top: 2px; }
.form-actions { padding: clamp(1.4rem,3.2vw,2rem); display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; align-items: center; background: var(--surface-2); }
.form-actions .grow { margin-right: auto; }
.note-soft { display: flex; gap: .6rem; font-size: .86rem; color: var(--ink-2); background: var(--accent-50); border: 1px solid #ecddc0; border-radius: var(--r-sm); padding: .8rem .9rem; }
.note-soft svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; }
.inline-note { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; color: var(--ink-2); margin: -.3rem 0 1rem; }
.inline-note svg { width: 16px; height: 16px; color: var(--primary); flex: none; margin-top: 2px; }
.subgroup-toggle { margin-bottom: 1rem; }
.error-summary { display: none; background: var(--danger-50); border: 1px solid #f0c4be; border-left: 4px solid var(--danger); border-radius: var(--r-sm); padding: 1rem 1.1rem; margin: clamp(1.4rem,3.2vw,2rem) clamp(1.4rem,3.2vw,2rem) 0; }
.error-summary.show { display: block; }
.error-summary h2 { font-size: 1rem; color: var(--danger); margin-bottom: .4rem; }
.error-summary ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.error-summary a { color: var(--danger); }
.reg-foot-note { text-align: center; font-size: .85rem; color: var(--muted); margin-top: 1.1rem; }

/* ==========================================================================
   Mobile nav + Responsive
   ========================================================================== */
.mobile-nav { display: none; border-bottom: 1px solid var(--line); background: var(--surface); }
.mobile-nav.open { display: block; }
@media (min-width: 921px){ .mobile-nav { display: none !important; } }

@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-panel { order: 2; }
  .cards { grid-template-columns: 1fr; gap: 1rem; }
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .main-nav, .header-actions .btn-outline { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; }
  .nav-toggle svg { width: 24px; height: 24px; color: var(--ink); }
  .mobile-nav ul { list-style: none; margin: 0; padding: .5rem 0; }
  .mobile-nav a { display: block; padding: .8rem var(--gutter); color: var(--ink); font-weight: 600; text-decoration: none; }
  .mobile-nav a:hover { background: var(--primary-50); }
  .mobile-nav .mn-cta { padding: 1rem var(--gutter); display: grid; gap: .6rem; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .ph-title { flex-wrap: wrap; }
  .pmeta span { display: none; }
  .topbar .ti.hide-sm { display: none; }
}

/* ==========================================================================
   STATUS / RESULT pages (success, payment, 404) + OTP
   ========================================================================== */
.result-wrap { display: flex; align-items: center; justify-content: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.status-card { width: 100%; max-width: 560px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center; }
.status-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.3rem; }
.status-ic svg { width: 36px; height: 36px; }
.status-ic.ok { background: var(--primary-50); color: var(--primary-700); }
.status-ic.warn { background: var(--accent-50); color: #7c560f; }
.status-ic.err { background: var(--danger-50); color: var(--danger); }
.status-ic.info { background: var(--info-50); color: var(--info); }
.status-card h1 { font-size: var(--fs-xl); }
.status-card .lead2 { color: var(--ink-2); margin-top: .7rem; font-size: var(--fs-md); }
.status-code { font-size: clamp(3.2rem, 2rem + 6vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--primary); margin-bottom: .4rem; }
.status-detail { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.25rem; margin-top: 1.5rem; display: grid; gap: .65rem; }
.kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .94rem; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 700; color: var(--ink); text-align: right; }
.kv .v.badge { font-weight: 700; }
.status-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.7rem; }
.status-note { font-size: .85rem; color: var(--muted); margin-top: 1.3rem; }
.status-note a { color: var(--primary-700); font-weight: 600; }

/* OTP inputs */
.otp { display: flex; gap: .6rem; margin: .2rem 0; }
.otp input { flex: 1; min-width: 0; height: 58px; text-align: center; font: inherit; font-size: 1.5rem; font-weight: 700; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s; }
.otp input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,124,102,.16); }
.otp input.filled { border-color: var(--primary); background: var(--primary-50); }
.otp-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0 1.4rem; font-size: .9rem; color: var(--muted); }
.otp-resend { background: none; border: none; color: var(--primary-700); font-weight: 700; font-size: .9rem; cursor: pointer; padding: 0; }
.otp-resend[disabled] { color: var(--muted); cursor: default; }
@media (max-width: 600px){ .otp input { height: 50px; font-size: 1.25rem; } }

/* Single OTP input */
.otp-single { text-align: center; letter-spacing: .5em; font-weight: 700; font-size: 1.3rem; padding-inline: .5rem; }
.otp-single::placeholder { letter-spacing: .4em; color: #b9c3c8; font-weight: 600; }

/* Server-rendered messages (PHP) — shown above forms on validation/login errors */
.server-alert{border-radius:12px;padding:12px 14px;margin:0 0 16px;font-size:.92rem;font-weight:500;line-height:1.5}
.server-alert.err{background:#fcecec;border:1px solid #f1c7c7;color:#9b1c1c}
.server-alert.ok{background:#e8f6ef;border:1px solid #bfe3d0;color:#0a5f4e}
.cf-turnstile{margin:6px 0 2px}

/* =====================================================================
   Student login — "elevated two-panel" (v2.9). Scoped lgn-* classes so
   the OTP-verify page (.auth-*) is unaffected.
   ===================================================================== */
.lgn{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;font-family:'Inter',system-ui,sans-serif;color:#16323b}
.lgn *{box-sizing:border-box}
/* ---- brand panel ---- */
.lgn-brand{position:relative;overflow:hidden;padding:48px 52px;display:flex;flex-direction:column;gap:30px;
  background:radial-gradient(120% 120% at 0% 0%,#0e8488 0%,#0a5f4e 55%,#073f37 100%);color:#eafaf4}
.lgn-brand::after{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:radial-gradient(circle at 18% 22%,#fff 0 1.4px,transparent 1.6px);background-size:26px 26px}
.lgn-brand>*{position:relative;z-index:1}
.lgn-logo{display:inline-flex;align-items:center;gap:12px}
.lgn-logo img{width:46px;height:46px;background:#fff;border-radius:12px;padding:6px}
.lgn-logo .wm{display:flex;flex-direction:column;line-height:1.05}
.lgn-logo .wm b{font-size:1.5rem;font-weight:800;letter-spacing:.14em;color:#fff}
.lgn-logo .wm span{font-size:.62rem;letter-spacing:.04em;color:#bfe9dc;max-width:230px;margin-top:3px}
.lgn-hd h2{font-size:1.85rem;line-height:1.18;margin:0 0 10px;color:#fff;font-weight:800;letter-spacing:-.01em}
.lgn-hd p{margin:0;color:#bfe9dc;font-size:.96rem;line-height:1.6;max-width:420px}
.lgn-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.lgn-steps li{display:flex;gap:14px;align-items:flex-start}
.lgn-steps .n{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:.9rem;border:1px solid rgba(255,255,255,.22)}
.lgn-steps b{display:block;color:#fff;font-size:.96rem;font-weight:700}
.lgn-steps span{color:#a9d8cb;font-size:.85rem}
.lgn-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.lgn-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:7px 12px;border-radius:999px;font-size:.78rem;color:#eafaf4;font-weight:500}
.lgn-chip svg{width:15px;height:15px}
.lgn-copy{color:#8fc6b8;font-size:.8rem}
/* ---- form panel ---- */
.lgn-form{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:#f3f7f8}
.lgn-card{width:100%;max-width:430px;background:#fff;border:1px solid #e6eef0;border-radius:20px;
  padding:38px 36px;box-shadow:0 40px 80px -52px rgba(7,63,55,.55)}
.lgn-back{display:inline-flex;align-items:center;gap:6px;width:max-content;color:#5a7882;text-decoration:none;font-size:.85rem;font-weight:600;margin-bottom:18px}
.lgn-back:hover{color:#0a5f4e}
.lgn-eyebrow{display:block;clear:both;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0e8488;margin-bottom:8px}
.lgn-card h1{font-size:1.7rem;font-weight:800;margin:0 0 6px;color:#16323b;letter-spacing:-.01em}
.lgn-lead{margin:0 0 22px;color:#5a7882;font-size:.92rem}
.lgn-fl{position:relative;margin-bottom:16px}
.lgn-fl>label{position:absolute;left:15px;top:15px;color:#7d97a0;font-size:.95rem;pointer-events:none;
  transition:all .15s ease;background:#fff;padding:0 5px}
.lgn-fl .ip{width:100%;height:54px;border:1.5px solid #d3e0e3;border-radius:12px;padding:0 15px;font-size:1rem;
  color:#16323b;background:#fff;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.lgn-fl .ip:focus{outline:none;border-color:#0e8488;box-shadow:0 0 0 4px rgba(14,132,136,.14)}
.lgn-fl .ip:focus+label,
.lgn-fl .ip:not(:placeholder-shown)+label{top:-8px;font-size:.74rem;color:#0a5f4e;font-weight:600}
.lgn-fl.has-pass .ip{padding-right:48px}
.lgn-reveal{position:absolute;right:8px;top:8px;width:38px;height:38px;border:0;background:transparent;border-radius:9px;
  color:#6a8089;cursor:pointer;display:grid;place-items:center}
.lgn-reveal:hover{background:#eef4f5;color:#0a5f4e}
.lgn-reveal svg{width:20px;height:20px}
.lgn-reveal svg[hidden]{display:none}
.lgn-caps{display:none;align-items:center;gap:6px;margin:-6px 0 12px;color:#b45309;font-size:.8rem;font-weight:600}
.lgn-caps.on{display:flex}
.lgn-caps svg{width:14px;height:14px}
.lgn-row{display:flex;justify-content:space-between;align-items:center;margin:2px 0 18px;font-size:.85rem}
.lgn-row a{color:#0a5f4e;text-decoration:none;font-weight:600}
.lgn-row a:hover{text-decoration:underline}
.lgn-btn{width:100%;height:54px;border:0;border-radius:12px;background:#0a5f4e;color:#fff;font-size:1rem;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:background .15s,transform .05s,box-shadow .15s;box-shadow:0 14px 26px -14px rgba(10,95,78,.8)}
.lgn-btn:hover{background:#084d40}
.lgn-btn:active{transform:translateY(1px)}
.lgn-btn svg{width:19px;height:19px}
.lgn-divider{display:flex;align-items:center;gap:12px;margin:24px 0 18px;color:#9bb0b6;font-size:.78rem}
.lgn-divider::before,.lgn-divider::after{content:"";flex:1;height:1px;background:#e3ecee}
.lgn-new{text-align:center}
.lgn-new p{margin:0 0 12px;color:#5a7882;font-size:.9rem}
.lgn-ghost{display:inline-flex;width:100%;height:50px;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid #cfe0e2;border-radius:12px;color:#0a5f4e;text-decoration:none;font-weight:700;font-size:.95rem;transition:.15s}
.lgn-ghost:hover{background:#0a5f4e;color:#fff;border-color:#0a5f4e}
.lgn-ghost svg{width:18px;height:18px}
.lgn-help{margin:20px 0 0;text-align:center;color:#7d97a0;font-size:.82rem}
.lgn-help a{color:#0a5f4e;font-weight:600;text-decoration:none}
.lgn .server-alert{margin-bottom:18px}
@media (max-width:880px){
  .lgn{grid-template-columns:1fr}
  .lgn-brand{padding:30px 26px;gap:20px}
  .lgn-brand .lgn-steps,.lgn-brand .lgn-hd p{display:none}      /* compact header on phones */
  .lgn-brand .lgn-trust{margin-top:8px}
  .lgn-form{padding:26px 18px}
  .lgn-card{padding:30px 22px;box-shadow:0 20px 50px -34px rgba(7,63,55,.5)}
  .lgn-hd h2{font-size:1.35rem}
}

/* ---- OTP verify, matched to the login two-panel (v2.9.2) ---- */
.lgn-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.lgn-list li{display:flex;gap:11px;align-items:flex-start;color:#cdeee3;font-size:.93rem;line-height:1.45}
.lgn-list svg{flex:0 0 20px;width:20px;height:20px;color:#5dcaa5;margin-top:1px}
.lgn-otp-label{display:block;font-size:.82rem;font-weight:600;color:#2c4a55;margin-bottom:8px}
.lgn-otp-input{width:100%;height:64px;border:1.5px solid #d3e0e3;border-radius:14px;background:#fff;text-align:center;
  font-size:1.55rem;letter-spacing:.5em;font-weight:700;color:#16323b;padding-left:.5em;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.lgn-otp-input::placeholder{letter-spacing:.3em;color:#c2d2d6;font-weight:600}
.lgn-otp-input:focus{outline:none;border-color:#0e8488;box-shadow:0 0 0 4px rgba(14,132,136,.14)}
.lgn-resend{display:flex;align-items:center;justify-content:center;gap:7px;margin:18px 0 0;font-size:.88rem;color:#5a7882}
.lgn-resend form{margin:0}
.lgn-resend button{background:none;border:0;color:#0a5f4e;font-weight:700;font:inherit;cursor:pointer;padding:0}
.lgn-resend button:hover:not(:disabled){text-decoration:underline}
.lgn-resend button:disabled{color:#9bb0b6;cursor:default;text-decoration:none}