/* ============================================================
   cr-style.css  |  CareerRide -- single stylesheet for all cr-*.aspx
   pages (public and admin). Merged from the former style-tutorial-new.css
   (base variables/reset + public "art-"/legacy layout classes, now
   the first section below) and cr-style.css (admin components,
   second section below). style-tutorial-new.css itself is left on
   disk unchanged -- old non-cr-* pages (tutorial-page-final.aspx,
   the static .htm pages, etc.) still link it directly and were not
   part of this consolidation.
   Design: Bold editorial portal — navy + white + amber
   Fonts: Outfit (display) + Source Sans 3 (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600&display=swap');

/* === VARIABLES === */
:root {
  --black:	 #000000;
  --navy:        #0f2744;
  --navy-mid:    #1a3a5c;
  --navy-light:  #2a5080;
  --accent:      #e8a020;
  --accent-dark: #c88010;
  --white:       #ffffff;
  --off-white:   #f2f5f9;
  --border:      #d8dfe8;
  --text-main:   #151e2d;
  --text-body:   #364558;
  --text-muted:  #627891;
  --green:       #1a7a3c;
  --orange:      #b5521a;
  --purple:      #5a35a0;
  --teal:        #1a7a8a;
  --red:         #b51a1a;
  --font-display:'Outfit', sans-serif;
  --font-body:   'Source Sans 3', sans-serif;
  --radius-sm:   5px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 4px rgba(15,39,68,0.10);
  --shadow-md:   0 4px 16px rgba(15,39,68,0.15);
  --shadow-lg:   0 8px 32px rgba(15,39,68,0.18);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-main);
  background: var(--off-white);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; object-fit: cover; }
button { cursor: pointer; }

/* ========================================
   HEADER
   ======================================== */
.site-header {
  background: var(--navy);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.header-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 0;
  display: flex; align-items: center; gap: 10px;
  height: 62px;
}

/* Logo */
.logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; margin: 0;}
/* .logo-mark and .logo-text removed — using image logo */
.logo img {
  height: 54px;
  width: auto;
  display: block;
  transition: opacity 0.15s;
}
.logo:hover img { opacity: 0.88; }

/* Nav */
.main-nav { display: flex; align-items: center; gap: 2px; margin-left: 16px; flex: 1; }
.main-nav a {
  color: #c8dcf0;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.main-nav a:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.main-nav a.active { background: var(--accent); color: var(--navy); }
.nav-close {
  display: none;
  color: var(--white);
  font-size: 22px;
  padding: 14px 20px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  text-align: right;
  line-height: 1;
  transition: color 0.15s;
}
.nav-close:hover { color: var(--accent); }
.nav-sep { width: 0px; height: 22px; background: rgba(255,255,255,0.18); margin: 0 0px; flex-shrink: 0; }

/* Social icons — colorful always */
.header-social { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.header-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, filter 0.15s;
}
.header-social a:hover { transform: scale(1.14); filter: brightness(1.18); }
.header-social svg { width: 16px; height: 16px; }
.header-social a.fb { background: #1877f2; }
.header-social a.fb svg { fill: #fff; }
.header-social a.yt { background: #ff0000; }
.header-social a.yt svg { fill: #fff; }
.header-social a.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.header-social a.ig svg { fill: #fff; stroke: #fff; }
.header-social a.li { background: #0077b5; }
.header-social a.li svg { fill: #fff; }

/* Mobile toggle */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
.nav-toggle-label span { display: block; width: 24px; height: 2.5px; background: var(--white); border-radius: 2px; }


/* === LAST UPDATED SIGNAL (hidden — SEO only) === */
.page-updated { display: none; }

/* ========================================
   AD BANNER (between nav and hero)
   ======================================== */
.ad-banner {
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.ad-banner-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 0px 28px; width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.ad-banner-inner ins { display: block !important; width: 100%; max-width: 100%; }

/* ========================================
   SITE INTRO (SEO text below hero)
   ======================================== */
.site-intro {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 28px;
}
.site-intro p {
  max-width: 1300px; margin: 0 auto;
  font-family: var(--font-body); font-size: 18px;
  color: var(--text-muted); line-height: 1.6;
}

/* ========================================
   HERO
   ======================================== */
.hero {
  background: linear-gradient(130deg, #091c36 0%, #163354 50%, #1b4270 100%);
  padding: 22px 28px 22px;
  position: relative; overflow: hidden;
}
.hero-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
  position: relative; z-index: 1;
}

/* ── Feature Cards Grid (right side) ── */
.feat-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.feat-card {
  border-radius: var(--radius-md);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 0.18s, filter 0.18s;
  min-height: 130px;
}
.feat-card:hover { transform: translateY(-3px); filter: brightness(1.08); }

.feat-card-deco {
  position: absolute; right: 8px; top: 8px;
  font-size: 52px; opacity: 0.35; line-height: 1;
  pointer-events: none;
}
.feat-card-body { flex: 1; }
.feat-card-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 800;
  color: #fff; line-height: 1.2; margin-bottom: 6px;
}
.feat-card-sub {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.82); line-height: 1.45;
  margin-bottom: 12px;
}
.feat-card-btn {
  display: inline-block;
  background: rgba(255,255,255,0.22);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: #fff; padding: 6px 15px; border-radius: 20px;
  transition: background 0.15s;
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.3);
}
.feat-card:hover .feat-card-btn { background: rgba(255,255,255,0.32); }

/* Card colour variants */
.fc-blue   { background: #1d4ed8; }
.fc-purple { background: #7c3aed; }
.fc-teal   { background: #0d9488; }
.fc-amber  { background: #b45309; }
.fc-pink   { background: #be185d; }
.fc-green  { background: #15803d; }

/* ========================================
   VIDEO CAROUSEL (inside hero)
   ======================================== */
.vid-carousel {
  width: 100%; min-width: 0;
  background: rgba(0,0,0,0.38);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.vid-carousel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px;
  background: rgba(200,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.vid-carousel-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--white);
}
.vid-yt-icon { width: 22px; height: 22px; fill: #ff2222; flex-shrink: 0; }
.vid-subscribe {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--accent); padding: 5px 14px;
  border-radius: 20px; border: 1px solid rgba(232,160,32,0.5);
  white-space: nowrap; transition: background 0.15s;
}
.vid-subscribe:hover { background: rgba(232,160,32,0.18); }

.vid-slides-wrap { overflow: hidden; width: 100%; max-width: 100%; display: block; }
.vid-slides {
  display: flex;
  width: 100%;
  min-width: 0;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.vid-slide { width: 100%; min-width: 100%; max-width: 100%; flex-shrink: 0; flex-grow: 0; box-sizing: border-box; }

.vid-thumb-link {
  display: block; position: relative; overflow: hidden;
  width: 100%; height: 180px; background: #0a1e38;
}
.vid-thumb-link img {
  width: 100%; height: 180px; object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.vid-thumb-link:hover img { transform: scale(1.03); }
.vid-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.22); transition: background 0.2s;
}
.vid-thumb-link:hover .vid-play-overlay { background: rgba(0,0,0,0.08); }
.vid-play-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.93);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  transition: transform 0.2s, background 0.2s;
}
.vid-thumb-link:hover .vid-play-btn { transform: scale(1.1); background: var(--accent); }
.vid-play-btn svg { width: 20px; height: 20px; fill: var(--navy); margin-left: 3px; }

.vid-slide-info { padding: 8px 14px 7px; }
.vid-slide-cat {
  display: inline-block;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--accent); margin-bottom: 4px;
}
.vid-slide-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--white); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.vid-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 6px 16px 10px;
}
.vid-prev, .vid-next {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--white); border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; padding: 0;
  transition: background 0.15s, transform 0.1s;
  font-family: sans-serif;
}
.vid-prev:hover, .vid-next:hover { background: var(--accent); color: var(--navy); transform: scale(1.1); }
.vid-dots { display: flex; gap: 9px; align-items: center; }
.vid-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.28);
  border: none; padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.vid-dot.active { background: var(--accent); transform: scale(1.4); }

/* ========================================
   MAIN PAGE BODY
   ======================================== */
.page-body { max-width: 1300px; margin: 0 auto; padding: 20px 28px 50px; }

/* Inline ad unit inside body */
.ad-container {
  width: 100%; text-align: center;
  padding: 10px 0; margin: 0 0 20px;
  overflow: hidden;
}

/* ========================================
   SECTION BLOCKS
   ======================================== */
.section-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.2s;
}
.section-block:hover { box-shadow: var(--shadow-md); }

/* Section header bar */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px;
  border-bottom: 3px solid var(--navy);
}
.section-title-link {
  font-family: var(--font-display); font-size: 18px; font-weight: 800;
  color: var(--navy); display: flex; align-items: center; gap: 8px;
}
.s-icon { font-size: 18px; }
.see-more-link {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--white); background: var(--navy);
  padding: 5px 14px; border-radius: 20px;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.see-more-link:hover { background: var(--navy-light); transform: translateY(-1px); }

/* Colour variants */
.sh-navy   { border-color: var(--navy);   background: linear-gradient(90deg,#e8f0f8,#f4f7fc); }
.sh-navy   .section-title-link { color: var(--navy); }
.sh-navy   .see-more-link { background: var(--navy); }
.sh-green  { border-color: var(--green);  background: linear-gradient(90deg,#e5f5eb,#f1faf4); }
.sh-green  .section-title-link { color: var(--green); }
.sh-green  .see-more-link { background: var(--green); }
.sh-orange { border-color: var(--orange); background: linear-gradient(90deg,#fbeee6,#fdf5ef); }
.sh-orange .section-title-link { color: var(--orange); }
.sh-orange .see-more-link { background: var(--orange); }
.sh-purple { border-color: var(--purple); background: linear-gradient(90deg,#ede7f8,#f5f0fc); }
.sh-purple .section-title-link { color: var(--purple); }
.sh-purple .see-more-link { background: var(--purple); }
.sh-teal   { border-color: var(--teal);   background: linear-gradient(90deg,#e4f4f7,#f0fafc); }
.sh-teal   .section-title-link { color: var(--teal); }
.sh-teal   .see-more-link { background: var(--teal); }
.sh-red    { border-color: var(--red);    background: linear-gradient(90deg,#f8e8e8,#fdf2f2); }
.sh-red    .section-title-link { color: var(--red); }
.sh-red    .see-more-link { background: var(--red); }
.sh-accent { border-color: var(--accent-dark); background: linear-gradient(90deg,#fdf0d8,#fef8ec); }
.sh-accent .section-title-link { color: #7a5008; }
.sh-accent .see-more-link { background: var(--accent-dark); }

/* 3-column layout */
.section-body { display: grid; grid-template-columns: 320px 280px 1fr; }

/* ========================================
   COL 1: FEATURED IMAGE + TITLE
   ======================================== */
.col-featured {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.hero-img-link {
  display: block; position: relative; overflow: hidden;
}
.hero-img-link img {
  width: 100%; height: 230px;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.hero-img-link:hover img { transform: scale(1.06); }
.featured-badge {
  position: absolute; top: 9px; left: 9px;
  background: var(--navy); color: var(--white);
  font-size: 10px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.9px;
  padding: 3px 9px; border-radius: 4px;
}
.hero-article-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--text-main); line-height: 1.38;
  display: block; padding: 12px 14px 14px;
  border-top: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.hero-article-title:hover { color: var(--navy); border-top-color: var(--accent); }

/* ========================================
   COL 2: TWO THUMBNAIL ITEMS
   ======================================== */
.col-thumbs {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.thumb-item {
  display: flex; flex-direction: column; text-decoration: none;
  flex: 1; overflow: hidden;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.thumb-item:last-child { border-bottom: none; }
.thumb-item:hover { background: #f6f9fd; }
.thumb-img-wrap {
  width: 100%; height: 120px;
  overflow: hidden; position: relative; background: #d0e2f4; flex-shrink: 0;
}
.thumb-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.3s ease;
}
.thumb-item:hover .thumb-img-wrap img { transform: scale(1.07); }
.thumb-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-main); line-height: 1.38;
  display: block; padding: 9px 12px 10px;
  transition: color 0.15s;
}
.thumb-item:hover .thumb-title { color: var(--navy); }

/* ========================================
   COL 3: MULTI-COLUMN LINK GRID
   ======================================== */
.col-links { padding: 10px 16px 12px; overflow: hidden; }
.col-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 8px;
}
.link-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--text-body); text-decoration: none;
  transition: color 0.12s; white-space: normal;
  word-break: break-word; line-height: 1.35;
}
.link-item:hover { color: var(--navy); }
.link-item:hover .link-bullet { opacity: 1; }
.link-bullet {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--navy-mid); flex-shrink: 0; opacity: 0.4;
  transition: opacity 0.12s;
}
.bullet-green  .link-bullet { background: var(--green); }
.bullet-orange .link-bullet { background: var(--orange); }
.bullet-purple .link-bullet { background: var(--purple); }
.bullet-teal   .link-bullet { background: var(--teal); }
.bullet-red    .link-bullet { background: var(--red); }
.bullet-accent .link-bullet { background: var(--accent-dark); }

/* ========================================
   PILL LINKS (compact sections)
   ======================================== */
.section-body-pills {
  display: flex; flex-wrap: wrap;
  gap: 9px; padding: 15px 18px 17px;
}
.pill-link {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--navy-mid);
  background: #eaf0f8;
  border: 1.5px solid #c8d6e6;
  border-radius: 22px;
  padding: 7px 16px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
  white-space: nowrap;
}
.pill-link:hover {
  background: var(--navy); color: var(--white);
  border-color: var(--navy); transform: translateY(-2px);
}
/* pill colour variants */
.pills-green  .pill-link { color: var(--green);  background: #e8f6ee; border-color: #b0d9be; }
.pills-green  .pill-link:hover { background: var(--green); color:#fff; border-color:var(--green); }
.pills-orange .pill-link { color: var(--orange); background: #fdf0e8; border-color: #e2b898; }
.pills-orange .pill-link:hover { background: var(--orange); color:#fff; border-color:var(--orange); }
.pills-purple .pill-link { color: var(--purple); background: #f0eafa; border-color: #c4aee6; }
.pills-purple .pill-link:hover { background: var(--purple); color:#fff; border-color:var(--purple); }
.pills-teal   .pill-link { color: var(--teal);   background: #e8f5f8; border-color: #a4d0d8; }
.pills-teal   .pill-link:hover { background: var(--teal); color:#fff; border-color:var(--teal); }
.pills-red    .pill-link { color: var(--red);    background: #faebeb; border-color: #daa8a8; }
.pills-red    .pill-link:hover { background: var(--red); color:#fff; border-color:var(--red); }
.pills-accent .pill-link { color: #7a5008; background: #fdf4e4; border-color: #d8b468; }
.pills-accent .pill-link:hover { background: var(--accent-dark); color:#fff; border-color:var(--accent-dark); }
.pills-navy   .pill-link { color: var(--navy);   background: #eaf0f8; border-color: #b8cede; }
.pills-navy   .pill-link:hover { background: var(--navy); color:#fff; border-color:var(--navy); }

/* Compact grid (few items) */
.section-body-compact {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  padding: 11px 18px 13px; gap: 1px 8px;
}
.compact-link {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--text-body); text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.12s; white-space: nowrap; overflow: hidden;
}
.compact-link:hover { color: var(--navy); }
.compact-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--navy-mid); flex-shrink: 0; opacity: 0.35; }

/* ========================================
   LAYOUT GRIDS
   ======================================== */
.two-col-grid   { display: grid; grid-template-columns: 1fr 1fr;     gap: 20px; margin-bottom: 20px; }
.three-col-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.two-col-grid   .section-block,
.three-col-grid .section-block { margin-bottom: 0; }

/* ========================================
   FOOTER
   ======================================== */
.site-footer { background: var(--navy); color: #9ab5cc; margin-top: 32px; text-align: left;}
.site-footer ul { padding: 0; list-style: none; }
.site-footer li { padding: 0; }
.footer-top {
  max-width: 1300px; margin: 0 auto; padding: 40px 28px 28px;
  display: grid; grid-template-columns: 270px 1fr 1fr 1fr; gap: 44px;
}
/* footer text logo replaced with image logo */
.footer-logo { margin-bottom: 13px; }
.footer-logo img {
  height: 40px;
  width: auto;
  display: block;
  transition: opacity 0.15s;
}
.footer-logo:hover img { opacity: 0.8; }
.footer-desc { font-size: 14px; line-height: 1.65; margin-bottom: 16px; color: #7a9ab5; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, filter 0.15s;
}
.footer-social a:hover { transform: scale(1.14); filter: brightness(1.15); }
.footer-social svg { width: 16px; height: 16px; }
.footer-social a.fb { background: #1877f2; }
.footer-social a.fb svg { fill: #fff; }
.footer-social a.yt { background: #ff0000; }
.footer-social a.yt svg { fill: #fff; }
.footer-social a.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.footer-social a.ig svg { fill: #fff; stroke: #fff; }
.footer-social a.li { background: #0077b5; }
.footer-social a.li svg { fill: #fff; }
.footer-col h4 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--white); margin-bottom: 13px; padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-col ul { display: flex; flex-direction: column; gap: 7px; }
.footer-col ul li a { font-size: 15px; color: #7a9ab5; transition: color 0.12s; }
.footer-col ul li a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.09); padding: 16px 28px;
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.footer-copy { font-size: 14px; color: #5a7a96; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: 14px; color: #5a7a96; transition: color 0.12s; }
.footer-links a:hover { color: var(--accent); }

/* Scroll-to-top */
.scroll-top {
  position: fixed; bottom: 22px; right: 22px;
  width: 42px; height: 42px;
  background: var(--navy); color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; box-shadow: var(--shadow-md);
  opacity: 0.88; transition: opacity 0.15s, background 0.15s; z-index: 50;
}
.scroll-top:hover { opacity: 1; background: var(--navy-light); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1150px) {
  .hero-inner { grid-template-columns: 320px 1fr; gap: 16px; }
  .feat-card { min-height: 120px; }
  .section-body { grid-template-columns: 280px 240px 1fr; }
}
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 300px 1fr; gap: 14px; }
  .feat-card { min-height: 112px; padding: 12px 12px 10px; }
  .feat-card-title { font-size: 14px; }
  .feat-card-sub { font-size: 12px; }
  .feat-card-btn { font-size: 12px; padding: 5px 12px; }
  .section-body { grid-template-columns: 240px 200px 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .three-col-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .header-inner { padding: 0 16px; }
  .hero-inner { grid-template-columns: 1fr; gap: 14px; }
  .hero { padding: 18px 16px; }
  .feat-cards-grid { grid-template-columns: repeat(3, 1fr); }
  .feat-card { min-height: 100px; }
  .feat-card-sub { display: none; }
  .section-body { grid-template-columns: 1fr; }
  .col-featured { border-right: none; border-bottom: 1px solid var(--border); }
  .col-thumbs { border-right: none; flex-direction: row; }
  .thumb-item { width: 50%; flex: none; }
  .two-col-grid, .three-col-grid { grid-template-columns: 1fr; }
  .nav-toggle-label { display: flex; }
  .main-nav {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    background: var(--navy-mid); flex-direction: column;
    padding: 6px 0; gap: 0; margin-left: 0; flex: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .nav-close { display: block; }
  .main-nav a { border-radius: 0; padding: 12px 22px; font-size: 15px; }
  .nav-sep { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .header-social { display: none; }
  .page-body { padding: 14px 16px 36px; }
  .ad-banner-inner { padding: 6px 8px; }
  /* Latest Articles: hide hero panel, show mobile strip */
  .lat-hero-wrap { display: none; }
  .lat-mobile-section { display: block; }
}
@media (max-width: 480px) {
  .hero { padding: 14px 12px; }
  .feat-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .feat-card { min-height: 90px; padding: 12px 10px 10px; }
  .feat-card-title { font-size: 13px; }
  .feat-card-deco { font-size: 30px; }
  .pill-link { font-size: 13px; padding: 6px 13px; }
}

/* ========================================
   CATEGORY PAGES
   Targets .subcategory, .body-sec,
   .subcategory-topic ul li, .intro-msg
   Works for career.htm, aptitude.htm etc.
   ======================================== */

/* Hide old header elements rendered by header.js */
.headertopright,
.grid_10,
.social-icons { display: none !important; }

/* ── Category hero banner ── */
section.subcategory {
  background: linear-gradient(130deg, #091c36 0%, #163354 50%, #1b4270 100%);
  border-bottom: 3px solid var(--accent);
  padding: 0; margin: 0;
}
section.subcategory .container_16 {
  max-width: 1300px !important;
  margin: 0 auto;
  padding: 28px 28px 24px;
  width: 100% !important;
}
.subcategory-title {
  display: flex; flex-direction: column; gap: 6px;
}
.cat-breadcrumb {
  font-family: var(--font-display); font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.cat-breadcrumb a { color: var(--accent); text-decoration: none; }
.cat-breadcrumb a:hover { text-decoration: underline; }
.subcategory-title h1 {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 800;
  color: var(--white); margin: 0;
  line-height: 1.15; letter-spacing: -1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.cat-intro {
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 400;
  color: rgba(255,255,255,0.88);
  margin: 8px 0 0; line-height: 1.7;
  max-width: auto;
}
.cat-intro h2 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600;
  color: rgba(255,255,255,0.95);
  margin: 0 0 6px 0;
}
.cat-meta {
  display: flex; gap: 14px; margin-top: 14px;
  align-items: center; flex-wrap: wrap;
}
.cat-count {
  background: var(--amber);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  padding: 3px 12px; border-radius: 20px;
  letter-spacing: 0.3px;
}
.cat-pub {
  font-family: var(--font-body);
  font-size: 12px; color: rgba(255,255,255,0.50);
}

/* ── Hero responsive ── */
@media (max-width: 768px) {
  .subcategory-title h1 { font-size: 30px; letter-spacing: -0.5px; }
  .cat-intro { font-size: 0.92rem; }
}
@media (max-width: 480px) {
  .subcategory-title h1 { font-size: 24px; }
}

/* ── Body section wrapper ── */
section.body-sec {
  background: var(--off-white);
  padding: 24px 0 48px;
}
section.body-sec .container_16 {
  max-width: 1300px !important;
  margin: 0 auto;
  padding: 0 28px;
  width: 100% !important;
  display: block !important;
}
section.body-sec .grid_2 { display: none !important; }
section.body-sec .grid_12 {
  width: 100% !important;
  margin: 0 !important; padding: 0 !important;
}

/* ── Intro message from DB ── */
.intro-msg {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 22px;
  font-family: var(--font-body);
  font-size: 15px; color: var(--text-body);
  line-height: 1.65;
  box-shadow: var(--shadow-sm);
}

/* ── Ad unit inside body ── */
.subcategory-topic ins.adsbygoogle {
  margin-bottom: 20px;
}

/* ── Topic list → card grid ── */
.subcategory-topic ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
}
.subcategory-topic ul li {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.18s;
  position: relative;
  list-style: none !important;
}
.subcategory-topic ul li:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Coloured top bar — 7 colours cycling */
.subcategory-topic ul li::before {
  content: ''; display: block; height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.subcategory-topic ul li:nth-child(7n+1)::before { background: #2563eb; }
.subcategory-topic ul li:nth-child(7n+2)::before { background: #7c3aed; }
.subcategory-topic ul li:nth-child(7n+3)::before { background: #0d9488; }
.subcategory-topic ul li:nth-child(7n+4)::before { background: #b45309; }
.subcategory-topic ul li:nth-child(7n+5)::before { background: #be185d; }
.subcategory-topic ul li:nth-child(7n+6)::before { background: #15803d; }
.subcategory-topic ul li:nth-child(7n+7)::before { background: #dc2626; }

/* Link inside card */
.subcategory-topic ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 16px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  line-height: 1.35 !important; min-height: 52px !important;
  transition: color 0.15s !important;
}
.subcategory-topic ul li a:hover { color: var(--navy) !important; }

/* Arrow appears on hover */
.subcategory-topic ul li a::after {
  content: '→'; font-size: 13px;
  color: var(--text-muted); flex-shrink: 0;
  opacity: 0; margin-left: 6px;
  transition: opacity 0.15s, transform 0.15s;
}
.subcategory-topic ul li:hover a::after {
  opacity: 1; transform: translateX(3px);
  color: var(--navy);
}

/* ── Responsive — category pages ── */
@media (max-width: 1024px) {
  .subcategory-topic ul {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  section.subcategory .container_16 { padding: 20px 16px; }
  .subcategory-title p { font-size: 26px; }
  section.body-sec .container_16 { padding: 0 16px; }
  .subcategory-topic ul {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
    gap: 8px !important;
  }
}
@media (max-width: 480px) {
  .subcategory-title p { font-size: 22px; }
  .subcategory-topic ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }
  .subcategory-topic ul li a {
    font-size: 13px !important;
    padding: 11px 12px !important;
    min-height: 46px !important;
  }
}

/* ── Topic card: name, desc, date ── */
.topic-link {
  display: flex; flex-direction: column;
  gap: 2px; width: 100%; height: 100%;
  box-sizing: border-box; text-decoration: none;
}
.topic-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--text-main); line-height: 1.35;
}
.topic-item:hover .topic-name { color: var(--navy); }
.topic-desc {
  font-family: var(--font-body);
  font-size: 12px; color: #666; line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 2px;
}
.topic-meta {
  display: flex; justify-content: flex-end;
  margin-top: auto; padding-top: 6px;
}
.topic-date {
  font-size: 11px; color: #bbb;
  font-family: var(--font-body);
  font-style: italic;
  margin-top: auto;
  padding-top: 6px;
  align-self: flex-end;
  display: block;
  text-align: right;
  width: 100%;
}



/* ========================================
   EDITORIAL TRUST / FOUNDERS
   ======================================== */
.editorial-trust {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 28px;
}
.editorial-trust-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.editorial-trust-heading {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--navy); margin-bottom: 10px;
}
.editorial-trust-text p {
  font-family: var(--font-body);
  font-size: 15px; color: var(--text-body); line-height: 1.7;
}
.founders-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.founder-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 18px;
  flex: 1; min-width: 200px; box-shadow: var(--shadow-sm);
}
.founder-avatar {
  width: 48px; height: 48px;
  min-width: 48px; min-height: 48px;
  max-width: 48px; max-height: 48px;
  border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.founder-info { display: flex; flex-direction: column; gap: 2px; }
.founder-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--navy);
}
.founder-role {
  font-family: var(--font-body);
  font-size: 13px; color: var(--text-muted);
}
.founder-socials { display: flex; gap: 8px; margin-top: 6px; }
.founder-socials a {
  width: 28px; height: 28px;
  min-width: 28px; min-height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--off-white); border: 1px solid var(--border);
  transition: transform 0.15s;
}
.founder-socials a:hover { transform: scale(1.15); }
.founder-socials svg { width: 13px; height: 13px; fill: var(--navy); }

@media (max-width: 768px) {
  .editorial-trust { padding: 24px 16px; }
  .editorial-trust-inner { grid-template-columns: 1fr; gap: 24px; }
  .founders-grid { flex-direction: column; }
}

/* ========================================
   LATEST ARTICLES SECTION (homepage)
   lat-* prefix — isolated from other styles
   ======================================== */
.lat-section {
  background: var(--white);
  border-bottom: 2px solid var(--accent);
  padding: 20px 28px 24px;
}
.lat-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
}
.lat-heading {
  display: flex; align-items: center; gap: 10px;
}
.lat-heading-bar {
  width: 4px; height: 22px;
  background: var(--accent); border-radius: 2px;
}
.lat-heading-text {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800;
  color: var(--navy); margin: 0;
}
.lat-heading-badge {
  background: var(--navy); color: var(--accent);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 20px;
  letter-spacing: 0.3px;
}
.lat-see-all {
  font-family: var(--font-body);
  font-size: 13px; color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 4px 14px; border-radius: 20px;
  transition: background 0.15s;
}
.lat-see-all:hover { background: var(--off-white); }
.lat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.lat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.lat-badge {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  background: var(--off-white); color: var(--navy-mid);
  padding: 2px 8px; border-radius: 4px;
  align-self: flex-start;
}
.lat-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--navy); line-height: 1.35;
}
.lat-card:hover .lat-title { color: var(--accent-dark); }
.lat-desc {
  font-family: var(--font-body);
  font-size: 12px; color: var(--text-body);
  line-height: 1.45; flex: 1;
}
.lat-date {
  font-family: var(--font-body);
  font-size: 11px; color: #aaa;
  font-style: italic; margin-top: 2px;
  align-self: flex-end;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .lat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .lat-grid { grid-template-columns: 1fr; }
  .lat-section { padding: 16px; }
}

/* ========================================
   LATEST ARTICLES IN HERO
   ======================================== */
#latest-section {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
#latest-section a {
  background: #fff !important;
  border: 1px solid #dde3eb !important;
  border-left: 4px solid #e8a020 !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
}
#latest-section a:hover {
  box-shadow: 0 3px 10px rgba(15,39,68,0.15) !important;
  transform: translateY(-3px) !important;
}
#latest-section .lat-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  align-self: flex-start !important;
}
#latest-section .lat-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f2744 !important;
  line-height: 1.3 !important;
}
#latest-section .lat-desc {
  font-size: 15px !important;
  color: #555 !important;
  line-height: 1.35 !important;
}
#latest-section .lat-date {
  font-size: 11px !important;
  color: #bbb !important;
  font-style: italic !important;
  align-self: flex-end !important;
  margin-top: auto !important;
}

/* ========================================
   LATEST ARTICLES — HERO RIGHT PANEL
   ======================================== */

/* Desktop: sits as right column inside hero-inner grid */
.lat-hero-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lat-hero-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(255,255,255,0.15);
}

.lat-heading-bar {
  width: 4px; height: 18px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.lat-heading-text {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

.lat-heading-badge {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile latest articles strip — hidden on desktop */
.lat-mobile-section {
  display: none;
  background: var(--navy);
  padding: 14px 16px 16px;
}

.lat-mobile-section .lat-hero-heading {
  margin-bottom: 10px;
}


/* ========================================
   BLOCK GOOGLE AD INJECTION IN CONTENT
   ======================================== */
.section-block { isolation: isolate; }
.section-body ins[data-ad-format], .section-body .adsbygoogle,
.section-body [data-google-query-id],
.col-featured ins, .col-featured .adsbygoogle,
.col-thumbs ins, .col-thumbs .adsbygoogle,
.col-links ins, .col-links .adsbygoogle,
ins.adsbygoogle[data-ad-format="autorelaxed"] {
  display: none !important; width: 0 !important; height: 0 !important;
  overflow: hidden !important; pointer-events: none !important;
}
/* ========================================
   FEATURE CARDS STRIP — 6x1
   ======================================== */
.feat-cards-strip {
  background: var(--navy);
  padding: 12px 28px 22px;
}

.feat-cards-strip-inner {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}

/* Responsive */
@media (max-width: 1024px) {
  #latest-section { grid-template-columns: repeat(2, 1fr) !important; }
  .feat-cards-strip {
  background: var(--navy);
  padding: 12px 28px 22px;
}

.feat-cards-strip-inner { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  #latest-section { grid-template-columns: repeat(2, 1fr) !important; }
  .feat-cards-strip {
  background: var(--navy);
  padding: 12px 28px 22px;
}

.feat-cards-strip-inner { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  #latest-section { grid-template-columns: 1fr !important; }
  .feat-cards-strip {
  background: var(--navy);
  padding: 12px 28px 22px;
}

.feat-cards-strip-inner { grid-template-columns: repeat(2, 1fr) !important; }
}





/* Menu items left — topic tabs */


/* Answer buttons */


/* Code blocks */


/* Aptitude table */
table.apti-tbl-answer td { text-align: center; border: 0; }
table.apti-tbl-answer td.apti-td-divident {
    border-bottom: 1px solid #000 !important;
    padding-bottom: 2px;
    vertical-align: bottom;
}
i.apti-var { font-style: italic; margin: 0 1px; }
i.apti-bar { font-style: normal; text-decoration: overline; margin: 0 1px; }
i.apti-def { font-weight: 700; color: #555; font-style: normal; }
i.apti-formula, i.apti-facts { color: #f0f; font-style: normal; font-weight: 700; }


/* Highlighters */


/* Related links */


/* Toggle answer blocks */
#z1,#z2,#z3,#z4,#z5,#z6,#z7,#z8,#z9,#z10,#z11,#z12,#z13,#z14,#z15,#z16,#z17,#z18,#z19,#z20,#z21,#z22,#z23,#z24,#z25,#z26,#z27,#z28,#z29,#z30,#z31,#z32,#z33,#z34,#z35,#z36,#z37,#z38,#z39,#z40,#z41,#z42,#z43,#z44,#z45,#z46,#z47,#z48,#z49,#z50,#z51,#z52,#z53,#z54,#z55,#z56,#z57,#z58,#z59,#z60 { margin: -11px 0 10px; padding: 0 10px; border: 1px solid #006699; display: none; }
#y1,#y2,#y3,#y4,#y5,#y6,#y7,#y8,#y9,#y10,#y11,#y12,#y13,#y14,#y15,#y16,#y17,#y18,#y19,#y20,#y21,#y22,#y23,#y24,#y25,#y26,#y27,#y28,#y29,#y30,#y31,#y32,#y33,#y34,#y35,#y36,#y37,#y38,#y39,#y40,#y41,#y42,#y43,#y44,#y45,#y46,#y47,#y48,#y49,#y50,#y51,#y52,#y53,#y54,#y55,#y56,#y57,#y58,#y59,#y60 { margin: -11px 0 10px; padding: 0 10px; border: 1px solid #006699; display: none; }

/* ========================================
   ARTICLE / CONTENT PAGE LAYOUT
   ======================================== */

/* Override old CSS nav and header */
nav { background-color: #0f2744 !important; box-shadow: none !important; }
header { background: #0f2744 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; position: sticky !important; top: 0 !important; }

.art-page-wrap { background: #f2f5f9; min-height: 100vh; }

.art-hero {
  background: linear-gradient(130deg, #091c36 0%, #163354 50%, #1b4270 100%);
  padding: 20px 28px 22px;
}
.art-hero-inner { max-width: 1300px; margin: 0 auto; }
.art-breadcrumb { margin-bottom: 10px; }
.art-breadcrumb > div { font-size: 15px; color: rgba(255,255,255,0.8); }
.art-breadcrumb > div > a { font-size: 15px; color: rgba(255,255,255,0.8); text-decoration: none; }
.art-breadcrumb > div > a:hover { color: #e8a020; }
.art-hero-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #fff; line-height: 1.3; margin-top: 8px; }

.art-hero-meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px; flex-wrap: wrap;
}
.art-readtime {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: #0f2744;
  background: #e8a020;
  padding: 3px 11px; border-radius: 20px;
}
.art-updated {
  font-family: var(--font-body); font-size: 13px;
  color: #ffffff;
}

.art-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 28px 50px;
  align-items: start;
  background: #fff;
}
.art-main {
  padding: 20px 24px 20px 0;
  min-width: 0;
  border-right: 1px solid #dde3ec;
  background: #fff;
}
.art-prevnext { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; margin-top: 7px;}
.art-prevnext div { flex: none; }
.art-prevnext div a {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid #0f2744;
  border-radius: 6px;
  text-decoration: none;
  background: #fff;
  font-size: 17px;
  color: #0f2744;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.art-prevnext div a:hover { background: #0f2744; color: #fff; text-decoration: none; }

.art-ad-slot { margin: 20px 0; text-align: center; }

.art-sidebar-right { padding: 20px 0 20px 20px; position: sticky; top: 20px; background: #fff; }
.art-related-box { background: #fff; border: 1px solid #dde3ec; border-radius: 10px; overflow: hidden; }
.art-related-box h4 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #888; padding: 10px 14px; margin: 0; background: #f5f7fa; border-bottom: 1px solid #dde3ec; }
.art-related-box ul { list-style: none; margin: 0; padding: 0; }
.art-related-box ul li { border-bottom: 1px solid #dde3ec; }
.art-related-box ul li:last-child { border-bottom: none; }
.art-related-box ul li a { display: block; padding: 8px 14px; font-size: 17px; color: #333; text-decoration: none; transition: background 0.15s; }
.art-related-box ul li a:hover { background: #f0f5fb; color: #0f2744; }

/* Block Related Search auto ads */
ins.adsbygoogle[data-ad-format="autorelaxed"],
ins.adsbygoogle[data-matched-content-ui-type] { display: none !important; width: 0 !important; height: 0 !important; pointer-events: none !important; }

@media (max-width: 1024px) {
  .art-layout { grid-template-columns: 1fr 220px; padding: 0 16px 36px; }
  .art-hero-title { font-size: 20px; }
  .art-hero { padding: 16px 16px 20px; }
}
@media (max-width: 768px) {
  .art-layout { grid-template-columns: 1fr; padding: 0 16px 36px; }
  .art-hero { padding: 16px; }
  .art-hero-title { font-size: 18px; }
  .art-main { padding: 16px 0; border-right: none; }
  .art-sidebar-right { position: static; padding: 0; }
  .art-prevnext { flex-wrap: wrap; gap: 8px; }
}



/* ===== SHARE BUTTONS ===== */
.art-share { display:flex; align-items:center; gap:8px; margin-left:8px; flex-wrap:wrap; }
.art-share-label { font-size:13px; color:rgba(255,255,255,0.7); }
.art-share-btn {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  text-decoration:none; flex-shrink:0;
  transition:transform 0.15s;
}
.art-share-btn:hover { transform:scale(1.12); }
.art-share-btn svg { width:16px; height:16px; display:block; }
.art-share-btn.em { background:#7c8fa8; }
.art-share-btn.em svg { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.art-share-btn.wa { background:#25d366; }
.art-share-btn.wa svg { fill:#fff; }
.art-share-btn.tw { background:#4a4a4a; border:2px solid rgba(255,255,255,0.5); }
.art-share-btn.tw svg { fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; }
.art-share-btn.fb { background:#1877f2; }
.art-share-btn.fb svg { fill:#fff; }
.art-share-btn.rd { background:#ff4500; }
.art-share-btn.rd svg { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Bottom share row */
.art-share-bottom { padding:14px 0 8px; border-top:0.5px solid var(--color-border-tertiary); margin-bottom:8px; }
.art-share-bottom .art-share { margin-left:0; }
.art-share-bottom .art-share-label { color:var(--color-text-secondary); }
.art-share-bottom .art-share-btn.tw { border-color:rgba(0,0,0,0.2); }


/* ========================================
   VIDEO PAGE
   ======================================== */
.video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 24px;
    border-radius: var(--radius-md);
    background: #000;
}
.video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}
.video-desc {
    background: var(--off-white);
    border-left: 4px solid var(--red);
    padding: 14px 18px;
    margin-bottom: 24px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--black);
}
.video-desc a {
    color: var(--red);
    text-decoration: none;
}
.video-duration-badge {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 12px;
    margin-left: 12px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    font-family: var(--font-display);
}
.related-videos-box {
    margin-top: 32px;
}
.rv-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--red);
    margin-bottom: 14px;
    padding-bottom: 6px;
}
.related-videos-box h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}
.rv-see-all {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    white-space: nowrap;
}
.rv-see-all:hover {
    text-decoration: underline;
    color: var(--red);
}
.related-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.related-video-card {
    box-sizing: border-box;
}
.related-video-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.related-video-card a:hover .rv-thumb img { opacity: 0.88; }
.rv-thumb {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #000;
    margin-bottom: 8px;
}
.rv-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}
.rv-thumb .rv-duration {
    position: absolute;
    bottom: 6px; right: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 4px;
}
.rv-title {
    font-size: 0.88rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text-main);
    font-family: var(--font-body);
}
.sub-section {
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--border);
}
.sub-section h4 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin: 0 0 10px;
    background: #f5f7fa;
    padding: 10px 0;
}
.sub-btn-wrap {
    display: block;
    width: 100%;
}
.yt-btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
.more-links { margin-top: 4px; }
.yt-btn-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #cc0000;
    color: #fff !important;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-display);
    cursor: pointer;
    text-decoration: none !important;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    white-space: nowrap;
    animation: ytpulse 2s infinite;
}
@keyframes ytpulse {
    0%   { box-shadow: 0 0 0 0 rgba(204,0,0,0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(204,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(204,0,0,0); }
}
.yt-btn-pulse:hover,
.art-related-box ul li a.yt-btn-pulse:hover {
    background: #aa0000 !important;
    color: #fff !important;
    text-decoration: none !important;
}
@media (max-width: 640px) {
    .related-videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .related-videos-grid { grid-template-columns: 1fr; }
}

/* ========================================
   SIDEBAR VIDEO CARDS
   ======================================== */
.sb-vid-section {
    border-top: 1px solid var(--border);
    padding: 10px 14px 14px;
}
.sb-vid-section h4 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin: 0 0 10px;
    background: #f5f7fa;
    padding: 10px 0;
}
.sb-vid-card {
    margin-bottom: 12px;
}
.sb-vid-card:last-child {
    margin-bottom: 0;
}
.sb-vid-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sb-vid-card a:hover .sb-vid-title {
    color: var(--navy);
}
.sb-vid-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--off-white);
    margin-bottom: 6px;
}
.sb-vid-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.sb-vid-card a:hover .sb-vid-thumb img {
    opacity: 0.85;
}
.sb-vid-dur {
    position: absolute;
    bottom: 3px;
    right: 4px;
    background: rgba(0,0,0,0.78);
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}
.sb-vid-title {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-main);
    font-family: var(--font-body);
    flex: 1;
}

/* ========================================
   CAREERRIDE VIDEO WIDGET (tutorial pages)
   ======================================== */
.cr-widget {
    margin-top: 16px;
    border-top: 2px solid var(--red);
    padding-top: 14px;
}
.cr-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cr-widget-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--red);
}
.cr-widget-all {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    white-space: nowrap;
}
.cr-widget-all:hover {
    text-decoration: underline;
}
.cr-widget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.cr-widget-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.cr-widget-card a:hover .cr-widget-vtitle {
    color: var(--navy);
}
.cr-widget-thumb {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--off-white);
    margin-bottom: 7px;
}
.cr-widget-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}
.cr-widget-card a:hover .cr-widget-thumb img { opacity: 0.88; }
.cr-widget-dur {
    position: absolute;
    bottom: 5px; right: 6px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}
.cr-widget-vtitle {
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-main);
    font-family: var(--font-body);
}
@media (max-width: 640px) {
    .cr-widget-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .cr-widget-grid { grid-template-columns: 1fr; }
}


/* ========================================
   ARTICLE PAGE ENHANCEMENTS v2
   ======================================== */

/* --- Hero title larger & bolder --- */
.art-hero-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px !important;
}

/* --- Updated date pill style --- */
.art-updated {
    background: rgba(255,255,255,0.12);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.9) !important;
}

/* --- Prev/Next buttons — more prominent --- */
.art-prevnext div a {
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: 2px solid var(--navy) !important;
    letter-spacing: 0.2px !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.art-prevnext div a:hover {
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--navy) !important;
}

/* --- TOC / menu-items-left --- */
.menu-items-left {
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 0 0 4px 0;
    margin-bottom: 20px;
    overflow: visible;
}
.menu-items-left table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.menu-items-left table td {
    padding: 6px 12px;
    border-bottom: 0.5px solid #e8edf4;
    color: var(--navy-mid);
    line-height: 1.4;
    white-space: normal !important;
    word-break: break-word;
}
.menu-items-left table tr:last-child td {
    border-bottom: none;
}
.menu-items-left table tr:hover td {
    background: #eef2f8;
    color: var(--navy);
}
.menu-items-left .tableheader,
.menu-items-left th {
    background: var(--navy);
    color: #fff;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 7px 12px;
}
.menu-items-left h6 {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.menu-items-left li {
    border-bottom: 0.5px solid #edf0f4;
}
.menu-items-left li a {
    display: block;
    padding: 5px 12px;
    font-size: 13px;
    color: var(--navy-mid);
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.4;
}
.menu-items-left li a:hover {
    color: var(--accent-dark);
}

/* --- Intro message box --- */
.intro-msg {
    border-left: 4px solid var(--accent);
    background: #fffbf0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.7;
    color: #000000;
}

/* --- Content h2 headings inside paratitle1 --- */
.paratitle1 h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 24px 0 10px;
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    line-height: 1.3;
}
.paratitle1 h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-mid);
    margin: 18px 0 8px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
    line-height: 1.3;
}
.paratitle1 p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 12px;
}

/* --- Related links at bottom of content --- */
.relatedlinks {
    margin-top: 20px;
    padding: 14px 18px;
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-top: 3px solid var(--navy);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.relatedlinks ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    list-style: none;
    margin: 0; padding: 0;
}
.relatedlinks li {
    border-bottom: 0.5px solid #e8edf4;
}
.relatedlinks li a {
    display: block;
    padding: 5px 2px;
    font-size: 14px;
    color: var(--navy-mid);
    text-decoration: none;
    transition: color 0.15s;
}
.relatedlinks li a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

/* --- Bottom share row cleanup --- */
.art-share-bottom {
    padding: 16px 0 10px !important;
    border-top: 1px solid var(--border) !important;
    margin: 16px 0 8px !important;
}
.art-share-bottom .art-share-label {
    color: var(--text-muted) !important;
}
.art-share-bottom .art-share-btn {
    width: 32px !important;
    height: 32px !important;
}

/* --- Sidebar related box link size --- */
.art-related-box ul li a {
    font-size: 14px !important;
    padding: 9px 14px !important;
    line-height: 1.4 !important;
}
.art-related-box ul li a:hover {
    padding-left: 18px !important;
    transition: padding 0.15s, background 0.15s !important;
}

/* --- Ad slot tighter spacing --- */
.art-ad-slot {
    margin: 16px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.art-ad-slot ins {
    max-width: 100% !important;
}

/* --- Responsive tweaks --- */
@media (max-width: 768px) {
    .art-hero-title { font-size: 20px !important; }
    .relatedlinks ul { grid-template-columns: 1fr; }
    .menu-items-left table td { white-space: normal !important; font-size: 12px; }
}

/* ========================================
   TOPMENU — tutorials.htm, questions-and-answers.htm etc.
   ======================================== */
.topmenu-group {
    margin-bottom: 28px;
}
.topmenu-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.topmenu-heading-bar {
    width: 4px;
    height: 22px;
    background: var(--accent);
    border-radius: 2px;
    flex-shrink: 0;
}
.topmenu-heading-text {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.2px;
}
.topmenu-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ============================================================
   SECTION 2 -- originally cr-style.css (admin components + a few
   public-page additions built after the base file above). Brand
   variables (Navy + Amber + Outfit + Source Sans 3) come from
   SECTION 1's :root block, not redefined here.
   ============================================================ */

/* ========================================
   AUTH PAGES — Login / Register
   ======================================== */

/* Google button */
.cr-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
    margin-bottom: 4px;
}

    .cr-btn-google:hover {
        background: #f7f9fc;
        border-color: #aab4c0;
        box-shadow: var(--shadow-sm);
    }

/* Welcome message in step 2 */
.cr-welcome-msg {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 18px;
    padding: 12px 14px;
    background: var(--off-white);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
}

/* Back link */
.cr-back-link {
    margin-bottom: 16px;
}

    .cr-back-link span {
        font-size: 14px;
        color: var(--text-muted);
        cursor: pointer;
        font-family: var(--font-body);
        transition: color 0.15s;
    }

        .cr-back-link span:hover {
            color: var(--navy);
        }

/* Input with icon wrapper */
.cr-input-wrap {
    position: relative;
}

    .cr-input-wrap .cr-input {
        padding-right: 40px;
    }

.cr-toggle-pwd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.5;
    font-size: 16px;
    transition: opacity 0.15s;
    user-select: none;
}

    .cr-toggle-pwd:hover {
        opacity: 0.8;
    }

/* Input class used in ASPX TextBox CssClass */
.cr-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-main);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    display: block;
}

    .cr-input:focus {
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(15,39,68,0.10);
    }

    .cr-input.error {
        border-color: var(--red);
        box-shadow: 0 0 0 3px rgba(181,26,26,0.08);
    }

.cr-auth-wrap {
    min-height: 100vh;
    background: var(--off-white);
    display: flex;
    flex-direction: column;
}

.cr-auth-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.cr-auth-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

.cr-auth-card-head {
    background: linear-gradient(130deg, #091c36 0%, #163354 100%);
    padding: 28px 32px 24px;
    text-align: center;
}

    .cr-auth-card-head h1 {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 800;
        color: var(--white);
        margin-bottom: 6px;
        letter-spacing: -0.3px;
    }

    .cr-auth-card-head p {
        font-size: 14px;
        color: rgba(255,255,255,0.72);
        font-family: var(--font-body);
    }

.cr-auth-card-body {
    padding: 28px 32px 32px;
}

/* Form elements */
.cr-form-group {
    margin-bottom: 18px;
}

    .cr-form-group label {
        display: block;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 6px;
        letter-spacing: 0.2px;
    }

    .cr-form-group input {
        width: 100%;
        height: 44px;
        padding: 0 14px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 15px;
        color: var(--text-main);
        background: var(--white);
        transition: border-color 0.15s, box-shadow 0.15s;
        outline: none;
    }

        /* .cr-form-group input above has no [type] qualifier, so it was
   silently stretching any checkbox placed inside a form group to
   full-width, 44px-tall, bordered dimensions meant for text
   inputs -- turning a checkbox into an oversized square that
   overflows its row and pushes its label text away. Scope it back
   to a normal checkbox size instead of fighting this with inline
   !important overrides on every checkbox that ever lands here. */
        .cr-form-group input[type="checkbox"] {
            width: 16px;
            height: 16px;
            padding: 0;
            border: none;
        }

        .cr-form-group input:focus {
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(15,39,68,0.10);
        }

        .cr-form-group input.error {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(181,26,26,0.08);
        }

.cr-field-error {
    display: none;
    font-size: 12px;
    color: var(--red);
    margin-top: 4px;
    font-family: var(--font-body);
}

    .cr-field-error.show {
        display: block;
    }

/* Buttons */
.cr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

    .cr-btn:active {
        transform: scale(0.98);
    }

.cr-btn-primary {
    background: var(--accent);
    color: white;
    padding: 12px 24px;
    width: 100%;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(232,160,32,0.30);
}

    .cr-btn-primary:hover {
        background: var(--accent-dark);
        box-shadow: 0 4px 14px rgba(232,160,32,0.38);
    }

    .cr-btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.cr-btn-navy {
    background: var(--navy);
    color: var(--white);
    padding: 10px 22px;
}

    .cr-btn-navy:hover {
        background: var(--navy-mid);
    }

.cr-btn-outline {
    background: transparent;
    color: var(--navy);
    border: 2px solid var(--navy);
    padding: 10px 22px;
}

    .cr-btn-outline:hover {
        background: var(--navy);
        color: var(--white);
    }

.cr-btn-sm {
    font-size: 13px;
    padding: 7px 16px;
    width: auto;
    display: inline-flex;
}

.cr-btn-danger {
    background: #fee2e2;
    color: #991b1b;
    padding: 10px 22px;
}

    .cr-btn-danger:hover {
        background: #991b1b;
        color: var(--white);
    }

/* Alert messages */
.cr-alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-body);
    margin-bottom: 18px;
    display: none;
}

    .cr-alert.show {
        display: block;
    }

.cr-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-left: 4px solid var(--red);
}

.cr-alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-left: 4px solid var(--green);
}

.cr-alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}
.cr-alert-icon { vertical-align: middle; margin-right: 8px; }

/* Auth footer links */
.cr-auth-links {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-muted);
    font-family: var(--font-body);
}

    .cr-auth-links a {
        color: var(--navy);
        font-weight: 600;
        text-decoration: underline;
        transition: color 0.15s;
    }

.cr-mt-14 { margin-top: 14px; }
.cr-mt-16 { margin-top: 16px; }
.cr-mt-18 { margin-top: 18px; }

/* -- Auth "email sent" confirmation panel (Forgot/Reset Password) -- */
.cr-auth-confirm { text-align: center; padding: 10px 0 20px; }
.cr-auth-confirm-icon { font-size: 48px; margin-bottom: 12px; }
.cr-auth-confirm-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.cr-auth-confirm-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.cr-auth-confirm-note { font-size: 13px; color: var(--text-muted); margin-top: 14px; }
.cr-auth-footer { text-align: center; padding: 16px; font-size: 13px; color: var(--text-muted); font-family: var(--font-body); }
.cr-auth-confirm-icon-green { color: var(--green); }
.cr-auth-confirm-icon-blue { color: #3b82f6; }
.cr-auth-confirm-icon-orange { color: var(--orange); }
.cr-auth-cta-wide { display: inline-flex; width: auto; padding: 11px 24px; }
.cr-auth-loading { text-align: center; padding: 20px 0; }
.cr-auth-loading-icon { font-size: 40px; margin-bottom: 12px; }
.cr-auth-loading-text { color: var(--text-muted); font-size: 15px; }
.cr-auth-confirm-text-mb { margin-bottom: 20px; }
.cr-toggle-pwd-icon { pointer-events: none; display: block; }

        .cr-auth-links a:hover {
            color: var(--accent-dark);
        }

.cr-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

    .cr-divider span {
        font-size: 13px;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .cr-divider::before,
    .cr-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

/* ========================================
   ADMIN LAYOUT
   ======================================== */

.cr-admin-wrap {
    display: flex;
    min-height: 100vh;
    background: var(--off-white);
}

/* Sidebar */
.cr-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
}

.cr-sidebar-logo {
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

    .cr-sidebar-logo span {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 800;
        color: var(--white);
        display: block;
    }

    .cr-sidebar-logo small {
        font-size: 11px;
        color: rgba(255,255,255,0.50);
        font-family: var(--font-body);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.cr-sidebar-nav {
    flex: 1;
    padding: 12px 0;
}

.cr-sidebar-section {
    padding: 16px 20px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.38);
    font-family: var(--font-display);
}

.cr-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: rgba(255,255,255,0.75);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

    .cr-sidebar-link:hover {
        background: rgba(255,255,255,0.08);
        color: var(--white);
    }

    .cr-sidebar-link.active {
        background: rgba(232,160,32,0.15);
        color: var(--accent);
        border-left-color: var(--accent);
    }

    .cr-sidebar-link svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.80;
    }

    .cr-sidebar-link.active svg {
        opacity: 1;
    }

.cr-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 13px;
    color: rgba(255,255,255,0.50);
    font-family: var(--font-body);
}

    .cr-sidebar-footer a {
        color: rgba(255,255,255,0.60);
        text-decoration: none;
        transition: color 0.15s;
        display: block;
        margin-top: 4px;
    }

        .cr-sidebar-footer a:hover {
            color: var(--accent);
        }

/* Mobile sidebar toggle -- hidden on desktop, shown only below
   768px alongside the existing slide-in/out sidebar behavior. */
.cr-sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--white);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

    .cr-sidebar-toggle svg {
        width: 20px;
        height: 20px;
    }

.cr-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99;
}

    .cr-sidebar-backdrop.open {
        display: block;
    }

/* Main content area */
.cr-main {
    margin-left: 240px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cr-topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.cr-topbar-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
}

.cr-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cr-admin-badge {
    font-size: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--white);
    background: var(--navy);
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cr-content {
    padding: 28px;
    flex: 1;
}

/* ========================================
   DASHBOARD WIDGETS
   ======================================== */

.cr-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.cr-stat-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cr-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

    .cr-stat-icon.navy {
        background: rgba(15,39,68,0.10);
    }

    .cr-stat-icon.amber {
        background: rgba(232,160,32,0.15);
    }

    .cr-stat-icon.green {
        background: rgba(26,122,60,0.12);
    }

    .cr-stat-icon.red {
        background: rgba(181,26,26,0.10);
    }

.cr-stat-info {
    flex: 1;
    min-width: 0;
}

.cr-stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 4px;
}

.cr-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-body);
}

/* Page header inside content */
.cr-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}

    .cr-page-head h2 {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        color: var(--navy);
    }

    .cr-page-head p {
        font-size: 14px;
        color: var(--text-muted);
        margin-top: 3px;
        font-family: var(--font-body);
    }

/* ========================================
   TABLES
   ======================================== */

.cr-table-wrap {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.cr-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

.cr-search-input {
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-main);
    outline: none;
    width: 260px;
    transition: border-color 0.15s;
}

    .cr-search-input:focus {
        border-color: var(--navy);
    }

.cr-select {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-main);
    background: var(--white);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .cr-select:focus {
        border-color: var(--navy);
    }

table.cr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
}

    table.cr-table thead tr {
        background: #f7f9fc;
        border-bottom: 2px solid var(--border);
    }

    table.cr-table thead th {
        padding: 11px 16px;
        text-align: left;
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        white-space: nowrap;
    }

    table.cr-table tbody tr {
        border-bottom: 1px solid var(--border);
        transition: background 0.12s;
    }

        table.cr-table tbody tr:last-child {
            border-bottom: none;
        }

        table.cr-table tbody tr:hover {
            background: #f7f9fc;
        }

    table.cr-table tbody td {
        padding: 12px 16px;
        color: var(--text-body);
        vertical-align: middle;
    }

/* Badges */
.cr-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cr-badge-green {
    background: #dcfce7;
    color: #166534;
}

.cr-badge-red {
    background: #fee2e2;
    color: #991b1b;
}

.cr-badge-amber {
    background: #fef9c3;
    color: #854d0e;
}

.cr-badge-navy {
    background: #e0e7ef;
    color: var(--navy);
}

.cr-badge-blue {
    background: #dbeafe;
    color: #1e40af;
}

.cr-badge-purple {
    background: #ede9fe;
    color: #5b21b6;
}

/* Action buttons in table */
.cr-action-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cr-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    color: var(--text-muted);
}

    .cr-icon-btn:hover {
        background: var(--off-white);
        border-color: var(--navy);
        color: var(--navy);
    }

    .cr-icon-btn svg {
        width: 15px;
        height: 15px;
    }

/* Pagination */
.cr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-body);
}

.cr-page-btns {
    display: flex;
    gap: 4px;
}

.cr-page-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--white);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cr-page-btn:hover,
    .cr-page-btn.active {
        background: var(--navy);
        border-color: var(--navy);
        color: var(--white);
    }

/* ========================================
   CARDS + PANELS
   ======================================== */

.cr-card {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    padding: 22px;
}

.cr-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

    .cr-card-head h3 {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        color: var(--navy);
    }

/* ========================================
   RESPONSIVE — ADMIN
   ======================================== */

@media (max-width: 1024px) {
    .cr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cr-sidebar-toggle {
        display: flex;
    }

    .cr-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

        .cr-sidebar.open {
            transform: translateX(0);
        }

    .cr-main {
        margin-left: 0;
    }

    .cr-topbar {
        padding-left: 60px;
    }

    .cr-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cr-content {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .cr-auth-card-body {
        padding: 20px;
    }

    .cr-auth-card-head {
        padding: 22px 20px;
    }

    .cr-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Fresh questions info banner ── */
.cr-fresh-banner {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cr-fresh-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.cr-fresh-banner-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: #1d4ed8;
}

    .cr-fresh-banner-text strong {
        font-weight: 700;
    }

/* ── Inline fresh note (inside cards) ── */
.cr-fresh-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ── Daily challenge card ── */
.cr-daily-card {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    margin-bottom: 16px;
    overflow: hidden;
}

.cr-daily-card-head {
    background: var(--navy);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .cr-daily-card-head h3 {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        color: var(--white);
        margin: 0;
    }

    .cr-daily-card-head span {
        font-family: var(--font-body);
        font-size: 12px;
        color: rgba(255,255,255,0.55);
    }

.cr-daily-card-body {
    padding: 14px 16px;
}

.cr-daily-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.cr-daily-subject-card {
    background: var(--off-white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s, background 0.15s;
}

    .cr-daily-subject-card:hover {
        border-color: var(--navy);
        background: var(--white);
    }

.cr-daily-subject-icon {
    width: 32px;
    height: 32px;
    background: rgba(15,39,68,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.cr-daily-subject-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}

.cr-daily-subject-meta {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Free mock fresh banner (inline in card) ── */
.cr-mock-fresh-bar {
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 12px;
    color: #1d4ed8;
    font-weight: 600;
}

/* ========================================
   TEST ENGINE — cr-test.aspx
   ======================================== */

/* Full-page shell */
.cr-test-wrap {
    min-height: 100vh;
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
}

/* ── Header bar ── */
.cr-test-hdr {
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
}

.cr-test-hdr-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-test-hdr-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
}

.cr-test-hdr-marks {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255,255,255,0.50);
}

.cr-test-timer {
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: var(--radius-sm);
    letter-spacing: 1px;
    min-width: 90px;
    text-align: center;
}

    .cr-test-timer.warning {
        background: #c0392b;
    }

.cr-test-hdr-submit {
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

    .cr-test-hdr-submit:hover {
        background: var(--accent-dark);
    }

/* ── Section bar ── */
.cr-test-sec-bar {
    background: #1a3a6b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 36px;
    flex-shrink: 0;
}

.cr-test-sec-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-test-sec-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
}

.cr-test-sec-tabs {
    display: flex;
    gap: 3px;
}

.cr-test-sec-tab {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.60);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    border: none;
    cursor: default;
    white-space: nowrap;
}

    .cr-test-sec-tab.active {
        background: var(--accent);
        color: var(--white);
    }

.cr-test-sec-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
}

.cr-test-sec-timer {
    background: rgba(255,255,255,0.15);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    color: var(--white);
    font-size: 12px;
}

/* ── Body layout ── */
.cr-test-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.cr-test-main {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
}

/* ── Question card ── */
.cr-test-qcard {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 22px 26px;
    box-shadow: var(--shadow-sm);
}

.cr-test-qmeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cr-test-qnum {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
}

.cr-test-qbadges {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Difficulty badges */
.cr-diff-easy {
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-display);
}

.cr-diff-medium {
    background: #fef9c3;
    color: #854d0e;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-display);
}

.cr-diff-hard {
    background: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-display);
}

/* Mark for Review + Bookmark buttons */
.cr-test-flag-btn,
.cr-test-bookmark-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

    .cr-test-flag-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .cr-test-bookmark-btn:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

    .cr-test-flag-btn.flagged {
        border-color: var(--accent);
        color: var(--accent);
        background: #fffbf2;
    }

    .cr-test-bookmark-btn.saved {
        border-color: var(--navy);
        color: var(--navy);
        background: #e8f0fb;
    }

/* Question text */
.cr-test-qtext {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ── Options ── */
.cr-test-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.cr-test-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--white);
    transition: border-color 0.12s, background 0.12s;
    user-select: none;
}

    .cr-test-opt:hover {
        border-color: var(--navy);
        background: #f5f7fa;
    }

    .cr-test-opt.selected {
        border-color: var(--navy);
        background: #e8f0fb;
    }

.cr-test-opt-letter {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.cr-test-opt.selected .cr-test-opt-letter {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.cr-test-opt-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.5;
}

/* ── Nav row ── */
.cr-test-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cr-test-nav-prev {
    background: none;
    border: 1px solid var(--border);
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s;
}

    .cr-test-nav-prev:hover:not(:disabled) {
        border-color: var(--navy);
        color: var(--navy);
    }

    .cr-test-nav-prev:disabled {
        opacity: 0.35;
        cursor: default;
    }

.cr-test-nav-skip {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    padding: 8px 4px;
}

.cr-test-nav-next {
    background: var(--navy);
    color: var(--white);
    border: none;
    padding: 8px 22px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

    .cr-test-nav-next:hover {
        background: var(--navy-mid);
    }

/* ── Right sidebar ── */
.cr-test-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--white);
    border-left: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cr-test-sb-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Question grid dots */
.cr-test-qgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.cr-q-dot {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border);
    background: #f3f4f6;
    color: var(--text-muted);
    transition: opacity 0.1s;
}

    .cr-q-dot:hover {
        opacity: 0.80;
    }

    .cr-q-dot.answered {
        background: #dcfce7;
        color: #166534;
        border-color: #86efac;
    }

    .cr-q-dot.skipped {
        background: #fee2e2;
        color: #991b1b;
        border-color: #fca5a5;
    }

    .cr-q-dot.flagged {
        background: #fef9c3;
        color: #854d0e;
        border-color: #fde047;
    }

    .cr-q-dot.current {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
    }

/* Legend */
.cr-test-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.cr-test-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}

.cr-test-leg-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

    .cr-test-leg-dot.answered {
        background: #dcfce7;
        border: 1px solid #86efac;
    }

    .cr-test-leg-dot.skipped {
        background: #fee2e2;
        border: 1px solid #fca5a5;
    }

    .cr-test-leg-dot.flagged {
        background: #fef9c3;
        border: 1px solid #fde047;
    }

    .cr-test-leg-dot.unvisited {
        background: #f3f4f6;
        border: 1px solid var(--border);
    }

/* Stats grid in sidebar */
.cr-test-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cr-test-stat {
    background: var(--off-white);
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
}

.cr-test-stat-num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

    .cr-test-stat-num.green {
        color: #166534;
    }

    .cr-test-stat-num.red {
        color: #991b1b;
    }

    .cr-test-stat-num.amber {
        color: #854d0e;
    }

    .cr-test-stat-num.purple {
        color: #5b21b6;
    }

.cr-test-stat-lbl {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Submit button in sidebar */
.cr-test-sb-submit {
    width: 100%;
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 11px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: auto;
}

    .cr-test-sb-submit:hover {
        background: var(--accent-dark);
    }

/* ── Overlays (intro, section break, tab warning, submit confirm) ── */
.cr-test-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.cr-test-overlay-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    max-width: 520px;
    width: 90%;
    text-align: center;
}

    .cr-test-overlay-box h2 {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        color: var(--navy);
        margin-bottom: 10px;
    }

    .cr-test-overlay-box p {
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 8px;
    }

.cr-test-overlay-rules {
    text-align: left;
    background: var(--off-white);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin: 16px 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.8;
}

.cr-test-overlay-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .cr-test-sidebar {
        width: 220px;
    }
}

@media (max-width: 700px) {
    .cr-test-body {
        flex-direction: column;
    }

    .cr-test-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .cr-test-main {
        padding: 14px;
    }

    .cr-test-qcard {
        padding: 16px;
    }

    .cr-test-sec-tabs {
        display: none;
    }
}

/* ============================================================
   SECTION 3 -- shared components used across multiple cr-*.aspx
   pages. These consolidate rules that used to be copy-pasted
   into each page's own <style> block. A page may still add a
   small local override (e.g. .cr-modal's max-width for a wider
   form) -- since this file's <link> comes before each page's
   own <style> block, a page-local rule of equal specificity
   still wins by source order.
   ============================================================ */

/* --- CRUD modal (admin add/edit dialogs) --- */
.cr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    align-items: center;
    justify-content: center;
}
.cr-modal-overlay.open { display: flex; }
.cr-modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.cr-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cr-modal-head h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}
.cr-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--off-white);
    cursor: pointer;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.cr-modal-close:hover { background: var(--border); }
.cr-modal-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.cr-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* --- Admin form fields (used inside modals and inline forms) --- */
.cr-form-group { margin-bottom: 16px; }
.cr-form-group label {
    display: block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}
.cr-form-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-body);
    margin-top: 4px;
}

/* --- Reorder up/down button (admin list pages with manual ordering) --- */
.cr-order-btn {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 24px; height: 20px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 0;
}
.cr-order-btn:hover { background: var(--border); }

/* --- Admin/history data tables -- "compact" variant
   (Certificates, Subscriptions, Users) --- */
.cr-cert-table, .cr-sub-table, .cr-user-table {
    width: 100%;
    border-collapse: collapse;
}
.cr-cert-table th, .cr-sub-table th, .cr-user-table th {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cr-cert-table td, .cr-sub-table td, .cr-user-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-main);
    vertical-align: middle;
}
.cr-cert-table tr:last-child td, .cr-sub-table tr:last-child td, .cr-user-table tr:last-child td {
    border-bottom: none;
}
.cr-cert-table tr:hover td, .cr-sub-table tr:hover td, .cr-user-table tr:hover td {
    background: var(--off-white);
}

/* --- Admin/history data tables -- "spacious" variant
   (Reports, History) --- */
.cr-report-table, .cr-hist-table {
    width: 100%;
    border-collapse: collapse;
}
.cr-report-table th, .cr-hist-table th {
    background: var(--off-white);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.cr-report-table td, .cr-hist-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-main);
    vertical-align: middle;
}
.cr-report-table tr:last-child td, .cr-hist-table tr:last-child td {
    border-bottom: none;
}
.cr-report-table tr:hover td, .cr-hist-table tr:hover td {
    background: var(--off-white);
}

/* --- Disabled-state icon button (WebForms renders a disabled
   LinkButton as a plain span with aspNetDisabled auto-appended) --- */
.cr-icon-btn.aspNetDisabled {
    opacity: .35;
    cursor: not-allowed;
}

/* --- Dashboard-style page wrapper (Bookmarks, Certificates,
   Dashboard, History, Profile, Tests) --- */
.cr-dash-wrap {
    background: var(--off-white);
    min-height: 100vh;
}

/* --- Rich HTML content typography -- shared by the admin rich-text
   editor preview (.cr-rich-editor, on Content/Passages/Questions)
   and the public rendered output of that same content
   (.cr-rich-content, on Content/Practice/Results/Test). Both render
   the same sanitized allowlist HTML, just editable vs read-only. --- */
.cr-rich-content ul, .cr-rich-editor ul {
    list-style: disc outside;
    margin: 6px 0;
    padding-left: 22px;
}
.cr-rich-content ul li, .cr-rich-editor ul li { margin-bottom: 3px; }
.cr-rich-content .cr-tip-box {
    border: 1.5px solid #97C459;
    border-radius: 8px;
    padding: 10px 14px;
    background: #eaf3de;
    margin: 8px 0;
}
.cr-rich-content .cr-tip-box strong { color: #27500A; }
.cr-rich-content img { max-width: 100%; border-radius: 6px; }

/* Code blocks -- shared by every page that renders admin-authored
   rich content with a Code Block toolbar button (Content, Questions/
   Explanation/ShortcutMethod, Passages). The traffic-light header +
   Copy button chrome around .cr-code-block is built client-side (see
   the DOMContentLoaded wrapper each of those pages runs) rather than
   stored in the DB, so this file only needs to style whatever markup
   that script produces -- moved here from being duplicated per page
   so every page matches instead of drifting. */
.cr-rich-content .cr-code-block {
    background: #1e2a3a;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
}
.cr-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: #16202c;
}
.cr-code-dots { display: flex; gap: 6px; }
.cr-code-dots span { width: 11px; height: 11px; border-radius: 50%; display: block; }
.cr-code-dots span:nth-child(1) { background: #ff5f56; }
.cr-code-dots span:nth-child(2) { background: #ffbd2e; }
.cr-code-dots span:nth-child(3) { background: #27c93f; }
.cr-rich-content .cr-code-block pre {
    background: transparent;
    border-radius: 0;
    padding: 8px;
    overflow-x: auto;
    font-size: 15px;
    margin: 0;
}
.cr-rich-content .cr-code-block code {
    font-family: 'Courier New', Courier, monospace;
    color: #c9d6e3;
    line-height: 1.6;
}
.cr-code-copy-btn {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: #9fb3cc;
    background: transparent;
    border: 1px solid #35455a;
    border-radius: 5px;
    padding: 3px 10px;
    cursor: pointer;
}
.cr-code-copy-btn:hover { background: #1e2a3a; }
/* Fallback for any legacy pre/code saved before this feature existed
   and not yet re-wrapped by the client-side script (e.g. JS disabled)
   -- keeps them at least readable. */
.cr-rich-content pre {
    background: #1e2a3a;
    border-radius: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    font-size: 13px;
}
.cr-rich-content code {
    font-family: 'Courier New', Courier, monospace;
    color: #c9d6e3;
}

/* --- Math shorthand components -- generated at save time from
   \frac{}{}, \bracket{}/\paren{}/\brace{}, \sqrt{}/\sqrt[n]{}, ^{}, _{}
   typed into the admin Question/Explanation/ShortcutMethod editors (see
   ExpandMathShorthand in cr-admin-questions.aspx.vb). Static HTML,
   no client-side rendering step -- renders instantly and is fully
   crawlable, same reasoning as the rest of this rich-content block.
   Small/single-line brackets need no component at all -- the admin
   just types the literal ( ) { } [ ] character, which is already
   plain text. These three components are only for the *big*,
   height-stretching form used to wrap a fraction or multi-term sum. --- */
.cr-frac {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    font-size: 0.85em;
    line-height: 1.2;
    margin: 0 2px;
    padding-top: 2px;
}
.cr-frac-num { padding: 0 3px 1px; }
.cr-frac-den { padding: 1px 3px 0; border-top: 1.3px solid currentColor; }

/* \bracket{...} -- big square [ ] */
.cr-bracket {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    margin: 0 2px;
}
.cr-bracket-side {
    align-self: stretch;
    width: 5px;
    border-top: 1.3px solid currentColor;
    border-bottom: 1.3px solid currentColor;
}
.cr-bracket-side.l { border-left: 1.3px solid currentColor; }
.cr-bracket-side.r { border-right: 1.3px solid currentColor; }
.cr-bracket-content { display: inline-flex; align-items: center; padding: 0 4px; }

/* \paren{...} -- big round ( ). Same stretch mechanism as \bracket,
   but the side is a curved edge (border-radius elongated into an
   ellipse) instead of a square corner, and has no top/bottom cap. */
.cr-paren {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    margin: 0 2px;
}
.cr-paren-side {
    align-self: stretch;
    width: 6px;
}
.cr-paren-side.l {
    border-left: 1.3px solid currentColor;
    border-radius: 50% 0 0 50% / 8% 0 0 8%;
}
.cr-paren-side.r {
    border-right: 1.3px solid currentColor;
    border-radius: 0 50% 50% 0 / 0 8% 8% 0;
}
.cr-paren-content { display: inline-flex; align-items: center; padding: 0 4px; }

/* \brace{...} -- big curly { }. A curly brace isn't one curve --
   each side is two stacked quarter-curves meeting at a center point
   ("hook"), so it's built from a top half and bottom half per side,
   each bowing outward and meeting the opposite half in the middle. */
.cr-brace {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    margin: 0 2px;
}
.cr-brace-side {
    align-self: stretch;
    width: 7px;
    display: flex;
    flex-direction: column;
}
.cr-brace-side::before,
.cr-brace-side::after {
    content: "";
    display: block;
    flex: 1 1 50%;
    border: 1.3px solid currentColor;
}
.cr-brace-side.l::before {
    border-width: 1.3px 0 0 1.3px;
    border-radius: 100% 0 0 0;
}
.cr-brace-side.l::after {
    border-width: 0 0 1.3px 1.3px;
    border-radius: 0 0 0 100%;
}
.cr-brace-side.r::before {
    border-width: 1.3px 1.3px 0 0;
    border-radius: 0 100% 0 0;
}
.cr-brace-side.r::after {
    border-width: 0 1.3px 1.3px 0;
    border-radius: 0 0 100% 0;
}
.cr-brace-content { display: inline-flex; align-items: center; padding: 0 4px; }

/* A nested \sqrt{\sqrt{...}} needs each outer radical's overline to
   sit higher than the one it wraps (the "staircase" every textbook
   rendering has) -- a plain inline border-top can't do that, since
   inline boxes don't get pushed up by their children. Making
   .cr-sqrt-inner inline-flex with its own padding-top means each
   level of nesting adds real height above its child, so the parent's
   border-top is always at least that much higher than the nested
   sqrt's own border-top. */
.cr-sqrt { display: inline-flex; align-items: flex-end; white-space: nowrap; }
.cr-sqrt-idx { font-size: 0.6em; vertical-align: 60%; margin-right: -3px; align-self: flex-start; }
/* The radical tick is built from 3 straight strokes, matching how a
   real "√" is actually drawn: a small stroke that DESCENDS from
   upper-left down to a vertex, a longer stroke that ASCENDS from
   that same vertex up to the overline, and an "extender" that carries
   the ascend the rest of the way up when the overline sits higher
   than the fixed-size hook can reach on its own (i.e. whenever this
   \sqrt{} wraps something tall, like a nested \sqrt{} or \frac{}).
   Three strokes need 3 elements, but a node only has 2 pseudo-element
   slots -- .cr-sqrt-desc (the descend stroke) is therefore a real
   child span emitted alongside .cr-sqrt-sym, not a 3rd pseudo-element.
   "visibility: hidden" on .cr-sqrt-sym (not color/font-size) hides the
   literal "√" text this replaces -- unlike those, it doesn't disturb
   em-based sizing or currentColor, and a descendant can always opt
   back into "visibility: visible" even under a hidden ancestor.
   EXTENDER (::before): a plain, untransformed vertical border-right.
   Its top point is trivially the box's own top-right corner -- the
   same corner "right:0" already positions to coincide with the
   overline's start -- so it touches the overline at ANY nesting
   depth with no angle/height math at all, nothing to get wrong.
   ASCEND (::after) and DESCEND (.cr-sqrt-desc) are short, FIXED-size
   rotated bars (real radical hooks don't scale with nesting depth
   either) using transform-origin: right center so each bar's own
   right-center point is a stable, unrotated anchor -- ascend's
   anchor is pinned to the extender's bottom point, and descend's
   anchor is pinned to ascend's free (rotated) end, both tuned to a
   sub-0.1px join. All 3 joins plus both stroke directions were
   verified analytically (computing each free end from its true,
   un-rotated anchor + rotation trig, not the misleading bounding-box
   of the rotated shape) across 5 nesting depths before landing here. */
.cr-sqrt-sym {
    position: relative;
    display: inline-block;
    width: 0.42em;
    align-self: stretch;
    visibility: hidden;
}
.cr-sqrt-sym::before {
    content: "";
    visibility: visible;
    position: absolute;
    top: 0;
    bottom: 0.29em;
    right: 0;
    border-right: 1.3px solid currentColor;
}
.cr-sqrt-sym::after {
    content: "";
    visibility: visible;
    position: absolute;
    bottom: 0.32em;
    right: 0;
    width: 0.6em;
    height: 1.3px;
    background: currentColor;
    transform: rotate(32deg);
}
.cr-sqrt-desc {
    position: absolute;
    bottom: 0.07em;
    right: 0.36em;
    width: 0.22em;
    height: 1.3px;
    background: currentColor;
    transform-origin: right center;
    transform: rotate(-35deg);
}
.cr-sqrt-inner {
    display: inline-flex;
    align-items: flex-end;
    border-top: 1.3px solid currentColor;
    padding: 2px 3px 0 2px;
}
.cr-sup { vertical-align: super; font-size: 0.75em; }
.cr-sub { vertical-align: sub; font-size: 0.75em; }

/* --- Rich-text editor + toolbar (admin Content/Passages/Questions) --- */
.cr-rich-editor {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-main);
    outline: none;
    line-height: 1.6;
}
.cr-rich-editor:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(15,39,68,0.08);
}
.cr-rich-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.cr-rich-btn {
    background: var(--white);
    border: 1.5px solid var(--border);
    color: var(--navy);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11px;
    font-family: var(--font-body);
    cursor: pointer;
}
.cr-rich-btn:hover { background: var(--off-white); }
.cr-formula-pop {
    display: none;
    position: absolute;
    z-index: 50;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    width: 260px;
    box-shadow: var(--shadow-lg);
}
.cr-formula-pop select,
.cr-formula-pop input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 8px;
}
.cr-formula-pop-row { display: flex; gap: 8px; }