/* ---------------------------------------------------------------------------
   SimPHY frontend styles
   Brand palette (from logo): orange + navy blue, on white & black.
   --------------------------------------------------------------------------- */

:root {
    --sp-orange: #f5821f;      /* logo "Sim" + wheel */
    --sp-orange-dark: #d96f10; /* hover */
    --sp-navy: #17457a;        /* logo "phy" + tagline */
    --sp-navy-dark: #0f2f52;   /* nav / footer background */
    --sp-black: #111418;
    --sp-white: #ffffff;
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--sp-black);
    background: var(--sp-white);
    overflow-x: hidden;   /* stop stray horizontal overflow, keep vertical scroll */
}

/* Brand-colour helpers — also remap Bootstrap's warning/primary to brand colours
   so existing utility classes pick up the theme automatically. */
.text-orange,
.text-warning { color: var(--sp-orange) !important; }
.text-navy,
.text-primary { color: var(--sp-navy) !important; }

.btn-warning,
.btn-orange {
    background-color: var(--sp-orange);
    border-color: var(--sp-orange);
    color: #fff;
}
.btn-warning:hover,
.btn-orange:hover {
    background-color: var(--sp-orange-dark);
    border-color: var(--sp-orange-dark);
    color: #fff;
}
.btn-outline-light:hover { color: var(--sp-navy); }

/* Top utility bar */
.topbar {
    background: var(--sp-navy-dark);
    color: #eef2f8;
    font-size: .85rem;
    padding: .5rem 0;
}
.topbar a { color: #eef2f8; text-decoration: none; transition: color .15s ease; }
.topbar a:hover { color: var(--sp-orange); }
.topbar-info i { color: var(--sp-orange); }
.topbar-info a { margin-right: 1.75rem; }
.topbar-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.08); margin-left: .35rem;
}
.topbar-socials a:hover { background: var(--sp-orange); color: #fff; }

/* Navbar */
.main-nav {
    background: var(--sp-white);
    padding-top: .7rem;
    padding-bottom: .7rem;
    box-shadow: 0 .2rem .8rem rgba(15,47,82,.07);
}
.main-nav .navbar-brand { padding: 0; }
.main-nav .brand-logo { height: 46px; width: auto; }
.main-nav .nav-link {
    position: relative;
    color: var(--sp-navy); font-weight: 600;
    padding: .5rem 1.05rem;
}
.main-nav .nav-link::before {
    content: ''; position: absolute; left: 1.05rem; right: 1.05rem; bottom: .3rem;
    height: 2px; background: var(--sp-orange);
    transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.main-nav .nav-link:hover::before,
.main-nav .nav-link.active::before { transform: scaleX(1); }
.main-nav .nav-link:hover,
.main-nav .nav-link.active { color: var(--sp-orange); }
/* keep Bootstrap's dropdown caret arrow visible + rotate on open */
.main-nav .dropdown-toggle::after {
    vertical-align: middle; margin-left: .4rem;
    transition: transform .2s ease;
}
.main-nav .nav-item.dropdown:hover .dropdown-toggle::after { transform: rotate(180deg); }
.main-nav .dropdown-menu {
    border: none; border-radius: .7rem; padding: .5rem;
    box-shadow: 0 .8rem 1.8rem rgba(15,47,82,.15);
}
.main-nav .dropdown-item { border-radius: .45rem; font-weight: 500; padding: .5rem .9rem; }
.main-nav .dropdown-item:hover { background: rgba(245,130,31,.1); color: var(--sp-orange); }

/* Open Resources dropdown on hover (desktop only) */
@media (min-width: 992px) {
    .main-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        animation: dropFade .18s ease;
    }
    /* invisible bridge so the menu doesn't close in the gap */
    .main-nav .nav-item.dropdown > .dropdown-menu { margin-top: .6rem; }
    .main-nav .nav-item.dropdown > .dropdown-menu::before {
        content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem;
    }
    @keyframes dropFade {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Cart */
.nav-cart {
    position: relative;
    color: var(--sp-navy); font-size: 1.15rem;
    text-decoration: none; transition: color .15s ease;
}
.nav-cart:hover { color: var(--sp-orange); }

/* Login link (next to Buy Pro) */
.nav-login {
    color: var(--sp-navy); font-size: 1.15rem;
    text-decoration: none;
    display: inline-flex; align-items: center;
    transition: color .15s ease;
}
.nav-login:hover { color: var(--sp-orange); }
.cart-badge {
    position: absolute; top: -8px; right: -10px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 40px; background: var(--sp-orange);
    color: #fff; font-size: .68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Buy Pro button */
.btn-buypro {
    background: linear-gradient(135deg, var(--sp-orange), #ff9d3f);
    color: #fff; font-weight: 600;
    border: none; border-radius: 40px;
    padding: .55rem 1.4rem;
    box-shadow: 0 .5rem 1rem rgba(245,130,31,.3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-buypro:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 .7rem 1.4rem rgba(245,130,31,.42); }

/* Hero */
.hero {
    background:
        radial-gradient(900px 500px at 78% 12%, rgba(23,69,122,.55), transparent 60%),
        linear-gradient(135deg, #0b1a2e 0%, var(--sp-black) 100%);
    padding: 5.5rem 0 6rem;
    position: relative;
    overflow: hidden;
}

/* Left copy */
.hero-badge {
    display: inline-block;
    padding: .45rem 1rem;
    border-radius: 40px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #cdd6e4;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}
.hero-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.5px;
    margin-bottom: 1.25rem;
}
.hero-grad {
    background: linear-gradient(90deg, var(--sp-orange), #ffb35c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-sub {
    color: #aeb8ca;
    font-size: 1.12rem;
    max-width: 30rem;
    margin-bottom: 2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-hero-light,
.btn-hero-light:hover,
.btn-hero-light:focus,
.btn-hero-light:active {
    background: #fff;
    color: var(--sp-navy-dark) !important;
    font-weight: 600; border-radius: 40px; padding: .8rem 2rem;
    border: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-hero-light:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(255,255,255,.22); }
.btn-hero-outline,
.btn-hero-outline:hover,
.btn-hero-outline:focus,
.btn-hero-outline:active {
    background: transparent;
    color: #fff !important;
    font-weight: 600; border-radius: 40px; padding: .8rem 2rem;
    border: 1px solid rgba(255,255,255,.35);
    transition: all .15s ease;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Hero carousel controls */
#heroCarousel { position: relative; padding-bottom: 3.5rem; }
.hero-content { padding-bottom: .5rem; }

#heroCarousel .carousel-indicators {
    left: 0; right: auto; bottom: 0; margin: 0;
    justify-content: flex-start; gap: .5rem;
}
#heroCarousel .carousel-indicators [data-bs-target] {
    width: 9px; height: 9px; border-radius: 40px;
    background: rgba(255,255,255,.28); border: 0; opacity: 1;
    text-indent: 0; margin: 0; transition: width .2s ease;
}
#heroCarousel .carousel-indicators .active { width: 26px; background: #fff; }

#heroCarousel .hero-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    top: auto; bottom: 0; opacity: 1;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}
#heroCarousel .carousel-control-prev.hero-arrow { left: auto; right: 3.6rem; }
#heroCarousel .carousel-control-next.hero-arrow { right: 0; left: auto; }
#heroCarousel .hero-arrow i { color: #fff; font-size: .95rem; }
#heroCarousel .hero-arrow:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* Right: hero image inside a Mac browser window */
.hero-figure {
    border-radius: .9rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 2rem 4rem rgba(0,0,0,.5);
    background: #12233b;
}
.browser-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem 1rem;
    background: linear-gradient(#243651, #1a2c46);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.browser-url {
    margin: 0 auto;
    min-width: 180px; max-width: 300px;
    background: rgba(255,255,255,.08);
    color: #aab4c6;
    font-size: .78rem;
    padding: .3rem 1rem;
    border-radius: 40px;
    text-align: center;
}
.browser-body { overflow: hidden; line-height: 0; }
.browser-body img {
    display: block; width: 100%;
    aspect-ratio: 16 / 10; object-fit: cover;
    transition: transform .5s ease;
}
.hero-figure:hover .browser-body img { transform: scale(1.04); }

/* ---- Hero animation (physics orbit scene) ---- */
.hero-anim {
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 42%, #133463 0%, #0a1a30 68%);
    line-height: normal;
}
/* faint physics grid */
.hero-anim::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 85%);
}
.orbit-system { position: relative; width: 62%; max-width: 300px; aspect-ratio: 1; }

.nucleus {
    position: absolute; top: 50%; left: 50%;
    width: 17%; aspect-ratio: 1; margin: 0; translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffcf9a, var(--sp-orange) 70%);
    box-shadow: 0 0 24px rgba(245,130,31,.85), 0 0 55px rgba(245,130,31,.4);
    animation: nucPulse 2.6s ease-in-out infinite;
}
@keyframes nucPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }

.orbit {
    position: absolute; top: 50%; left: 50%;
    border: 1.5px solid rgba(120,170,235,.35);
    border-radius: 50%;
    translate: -50% -50%;
}
.orbit .electron {
    position: absolute; top: -6px; left: 50%; margin-left: -6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #6fb6ff;
    box-shadow: 0 0 12px #6fb6ff, 0 0 22px rgba(111,182,255,.6);
}
.orbit-1 { width: 45%; height: 45%; animation: orbitSpin 3.2s linear infinite; }
.orbit-2 { width: 72%; height: 72%; animation: orbitSpin 6s linear infinite reverse; }
.orbit-3 { width: 100%; height: 100%; animation: orbitSpin 9s linear infinite; }
.orbit-2 .electron { background: var(--sp-orange); box-shadow: 0 0 12px var(--sp-orange), 0 0 22px rgba(245,130,31,.6); }
.orbit-3 .electron { background: #b98bff; box-shadow: 0 0 12px #b98bff, 0 0 22px rgba(185,139,255,.6); }
@keyframes orbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* floating particles */
.p-float {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.55);
    animation: floaty 6s ease-in-out infinite;
}
.p-float.p1 { width: 6px; height: 6px; top: 18%; left: 14%; animation-delay: 0s; }
.p-float.p2 { width: 4px; height: 4px; top: 30%; right: 12%; background: rgba(245,130,31,.7); animation-delay: 1s; }
.p-float.p3 { width: 5px; height: 5px; bottom: 24%; left: 20%; background: rgba(111,182,255,.7); animation-delay: 2s; }
.p-float.p4 { width: 7px; height: 7px; bottom: 30%; right: 18%; animation-delay: .5s; }
.p-float.p5 { width: 4px; height: 4px; top: 50%; left: 8%; background: rgba(245,130,31,.6); animation-delay: 1.5s; }
.p-float.p6 { width: 5px; height: 5px; top: 14%; right: 26%; background: rgba(185,139,255,.7); animation-delay: 2.5s; }
@keyframes floaty {
    0%,100% { transform: translateY(0); opacity: .4; }
    50%     { transform: translateY(-16px); opacity: 1; }
}

/* Scene 2 — circuit with flowing current */
.scene-circuit { width: 80%; max-width: 330px; height: auto; overflow: visible; }
.circuit-current {
    filter: drop-shadow(0 0 6px var(--sp-orange));
    animation: currentFlow 2.4s linear infinite;
}
@keyframes currentFlow { to { stroke-dashoffset: -386; } }
.circuit-node { fill: rgba(120,170,235,.55); }
.circuit-bulb {
    fill: #ffcf9a;
    transform-origin: center;
    animation: bulbGlow 2.4s ease-in-out infinite;
}
@keyframes bulbGlow {
    0%, 100% { fill: #6f5334; filter: drop-shadow(0 0 2px rgba(245,130,31,.35)); }
    50%      { fill: #ffcf9a; filter: drop-shadow(0 0 14px rgba(245,130,31,1)); }
}

/* Scene 3 — swinging pendulum */
.scene-pendulum { position: relative; width: 70%; max-width: 300px; aspect-ratio: 1; }
.pend-beam {
    position: absolute; top: 15%; left: 14%; right: 14%; height: 6px;
    border-radius: 4px; background: rgba(120,170,235,.5);
}
.pend-arm {
    position: absolute; top: 16%; left: 50%;
    width: 3px; height: 46%;
    background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.15));
    transform-origin: top center;
    animation: swing 2.6s ease-in-out infinite;
}
.pend-arm .bob {
    position: absolute; bottom: -18px; left: 50%; translate: -50% 0;
    width: 38px; height: 38px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffcf9a, var(--sp-orange) 70%);
    box-shadow: 0 0 22px rgba(245,130,31,.7);
}
@keyframes swing { 0%, 100% { transform: rotate(40deg); } 50% { transform: rotate(-40deg); } }

/* Scene 4 — concentric charged conducting shells (electrostatics) */
.scene-field { width: 94%; max-width: 370px; height: auto; overflow: visible; }
.scene-field .shell-ring {
    fill: none;
    stroke: var(--sp-orange);
    stroke-width: 4;
    filter: drop-shadow(0 0 6px rgba(245,130,31,.45));
}
.scene-field .field-halo {
    transform-box: fill-box; transform-origin: center;
    animation: fieldPulse 3s ease-in-out infinite;
}
@keyframes fieldPulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
.scene-field .gauss-ring {
    fill: none;
    stroke: rgba(120,170,235,.5);
    stroke-width: 1.4;
    stroke-dasharray: 5 9;
    transform-origin: 122px 100px;
    animation: gaussSpin 20s linear infinite;
}
@keyframes gaussSpin { to { transform: rotate(360deg); } }
.scene-field .field-line {
    stroke: rgba(120,170,235,.6);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 3 6;
    filter: drop-shadow(0 0 3px rgba(111,182,255,.5));
    animation: fieldFlow 1.3s linear infinite;
}
@keyframes fieldFlow { to { stroke-dashoffset: -18; } }
.scene-field .charge { animation: chargeTwinkle 3.2s ease-in-out infinite; }
.scene-field .charge circle { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.scene-field .charge.pos circle { fill: #e23b2e; }
.scene-field .charge.neg circle { fill: #2f74e0; }
.scene-field .charge text {
    fill: #fff; text-anchor: middle;
    font: 700 9px/1 'Inter', system-ui, sans-serif;
}
@keyframes chargeTwinkle { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.scene-field .field-label {
    fill: #eaf1ff; text-anchor: middle;
    font: 700 12px/1 'Inter', system-ui, sans-serif;
    paint-order: stroke; stroke: rgba(6,14,28,.85); stroke-width: 2.4;
}
.scene-field .field-label.sm { font-size: 10.5px; }
.scene-field .field-readout rect { fill: #0b1220; stroke: rgba(255,255,255,.16); }
.scene-field .field-readout text { font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; }
.scene-field .field-readout .rd-e { fill: #ffb266; }
.scene-field .field-readout .rd-v { fill: #7fb2ff; }

/* Scene 5 — inclined plane: spring-mass SHM + pulley */
.scene-incline { width: 96%; max-width: 380px; height: auto; overflow: visible; }
.scene-incline .inc-spring {
    transform-box: fill-box; transform-origin: left center;
    animation: incSpring 3s ease-in-out infinite;
}
@keyframes incSpring { 0%, 100% { transform: scaleX(.864); } 50% { transform: scaleX(1.136); } }
.scene-incline .inc-block { animation: incSHM 3s ease-in-out infinite; }
@keyframes incSHM { 0%, 100% { transform: translateX(-12px); } 50% { transform: translateX(12px); } }
.scene-incline .hang-block { animation: incHang 3s ease-in-out infinite; }
@keyframes incHang { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
.scene-incline .plot-scroll { animation: incPlot 4s linear infinite; }
@keyframes incPlot { to { transform: translateX(-108px); } }
.scene-incline .inc-lbl {
    text-anchor: middle;
    font: 700 7px/1 'Inter', system-ui, sans-serif;
    paint-order: stroke; stroke: rgba(6,14,28,.9); stroke-width: 2;
}
.scene-incline .inc-lbl.n { fill: #6aa8ff; }
.scene-incline .inc-lbl.o { fill: #f5a35a; }
.scene-incline .inc-lbl.g { fill: #46cf7b; }
.scene-incline .inc-lbl.b { fill: #8f99a7; }
.scene-incline .inc-lbl.s { fill: #c3cbd6; }
.scene-incline .inc-lbl.dim { fill: #cdd6e4; font-size: 6px; text-anchor: start; }
.scene-incline .mech-readout rect { fill: #0b1220; stroke: rgba(255,255,255,.16); }
.scene-incline .mech-readout text { font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; }
.scene-incline .mech-readout .rd-n { fill: #6aa8ff; }
.scene-incline .mech-readout .rd-g { fill: #46cf7b; }
.scene-incline .mech-readout .rd-b { fill: #ffb266; }

/* Scene 6 — vernier caliper */
.scene-vernier { width: 98%; max-width: 400px; height: auto; overflow: visible; }
.scene-vernier .v-tick { stroke: #2b3542; stroke-width: 1; }
.scene-vernier .v-num { fill: #2b3542; text-anchor: middle; font: 700 7px/1 'Inter', system-ui, sans-serif; }
.scene-vernier .v-vnum { fill: #b3450a; text-anchor: middle; font: 700 6px/1 'Inter', system-ui, sans-serif; }
.scene-vernier .vernier-slider { animation: vernierSlide 6s ease-in-out infinite; }
@keyframes vernierSlide {
    0%, 100% { transform: translateX(0); }
    40%      { transform: translateX(-60px); }
    60%      { transform: translateX(-60px); }
}
.scene-vernier .vernier-readout rect { fill: #0b1220; stroke: rgba(255,255,255,.16); }
.scene-vernier .vernier-readout text { font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; }
.scene-vernier .vernier-readout .rd-a { fill: #ffb266; }
.scene-vernier .vernier-readout .rd-b { fill: #7fb2ff; }

@media (prefers-reduced-motion: reduce) {
    .nucleus, .orbit, .p-float, .circuit-current, .circuit-bulb, .pend-arm,
    .scene-field .field-halo, .scene-field .gauss-ring, .scene-field .charge,
    .scene-field .field-line, .scene-incline .inc-spring, .scene-incline .inc-block,
    .scene-incline .hang-block, .scene-incline .plot-scroll,
    .scene-vernier .vernier-slider { animation: none !important; }
}

/* Right: app mockup (legacy, unused) */
.hero-mockup {
    background: rgba(18,29,48,.85);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 1rem;
    box-shadow: 0 2rem 4rem rgba(0,0,0,.45);
    overflow: hidden;
}
.mockup-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.m-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.m-dot.red { background: #ff5f56; }
.m-dot.yellow { background: #ffbd2e; }
.m-dot.green { background: #27c93f; }
.mockup-url {
    margin-left: .75rem;
    background: rgba(255,255,255,.06);
    color: #9aa6ba;
    font-size: .8rem;
    padding: .3rem .9rem;
    border-radius: 40px;
}
.mockup-body { padding: 1.25rem; }
.mockup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-bottom: 1rem; }
.stat-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .7rem;
    padding: 1rem;
}
.stat-ico { font-size: 1.3rem; margin-bottom: .5rem; }
.stat-num { font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1; }
.stat-lbl { font-size: .78rem; color: #97a3b8; margin-top: .3rem; }

.mockup-chart {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .7rem;
    padding: 1.1rem;
}
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.chart-head > span:first-child { color: #cdd6e4; font-size: .9rem; font-weight: 600; }
.chart-trend { color: #27c93f; font-size: .82rem; font-weight: 600; }
.chart-bars { display: flex; align-items: flex-end; gap: .55rem; height: 120px; }
.chart-bars span {
    flex: 1;
    border-radius: .35rem .35rem 0 0;
    background: linear-gradient(180deg, #dfe6f2, rgba(223,230,242,.15));
}

/* Section titles */
.section-title { font-weight: 700; color: var(--sp-black); }
.section-title .text-primary { color: var(--sp-navy) !important; }

/* Section head with slider arrows */
.sim-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.sim-head .section-title { max-width: 720px; }
.sim-nav { display: flex; gap: .5rem; }
.sim-arrow {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid #d8dce6; background: #fff; color: var(--sp-navy);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.sim-arrow:hover { background: var(--sp-navy); color: #fff; border-color: var(--sp-navy); }

/* Horizontal scroller — 4 cards per row */
.sim-scroller {
    display: flex; flex-wrap: nowrap; gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .25rem .25rem 1rem;
    scrollbar-width: none; -ms-overflow-style: none;
}
.sim-scroller::-webkit-scrollbar { display: none; }
.sim-slide { flex: 0 0 calc((100% - 4.5rem) / 4); scroll-snap-align: start; }
@media (max-width: 991.98px) { .sim-slide { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575.98px)  { .sim-slide { flex-basis: 82%; } }

.sim-more {
    display: inline-block; color: var(--sp-orange);
    font-weight: 600; font-size: .85rem;
    opacity: 0; transform: translateX(-4px); transition: all .2s ease;
}
.sim-card:hover .sim-more { opacity: 1; transform: translateX(0); }

/* Simulator / recommended cards */
.sim-card {
    border: 1px solid #eef0f5;
    border-radius: .8rem;
    overflow: hidden;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.sim-card:hover { transform: translateY(-6px); box-shadow: 0 1rem 2rem rgba(23,69,122,.15); }
.sim-visual {
    aspect-ratio: 16 / 10;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    background: #eef1f6;
}
/* real image tiles (Innovative Simulator) */
.sim-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sim-card:hover .sim-visual img { transform: scale(1.06); }

/* icon tiles (Recommended) */
.sim-visual.dark { background: linear-gradient(135deg, #1d4b7d, #0f2f52); }
.sim-visual.dark::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.15) 1.5px, transparent 1.6px);
    background-size: 18px 18px; opacity: .5;
}
.sim-visual.dark::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 85% at 22% 12%, rgba(255,255,255,.22), transparent 55%);
}
.sim-ico {
    position: relative; z-index: 1;
    width: 80px; height: 80px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    color: #cfe0f2; font-size: 2.1rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.sim-card:hover .sim-ico {
    transform: translateY(-5px) scale(1.06);
    box-shadow: 0 18px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.sim-card .card-title a { transition: color .15s ease; }
.sim-card:hover .card-title a { color: var(--sp-orange) !important; }

/* Cards */
.feature-card {
    border: 1px solid #eef0f5;
    border-radius: .6rem;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .8rem 1.6rem rgba(23,69,122,.15);
}
.card-img-wrap {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f8;
}
.card-img-wrap.dark { background: var(--sp-navy-dark); }
.card-img-wrap img { max-width: 100%; max-height: 100%; object-fit: cover; }
.feature-card .card-title a:hover { color: var(--sp-orange) !important; }

/* Feature icons (legacy) */
.feature-icon {
    width: 70px; height: 70px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(245,130,31,.12);
    color: var(--sp-orange);
    font-size: 1.6rem;
}

/* Better Tools — feature cards */
.features-section { background: #f8f9fc; }
.why-simphy {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--sp-navy);                     /* WHY — navy */
    margin-bottom: .25rem;
}
.why-simphy .accent { color: var(--sp-orange); }  /* SIMPHY — orange */
.eyebrow {
    display: inline-block;
    color: var(--sp-orange);
    font-weight: 700; font-size: .78rem;
    letter-spacing: 3px; text-transform: uppercase;
}
.feature-box {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 1.25rem;
    padding: 3rem 2rem;
    text-align: center; height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 1.4rem 2.8rem rgba(23,69,122,.14);
    border-color: #e2e6ef;
}
.feature-badge {
    width: 104px; height: 104px; border-radius: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 2.7rem; margin-bottom: 1.6rem;
    box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.18);
    transition: transform .25s ease;
}
.feature-box:hover .feature-badge { transform: translateY(-5px) rotate(-4deg); }
.feature-title { font-weight: 700; font-size: 1.4rem; margin-bottom: .7rem; }

/* How it works — 4-step overview cards (navy square icon, centred copy) */
.how-section { background: #fff; }
.how-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    height: 100%; padding: 2.75rem 1.75rem;
    background: #fff; border: 1px solid #eef0f5;
    box-shadow: 0 .6rem 1.8rem rgba(15,47,82,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.how-card:hover { transform: translateY(-6px); box-shadow: 0 1.2rem 2.4rem rgba(23,69,122,.13); }
.how-icon {
    display: grid; place-items: center; width: 86px; height: 86px; margin-bottom: 1.5rem;
    background: var(--sp-navy); color: #fff; font-size: 2.05rem;
    box-shadow: 0 .7rem 1.4rem rgba(15,47,82,.22);
}
.how-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--sp-navy-dark); margin-bottom: .6rem; }
.how-desc { color: #6b7688; font-size: .95rem; line-height: 1.6; }
[data-bs-theme="dark"] .how-section { background: var(--dk-surface-2); }
[data-bs-theme="dark"] .how-card { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: none; }
[data-bs-theme="dark"] .how-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .how-desc { color: #9aa7bd; }

/* Stats band */
.stats-band {
    position: relative; overflow: hidden;
    padding: 3.5rem 0;
    background:
        radial-gradient(900px 360px at 50% -20%, rgba(245,130,31,.10), transparent 60%),
        linear-gradient(135deg, var(--sp-navy), var(--sp-navy-dark));
}
.stat-box {
    height: 100%;
    padding: 2rem 1.25rem;
    border-radius: 1rem;
    /* semi-opaque dark panel → uniform look regardless of glow behind */
    background: rgba(9, 24, 44, .5);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 .9rem 1.8rem rgba(0,0,0,.22);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.stat-box:hover {
    transform: translateY(-6px);
    border-color: rgba(245,130,31,.5);
    background: rgba(13, 32, 56, .6);
}
.stat-badge {
    width: 66px; height: 66px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: var(--sp-orange); font-size: 1.5rem; margin-bottom: 1.1rem;
}
.stat-value { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; line-height: 1; }
.stat-label {
    margin-top: .55rem; text-transform: uppercase;
    letter-spacing: 2px; font-size: .78rem; color: #c7d3e4;
}
@media (max-width: 767.98px) { .stat-col + .stat-col::before { display: none; } }

/* Simulations showcase — tabs + cards */
.sims-showcase { background: #f8f9fc; }
.sim-tabs { gap: .6rem; border: none; flex-wrap: wrap; }
.sim-tab {
    border: 1px solid #dfe3ec;
    background: #fff;
    color: var(--sp-navy);
    font-weight: 600; font-size: .95rem;
    padding: .6rem 1.5rem; border-radius: 40px;
    transition: all .18s ease;
}
.sim-tab:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
.sim-tab.active {
    background: linear-gradient(135deg, var(--sp-orange), #ff9d3f);
    border-color: transparent; color: #fff;
}

.showcase-card {
    border: 1px solid #eef0f5;
    border-radius: .9rem;
    overflow: hidden; background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.showcase-card:hover { transform: translateY(-6px); box-shadow: 0 1.1rem 2.2rem rgba(23,69,122,.15); }
.showcase-visual {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden; background: #0f2136;
}
.showcase-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.showcase-card:hover .showcase-visual img { transform: scale(1.07); }
.showcase-play {
    position: absolute; inset: 0; margin: auto;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245,130,31,.92); color: #fff; font-size: 1.2rem;
    opacity: 0; transform: scale(.8);
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.35);
}
.showcase-card:hover .showcase-play { opacity: 1; transform: scale(1); }
.showcase-card .card-title a:hover { color: var(--sp-orange) !important; }

/* Testimonials */
.testimonials {
    position: relative; overflow: hidden;
    padding: 4.5rem 0 5rem;
    background:
        radial-gradient(800px 400px at 15% 10%, rgba(245,130,31,.10), transparent 60%),
        radial-gradient(800px 400px at 90% 95%, rgba(23,69,122,.5), transparent 65%),
        linear-gradient(135deg, #0b1a2e, var(--sp-black));
}
.testi-sub { color: #9aa8bd; font-size: 1.05rem; }
.testi-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap;
}
.testi-arrow {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.25);
    color: #fff;
}
.testi-arrow:hover {
    background: var(--sp-orange);
    border-color: var(--sp-orange);
    color: #fff;
}

/* Scroller */
.testi-scroller {
    display: flex; flex-wrap: nowrap; gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 1.75rem .25rem 1rem;
    scrollbar-width: none; -ms-overflow-style: none;
}
.testi-scroller::-webkit-scrollbar { display: none; }
.testi-slide { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; }
@media (max-width: 991.98px) { .testi-slide { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575.98px)  { .testi-slide { flex-basis: 88%; } }

.testi-card {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    padding: 2.25rem 1.75rem 1.75rem;
    border-radius: 1.1rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1rem 2rem rgba(0,0,0,.3);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.testi-card:hover { transform: translateY(-5px); border-color: rgba(245,130,31,.4); background: rgba(255,255,255,.07); }
.testi-quote-mark {
    position: absolute; top: -22px; left: 1.75rem;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-orange), #ff9d3f);
    color: #fff; font-size: 1.05rem;
    box-shadow: 0 .6rem 1.2rem rgba(245,130,31,.4);
}
.testi-text {
    font-size: .97rem; line-height: 1.7;
    color: #d3dcea; margin: .5rem 0 1.5rem;
}
.testi-person {
    display: flex; align-items: center; gap: .85rem; margin-top: auto;
    padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.08);
}
.testi-person > .text-start { min-width: 0; }   /* allow long role to wrap, not overflow */
.testi-avatar, .testi-avatar-img {
    width: 52px; height: 52px; border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.25);
}
.testi-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-navy), #1d6fb8);
    color: #fff; font-weight: 700; font-size: 1.2rem;
}
.testi-avatar-img { object-fit: cover; background: #fff; }
.testi-name { color: var(--sp-orange); font-weight: 700; font-size: .98rem; line-height: 1.25; }
.testi-role { color: #c3cee0; font-size: .82rem; line-height: 1.35; margin-top: .15rem; }

/* Newsletter */
.newsletter { background: #f8f9fc; padding: 4rem 0; }
.newsletter-card {
    position: relative; overflow: hidden;
    border-radius: 1.5rem;
    padding: 3rem;
    background:
        radial-gradient(500px 300px at 92% -20%, rgba(245,130,31,.28), transparent 60%),
        linear-gradient(135deg, var(--sp-navy), var(--sp-navy-dark));
    box-shadow: 0 1.5rem 3rem rgba(15,47,82,.25);
}
.newsletter-head { display: flex; align-items: center; gap: 1rem; }
.newsletter-badge {
    flex-shrink: 0;
    width: 58px; height: 58px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-orange), #ff9d3f);
    color: #fff; font-size: 1.5rem;
    box-shadow: 0 .6rem 1.2rem rgba(245,130,31,.4);
}
.newsletter-title { color: #fff; font-weight: 800; font-size: 1.9rem; margin-bottom: .5rem; }
.newsletter-sub { color: #b7c2d4; }
.newsletter-form { display: flex; gap: .75rem; }
.newsletter-input {
    flex: 1; display: flex; align-items: center; gap: .5rem;
    background: #fff; border-radius: 40px; padding: 0 1.2rem;
}
.newsletter-input i { color: #9aa6ba; }
.newsletter-input input {
    border: none; outline: none; background: transparent;
    padding: .9rem .25rem; width: 100%; font-size: .95rem; color: #2c3345;
}
.newsletter-btn { border-radius: 40px; padding: .9rem 2rem; white-space: nowrap; font-weight: 600; }
.newsletter-note { display: block; color: #96a2b6; margin-top: .8rem; font-size: .8rem; }
.newsletter-msg { display: block; margin-top: .8rem; font-size: .85rem; font-weight: 500; }
.newsletter-msg.is-success { color: #7ee2a8; }
.newsletter-msg.is-error { color: #ffb4a8; }
@media (max-width: 575.98px) {
    .newsletter-card { padding: 2rem 1.5rem; }
    .newsletter-form { flex-direction: column; }
}

/* Footer */
.site-footer { background: var(--sp-navy-dark); color: #aab6ca; padding-top: 3.5rem; }
.footer-logo { height: 42px; margin-bottom: 1.1rem; }
.footer-about { color: #aab6ca; font-size: .9rem; line-height: 1.7; }
.footer-heading {
    color: #fff; margin-bottom: 1.1rem; font-size: .95rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { color: #aab6ca; text-decoration: none; transition: color .15s ease, padding-left .15s ease; }
.footer-links a:hover { color: var(--sp-orange); padding-left: .3rem; }
.footer-contact { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.footer-contact li { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.footer-contact i { color: var(--sp-orange); width: 18px; }
.footer-contact a { color: #cdd6e2; text-decoration: none; }
.footer-contact a:hover { color: var(--sp-orange); }
.footer-cta { border-radius: 40px; padding: .5rem 1.2rem; font-weight: 600; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 1.5rem; }
.footer-meta .footer-socials { margin-top: 0; }
.footer-touch { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.footer-touch .footer-contact { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0; }
.footer-touch .footer-contact li { margin-bottom: 0; gap: .65rem; font-size: .92rem; }
.footer-touch .footer-contact i { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); font-size: .9rem; }
.footer-touch .footer-contact a { color: #cdd6e2; }
.footer-touch .footer-cta { height: 36px; display: inline-flex; align-items: center; padding: 0 1.1rem; font-size: .88rem; }
.footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; margin-top: 2.5rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.footer-menu a { color: #aab6ca; text-decoration: none; font-size: .95rem; transition: color .15s ease; }
.footer-menu a:hover { color: var(--sp-orange); }
.footer-socials { margin-top: 1.25rem; }
.footer-socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: #fff; margin-right: .5rem;
    transition: transform .15s ease, background .15s ease;
}
.footer-socials a:hover { background: var(--sp-orange); transform: translateY(-3px); }
.footer-bottom {
    margin-top: 0; padding: 1.25rem 0;
    background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.06);
    font-size: .85rem;
}
.footer-legal { list-style: none; display: flex; gap: 1.25rem; padding: 0; margin: 0; }
.footer-legal a { color: #aab6ca; text-decoration: none; }
.footer-legal a:hover { color: var(--sp-orange); }

/* Support our mission — donation appeal (white card on the navy footer) */
.footer-donate {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.5rem;
    margin-bottom: 3rem; padding: 1rem 1.5rem;
    background: #fff; border-radius: 1.25rem;
    box-shadow: 0 1rem 2.25rem rgba(15,47,82,.25);
}
.footer-donate-copy { display: flex; align-items: center; gap: 1.15rem; min-width: 0; }
.footer-donate-badge {
    flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sp-orange), #ff9d3f);
    color: #fff; font-size: 1.05rem;
    box-shadow: 0 .5rem 1rem rgba(245,130,31,.35);
}
.footer-donate-title { color: var(--sp-navy-dark); font-weight: 800; font-size: 1.12rem; margin-bottom: .1rem; }
.footer-donate-text { color: #5a6577; font-size: .92rem; line-height: 1.5; }
.footer-donate-btn {
    flex-shrink: 0;
    border: 2px solid var(--sp-orange); border-radius: 40px;
    padding: .45rem 1.5rem; font-weight: 700; color: var(--sp-orange);
    background: transparent; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.footer-donate-btn:hover { background: var(--sp-orange); color: #fff; }
@media (max-width: 575.98px) {
    .footer-donate { padding: 1rem; }
    .footer-donate-btn { width: 100%; text-align: center; }
}

/* Donate page ------------------------------------------------------------ */
.donate-hero {
    position: relative; display: flex; align-items: center;
    min-height: 600px; padding: 5rem 0; color: #fff;
    background:
        linear-gradient(90deg, rgba(15,47,82,.94) 0%, rgba(15,47,82,.82) 34%, rgba(15,47,82,.25) 62%, rgba(15,47,82,0) 80%),
        linear-gradient(0deg, rgba(15,47,82,.55) 0%, rgba(15,47,82,0) 35%),
        var(--donate-hero-image) 70% center / cover no-repeat;
}
.donate-hero-content { max-width: 540px; }
.donate-hero-title { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.1; color: #fff; margin: .7rem 0 1.25rem; }
.donate-hero-title .accent { color: var(--sp-orange); }
.donate-hero-lead { font-size: 1.22rem; line-height: 1.65; font-weight: 600; color: #fff; }
.donate-hero-copy { font-size: 1.05rem; line-height: 1.75; color: #c9d4e4; }

.donate-section { padding: 4rem 0 1rem; scroll-margin-top: 5rem; }
.donate-card {
    display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
    background: #fff; box-shadow: 0 1.25rem 3rem rgba(15,47,82,.14);
}
.donate-card-aside {
    display: flex; flex-direction: column; padding: 2.5rem; color: #fff;
    background: radial-gradient(420px 220px at 100% 0%, rgba(245,130,31,.22), transparent 65%),
                linear-gradient(135deg, var(--sp-navy), var(--sp-navy-dark));
    border-right: 4px solid var(--sp-orange);
}
.donate-card-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 1.25rem; background: var(--sp-orange); color: #fff; font-size: 1.35rem;
}
.donate-card-title { color: #fff; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .5rem; }
.donate-card-sub { color: #c9d4e4; font-size: 1rem; line-height: 1.6; margin-bottom: 1.75rem; }
.donate-card-body { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; }
.donate-card-label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #6b7688; margin-bottom: .75rem; }
.donate-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.donate-amount { position: relative; cursor: pointer; margin: 0; }
.donate-amount input { position: absolute; opacity: 0; pointer-events: none; }
.donate-amount span {
    position: relative; display: block; padding: 1.1rem .5rem; text-align: center;
    border: 2px solid #dfe4ec; background: #f8f9fc;
    font-size: 1.25rem; font-weight: 800; color: var(--sp-navy-dark);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.donate-amount span i {
    position: absolute; top: 0; right: 0; width: 22px; height: 22px; line-height: 22px;
    font-size: .7rem; background: var(--sp-orange); color: #fff; opacity: 0; transition: opacity .15s ease;
}
.donate-amount:hover span { border-color: var(--sp-orange); background: #fff; }
.donate-amount input:checked + span { border-color: var(--sp-orange); background: #fff4ea; color: var(--sp-orange-dark); }
.donate-amount input:checked + span i { opacity: 1; }
.donate-amount input:focus-visible + span { outline: 3px solid rgba(245,130,31,.4); outline-offset: 2px; }
.donate-custom {
    display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem;
    border: 2px solid var(--sp-orange); padding: 0 1rem; background: #fff;
}
.donate-custom[hidden] { display: none; }
.donate-custom-currency { font-size: 1.35rem; font-weight: 800; color: var(--sp-orange); }
.donate-custom-input {
    flex: 1; width: 100%; border: none; outline: none; background: transparent;
    padding: .95rem .25rem; font-size: 1.15rem; font-weight: 700; color: var(--sp-navy-dark);
}
.donate-donor { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.donate-donor .form-control { padding: .85rem 1rem; border: 2px solid #dfe4ec; background: #f8f9fc; font-weight: 600; color: var(--sp-navy-dark); }
.donate-donor .form-control:focus { border-color: var(--sp-orange); box-shadow: none; background: #fff; }
.donate-as { margin: 0 0 1.25rem; padding: .85rem 1rem; border: 2px solid #dfe4ec; background: #f8f9fc; color: var(--sp-navy-dark); font-size: .95rem; }
.donate-as i { color: var(--sp-orange); }
.donate-as-email { color: #6b7688; overflow-wrap: anywhere; }
.donate-alert { border: 0; margin-bottom: 1.25rem; }
.donate-alert[hidden] { display: none; }
.donate-submit { padding: 1rem; font-size: 1.15rem; font-weight: 800; letter-spacing: .3px; }
.donate-submit:disabled { opacity: .7; }
.donate-secure-note { margin: .75rem 0 0; text-align: center; font-size: .85rem; color: #6b7688; }
.donate-assurances { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .6rem; font-size: .95rem; color: #e3e9f2; }
.donate-assurances i { width: 1.25rem; color: var(--sp-orange); margin-right: .4rem; text-align: center; }
.donate-card-foot { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .9rem; line-height: 1.6; color: #c9d4e4; }

.donate-why-intro { max-width: 760px; }
.donate-why-intro p { font-size: 1.08rem; line-height: 1.8; color: #4a5568; }
.donate-reason { padding: 2rem 1.75rem; background: #fff; border: 1px solid #eef1f6; border-bottom: 3px solid var(--sp-orange); }
.donate-reason-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 1.1rem;
    background: rgba(245,130,31,.12); color: var(--sp-orange); font-size: 1.35rem;
}
.donate-reason-title { font-size: 1.15rem; font-weight: 800; color: var(--sp-navy-dark); margin-bottom: .5rem; }
.donate-reason p { color: #5a6577; line-height: 1.7; }

.donate-thanks { padding: 1rem 0 3.5rem; }
.donate-thanks-card {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem 3rem;
    padding: 2.25rem 2.5rem 0; background: #fff;
    border: 1px solid #eef1f6; border-left: 4px solid var(--sp-orange);
    box-shadow: 0 1rem 2.5rem rgba(15,47,82,.08);
}
.donate-thanks-main { display: flex; align-items: flex-start; gap: 1.25rem; }
.donate-thanks-icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; background: rgba(245,130,31,.12); color: var(--sp-orange); font-size: 1.35rem;
}
.donate-thanks-lead { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.25; color: var(--sp-navy-dark); margin-bottom: .4rem; }
.donate-thanks-motto { font-size: 1.05rem; color: var(--sp-navy); font-style: italic; }
.donate-thanks-action { text-align: center; }
.donate-thanks-btn { padding: .85rem 2.25rem; font-weight: 700; white-space: nowrap; }
.donate-thanks-sign { margin-top: .6rem; font-size: .9rem; color: #5a6577; }
.donate-signoff {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem;
    margin: 0 -2.5rem; padding: .9rem 2.5rem; background: #f8f9fc; border-top: 1px solid #eef1f6;
}
.donate-signoff strong { color: var(--sp-orange); font-size: 1rem; }
.donate-signoff span { color: #6b7688; font-size: .9rem; }

@media (max-width: 991.98px) {
    .donate-card { grid-template-columns: 1fr; }
    .donate-thanks-card { grid-template-columns: 1fr; }
    .donate-thanks-action { text-align: left; }
    .donate-card-aside { border-right: 0; border-bottom: 4px solid var(--sp-orange); }
    .donate-hero {
        min-height: 520px; padding: 4rem 0;
        background:
            linear-gradient(0deg, rgba(15,47,82,.92) 0%, rgba(15,47,82,.78) 55%, rgba(15,47,82,.45) 100%),
            var(--donate-hero-image) 62% center / cover no-repeat;
    }
}
@media (max-width: 575.98px) {
    .donate-card-aside,
    .donate-card-body { padding: 1.75rem 1.25rem; }
    .donate-thanks-card { padding: 1.75rem 1.25rem 0; }
    .donate-thanks-main { flex-direction: column; gap: 1rem; }
    .donate-thanks-btn { width: 100%; }
    .donate-signoff { margin: 0 -1.25rem; padding: .9rem 1.25rem; }
    .donate-amounts { grid-template-columns: repeat(2, 1fr); }
    .donate-donor { grid-template-columns: 1fr; }
}

[data-bs-theme="dark"] .donate-thanks-card { background: var(--dk-surface); border-color: var(--dk-border); border-left-color: var(--sp-orange); }
[data-bs-theme="dark"] .donate-card,
[data-bs-theme="dark"] .donate-reason { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .donate-reason { border-bottom-color: var(--sp-orange); }
[data-bs-theme="dark"] .donate-reason-title,
[data-bs-theme="dark"] .donate-thanks-lead,
[data-bs-theme="dark"] .donate-thanks-motto,
[data-bs-theme="dark"] .donate-custom-input { color: var(--dk-text); }
[data-bs-theme="dark"] .donate-why-intro p,
[data-bs-theme="dark"] .donate-reason p,
[data-bs-theme="dark"] .donate-thanks-sign,
[data-bs-theme="dark"] .donate-signoff span { color: var(--dk-muted); }
[data-bs-theme="dark"] .donate-amount span { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .donate-amount:hover span { border-color: var(--sp-orange); }
[data-bs-theme="dark"] .donate-amount input:checked + span { background: rgba(245,130,31,.14); border-color: var(--sp-orange); color: var(--sp-orange); }
[data-bs-theme="dark"] .donate-custom { background: var(--dk-elevated); }
[data-bs-theme="dark"] .donate-donor .form-control { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .donate-donor .form-control:focus { border-color: var(--sp-orange); }
[data-bs-theme="dark"] .donate-secure-note,
[data-bs-theme="dark"] .donate-as-email { color: var(--dk-muted); }
[data-bs-theme="dark"] .donate-as { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .donate-signoff { background: var(--dk-surface-2); border-top-color: var(--dk-border); }

/* ---------------------------------------------------------------------------
   Inner page banner (Download & other sub-pages)
   --------------------------------------------------------------------------- */
/* Page banner: navy "blueprint" with a faint grid, a wave on the left,
   a per-page illustration on the right and an orange rule along the bottom. */
.page-banner {
    --banner-art: url('../images/banners/atom.svg');
    position: relative; overflow: hidden; isolation: isolate;
    padding: 4.5rem 0 4rem;
    text-align: center; color: #fff;
    background:
        linear-gradient(90deg, transparent, rgba(245,130,31,.75), transparent) bottom / 100% 2px no-repeat,
        radial-gradient(520px 300px at 88% 15%, rgba(245,130,31,.22), transparent 65%),
        radial-gradient(600px 340px at 8% 110%, rgba(64,140,230,.28), transparent 65%),
        linear-gradient(135deg, #0b1a2e 0%, var(--sp-navy-dark) 45%, var(--sp-navy) 100%);
}
.page-banner::before,
.page-banner::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.page-banner::before {
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 36px 36px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 50%, transparent 20%, #000 100%);
            mask-image: radial-gradient(ellipse 55% 75% at 50% 50%, transparent 20%, #000 100%);
}
.page-banner::after {
    background:
        var(--banner-art) right 5vw center / clamp(170px, 19vw, 280px) no-repeat,
        url('../images/banners/wave.svg') left -30px center / clamp(240px, 28vw, 420px) auto no-repeat;
}
.page-banner > .container { position: relative; }
/* Left-aligned banners keep the wave out from behind the title. */
.sv-banner::after,
.bp-banner::after { background-position: right 5vw center, left -320px center; }
@media (max-width: 991.98px) {
    .page-banner::after { opacity: .45; }
}
/* Per-page illustration on the right of the banner (atom by default). */
.banner-art-account     { --banner-art: url('../images/banners/account.svg'); }
.banner-art-book        { --banner-art: url('../images/banners/book.svg'); }
.banner-art-browser     { --banner-art: url('../images/banners/browser.svg'); }
.banner-art-cart        { --banner-art: url('../images/banners/cart.svg'); }
.banner-art-docs        { --banner-art: url('../images/banners/docs.svg'); }
.banner-art-editor      { --banner-art: url('../images/banners/editor.svg'); }
.banner-art-envelope    { --banner-art: url('../images/banners/envelope.svg'); }
.banner-art-flask       { --banner-art: url('../images/banners/flask.svg'); }
.banner-art-institution { --banner-art: url('../images/banners/institution.svg'); }
.banner-art-key         { --banner-art: url('../images/banners/key.svg'); }
.banner-art-pen         { --banner-art: url('../images/banners/pen.svg'); }
.banner-art-pendulum    { --banner-art: url('../images/banners/pendulum.svg'); }
.banner-art-play        { --banner-art: url('../images/banners/play.svg'); }
.banner-art-proof       { --banner-art: url('../images/banners/proof.svg'); }
.banner-art-roadmap     { --banner-art: url('../images/banners/roadmap.svg'); }
.banner-art-shield      { --banner-art: url('../images/banners/shield.svg'); }
.banner-art-unlock      { --banner-art: url('../images/banners/unlock.svg'); }
.page-banner h1 { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); }
.page-banner h1 .accent { color: var(--sp-orange); }
.page-banner-sub { color: #b7c2d4; font-size: 1rem; letter-spacing: .3px; }
.page-breadcrumb {
    display: inline-flex; flex-wrap: wrap; justify-content: center;
    list-style: none; padding: 0; margin: 0; gap: .35rem;
    font-size: .9rem;
}
.page-breadcrumb li { color: #cdd6e2; }
.page-breadcrumb li + li::before { content: '\203A'; margin-right: .35rem; color: #7f8ea6; }
.page-breadcrumb a { color: #cdd6e2; text-decoration: none; transition: color .15s ease; }
.page-breadcrumb a:hover { color: var(--sp-orange); }
.page-breadcrumb li[aria-current] { color: var(--sp-orange); }

/* Brand outline button (navy) — soft border, fills navy on hover */
.btn-outline-navy {
    background: #fff;
    border: 1px solid #dfe4ee;
    color: var(--sp-navy);
    font-weight: 600;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-outline-navy:hover,
.btn-outline-navy:focus-visible {
    background: var(--sp-navy);
    border-color: var(--sp-navy);
    color: #fff;
    box-shadow: 0 4px 14px rgba(23, 69, 122, .18);
}

/* ---------------------------------------------------------------------------
   Auto-detected platform banner (shown above the manual download cards)
   --------------------------------------------------------------------------- */
.dl-detect-wrap { margin-bottom: 2.75rem; }
.dl-detect-card {
    display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
    background: linear-gradient(135deg, #f4f7fc, #eef2fb);
    border: 1px solid #e2e8f4; border-radius: 1.25rem;
    padding: 1.75rem 2.25rem;
    box-shadow: 0 1rem 2.2rem rgba(23,69,122,.08);
}
.dl-detect-badge {
    flex-shrink: 0; width: 68px; height: 68px; border-radius: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.9rem; box-shadow: 0 .7rem 1.4rem rgba(0,0,0,.16);
}
.dl-detect-badge.win   { background: linear-gradient(135deg, #1d6fb8, var(--sp-navy)); }
.dl-detect-badge.mac   { background: linear-gradient(135deg, #4b5563, #111418); }
.dl-detect-badge.linux { background: linear-gradient(135deg, var(--sp-orange), #ff9d3f); }
.dl-detect-body { flex: 1 1 240px; min-width: 0; }
.dl-detect-title { font-weight: 700; font-size: 1.5rem; color: var(--sp-navy); }
.dl-detect-note { font-size: .9rem; color: #6b7891; }
.dl-detect-action {
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
    margin-left: auto;
}
.dl-detect-btn { border-radius: .75rem; padding: .8rem 2rem; font-weight: 600; }
.dl-detect-alt { font-size: .82rem; color: #7a879c; text-decoration: none; }
.dl-detect-alt:hover { color: var(--sp-orange); text-decoration: underline; }
@media (max-width: 767.98px) {
    .dl-detect-card { padding: 1.5rem 1.5rem; gap: 1.25rem; }
    .dl-detect-action { margin-left: 0; width: 100%; align-items: stretch; }
    .dl-detect-btn { text-align: center; }
    .dl-detect-alt { text-align: center; }
}

/* ---------------------------------------------------------------------------
   Download cards
   --------------------------------------------------------------------------- */
.dl-card {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1.25rem;
    padding: 2.75rem 2rem; text-align: center;
    display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1.4rem 2.8rem rgba(23,69,122,.14);
    border-color: #e2e6ef;
}
.dl-badge {
    width: 92px; height: 92px; border-radius: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 1.4rem; color: #fff; font-size: 2.6rem;
    box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.16);
    transition: transform .25s ease;
}
.dl-card:hover .dl-badge { transform: translateY(-5px) rotate(-4deg); }
.dl-badge.win   { background: linear-gradient(135deg, #1d6fb8, var(--sp-navy)); }
.dl-badge.mac   { background: linear-gradient(135deg, #4b5563, #111418); }
.dl-badge.linux { background: linear-gradient(135deg, var(--sp-orange), #ff9d3f); }
.dl-os   { font-weight: 700; font-size: 1.35rem; margin-bottom: .6rem; }
.dl-desc { font-size: .92rem; line-height: 1.6; margin-bottom: 1.6rem; }
.dl-buttons {
    display: flex; flex-wrap: wrap; gap: .75rem;
    justify-content: center; margin-top: auto;
}
.dl-btn {
    border-radius: .75rem; padding: .7rem 1.5rem;
    font-weight: 600; line-height: 1.2;
}
.dl-btn small { font-weight: 400; font-size: .72rem; opacity: .85; margin-top: .15rem; }

/* Fallback / help links */
.dl-help {
    display: flex; align-items: center; gap: 1rem;
    background: #f8f9fc; border: 1px solid #eef0f5; border-radius: .9rem;
    padding: 1rem 1.2rem; height: 100%; text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dl-help:hover { transform: translateY(-3px); box-shadow: 0 .8rem 1.6rem rgba(23,69,122,.12); border-color: #dfe4ee; }
.dl-help-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(245,130,31,.12); color: var(--sp-orange); font-size: 1.2rem;
}
.dl-help-text { display: flex; flex-direction: column; min-width: 0; }
.dl-help-title { font-weight: 600; color: var(--sp-navy); line-height: 1.3; }
.dl-help-sub { font-size: .82rem; color: #7a879c; }
.dl-help-arrow { margin-left: auto; color: #c2cbdb; transition: transform .18s ease, color .18s ease; }
.dl-help:hover .dl-help-arrow { color: var(--sp-orange); transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   Installation walkthrough cards
   --------------------------------------------------------------------------- */
.howto-section { background: #f8f9fc; }
.howto-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}
.howto-card:hover { transform: translateY(-6px); box-shadow: 0 1.1rem 2.2rem rgba(23,69,122,.15); }
.howto-visual { aspect-ratio: 16 / 7; overflow: hidden; background: #0f2136; }
.howto-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.howto-card:hover .howto-visual img { transform: scale(1.06); }
.howto-body { padding: 1.4rem 1.5rem 1.6rem; }
.howto-date { display: block; color: #8a97ab; font-size: .82rem; margin-bottom: .5rem; }
.howto-title { font-weight: 700; font-size: 1.1rem; color: var(--sp-black); margin-bottom: .8rem; }
.howto-card:hover .howto-title { color: var(--sp-navy); }
.howto-more { color: var(--sp-orange); font-weight: 600; font-size: .88rem; }

/* ---------------------------------------------------------------------------
   Free-version note
   --------------------------------------------------------------------------- */
.dl-note {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: #fff; border: 1px solid #eef0f5; border-left: 4px solid var(--sp-orange);
    border-radius: 1rem; padding: 2rem 2.25rem;
    box-shadow: 0 .8rem 1.8rem rgba(23,69,122,.06);
}
.dl-note-badge {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(245,130,31,.12); color: var(--sp-orange); font-size: 1.4rem;
}
.dl-note-title { font-weight: 700; font-size: 1.2rem; margin-bottom: .6rem; }
.dl-note p { color: #55617a; line-height: 1.7; margin-bottom: .75rem; }
.dl-note a { color: var(--sp-navy); font-weight: 600; text-decoration: none; }
.dl-note a:hover { color: var(--sp-orange); }
@media (max-width: 575.98px) {
    .dl-note { flex-direction: column; gap: 1rem; padding: 1.75rem 1.5rem; }
}

/* ---------------------------------------------------------------------------
   Simulation Library (search page) — banner search bar
   --------------------------------------------------------------------------- */
.sl-banner { padding-bottom: 3.25rem; }
.sl-search {
    display: flex; align-items: center;
    max-width: 680px; margin: 0 auto;
    background: #fff; border-radius: .8rem;
    padding: .4rem .4rem .4rem 1rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.18);
}
.sl-search-ico { color: #9aa6b8; font-size: 1rem; }
.sl-search-input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: .7rem .9rem; font-size: .95rem; color: var(--sp-black);
}
.sl-search-input::placeholder { color: #9aa6b8; }
.sl-search-btn { flex-shrink: 0; border-radius: .6rem; padding: .65rem 1.6rem; font-weight: 600; }
@media (max-width: 575.98px) {
    .sl-search { flex-wrap: wrap; }
    .sl-search-btn { width: 100%; margin-top: .4rem; }
}

/* ---------------------------------------------------------------------------
   Simulation Library — filter sidebar
   --------------------------------------------------------------------------- */
.sl-section { background: #f8f9fc; }
.sl-filters {
    position: sticky; top: 90px;
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    padding: 1.4rem 1.4rem 1.6rem;
    box-shadow: 0 .5rem 1.4rem rgba(23,69,122,.05);
}
.sl-filters-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eef0f5;
}
.sl-filters-title { font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); margin: 0; }
.sl-filters-toggle {
    display: inline-flex; align-items: center;
    padding: 0; border: 0; background: transparent;
    color: var(--sp-navy); font-size: 1.1rem; font-weight: 700;
}
.sl-filters-body[hidden] { display: none; }
.sl-clear { font-size: .82rem; font-weight: 600; color: var(--sp-orange); text-decoration: none; }
.sl-clear:hover { text-decoration: underline; }
.sl-mobile-close { display: none; }

.sl-group + .sl-group { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid #f0f2f7; }
.sl-group-title { font-size: .95rem; font-weight: 700; color: var(--sp-navy); margin-bottom: .8rem; }
.sl-scroll { max-height: 270px; overflow-y: auto; padding-right: .4rem; }
.sl-scroll::-webkit-scrollbar { width: 6px; }
.sl-scroll::-webkit-scrollbar-thumb { background: #d3dae6; border-radius: 3px; }
.sl-apply { margin-top: 1.4rem; border-radius: .7rem; font-weight: 600; }

/* Custom checkbox */
.sl-check {
    display: flex; align-items: center; gap: .6rem;
    padding: .3rem 0; cursor: pointer; user-select: none;
}
.sl-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sl-check-box {
    flex-shrink: 0; width: 18px; height: 18px;
    border: 2px solid #cbd3e0; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sl-check-box::after {
    content: '\2713'; font-size: .7rem; font-weight: 700; color: #fff;
    opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.sl-check input:checked + .sl-check-box { background: var(--sp-orange); border-color: var(--sp-orange); }
.sl-check input:checked + .sl-check-box::after { opacity: 1; transform: scale(1); }
.sl-check input:focus-visible + .sl-check-box { box-shadow: 0 0 0 3px rgba(245,130,31,.25); }
.sl-check-label { font-size: .92rem; color: #44506a; line-height: 1.3; }
.sl-check:hover .sl-check-label { color: var(--sp-navy); }
.sl-topic-group,
.sl-topic-group + .sl-topic-group { margin: 0; }
.sl-topic-group summary { list-style: none; cursor: pointer; }
.sl-topic-group summary::-webkit-details-marker { display: none; }
.sl-topic-group summary::before,
.sl-topic-group[open] summary::before { content: none; display: none; }
.sl-topic-parent {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .3rem 0;
    color: #44506a;
    font-size: .92rem;
    font-weight: 400;
}
.sl-topic-parent:hover { color: var(--sp-navy); }
.sl-topic-parent input { position: absolute; opacity: 0; width: 0; height: 0; }
.sl-topic-parent .sl-check-box { width: 16px; height: 16px; }
.sl-topic-parent .sl-check-box::after { content: '\2713'; }
.sl-topic-parent input:checked + .sl-check-box { background: var(--sp-orange); border-color: var(--sp-orange); }
.sl-topic-parent input:checked + .sl-check-box::after { opacity: 1; transform: scale(1); }
.sl-subtopic,
.sl-tree-children { padding-left: 1.4rem; }
.sl-topic-leaf { padding: .3rem 0; }

/* ---------------------------------------------------------------------------
   Simulation Library — results
   --------------------------------------------------------------------------- */
.sl-results-head {
    background: #fff; border: 1px solid #eef0f5; border-radius: .7rem;
    padding: .9rem 1.2rem; margin-bottom: 1.4rem;
}
.sl-results-head h6 { font-weight: 600; color: var(--sp-navy); }
.sl-results-head { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
.sl-hide-filters {
    order: -1;
    border: 0; padding: .35rem .6rem; border-radius: 4px;
    background: transparent; color: var(--sp-navy); font-size: .82rem; font-weight: 600;
}
.sl-hide-filters:hover { color: var(--sp-orange); }
.sl-per-page {
    margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: .6rem;
    font-size: .85rem; font-weight: 600; color: var(--sp-navy); white-space: nowrap;
}
.sl-per-page .form-select { width: auto; min-width: 4.75rem; border-radius: 0; border-color: #e2e6ef; color: var(--sp-navy); font-weight: 600; }
.sl-per-page .form-select:focus { border-color: var(--sp-navy); box-shadow: none; }
.sl-results { transition: opacity .15s ease; }
.sl-results.is-loading { opacity: .45; pointer-events: none; }
.filters-hidden .sl-results-column { flex: 0 0 100%; max-width: 100%; }
@media (max-width: 991.98px) {
    .sl-filter-column[hidden] { display: none !important; }
    .sl-results-column { flex: 0 0 100%; max-width: 100%; }
    .sl-filter-column:not([hidden]) {
        position: fixed;
        inset: auto 0 0;
        z-index: 1050;
        width: 100%;
        padding: 0;
    }
    .sl-filters {
        position: relative;
        top: auto;
        max-height: 78dvh;
        overflow: hidden;
        border-radius: 1.1rem 1.1rem 0 0;
        box-shadow: 0 -10px 30px rgba(15, 47, 82, .22);
        padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
    .sl-filters::before {
        content: '';
        display: block;
        width: 44px;
        height: 5px;
        margin: 0 auto .8rem;
        border-radius: 3px;
        background: #c4cdda;
    }
    .sl-mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: .75rem;
        padding: .35rem;
        border: 0;
        background: transparent;
        color: var(--sp-navy);
    }
    .sl-mobile-close:hover { color: var(--sp-orange); }
    .sl-filters-body {
        max-height: calc(78dvh - 5.5rem);
        overflow-y: auto;
    }
}
@media (min-width: 1200px) {
    .filters-hidden .sim-card-col { flex: 0 0 25%; max-width: 25%; }
}

/* Grid / list switch */
.sl-view-toggle { display: inline-flex; border: 1px solid #e2e6ef; }
.sl-view-btn {
    border: 0; padding: .4rem .65rem; background: transparent;
    color: var(--sp-navy); font-size: .9rem; line-height: 1;
}
.sl-view-btn + .sl-view-btn { border-left: 1px solid #e2e6ef; }
.sl-view-btn:hover { color: var(--sp-orange); }
.sl-view-btn.is-active { background: var(--sp-navy); color: #fff; }
[data-bs-theme="dark"] .sl-view-toggle,
[data-bs-theme="dark"] .sl-view-btn + .sl-view-btn { border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .sl-view-btn { color: inherit; }
[data-bs-theme="dark"] .sl-view-btn.is-active { background: var(--sp-orange); color: #fff; }

/* List view: one card per row, thumbnail on the left, body and footer beside it */
.sl-results.is-list .sim-card-col { flex: 0 0 100%; max-width: 100%; }
.sl-results.is-list .sim-item {
    display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: 1fr auto;
}
.sl-results.is-list .sim-item:hover { transform: translateY(-3px); }
.sl-results.is-list .sim-item-visual { grid-row: 1 / 3; aspect-ratio: auto; min-height: 175px; }
.sl-results.is-list .sim-item-foot { margin-top: 0; }
@media (max-width: 575.98px) {
    .sl-results-head { flex-wrap: wrap; }
    .sl-results.is-list .sim-item { grid-template-columns: 120px minmax(0, 1fr); }
    .sl-results.is-list .sim-item-visual { min-height: 0; }
    .sl-results.is-list .sim-item-desc { display: none; }
}

.sim-item {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #eef0f5; border-radius: 4px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.sim-item:hover { transform: translateY(-6px); box-shadow: 0 1rem 2rem rgba(23,69,122,.14); }
.sim-item-visual {
    position: relative; display: block;
    aspect-ratio: 16 / 10; background: #eef1f6; overflow: hidden;
}
.sim-item-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sim-item:hover .sim-item-visual img { transform: scale(1.06); }
.sim-item-tag {
    position: absolute; top: .7rem; left: .7rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    padding: .28rem .7rem; border-radius: 2rem; color: #fff;
}
.sim-item-tag.is-free { background: var(--sp-orange); }
.sim-item-tag.is-paid { background: var(--sp-navy); }

.sim-item-body { flex: 1; padding: 1.1rem 1.2rem .4rem; }
.sim-item-topic {
    display: inline-block; font-size: .72rem; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
    color: var(--sp-orange); margin-bottom: .15rem;
}
.sim-item-title { font-size: 1.08rem; font-weight: 700; line-height: 1.3; margin-bottom: .2rem; }
.sim-item-title a { color: var(--sp-black); text-decoration: none; transition: color .15s ease; }
.sim-item-title a:hover { color: var(--sp-orange); }
.sim-item-desc { font-size: .86rem; color: #6b7688; line-height: 1.55; margin-bottom: 0; }

/* Activity cards — faint Font Awesome icon as a right-side background image
   inside the body, behind the topic / title / description text. */
.act-item .sim-item-body { position: relative; overflow: hidden; }
.act-item-watermark {
    position: absolute; right: -.6rem; top: 50%; transform: translateY(-50%);
    font-size: 6rem; color: var(--sp-navy); opacity: .12;
    pointer-events: none; z-index: 0;
}
.act-item .sim-item-title,
.act-item .sim-item-topic,
.act-item .sim-item-desc { position: relative; z-index: 1; }
[data-bs-theme="dark"] .act-item-watermark { color: #fff; opacity: .09; }
.sim-item-foot {
    display: flex; flex-wrap: wrap; gap: .4rem 1rem;
    padding: .7rem 1.2rem; margin-top: .8rem; border-top: 1px solid #f0f2f7;
}
.sim-item-meta { font-size: .78rem; color: #8a97ab; display: inline-flex; align-items: center; }
.sim-item-meta i { color: var(--sp-orange); margin-right: .4rem; }
.sim-item-action {
    margin-left: 0;
    color: var(--sp-navy);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
}
.sim-item-action + .sim-item-action { margin-left: .7rem; }
button.sim-item-action { padding: 0; border: 0; background: none; }
.sim-item-action:hover,
.sim-item-action.is-active { color: var(--sp-orange); }
/* Whole card opens the detail page (stretched title link); topic, author,
   share and save sit above it and keep their own actions. */
.sim-item-linked { position: relative; }
.sim-item-linked .sim-item-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sim-item-linked:hover .sim-item-link { color: var(--sp-orange); }
.sim-item-linked .sim-item-topic,
.sim-item-linked .sim-item-meta,
.sim-item-linked .sim-share,
.sim-item-linked .sim-item-action { position: relative; z-index: 2; }
.sim-item-linked .sim-item-topic,
.sim-item-linked .sim-item-meta { text-decoration: none; }
.sim-item-linked .sim-item-topic:hover,
.sim-item-linked .sim-item-meta:hover { color: var(--sp-orange); text-decoration: underline; }
.sim-item-meta + .sim-share { margin-left: auto; }
.sim-share { position: relative; }
.sim-share summary { list-style: none; cursor: pointer; }
.sim-share summary::-webkit-details-marker { display: none; }
.sim-share .sim-item-action { display: block; margin: 0; }
.sim-share-menu {
    position: absolute;
    right: 0;
    bottom: 100%;
    z-index: 10;
    display: grid;
    min-width: 145px;
    padding: .35rem;
    border: 1px solid var(--sp-hairline);
    border-radius: var(--home-radius, 4px);
    background: #fff;
    box-shadow: 0 .5rem 1.2rem rgba(15, 47, 82, .16);
}
.sim-share-menu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.55rem;
    height: .55rem;
}
.sim-share:hover .sim-share-menu { display: grid; }
.sim-share-menu a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    color: var(--sp-navy);
    font-size: .78rem;
    text-decoration: none;
    white-space: nowrap;
}
.sim-share-menu a:hover { background: #f8f9fc; color: var(--sp-orange); }
.sim-share-menu i { width: 1rem; text-align: center; }
.sim-share[open]:not(:hover) .sim-share-menu { display: none; }

.sim-item-btn {
    display: block; text-align: center;
    padding: .65rem 1rem; background: var(--sp-navy); color: #fff;
    font-weight: 600; font-size: .9rem; text-decoration: none;
    transition: background .15s ease;
}
.sim-item-btn:hover { background: var(--sp-navy-dark); color: #fff; }
.sim-item-btn i { transition: transform .15s ease; }
.sim-item-btn:hover i { transform: translateX(3px); }

/* Standard square geometry for the simulation listing --------------------- */
body:has(.sl-section) .sl-search,
body:has(.sl-section) .sl-search-btn,
body:has(.sl-section) .sl-filters,
body:has(.sl-section) .sl-results-head,
body:has(.sl-section) .sl-empty,
body:has(.sl-section) .sl-apply,
body:has(.sl-section) .sim-item,
body:has(.sl-section) .sl-page,
body:has(.sl-section) .sim-share-menu,
body:has(.sl-section) .sl-section .btn {
    border-radius: 0 !important;
}

/* Empty state */
.sl-empty {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    padding: 3.5rem 1.5rem; text-align: center;
}
.sl-empty i { font-size: 2.6rem; color: #c2cbdb; margin-bottom: 1rem; display: block; }
.sl-empty h4 { font-weight: 700; color: var(--sp-navy); }

/* Pagination */
.sl-pagination { display: flex; justify-content: flex-end; gap: .4rem; margin-top: 2.5rem; }
.sl-page {
    min-width: 40px; height: 40px; padding: 0 .6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e2e6ef; border-radius: .55rem; background: #fff;
    color: var(--sp-navy); font-weight: 600; font-size: .9rem; text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sl-page:hover:not(.disabled):not(.active) { border-color: var(--sp-navy); }
.sl-page.active { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.sl-page.disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 991.98px) {
    .sl-filters { position: static; margin-bottom: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   Simulation detail page (/view/{slug})
   --------------------------------------------------------------------------- */
.sv-banner { padding: 3rem 0 2.5rem; text-align: left; }
.sv-banner > .container { max-width: min(1500px, 88vw); }
.sv-banner .page-breadcrumb { justify-content: flex-start; }
.sv-topic-eyebrow {
    display: inline-block; margin-bottom: .5rem;
    color: var(--sp-orange); font-weight: 700; font-size: .78rem;
    letter-spacing: 2px; text-transform: uppercase;
}

.sv-section { background: #f8f9fc; }
/* Wider content column — reduce the side gutters on the detail page */
.sv-section > .container { max-width: min(1500px, 88vw); }
.sv-feature { max-width: 100%; margin: 0 auto; }

/* Full-screen simulation player (/simulation/{tempname}) — header, then sim.
   Theme-aware: light by default, dark under [data-bs-theme="dark"]. */
/* The player draws HTML overlays (LaTeX labels, windows) over its canvas: keep them inside the player */
simphy-simulation { display: block; overflow: hidden; }

.sim-run {
    position: relative; width: 100%;
    height: calc(100vh - 60px); height: calc(100dvh - 60px);
    background: #f8f9fc; overflow: hidden;
}
.sim-run simphy-simulation { display: block; width: 100%; height: 100%; }

/* Bottom-right display-toggle cluster on the player */
.sim-run-settings { position: absolute; right: 18px; bottom: 18px; z-index: 6; }
.sim-run-gear {
    width: 46px; height: 46px; display: grid; place-items: center;
    background: #fff; color: var(--sp-navy);
    border: 1px solid var(--sp-hairline); cursor: pointer; font-size: 1.1rem;
    box-shadow: 0 .5rem 1.2rem rgba(15, 47, 82, .18);
    transition: border-color .15s ease, color .15s ease;
}
.sim-run-gear:hover,
.sim-run-gear[aria-expanded="true"] { border-color: var(--sp-orange); color: var(--sp-orange); }
.sim-run-panel {
    position: absolute; right: 0; bottom: calc(100% + 10px); width: 238px; overflow: hidden;
    background: #fff; border: 1px solid var(--sp-hairline);
    box-shadow: 0 1rem 2.2rem rgba(15, 47, 82, .18);
}
.sim-run-panel-title {
    display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
    color: #6b7688; font-weight: 700; border-bottom: 1px solid #eef1f6;
}
.sim-run-panel-title i { font-size: .8rem; color: var(--sp-orange); }
.sim-run-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .72rem 1rem; cursor: pointer; color: #2c3345; font-size: .92rem; font-weight: 500;
    transition: background .12s ease;
}
.sim-run-toggle:hover { background: rgba(15, 47, 82, .04); }
.sim-run-toggle + .sim-run-toggle { border-top: 1px solid #eef1f6; }
.sim-run-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sim-run-toggle-label { user-select: none; }
.sim-run-switch {
    position: relative; flex: 0 0 auto; width: 44px; height: 24px;
    background: #cbd2dc; transition: background .18s ease;
}
.sim-run-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.sim-run-toggle input:checked + .sim-run-switch { background: var(--sp-orange); }
.sim-run-toggle input:checked + .sim-run-switch::after { transform: translateX(20px); }
.sim-run-toggle input:focus-visible + .sim-run-switch { outline: 2px solid var(--sp-orange); outline-offset: 2px; }

/* Dark theme — mirrors the site-wide [data-bs-theme="dark"] switch */
[data-bs-theme="dark"] .sim-run { background: var(--dk-bg); }
[data-bs-theme="dark"] .sim-run-gear {
    background: rgba(30, 33, 40, .94); color: #e6e8ec;
    border-color: rgba(255, 255, 255, .16); box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .45);
}
[data-bs-theme="dark"] .sim-run-gear:hover,
[data-bs-theme="dark"] .sim-run-gear[aria-expanded="true"] { border-color: var(--sp-orange); color: var(--sp-orange); }
[data-bs-theme="dark"] .sim-run-panel {
    background: rgba(22, 25, 31, .98); border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
[data-bs-theme="dark"] .sim-run-panel-title { color: #8b93a1; border-bottom-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .sim-run-toggle { color: #e6e8ec; }
[data-bs-theme="dark"] .sim-run-toggle:hover { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .sim-run-toggle + .sim-run-toggle { border-top-color: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .sim-run-switch { background: #454b57; }

/* Player bar: back + simulation name (left), theme + user (right). Wide screens
   keep the site header, so the bar is visually hidden there and only its heading
   remains for SEO and screen readers. Phones and tablets drop the header and show
   the bar as a slim strip above the player, never over it, so the simulation's own
   controls stay uncovered. */
.sim-run-bar {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sim-run-back, .sim-run-brand, .sim-run-actions { display: none; }
.sim-run-title { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.25; }

@media (max-width: 991.98px) {
    body:has(.sim-run) .site-nav { display: none; }
    .sim-run { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
    .sim-run simphy-simulation { flex: 1 1 auto; min-height: 0; height: auto; }

    .sim-run-bar {
        position: relative; z-index: 7; flex: 0 0 auto;
        width: auto; height: 36px; margin: 0; overflow: visible; clip: auto; white-space: normal;
        display: flex; align-items: center; justify-content: space-between; gap: .5rem;
        background: #fff; color: var(--sp-navy); border-bottom: 1px solid var(--sp-hairline);
    }
    .sim-run-head { display: flex; align-items: center; min-width: 0; height: 100%; }
    .sim-run-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .1rem; padding-right: 2px; }

    .sim-run-back, .sim-run-login {
        flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
        color: inherit; text-decoration: none; font-size: .85rem; transition: color .15s ease;
    }
    .sim-run-back { border-right: 1px solid var(--sp-hairline); }
    .sim-run-brand {
        flex: 0 0 auto; display: flex; align-items: center; height: 100%;
        padding: 0 .6rem; border-right: 1px solid var(--sp-hairline);
    }
    .sim-run-brand img { height: 20px; width: auto; }
    .sim-run-back:hover, .sim-run-back:focus-visible,
    .sim-run-login:hover, .sim-run-login:focus-visible { color: var(--sp-orange); }
    .sim-run-title {
        padding: 0 .6rem; min-width: 0; font-size: .8rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sim-run-actions .nav-theme-toggle { width: 30px; height: 30px; justify-content: center; font-size: .85rem; }

    /* Compact user menu: avatar only, the name is in the dropdown */
    .sim-run-actions .nav-user-toggle { border: 0; background: transparent; padding: 2px; }
    .sim-run-actions .nav-user-avatar { width: 1.5rem; height: 1.5rem; font-size: .72rem; }
    .sim-run-actions .nav-user-name,
    .sim-run-actions .nav-user-toggle::after { display: none; }

    [data-bs-theme="dark"] .sim-run-bar {
        background: var(--dk-surface); color: #e6e8ec; border-bottom-color: rgba(255, 255, 255, .12);
    }
    [data-bs-theme="dark"] .sim-run-back,
    [data-bs-theme="dark"] .sim-run-brand { border-right-color: rgba(255, 255, 255, .12); }
    [data-bs-theme="dark"] .sim-run-actions .nav-user-toggle { background: transparent; }
}
.sv-hero-preview {
    position: relative; overflow: hidden;
    display: grid; place-items: center; background: var(--sp-navy-dark);
    border: 0;
    /* Full-bleed: break out of the centred container to span the viewport */
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.sv-hero-backdrop {
    position: absolute; inset: -2rem; width: calc(100% + 4rem); height: calc(100% + 4rem);
    object-fit: cover; filter: blur(30px); opacity: .6; transform: scale(1.12);
}
.sv-hero-frame {
    position: relative; z-index: 1; width: 100%; height: min(58vh, 540px);
    display: grid; place-items: center; background: transparent;
    box-shadow: none;
}
.sv-hero-frame img { display: block; width: 100%; height: 100%; object-fit: contain; filter: blur(6px); transform: scale(1.04); }
.sv-play {
    position: absolute; width: 116px; height: 116px; display: grid; place-items: center;
    /* Round media control — deliberate exception to the site-wide squared rule */
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .25);
    border: 4px solid rgba(255, 255, 255, .92);
    color: #fff; font-size: 2.7rem; padding-left: .35rem; text-decoration: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sv-play:hover {
    color: #fff; background: var(--sp-orange); border-color: #fff; transform: scale(1.06);
}
.sv-feature .sv-price { z-index: 2; }
.sv-feature-title { padding: 2rem .25rem .8rem; }
.sv-feature-title h1 { margin: 0; color: var(--sp-black); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; }
.sv-feature-title p { max-width: none; margin: .65rem 0 0; color: #6b7688; font-size: 1.05rem; line-height: 1.6; }
.sv-quick-actions { display: flex; align-items: center; gap: .65rem; padding: .4rem 0 1.6rem; }
.sv-views {
    display: inline-flex; align-items: center; gap: .45rem; margin-right: auto;
    font-size: .95rem; font-weight: 600; color: #6b7688;
}
.sv-views i { color: var(--sp-orange); font-size: 1.05rem; }
[data-bs-theme="dark"] .sv-views { color: #9aa7bd; }
.sv-quick-actions > a,
.sv-quick-actions > button,
.sv-quick-actions > details > summary {
    width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
    border: 1px solid #dfe4ee; border-radius: 4px; background: #fff; padding: 0;
    color: var(--sp-navy); text-decoration: none; list-style: none;
}
.sv-quick-actions > details > summary::-webkit-details-marker { display: none; }
.sv-quick-actions > a:hover,
.sv-quick-actions > button:hover,
.sv-quick-actions > details > summary:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
/* Saved to favorites */
.sv-quick-actions > button.is-active { border-color: var(--sp-orange); background: var(--sp-orange); color: #fff; }
.sv-quick-actions > button:disabled { opacity: .6; cursor: wait; }
.sv-share { position: relative; }
.sv-share-menu {
    position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 20;
    display: grid; min-width: 165px; padding: .35rem; gap: 0;
    border: 1px solid var(--sp-hairline); border-radius: var(--home-radius, 4px); background: #fff;
    box-shadow: 0 .5rem 1.2rem rgba(15,47,82,.16);
}
.sv-share-menu a {
    display: flex; align-items: center; gap: .55rem; width: auto; height: auto;
    padding: .5rem .6rem; color: var(--sp-navy); font-size: .82rem; text-decoration: none; white-space: nowrap;
}
.sv-share-menu a:hover { background: #f8f9fc; color: var(--sp-orange); }
.sv-share-menu i { width: 1rem; text-align: center; }
/* hover bridge across the gap so the cursor can travel from the button to the menu */
.sv-share-menu::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.55rem; height: .55rem; }
.sv-share:hover .sv-share-menu { display: grid; }
.sv-share[open]:not(:hover) .sv-share-menu { display: none; }
[data-bs-theme="dark"] .sv-share-menu { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .sv-share-menu a { color: var(--dk-heading); }
[data-bs-theme="dark"] .sv-share-menu a:hover { background: rgba(255,255,255,.06); color: var(--sp-orange); }

/* Activity action bar — full-width row at the bottom of the article, above related. */
.sv-actions-bar {
    max-width: 1180px; margin: 1.5rem auto 0;
    padding: 1.15rem .5rem;
    border-top: 1px solid #e6e9f2;
}
.sv-actions-bar > a:first-of-type { margin-left: auto; }
[data-bs-theme="dark"] .sv-actions-bar { border-top-color: var(--dk-border); }

.sv-detail-card { border-radius: 4px; }
.sv-detail-tags { margin: 0; padding: 0 1.5rem 1.5rem; }

/* Theory article (activity detail) — sticky contents sidebar + readable column. */
.sv-theory-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 2.75rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.75rem .5rem 1rem;
}
.sv-theory { min-width: 0; }

/* Collapsed state — sidebar hidden, article + simulations span the full width. */
.sv-theory-layout.is-toc-collapsed { grid-template-columns: 1fr; max-width: none; }
.sv-theory-layout.is-toc-collapsed .sv-toc { display: none; }

/* Toggle button (top of the article) */
.sv-toc-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: 1.35rem;
    padding: .45rem .85rem;
    background: #fff; border: 1px solid #dfe4ee; color: var(--sp-navy);
    font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sv-toc-toggle:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
.sv-toc-toggle i { font-size: .95rem; }
[data-bs-theme="dark"] .sv-toc-toggle { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-heading); }
[data-bs-theme="dark"] .sv-toc-toggle:hover { border-color: var(--sp-orange); color: var(--sp-orange); }

/* Contents sidebar */
.sv-toc { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; }
.sv-toc-head {
    margin-bottom: .8rem;
    color: #8a94a6; font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}
.sv-toc-nav ul { list-style: none; margin: 0; padding: 0; }
.sv-toc-nav a {
    display: block; padding: .32rem .8rem;
    border-left: 2px solid #e6e9f2;
    color: #55617a; text-decoration: none;
    font-size: .95rem; line-height: 1.45;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sv-toc-nav a:hover { color: var(--sp-navy); background: rgba(23,69,122,.04); }
.sv-toc-nav a.is-active { color: var(--sp-orange); border-left-color: var(--sp-orange); font-weight: 600; }
.sv-toc-nav ul ul a { padding-left: 1.55rem; font-size: .9rem; }
.sv-toc-nav ul ul ul a { padding-left: 2.35rem; font-size: .86rem; }

.sv-theory h2, .sv-theory h3, .sv-theory h4 { scroll-margin-top: 90px; }

@media (max-width: 991.98px) {
    .sv-theory-layout { grid-template-columns: 1fr; gap: 1.25rem; }
    .sv-toc {
        position: static; max-height: none; overflow: visible;
        padding-bottom: 1rem; border-bottom: 1px solid #e6e9f2;
    }
}

[data-bs-theme="dark"] .sv-toc-head { color: var(--dk-muted); }
[data-bs-theme="dark"] .sv-toc { border-bottom-color: var(--dk-border); }
[data-bs-theme="dark"] .sv-toc-nav a { color: var(--dk-muted); border-left-color: var(--dk-border); }
[data-bs-theme="dark"] .sv-toc-nav a:hover { color: var(--dk-heading); background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .sv-toc-nav a.is-active { color: var(--sp-orange); border-left-color: var(--sp-orange); }

.sv-theory-title {
    margin: 0 0 1.4rem;
    color: var(--sp-navy);
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 800; line-height: 1.15;
}
.sv-theory > p {
    color: #3f4757; font-size: 1.08rem; line-height: 1.75;
    margin: 0 0 1.35rem;
}
.sv-theory strong { color: var(--sp-navy); font-weight: 700; }
.sv-theory h2, .sv-theory h3, .sv-theory h4 {
    color: var(--sp-navy); font-weight: 700;
    margin: 2.2rem 0 .85rem;
}
.sv-theory h2 { font-size: 1.5rem; }
.sv-theory h3 { font-size: 1.28rem; }
.sv-theory h4 { font-size: 1.12rem; }
/* Formula callout — thin frame with an orange spine, monospace maths. */
.sv-formula {
    background: #fff;
    border: 1px solid #e8ebf2;
    border-left: 4px solid var(--sp-orange);
    padding: 1.15rem 1.4rem;
    margin: 0 0 .75rem;
    font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 1.3rem; font-weight: 700; letter-spacing: .5px;
    color: var(--sp-navy);
}
.sv-formula sub, .sv-formula sup { font-size: .7em; font-weight: 600; }
.sv-formula-note {
    margin: 0 0 2rem;
    color: #6b7688; font-size: .95rem; line-height: 1.6;
}
.sv-theory-meta { margin-top: 2.5rem; }
.sv-theory-tags { margin-top: 1rem; }

/* Live simulation embedded mid-theory */
.sv-sim-embed { margin: 1.75rem 0 2.4rem; }
.sv-sim-frame {
    display: block; width: 100%;
    height: min(70vh, 560px);
    background: #f8f9fc;
    border: 1px solid #e8ebf2;
}
.sv-sim-caption {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-top: .65rem;
    color: #6b7688; font-size: .9rem;
}
.sv-sim-caption i { color: var(--sp-orange); }
[data-bs-theme="dark"] .sv-sim-frame { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .sv-sim-caption { color: var(--dk-muted); }

[data-bs-theme="dark"] .sv-theory-title,
[data-bs-theme="dark"] .sv-theory h2,
[data-bs-theme="dark"] .sv-theory h3,
[data-bs-theme="dark"] .sv-theory h4,
[data-bs-theme="dark"] .sv-theory strong { color: var(--dk-heading); }
[data-bs-theme="dark"] .sv-theory > p { color: var(--dk-text); }
[data-bs-theme="dark"] .sv-formula {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    border-left-color: var(--sp-orange);
    color: var(--dk-heading);
}
[data-bs-theme="dark"] .sv-formula-note { color: var(--dk-muted); }
.sv-card {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    overflow: hidden; height: 100%;
    box-shadow: 0 .5rem 1.4rem rgba(23,69,122,.05);
}

/* Preview / gallery */
.sv-gallery { position: relative; background: #eef1f6; }
.sv-gallery img { display: block; width: 100%; max-height: 340px; object-fit: contain; padding: 1.25rem; }
.sv-price {
    position: absolute; top: 1rem; left: 1rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    padding: .3rem .8rem; border-radius: 2rem; color: #fff;
}
.sv-price.is-free { background: var(--sp-orange); }
.sv-price.is-paid { background: var(--sp-navy); }

.sv-card-body { padding: 1.4rem 1.5rem; }
.sv-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sv-tag {
    background: #eef1f6; color: var(--sp-navy);
    font-size: .78rem; font-weight: 600; text-decoration: none;
    padding: .32rem .85rem; border-radius: 2rem;
    transition: background .15s ease, color .15s ease;
}
.sv-tag:hover { background: var(--sp-orange); color: #fff; }
.sv-lead { color: #55617a; line-height: 1.7; margin: 0; }

/* Description panel */
.sv-card-head { padding: 1.1rem 1.5rem; border-bottom: 1px solid #eef0f5; }
.sv-card-head-split { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sv-card-head-split .sv-quick-actions { padding: 0; }
/* Card clips its content; let the share menu drop below the header instead */
.sv-detail-card:has(.sv-card-head-split) { overflow: visible; }
.sv-card-head-split .sv-share-menu { top: calc(100% + .5rem); bottom: auto; }
.sv-card-head-split .sv-share-menu::after { top: -.55rem; bottom: auto; }
.sv-card-title { font-size: 1.2rem; font-weight: 700; color: var(--sp-navy); margin: 0; }
.sv-body { padding: 1.5rem; color: #44506a; line-height: 1.75; }
.sv-body > :first-child { margin-top: 0; }
.sv-body h2, .sv-body h3, .sv-body h4 {
    color: var(--sp-navy); font-weight: 700; font-size: 1.08rem;
    margin: 1.4rem 0 .6rem;
}
.sv-body p { margin-bottom: 1rem; }
.sv-body ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.sv-body li { margin-bottom: .4rem; }
.sv-body strong { color: var(--sp-navy); }

/* Meta strip */
.sv-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
    padding: 1rem 1.5rem; border-top: 1px solid #f0f2f7;
    background: #fafbfd; font-size: .86rem; color: #6b7688;
}
.sv-meta i { color: var(--sp-orange); margin-right: .45rem; }
.sv-meta strong { color: var(--sp-navy); font-weight: 600; margin-left: .25rem; }

/* Action buttons */
.sv-actions { display: flex; flex-wrap: wrap; gap: .7rem; padding: 1.2rem 1.5rem; border-top: 1px solid #f0f2f7; }
.sv-btn { border: 0; border-radius: .6rem; padding: .62rem 1.25rem; font-weight: 600; font-size: .9rem; color: #fff; }
.sv-btn:hover { color: #fff; }
.sv-btn-share { background: #22a559; }
.sv-btn-share:hover { background: #1c8c4b; }
.sv-btn-lib { background: var(--sp-navy); }
.sv-btn-lib:hover { background: var(--sp-navy-dark); }
.sv-btn-view { background: var(--sp-orange); }
.sv-btn-view:hover { background: var(--sp-orange-dark); }

@media (max-width: 767.98px) {
    .sv-hero-frame { height: min(45vh, 340px); }
    .sv-play { width: 84px; height: 84px; font-size: 2rem; }
    .sv-feature-title { padding-top: 1.35rem; }
}

/* Related / Other scrollers */
.sv-rel-head { margin-bottom: 1.2rem; align-items: center; }
.sv-slide { flex: 0 0 260px; scroll-snap-align: start; }
@media (max-width: 575.98px) { .sv-slide { flex-basis: 84%; } }

/* ---------------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------------- */
.contact-section { background: #f7f9fc; }

/* Info cards (phone / email) */
.contact-info-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.4rem 1.5rem; border-radius: 1rem;
    color: #fff; text-decoration: none;
    box-shadow: 0 10px 30px rgba(23, 69, 122, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.contact-info-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(23, 69, 122, .18); color: #fff; }
.contact-info-card.navy   { background: linear-gradient(135deg, var(--sp-navy), var(--sp-navy-dark)); }
.contact-info-card.orange { background: linear-gradient(135deg, var(--sp-orange), var(--sp-orange-dark)); }
.contact-info-icon {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.25rem;
    background: rgba(255, 255, 255, .18);
}
.contact-info-body { display: flex; flex-direction: column; line-height: 1.35; }
.contact-info-line { font-weight: 600; font-size: 1.02rem; }
.contact-info-note { opacity: .85; font-size: .82rem; margin-top: .15rem; }

/* Social row under info cards */
.contact-socials { display: flex; gap: .6rem; }
.contact-socials a {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; color: var(--sp-navy);
    background: #fff; border: 1px solid #e6eaf2; text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.contact-socials a:hover { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; transform: translateY(-2px); }

/* Enquiry form card */
.contact-form-card {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1.25rem;
    padding: 2.25rem; box-shadow: 0 12px 40px rgba(17, 20, 24, .05);
}
.contact-form-card .form-label { font-weight: 600; color: var(--sp-navy); font-size: .9rem; }
.contact-form-card .form-control,
.contact-form-card .form-select {
    border: 1px solid #dfe4ee; border-radius: .6rem; padding: .65rem .85rem;
}
.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
    border-color: var(--sp-orange);
    box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .15);
}
.contact-submit { padding: .7rem 1.9rem; font-weight: 600; border-radius: .6rem; }
.contact-alert { border: 0; border-radius: .7rem; background: #e7f6ec; color: #1c7a41; }

/* Honeypot — visually removed but still in the DOM for bots */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
   Blog — listing grid
   --------------------------------------------------------------------------- */
.blog-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 1.1rem 2.2rem rgba(23,69,122,.15); }
.blog-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0f2136; }
.blog-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-visual img { transform: scale(1.06); }
.blog-tag {
    position: absolute; top: .8rem; left: .8rem;
    background: var(--sp-orange); color: #fff;
    font-size: .72rem; font-weight: 600; letter-spacing: .3px;
    padding: .28rem .7rem; border-radius: 50rem;
}
.blog-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }
.blog-date { display: block; color: #8a97ab; font-size: .82rem; margin-bottom: .55rem; }
.blog-title { font-weight: 700; font-size: 1.12rem; line-height: 1.4; color: var(--sp-black); margin-bottom: .6rem; }
.blog-card:hover .blog-title { color: var(--sp-navy); }
.blog-excerpt { color: #5c6a7e; font-size: .9rem; line-height: 1.65; margin-bottom: 1.1rem; }
.blog-more { margin-top: auto; color: var(--sp-orange); font-weight: 600; font-size: .88rem; }
.blog-card:hover .blog-more i { transform: translateX(3px); }
.blog-more i { transition: transform .18s ease; }
.blog-empty {
    padding: 4rem 1rem; color: #8a97ab;
    border: 1px dashed #d8dce6; border-radius: 1rem; background: #f8f9fc;
}
.blog-empty i { font-size: 2.4rem; display: block; margin-bottom: .8rem; color: #c2cbdb; }

/* Category filter */
.blog-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.blog-chip {
    padding: .45rem 1.1rem; border-radius: 50rem;
    background: #f1f3f8; border: 1px solid #e6eaf2; color: var(--sp-navy);
    font-size: .85rem; font-weight: 600; text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.blog-chip:hover { background: #e6eaf2; color: var(--sp-navy); }
.blog-chip.active { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }

/* ---------------------------------------------------------------------------
   Blog — single post
   --------------------------------------------------------------------------- */
.bp-banner { padding: 3.5rem 0 3rem; text-align: left; }
.bp-banner h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.25; }
.bp-banner .page-breadcrumb { justify-content: flex-start; }
.bp-eyebrow {
    display: inline-block; margin-bottom: .8rem;
    background: rgba(245,130,31,.16); color: var(--sp-orange);
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: .3rem .8rem; border-radius: 50rem;
}

.bp-article {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    overflow: hidden; box-shadow: 0 .8rem 1.8rem rgba(23,69,122,.06);
}
.bp-hero { aspect-ratio: 16 / 8; overflow: hidden; background: #0f2136; }
.bp-hero img { width: 100%; height: 100%; object-fit: cover; }
.bp-video { background: #000; }
.bp-video iframe { border: 0; display: block; }
.bp-meta {
    display: flex; flex-wrap: wrap; gap: 1.2rem;
    padding: 1.4rem 1.75rem 0; color: #7a879c; font-size: .85rem;
}
.bp-meta span { display: inline-flex; align-items: center; }
.bp-meta i { color: var(--sp-orange); margin-right: .45rem; }
.bp-body { padding: 1.4rem 1.75rem 0; color: #40495a; line-height: 1.8; }
.bp-body h3 { font-weight: 700; color: var(--sp-navy); font-size: 1.2rem; margin: 1.6rem 0 .7rem; }
.bp-body p { margin-bottom: 1rem; }
.bp-body a { color: var(--sp-orange); text-decoration: none; }
.bp-body a:hover { text-decoration: underline; }
.bp-body code {
    background: #f1f3f8; color: var(--sp-navy);
    padding: .1rem .4rem; border-radius: .35rem; font-size: .88em;
}
.bp-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    margin-top: 1.5rem; padding: 1.4rem 1.75rem; border-top: 1px solid #eef0f5;
}
.bp-share-label { font-weight: 600; color: var(--sp-navy); }
.bp-share-links { display: flex; gap: .6rem; }
.bp-share-links a {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f3f8; color: var(--sp-navy);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.bp-share-links a:hover { background: var(--sp-orange); color: #fff; transform: translateY(-3px); }

/* Sidebar */
.bp-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.5rem; }
.bp-widget {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    padding: 1.5rem 1.6rem; box-shadow: 0 .8rem 1.8rem rgba(23,69,122,.05);
}
.bp-widget-title {
    font-weight: 700; font-size: 1.05rem; color: var(--sp-black);
    margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 2px solid #f1f3f8;
}
.bp-recent { list-style: none; margin: 0; padding: 0; }
.bp-recent li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f1f3f8; }
.bp-recent a { display: flex; gap: .9rem; text-decoration: none; color: inherit; }
.bp-recent-thumb {
    flex-shrink: 0; width: 64px; height: 64px; border-radius: .6rem;
    overflow: hidden; background: #0f2136;
}
.bp-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bp-recent-title { display: block; font-weight: 600; font-size: .9rem; line-height: 1.4; color: var(--sp-black); }
.bp-recent a:hover .bp-recent-title { color: var(--sp-navy); }
.bp-recent-date { display: block; font-size: .78rem; color: #8a97ab; margin-top: .3rem; }
.bp-cta p { color: #5c6a7e; font-size: .9rem; line-height: 1.65; margin-bottom: 1.1rem; }

.bp-back { color: var(--sp-navy); font-weight: 600; text-decoration: none; }
.bp-back:hover { color: var(--sp-orange); }

/* ---------------------------------------------------------------------------
   About page
   --------------------------------------------------------------------------- */
.about-intro { max-width: 820px; }
.about-lead { color: #55617a; font-size: 1.12rem; line-height: 1.8; }

.about-story-section { background: #f8f9fc; }
.about-card {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1.25rem;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 .8rem 1.8rem rgba(23, 69, 122, .06);
}
.about-card-badge {
    width: 64px; height: 64px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1.4rem; color: #fff; font-size: 1.7rem;
    background: linear-gradient(135deg, var(--sp-orange), #ff9d3f);
    box-shadow: 0 .7rem 1.4rem rgba(245, 130, 31, .3);
}
.about-card-badge.navy {
    background: linear-gradient(135deg, var(--sp-navy), #1d6fb8);
    box-shadow: 0 .7rem 1.4rem rgba(23, 69, 122, .3);
}

/* ---------------------------------------------------------------------------
   Tutorials (video listing + detail)
   Reuses the simulation card/scroller styles; adds the video-specific bits.
   --------------------------------------------------------------------------- */

/* Play overlay on a tutorial thumbnail */
.tut-visual::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(15, 32, 62, .18); opacity: 0;
    transition: opacity .2s ease;
}
.tut-visual:hover::after { opacity: 1; }
.tut-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.92);
    z-index: 2; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .92); color: var(--sp-orange);
    font-size: 1.1rem; padding-left: 3px;
    box-shadow: 0 .5rem 1.2rem rgba(15, 32, 62, .3);
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.tut-visual:hover .tut-play { transform: translate(-50%, -50%) scale(1); background: var(--sp-orange); color: #fff; }

/* Duration badge (bottom-right of the thumbnail) */
.tut-duration {
    position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600;
    padding: .2rem .55rem; border-radius: .4rem;
    background: rgba(15, 32, 62, .82); color: #fff;
}

/* Embedded YouTube player at the top of the detail card */
.tut-embed { background: #0f203e; }
.tut-embed iframe { border: 0; display: block; }

/* Price badge shown inline in the tutorial sidebar (not absolutely placed) */
.sv-price-inline { position: static; display: inline-block; }
.about-card-title { font-weight: 700; font-size: 1.5rem; color: var(--sp-navy); margin-bottom: 1rem; }
.about-card p { color: #55617a; line-height: 1.8; margin-bottom: 1.1rem; }

.about-quote {
    border-left: 4px solid var(--sp-orange);
    background: #fbfcfe; border-radius: 0 .75rem .75rem 0;
    padding: 1.1rem 1.4rem; margin: 0 0 1.4rem;
}
.about-quote p { color: var(--sp-black); font-style: italic; line-height: 1.7; margin-bottom: .6rem; }
.about-quote cite { color: var(--sp-orange); font-weight: 700; font-style: normal; font-size: .9rem; }
@media (max-width: 575.98px) {
    .about-card { padding: 1.9rem 1.6rem; }
}

/* ---------------------------------------------------------------------------
   Buy Pro / pricing
   --------------------------------------------------------------------------- */
.pricing-section { background: #f8f9fc; }

.plan-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff; border: 2px solid #eef0f5; border-radius: 1.25rem;
    padding: 2.4rem 2rem 2.6rem;
    box-shadow: 0 .8rem 1.8rem rgba(23, 69, 122, .06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.plan-card:hover {
    transform: translateY(-6px); border-color: var(--sp-orange);
    box-shadow: 0 1.4rem 2.6rem rgba(23, 69, 122, .12);
}
.plan-card.featured {
    border-color: var(--sp-orange);
    box-shadow: 0 1.4rem 3rem rgba(245, 130, 31, .18);
}

.plan-ribbon {
    position: absolute; top: 0; right: 1.6rem;
    background: var(--sp-orange); color: #fff;
    font-size: .74rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    padding: .4rem .9rem; border-radius: 0 0 .7rem .7rem;
    box-shadow: 0 .5rem 1rem rgba(245, 130, 31, .3);
}

.plan-head { text-align: center; padding-bottom: 1.6rem; border-bottom: 1px solid #f1f3f8; }
.plan-name { font-weight: 800; font-size: 1.6rem; color: var(--sp-navy); margin-bottom: .4rem; }
.plan-card.featured .plan-name { color: var(--sp-orange); }
.plan-tagline { color: #7a879c; font-size: .92rem; line-height: 1.5; margin: 0 auto 1.4rem; max-width: 300px; }

.plan-price { display: flex; align-items: baseline; justify-content: center; gap: .1rem; color: var(--sp-black); }
.plan-currency { font-size: 1.4rem; font-weight: 700; align-self: flex-start; margin-top: .5rem; }
.plan-amount { font-size: 3rem; font-weight: 800; line-height: 1; }
.plan-period { font-size: .9rem; color: #8a97ab; margin-left: .35rem; }

.plan-btn { width: 100%; font-weight: 700; padding: .8rem 1rem; border-radius: .7rem; margin-top: 1.6rem; }
.btn-outline-plan {
    background: transparent; border: 2px solid var(--sp-navy); color: var(--sp-navy);
    transition: background .18s ease, color .18s ease;
}
.btn-outline-plan:hover { background: var(--sp-navy); color: #fff; }
.plan-btn.btn-orange { border: 2px solid var(--sp-orange); }

.plan-features { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.plan-features li {
    display: flex; align-items: flex-start; gap: .7rem;
    color: #40495a; font-size: .94rem; padding: .5rem 0;
}
.plan-features li i { color: #cbd3e0; font-size: 1.05rem; margin-top: .1rem; flex-shrink: 0; transition: color .18s ease; }
.plan-card:hover .plan-features li i { color: var(--sp-navy); }
.plan-features li.highlight { font-weight: 700; color: var(--sp-black); }
.plan-features li.highlight i { color: var(--sp-orange); }
.plan-card.featured .plan-features li i { color: var(--sp-orange); }

/* Enterprise / download CTA */
.pricing-cta-note { color: #55617a; font-size: 1.05rem; }
.btn-primary-plan {
    background: var(--sp-navy); color: #fff; font-weight: 600;
    padding: .6rem 1.6rem; border-radius: .7rem; border: 2px solid var(--sp-navy);
    transition: background .18s ease, transform .18s ease;
}
.btn-primary-plan:hover { background: var(--sp-navy-dark); color: #fff; transform: translateY(-2px); }

@media (max-width: 575.98px) {
    .plan-card { padding: 2rem 1.5rem 2.2rem; }
    .plan-amount { font-size: 2.5rem; }
}

/* ============================================================
   Cart
   ============================================================ */
.cart-section { background: #f6f8fb; }

/* --- Items card --- */
.cart-card {
    background: #fff; border: 1px solid #e6eaf1; border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(23, 69, 122, .06);
    overflow: hidden;
}
.cart-card-head {
    align-items: center; gap: 1rem;
    padding: 1rem 1.5rem;
    background: #f9fafc; border-bottom: 1px solid #eceff5;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #8a97ab;
}

.cart-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eceff5;
}
.cart-item:last-child { border-bottom: 0; }

/* Column widths shared by head + rows */
.cart-col-product { flex: 1 1 auto; display: flex; align-items: center; gap: 1rem; min-width: 0; }
.cart-col-price   { flex: 0 0 120px; text-align: right; font-weight: 800; color: var(--sp-navy); font-size: 1.05rem; }
.cart-col-remove  { flex: 0 0 32px; text-align: right; }

.cart-thumb {
    width: 64px; height: 64px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .85rem; overflow: hidden;
    border: 1px solid #eceff5; background: #f6f8fb;
    box-shadow: 0 8px 18px rgba(23, 69, 122, .12);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 .15rem; }
.cart-item-name a { color: var(--sp-black); text-decoration: none; }
.cart-item-name a:hover { color: var(--sp-orange); }
.cart-item-tagline { font-size: .85rem; color: #7a879c; margin: 0 0 .35rem; }
.cart-item-period {
    display: inline-block; font-size: .74rem; font-weight: 600;
    color: var(--sp-navy); background: rgba(23, 69, 122, .08);
    padding: .15rem .55rem; border-radius: 40px;
}

.cart-remove {
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: #f2f4f8; color: #8a97ab; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cart-remove:hover { background: #fdecec; color: #e04b4b; }

/* --- Under-list actions --- */
.cart-continue { color: var(--sp-navy); font-weight: 600; text-decoration: none; }
.cart-continue:hover { color: var(--sp-orange); }

/* --- Order summary --- */
.cart-summary {
    background: #fff; border: 1px solid #e6eaf1; border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(23, 69, 122, .06);
    padding: 1.6rem; position: sticky; top: 90px;
}
.cart-summary-title {
    font-size: 1.15rem; font-weight: 800; color: var(--sp-black);
    margin: 0 0 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid #eceff5;
}
.cart-promo { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.cart-promo-input { border-radius: .6rem; font-size: .9rem; }
.cart-promo-input.is-invalid { border-color: #e04b4b; animation: cartShake .3s; }
.cart-promo-btn {
    flex-shrink: 0; background: var(--sp-navy); color: #fff; font-weight: 600;
    border-radius: .6rem; padding: 0 1.1rem;
}
.cart-promo-btn:hover { background: var(--sp-navy-dark); color: #fff; }
@keyframes cartShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.cart-summary-list { list-style: none; margin: 0; padding: 0; }
.cart-summary-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem 0; color: #55617a; font-size: .95rem;
}
.cart-summary-list li span:last-child { font-weight: 600; color: var(--sp-black); }
.cart-discount { color: #2fa25a !important; }

.cart-summary-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: .9rem 0 1.2rem; padding-top: 1rem; border-top: 1px solid #eceff5;
    font-weight: 800; color: var(--sp-black);
}
.cart-summary-total span:last-child { font-size: 1.5rem; color: var(--sp-navy); }

.cart-checkout {
    width: 100%; font-weight: 700; padding: .85rem 1rem; border-radius: .7rem;
    border: 2px solid var(--sp-orange);
}

.cart-trust {
    display: flex; flex-direction: column; gap: .5rem;
    margin-top: 1.2rem; font-size: .82rem; color: #7a879c;
}
.cart-trust i { color: var(--sp-navy); width: 18px; }

/* --- Empty state --- */
.cart-empty {
    background: #fff; border: 1px solid #e6eaf1; border-radius: 1rem;
    padding: 4rem 1.5rem; max-width: 560px; margin: 0 auto;
    box-shadow: 0 10px 30px rgba(23, 69, 122, .06);
}
.cart-empty-icon {
    width: 84px; height: 84px; margin: 0 auto 1.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 2rem; color: var(--sp-navy);
    background: rgba(23, 69, 122, .08);
}
.cart-empty-title { font-weight: 800; color: var(--sp-black); margin-bottom: .5rem; }
.cart-empty-sub { color: #7a879c; margin-bottom: 1.6rem; }

/* --- Responsive: stack rows into cards on small screens --- */
@media (max-width: 767.98px) {
    .cart-item { flex-wrap: wrap; position: relative; padding: 1.25rem 1.25rem 1.4rem; }
    .cart-col-product { flex: 1 1 100%; padding-right: 2rem; }
    .cart-col-price {
        flex: 1 1 auto; text-align: left; margin-top: .85rem;
    }
    .cart-col-price::before {
        content: attr(data-label); display: block;
        font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
        color: #8a97ab; font-weight: 700; margin-bottom: .2rem;
    }
    .cart-col-remove { position: absolute; top: 1.1rem; right: 1.1rem; flex: none; }
    .cart-summary { position: static; margin-top: .5rem; }
}

/* ---------------------------------------------------------------------------
   Error pages (404, 500, 503, …)
   --------------------------------------------------------------------------- */
.error-page {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 6rem;
    text-align: center;
    background:
        radial-gradient(760px 340px at 78% -18%, rgba(245,130,31,.18), transparent 60%),
        radial-gradient(620px 300px at 12% 118%, rgba(23,69,122,.10), transparent 60%),
        linear-gradient(180deg, #f6f9fd 0%, #eef3fa 100%);
}

/* Giant translucent status code behind the content */
.error-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -52%);
    font-weight: 900;
    font-size: clamp(11rem, 34vw, 26rem);
    line-height: 1;
    letter-spacing: -.04em;
    color: rgba(23,69,122,.06);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}

.error-inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
}

.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px; height: 92px;
    margin-bottom: 1.4rem;
    border-radius: 50%;
    font-size: 2.3rem;
    color: var(--sp-orange);
    background: rgba(245,130,31,.12);
    box-shadow: 0 .8rem 2rem rgba(245,130,31,.20);
}

.error-code {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sp-orange);
    margin-bottom: .4rem;
}

.error-heading {
    font-weight: 800;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    color: var(--sp-navy);
    margin-bottom: .75rem;
}

.error-message {
    font-size: 1.05rem;
    color: #566274;
    margin: 0 auto 2rem;
    max-width: 480px;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-bottom: 2.25rem;
}
.error-actions .btn { padding: .65rem 1.4rem; font-weight: 600; }

.error-links {
    font-size: .92rem;
    color: #7a879b;
}
.error-links-label { font-weight: 600; margin-right: .35rem; }
.error-links a {
    color: var(--sp-navy);
    text-decoration: none;
    font-weight: 600;
    margin: 0 .5rem;
    transition: color .15s ease;
}
.error-links a:hover { color: var(--sp-orange); }

@media (max-width: 575.98px) {
    .error-page { padding: 4rem 0 4.5rem; }
    .error-links a { display: inline-block; margin: .2rem .5rem; }
}

/* ---------------------------------------------------------------------------
   Auth — Login / Register / Forgot password
   --------------------------------------------------------------------------- */
.auth-section { background: #f7f9fc; }

.auth-card {
    max-width: 560px; margin: 0 auto;
    background: #fff; border: 1px solid #eef0f5; border-radius: 1.25rem;
    padding: 2.5rem; box-shadow: 0 12px 40px rgba(17, 20, 24, .06);
}

.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-brand img { height: 44px; width: auto; }

/* Segmented Login / Register toggle */
.auth-toggle {
    display: flex; gap: .3rem; padding: .35rem;
    background: #eef2f8; border-radius: .8rem; margin-bottom: 1.75rem;
}
.auth-toggle button {
    flex: 1; border: 0; background: transparent;
    padding: .6rem 1rem; border-radius: .6rem;
    font-weight: 600; font-size: .95rem; color: var(--sp-navy);
    cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-toggle button:hover { color: var(--sp-orange); }
.auth-toggle button.active {
    background: #fff; color: var(--sp-orange);
    box-shadow: 0 2px 10px rgba(17, 20, 24, .1);
}

/* Panes */
.auth-pane { display: none; }
.auth-pane.active { display: block; animation: authFade .25s ease; }
@keyframes authFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fields (mirrors the contact form styling) */
.auth-card .form-label { font-weight: 600; color: var(--sp-navy); font-size: .88rem; }
.auth-card .form-control,
.auth-card .form-select {
    border: 1px solid #dfe4ee; border-radius: .6rem; padding: .65rem .85rem;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
    border-color: var(--sp-orange);
    box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .15);
}

/* Password field with show / hide toggle */
.auth-pw { position: relative; }
/* "I am a…" checklist on the Register pane */
.auth-roles { margin: 0; padding: 0; border: 0; }
.auth-roles legend { float: none; width: auto; padding: 0; font-size: inherit; }
.auth-roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.25rem; }
.auth-roles .form-check { margin: 0; }
.auth-roles .form-check-input:checked { background-color: var(--sp-navy); border-color: var(--sp-navy); }
.auth-roles.is-invalid .form-check-input { border-color: var(--bs-form-invalid-border-color); }
@media (max-width: 575.98px) { .auth-roles-grid { grid-template-columns: 1fr; } }
.auth-pw .form-control { padding-right: 2.75rem; }
.auth-pw-toggle {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 2.75rem; border: 0; background: transparent;
    color: #8a97ab; cursor: pointer; border-radius: 0 .6rem .6rem 0;
    transition: color .15s ease;
}
.auth-pw-toggle:hover { color: var(--sp-navy); }

/* Remember me + forgot row */
.auth-meta {
    display: flex; align-items: center; justify-content: space-between;
    margin: .9rem 0 1.4rem;
}
.auth-meta .form-check-label { font-size: .88rem; color: #5c6a7e; }
.auth-meta .form-check-input:checked { background-color: var(--sp-orange); border-color: var(--sp-orange); }
.auth-link, .auth-alt a {
    color: var(--sp-orange); font-weight: 600; font-size: .88rem; text-decoration: none;
}
.auth-link:hover, .auth-alt a:hover { color: var(--sp-orange-dark); text-decoration: underline; }

.auth-submit { padding: .75rem 1.9rem; font-weight: 600; border-radius: .6rem; }

/* Divider */
.auth-divider {
    display: flex; align-items: center; gap: 1rem;
    color: #8a97ab; font-size: .82rem; margin: 1.6rem 0;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: #e6eaf2;
}

/* Social sign-in */
.auth-social { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.auth-social-btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .7rem 1rem; border: 1px solid #e0e5ee; border-radius: .6rem;
    background: #fff; color: var(--sp-navy); font-weight: 600; font-size: .9rem;
    text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-social-btn:hover {
    border-color: #c9d2e2; box-shadow: 0 6px 16px rgba(23, 69, 122, .1);
    transform: translateY(-2px); color: var(--sp-navy);
}
.auth-social-btn .fa-google { color: #ea4335; }

/* Bottom alt link */
.auth-alt { text-align: center; margin: 1.5rem 0 0; color: #5c6a7e; font-size: .92rem; }

/* Forgot-password intro */
.auth-forgot-head { text-align: center; margin-bottom: 1.6rem; }
.auth-forgot-icon {
    display: inline-grid; place-items: center; width: 60px; height: 60px;
    border-radius: 50%; margin-bottom: 1rem; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--sp-orange), #ff9d3f);
}
.auth-forgot-head h3 { font-weight: 700; color: var(--sp-black); font-size: 1.3rem; margin-bottom: .5rem; }
.auth-forgot-head p { color: #7a879c; font-size: .92rem; max-width: 22rem; margin: 0 auto; }

@media (max-width: 575.98px) {
    .auth-card { padding: 1.75rem 1.35rem; }
    .auth-social { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Account dashboard (profile & other /account/* pages)
   --------------------------------------------------------------------------- */
.account-section { background: #f7f9fc; }

/* Sidebar --------------------------------------------------------------- */
.account-sidebar {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1.25rem;
    overflow: hidden; box-shadow: 0 12px 40px rgba(17, 20, 24, .06);
    position: sticky; top: 90px;
}
.account-user {
    position: relative; text-align: center;
    padding: 2rem 1.25rem 1.5rem;
    background:
        radial-gradient(420px 180px at 80% -40%, rgba(245,130,31,.18), transparent 60%),
        linear-gradient(135deg, var(--sp-navy), var(--sp-navy-dark));
    color: #fff;
}
.account-avatar {
    width: 84px; height: 84px; border-radius: 50%;
    object-fit: cover; background: #fff; padding: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.account-user-status {
    position: absolute; top: 2rem; left: 50%; margin-left: 24px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #2ecc71; border: 2px solid #fff;
}
.account-user-name { font-weight: 700; font-size: 1.15rem; margin: .85rem 0 .15rem; }
.account-user-email { color: #cdd6e2; font-size: .85rem; margin: 0; word-break: break-word; }
.account-verify {
    margin: .75rem 0 0; padding: .5rem .75rem;
    background: rgba(245, 130, 31, .15); border: 1px solid rgba(245, 130, 31, .45);
    font-size: .8rem; color: #ffd2a8;
}
.account-verify button {
    display: block; margin: .2rem auto 0; padding: 0;
    background: none; border: 0; color: #fff;
    font-weight: 600; text-decoration: underline;
}
.account-verify-status { margin: .75rem 0 0; font-size: .8rem; color: #8ee6b1; }

.account-menu ul { list-style: none; margin: 0; padding: .5rem; }
.account-menu-link {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem 1rem; border-radius: .7rem;
    color: var(--sp-navy); font-weight: 600; font-size: .93rem;
    text-decoration: none; transition: background .16s ease, color .16s ease;
}
button.account-menu-link { width: 100%; border: 0; background: none; text-align: left; }
.account-menu-link i { width: 1.25rem; text-align: center; color: #9aa6bb; transition: color .16s ease; }
.account-menu-link:hover { background: #f1f5fb; color: var(--sp-orange); }
.account-menu-link:hover i { color: var(--sp-orange); }
.account-menu-link.active { background: var(--sp-orange); color: #fff; }
.account-menu-link.active i { color: #fff; }
.account-menu-link.disabled { color: #b3bccb; pointer-events: none; }
.account-menu-link.disabled i { color: #cfd6e2; }

/* Content card ---------------------------------------------------------- */
.account-card {
    background: #fff; border: 1px solid #eef0f5; border-radius: 1.25rem;
    box-shadow: 0 12px 40px rgba(17, 20, 24, .06); overflow: hidden;
}
.account-card-header { padding: 1.25rem 1.75rem; border-bottom: 1px solid #eef0f5; }
.account-card-title { font-weight: 700; font-size: 1.15rem; color: var(--sp-navy); margin: 0; }

.account-form { padding: 1.75rem; }
.account-form .form-label { font-weight: 600; color: var(--sp-navy); font-size: .88rem; }
.account-form .form-control,
.account-form .form-select {
    border: 1px solid #dfe4ee; border-radius: .6rem; padding: .65rem .85rem;
}
.account-form .form-control:focus,
.account-form .form-select:focus {
    border-color: var(--sp-orange);
    box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .15);
}
.account-form .form-control[readonly] { background: #f4f6fa; color: #6b7688; cursor: not-allowed; }
.account-hint { display: block; margin-top: .35rem; color: #9aa6bb; font-size: .8rem; }
.account-hint-ok { color: #27ae60; }
.account-hint-warn { color: #e67e22; }
.account-hint-error { color: #dc3545; }
.account-hint-link { padding: 0; background: none; border: 0; color: inherit; font-weight: 700; text-decoration: underline; }

.account-form-actions {
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid #eef0f5; text-align: right;
}
.account-form-actions .btn { padding: .7rem 1.8rem; font-weight: 600; border-radius: .6rem; }

@media (max-width: 991.98px) {
    .account-sidebar { position: static; }
}
@media (max-width: 575.98px) {
    .account-form { padding: 1.35rem; }
    .account-form-actions { text-align: stretch; }
    .account-form-actions .btn { width: 100%; }
}

/* Shared content-card body padding + small header helpers ----------------- */
.account-card-body { padding: 1.75rem; }
.account-card-link {
    font-size: .85rem; font-weight: 600; color: var(--sp-orange); text-decoration: none;
}
.account-card-link:hover { color: var(--sp-orange-dark); }
.account-count {
    font-size: .82rem; font-weight: 600; color: #6b7688;
    background: #f1f5fb; border-radius: 2rem; padding: .3rem .8rem;
}

/* Dashboard — welcome + stat cards --------------------------------------- */
.account-welcome {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; padding: 1.5rem 1.75rem;
}
.account-welcome-title { font-weight: 700; font-size: 1.3rem; color: var(--sp-navy); }

.account-stat {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem;
    padding: 1.25rem; height: 100%;
    box-shadow: 0 12px 40px rgba(17, 20, 24, .06);
}
.account-stat-icon {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: .9rem;
    color: #fff; font-size: 1.25rem;
}
.account-stat-value { font-weight: 800; font-size: 1.5rem; color: var(--sp-black); line-height: 1.1; }
.account-stat-label { font-size: .82rem; color: #7a879c; }
a.account-stat { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.account-stat:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(17, 20, 24, .1); }

/* Dashboard — recently saved list ---------------------------------------- */
.account-recent { list-style: none; margin: 0; padding: 0; }
.account-recent-item {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1.75rem; border-top: 1px solid #eef0f5;
}
.account-recent-item:first-child { border-top: 0; }
.account-recent-thumb { flex-shrink: 0; width: 72px; height: 48px; overflow: hidden; background: #f1f5fb; }
.account-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.account-recent-body { flex: 1; min-width: 0; }
.account-recent-title {
    display: block; font-weight: 600; color: var(--sp-navy); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-recent-title:hover { color: var(--sp-orange); }
.account-recent-meta { font-size: .8rem; color: #7a879c; }
@media (max-width: 575.98px) {
    .account-recent-item { padding: .9rem 1rem; }
    .account-recent-item .btn { display: none; }
}

/* Tables ----------------------------------------------------------------- */
.account-table { font-size: .9rem; margin-bottom: 0; --bs-table-bg: transparent; }
.account-table thead th {
    background: #f7f9fc; color: var(--sp-navy); font-weight: 700;
    border-top: 0; border-bottom: 1px solid #e7ecf3; white-space: nowrap;
    text-transform: uppercase; font-size: .74rem; letter-spacing: .5px;
    padding: .95rem 1rem;
}
.account-table tbody td {
    color: #4a5568; border-bottom: 1px solid #f0f2f7;
    vertical-align: middle; padding: 1rem; transition: background .14s ease;
}
.account-table tbody tr:last-child td { border-bottom: 0; }
.account-table tbody tr:hover td { background: #f7f9fc; }
.account-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    color: var(--sp-navy); font-weight: 600; letter-spacing: .2px;
}

/* Flush variant — first/last cells align to the card header padding
   (used when the table sits directly in the card, e.g. dashboard). */
.account-table-flush > :not(caption) > * > *:first-child { padding-left: 1.75rem; }
.account-table-flush > :not(caption) > * > *:last-child  { padding-right: 1.75rem; }

.account-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 700;
    padding: .34rem .75rem; border-radius: 2rem; line-height: 1;
}
.account-badge::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.account-badge           { background: #eef2f8; color: #5a6b85; }
.account-badge.is-danger  { background: #fdecec; color: #e74c3c; }
.account-badge.is-success { background: #e8f8f0; color: #1e9e5e; }
.account-badge.is-warning { background: #fef5e7; color: #d68910; }

.account-table-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.account-search {
    position: relative; display: flex; align-items: center;
    flex: 1; max-width: 320px; margin: 0;
}
.account-search i { position: absolute; left: .9rem; color: #9aa6bb; font-size: .85rem; }
.account-search input {
    width: 100%; border: 1px solid #dfe4ee; border-radius: .6rem;
    padding: .6rem .85rem .6rem 2.3rem; font-size: .9rem;
}
.account-search input:focus {
    outline: none; border-color: var(--sp-orange);
    box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .15);
}

/* Simulation cards (favorites & purchased) ------------------------------- */
.account-sim {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid #eef0f5; border-radius: 1rem; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.account-sim:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(17, 20, 24, .1); }
.account-sim-visual { position: relative; display: block; aspect-ratio: 16 / 10; background: #f2f5fa; overflow: hidden; }
.account-sim-visual img { width: 100%; height: 100%; object-fit: cover; }
.account-program-visual { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #17457a, #0f2f52); }
.account-program-visual i { font-size: 2.6rem; color: rgba(255, 255, 255, .9); transition: transform .18s ease; }
.account-sim:hover .account-program-visual i { transform: scale(1.08); }
/* Program detail — course-style menu tabs */
.account-tabs { gap: .4rem; border-bottom: 2px solid #eef0f5; flex-wrap: wrap; }
.account-tab {
    display: inline-flex; align-items: center; gap: .1rem;
    background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: .7rem 1.1rem; font-weight: 600; font-size: .92rem; color: #6b7890;
    cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.account-tab:hover { color: var(--sp-navy); }
.account-tab.active { color: var(--sp-orange); border-bottom-color: var(--sp-orange); }
.account-tab-count {
    margin-left: .55rem; font-size: .72rem; font-weight: 700; line-height: 1;
    padding: .18rem .45rem; border-radius: 2rem; background: #eef2f8; color: #5a6b85;
}
.account-tab.active .account-tab-count { background: rgba(245, 130, 31, .15); color: var(--sp-orange); }
.account-pane-title { font-size: 1.05rem; font-weight: 700; color: var(--sp-navy); }

/* Program modal pagers (joined users, pending invites) */
.program-pager .page-link { color: var(--sp-navy); cursor: pointer; }
.program-pager .page-link:focus { box-shadow: none; }
.program-pager .page-item.active .page-link { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }

/* Settings modal */
.settings-group-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sp-orange); margin-bottom: .9rem; }
.settings-divider { margin: 1.4rem 0; border-color: #eef0f5; opacity: 1; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
.settings-row + .settings-row { border-top: 1px solid #f3f5f9; }
.settings-row-label { display: block; font-weight: 600; font-size: .92rem; color: var(--sp-navy); }
.settings-row-help { display: block; color: #9aa6bb; font-size: .78rem; }
.settings-danger {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem; border: 1px solid #f6d4d4; background: #fdf3f3; border-radius: .75rem;
}
#settingsModal .form-check-input:checked { background-color: var(--sp-orange); border-color: var(--sp-orange); }
#settingsModal .form-check-input:focus { border-color: var(--sp-orange); box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .2); }
.modal .form-control:focus, .modal .form-select:focus { border-color: var(--sp-orange); box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .15); }

/* Clickable table title (assessments) */
.account-link-title { color: var(--sp-navy); font-weight: 600; text-decoration: none; }
.account-link-title:hover { color: var(--sp-orange); text-decoration: underline; }

/* Question builder */
.qb-builder { border: 1px solid #e6ebf2; background: #f9fbfe; border-radius: .9rem; padding: 1.25rem 1.35rem; }
.qb-builder-title { font-size: 1rem; font-weight: 700; color: var(--sp-navy); margin-bottom: 1rem; }
.qb-opt-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.qb-opt-mark { display: inline-flex; }
.qb-opt-mark .form-check-input { margin: 0; width: 1.15rem; height: 1.15rem; cursor: pointer; }
.qb-opt-mark .form-check-input:checked { background-color: var(--sp-orange); border-color: var(--sp-orange); }
.qb-opt-text { flex: 1; }

/* Question cards */
.qb-item { border: 1px solid #eef0f5; border-radius: .9rem; padding: 1rem 1.1rem; margin-bottom: .9rem; background: #fff; }
.qb-item:hover { border-color: #dfe4ee; }
.qb-item-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.qb-num { flex-shrink: 0; font-weight: 800; color: var(--sp-orange); font-size: .95rem; }
.qb-item-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.qb-item-actions { margin-left: auto; display: flex; gap: .4rem; }
.qb-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #5a6b85; background: #eef2f8; padding: .28rem .6rem; border-radius: 2rem; }
.qb-tag-marks { color: var(--sp-orange); background: rgba(245, 130, 31, .12); }
.qb-question { font-weight: 600; color: var(--sp-navy); margin: 0 0 .6rem; }
.qb-options-view { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.qb-options-view li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: #5c6a7e; }
.qb-options-view li i { color: #c2cbdb; }
.qb-options-view li.is-correct { color: var(--sp-navy); font-weight: 600; }
.qb-options-view li.is-correct i { color: #1e9e5e; }
.qb-answer { margin: 0; font-size: .9rem; color: var(--sp-navy); background: #e8f8f0; border: 1px solid #cdeede; border-radius: .55rem; padding: .5rem .75rem; display: inline-block; }
.qb-answer-label { font-weight: 700; color: #1e9e5e; margin-right: .35rem; }

/* Account-quota card (temporary logins) */
.quota-card { display: flex; flex-wrap: wrap; gap: 1px; background: #eef0f5; border: 1px solid #eef0f5; border-radius: .85rem; overflow: hidden; }
.quota-item { flex: 1 1 0; min-width: 100px; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1rem .75rem; background: #fff; text-align: center; }
.quota-value { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--sp-navy); }
.quota-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #9aa6bb; }

/* Student assessment result modal */
.result-score { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-bottom: 1rem; }
.result-score-value { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--sp-navy); }
.result-score-pct { font-size: .95rem; font-weight: 700; color: var(--sp-orange); }
.result-stat { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .85rem .5rem; border-radius: .75rem; background: #f2f5fa; }
.result-stat-value { font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--sp-navy); }
.result-stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #9aa6bb; }
.result-stat.is-correct { background: #e8f8f0; }
.result-stat.is-correct .result-stat-value { color: #1e9e5e; }
.result-stat.is-incorrect { background: #fdecec; }
.result-stat.is-incorrect .result-stat-value { color: #e74c3c; }

/* Student assessment attempt — split-screen (simulation + assessment) */
.exam-split { display: flex; width: 100%; height: calc(100dvh - 68px); overflow: hidden; background: var(--sp-navy); }
.exam-pane { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.exam-sim { width: 75%; flex-shrink: 0; position: relative; }
.exam-sim-frame { flex: 1 1 auto; min-height: 0; background: #16394f; }
.exam-sim-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.exam-sim-tools { position: absolute; top: .85rem; left: .85rem; z-index: 6; display: flex; gap: .5rem; }
.exam-tool {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--sp-navy); border: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25); text-decoration: none; cursor: pointer; transition: all .15s ease;
}
.exam-tool:hover { background: var(--sp-orange); color: #fff; transform: scale(1.06); }
.exam-split.is-dragging .exam-sim-tools { pointer-events: none; }

.instruction-list { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .7rem; }
.instruction-list li { color: var(--sp-navy); line-height: 1.55; }
.instruction-list li::marker { color: var(--sp-orange); font-weight: 700; }

.exam-gutter { flex: 0 0 12px; cursor: col-resize; background: #eef0f5; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.exam-gutter:hover, .exam-split.is-dragging .exam-gutter { background: var(--sp-orange); }
.exam-gutter-grip { width: 4px; height: 44px; border-radius: 3px; background: #b7c1d2; }
.exam-gutter:hover .exam-gutter-grip, .exam-split.is-dragging .exam-gutter-grip { background: #fff; }
.exam-split.is-dragging { user-select: none; }
.exam-split.is-dragging iframe { pointer-events: none; }

.exam-assess { flex: 1 1 auto; min-width: 280px; background: #fff; }
.exam-assess-head { flex-shrink: 0; padding: 1rem 1.25rem; border-bottom: 1px solid #eef0f5; }
.exam-assess-title { font-size: 1.05rem; font-weight: 700; color: var(--sp-navy); }
.exam-assess-meta { font-size: .78rem; color: #9aa6bb; margin: .5rem 0 .65rem; }
.exam-assess-body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem; background: #f8f9fc; }

/* Attempt widgets (shared by the assessment pane) */
.attempt-timer { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--sp-navy); background: #eef2f8; border-radius: 2rem; padding: .35rem .75rem; white-space: nowrap; }
.attempt-timer.is-danger { color: #e74c3c; background: #fdecec; }
.attempt-bar-progress { display: flex; align-items: center; gap: .6rem; }
.attempt-bar-progress .account-progress { flex: 1 1 auto; min-width: 80px; }
.attempt-bar-count { font-size: .78rem; font-weight: 600; color: #9aa6bb; white-space: nowrap; }

.attempt-palette { display: flex; flex-wrap: wrap; gap: .4rem; }
.attempt-pnum { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: .55rem; border: 1px solid #e2e7f0; background: #fff; font-weight: 700; font-size: .85rem; color: var(--sp-navy); text-decoration: none; transition: all .15s ease; }
.attempt-pnum:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
.attempt-pnum.is-answered { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }

.attempt-q { scroll-margin-top: 12px; background: #fff; border: 1px solid #eef0f5; border-radius: .85rem; padding: 1.1rem; transition: box-shadow .3s ease; }
.attempt-q.is-flash { box-shadow: 0 0 0 3px rgba(245, 130, 31, .35); }
.attempt-q-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
.attempt-q-num { font-weight: 800; color: var(--sp-orange); font-size: .95rem; }
.attempt-q-meta { display: flex; gap: .35rem; flex-wrap: wrap; }
.attempt-q-text { font-size: .98rem; font-weight: 600; color: var(--sp-navy); margin-bottom: .9rem; }

.attempt-options { display: flex; flex-direction: column; gap: .5rem; }
.attempt-opt { display: flex; align-items: center; gap: .65rem; margin: 0; cursor: pointer; border: 1px solid #e2e7f0; border-radius: .65rem; padding: .6rem .8rem; background: #fff; transition: all .15s ease; }
.attempt-opt:hover { border-color: #c4d0e2; background: #f7f9fc; }
.attempt-opt:has(input:checked) { border-color: var(--sp-orange); background: rgba(245, 130, 31, .07); }
.attempt-opt .form-check-input { margin: 0; flex-shrink: 0; }
.attempt-opt-text { color: var(--sp-navy); }
.attempt-input { max-width: 100%; }

/* Bottom-sheet drag handle (mobile only) */
.exam-sheet-handle { display: none; }

@media (max-width: 991px) {
    .exam-split { display: block; height: auto; }
    .exam-sim { width: 100% !important; height: calc(100dvh - 68px); }
    .exam-gutter { display: none; }

    /* Assessment becomes a draggable bottom sheet over the simulation.
       Capped height keeps the top of the sim visible & tappable even when fully up. */
    .exam-assess {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010;
        height: 62dvh; min-width: 0;
        border-radius: 1.1rem 1.1rem 0 0;
        box-shadow: 0 -10px 30px rgba(15, 47, 82, .22);
        transform: translateY(calc(100% - var(--sheet-peek, 140px)));
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    }
    .exam-assess.is-dragging { transition: none; }
    .exam-assess-body { overscroll-behavior: contain; }

    /* Handle + header act as the drag grip (bigger, easier to grab) */
    .exam-sheet-handle {
        display: flex; align-items: center; justify-content: center;
        padding: .8rem 0 .5rem; flex-shrink: 0; cursor: grab; touch-action: none;
    }
    .exam-sheet-handle span { width: 44px; height: 5px; border-radius: 3px; background: #c4cdda; display: block; }
    .exam-assess-head { cursor: grab; touch-action: none; }
    .exam-assess.is-dragging .exam-sheet-handle,
    .exam-assess.is-dragging .exam-assess-head { cursor: grabbing; }
}

/* Student progress bar */
.account-progress { height: 6px; border-radius: 3px; background: #eef0f5; overflow: hidden; }
.account-progress-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--sp-orange), #ff9d3f); }
.account-progress-label { display: inline-block; margin-top: .25rem; font-size: .72rem; color: #9aa6bb; }
.account-sim-tag {
    position: absolute; top: .6rem; right: .6rem;
    font-size: .7rem; font-weight: 700; padding: .25rem .6rem; border-radius: 2rem; color: #fff;
}
.account-sim-tag.is-free { background: #1e9e5e; }
.account-sim-tag.is-paid { background: var(--sp-orange); }
.account-sim-body { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1rem; flex: 1; }
.account-sim-topic { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sp-orange); }
.account-sim-title { font-size: .98rem; font-weight: 700; margin: 0; line-height: 1.3; }
.account-sim-title a { color: var(--sp-navy); text-decoration: none; }
.account-sim-title a:hover { color: var(--sp-orange); }
.account-sim-meta { font-size: .78rem; color: #9aa6bb; }
.account-sim-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.account-sim-remove {
    border: 0; background: #fdecec; color: #e74c3c;
    width: 34px; height: 34px; border-radius: .55rem; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.account-sim-remove:hover { background: #e74c3c; color: #fff; }

/* Empty state ------------------------------------------------------------ */
.account-empty { text-align: center; padding: 3rem 1rem; color: #7a879c; }
.account-empty i { font-size: 2.5rem; color: #cbd3e0; margin-bottom: 1rem; display: block; }

/* Program builder (Add Program) ----------------------------------------- */
.builder-title-input { box-shadow: none !important; }
.builder-title-input:focus { box-shadow: none !important; background: #f7f8fb; border-radius: .4rem; }

/* Chapters list */
.chapter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.chapter-item {
    display: flex; align-items: stretch; gap: .25rem;
    border: 1px solid #eef0f5; border-radius: .7rem; overflow: hidden;
    background: #fbfcfe; transition: border-color .15s ease, background .15s ease;
}
.chapter-item:hover { border-color: #d9deea; }
.chapter-item.active { border-color: var(--sp-navy); background: #fff; box-shadow: 0 0 0 1px var(--sp-navy) inset; }
.chapter-item-main {
    flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    border: 0; background: transparent; padding: .7rem .85rem; cursor: pointer; text-align: left;
    color: var(--sp-navy); font-weight: 600; font-size: .92rem;
}
.chapter-item-count {
    flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef0f5; color: #55607a; font-size: .72rem; font-weight: 700;
}
.chapter-item.active .chapter-item-count { background: rgba(245,130,31,.15); color: var(--sp-orange); }
.chapter-item-edit,
.chapter-item-del {
    border: 0; background: transparent; color: #b7c0d0; padding: 0 .55rem; cursor: pointer;
    transition: color .15s ease;
}
.chapter-item-edit:hover { color: var(--sp-navy); }
.chapter-item-del:hover { color: #e74c3c; }
.chapter-item.active .chapter-item-edit { color: #8a94a6; }

/* Activities list */
.activity-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.activity-item {
    display: flex; align-items: center; gap: .75rem;
    border: 1px solid #eef0f5; border-radius: .7rem; background: #fbfcfe; padding: .7rem .85rem;
}
.activity-item-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef2fb; color: var(--sp-navy);
}
.activity-item-title { flex: 1; font-weight: 600; color: var(--sp-navy); font-size: .92rem; }
.activity-item-meta { flex-shrink: 0; color: #8a94a6; font-size: .78rem; }
.activity-item-preview,
.activity-item-edit,
.activity-item-del { border: 0; background: transparent; color: #b7c0d0; cursor: pointer; padding: .2rem .35rem; transition: color .15s ease; }
.activity-item-preview:hover { color: var(--sp-orange); }
.activity-item-edit:hover { color: var(--sp-navy); }
.activity-item-del:hover { color: #e74c3c; }

/* Insert-element palette */
.element-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 575.98px) { .element-palette { grid-template-columns: repeat(2, 1fr); } }
.element-tile {
    display: flex; align-items: center; gap: .6rem;
    border: 1px solid #e6e9f2; border-radius: .65rem; background: #fff; padding: .7rem .8rem;
    cursor: pointer; color: var(--sp-navy); font-weight: 600; font-size: .88rem;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.element-tile:hover { border-color: var(--sp-orange); background: #fff7f0; }
.element-tile:active { transform: translateY(1px); }
.element-tile i { font-size: 1.05rem; color: var(--sp-orange); width: 20px; text-align: center; }

/* Inserted element blocks */
.element-block { border: 1px solid #eef0f5; border-radius: .7rem; background: #fbfcfe; margin-bottom: .85rem; }
.element-block-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .85rem; border-bottom: 1px solid #eef0f5;
}
.element-block-title { font-weight: 700; color: var(--sp-navy); font-size: .88rem; }
.element-block-del { border: 0; background: transparent; color: #b7c0d0; cursor: pointer; transition: color .15s ease; }
.element-block-del:hover { color: #e74c3c; }
.element-block-body { padding: .85rem; }

/* Fake rich-text toolbar */
.rte-toolbar {
    display: flex; flex-wrap: wrap; gap: .25rem;
    border: 1px solid #e6e9f2; border-bottom: 0; border-radius: .5rem .5rem 0 0;
    padding: .35rem .5rem; background: #f7f8fb;
}
.rte-btn {
    border: 1px solid transparent; background: transparent; border-radius: .35rem;
    width: 30px; height: 28px; color: #55607a; cursor: pointer; font-size: .82rem;
}
.rte-btn:hover { background: #fff; border-color: #e6e9f2; color: var(--sp-navy); }
.rte-area { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Ghost "add" tile (chapters / activities) */
.add-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    width: 100%; min-height: 108px; padding: 1rem;
    border: 2px dashed #d9deea; border-radius: .7rem; background: transparent;
    color: #8a94a6; cursor: pointer; font-weight: 600; font-size: .9rem;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.add-tile i { font-size: 1.4rem; }
.add-tile:hover { border-color: var(--sp-orange); color: var(--sp-orange); background: #fff7f0; }
/* Breathing room between the chapter list and the "Add Chapter" tile */
.chapter-list:not(:empty) + .add-tile,
.chapter-list:not(:empty) ~ .add-tile { margin-top: .85rem; }

/* Chapters | Activities divider — with padding either side of the rule */
@media (min-width: 992px) {
    .builder-chapters  { border-right: 1px solid #eef0f5; padding-right: 2rem; }
    .builder-activities { padding-left: 2rem; }
}

/* Added-element rows (inside the activity editor) */
.element-row {
    display: flex; align-items: center; gap: .75rem;
    border: 1px solid #eef0f5; border-radius: .6rem; background: #fbfcfe; padding: .55rem .75rem; margin-bottom: .5rem;
}
.element-row-icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff3e8; color: var(--sp-orange);
}
.element-row-body { flex: 1; min-width: 0; }
.element-row-type { font-weight: 700; color: var(--sp-navy); font-size: .82rem; }
.element-row-summary { color: #8a94a6; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.element-row-btn { border: 0; background: transparent; color: #b7c0d0; cursor: pointer; padding: .2rem .35rem; transition: color .15s ease; }
.element-row-btn:hover { color: var(--sp-navy); }
.element-row-btn.is-del:hover { color: #e74c3c; }

/* Single-element editor panel */
.element-editor { border: 1px solid #e6e9f2; border-radius: .8rem; overflow: hidden; }
.element-editor-head {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
    background: #f7f8fb; border-bottom: 1px solid #e6e9f2;
}
.element-editor-head .back-btn { border: 0; background: transparent; color: var(--sp-navy); cursor: pointer; font-size: 1rem; }
.element-editor-title { font-weight: 700; color: var(--sp-navy); }
.element-editor-title i { color: var(--sp-orange); margin-right: .4rem; }
.element-editor-body { padding: 1rem; }
.element-editor-actions {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .75rem .9rem; border-top: 1px solid #e6e9f2; background: #fbfcfe;
}

/* Activity preview */
.activity-preview { border: 1px solid #eef0f5; border-radius: .8rem; padding: 1.25rem; background: #fff; }
.preview-el { margin-bottom: 1.25rem; }
.preview-el:last-child { margin-bottom: 0; }
.preview-sim {
    border: 1px solid #e6e9f2; border-radius: .6rem; background: #f7f8fb;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
    min-height: 200px; color: #55607a; text-align: center; padding: 1.5rem;
}
.preview-sim-icon { font-size: 2.4rem; color: var(--sp-orange); }
.preview-flags { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: .25rem; }
.preview-flag { font-size: .72rem; background: #eef2fb; color: var(--sp-navy); border-radius: 999px; padding: .12rem .55rem; }
.preview-note { background: #fffbf5; border-left: 3px solid var(--sp-orange); padding: .6rem .85rem; border-radius: .4rem; }

/* Whole-program preview */
.pp-cover { border: 1px solid #eef0f5; border-radius: .7rem; padding: 1.25rem; background: #fbfcfe; margin-bottom: 1.5rem; }
.pp-cover h3 { color: var(--sp-navy); }
.pp-chapter { margin-bottom: 1.75rem; }
.pp-chapter:last-child { margin-bottom: 0; }
.pp-chapter-title { color: var(--sp-navy); border-bottom: 2px solid #eef0f5; padding-bottom: .4rem; margin-bottom: .75rem; }
.pp-activity { border-left: 3px solid var(--sp-orange); padding: .1rem 0 .1rem 1rem; margin-bottom: 1.25rem; }
.pp-activity:last-child { margin-bottom: 0; }
.pp-activity-title { color: var(--sp-navy); font-size: 1.05rem; margin-bottom: .6rem; }

/* Program 2 — CKEditor-like document editor ----------------------------- */
.doc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem;
    border: 1px solid #e6e9f2; border-bottom: 0; border-radius: .6rem .6rem 0 0;
    padding: .4rem .5rem; background: #f7f8fb;
}
.doc-tb-btn {
    border: 1px solid transparent; background: transparent; border-radius: .35rem;
    min-width: 32px; height: 30px; padding: 0 .4rem; color: #55607a; cursor: pointer; font-size: .9rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.doc-tb-btn:hover { background: #fff; border-color: #e6e9f2; color: var(--sp-navy); }
.doc-tb-btn.is-active { background: #fff7f0; border-color: var(--sp-orange); color: var(--sp-orange); }
.doc-tb-sep { width: 1px; height: 20px; background: #dfe3ec; margin: 0 .3rem; }
.doc-tb-insert {
    border: 1px solid var(--sp-orange); background: var(--sp-orange); color: #fff;
    border-radius: .4rem; padding: .25rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.doc-tb-insert:hover { filter: brightness(.96); }
.doc-insert-menu { max-height: 320px; overflow: auto; }
.doc-editor {
    border: 1px solid #e6e9f2; border-radius: 0 0 .6rem .6rem; background: #fff;
    min-height: 240px; max-height: 460px; padding: 1rem 1.1rem; margin-bottom: 1rem;
    color: var(--sp-navy); line-height: 1.6; overflow: auto;
}
.doc-editor:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(245,130,31,.25); }
.doc-editor:empty:before { content: attr(data-placeholder); color: #9aa3b2; }
.doc-editor p { margin-bottom: .6rem; }

/* Inline element embed inside the document */
.doc-embed {
    position: relative; box-sizing: border-box;
    border: 1px solid #e6e9f2; border-radius: .6rem; background: #fbfcfe;
    padding: .85rem; margin: .75rem 0; cursor: grab;
}
/* when the embed has an explicit width/height, its box fills the wrapper */
.doc-embed .preview-sim { width: 100%; height: 100%; min-height: 90px; }
/* real rendered media inside an embed */
.doc-media-img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: .4rem; }
.doc-media-frame { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; border-radius: .4rem; background: #fff; }
.doc-embed:active { cursor: grabbing; }
.doc-embed.is-dragging { opacity: .45; outline: 2px dashed var(--sp-orange); }
/* horizontal alignment (block with a set width) */
.doc-embed.align-left   { margin-left: 0;    margin-right: auto; }
.doc-embed.align-center { margin-left: auto; margin-right: auto; }
.doc-embed.align-right  { margin-left: auto; margin-right: 0; }
/* alignment picker inside the element editor */
.element-editor-align { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem .75rem; }
#elementAlign .btn.active { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
/* buttons inside stay clickable, not grab */
.doc-embed-edit, .doc-embed-remove { cursor: pointer; }
.doc-embed-tools { position: absolute; top: .4rem; right: .4rem; display: flex; gap: .25rem; }
.doc-embed-edit, .doc-embed-remove {
    border: 1px solid #e6e9f2; background: #fff; border-radius: .35rem; width: 26px; height: 26px;
    color: #8a94a6; cursor: pointer; font-size: .75rem; transition: color .15s ease;
}
.doc-embed-edit:hover { color: var(--sp-navy); }
.doc-embed-remove:hover { color: #e74c3c; }
.doc-embed-body > :last-child { margin-bottom: 0; }

/* Read-only rendered document (preview) */
.doc-render { line-height: 1.6; }
.doc-render .doc-embed-tools { display: none; }

/* Dark-mode toggle button (in the navbar) */
.nav-theme-toggle {
    border: 0; background: transparent; padding: 0; line-height: 1; cursor: pointer;
    color: var(--sp-navy); font-size: 1.15rem;
    display: inline-flex; align-items: center;
    transition: color .15s ease, transform .2s ease;
}
.nav-theme-toggle:hover { color: var(--sp-orange); transform: rotate(-18deg); }
.nav-theme-toggle .fa-sun { display: none; }

/* Logo: show the coloured mark in light mode, the white mark in dark mode */
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark { display: inline-block; }

/* ===========================================================================
   DARK MODE
   The toggle sets [data-bs-theme="dark"] on <html> (persisted in localStorage).
   Bootstrap 5.3 re-skins its own components (forms, dropdowns, tables, close
   buttons, scrollbars) off that attribute; the rules below re-skin the custom
   SimPHY classes. Sections that are already dark in the light theme (hero,
   footer, stats band, testimonials, page banners, newsletter & account header)
   need little or no change and are left alone.
   =========================================================================== */
[data-bs-theme="dark"] {
    --dk-bg:        #0f141b;   /* page background                */
    --dk-surface:   #171e27;   /* cards (were #fff)              */
    --dk-surface-2: #12171f;   /* page sections (were #f8f9fc)   */
    --dk-elevated:  #232c38;   /* chips, image tiles, form inputs */
    --dk-border:    rgba(255,255,255,.09);
    --dk-text:      #d7deea;   /* body / general text            */
    --dk-heading:   #eef2f8;   /* headings (were navy / black)   */
    --dk-muted:     #93a0b4;   /* small muted grey text          */
    --dk-blue:      #6fb0ee;   /* navy accents used as text      */

    /* --sp-black is only ever text (body, titles) except the hero &
       testimonials gradients, which are re-pinned below — so flip it light. */
    --sp-black: var(--dk-heading);

    color-scheme: dark;
}

[data-bs-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); }

/* Keep the two gradients that referenced --sp-black dark */
[data-bs-theme="dark"] .hero {
    background:
        radial-gradient(900px 500px at 78% 12%, rgba(23,69,122,.55), transparent 60%),
        linear-gradient(135deg, #0b1a2e 0%, #0a0e14 100%);
}
[data-bs-theme="dark"] .testimonials {
    background:
        radial-gradient(800px 400px at 15% 10%, rgba(245,130,31,.10), transparent 60%),
        radial-gradient(800px 400px at 90% 95%, rgba(23,69,122,.5), transparent 65%),
        linear-gradient(135deg, #0b1a2e, #0a0e14);
}

/* Navbar --------------------------------------------------------------- */
[data-bs-theme="dark"] .main-nav {
    background: var(--dk-surface);
    box-shadow: 0 .2rem .8rem rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .main-nav .nav-link,
[data-bs-theme="dark"] .nav-cart,
[data-bs-theme="dark"] .nav-login,
[data-bs-theme="dark"] .nav-theme-toggle { color: var(--dk-text); }
[data-bs-theme="dark"] .main-nav .nav-link:hover,
[data-bs-theme="dark"] .main-nav .nav-link.active,
[data-bs-theme="dark"] .nav-cart:hover,
[data-bs-theme="dark"] .nav-login:hover,
[data-bs-theme="dark"] .nav-theme-toggle:hover { color: var(--sp-orange); }
[data-bs-theme="dark"] .nav-theme-toggle .fa-moon { display: none; }
[data-bs-theme="dark"] .nav-theme-toggle .fa-sun  { display: inline-block; }
[data-bs-theme="dark"] .main-nav .dropdown-menu {
    background: var(--dk-surface); border: 1px solid var(--dk-border);
    box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.55);
}
[data-bs-theme="dark"] .main-nav .dropdown-item { color: var(--dk-text); }
[data-bs-theme="dark"] .navbar-toggler { border-color: var(--dk-border); }
[data-bs-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230,235,242,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Card / panel surfaces (were #fff) ------------------------------------ */
[data-bs-theme="dark"] .sim-card,
[data-bs-theme="dark"] .feature-box,
[data-bs-theme="dark"] .sim-tab:not(.active),
[data-bs-theme="dark"] .showcase-card,
[data-bs-theme="dark"] .btn-outline-navy,
[data-bs-theme="dark"] .dl-card,
[data-bs-theme="dark"] .dl-detect-card,
[data-bs-theme="dark"] .dl-help,
[data-bs-theme="dark"] .howto-card,
[data-bs-theme="dark"] .dl-note,
[data-bs-theme="dark"] .sl-search,
[data-bs-theme="dark"] .sl-filters,
[data-bs-theme="dark"] .sl-results-head,
[data-bs-theme="dark"] .sim-item,
[data-bs-theme="dark"] .sl-empty,
[data-bs-theme="dark"] .sl-page:not(.active),
[data-bs-theme="dark"] .sv-card,
[data-bs-theme="dark"] .contact-form-card,
[data-bs-theme="dark"] .contact-socials a,
[data-bs-theme="dark"] .blog-card,
[data-bs-theme="dark"] .bp-article,
[data-bs-theme="dark"] .bp-widget,
[data-bs-theme="dark"] .about-card,
[data-bs-theme="dark"] .plan-card,
[data-bs-theme="dark"] .cart-card,
[data-bs-theme="dark"] .cart-summary,
[data-bs-theme="dark"] .cart-empty,
[data-bs-theme="dark"] .auth-card,
[data-bs-theme="dark"] .auth-social-btn,
[data-bs-theme="dark"] .account-sidebar,
[data-bs-theme="dark"] .account-card,
[data-bs-theme="dark"] .account-stat,
[data-bs-theme="dark"] .account-sim {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

/* Footer donate card — elevated dark surface instead of white */
[data-bs-theme="dark"] .footer-donate {
    background: var(--dk-surface);
    box-shadow: none; border: 1px solid var(--dk-border);
}
[data-bs-theme="dark"] .footer-donate-title { color: var(--dk-text); }
[data-bs-theme="dark"] .footer-donate-text { color: var(--dk-muted); }

/* Page section backgrounds (were #f6-f8 off-white) --------------------- */
[data-bs-theme="dark"] .features-section,
[data-bs-theme="dark"] .foss-section,
[data-bs-theme="dark"] .sims-showcase,
[data-bs-theme="dark"] .newsletter,
[data-bs-theme="dark"] .howto-section,
[data-bs-theme="dark"] .sl-section,
[data-bs-theme="dark"] .sv-section,
[data-bs-theme="dark"] .contact-section,
[data-bs-theme="dark"] .about-story-section,
[data-bs-theme="dark"] .pricing-section,
[data-bs-theme="dark"] .cart-section,
[data-bs-theme="dark"] .auth-section,
[data-bs-theme="dark"] .account-section,
[data-bs-theme="dark"] .cart-card-head,
[data-bs-theme="dark"] .sv-meta,
[data-bs-theme="dark"] .blog-empty { background: var(--dk-surface-2); }
[data-bs-theme="dark"] .blog-empty { border-color: var(--dk-border); }

/* Muted / elevated fills (image tiles, chips, inputs) ------------------ */
[data-bs-theme="dark"] .sim-visual:not(.dark),
[data-bs-theme="dark"] .card-img-wrap:not(.dark),
[data-bs-theme="dark"] .sim-item-visual,
[data-bs-theme="dark"] .sv-gallery,
[data-bs-theme="dark"] .account-sim-visual:not(.account-program-visual),
[data-bs-theme="dark"] .cart-thumb,
[data-bs-theme="dark"] .sv-tag,
[data-bs-theme="dark"] .blog-chip:not(.active),
[data-bs-theme="dark"] .bp-body code,
[data-bs-theme="dark"] .bp-share-links a,
[data-bs-theme="dark"] .cart-remove,
[data-bs-theme="dark"] .account-count,
[data-bs-theme="dark"] .account-tab-count,
[data-bs-theme="dark"] .auth-toggle,
[data-bs-theme="dark"] .about-quote,
[data-bs-theme="dark"] .account-badge:not(.is-danger):not(.is-success):not(.is-warning) {
    background: var(--dk-elevated);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
[data-bs-theme="dark"] .auth-toggle button.active {
    background: var(--dk-surface); color: var(--sp-orange);
    box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .account-menu-link:hover { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .account-form .form-control[readonly] {
    background: var(--dk-elevated); color: var(--dk-muted); border-color: var(--dk-border);
}

/* Divider / border lines ---------------------------------------------- */
[data-bs-theme="dark"] .sl-filters-head,
[data-bs-theme="dark"] .sv-card-head,
[data-bs-theme="dark"] .account-card-header,
[data-bs-theme="dark"] .cart-card-head,
[data-bs-theme="dark"] .cart-summary-title,
[data-bs-theme="dark"] .plan-head,
[data-bs-theme="dark"] .bp-widget-title,
[data-bs-theme="dark"] .bp-share { border-bottom-color: var(--dk-border); }
[data-bs-theme="dark"] .sl-group,
[data-bs-theme="dark"] .sim-item-foot,
[data-bs-theme="dark"] .sv-meta,
[data-bs-theme="dark"] .sv-actions,
[data-bs-theme="dark"] .cart-summary-total,
[data-bs-theme="dark"] .account-form-actions,
[data-bs-theme="dark"] .testi-person { border-top-color: var(--dk-border); }
[data-bs-theme="dark"] .cart-item,
[data-bs-theme="dark"] .bp-recent li + li,
[data-bs-theme="dark"] .account-tabs { border-color: var(--dk-border); }

/* Tables --------------------------------------------------------------- */
[data-bs-theme="dark"] .account-table thead th {
    background: var(--dk-surface-2); color: var(--dk-heading); border-bottom-color: var(--dk-border);
}
[data-bs-theme="dark"] .account-table tbody td { color: var(--dk-text); border-bottom-color: var(--dk-border); }
[data-bs-theme="dark"] .account-table tbody tr:hover td { background: rgba(255,255,255,.03); }

/* Form fields (custom borders overrode Bootstrap's dark defaults) ------ */
[data-bs-theme="dark"] .contact-form-card .form-control,
[data-bs-theme="dark"] .contact-form-card .form-select,
[data-bs-theme="dark"] .auth-card .form-control,
[data-bs-theme="dark"] .auth-card .form-select,
[data-bs-theme="dark"] .account-form .form-control,
[data-bs-theme="dark"] .account-form .form-select,
[data-bs-theme="dark"] .account-search input {
    background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text);
}
[data-bs-theme="dark"] .auth-divider::before,
[data-bs-theme="dark"] .auth-divider::after { background: var(--dk-border); }
[data-bs-theme="dark"] .account-progress { background: var(--dk-elevated); }
[data-bs-theme="dark"] .quota-card { background: var(--dk-border); border-color: var(--dk-border); }
[data-bs-theme="dark"] .quota-item { background: var(--dk-elevated); }
[data-bs-theme="dark"] .quota-value,
[data-bs-theme="dark"] .result-score-value,
[data-bs-theme="dark"] .result-stat-value { color: var(--dk-heading); }
[data-bs-theme="dark"] .result-stat { background: var(--dk-elevated); }
[data-bs-theme="dark"] .result-stat.is-correct { background: rgba(30, 158, 94, .15); }
[data-bs-theme="dark"] .result-stat.is-correct .result-stat-value { color: #34d399; }
[data-bs-theme="dark"] .result-stat.is-incorrect { background: rgba(231, 76, 60, .15); }
[data-bs-theme="dark"] .result-stat.is-incorrect .result-stat-value { color: #f87171; }
[data-bs-theme="dark"] .exam-split { background: var(--dk-bg); }
[data-bs-theme="dark"] .exam-sim-frame { background: var(--dk-surface-2); }
[data-bs-theme="dark"] .exam-tool { background: rgba(35, 44, 56, .92); color: var(--dk-heading); }
[data-bs-theme="dark"] .exam-tool:hover { background: var(--sp-orange); color: #fff; }
[data-bs-theme="dark"] .instruction-list li { color: var(--dk-text); }
[data-bs-theme="dark"] .exam-gutter { background: var(--dk-elevated); }
[data-bs-theme="dark"] .exam-gutter-grip { background: #55627a; }
[data-bs-theme="dark"] .exam-assess { background: var(--dk-surface); }
[data-bs-theme="dark"] .exam-assess-head { border-color: var(--dk-border); }
[data-bs-theme="dark"] .exam-assess-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .exam-assess-body { background: var(--dk-surface-2); }
[data-bs-theme="dark"] .exam-sheet-handle span { background: #55627a; }
[data-bs-theme="dark"] .attempt-timer { background: var(--dk-elevated); color: var(--dk-heading); }
[data-bs-theme="dark"] .attempt-timer.is-danger { background: rgba(231, 76, 60, .18); color: #f87171; }
[data-bs-theme="dark"] .attempt-pnum { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-heading); }
[data-bs-theme="dark"] .attempt-pnum.is-answered { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
[data-bs-theme="dark"] .attempt-q { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .attempt-q-text,
[data-bs-theme="dark"] .attempt-opt-text { color: var(--dk-heading); }
[data-bs-theme="dark"] .attempt-opt { background: var(--dk-elevated); border-color: var(--dk-border); }
[data-bs-theme="dark"] .attempt-opt:hover { background: var(--dk-surface-2); border-color: var(--dk-blue); }
[data-bs-theme="dark"] .attempt-opt:has(input:checked) { background: rgba(245, 130, 31, .12); border-color: var(--sp-orange); }
[data-bs-theme="dark"] .sl-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
[data-bs-theme="dark"] .sl-filters-toggle { color: var(--dk-heading); }
[data-bs-theme="dark"] .sl-hide-filters { color: var(--dk-muted); }
[data-bs-theme="dark"] .sl-hide-filters:hover { color: var(--sp-orange); }
[data-bs-theme="dark"] .sl-topic-parent { color: var(--dk-text); }
[data-bs-theme="dark"] .sl-check-box { border-color: rgba(255,255,255,.22); }
[data-bs-theme="dark"] .sl-check:hover .sl-check-label,
[data-bs-theme="dark"] .sl-topic-parent:hover { color: var(--dk-heading); }

/* Headings / navy text -> light --------------------------------------- */
[data-bs-theme="dark"] .why-simphy,
[data-bs-theme="dark"] .sim-tab:not(.active),
[data-bs-theme="dark"] .btn-outline-navy,
[data-bs-theme="dark"] .sl-page:not(.active),
[data-bs-theme="dark"] .sl-filters-title,
[data-bs-theme="dark"] .sl-group-title,
[data-bs-theme="dark"] .sl-results-head h6,
[data-bs-theme="dark"] .sl-per-page,
[data-bs-theme="dark"] .sl-empty h4,
[data-bs-theme="dark"] .sv-card-title,
[data-bs-theme="dark"] .sv-body h2,
[data-bs-theme="dark"] .sv-body h3,
[data-bs-theme="dark"] .sv-body h4,
[data-bs-theme="dark"] .sv-body strong,
[data-bs-theme="dark"] .sv-meta strong,
[data-bs-theme="dark"] .dl-help-title,
[data-bs-theme="dark"] .dl-detect-title,
[data-bs-theme="dark"] .contact-form-card .form-label,
[data-bs-theme="dark"] .contact-socials a,
[data-bs-theme="dark"] .auth-card .form-label,
[data-bs-theme="dark"] .auth-social-btn,
[data-bs-theme="dark"] .auth-toggle button,
[data-bs-theme="dark"] .account-form .form-label,
[data-bs-theme="dark"] .bp-body h3,
[data-bs-theme="dark"] .bp-share-label,
[data-bs-theme="dark"] .bp-back,
[data-bs-theme="dark"] .about-card-title,
[data-bs-theme="dark"] .plan-name,
[data-bs-theme="dark"] .cart-col-price,
[data-bs-theme="dark"] .cart-continue,
[data-bs-theme="dark"] .account-menu-link:not(.active),
[data-bs-theme="dark"] .account-card-title,
[data-bs-theme="dark"] .account-welcome-title,
[data-bs-theme="dark"] .account-pane-title,
[data-bs-theme="dark"] .account-mono,
[data-bs-theme="dark"] .account-sim-title a,
[data-bs-theme="dark"] .account-recent-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .account-recent-item { border-color: var(--dk-border); }
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .text-navy,
[data-bs-theme="dark"] .section-title .text-primary { color: var(--dk-blue) !important; }

/* Small muted grey text -> lighter muted ------------------------------ */
[data-bs-theme="dark"] .howto-date,
[data-bs-theme="dark"] .blog-date,
[data-bs-theme="dark"] .blog-excerpt,
[data-bs-theme="dark"] .dl-help-sub,
[data-bs-theme="dark"] .dl-note p,
[data-bs-theme="dark"] .sim-item-desc,
[data-bs-theme="dark"] .sim-item-meta,
[data-bs-theme="dark"] .sl-check-label,
[data-bs-theme="dark"] .sv-lead,
[data-bs-theme="dark"] .sv-body,
[data-bs-theme="dark"] .sv-meta,
[data-bs-theme="dark"] .bp-meta,
[data-bs-theme="dark"] .bp-body,
[data-bs-theme="dark"] .bp-recent-date,
[data-bs-theme="dark"] .bp-cta p,
[data-bs-theme="dark"] .about-lead,
[data-bs-theme="dark"] .about-card p,
[data-bs-theme="dark"] .plan-tagline,
[data-bs-theme="dark"] .plan-period,
[data-bs-theme="dark"] .plan-features li,
[data-bs-theme="dark"] .pricing-cta-note,
[data-bs-theme="dark"] .cart-item-tagline,
[data-bs-theme="dark"] .cart-summary-list li,
[data-bs-theme="dark"] .cart-trust,
[data-bs-theme="dark"] .cart-empty-sub,
[data-bs-theme="dark"] .cart-card-head,
[data-bs-theme="dark"] .auth-alt,
[data-bs-theme="dark"] .auth-meta .form-check-label,
[data-bs-theme="dark"] .auth-divider,
[data-bs-theme="dark"] .auth-forgot-head p,
[data-bs-theme="dark"] .account-hint,
[data-bs-theme="dark"] .account-stat-label,
[data-bs-theme="dark"] .account-sim-meta,
[data-bs-theme="dark"] .account-recent-meta,
[data-bs-theme="dark"] .account-progress-label,
[data-bs-theme="dark"] .account-tab:not(.active),
[data-bs-theme="dark"] .account-empty,
[data-bs-theme="dark"] .error-message,
[data-bs-theme="dark"] .error-links { color: var(--dk-muted); }

/* Program builder — dark */
[data-bs-theme="dark"] .chapter-item,
[data-bs-theme="dark"] .activity-item,
[data-bs-theme="dark"] .element-block { background: var(--dk-surface-2); border-color: var(--dk-border); }
[data-bs-theme="dark"] .element-block-head { border-bottom-color: var(--dk-border); }
[data-bs-theme="dark"] .chapter-item.active { background: var(--dk-surface); box-shadow: 0 0 0 1px var(--dk-blue) inset; border-color: var(--dk-blue); }
[data-bs-theme="dark"] .chapter-item-main,
[data-bs-theme="dark"] .activity-item-title,
[data-bs-theme="dark"] .element-block-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .chapter-item-count { background: var(--dk-elevated); color: var(--dk-muted); }
[data-bs-theme="dark"] .chapter-item-edit:hover { color: var(--dk-blue); }
[data-bs-theme="dark"] .element-tile { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-heading); }
[data-bs-theme="dark"] .element-tile:hover { background: var(--dk-surface); border-color: var(--sp-orange); }
[data-bs-theme="dark"] .activity-item-icon { background: var(--dk-elevated); color: var(--dk-blue); }
[data-bs-theme="dark"] .rte-toolbar { background: var(--dk-elevated); border-color: var(--dk-border); }
[data-bs-theme="dark"] .rte-btn { color: var(--dk-muted); }
[data-bs-theme="dark"] .builder-title-input:focus { background: var(--dk-elevated); }
[data-bs-theme="dark"] .add-tile { border-color: var(--dk-border); color: var(--dk-muted); }
[data-bs-theme="dark"] .add-tile:hover { border-color: var(--sp-orange); color: var(--sp-orange); background: var(--dk-surface); }
[data-bs-theme="dark"] .builder-chapters { border-right-color: var(--dk-border); }
[data-bs-theme="dark"] .element-row { background: var(--dk-surface-2); border-color: var(--dk-border); }
[data-bs-theme="dark"] .element-row-type { color: var(--dk-heading); }
[data-bs-theme="dark"] .element-row-icon { background: var(--dk-elevated); }
[data-bs-theme="dark"] .element-editor,
[data-bs-theme="dark"] .activity-preview { border-color: var(--dk-border); background: var(--dk-surface); }
[data-bs-theme="dark"] .element-editor-head { background: var(--dk-elevated); border-color: var(--dk-border); }
[data-bs-theme="dark"] .element-editor-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .element-editor-head .back-btn { color: var(--dk-heading); }
[data-bs-theme="dark"] .element-editor-actions { background: var(--dk-surface-2); border-color: var(--dk-border); }
[data-bs-theme="dark"] .preview-sim { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-muted); }
[data-bs-theme="dark"] .preview-flag { background: var(--dk-elevated); color: var(--dk-blue); }
[data-bs-theme="dark"] .preview-note { background: var(--dk-elevated); }
[data-bs-theme="dark"] .pp-cover { background: var(--dk-surface-2); border-color: var(--dk-border); }
[data-bs-theme="dark"] .pp-cover h3,
[data-bs-theme="dark"] .pp-chapter-title,
[data-bs-theme="dark"] .pp-activity-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .pp-chapter-title { border-bottom-color: var(--dk-border); }
[data-bs-theme="dark"] .doc-toolbar { background: var(--dk-elevated); border-color: var(--dk-border); }
[data-bs-theme="dark"] .doc-tb-btn { color: var(--dk-muted); }
[data-bs-theme="dark"] .doc-tb-btn:hover { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-heading); }
[data-bs-theme="dark"] .doc-tb-btn.is-active { background: var(--dk-surface); border-color: var(--sp-orange); color: var(--sp-orange); }
[data-bs-theme="dark"] .doc-tb-sep { background: var(--dk-border); }
[data-bs-theme="dark"] .doc-editor { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .doc-embed { background: var(--dk-surface-2); border-color: var(--dk-border); }
[data-bs-theme="dark"] .doc-embed-edit,
[data-bs-theme="dark"] .doc-embed-remove { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-muted); }

/* Hover title states that flip to navy -> light blue ------------------- */
[data-bs-theme="dark"] .blog-card:hover .blog-title,
[data-bs-theme="dark"] .howto-card:hover .howto-title,
[data-bs-theme="dark"] .bp-recent a:hover .bp-recent-title { color: var(--dk-blue); }

/* Navy-tinted pills that need a readable accent ------------------------ */
[data-bs-theme="dark"] .cart-item-period,
[data-bs-theme="dark"] .cart-empty-icon {
    background: rgba(111,176,238,.14); color: var(--dk-blue);
}

/* Error page ----------------------------------------------------------- */
[data-bs-theme="dark"] .error-page {
    background:
        radial-gradient(760px 340px at 78% -18%, rgba(245,130,31,.14), transparent 60%),
        radial-gradient(620px 300px at 12% 118%, rgba(23,69,122,.16), transparent 60%),
        linear-gradient(180deg, #12171f 0%, #0f141b 100%);
}
[data-bs-theme="dark"] .error-watermark { color: rgba(255,255,255,.04); }

/* ===========================================================================
   HOME REDESIGN — clean light nav + hero with a live pendulum simulation.
   Brand accents stay on the SimPHY palette (orange + navy); neutrals are a
   warm cream so the page reads calm and paper-like.
   =========================================================================== */
:root {
    --sp-cream:      #faf8f4;   /* warm page tint (hero)        */
    --sp-cream-soft: #fdfcfa;   /* card bars / soft surfaces    */
    --sp-hairline:   #e9e1d5;   /* warm hairline border         */
    --sp-slate:      #3b5871;   /* readable body text on cream  */
    --sp-muted:      #6b8199;   /* muted labels                 */
    --sp-faint:      #9aa8b5;   /* faint mono labels            */
    --sp-track:      #f1ece4;   /* meter track / empty bar      */
    --font-display:  'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-mono:     'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ---- Navigation ---------------------------------------------------------- */
.site-nav {
    background: rgba(250, 248, 244, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--sp-hairline);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.site-nav .navbar-brand { padding: 0; }
.site-nav .brand-logo { height: 40px; width: auto; }
.site-nav .site-menu { gap: .35rem; margin-right: auto; margin-left: 1.5rem; }
.site-nav .nav-link {
    position: relative;
    color: var(--sp-navy); font-weight: 500;
    padding: .5rem .9rem; font-size: 1rem;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--sp-orange); }
.site-nav .dropdown-toggle::after {
    border: 0; content: '\25BE'; vertical-align: middle;
    margin-left: .35rem; font-size: .7em; color: var(--sp-faint);
    transition: transform .2s ease;
}
.site-nav .nav-item.dropdown:hover .dropdown-toggle::after { transform: rotate(180deg); color: var(--sp-orange); }

/* Mega dropdown.
   Base = mobile-first: a plain stacked block that flows inside the collapsed
   hamburger nav. The full-width absolute bar is added only at >=992px below. */
.site-nav .mega-menu {
    margin: 0; border: 0; border-radius: 0; padding: .2rem 0 .5rem;
    background: transparent; box-shadow: none;
}
.site-nav .mega-menu.show { display: block; }   /* Bootstrap toggles .show on tap */
.mega-inner { display: block; }
.mega-thumb {
    display: block; aspect-ratio: 16 / 9; border-radius: .6rem; overflow: hidden;
    margin-bottom: .95rem; border: 1px solid var(--sp-hairline); background: var(--sp-cream);
}
.mega-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mega-col:hover .mega-thumb img { transform: scale(1.06); }
.mega-kicker {
    display: block; font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--sp-orange); margin-bottom: .5rem;
}
.mega-title {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: 1.08rem; color: var(--sp-navy-dark); text-decoration: none;
    margin-bottom: .35rem;
}
.mega-title:hover { color: var(--sp-orange); }
.mega-blurb { font-size: .86rem; line-height: 1.45; color: var(--sp-muted); margin-bottom: .8rem; }
.mega-links { display: grid; gap: .4rem; }
.mega-links a { font-size: .9rem; color: var(--sp-slate); text-decoration: none; }
.mega-links a:hover { color: var(--sp-orange); }

/* Whole-card click target: the title anchor is stretched over its column so the
   entire mega-col (kicker, title, blurb) is clickable, not just the title text. */
.mega-col { position: relative; cursor: pointer; }
.mega-title::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.mega-col:hover .mega-title { color: var(--sp-orange); }
.mega-links a { position: relative; z-index: 2; }   /* keep any sub-links clickable above the overlay */

/* Mobile (<992): compact accordion inside the hamburger menu.
   No thumbnails, hierarchy shown with a left rule, scroll if it gets long. */
@media (max-width: 991.98px) {
    .site-nav .resource-menu {
        min-width: 0;
        margin-top: 0;
        padding: .2rem 0 .5rem;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .resource-menu .mega-col {
        padding: 0 0 1rem .8rem;
        border-left: 2px solid var(--sp-hairline);
        border-bottom: 0;
    }
    .site-nav .mega-menu.show { max-height: 62vh; overflow-y: auto; }
    .mega-inner { max-width: none; padding-left: 0; padding-right: 0; }
    .mega-thumb { display: none; }
    .mega-col { margin-bottom: 1rem; padding-left: .8rem; border-left: 2px solid var(--sp-hairline); }
    .mega-col:last-child { margin-bottom: .2rem; }
    .site-nav .site-menu { margin: .6rem 0; }
}

/* Desktop (>=992): full-width (end-to-end) bar anchored to the sticky nav.
   Making .nav-item static lets the absolute menu span the whole viewport. */
@media (min-width: 992px) {
    .site-nav .nav-item.has-mega { position: static; }
    .site-nav .mega-menu {
        position: absolute; left: 0; right: 0; top: 100%; width: 100%;
        border-top: 1px solid var(--sp-hairline); padding: 0; background: #fff;
        box-shadow: 0 1.8rem 2.6rem -1.6rem rgba(15, 47, 82, .4);
    }
    .site-nav .mega-menu::before {   /* hover bridge across the navbar padding */
        content: ''; position: absolute; left: 0; right: 0; top: -.9rem; height: .9rem;
    }
    .site-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; animation: megaFade .18s ease; }
    .mega-inner {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: clamp(1.25rem, 3vw, 2.75rem); padding-top: 2rem; padding-bottom: 1.85rem;
    }
    @keyframes megaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}

.site-nav .navbar-actions .nav-login-link {
    color: var(--sp-navy); font-weight: 500; text-decoration: none; font-size: 1rem;
    transition: color .15s ease;
}
.site-nav .navbar-actions .nav-login-link:hover { color: var(--sp-orange); }
.site-nav .resource-menu {
    min-width: 300px;
    margin-top: 0;
    padding: 1rem;
    border: 1px solid var(--sp-hairline);
    border-radius: var(--home-radius, 4px);
    background: var(--home-surface, #fff);
    box-shadow: 0 .8rem 1.8rem rgba(15, 47, 82, .14);
}
.site-nav .resource-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -.5rem;
    height: .5rem;
}
.resource-menu-inner { display: grid; gap: 1rem; }
.resource-menu .mega-col { padding-bottom: 1rem; border-bottom: 1px solid var(--sp-hairline); }
.resource-menu .mega-col:last-child { padding-bottom: 0; border-bottom: 0; }
.btn-create {
    border-radius: 999px; border: 1.5px solid var(--sp-hairline);
    background: #fff; color: var(--sp-navy); font-weight: 600; font-size: .95rem;
    padding: .5rem 1.15rem; transition: border-color .15s ease, color .15s ease;
}
.btn-create:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
.btn-donate {
    display: inline-flex; align-items: center; gap: .45rem;
    border-radius: 999px; border: 1.5px solid var(--sp-orange);
    background: transparent; color: var(--sp-orange); font-weight: 600; font-size: .95rem;
    padding: .5rem 1.15rem; transition: background .15s ease, color .15s ease;
}
.btn-donate i { font-size: .9rem; }
.btn-donate:hover { background: var(--sp-orange); color: #fff; }

/* ---- Hero --------------------------------------------------------------- */
.hero-lite {
    background:
        radial-gradient(720px 420px at 88% -8%, rgba(245, 130, 31, .07), transparent 62%),
        radial-gradient(680px 460px at 6% 8%, rgba(23, 69, 122, .05), transparent 60%),
        var(--sp-cream);
    padding: clamp(3rem, 6vw, 5.5rem) 0 0;
    display: flow-root;
}
.hero-eyebrow {
    font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--sp-orange); margin: 0 0 1.1rem;
}
.hero-lite-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.85rem); line-height: 1.05;
    letter-spacing: -.025em; color: var(--sp-navy-dark); margin: 0 0 1.25rem;
}
.hero-lite-title .accent { color: var(--sp-orange); }
.hero-lite-lead {
    font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.55;
    color: var(--sp-slate); max-width: 32rem; margin: 0 0 .75rem;
}
.hero-lite-lead strong { font-weight: 600; color: var(--sp-navy-dark); }
.hero-lite-note { font-size: 1rem; line-height: 1.55; color: var(--sp-muted); max-width: 32rem; margin: 0 0 1.9rem; }
.hero-lite-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.btn-brand-solid,
.btn-brand-solid:focus {
    background: var(--sp-navy); color: #fff; font-weight: 600; font-size: 1.05rem;
    border: 1.5px solid var(--sp-navy); border-radius: 999px; padding: .85rem 1.6rem;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-brand-solid:hover {
    background: var(--sp-navy-dark); border-color: var(--sp-navy-dark); color: #fff;
    transform: translateY(-2px); box-shadow: 0 .7rem 1.4rem rgba(15, 47, 82, .25);
}
.btn-brand-ghost,
.btn-brand-ghost:focus {
    background: #fff; color: var(--sp-navy); font-weight: 600; font-size: 1.05rem;
    border: 1.5px solid var(--sp-hairline); border-radius: 999px; padding: .85rem 1.6rem;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-brand-ghost:hover { border-color: var(--sp-orange); color: var(--sp-orange); transform: translateY(-2px); }

/* ---- Hero slider (carousel) --------------------------------------------- */
.hero-carousel { position: relative; padding-bottom: 2.6rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-carousel .carousel-item { transition: transform .6s ease, opacity .6s ease; }
.hero-dots { margin: 0; bottom: .3rem; gap: .5rem; }
.hero-dots [data-bs-target] {
    width: 9px; height: 9px; border-radius: 999px; opacity: 1;
    background: rgba(23, 69, 122, .25); border: 0; margin: 0; text-indent: 0;
    transition: width .22s ease, background .22s ease;
}
.hero-dots [data-bs-target].active { width: 26px; background: var(--sp-orange); }
/* image-based slides reuse the sim-panel frame */
.sim-stage-img { line-height: 0; }
.sim-stage-img img { display: block; width: 100%; height: 452px; object-fit: cover; }

/* ---- Simulation panel --------------------------------------------------- */
.sim-panel {
    border: 1px solid var(--sp-hairline); border-radius: 1.1rem; background: #fff;
    box-shadow: 0 1.4rem 2.8rem -1.6rem rgba(15, 47, 82, .4); overflow: hidden;
}
.sim-panel-bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1rem; border-bottom: 1px solid var(--sp-hairline);
    background: var(--sp-cream-soft);
}
.sim-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-orange); animation: simPulse 1.8s ease-in-out infinite; }
@keyframes simPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 130, 31, .5); } 50% { box-shadow: 0 0 0 5px rgba(245, 130, 31, 0); } }
.sim-file { font-family: var(--font-mono); font-size: .78rem; color: var(--sp-muted); }
.sim-live { color: var(--sp-navy); }
.sim-hint { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--sp-faint); }

.sim-stage { position: relative; background: #fff; }
.sim-canvas { display: block; width: 100%; height: 360px; touch-action: none; cursor: grab; }
.sim-canvas.grabbing { cursor: grabbing; }
.sim-stage-player simphy-simulation { display: block; width: 100%; height: 452px; }

.sim-energy {
    position: absolute; top: .8rem; right: .9rem;
    display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
    font-family: var(--font-mono); pointer-events: none;
}
.sim-energy-label { font-size: .68rem; color: var(--sp-faint); }
.sim-energy-bar { display: flex; width: 96px; height: 9px; border-radius: 999px; overflow: hidden; background: var(--sp-track); }
.sim-energy-bar .e-ke { width: 30%; background: var(--sp-orange); transition: width .1s linear; }
.sim-energy-bar .e-pe { width: 70%; background: rgba(23, 69, 122, .16); transition: width .1s linear; }
.sim-energy-legend { display: flex; gap: .7rem; font-size: .68rem; color: var(--sp-muted); }
.sim-energy-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .25rem; vertical-align: middle; }
.sim-energy-legend .sw-ke { background: var(--sp-orange); }
.sim-energy-legend .sw-pe { background: var(--sp-track); border: 1px solid var(--sp-hairline); }

.sim-legend {
    position: absolute; left: .9rem; bottom: .8rem; margin: 0; padding: 0; list-style: none;
    font-family: var(--font-mono); font-size: .72rem; color: var(--sp-muted); pointer-events: none;
}
.sim-legend li { display: flex; align-items: center; gap: .45rem; line-height: 1.7; }
.sim-legend i { display: inline-block; width: 16px; height: 0; border-top: 2.4px solid; border-radius: 2px; }
.sim-legend .lg-weight { color: #c0492b; }
.sim-legend .lg-tension { color: #1f7a5a; }
.sim-legend .lg-vel { color: var(--sp-orange); }
.sim-legend .lg-path { color: var(--sp-navy); }
.sim-legend .lg-star { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--sp-orange); }

/* Standard open-source theme for the homepage ----------------------------- */
body:has(.hero-lite) {
    --home-blue: #0e5283;
    --home-blue-dark: #0a3d62;
    --home-orange: #f97316;
    --home-green: #198754;
    --home-ink: #212529;
    --home-muted: #6c757d;
    --home-border: #dee2e6;
    --home-surface: #ffffff;
    --home-subtle: #f8f9fa;
    --home-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--home-surface);
    color: var(--home-ink);
}

body:has(.hero-lite) .site-nav {
    background: var(--home-surface);
    backdrop-filter: none;
    border-bottom: 1px solid var(--home-border);
    box-shadow: none;
}

body:has(.hero-lite) .site-nav .nav-link,
body:has(.hero-lite) .site-nav .navbar-actions .nav-login-link {
    color: var(--home-ink);
    font-weight: 500;
}

body:has(.hero-lite) .site-nav .nav-link:hover,
body:has(.hero-lite) .site-nav .nav-link.active,
body:has(.hero-lite) .site-nav .navbar-actions .nav-login-link:hover {
    color: var(--home-blue);
}

body:has(.hero-lite) .site-nav .mega-menu,
body:has(.hero-lite) .mega-thumb,
body:has(.hero-lite) .btn-create,
body:has(.hero-lite) .btn-brand-solid,
body:has(.hero-lite) .btn-brand-ghost,
body:has(.hero-lite) .sim-panel,
body:has(.hero-lite) .sim-card,
body:has(.hero-lite) .feature-box,
body:has(.hero-lite) .showcase-card,
body:has(.hero-lite) .testi-card,
body:has(.hero-lite) .sim-tab,
body:has(.hero-lite) .sim-arrow,
body:has(.hero-lite) .sim-btn {
    border-radius: var(--home-radius);
}

body:has(.hero-lite) .btn-create,
body:has(.hero-lite) .btn-brand-ghost,
body:has(.hero-lite) .sim-btn,
body:has(.hero-lite) .sim-tab,
body:has(.hero-lite) .sim-arrow {
    border-color: var(--home-border);
    background: var(--home-surface);
    color: var(--home-ink);
}

body:has(.hero-lite) .btn-create:hover,
body:has(.hero-lite) .btn-brand-ghost:hover,
body:has(.hero-lite) .sim-btn:hover,
body:has(.hero-lite) .sim-tab:hover,
body:has(.hero-lite) .sim-arrow:hover {
    border-color: var(--home-blue);
    color: var(--home-blue);
    transform: none;
    box-shadow: none;
}

body:has(.hero-lite) .hero-lite {
    background: var(--home-subtle);
}

body:has(.hero-lite) .hero-eyebrow,
body:has(.hero-lite) .hero-lite-title .accent,
body:has(.hero-lite) .sim-live,
body:has(.hero-lite) .hero-stat-num {
    color: var(--home-orange);
}

body:has(.hero-lite) .hero-lite-title,
body:has(.hero-lite) .hero-lite-lead strong,
body:has(.hero-lite) .sim-btn-solid,
body:has(.hero-lite) .sim-btn-solid:hover {
    color: var(--home-ink);
}

body:has(.hero-lite) .hero-lite-title {
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0;
}

body:has(.hero-lite) .hero-lite-lead,
body:has(.hero-lite) .hero-lite-note,
body:has(.hero-lite) .hero-stat-txt {
    color: var(--home-muted);
}

body:has(.hero-lite) .btn-brand-solid,
body:has(.hero-lite) .sim-btn-solid,
body:has(.hero-lite) .sim-tab.active {
    background: var(--home-blue);
    border-color: var(--home-blue);
    color: #fff;
}

body:has(.hero-lite) .btn-brand-solid:hover,
body:has(.hero-lite) .sim-btn-solid:hover,
body:has(.hero-lite) .sim-tab.active:hover {
    background: var(--home-blue-dark);
    border-color: var(--home-blue-dark);
    color: #fff;
}

body:has(.hero-lite) .sim-panel,
body:has(.hero-lite) .feature-box,
body:has(.hero-lite) .showcase-card,
body:has(.hero-lite) .testi-card {
    background: var(--home-surface);
    border-color: var(--home-border);
    box-shadow: 0 2px 8px rgba(33, 37, 41, .08);
}

body:has(.hero-lite) .sim-panel-bar,
body:has(.hero-lite) .sim-controls {
    background: var(--home-subtle);
    border-color: var(--home-border);
}

body:has(.hero-lite) .feature-badge,
body:has(.hero-lite) .stat-badge {
    border-radius: 0 !important;
    background: var(--home-blue) !important;
}

body:has(.hero-lite) .col-md-4:nth-child(2) .feature-badge {
    background: var(--home-orange) !important;
}

body:has(.hero-lite) .col-md-4:nth-child(3) .feature-badge {
    background: var(--home-green) !important;
}

body:has(.hero-lite) .newsletter {
    background: var(--home-subtle);
}

body:has(.hero-lite) .newsletter-card {
    border-radius: var(--home-radius);
    background: var(--home-blue);
    box-shadow: 0 8px 20px rgba(14, 82, 131, .18);
}

body:has(.hero-lite) .newsletter-badge {
    border-radius: var(--home-radius);
    background: var(--home-orange);
    box-shadow: none;
}

body:has(.hero-lite) .newsletter-input,
body:has(.hero-lite) .newsletter-btn {
    border-radius: var(--home-radius);
}

body:has(.hero-lite) .newsletter-btn {
    background: var(--home-orange);
    border-color: var(--home-orange);
}
.sim-readout { font-family: var(--font-mono); font-size: .8rem; color: var(--sp-navy-dark); }
[data-bs-theme="dark"] .sim-legend .lg-path { color: var(--dk-blue); }
[data-bs-theme="dark"] .sim-readout { color: var(--dk-heading); }

.sim-controls {
    display: flex; align-items: center; gap: .85rem 1.4rem; flex-wrap: wrap;
    padding: .85rem 1rem; border-top: 1px solid var(--sp-hairline); background: var(--sp-cream-soft);
}
.sim-buttons { display: flex; gap: .55rem; }
.sim-sliders {
    display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: .5rem 1.4rem; flex: 1 1 300px;
}
.sim-btn {
    border-radius: 999px; border: 1.5px solid var(--sp-hairline); background: #fff;
    color: var(--sp-navy); font-weight: 600; font-size: .9rem; padding: .5rem 1.1rem;
    cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sim-btn:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
.sim-btn-solid, .sim-btn-solid:hover {
    background: var(--sp-navy); border-color: var(--sp-navy); color: #fff;
}
.sim-btn-solid:hover { background: var(--sp-navy-dark); border-color: var(--sp-navy-dark); }
.sim-slider { display: flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .8rem; color: var(--sp-muted); margin: 0; }
.sim-slider-name { min-width: 4.5em; }
.sim-slider input[type="range"] { flex: 1; min-width: 56px; accent-color: var(--sp-orange); cursor: pointer; }
.sim-slider-val { min-width: 4.4em; text-align: right; color: var(--sp-navy-dark); }

/* ---- Hero stat strip ---------------------------------------------------- */
.hero-stats { border-top: 1px solid var(--sp-hairline); border-bottom: 1px solid var(--sp-hairline); }
.hero-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.hero-stat { padding: 1.5rem 1.6rem; border-left: 1px solid var(--sp-hairline); text-align: center; }
.hero-stat:first-child { border-left: 0; }
.hero-stat-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--sp-orange); }
.hero-stat-txt { display: block; margin-top: .4rem; font-size: .92rem; color: var(--sp-muted); }
@media (max-width: 767.98px) {
    .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stat:nth-child(3) { border-left: 0; }
    .hero-canvas, .sim-canvas { height: 300px; }
    .sim-stage-img img { height: 260px; }
    .sim-stage-player simphy-simulation { height: 320px; }
    .sim-sliders { grid-template-columns: 1fr; }
}

/* ---- Dark mode ---------------------------------------------------------- */
[data-bs-theme="dark"] .site-nav {
    background: rgba(23, 30, 39, .9); border-bottom-color: var(--dk-border);
}
[data-bs-theme="dark"] .site-nav .nav-link,
[data-bs-theme="dark"] .site-nav .navbar-actions .nav-login-link { color: var(--dk-text); }
[data-bs-theme="dark"] .site-nav .nav-link:hover,
[data-bs-theme="dark"] .site-nav .nav-link.active,
[data-bs-theme="dark"] .site-nav .navbar-actions .nav-login-link:hover { color: var(--sp-orange); }
[data-bs-theme="dark"] .site-nav .mega-menu { background: var(--dk-surface); box-shadow: 0 1.6rem 2.6rem -1.4rem rgba(0,0,0,.6); }
[data-bs-theme="dark"] .site-nav .resource-menu {
    background: var(--dk-surface); border-color: var(--dk-border);
    box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.55);
}
[data-bs-theme="dark"] .resource-menu .mega-col { border-color: var(--dk-border); }
[data-bs-theme="dark"] .mega-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .mega-blurb { color: var(--dk-muted); }
[data-bs-theme="dark"] .mega-links a { color: var(--dk-text); }
[data-bs-theme="dark"] .mega-links a:hover,
[data-bs-theme="dark"] .mega-title:hover { color: var(--sp-orange); }
[data-bs-theme="dark"] .btn-create { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .btn-create:hover { border-color: var(--sp-orange); color: var(--sp-orange); }

[data-bs-theme="dark"] .hero-lite {
    background:
        radial-gradient(760px 420px at 88% -8%, rgba(245, 130, 31, .12), transparent 62%),
        radial-gradient(680px 460px at 6% 8%, rgba(23, 69, 122, .28), transparent 60%),
        linear-gradient(135deg, #0f1a29 0%, var(--dk-bg) 100%);
}
[data-bs-theme="dark"] .hero-dots [data-bs-target] { background: rgba(255, 255, 255, .28); }
[data-bs-theme="dark"] .hero-dots [data-bs-target].active { background: var(--sp-orange); }
[data-bs-theme="dark"] .hero-lite-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .hero-lite-title .accent { color: var(--sp-orange); }
[data-bs-theme="dark"] .hero-lite-lead { color: var(--dk-text); }
[data-bs-theme="dark"] .hero-lite-lead strong { color: var(--dk-heading); }
[data-bs-theme="dark"] .hero-lite-note { color: var(--dk-muted); }
[data-bs-theme="dark"] .btn-brand-ghost { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .btn-brand-ghost:hover { border-color: var(--sp-orange); color: var(--sp-orange); }

[data-bs-theme="dark"] .sim-panel { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 1.4rem 2.8rem -1.4rem rgba(0,0,0,.7); }
[data-bs-theme="dark"] .sim-panel-bar,
[data-bs-theme="dark"] .sim-controls { background: var(--dk-surface-2); border-color: var(--dk-border); }
[data-bs-theme="dark"] .sim-stage { background: #0d151f; }
[data-bs-theme="dark"] .sim-energy-bar { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .sim-energy-bar .e-pe { background: rgba(111,176,238,.3); }
[data-bs-theme="dark"] .sim-energy-legend .sw-pe { background: rgba(255,255,255,.1); border-color: var(--dk-border); }
[data-bs-theme="dark"] .sim-btn { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .sim-btn:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
[data-bs-theme="dark"] .sim-btn-solid { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
[data-bs-theme="dark"] .sim-slider-val { color: var(--dk-heading); }
[data-bs-theme="dark"] .hero-stats { border-color: var(--dk-border); }
[data-bs-theme="dark"] .hero-stat { border-left-color: var(--dk-border); }
[data-bs-theme="dark"] .hero-stat-txt { color: var(--dk-muted); }

/* ===========================================================================
   ROADMAP page — vertical timeline of shipped / in-progress / planned work.
   =========================================================================== */
.roadmap-intro { max-width: 640px; }
.roadmap-lead { color: var(--sp-slate); font-size: 1.1rem; line-height: 1.6; }

.roadmap-legend { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 1.6rem 0 2.8rem; }
.rm-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
    padding: .3rem .75rem; border-radius: 999px; border: 1px solid transparent;
}
.rm-badge.shipped  { color: #1f7a5a;         background: rgba(31,122,90,.10);  border-color: rgba(31,122,90,.22); }
.rm-badge.inprogress { color: var(--sp-orange); background: rgba(245,130,31,.10); border-color: rgba(245,130,31,.24); }
.rm-badge.planned  { color: var(--sp-muted);  background: rgba(23,69,122,.06);  border-color: var(--sp-hairline); }

/* Zigzag flow timeline — alternating steps on a central spine ------------- */
.rm-flow { position: relative; max-width: 1000px; margin: 3.5rem auto 0; }
.rm-flow::before {
    content: ''; position: absolute; left: 50%; top: .4rem; bottom: 1.4rem;
    width: 3px; transform: translateX(-50%);
    background: repeating-linear-gradient(var(--sp-hairline) 0 8px, transparent 8px 16px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 92%, transparent 100%);
}
/* "goal" marker closing off the spine */
.rm-flow::after {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffcf9a, var(--sp-orange) 72%);
    box-shadow: 0 0 0 5px rgba(245,130,31,.14), 0 .4rem 1rem -.3rem rgba(245,130,31,.6);
}

.rm-step { position: relative; width: 50%; padding: 0 3.25rem 3.5rem 0; }
.rm-step:nth-child(even) { margin-left: 50%; padding: 0 0 3.5rem 3.25rem; }
.rm-step:last-child { padding-bottom: 0; }

/* colored node sitting on the spine */
.rm-step-icon {
    position: absolute; top: .3rem; right: -32px; z-index: 3;
    width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
    background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.4), transparent 55%), var(--rm-accent);
    border: 4px solid var(--sp-white);
    box-shadow: 0 .55rem 1.4rem -.4rem var(--rm-accent),
                0 0 0 6px color-mix(in srgb, var(--rm-accent) 12%, transparent);
    transition: transform .22s ease, box-shadow .22s ease;
}
.rm-step:nth-child(even) .rm-step-icon { right: auto; left: -32px; }
.rm-step-icon::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--rm-accent) 45%, transparent);
    opacity: 0; animation: rmPulse 3s ease-out infinite;
}
.rm-step:hover .rm-step-icon { transform: scale(1.08); box-shadow: 0 .8rem 1.8rem -.4rem var(--rm-accent), 0 0 0 8px color-mix(in srgb, var(--rm-accent) 16%, transparent); }
@keyframes rmPulse { 0% { transform: scale(.9); opacity: .7; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }

/* short connector from the card edge to the spine */
.rm-step-card::before {
    content: ''; position: absolute; top: 2rem; width: 2.5rem; height: 2px;
}
.rm-step .rm-step-card::before { right: -2.85rem; background: linear-gradient(90deg, transparent, var(--rm-accent)); }
.rm-step:nth-child(even) .rm-step-card::before { left: -2.85rem; background: linear-gradient(90deg, var(--rm-accent), transparent); }

/* big step number sitting on the card (top-right corner, behind the text) */
.rm-step-num {
    position: absolute; top: .35rem; right: 1.1rem; z-index: 0; pointer-events: none;
    font-family: var(--font-mono); font-weight: 700; font-size: 3.75rem; line-height: 1;
    color: color-mix(in srgb, var(--rm-accent) 22%, transparent);
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--rm-accent) 40%, transparent);
}
/* keep the card text above the watermark number */
.rm-step-period, .rm-step-title, .rm-step-items { position: relative; z-index: 1; }

.rm-step-card {
    position: relative; z-index: 2;
    background: linear-gradient(180deg, color-mix(in srgb, var(--rm-accent) 4%, var(--sp-white)), var(--sp-white) 60%);
    border: 1px solid var(--sp-hairline);
    border-top: 3px solid var(--rm-accent); border-radius: 1.1rem;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 1rem 2.4rem -1.5rem rgba(15,47,82,.3);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.rm-step-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--rm-accent) 40%, var(--sp-hairline));
    box-shadow: 0 1.4rem 2.8rem -1.2rem color-mix(in srgb, var(--rm-accent) 45%, rgba(15,47,82,.4));
}

/* scroll-reveal: steps ease in as they enter the viewport */
.rm-step { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.js-reveal .rm-step { opacity: 0; transform: translateY(26px); }
.js-reveal .rm-step.is-in { opacity: 1; transform: none; }
.rm-step-period { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--rm-accent); }
.rm-step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--sp-navy-dark); margin: .15rem 0 1rem; }

.rm-step-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; }
.rm-item { display: flex; gap: .8rem; align-items: flex-start; }
.rm-item-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: .7rem; display: grid; place-items: center; font-size: .9rem; color: #fff; }
.rm-item-icon.shipped  { background: linear-gradient(135deg, #26936c, #17614a); }
.rm-item-icon.inprogress { background: linear-gradient(135deg, var(--sp-orange), #ff9d3f); }
.rm-item-icon.planned  { background: linear-gradient(135deg, #8595a8, #6b7d93); }
.rm-item-body { min-width: 0; }
.rm-item-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.rm-item-title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--sp-navy-dark); }
.rm-item-desc { display: block; color: var(--sp-muted); font-size: .87rem; line-height: 1.5; margin-top: .15rem; }

@media (max-width: 768px) {
    .rm-flow { margin-top: 2.5rem; }
    .rm-flow::before { left: 24px; }
    .rm-flow::after { left: 24px; }
    .rm-step, .rm-step:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 2.75rem 66px; }
    .rm-step-icon, .rm-step:nth-child(even) .rm-step-icon { left: -4px; right: auto; width: 56px; height: 56px; font-size: 1.3rem; }
    .rm-step-card::before { display: none; }
    .rm-step-num { right: .9rem; top: .35rem; font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-step-icon::after { animation: none; }
    .js-reveal .rm-step { opacity: 1; transform: none; }
}

.roadmap-cta { text-align: center; margin-top: 3rem; background: var(--sp-cream); border: 1px solid var(--sp-hairline); border-radius: 1.3rem; padding: 2.6rem 1.5rem; }
.roadmap-cta h3 { font-family: var(--font-display); font-weight: 600; color: var(--sp-navy-dark); margin-bottom: .4rem; }
.roadmap-cta p { color: var(--sp-muted); margin-bottom: 1.3rem; }

/* Dark mode */
[data-bs-theme="dark"] .roadmap-lead { color: var(--dk-text); }
[data-bs-theme="dark"] .rm-flow::before { background: repeating-linear-gradient(var(--dk-border) 0 8px, transparent 8px 16px); }
[data-bs-theme="dark"] .rm-step-icon { border-color: var(--dk-bg); }
[data-bs-theme="dark"] .rm-step-card { background: var(--dk-surface); border-color: var(--dk-border); border-top-color: var(--rm-accent); }
[data-bs-theme="dark"] .rm-step-title,
[data-bs-theme="dark"] .rm-item-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .rm-item-desc { color: var(--dk-muted); }
[data-bs-theme="dark"] .rm-badge.planned { color: var(--dk-muted); background: rgba(255,255,255,.05); border-color: var(--dk-border); }
[data-bs-theme="dark"] .roadmap-cta { background: var(--dk-surface-2); border-color: var(--dk-border); }

/* ---------------------------------------------------------------------------
   Open-access highlight band — dark card, accent heading + hexagon deco
   --------------------------------------------------------------------------- */
.foss-section { background: #f8f9fc; }
.foss-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1b2531, #10161d);
    color: #fff;
    padding: clamp(2.5rem, 6vw, 5rem);
}
.foss-content { position: relative; z-index: 1; max-width: 720px; }
.foss-title {
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    line-height: 1.03;
    letter-spacing: -.5px;
    color: var(--sp-orange);
    margin-bottom: 1.4rem;
}
.foss-lead {
    color: #c9d2dc;
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 620px;
    margin-bottom: 2.2rem;
}
.foss-note { color: #c9d2dc; font-size: 1.1rem; margin-bottom: 0; }
.foss-note a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .18s ease;
}
.foss-note a:hover { color: var(--sp-orange); }

/* Decorative hexagon cluster — angular shapes, on-brand tints */
.foss-deco {
    position: absolute; top: 0; bottom: 0;
    right: clamp(2rem, 6vw, 5rem);
    width: 240px; pointer-events: none;
}
.foss-hex {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    color: rgba(255,255,255,.55);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.3);
}
.foss-hex-1 {
    width: 128px; height: 140px; top: 15%; right: 40px;
    background: linear-gradient(160deg, #ff9d3f, #f5821f);
    font-size: 2.6rem; transform: rotate(8deg);
}
.foss-hex-2 {
    width: 82px; height: 90px; top: 46%; right: 132px;
    background: linear-gradient(160deg, #ffbc71, #f5821f);
    font-size: 1.6rem; transform: rotate(-7deg);
}
.foss-hex-3 {
    width: 60px; height: 66px; top: 60%; right: 18px;
    background: linear-gradient(160deg, #4f8fca, #17457a);
    font-size: 1.15rem; transform: rotate(13deg);
}
@media (max-width: 767.98px) {
    .foss-deco { display: none; }
}

/* ---------------------------------------------------------------------------
   CTA banner — reusable full-bleed image CTA (dark navy scrim + copy + button).
   Drop it anywhere via the partials/frontend/cta-banner partial.
   --------------------------------------------------------------------------- */
.cta-banner {
    position: relative;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    padding: clamp(4rem, 9vw, 7.5rem) 0;
    overflow: hidden;
}
/* Navy gradient scrim — lighter so the photo reads through, still dark enough
   on the left to keep the copy legible. */
.cta-banner::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(15,47,82,.74) 0%,
        rgba(15,47,82,.52) 42%,
        rgba(15,47,82,.28) 72%,
        rgba(15,47,82,.08) 100%);
}
.cta-banner > .container { position: relative; z-index: 1; }
.cta-banner-inner { max-width: 720px; color: #fff; }
.cta-banner-eyebrow { color: var(--sp-orange); margin-bottom: .9rem; }
.cta-banner-title {
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.12;
    color: #fff;
    margin-bottom: 1.1rem;
    text-wrap: balance;                 /* even line lengths, no orphaned words */
}
.cta-banner-title .accent { color: var(--sp-orange); }
.cta-banner-lead {
    max-width: 600px;
    color: #d7e0ec;
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 1.9rem;
}
.cta-banner-btn {
    display: inline-flex; align-items: center;
    background: transparent;
    border: 2px solid var(--sp-orange);
    color: #fff;
    font-weight: 700;
    letter-spacing: .3px;
    padding: .8rem 2rem;
    transition: background .18s ease, color .18s ease;
}
.cta-banner-btn:hover {
    background: var(--sp-orange);
    border-color: var(--sp-orange);
    color: #fff;
}
@media (max-width: 575.98px) {
    .cta-banner { background-position: center; }
    /* Full-width copy on mobile needs a bit more cover for legibility. */
    .cta-banner::before {
        background: linear-gradient(90deg, rgba(15,47,82,.85), rgba(15,47,82,.68));
    }
}

/* ---------------------------------------------------------------------------
   Home page adjustments — the home runs a fixed light "open-source" theme:
   • keep card text readable when global dark mode flips inherited colours
     (cards stay on the light --home-surface, so text must stay dark ink)
   • no hover motion on cards
   • the FOSS band runs full-bleed (no side gutters)
   --------------------------------------------------------------------------- */
body:has(.hero-lite) .feature-title { color: var(--home-ink) !important; }
body:has(.hero-lite) .feature-box .text-muted,
body:has(.hero-lite) .showcase-card .text-muted { color: var(--home-muted) !important; }

body:has(.hero-lite) .feature-box:hover,
body:has(.hero-lite) .showcase-card:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(33, 37, 41, .08);
}
body:has(.hero-lite) .feature-box:hover .feature-badge { transform: none; }

.foss-section > .container { max-width: 100%; padding-left: 0; padding-right: 0; }

/* ---------------------------------------------------------------------------
   Home page in dark mode — the home runs a fixed light "open-source" theme
   that was never wired for dark mode, so it stayed light while every other
   page went dark. Remap its --home-* palette to the dark tokens so the whole
   home (nav, hero, cards, sections) follows dark mode consistently.
   --------------------------------------------------------------------------- */
[data-bs-theme="dark"] body:has(.hero-lite) {
    --home-ink: var(--dk-heading);
    --home-muted: var(--dk-muted);
    --home-border: var(--dk-border);
    --home-surface: var(--dk-surface);
    --home-subtle: var(--dk-surface-2);
    background: var(--dk-bg);
    color: var(--dk-text);
}
/* --home-blue doubles as a button fill (fine on dark) and as link text (too
   dark on a dark surface) — brighten only the text usages. */
[data-bs-theme="dark"] body:has(.hero-lite) .site-nav .nav-link:hover,
[data-bs-theme="dark"] body:has(.hero-lite) .site-nav .nav-link.active,
[data-bs-theme="dark"] body:has(.hero-lite) .site-nav .navbar-actions .nav-login-link:hover,
[data-bs-theme="dark"] body:has(.hero-lite) .btn-brand-ghost:hover,
[data-bs-theme="dark"] body:has(.hero-lite) .sim-btn:hover,
[data-bs-theme="dark"] body:has(.hero-lite) .sim-tab:hover,
[data-bs-theme="dark"] body:has(.hero-lite) .sim-arrow:hover {
    color: var(--dk-blue);
}
/* Showcase titles use .text-dark (stays dark) — relight now that the card is dark. */
[data-bs-theme="dark"] body:has(.hero-lite) .showcase-card .card-title a { color: var(--dk-heading) !important; }

/* ---------------------------------------------------------------------------
   Long-form pages (Privacy Policy, Documentation) — numbered sections with a
   sticky table of contents; see partials.frontend.long-page-toc-script.
   --------------------------------------------------------------------------- */
.pp-section-wrap { padding: 3.5rem 0 4rem; }
.pp-intro { font-size: 1.12rem; line-height: 1.8; color: #3d4a5c; margin-bottom: 0; }

.pp-toc { position: sticky; top: 6rem; border-left: 2px solid #e3e8f0; }
.pp-toc-title { display: block; font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sp-orange); padding: 0 0 .75rem 1.1rem; }
.pp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: pp; }
.pp-toc li { counter-increment: pp; }
.pp-toc a { display: block; margin-left: -2px; padding: .35rem 0 .35rem 1.1rem; border-left: 2px solid transparent; font-size: .92rem; line-height: 1.4; color: #5a6577; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.pp-toc a::before { content: counter(pp, decimal-leading-zero) "  "; font-weight: 700; color: #a0aabb; white-space: pre; }
.pp-toc a:hover { color: var(--sp-navy); }
.pp-toc a.is-active { color: var(--sp-navy); font-weight: 600; border-left-color: var(--sp-orange); }
.pp-toc a.is-active::before { color: var(--sp-orange); }

.pp-body section { position: relative; overflow: hidden; scroll-margin-top: 6rem; padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid #e8ecf3; }
.pp-body section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pp-body h2 { display: flex; align-items: baseline; gap: .75rem; font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 800; color: var(--sp-navy); margin-bottom: 1rem; }
.pp-watermark { position: absolute; right: 0; top: 0; font-size: 7rem; color: var(--sp-navy); opacity: .06; pointer-events: none; z-index: 0; }
.pp-body section > :not(.pp-watermark) { position: relative; z-index: 1; }
.pp-num { font-size: .95rem; font-weight: 800; color: var(--sp-orange); }
.pp-body h3 { font-size: 1.15rem; font-weight: 700; color: var(--sp-black); margin: 1.5rem 0 .6rem; }
.pp-body p,
.pp-body li { font-size: 1.03rem; line-height: 1.8; color: #3d4a5c; }
.pp-body p { margin-bottom: .85rem; }
.pp-body ul { padding-left: 1.2rem; margin-bottom: .85rem; }
.pp-body li { margin-bottom: .35rem; }
.pp-body li::marker { color: var(--sp-orange); }
.pp-body a { color: var(--sp-orange); font-weight: 600; text-decoration: none; }
.pp-body a:hover { text-decoration: underline; }
.pp-callout { border-left: 4px solid var(--sp-orange); background: #fff7ef; padding: 1rem 1.25rem; margin: 1rem 0; }
.pp-callout p { margin: 0; font-weight: 600; color: var(--sp-navy); }

[data-bs-theme="dark"] .pp-intro,
[data-bs-theme="dark"] .pp-body p,
[data-bs-theme="dark"] .pp-body li { color: #9aa6b8; }
[data-bs-theme="dark"] .pp-body h2,
[data-bs-theme="dark"] .pp-body h3,
[data-bs-theme="dark"] .pp-callout p,
[data-bs-theme="dark"] .pp-toc a:hover,
[data-bs-theme="dark"] .pp-toc a.is-active { color: #e7edf5; }
[data-bs-theme="dark"] .pp-toc { border-left-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .pp-toc a { color: #9aa6b8; }
[data-bs-theme="dark"] .pp-body section { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .pp-callout { background: rgba(245,130,31,.08); }
[data-bs-theme="dark"] .pp-watermark { color: #fff; opacity: .05; }

/* Rich text written in the admin editor (documentation sections). */
.pp-body ol { padding-left: 1.4rem; margin-bottom: .85rem; }
.pp-body h4 { font-size: 1.02rem; font-weight: 700; color: var(--sp-black); margin: 1.25rem 0 .5rem; }
.pp-body img { max-width: 100%; height: auto; margin: .5rem 0 1rem; border: 1px solid #e3e8f0; }
.pp-body figure { margin: 0 0 1rem; }
.pp-body blockquote { border-left: 4px solid var(--sp-orange); background: #fff7ef; padding: 1rem 1.25rem; margin: 1rem 0; }
.pp-body blockquote p:last-child { margin-bottom: 0; }
.pp-body code { color: var(--sp-navy); background: #eef2f8; padding: .1rem .35rem; font-size: .92em; }
.pp-body pre { background: #0f2136; color: #e7edf5; padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1rem; }
.pp-body pre code { background: none; color: inherit; padding: 0; }
.pp-body table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; font-size: .97rem; }
.pp-body th, .pp-body td { border: 1px solid #e3e8f0; padding: .55rem .75rem; vertical-align: top; }
.pp-body th { background: #f5f7fb; color: var(--sp-navy); font-weight: 700; }
[data-bs-theme="dark"] .pp-body blockquote { background: rgba(245,130,31,.08); }
[data-bs-theme="dark"] .pp-body code { background: rgba(255,255,255,.08); color: #e7edf5; }
[data-bs-theme="dark"] .pp-body th { background: rgba(255,255,255,.05); color: #e7edf5; }
[data-bs-theme="dark"] .pp-body th, [data-bs-theme="dark"] .pp-body td, [data-bs-theme="dark"] .pp-body img { border-color: rgba(255,255,255,.1); }

/* Documentation home — one card per page. */
.doc-card { display: flex; flex-direction: column; height: 100%; padding: 1.75rem; background: #fff; border: 1px solid #e3e8f0; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.doc-card:hover { border-color: var(--sp-orange); box-shadow: 0 1rem 2rem rgba(23,69,122,.12); transform: translateY(-4px); }
.doc-card-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.1rem; font-size: 1.3rem; color: var(--sp-orange); background: #fff4ea; }
.doc-card-title { font-size: 1.15rem; font-weight: 800; color: var(--sp-navy); margin-bottom: .5rem; }
.doc-card-summary { font-size: .95rem; line-height: 1.7; color: #5c6a7e; margin-bottom: 1.1rem; }
.doc-card-meta { margin-top: auto; display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; color: #8a97ab; }
.doc-card-meta .doc-card-more { color: var(--sp-orange); }
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.doc-pager a { display: block; padding: 1rem 1.25rem; border: 1px solid #e3e8f0; text-decoration: none; color: var(--sp-navy); font-weight: 700; transition: border-color .15s ease; }
.doc-pager a:hover { border-color: var(--sp-orange); }
.doc-pager small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sp-orange); margin-bottom: .25rem; }
.doc-pager .doc-pager-next { grid-column: 2; text-align: right; }

[data-bs-theme="dark"] .doc-card,
[data-bs-theme="dark"] .doc-pager a { background: transparent; border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .doc-card-title,
[data-bs-theme="dark"] .doc-pager a { color: #e7edf5; }
[data-bs-theme="dark"] .doc-card-summary { color: #9aa6b8; }
[data-bs-theme="dark"] .doc-card-icon { background: rgba(245,130,31,.1); }

/* ---------------------------------------------------------------------------
   Squared design language — no rounded corners anywhere on the site.
   Keep this LAST so it overrides every component and Bootstrap default.
   (Loaded after Bootstrap, so it also beats .rounded-* utilities on ties.)
   --------------------------------------------------------------------------- */
*, *::before, *::after,
.rounded, .rounded-0, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5,
.rounded-sm, .rounded-lg, .rounded-circle, .rounded-pill,
.rounded-top, .rounded-end, .rounded-bottom, .rounded-start {
    border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   Step timeline — square markers joined by a dashed line (Download, Institutions).
   Set --dl-step-count on .dl-steps to the number of items.
   --------------------------------------------------------------------------- */
.dl-steps { position: relative; display: grid; grid-template-columns: repeat(var(--dl-step-count, 4), 1fr); gap: 1rem; }
.dl-steps::before { content: ""; position: absolute; top: 1.85rem; left: calc(50% / var(--dl-step-count, 4)); right: calc(50% / var(--dl-step-count, 4)); height: 2px; background: repeating-linear-gradient(90deg, rgba(23,69,122,.25) 0 8px, transparent 8px 14px); }
.dl-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dl-step-marker { position: relative; z-index: 1; width: 3.7rem; height: 3.7rem; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--sp-navy); color: var(--sp-navy); font-size: 1.25rem; margin-bottom: .75rem; }
.dl-step-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-orange); margin-bottom: .2rem; }
.dl-step-title { font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin-bottom: .5rem; color: var(--sp-black); }
.dl-step p { font-size: .93rem; line-height: 1.6; }
.dl-step-cta { margin-top: .75rem; }
.dl-steps a.dl-step-cta { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1.5px solid var(--sp-orange); color: var(--sp-orange); font-size: .88rem; }
.dl-steps a.dl-step-cta:hover { background: var(--sp-orange); color: #fff; }
@media (max-width: 991.98px) {
    .dl-steps { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; }
    .dl-steps::before { top: 0; bottom: 0; left: 1.85rem; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(23,69,122,.25) 0 8px, transparent 8px 14px); }
    .dl-step { display: grid; grid-template-columns: 3.7rem 1fr; column-gap: 1.25rem; align-items: start; text-align: left; padding-bottom: 2rem; }
    .dl-step:last-child { padding-bottom: 0; }
    .dl-step-marker { grid-row: span 5; margin-bottom: 0; }
    .dl-step-cta { justify-self: start; }
}
[data-bs-theme="dark"] .dl-step-marker { background: #14283f; border-color: #7fa6d6; color: #cfe0f5; }
[data-bs-theme="dark"] .dl-step-title { color: #e7edf5; }
[data-bs-theme="dark"] .dl-steps::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 8px, transparent 8px 14px); }
@media (max-width: 991.98px) { [data-bs-theme="dark"] .dl-steps::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.2) 0 8px, transparent 8px 14px); } }

[data-bs-theme="dark"] .sl-per-page .form-select { background-color: var(--dk-surface-2); border-color: rgba(255,255,255,.12); color: inherit; }

/* ---------------------------------------------------------------------------
   Interactive proof — simulation beside its assessment (/interactive-proof/{slug}/view)
   and the assessment card on the detail page.
   --------------------------------------------------------------------------- */
.exam-sim-player { display: block; width: 100%; height: 100%; }
.exam-split.is-dragging simphy-simulation { pointer-events: none; }

.ve-assessment-card .ve-assessment-facts { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .75rem; font-weight: 600; color: var(--sp-navy); }
.ve-assessment-card .ve-assessment-facts i { color: var(--sp-orange); margin-right: .4rem; }

.exam-split.is-sim-only .exam-sim { width: 100% !important; }

.ve-label { color: var(--sp-orange); font-weight: 700; }
.ve-hint { font-size: .78rem; color: #9aa6bb; margin-top: .5rem; }
.ve-tag-negative { color: #e74c3c; background: #fdecec; }
.ve-q-image { display: block; max-width: 100%; max-height: 260px; margin-bottom: .9rem; border: 1px solid #eef0f5; }
.ve-q-status { margin-left: auto; font-size: .75rem; font-weight: 700; padding: .25rem .6rem; background: #eef2f8; color: #5a6b85; }

.ve-match { display: flex; flex-direction: column; gap: .5rem; }
.ve-match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; align-items: center; padding: .4rem; border: 1px solid transparent; }
.ve-match-item { color: var(--sp-navy); font-weight: 600; }
.ve-match-answer { grid-column: 2; font-size: .8rem; font-weight: 600; color: #1e9e5e; }

.ve-order { list-style: decimal inside; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.ve-order-item { display: flex; align-items: center; gap: .5rem; border: 1px solid #e2e7f0; background: #fff; padding: .5rem .75rem; color: var(--sp-navy); }
.ve-order-text { flex: 1 1 auto; }
.ve-order-btn { border: 1px solid #e2e7f0; background: #f7f9fc; color: var(--sp-navy); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.ve-order-btn:hover:not(:disabled) { border-color: var(--sp-orange); color: var(--sp-orange); }

/* After submitting */
.ve-result { background: #fff; border: 1px solid #eef0f5; padding: 1.1rem; }
.ve-result-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .85rem; }
.ve-result-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #9aa6bb; }
.ve-result-score { font-size: 1.6rem; font-weight: 800; color: var(--sp-navy); }

.attempt-q.is-correct { border-color: #1e9e5e; }
.attempt-q.is-incorrect { border-color: #e74c3c; }
.attempt-q.is-correct .ve-q-status { background: #e8f8f0; color: #1e9e5e; }
.attempt-q.is-incorrect .ve-q-status { background: #fdecec; color: #e74c3c; }
.attempt-q.is-review .ve-q-status { background: rgba(245, 130, 31, .12); color: var(--sp-orange); }

.attempt-opt.is-right, .ve-match-row.is-right { border-color: #1e9e5e; background: #e8f8f0; }
.attempt-opt.is-wrong, .ve-match-row.is-wrong { border-color: #e74c3c; background: #fdecec; }
.attempt-pnum.is-correct { background: #1e9e5e; border-color: #1e9e5e; color: #fff; }
.attempt-pnum.is-incorrect { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.attempt-pnum.is-review { border-color: var(--sp-orange); color: var(--sp-orange); }

.ve-feedback { margin-top: .85rem; padding: .75rem .9rem; background: #f7f9fc; border-left: 3px solid var(--sp-orange); }
.ve-feedback-line { margin: 0 0 .35rem; font-size: .88rem; color: #3d4b63; white-space: pre-line; }
.ve-feedback-line:last-child { margin-bottom: 0; }

[data-bs-theme="dark"] .ve-assessment-card .ve-assessment-facts,
[data-bs-theme="dark"] .ve-match-item,
[data-bs-theme="dark"] .ve-result-score { color: var(--dk-heading); }
[data-bs-theme="dark"] .ve-result,
[data-bs-theme="dark"] .ve-order-item { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .ve-order-btn,
[data-bs-theme="dark"] .ve-q-status { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .ve-feedback { background: var(--dk-elevated); }
[data-bs-theme="dark"] .ve-feedback-line { color: var(--dk-text); }
[data-bs-theme="dark"] .ve-q-image { border-color: var(--dk-border); }
[data-bs-theme="dark"] .attempt-opt.is-right,
[data-bs-theme="dark"] .ve-match-row.is-right { background: rgba(30, 158, 94, .15); }
[data-bs-theme="dark"] .attempt-opt.is-wrong,
[data-bs-theme="dark"] .ve-match-row.is-wrong { background: rgba(231, 76, 60, .15); }
[data-bs-theme="dark"] .attempt-q.is-correct .ve-q-status { background: rgba(30, 158, 94, .15); color: #34d399; }
[data-bs-theme="dark"] .attempt-q.is-incorrect .ve-q-status { background: rgba(231, 76, 60, .15); color: #f87171; }

/* Simulation viewer (/simulation-viewer) — drop a local .ssim / .smph to run it.
   Reuses the .sim-run stage + settings cluster; the empty state is the drop zone. */
.sim-view { background: #16181d; }
.sim-view-zone {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; padding: 1.5rem; text-align: center; cursor: pointer;
    color: #9aa1ad; border: 2px dashed transparent;
    background: radial-gradient(circle at 50% 42%, rgba(232, 146, 62, .07), transparent 28rem);
    transition: border-color .15s ease, background-color .15s ease;
}
.sim-view-zone:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: -6px; }
.sim-view-logo { width: 150px; height: 150px; margin-bottom: 3.2rem; }
.sim-view-title { max-width: 380px; margin: 0; color: #c3c8d1; font-size: 1.55rem; font-weight: 500; line-height: 1.45; }
.sim-view-hint { margin: 2.4rem 0 0; font-size: 1.1rem; }
.sim-view-error { min-height: 1.5em; margin: .8rem 0 0; color: #ff8a8a; }
.sim-view.is-dragging .sim-view-zone { border-color: var(--sp-orange); background-color: rgba(232, 146, 62, .06); }
.sim-view.is-loaded .sim-view-zone { display: none; }
.sim-view:not(.is-loaded) .sim-run-settings { display: none; }
.sim-view .sim-run-settings { display: flex; gap: .6rem; }
/* Phones and tablets: the drop zone fills the space below the player bar */
@media (max-width: 991.98px) {
    .sim-view-zone { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
    .sim-view-logo { width: 96px; height: 96px; margin-bottom: 1.5rem; }
    .sim-view-title { font-size: 1.2rem; }
    .sim-view-hint { margin-top: 1.2rem; font-size: .95rem; }
}

/* ---------------------------------------------------------------------------
   Lab layout — tabbed Theory / Procedure / Simulation / Assessment / Resource
   (virtual experiments, /virtual-experiment/{slug}/view).
   --------------------------------------------------------------------------- */
.lab {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 68px);   /* JS refines to the exact space below the navbar */
    background: #f8f9fc;
    overflow: hidden;
}

/* Tab bar ------------------------------------------------------------ */
.lab-tabs {
    display: flex; align-items: flex-end; gap: .3rem; padding: .5rem .8rem 0;
    background: var(--sp-navy-dark);
    flex-shrink: 0; overflow-x: auto; scrollbar-width: none;
}
.lab-exit {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
    margin-left: auto; align-self: center; margin-bottom: .35rem;
    color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600;
    background: rgba(255, 255, 255, .14); padding: .38rem .8rem; border-radius: 2rem;
    transition: background .15s ease;
}
.lab-exit:hover { background: var(--sp-orange); color: #fff; }
.lab-tabs::-webkit-scrollbar { display: none; }
.lab-tab {
    display: inline-flex; align-items: center; gap: .55rem;
    border: 0; background: transparent; color: rgba(255, 255, 255, .72);
    padding: .7rem 1.05rem; border-radius: .75rem .75rem 0 0;
    font-size: .9rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lab-tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lab-tab-ic {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14); font-size: .78rem;
    transition: background .15s ease, color .15s ease;
}
.lab-tab.active { background: #f8f9fc; color: var(--sp-navy); }
.lab-tab.active .lab-tab-ic { background: var(--sp-orange); color: #fff; }

/* Panes -------------------------------------------------------------- */
.lab-content { position: relative; flex: 1 1 auto; min-height: 0; background: #f8f9fc; }
.lab-pane.tab-pane { position: absolute; inset: 0; overflow-y: auto; padding: 1.75rem; }
.lab-pane-flush.tab-pane { padding: 0; overflow: hidden; }

/* Simulation --------------------------------------------------------- */
.lab-sim { position: relative; width: 100%; height: 100%; background: #16394f; }
.lab-sim iframe { width: 100%; height: 100%; border: 0; display: block; }
.lab-sim-tools { position: absolute; top: .85rem; left: .85rem; z-index: 6; display: flex; gap: .5rem; }

/* Assessment --------------------------------------------------------- */
.lab-assess { max-width: 860px; margin: 0 auto; }
.lab-assess-head {
    background: #fff; border: 1px solid #eef0f5; border-radius: .9rem;
    padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.lab-assess-title { font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); }

/* Readable content panes (Theory / Procedure / Resource) ------------- */
.lab-doc { max-width: 820px; margin: 0 auto; }
.lab-eyebrow {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--sp-orange);
    background: rgba(245, 130, 31, .1); padding: .3rem .7rem; border-radius: 2rem; margin-bottom: .9rem;
}
.lab-prose { color: #46536b; line-height: 1.7; }
.lab-prose h2 { font-size: 1.5rem; font-weight: 800; color: var(--sp-navy); margin: 0 0 .9rem; }
.lab-prose h3 { font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); margin: 1.6rem 0 .5rem; }
.lab-prose p { margin: 0 0 .9rem; }
.lab-prose strong { color: var(--sp-navy); }
.lab-formula {
    font-family: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
    font-size: 1.05rem; font-weight: 600; color: var(--sp-navy);
    background: #fff; border: 1px solid #e2e7f0; border-left: 3px solid var(--sp-orange);
    border-radius: .5rem; padding: .7rem 1rem; margin: 0 0 .9rem;
}
.lab-note {
    display: flex; gap: .7rem; align-items: flex-start;
    background: rgba(245, 130, 31, .07); border: 1px solid rgba(245, 130, 31, .25);
    border-radius: .7rem; padding: .85rem 1rem; margin: 1.2rem 0; color: #46536b;
}
.lab-note i { color: var(--sp-orange); font-size: 1rem; margin-top: .15rem; flex-shrink: 0; }
.lab-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.lab-terms li { padding-left: 1.4rem; position: relative; }
.lab-terms li::before {
    content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--sp-orange); position: absolute; left: 0; top: .12rem; font-size: .85rem;
}

/* Procedure steps ---------------------------------------------------- */
.lab-steps { list-style: none; counter-reset: step; margin: 1.2rem 0 0; padding: 0; }
.lab-steps > li {
    counter-increment: step; position: relative; padding: 0 0 1.3rem 3.1rem;
    border-left: 2px solid #e2e7f0; margin-left: 1.1rem;
}
.lab-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.lab-steps > li::before {
    content: counter(step); position: absolute; left: -1.15rem; top: -.15rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--sp-orange); color: #fff; font-weight: 800; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px #f8f9fc;
}
.lab-steps h4 { font-size: 1rem; font-weight: 700; color: var(--sp-navy); margin: 0 0 .2rem; }
.lab-steps p { margin: 0; font-size: .92rem; }

/* Resource cards ----------------------------------------------------- */
.lab-resources { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; }
.lab-resource {
    display: flex; align-items: center; gap: .9rem; text-decoration: none;
    background: #fff; border: 1px solid #eef0f5; border-radius: .8rem; padding: .85rem 1rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lab-resource:hover { border-color: var(--sp-orange); box-shadow: 0 6px 18px rgba(15, 47, 82, .08); transform: translateY(-1px); }
.lab-resource-ic {
    width: 44px; height: 44px; border-radius: .6rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff;
}
.lab-resource-ic.is-pdf   { background: #e74c3c; }
.lab-resource-ic.is-doc   { background: #2b7de9; }
.lab-resource-ic.is-video { background: #1e9e5e; }
.lab-resource-ic.is-link  { background: var(--sp-navy); }
.lab-resource-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lab-resource-title { font-weight: 700; color: var(--sp-navy); line-height: 1.3; }
.lab-resource-meta { font-size: .78rem; color: #9aa6bb; }
.lab-resource-go { color: #c4cdda; flex-shrink: 0; transition: color .15s ease; }
.lab-resource:hover .lab-resource-go { color: var(--sp-orange); }

@media (max-width: 575px) {
    .lab-pane.tab-pane { padding: 1.1rem; }
    .lab-tab { padding: .6rem .8rem; }
    .lab-tab-label { display: none; }   /* icons-only tab bar on phones */
    .lab-tab-ic { width: 30px; height: 30px; font-size: .9rem; }
}

/* ---- Dark mode ----------------------------------------------------- */
[data-bs-theme="dark"] .lab,
[data-bs-theme="dark"] .lab-content { background: var(--dk-surface-2); }
[data-bs-theme="dark"] .lab-tabs { background: var(--dk-surface); }
[data-bs-theme="dark"] .lab-tab.active { background: var(--dk-surface-2); color: var(--dk-heading); }
[data-bs-theme="dark"] .lab-sim { background: var(--dk-bg); }
[data-bs-theme="dark"] .lab-assess-head { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .lab-assess-title,
[data-bs-theme="dark"] .lab-prose h2,
[data-bs-theme="dark"] .lab-prose h3,
[data-bs-theme="dark"] .lab-prose strong,
[data-bs-theme="dark"] .lab-steps h4,
[data-bs-theme="dark"] .lab-resource-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .lab-prose,
[data-bs-theme="dark"] .lab-note { color: var(--dk-text); }
[data-bs-theme="dark"] .lab-formula { background: var(--dk-elevated); border-color: var(--dk-border); border-left-color: var(--sp-orange); color: var(--dk-heading); }
[data-bs-theme="dark"] .lab-note { background: rgba(245, 130, 31, .1); border-color: rgba(245, 130, 31, .3); }
[data-bs-theme="dark"] .lab-steps > li { border-left-color: var(--dk-border); }
[data-bs-theme="dark"] .lab-steps > li::before { box-shadow: 0 0 0 4px var(--dk-surface-2); }
[data-bs-theme="dark"] .lab-resource { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .lab-resource:hover { border-color: var(--sp-orange); }

/* Proof page additions: live player, rich-text (CKEditor) theory / procedure. */
.lab-sim-player { display: block; width: 100%; height: 100%; }
.lab-prose blockquote {
    font-family: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
    font-size: 1.05rem; font-weight: 600; color: var(--sp-navy);
    background: #fff; border: 1px solid #e2e7f0; border-left: 3px solid var(--sp-orange);
    padding: .7rem 1rem; margin: 0 0 .9rem;
}
.lab-prose blockquote p { margin: 0; }
.lab-prose h4 { font-size: 1rem; font-weight: 700; color: var(--sp-navy); margin: 1.2rem 0 .4rem; }
.lab-prose ol, .lab-prose ul { padding-left: 1.4rem; margin: 0 0 .9rem; }
.lab-prose li { margin-bottom: .45rem; }
.lab-prose li::marker { color: var(--sp-orange); font-weight: 700; }
.lab-prose img { max-width: 100%; height: auto; }
.lab-prose table { width: 100%; margin: 0 0 .9rem; border-collapse: collapse; }
.lab-prose th, .lab-prose td { border: 1px solid #e2e7f0; padding: .45rem .6rem; }
[data-bs-theme="dark"] .lab-prose blockquote { background: var(--dk-elevated); border-color: var(--dk-border); border-left-color: var(--sp-orange); color: var(--dk-heading); }
[data-bs-theme="dark"] .lab-prose h4 { color: var(--dk-heading); }
[data-bs-theme="dark"] .lab-prose th, [data-bs-theme="dark"] .lab-prose td { border-color: var(--dk-border); }

/* ---- Signed-in user menu (header) --------------------------------------- */
.nav-user-toggle {
    display: inline-flex; align-items: center; gap: .55rem;
    border: 1.5px solid var(--sp-hairline); background: #fff; color: var(--sp-navy);
    font-weight: 600; font-size: .95rem; padding: .3rem .8rem .3rem .3rem;
    transition: border-color .15s ease, color .15s ease;
}
.nav-user-toggle:hover,
.nav-user-toggle[aria-expanded="true"] { border-color: var(--sp-orange); color: var(--sp-orange); }
.nav-user-avatar {
    display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem;
    background: var(--sp-navy); color: #fff; font-size: .85rem; font-weight: 700;
}
.nav-user-menu {
    min-width: 240px; padding: .4rem; margin-top: .4rem !important;
    border: 1px solid var(--sp-hairline); box-shadow: 0 .8rem 1.8rem rgba(15, 47, 82, .14);
}
.nav-user-head { display: flex; flex-direction: column; padding: .5rem .75rem .6rem; line-height: 1.3; }
.nav-user-head strong { color: var(--sp-navy); font-size: .95rem; }
.nav-user-head span { color: #6b7684; font-size: .8rem; word-break: break-all; }
.nav-user-menu .dropdown-item {
    display: flex; align-items: center; gap: .6rem; font-weight: 500; padding: .5rem .75rem;
}
.nav-user-menu .dropdown-item i { width: 1rem; text-align: center; color: #8a94a3; }
.nav-user-menu .dropdown-item:hover,
.nav-user-menu .dropdown-item:hover i { background: rgba(245, 130, 31, .1); color: var(--sp-orange); }

[data-bs-theme="dark"] .nav-user-toggle { background: var(--dk-elevated); border-color: var(--dk-border); color: var(--dk-text); }
[data-bs-theme="dark"] .nav-user-toggle:hover,
[data-bs-theme="dark"] .nav-user-toggle[aria-expanded="true"] { border-color: var(--sp-orange); color: var(--sp-orange); }
[data-bs-theme="dark"] .nav-user-menu { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .nav-user-head strong { color: var(--dk-heading); }
[data-bs-theme="dark"] .nav-user-head span { color: var(--dk-muted); }
[data-bs-theme="dark"] .nav-user-menu .dropdown-item { color: var(--dk-text); }


/* Login prompt over an assessment for guests (blurred; the pane stops scrolling). */
.exam-assess-body.is-gated { position: relative; overflow: hidden; }
.lab-pane.tab-pane.is-gated { overflow: hidden; }
.ve-gate {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(248, 249, 252, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ve-gate-card {
    max-width: 380px; text-align: center; background: #fff;
    border: 1px solid #eef0f5; box-shadow: 0 16px 40px rgba(15, 47, 82, .14);
    padding: 1.75rem 1.5rem;
}
.ve-gate-icon {
    width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(245, 130, 31, .12); color: var(--sp-orange); font-size: 1.3rem; margin-bottom: .9rem;
}
.ve-gate-title { font-size: 1.15rem; font-weight: 800; color: var(--sp-navy); margin-bottom: .4rem; }
.ve-gate-text { color: #6b7a93; font-size: .9rem; margin-bottom: 1.1rem; }
[data-bs-theme="dark"] .ve-gate { background: rgba(15, 21, 34, .55); }
[data-bs-theme="dark"] .ve-gate-card { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .ve-gate-title { color: var(--dk-heading); }
[data-bs-theme="dark"] .ve-gate-text { color: var(--dk-text); }

/* Assessment already attempted (one attempt per user) + late notice. */
.ve-attempted { max-width: 420px; margin: 1.5rem auto; text-align: center; background: #fff; border: 1px solid #eef0f5; padding: 1.75rem 1.5rem; }
.ve-attempted .ve-gate-icon { color: #1e9e5e; background: #e8f8f0; }
.ve-attempted-score { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: 1.1rem; }
.ve-tag-review { color: var(--sp-orange); background: rgba(245, 130, 31, .12); }
.ve-late { color: #e74c3c; }
[data-bs-theme="dark"] .ve-attempted { background: var(--dk-surface); border-color: var(--dk-border); }
[data-bs-theme="dark"] .ve-attempted .ve-gate-icon { background: rgba(30, 158, 94, .15); color: #34d399; }

/* Account: one attempt's answers. */
.ve-answer-grid { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; font-size: .9rem; }
.ve-answer-grid dt { color: #9aa6bb; font-weight: 600; }
.ve-answer-grid dd { margin: 0; color: #3d4b63; }
@media (max-width: 575px) { .ve-answer-grid { grid-template-columns: 1fr; } .ve-answer-grid dd { margin-bottom: .4rem; } }
[data-bs-theme="dark"] .ve-answer-grid dd { color: var(--dk-text); }

/* ---------------------------------------------------------------------------
   Classroom activity: cover subtitle + book reader (/classroom-activity/{slug}/view).
   --------------------------------------------------------------------------- */
.ca-subtitle { font-weight: 600; color: var(--sp-orange); margin-bottom: .35rem; }

.ca-reader-wrap { padding: 2rem 0 3rem; }
.ca-reader { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; max-width: 1280px; margin: 0 auto; }
.ca-toc { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; border-right: 1px solid #eef0f5; padding-right: 1rem; }
.ca-toc-book { display: block; font-weight: 700; color: var(--sp-navy); text-decoration: none; margin-bottom: 1rem; }
.ca-toc-chapter { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #9aa6bb; margin: 1rem 0 .35rem; }
.ca-toc ul { list-style: none; padding: 0; margin: 0; }
.ca-toc li a { display: block; padding: .35rem .6rem; color: #46536b; text-decoration: none; font-size: .9rem; border-left: 2px solid transparent; }
.ca-toc li a:hover { color: var(--sp-orange); }
.ca-toc li a.is-active { color: var(--sp-navy); font-weight: 700; border-left-color: var(--sp-orange); background: rgba(245, 130, 31, .07); }
.ca-toc-toggle { display: none; border: 1px solid #e2e7f0; background: #fff; color: var(--sp-navy); font-weight: 600; padding: .4rem .8rem; margin-bottom: 1rem; }

.ca-page { min-width: 0; }
.ca-page-chapter { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sp-orange); }
.ca-page-title { font-size: 1.8rem; font-weight: 800; color: var(--sp-navy); margin: .25rem 0 1.5rem; }
.ca-row { margin-bottom: 1rem; }
.ca-el { margin-bottom: 1.25rem; max-width: 100%; }
.ca-el iframe, .ca-el video, .ca-el img, .ca-el simphy-simulation { display: block; max-width: 100%; border: 0; }
.ca-el iframe, .ca-el video { border: 1px solid #eef0f5; background: #f7f9fc; }
.ca-sim { display: block; background: #16394f; }
.ca-align-center > * { margin-left: auto; margin-right: auto; }
.ca-align-right > * { margin-left: auto; }
.ca-text { color: #3d4b63; line-height: 1.75; }
.ca-reader mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.ca-text h3 { font-size: 1.2rem; font-weight: 700; color: var(--sp-navy); margin: 1.25rem 0 .5rem; }
.ca-text blockquote { border-left: 3px solid var(--sp-orange); background: #fff; padding: .6rem 1rem; font-weight: 600; color: var(--sp-navy); }
.ca-note { display: flex; gap: .7rem; background: rgba(245, 130, 31, .07); border: 1px solid rgba(245, 130, 31, .25); padding: .85rem 1rem; color: #46536b; }
.ca-note > i { color: var(--sp-orange); margin-top: .2rem; }
.ca-download { display: inline-block; margin-top: .4rem; font-size: .85rem; font-weight: 600; }
.ca-missing { color: #9aa6bb; font-size: .9rem; }
.ca-question .attempt-q { margin-bottom: 0 !important; }
.ca-check-all { margin-top: 1.5rem; }
/* Guests: a blurred placeholder page behind the login prompt (no real content is sent). */
.ca-gated { position: relative; min-height: 70vh; overflow: hidden; }
.ca-gated .ve-gate { align-items: flex-start; padding-top: 18vh; }
.ca-skeleton { display: grid; gap: 1rem; }
.ca-skeleton span { display: block; height: 14px; background: #e6eaf2; }
.ca-skeleton .is-title { height: 34px; width: 45%; }
.ca-skeleton .is-short { width: 60%; }
.ca-skeleton .is-block { height: 260px; }
[data-bs-theme="dark"] .ca-skeleton span { background: var(--dk-elevated); }
.ca-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #eef0f5; }
.ca-pager-count { font-size: .85rem; font-weight: 600; color: #9aa6bb; }

@media (max-width: 991.98px) {
    .ca-reader { grid-template-columns: 1fr; gap: 0; }
    .ca-toc { display: none; position: static; max-height: none; border-right: 0; border-bottom: 1px solid #eef0f5; padding: 0 0 1rem; margin-bottom: 1rem; }
    .ca-toc.is-open { display: block; }
    .ca-toc-toggle { display: inline-block; }
    .ca-page-title { font-size: 1.45rem; }
}

[data-bs-theme="dark"] .ca-toc-book,
[data-bs-theme="dark"] .ca-page-title,
[data-bs-theme="dark"] .ca-text h3,
[data-bs-theme="dark"] .ca-toc li a.is-active { color: var(--dk-heading); }
[data-bs-theme="dark"] .ca-toc li a,
[data-bs-theme="dark"] .ca-text,
[data-bs-theme="dark"] .ca-note { color: var(--dk-text); }
[data-bs-theme="dark"] .ca-toc,
[data-bs-theme="dark"] .ca-pager { border-color: var(--dk-border); }
[data-bs-theme="dark"] .ca-toc-toggle,
[data-bs-theme="dark"] .ca-text blockquote { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-heading); }
[data-bs-theme="dark"] .ca-el iframe, [data-bs-theme="dark"] .ca-el video { border-color: var(--dk-border); background: var(--dk-surface-2); }

/* ---- Simulation embedded in rich text (partials/frontend/simulation-embed) ---- */
.rt-sim { margin: 1.5rem 0; border: 1px solid rgba(15, 47, 82, .12); }
.rt-sim-player { display: block; width: 100%; height: 480px; max-height: 80vh; border: 0; background: #0f2f52; }
.rt-sim figcaption { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; font-size: .9rem; font-weight: 600; color: var(--sp-navy); }
.rt-sim figcaption i { color: var(--sp-orange); }
.rt-sim figcaption a { color: inherit; text-decoration: none; }
.rt-sim figcaption a:hover { color: var(--sp-orange); }
[data-bs-theme="dark"] .rt-sim { border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .rt-sim figcaption { color: #e6ecf5; }

/* LaTeX formula in admin rich text (typeset by MathJax) */
[data-math="display"] { display: block; margin: 1rem 0; overflow-x: auto; overflow-y: hidden; }