/* KTDC shared foundation. Prototype tokens are preserved for each shell. */

/* ---------- tokens: light = Examiner's Desk ---------- */
:root{
  --brand:#F87614; --navy:#101136;
  --bg:#fbf7f0; --bg-alt:#f5eee2; --surface:#fffdf9; --surface-2:#ffffff;
  --ink:#1d1a16; --ink-2:#4a443c; --mute:#7a7165; --line:#e7dfd1;
  --brand-ink:#c25705; --brand-soft:rgba(248,118,20,.10); --logo-text:#101136;
  --good:#15803d; --good-bg:rgba(22,163,74,.10); --bad:#dc2626; --bad-bg:rgba(220,38,38,.08); --warn:#b45309; --warn-bg:rgba(217,119,6,.12);
  --shadow:0 1px 0 rgba(60,40,10,.03),0 18px 40px -26px rgba(60,40,10,.30);
  --glow-a:rgba(248,118,20,.09);
  --side:#101136; --side-ink:#c9cbe8; --side-mute:#7d80a8; --side-line:rgba(255,255,255,.08); --side-active:rgba(248,118,20,.16);
  --header:rgba(251,247,240,.85); --track:#ece4d6;
  color-scheme:light;
}
/* ---------- tokens: dark = Night Study ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0b24; --bg-alt:#0d0f2e; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07);
  --ink:#eceefb; --ink-2:#c4c7e6; --mute:#8d90b8; --line:rgba(255,255,255,.09);
  --brand-ink:#ffa862; --brand-soft:rgba(248,118,20,.16); --logo-text:#ffffff;
  --good:#4ade80; --good-bg:rgba(74,222,128,.10); --bad:#f87171; --bad-bg:rgba(248,113,113,.10); --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12);
  --shadow:0 20px 50px -30px rgba(0,0,0,.8);
  --glow-a:rgba(248,118,20,.18);
  --side:#070818; --side-ink:#c9cbe8; --side-mute:#7d80a8; --side-line:rgba(255,255,255,.07); --side-active:rgba(248,118,20,.16);
  --header:rgba(10,11,36,.78); --track:rgba(255,255,255,.08);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0a0b24; --bg-alt:#0d0f2e; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07);
  --ink:#eceefb; --ink-2:#c4c7e6; --mute:#8d90b8; --line:rgba(255,255,255,.09);
  --brand-ink:#ffa862; --brand-soft:rgba(248,118,20,.16); --logo-text:#ffffff;
  --good:#4ade80; --good-bg:rgba(74,222,128,.10); --bad:#f87171; --bad-bg:rgba(248,113,113,.10); --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12);
  --shadow:0 20px 50px -30px rgba(0,0,0,.8);
  --glow-a:rgba(248,118,20,.18);
  --side:#070818; --side-ink:#c9cbe8; --side-mute:#7d80a8; --side-line:rgba(255,255,255,.07); --side-active:rgba(248,118,20,.16);
  --header:rgba(10,11,36,.78); --track:rgba(255,255,255,.08);
  color-scheme:dark;
}



/* ---------- tokens: light = Examiner's Desk ---------- */
:root[data-shell="public"]{
  --brand:#F87614; --navy:#101136;
  --bg:#fbf7f0; --bg-alt:#f5eee2; --surface:#fffdf9; --surface-2:#ffffff;
  --ink:#1d1a16; --ink-2:#4a443c; --mute:#7a7165; --line:#e7dfd1;
  --brand-ink:#c25705; --logo-text:#101136;
  --shadow:0 1px 0 rgba(60,40,10,.03),0 18px 40px -24px rgba(60,40,10,.28);
  --glow-a:rgba(248,118,20,.10); --glow-b:rgba(16,17,54,.04);
  --header:rgba(251,247,240,.82); --chip:#ffffff; --tile:linear-gradient(160deg,#ffb57a,#F87614);
  --hero-em:#F87614; --btn-2:#fff;
  color-scheme:light;
}
/* ---------- tokens: dark = Night Study ---------- */
@media (prefers-color-scheme:dark){:root[data-shell="public"]:not([data-theme="light"]){
  --bg:#0a0b24; --bg-alt:#0d0f2e; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07);
  --ink:#eceefb; --ink-2:#c4c7e6; --mute:#8d90b8; --line:rgba(255,255,255,.09);
  --brand-ink:#ffa862; --logo-text:#ffffff;
  --shadow:0 20px 50px -30px rgba(0,0,0,.8);
  --glow-a:rgba(248,118,20,.22); --glow-b:rgba(96,84,255,.16);
  --header:rgba(10,11,36,.72); --chip:#ffffff; --tile:linear-gradient(160deg,#ff9a4d,#d85e04);
  --hero-em:#ff9a4d; --btn-2:rgba(255,255,255,.05);
  color-scheme:dark;
}}
:root[data-shell="public"][data-theme="dark"]{
  --bg:#0a0b24; --bg-alt:#0d0f2e; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07);
  --ink:#eceefb; --ink-2:#c4c7e6; --mute:#8d90b8; --line:rgba(255,255,255,.09);
  --brand-ink:#ffa862; --logo-text:#ffffff;
  --shadow:0 20px 50px -30px rgba(0,0,0,.8);
  --glow-a:rgba(248,118,20,.22); --glow-b:rgba(96,84,255,.16);
  --header:rgba(10,11,36,.72); --chip:#ffffff; --tile:linear-gradient(160deg,#ff9a4d,#d85e04);
  --hero-em:#ff9a4d; --btn-2:rgba(255,255,255,.05);
  color-scheme:dark;
}


:root{
  --side-hover:rgba(255,255,255,.05);
  --on-navy-soft:rgba(255,255,255,.08);
  --promo-glow-soft:rgba(248,118,20,.22);
  --promo-glow-faint:rgba(248,118,20,.05);
  --promo-border:rgba(248,118,20,.25);
  --brand-light:#ffb57a;
  --button-shadow-app:rgba(248,118,20,.75);
  --button-shadow-public:rgba(248,118,20,.7);
  --announcement-end:#1c1e58;
  --announcement-dark-start:#16184a;
  --announcement-dark-end:#241f4f;
  --on-navy-faint:rgba(255,255,255,.06);
  --on-navy-muted:rgba(255,255,255,.72);
  --on-navy-dim:rgba(255,255,255,.6);
  --brand-border-hover:rgba(248,118,20,.5);
  --course-overlay:rgba(16,17,54,.86);
  --match-shadow:rgba(248,118,20,.8);
  --promo-glow:rgba(248,118,20,.45);
  --on-navy-line:rgba(255,255,255,.18);
  --brand-hover:#ff8a2e;
  --modal-shadow-color:rgba(0,0,0,.55);
  --modal-backdrop-color:rgba(10,11,36,.55);
  --on-navy-text:rgba(255,255,255,.75);
  --on-navy-control:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-padding-top:120px}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;right:-200px;top:-260px;width:900px;height:700px;background:radial-gradient(closest-side,var(--glow-a),transparent);pointer-events:none;z-index:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{flex:none}
.serif{font-family:Fraunces,Georgia,serif}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.ico{width:18px;height:18px}

/* ---------- shell ---------- */
.app{position:relative;display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.logo{display:block;color:var(--logo-text)}
.logo svg{height:28px;width:auto;display:block}

/* sidebar */
.side{position:sticky;top:0;height:100vh;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:22px 14px 16px;border-right:1px solid var(--side-line);overflow-y:auto}
.side .logo{color:var(--side-strong);padding:0 10px 22px}
.side h6{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--side-mute);padding:18px 12px 8px}
.side nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--side-ink);transition:background .15s,color .15s}
.side nav a:hover{background:var(--side-hover);color:var(--side-strong)}
.side nav a.on{background:var(--side-active);color:var(--side-strong)}
.side nav a.on .ico{color:var(--brand)}
.side nav a .cnt{margin-left:auto;font-size:11px;font-weight:600;background:var(--side-chip);padding:2px 7px;border-radius:999px;color:var(--side-ink)}
.side .bruce-mini{margin:18px 4px 0;padding:14px;border-radius:14px;background:linear-gradient(150deg,var(--promo-glow-soft),var(--promo-glow-faint));border:1px solid var(--promo-border)}
.side .bruce-mini b{color:var(--side-strong);font-size:13px;display:block}
.side .bruce-mini p{font-size:12px;color:var(--side-ink);margin:4px 0 10px;line-height:1.45}
.side .bruce-mini a{display:inline-flex;font-size:12px;font-weight:600;background:var(--brand);color:var(--white);padding:7px 12px;border-radius:9px}
.side .side-info .t{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-light);margin-bottom:6px}
.side .side-info b{font-family:Fraunces,serif;font-size:16px;font-weight:500;line-height:1.25}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 8px 0;border-top:1px solid var(--side-line)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--brand-light),var(--brand));color:var(--white);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.side .me b{display:block;font-size:13px;color:var(--side-strong);font-weight:600}
.side .me small{font-size:12px;color:var(--side-mute)}
.side .me .icon-btn{margin-left:auto;border-color:var(--side-line);color:var(--side-ink)}

/* mobile app bar (the sidebar becomes a drawer below 900px) */
.topbar{display:none;position:sticky;top:0;z-index:30;background:var(--header);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.topbar .in{display:flex;align-items:center;gap:12px;padding:0 16px;height:58px}
.topbar .acts{display:flex;align-items:center;gap:10px;margin-left:auto}
.icon-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{color:var(--ink)}
.icon-btn svg{width:17px;height:17px}
.sun{display:none}
:root[data-theme="dark"] .sun{display:block}:root[data-theme="dark"] .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sun{display:block}:root:not([data-theme="light"]) .moon{display:none}}
.menu-btn{display:none}

/* ---------- page ---------- */
.page{max-width:1080px;margin:0 auto;padding:28px 36px 96px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mute);margin-bottom:18px}
.crumbs a:hover{color:var(--ink)}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--mute)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.pill.ok{color:var(--good);background:var(--good-bg);border-color:transparent}
.ph h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.022em;margin-top:12px;max-width:680px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;border-radius:11px;padding:10px 16px;white-space:nowrap;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--brand);color:var(--white);box-shadow:0 10px 26px -12px var(--button-shadow-app)}
.btn-s{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn-n{background:var(--navy);color:var(--white)}
:root[data-theme="dark"] .btn-n{background:var(--white);color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-n{background:var(--white);color:var(--navy)}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:40;background:var(--header);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{color:var(--logo-text);display:block;flex:none}
.logo svg{height:30px;width:auto;display:block}
.public-nav{display:flex;gap:24px;font-size:14px;font-weight:500;color:var(--ink-2);flex:1}
.public-nav a:hover{color:var(--ink)}
.hd-act{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang{font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--ink-2)}
.icon-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{color:var(--ink);border-color:var(--mute)}
.icon-btn svg{width:18px;height:18px}
.sun{display:none}
:root[data-theme="dark"] .sun{display:block}:root[data-theme="dark"] .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sun{display:block}:root:not([data-theme="light"]) .moon{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;border-radius:12px;padding:12px 20px;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--brand);color:var(--white);box-shadow:0 10px 28px -10px var(--button-shadow-public)}
.btn-s{border:1px solid var(--line);background:var(--btn-2);color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:13px;border-radius:10px}
.menu-btn{display:none}
.mnav{display:none}


/* footer */
.ft{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--bg-alt)}
.ft .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.ft .about{font-size:14px;color:var(--ink-2);max-width:420px;margin-top:16px}
.ft h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:14px}
.ft ul{list-style:none;display:grid;gap:10px;font-size:14px}
.ft ul a:hover{color:var(--brand-ink)}
.soc{display:flex;gap:8px;flex-wrap:wrap}
.soc a{font-size:13px;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.soc a:hover{border-color:var(--brand);color:var(--brand-ink)}
.copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--mute);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}


/* announcement bar = the live "navigation" ad */
.adbar{background:linear-gradient(90deg,var(--navy),var(--announcement-end));color:var(--white);font-size:13.5px;position:relative;z-index:41}
:root[data-theme="dark"] .adbar{background:linear-gradient(90deg,var(--announcement-dark-start),var(--announcement-dark-end));border-bottom:1px solid var(--on-navy-faint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .adbar{background:linear-gradient(90deg,var(--announcement-dark-start),var(--announcement-dark-end));border-bottom:1px solid var(--on-navy-faint)}}
.adbar .wrap{display:flex;align-items:center;gap:12px;min-height:44px;padding-top:6px;padding-bottom:6px}
.adbar .t{font-size:10.5px;font-weight:700;letter-spacing:.1em;background:var(--brand);border-radius:999px;padding:3px 9px;flex:none}
.adbar p{flex:1;min-width:0}
.adbar p span{color:var(--on-navy-muted)}
.adbar a{font-weight:600;color:var(--brand-light);white-space:nowrap}
.adbar a:hover{color:var(--white)}
.adbar .x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--on-navy-dim);flex:none}
.adbar .x:hover{color:var(--white);background:var(--on-navy-soft)}
.adbar.gone{display:none}
@media (max-width:760px){.adbar p span{display:none}}
@media (max-width:600px){.adbar .t{display:none}}

/* ---------- KTDC promo: course cards, ads, register modal (shared by the prototypes) ---------- */
.c-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.c-nav{display:flex;gap:8px;flex:none}
.c-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface);color:var(--ink)}
.c-arrow:hover{border-color:var(--brand);color:var(--brand-ink)}
.c-arrow svg{width:18px;height:18px}
.c-rail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:none}
.c-rail::-webkit-scrollbar{display:none}
.c-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,border-color .2s;cursor:pointer;text-align:left;color:inherit}
.c-card:hover{transform:translateY(-3px);border-color:var(--brand-border-hover)}
.c-card.match{border-color:var(--brand)}
.c-img{position:relative;aspect-ratio:16/10;background:var(--bg-alt);overflow:hidden}
.c-img img{width:100%;height:100%;object-fit:cover;display:block}
.c-io{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;background:var(--course-overlay);color:var(--white);border-radius:12px;padding:7px 12px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.c-io b{display:block;font-family:Fraunces,serif;font-size:16px;letter-spacing:0;text-transform:none;font-weight:600}
.c-io .out b{color:var(--brand-light)}
.c-io svg{width:14px;height:14px;opacity:.6}
.c-match{position:absolute;left:12px;top:12px;background:var(--brand);color:var(--white);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;box-shadow:0 6px 16px -6px var(--match-shadow)}
.c-bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.c-bd h3{font-family:Fraunces,serif;font-size:19px;font-weight:500;line-height:1.2}
.c-bd>p{font-size:13px;color:var(--mute);line-height:1.45}
.c-meta{list-style:none;display:grid;gap:6px;font-size:13px;color:var(--ink-2);padding:10px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin:0}
.c-meta li{display:flex;justify-content:space-between;gap:10px}
.c-meta b{color:var(--ink);font-weight:600;white-space:nowrap}
.c-meta .fee b{color:var(--brand-ink)}
.c-ok{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--good);font-weight:600}
.c-ok svg{width:15px;height:15px}
.c-cta{margin-top:auto;display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--brand-ink)}
.c-card:hover .c-cta{gap:10px}
.c-cta svg,.reg .go svg{width:16px;height:16px;flex:none}
.c-support{scroll-snap-align:start;border-radius:20px;padding:24px 22px;background:var(--navy);color:var(--white);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.c-support::before{content:"";position:absolute;right:-120px;top:-120px;width:300px;height:300px;background:radial-gradient(closest-side,var(--promo-glow),transparent)}
.c-support>*{position:relative}
.c-support h3{font-family:Fraunces,serif;font-size:24px;font-weight:500;line-height:1.15}
.c-support>p{font-size:13.5px;color:var(--on-navy-muted);margin-bottom:6px}
.c-support .b{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 12px;font-weight:600;font-size:13.5px;border:1px solid var(--on-navy-line);color:var(--white);text-align:center}
.c-support .b:hover{background:var(--on-navy-faint)}
.c-support .b.p{background:var(--brand);border-color:var(--brand)}
.c-support .b.p:hover{background:var(--brand-hover)}
.c-support .b{margin-top:0}
.c-support .b:first-of-type{margin-top:auto}

/* register-interest modal (what every ad CTA opens) */
.modal-content.reg{border:0;padding:0;border-radius:24px;max-width:440px;width:calc(100% - 32px);background:var(--bg);color:var(--ink);box-shadow:0 40px 90px -20px var(--modal-shadow-color);margin:auto;overflow:hidden}
.modal-backdrop{background:var(--modal-backdrop-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.reg .top{background:var(--navy);color:var(--white);padding:28px 26px 24px;position:relative;overflow:hidden}
.reg .top::before{content:"";position:absolute;right:-90px;top:-110px;width:280px;height:280px;background:radial-gradient(closest-side,var(--brand-border-hover),transparent)}
.reg .top>*{position:relative}
.reg .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--brand-light)}
.reg h3{font-family:Fraunces,serif;font-size:23px;font-weight:500;line-height:1.2;margin-top:8px}
.reg .top p{font-size:14px;color:var(--on-navy-text);margin-top:8px}
.reg .x{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--on-navy-control);color:var(--white);display:grid;place-items:center}
.reg .x svg{width:16px;height:16px}
.reg .opts{padding:18px;display:grid;gap:10px}
.reg .opt{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.reg .opt:hover{border-color:var(--brand)}
.reg .opt .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--white);flex:none;font-weight:700;font-size:13px}
.reg .opt b{display:block;font-size:14.5px;font-weight:600}
.reg .opt small{color:var(--mute);font-size:12.5px}
.reg .opt .go{margin-left:auto;color:var(--mute)}
.reg .foot{padding:0 18px 18px}
.reg .foot button{width:100%;padding:11px;border-radius:12px;border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--ink-2)}
@media (max-width:600px){
  .c-top{flex-direction:column;align-items:flex-start}
  .c-nav{display:none}
  .c-rail{grid-auto-columns:82%;margin:0 -16px;padding:4px 16px 18px;scroll-padding:0 16px}
}


/* Shared Bootstrap components and layout contracts. Page-specific styles live with their page group. */
:root{--ui-scrim:rgba(0,0,0,.4);--white:#fff;--transparent:transparent;--brand-hover:#ff8a2e;--focus-ring:rgba(248,118,20,.25);--modal-bg-light:#fbf7f0;--modal-bg-dark:#0d0f2e;--modal-bg:var(--modal-bg-light);--navy-button-bg:var(--navy);--navy-button-ink:var(--white)}
:root[data-theme="dark"]{--modal-bg:var(--modal-bg-dark);--navy-button-bg:var(--white);--navy-button-ink:var(--navy)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--modal-bg:var(--modal-bg-dark);--navy-button-bg:var(--white);--navy-button-ink:var(--navy)}}
body{font-size:15px}
h1,h2,h3,h4,h5{font-family:Fraunces,Georgia,serif;font-weight:500;color:var(--ink);font-optical-sizing:auto}
p,h1,h2,h3,h4,h5,h6{margin-top:0}p{margin-bottom:0}ul{margin-bottom:0}
img,video{max-width:100%;height:auto}button{line-height:inherit}button:disabled{cursor:default;opacity:.55}
[hidden]{display:none!important}.gtm-frame{display:none;visibility:hidden}.app-main,main{min-width:0}.app-main{display:flex;flex-direction:column}.app-main>main{flex:1}
.ktdc-public{min-height:100vh;display:flex;flex-direction:column}.ktdc-public>main{flex:1;position:relative;z-index:1}.ktdc-public::before{display:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}.page{width:100%;container-type:inline-size}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-150%);z-index:1100;padding:10px 16px;border-radius:10px;background:var(--navy);color:var(--white)}.skip-link:focus{transform:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}.eyebrow::before{content:"";width:18px;height:2px;background:var(--brand);border-radius:2px}
.section-heading h2,.sec-hd h2{font-family:Fraunces,Georgia,serif;font-size:clamp(28px,3.6vw,40px);font-weight:500;line-height:1.1;letter-spacing:-.025em;margin:10px 0 0}.section-heading p,.sec-hd p{color:var(--ink-2);margin-top:12px;max-width:620px}.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}.sec{padding-top:44px}.ktdc-public .sec{padding:96px 0}.sec-alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.side{z-index:40}.side-brand{display:flex;align-items:flex-start}.side-brand .logo{flex:1}.side-brand .drawer-close{display:none}.side .logo svg{height:28px}.logo svg{fill:currentColor}.logo-mark{fill:var(--brand)}
.side nav h6{margin:0}.side nav p{margin-bottom:0}.side .nav-icon{width:18px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--brand)}.side .nav-icon svg,.side .nav-icon img{width:18px;height:18px;object-fit:cover}.side .nav-icon [fill]:not([fill="none"]){fill:currentColor}.side nav a{line-height:1.45}.side nav a>span:not(.nav-icon):not(.cnt){min-width:0}.side nav .nav-sub{font-size:12px;padding:7px 12px 7px 24px}.side .nav-empty{font-size:12px;color:var(--side-mute);padding:4px 12px 8px 24px}.side .nav-history{font-size:12px;padding:7px 24px;color:var(--side-ink);text-align:left}.side .bruce-mini{margin-bottom:20px}.side .bruce-mini b,.side .me b{color:var(--side-strong)}
.side-settings{padding:16px 8px;margin-top:auto;display:grid;gap:12px}.side-settings .lang{width:100%;display:block;background-color:var(--side);border-color:var(--side-line);color:var(--side-ink);border-radius:10px;font-size:12px}.sign-out{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--side-ink)}.side .me{margin-top:0}.user-details{min-width:0;flex:1}.user-details b,.user-details small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side .icon-btn{flex:none;border-color:var(--side-line);color:var(--side-ink)}
.public-nav{flex-wrap:nowrap}.hd{position:sticky;z-index:40}.hd .lang{width:auto;max-width:110px;background-color:var(--transparent);font-size:12px}.hd span.lang{white-space:nowrap}.header-menu{padding-block:8px}.ktdc-app .header-menu:empty{display:none}.ktdc-app .header-menu{padding-inline:16px}
.ft{position:relative;z-index:1}.ft ul{padding-left:0}.ft .logo svg{height:34px}
.btn{justify-content:center;--bs-btn-color:var(--ink);--bs-btn-hover-color:var(--ink);--bs-btn-active-color:var(--ink);--bs-btn-disabled-color:var(--mute);--bs-btn-border-color:var(--transparent)}
.btn-primary,.btn-p{--bs-btn-bg:var(--brand);--bs-btn-hover-bg:var(--brand-hover);--bs-btn-active-bg:var(--brand-hover);--bs-btn-disabled-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-border-color:var(--brand-hover);--bs-btn-active-border-color:var(--brand-hover);--bs-btn-color:var(--white);--bs-btn-hover-color:var(--white);--bs-btn-active-color:var(--white);background:var(--brand);color:var(--white);box-shadow:var(--shadow)}.btn-primary:hover,.btn-p:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--white)}
.btn-secondary,.btn-light,.btn-s,.btn-outline-primary,.btn-outline-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.btn-secondary:hover,.btn-light:hover,.btn-s:hover,.btn-outline-primary:hover,.btn-outline-secondary:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}.btn-n{background:var(--navy-button-bg);color:var(--navy-button-ink)}.btn-n:hover{color:var(--navy-button-ink)}.btn-link{color:var(--brand-ink)}.btn-danger{background:var(--bad);border-color:var(--bad);color:var(--white)}.btn-success{background:var(--good);border-color:var(--good);color:var(--white)}.btn-warning{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}.btn svg{width:18px;height:18px}.btn-icon{padding:0;width:36px;height:36px}.btn-sm{padding:9px 16px;font-size:13px;border-radius:10px}
.card{--bs-card-bg:var(--surface);--bs-card-color:var(--ink);--bs-card-border-color:var(--line);--bs-card-cap-bg:var(--transparent);--bs-card-cap-color:var(--ink)}.card-header,.card-footer{background:var(--transparent);border-color:var(--line);padding:18px 22px}.card-body{padding:22px}.card-title{margin-bottom:0}.card-flush>.card-header{border:0}.pill.warn{color:var(--warn);background:var(--warn-bg)}.pill.bad{color:var(--bad);background:var(--bad-bg)}.badge{border-radius:999px;padding:5px 9px}.badge-primary{background:var(--brand-soft);color:var(--brand-ink)}.badge-success{background:var(--good-bg);color:var(--good)}.badge-danger{background:var(--bad-bg);color:var(--bad)}
.form-control,.form-select{background-color:var(--surface);color:var(--ink);border-color:var(--line);border-radius:11px;padding:10px 14px;font-size:14px}.form-select{padding-right:36px}.form-control::placeholder{color:var(--mute)}.form-control:focus,.form-select:focus{background-color:var(--surface);color:var(--ink);border-color:var(--brand);box-shadow:0 0 0 .2rem var(--focus-ring)}.form-control:disabled,.form-select:disabled{background-color:var(--bg-alt);color:var(--mute)}.form-label{font-size:14px;font-weight:600;color:var(--ink-2)}.form-text{color:var(--mute)}.form-check-input{background-color:var(--surface);border-color:var(--line)}.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}.form-check-input:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem var(--focus-ring)}.input-group-text{background:var(--bg-alt);border-color:var(--line);color:var(--ink-2)}.invalid-feedback{color:var(--bad)}.valid-feedback{color:var(--good)}
.table{--bs-table-bg:var(--transparent);--bs-table-color:var(--ink-2);--bs-table-border-color:var(--line);--bs-table-striped-bg:var(--surface);--bs-table-striped-color:var(--ink-2);--bs-table-hover-bg:var(--brand-soft);--bs-table-hover-color:var(--ink);--bs-table-active-bg:var(--brand-soft);--bs-table-active-color:var(--ink)}.table>:not(caption)>*>*{padding:14px 16px}.table thead{font-size:12px;font-weight:600;color:var(--mute)}.table th{color:var(--ink)}.table-responsive{border-radius:16px}.page-link{background:var(--surface);border-color:var(--line);color:var(--ink-2)}.page-link:hover,.page-item.active .page-link{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}.page-item.disabled .page-link{background:var(--bg-alt);border-color:var(--line);color:var(--mute)}
.alert{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-2);padding:16px 18px}.alert-success{background:var(--good-bg);color:var(--good)}.alert-danger{background:var(--bad-bg);color:var(--bad)}.alert-warning{background:var(--warn-bg);color:var(--warn)}.alert-primary,.alert-info{background:var(--brand-soft);color:var(--brand-ink)}
.modal{--bs-modal-bg:var(--modal-bg);--bs-modal-color:var(--ink);--bs-modal-border-color:var(--line);--bs-modal-header-border-color:var(--line);--bs-modal-footer-border-color:var(--line);--bs-modal-border-radius:24px}.modal-content{box-shadow:var(--shadow)}.modal-header,.modal-body,.modal-footer{padding:22px}.modal-title{color:var(--ink)}.modal-backdrop{--bs-backdrop-bg:var(--navy);--bs-backdrop-opacity:.55}.modal-content.reg{width:100%;max-width:none;background:var(--modal-bg);margin:0}.reg .top h3{color:var(--white);padding-right:20px}.reg .x .ico{width:16px;height:16px}.reg .ic{object-fit:contain}.reg .foot button:hover{border-color:var(--brand);color:var(--brand-ink)}#modal_register .modal-dialog{max-width:440px}
.dropdown-menu{--bs-dropdown-bg:var(--modal-bg);--bs-dropdown-color:var(--ink);--bs-dropdown-border-color:var(--line);--bs-dropdown-link-color:var(--ink-2);--bs-dropdown-link-hover-bg:var(--brand-soft);--bs-dropdown-link-hover-color:var(--ink);--bs-dropdown-link-active-bg:var(--brand);--bs-dropdown-link-active-color:var(--white);border-radius:14px}.list-group{--bs-list-group-bg:var(--surface);--bs-list-group-color:var(--ink-2);--bs-list-group-border-color:var(--line);--bs-list-group-action-hover-bg:var(--brand-soft);--bs-list-group-active-bg:var(--brand);--bs-list-group-active-border-color:var(--brand)}.nav-tabs{--bs-nav-tabs-border-color:var(--line);--bs-nav-tabs-link-active-bg:var(--surface);--bs-nav-tabs-link-active-color:var(--brand-ink);--bs-nav-tabs-link-active-border-color:var(--line)}.nav-link{color:var(--ink-2)}.accordion{--bs-accordion-color:var(--ink);--bs-accordion-bg:var(--surface);--bs-accordion-border-color:var(--line);--bs-accordion-btn-color:var(--ink);--bs-accordion-active-color:var(--brand-ink);--bs-accordion-active-bg:var(--brand-soft)}
.text-muted,.text-gray-500,.text-gray-600{color:var(--mute)!important}.text-dark,.text-gray-800,.text-gray-900{color:var(--ink)!important}.text-primary,.text-ktdc{color:var(--brand-ink)!important}.text-success{color:var(--good)!important}.text-danger{color:var(--bad)!important}.text-warning{color:var(--warn)!important}.bg-light,.bg-body,.bg-white{background-color:var(--surface)!important}.bg-secondary{background-color:var(--bg-alt)!important}.border,.border-top,.border-bottom{border-color:var(--line)!important}.bg-ktdc{background:var(--brand);color:var(--white)}.bg-ktdc-dark{background:var(--navy);color:var(--white)}
.course-section{scroll-margin-top:90px;margin:44px 0 0}.c-card{cursor:default}.c-card p,.c-card h3{margin:0}.c-cta{padding:0;background:none;border:0;text-align:left;align-self:flex-start;white-space:normal}.c-support h3{color:var(--white)}.c-support .b{white-space:normal}.test-ad{display:block;max-width:640px;margin:24px auto;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}.test-ad img{display:block;width:100%;height:auto}
@media(min-width:900px){.ktdc-app .topbar:has(.header-menu){display:block}.ktdc-app .topbar .in{display:none}}
@media(max-width:899.98px){.app{grid-template-columns:minmax(0,1fr)}.side{position:fixed;left:0;top:0;bottom:0;width:272px;max-width:calc(100vw - 32px);height:100dvh;z-index:1040;transform:translateX(-100%);transition:transform .25s;visibility:hidden}.drawer-open .side{transform:none;visibility:visible;box-shadow:var(--shadow)}.drawer-open{overflow:hidden}.scrim{display:none;position:fixed;inset:0;background:var(--ui-scrim);z-index:1035}.drawer-open .scrim{display:block}.side-brand .drawer-close{display:grid}.side-brand .logo{padding-right:0}.topbar{display:block}.menu-btn{display:grid}.page{padding:20px 16px 110px}.ph,.sec-hd{flex-direction:column;align-items:flex-start}.public-nav,.hd-act>.lang{display:none}.mnav:not([hidden]){display:grid;gap:4px;padding:8px 16px 16px;border-top:1px solid var(--line)}.mnav a{padding:12px 4px;font-weight:500;border-bottom:1px solid var(--line)}.mnav .lang{display:block;max-width:100%;margin:8px 0}.ft .wrap{grid-template-columns:1fr 1fr}.ft .wrap>div:first-child{grid-column:1/-1}}
@media(min-width:900px){.scrim,.mnav{display:none!important}}
@media(max-width:600px){.wrap{padding:0 16px}.hd .wrap{gap:12px}.logo svg{height:26px}.hd-act .btn{display:none}.ktdc-public .sec{padding:64px 0}.sec-hd{margin-bottom:28px}.ft .wrap{gap:28px}.adbar .wrap{gap:8px}.adbar a{font-size:12px}.adbar p{font-size:12px}.c-meta{font-size:12px}.c-meta b{white-space:normal;text-align:right}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.ktdc-app .btn{border-radius:11px;padding:10px 16px}.ktdc-app .icon-btn{width:36px;height:36px}.ktdc-app .icon-btn svg{width:17px;height:17px}.ktdc-app .btn-sm{padding:9px 16px}.ktdc-public .btn-p{box-shadow:0 10px 28px -10px var(--button-shadow-public)}.ktdc-app .btn-p{box-shadow:0 10px 26px -12px var(--button-shadow-app)}

.side .icon-btn:hover{color:var(--side-strong)}.modal-backdrop{background:var(--navy)}

/* Keep promotions and account controls visible while long real navigation scrolls. */
.side{overflow:hidden}.side-brand,.side .side-info,.side-settings,.side .me{flex-shrink:0}.side>nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.side-settings{margin-top:0}
/* Admin and Test Manager links fold away in the sidebar */
.side .nav-group>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--side-mute);padding:18px 12px 8px;border-radius:8px}
.side .nav-group>summary::-webkit-details-marker{display:none}
.side .nav-group>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.side .nav-group[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.side .nav-group>summary:hover{color:var(--side-ink)}
.side .nav-group>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* ---------- sidebar follows the theme: light sidebar in light mode, night sidebar in dark mode ---------- */
:root{--side:#ffffff;--side-ink:#3d3f66;--side-mute:#7a7d9c;--side-line:#e7e9f1;--side-active:rgba(248,118,20,.12);--side-hover:rgba(16,17,54,.05);--side-strong:#101136;--side-chip:rgba(16,17,54,.07)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--side:#070818;--side-ink:#c9cbe8;--side-mute:#7d80a8;--side-line:rgba(255,255,255,.07);--side-active:rgba(248,118,20,.16);--side-hover:rgba(255,255,255,.05);--side-strong:#ffffff;--side-chip:rgba(255,255,255,.08)}}
:root[data-theme="dark"]{--side:#070818;--side-ink:#c9cbe8;--side-mute:#7d80a8;--side-line:rgba(255,255,255,.07);--side-active:rgba(248,118,20,.16);--side-hover:rgba(255,255,255,.05);--side-strong:#ffffff;--side-chip:rgba(255,255,255,.08)}
/* Zalo support card in the sidebar (white card, like the live site) */
.side nav a.side-zalo{gap:12px;margin:2px 4px 6px;padding:10px 12px;border-radius:12px;background:#fff;color:#101136;font-size:13px;font-weight:600;line-height:1.35;border:1px solid var(--side-line);box-shadow:0 1px 2px rgba(16,17,54,.06)}
.side nav a.side-zalo:hover{background:#fff;color:#101136;border-color:var(--brand)}
.side nav a.side-zalo img{width:32px;height:32px;flex:none;border-radius:8px;object-fit:contain}
/* Account menu: your name (and the settings wheel) opens theme, language, profile and sign out */
.side .me{position:relative}
.side .me-menu{flex:1;min-width:0;position:relative}
.side .me-menu>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:4px 6px;margin:-4px -6px;border-radius:10px;min-width:0}
.side .me-menu>summary::-webkit-details-marker{display:none}
.side .me-menu>summary:hover{background:var(--side-hover)}
.side .me-menu>summary:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.side .me-av{object-fit:cover;background:var(--side-hover);padding:0}
.side .me-who{flex:1;min-width:0;display:grid;line-height:1.25}
.side .me-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--side-strong)}
.side .me-league{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--side-mute)}
.side .me-gear{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--side-mute);transition:transform .3s,color .15s}
.side .me-gear .ico{width:18px;height:18px}
.side .me-menu>summary:hover .me-gear,.side .me-menu[open] .me-gear{color:var(--side-strong)}
.side .me-menu[open] .me-gear{transform:rotate(60deg)}
.side .me-pop{position:absolute;left:-6px;right:-6px;bottom:calc(100% + 10px);z-index:5;display:grid;gap:6px;padding:10px;border-radius:14px;background:var(--side);border:1px solid var(--side-line);box-shadow:0 12px 30px rgba(16,17,54,.18)}
.side .me-pop .lang{width:100%;display:block;max-width:none;background-color:var(--side);border-color:var(--side-line);color:var(--side-ink);border-radius:10px;font-size:13px;margin:2px 0}
.side .me-pop .me-item{display:flex;gap:10px;align-items:center;width:100%;font-size:13px;color:var(--side-ink);padding:8px 6px;border-radius:8px;border:0;background:none;text-align:left;cursor:pointer;text-decoration:none}
.side .me-pop .me-item .ico{width:16px;height:16px;flex:none}
.side .me-pop .me-item:hover{color:var(--side-strong);background:var(--side-hover)}
.side .me-pop .me-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.side .me-theme>span:not(.me-switch){flex:1}
.side .me-switch{flex:none;position:relative;width:32px;height:18px;border-radius:999px;background:var(--side-line);transition:background .2s}
.side .me-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.side .me-theme[aria-pressed="true"] .me-switch{background:var(--brand)}
.side .me-theme[aria-pressed="true"] .me-switch::after{transform:translateX(14px)}
.side .me>.lang{flex:1;width:auto;max-width:none;background-color:var(--side);border-color:var(--side-line);color:var(--side-ink);border-radius:10px;font-size:12px}

/* ---------- 3D buttons (the course path's look, used across the new design) ----------
   A solid ledge under each button in a darker shade of its colour. It lifts a little on hover and the button
   presses down onto it when clicked. Left flat: the IELTS exam screens (they keep the test's own look), icon
   buttons, links styled as buttons, buttons joined to an input, toggle groups and disabled buttons.
   A component can set its own --ledge colour. */
:root .ktdc-ui:not(.ls-exam):not(.ktdc-reading-exam) :is(.btn,.an-btn,.ad-cta):not(.btn-link,.btn-close,.btn-icon,.icon-btn,.btn-send-message,.btn-check+.btn,.btn-group>.btn,.input-group>.btn){
  box-shadow:0 var(--ledge-h,4px) 0 var(--ledge,var(--line))!important;margin-bottom:var(--ledge-h,4px);
  transition:transform .12s,box-shadow .12s,background .2s,color .2s,border-color .2s}
:root .ktdc-ui:not(.ls-exam):not(.ktdc-reading-exam) :is(.btn,.an-btn,.ad-cta):not(.btn-link,.btn-close,.btn-icon,.icon-btn,.btn-send-message,.btn-check+.btn,.btn-group>.btn,.input-group>.btn):is(:hover,:focus-visible):not(:disabled,.disabled){
  transform:translateY(-1px);box-shadow:0 calc(var(--ledge-h,4px) + 1px) 0 var(--ledge,var(--line))!important}
:root .ktdc-ui:not(.ls-exam):not(.ktdc-reading-exam) :is(.btn,.an-btn,.ad-cta):not(.btn-link,.btn-close,.btn-icon,.icon-btn,.btn-send-message,.btn-check+.btn,.btn-group>.btn,.input-group>.btn):active:not(:disabled,.disabled){
  transform:translateY(calc(var(--ledge-h,4px) - 1px));box-shadow:0 1px 0 var(--ledge,var(--line))!important}
:root .ktdc-ui :is(.btn,.an-btn):is(:disabled,.disabled){box-shadow:none!important;transform:none!important}
.ktdc-ui .btn-sm{--ledge-h:3px}
/* Ledge colours: a darker shade of each fill; outlined buttons sit on their border colour. */
.ktdc-ui :is(.btn-p,.btn-primary,.btn-ktdc,.an-btn-p,.ad-cta){--ledge:#c45a07}
.ktdc-ui :is(.btn-success,.btn-google){--ledge:#0f6e3c}
.ktdc-ui .btn-google{--ledge:var(--line)}
.ktdc-ui .btn-danger{--ledge:#9f1f16}
.ktdc-ui .btn-warning{--ledge:#a16207}
.ktdc-ui :is(.btn-n,.btn-dark){--ledge:#03031a}
:root[data-theme="dark"] .ktdc-ui .btn-n{--ledge:#9a9cc4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ktdc-ui .btn-n{--ledge:#9a9cc4}}
[data-brand="ktdc"] .ktdc-ui .btn-s{--ledge:var(--ink)}
:root[data-theme="dark"] .ktdc-ui :is(.btn-s,.btn-light,.btn-secondary,.an-btn:not(.an-btn-p)){--ledge:#05061f}
@media (prefers-reduced-motion:reduce){.ktdc-ui :is(.btn,.an-btn,.ad-cta){transition:none!important}}
/* Sidebar tidy-up: staff group sections + KTDC link row */
.side .nav-staff{margin-top:6px;border-top:1px solid var(--side-line)}
.side .nav-staff>summary{padding-top:16px}
.side .nav-staff .nav-label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--side-mute);opacity:.8;padding:12px 12px 4px}
.side .nav-staff a{padding:6px 12px;font-size:13px}
.side .nav-staff a.nav-sub{padding:5px 12px 5px 26px;font-size:12px}
.side nav.side-links{flex:none;min-height:auto;overflow:visible;align-content:flex-start;display:flex;flex-wrap:wrap;gap:2px 12px;padding:10px 10px 12px;font-size:11.5px;line-height:1.5}
.side nav.side-links a{display:inline;padding:0;border-radius:0;font-size:11.5px;font-weight:500;color:var(--side-mute)}
.side nav.side-links a:hover{background:none;color:var(--side-strong);text-decoration:underline}
.side .side-info+.side-links{margin-top:-8px}
/* League link: shield of the student's tier + this week's XP (shield colours also in ktdc-ui-league.css). */
.side nav a.nav-league .nav-icon svg{width:16px;height:19px;object-fit:contain}
.side .lg-tier{--tier:#b06f3a;--tier-2:#d0935c;--tier-ink:#fff}
.side .lg-tier--silver{--tier:#8793a1;--tier-2:#b4bec9}
.side .lg-tier--gold{--tier:#d99a06;--tier-2:#f4c443}
.side .lg-tier--platinum{--tier:#2f9e96;--tier-2:#6fd0c6}
.side .lg-tier--diamond{--tier:#2f7fe0;--tier-2:#79b4ff}
.side .lg-tier-body{fill:var(--tier)}
.side .lg-tier-shine{fill:var(--tier-2);opacity:.55}
.side .lg-tier-star{fill:var(--tier-ink)}
.side nav a .nav-xp{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.side nav a.on .nav-xp{background:var(--brand);color:#fff}
/* Menu, promotion and footer links share one scrolling area (ui/sidebar.blade.php). The promotion is pushed to the
   bottom when there is room, and scrolls in below the menu when there is not (phones). */
.side .side-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -14px;padding:0 14px}
.side .side-scroll>nav:first-child{flex:none}
.side .side-scroll>.side-info{margin-top:auto;flex-shrink:0}
.side .side-scroll>nav:first-child+.side-links{margin-top:auto}