/*
Theme Name: ACE Theme
Theme URI: https://example.com
Author: You
Author URI: https://example.com
Description: Fully hardcoded custom theme for the online review center website. No block/FSE dependency — built with classic PHP templates so every pixel is controlled by hand.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: reviewcustom
*/

/* =========================================
   0. CSS VARIABLES — brand palette (warm dark neutrals)
   A warm charcoal/off-white palette with a terracotta accent —
   clean and professional rather than a saturated brand color.
   Change these lines to re-theme the whole site at once.
   ========================================= */
:root{
  --color-primary: #cc785c;      /* warm terracotta accent */
  --color-primary-dark: #b3624a; /* darker terracotta for hover states */
  --color-secondary: #1a1918;    /* deepest warm charcoal — footer/CTA bands */
  --color-heading: #f5f4ef;      /* warm off-white for readable headings */
  --color-bg: #262624;           /* main warm dark background */
  --color-bg-alt: #30302e;       /* slightly lighter warm surface (cards) */
  --color-text: #e8e6dc;         /* warm off-white body text */
  --color-text-muted: #a39e93;   /* warm muted gray-tan for secondary text */
  --color-accent: #d4a27f;       /* soft warm gold, used sparingly */
  --radius: 14px;
  --max-width: 1180px;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========================================
   1. RESET
   ========================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-heading); line-height:1.2; margin:0 0 .5em; }
.container{ max-width: var(--max-width); margin:0 auto; padding: 0 24px; }
.btn{
  display:inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight:600;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 2px solid transparent;
}
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,138,129,.25); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.6); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn-dark-outline{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-dark-outline:hover{ background: var(--color-primary); color:#fff; }

/* =========================================
   2. HEADER
   ========================================= */
.site-header{
  position: sticky; top:0; z-index: 999;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.site-logo img{ height: 44px; width:auto; }
.site-logo{ font-family: var(--font-heading); font-weight:700; font-size:1.3rem; color: var(--color-heading); }
.main-nav ul{ display:flex; align-items:center; gap: 34px; }
.main-nav a{ font-weight:600; font-size:.95rem; color: var(--color-text); }
.main-nav a:hover{ color: var(--color-primary); }
.main-nav .btn{ padding: 10px 24px; }
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color: var(--color-heading); }

@media (max-width: 860px){
  .main-nav{
    position:absolute; top:84px; left:0; right:0;
    background: var(--color-bg); border-bottom:1px solid rgba(255,255,255,.08);
    display:none; flex-direction:column; padding: 20px 24px;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap: 18px; width:100%; }
  .nav-toggle{ display:block; }
}

/* =========================================
   3. HERO — full-width banner image
   ========================================= */
.hero{
  position: relative;
  padding: 130px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}
/* Dark scrim over the photo so white text stays readable
   regardless of what's happening in the image underneath. */
.hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(4,14,16,.9) 0%, rgba(4,14,16,.72) 55%, rgba(4,14,16,.45) 100%);
  z-index: 0;
}
.hero-inner{ position: relative; z-index: 1; }
.hero-copy{ max-width: 620px; }
.hero-eyebrow{
  display:inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1{ font-size: clamp(2rem, 4vw, 3.1rem); color: #fff; }
.hero h1 span{ color: var(--color-primary); }
.hero p{ font-size: 1.1rem; color: rgba(255,255,255,.85); max-width: 520px; margin-bottom: 30px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap: 16px; }

@media (max-width: 860px){
  .hero{ padding: 90px 0; text-align:center; }
  .hero-copy{ margin: 0 auto; }
  .hero p{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
}
@media (max-width: 480px){
  .hero{ padding: 70px 0; }
}

/* =========================================
   4. FEATURES (3-column)
   ========================================= */
.features{ padding: 90px 0; }
.section-heading{ text-align:center; max-width: 640px; margin: 0 auto 56px; }
.section-heading h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--color-heading); }
.section-heading p{ color: var(--color-text-muted); }
.features-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.feature-card{
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(11,46,51,.08); }
.feature-icon{
  width: 56px; height:56px; border-radius: 14px;
  background: var(--color-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; margin-bottom: 20px;
}
.feature-card h3{ font-size: 1.15rem; color: var(--color-heading); }
.feature-card p{ color: var(--color-text-muted); font-size: .95rem; margin:0; }

@media (max-width: 860px){
  .features-grid{ grid-template-columns: 1fr; }
}

/* =========================================
   5. CTA / ENROLL BAND
   ========================================= */
.cta-band{
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius);
  margin: 0 24px;
  padding: 64px 40px;
  text-align:center;
}
.cta-band h2{ font-size: clamp(1.5rem, 3vw, 2rem); }
.cta-band p{ color: rgba(255,255,255,.75); max-width: 560px; margin: 0 auto 28px; }

/* =========================================
   6. APP DOWNLOAD SECTION
   ========================================= */
.app-section{ padding: 100px 0; }
.app-section .container{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center;
}
.app-mock{
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  aspect-ratio: 1/1.05;
  display:flex; align-items:center; justify-content:center;
  color: var(--color-text-muted); font-size:.9rem;
}
.app-section h2{ color: var(--color-heading); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.app-section p{ color: var(--color-text-muted); margin-bottom: 26px; }
.store-badges{ display:flex; gap: 14px; flex-wrap:wrap; }
.store-badges a{
  border: 2px solid var(--color-primary);
  border-radius: 10px; padding: 10px 20px; font-weight:600; font-size:.9rem;
  color: var(--color-text);
}
.store-badges a:hover{ background: var(--color-primary); color: var(--color-bg); }

@media (max-width: 860px){
  .app-section .container{ grid-template-columns: 1fr; }
  .app-section{ text-align:center; padding: 60px 0; }
  .app-section p{ margin-left:auto; margin-right:auto; }
  .store-badges{ justify-content:center; }
}

/* =========================================
   6b. PWA — INSTALL BUTTON + MOBILE BOTTOM TAB BAR
   ========================================= */
.install-app-btn{
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 1000;
  display: none; /* shown via .is-visible once installable (see main.js) */
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .2s ease;
}
.install-app-btn.is-visible{ display: inline-flex; }
.install-app-btn:hover{ transform: translateY(-3px); }
.install-app-btn svg{ width: 18px; height: 18px; }

@media (max-width: 768px){
  /* Sits above the bottom tab bar instead of overlapping it. */
  .install-app-btn{ bottom: 84px; right: 18px; padding: 10px 16px; }
}

.bottom-tab-bar{
  display: none; /* desktop: header nav handles navigation */
}

@media (max-width: 768px){
  .bottom-tab-bar{
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 999;
    background: var(--color-secondary);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .bottom-tab-bar a{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(255,255,255,.55);
    font-size: .7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    transition: color .15s ease;
  }
  .bottom-tab-bar svg{ width: 22px; height: 22px; }
  .bottom-tab-bar a.is-active{ color: var(--color-primary); }
  .bottom-tab-bar a:active{ background: rgba(255,255,255,.06); }

  /* Keep page content (and the site footer) from being hidden
     behind the fixed bottom bar. */
  body{ padding-bottom: 64px; }

  /* Bottom tab bar replaces the hamburger dropdown on phones —
     having both at once would be redundant/cluttered. */
  .nav-toggle,
  .main-nav{ display: none !important; }
}

/* =========================================
   7. FOOTER
   ========================================= */
.site-footer{ background: var(--color-secondary); color: rgba(255,255,255,.8); padding: 60px 0 26px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand p{ color: rgba(255,255,255,.6); max-width: 320px; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom: 16px; }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col a{ color: rgba(255,255,255,.65); }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap: 14px; margin-top: 18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border: 1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background: var(--color-primary); border-color: var(--color-primary); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 22px;
  text-align:center;
  font-size:.85rem;
  color: rgba(255,255,255,.5);
}

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .footer-social{ justify-content:center; }
  .footer-brand p{ margin: 0 auto; }
}

/* =========================================
   LEARNDASH — FOCUS MODE
   Reskins LearnDash's distraction-free lesson/topic/quiz view
   to match the site's dark teal palette instead of LearnDash's
   default white/blue look. Focus Mode bypasses header.php/footer.php
   but still loads this stylesheet, so these rules target LearnDash's
   own class names directly.

   Note: exact class names can shift slightly between LearnDash
   versions — if something still looks unstyled after this, it's a
   quick follow-up fix once we can see which element it is.
   ========================================= */

.ld-focus,
.ld-focus-content,
body.ld-focus-mode-on{
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body);
}

/* --- Top bar: back-to-course link + course title --- */
.ld-focus-header{
  background: var(--color-secondary) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.ld-focus-header,
.ld-focus-header a,
.ld-focus-header .ld-focus-title{
  color: var(--color-heading) !important;
}
.ld-focus-header a:hover{ color: var(--color-primary) !important; }

/* --- Progress bar --- */
.ld-progress{
  background: transparent !important;
}
.ld-progress-bar{
  background: rgba(255,255,255,.1) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.ld-progress-bar .ld-progress-bar-percentage,
.ld-progress-bar-inner{
  background: var(--color-primary) !important;
}
.ld-progress-percentage,
.ld-progress-steps{
  color: var(--color-text-muted) !important;
}

/* --- Sidebar: lesson/topic navigation tree --- */
.ld-focus-sidebar{
  background: var(--color-bg-alt) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}
.ld-focus-sidebar .ld-item-list,
.ld-focus-sidebar .ld-item-list-item{
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
}
.ld-focus-sidebar .ld-item-name,
.ld-focus-sidebar a{
  color: var(--color-text) !important;
}
.ld-focus-sidebar a:hover{
  color: var(--color-primary) !important;
}
.ld-focus-sidebar .ld-item-list-item-current,
.ld-focus-sidebar .ld-item-list-item.ld-item-current{
  background: rgba(18,179,168,.12) !important;
}
.ld-focus-sidebar .ld-item-list-item-current .ld-item-name{
  color: var(--color-primary) !important;
  font-weight: 600;
}
.ld-focus-sidebar .ld-status-icon svg,
.ld-focus-sidebar .ld-icon{
  fill: var(--color-text-muted) !important;
}
.ld-focus-sidebar .ld-status-complete .ld-icon,
.ld-focus-sidebar .ld-status-complete svg{
  fill: var(--color-primary) !important;
}
.ld-expand-button,
.ld-focus-sidebar-toggle{
  background: var(--color-secondary) !important;
  color: var(--color-heading) !important;
}

/* --- Main lesson/topic content typography --- */
.ld-focus-content h1,
.ld-focus-content h2,
.ld-focus-content h3,
.ld-focus-content h4{
  color: var(--color-heading) !important;
}
.ld-focus-content p,
.ld-focus-content li{
  color: var(--color-text) !important;
}
.ld-focus-content a:not(.btn):not(.ld-button){
  color: var(--color-primary) !important;
}

/* --- Tabs: Content / Materials / Comments --- */
.ld-tabs .ld-tabs-navigation{
  background: var(--color-bg-alt) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.ld-tabs .ld-tab-nav-item a{
  color: var(--color-text-muted) !important;
}
.ld-tabs .ld-tab-nav-item.ld-tab-nav-active a,
.ld-tabs .ld-tab-nav-item a.ld-active{
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}
.ld-tabs .ld-tab-content,
.ld-tabs-content-wrapper{
  background: var(--color-bg) !important;
}

/* --- Buttons: Mark Complete, prev/next navigation ---
   (.ld-focus = old Focus Mode, kept as harmless fallback;
    .ace-player-content = our new custom course player) --- */
.ld-focus .learndash_mark_complete_button,
.ld-focus button.ld-button,
.ld-focus a.ld-button,
.ace-player-content .learndash_mark_complete_button,
.ace-player-content button.ld-button,
.ace-player-content a.ld-button{
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.ld-focus .learndash_mark_complete_button:hover,
.ld-focus button.ld-button:hover,
.ld-focus a.ld-button:hover,
.ace-player-content .learndash_mark_complete_button:hover,
.ace-player-content button.ld-button:hover,
.ace-player-content a.ld-button:hover{
  background: var(--color-primary-dark) !important;
}
#learndash_next_prev_link,
.ld-focus-footer{
  background: var(--color-secondary) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
#learndash_next_prev_link a,
.ld-focus-footer a{
  color: var(--color-heading) !important;
}
#learndash_next_prev_link a:hover,
.ld-focus-footer a:hover{
  color: var(--color-primary) !important;
}

/* --- Quizzes (WpProQuiz base) ---
   The outer panel is intentionally transparent: the question card and
   the option bars are the only surfaces, matching the Practice page. */
.ld-focus .wpProQuiz_content,
.ace-player-content .wpProQuiz_content{
  background: transparent !important;
  color: var(--color-text) !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
}
.ld-focus .wpProQuiz_questionList li,
.ace-player-content .wpProQuiz_questionList li{
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: rgba(255,255,255,.1) !important;
}
.ld-focus .wpProQuiz_button,
.ace-player-content .wpProQuiz_button{
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 999px !important;
}

/* =========================================
   CUSTOM COURSE PLAYER
   Replaces LearnDash Focus Mode entirely — full control, matches
   the rest of the site's dark palette exactly since we own every
   class name here (no fighting LearnDash's own markup/specificity).
   ========================================= */

body.ace-player{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  height: 100vh;
  overflow: hidden;
}

/* --- Top bar --- */
.ace-player-topbar{
  height: 60px;
  background: var(--color-secondary);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}
.ace-sidebar-toggle{
  background: none;
  border: none;
  color: var(--color-heading);
  cursor: pointer;
  padding: 6px;
  display: none; /* shown on mobile below */
}
.ace-sidebar-toggle svg{ width: 22px; height: 22px; }
.ace-player-back{
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.ace-player-back svg{ width: 16px; height: 16px; }
.ace-player-back:hover{ color: var(--color-primary); }
.ace-player-title{
  color: var(--color-heading);
  font-weight: 600;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Top bar profile summary: avatar, name, badges, courses, resume —
   all in one line, shown on every app page. --- */
.ace-topbar-profile{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ace-topbar-avatar{ border-radius: 50%; flex-shrink: 0; width: 28px; height: 28px; }
.ace-topbar-name{
  font-weight: 700;
  font-size: .82rem;
  color: var(--color-heading);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: color .15s ease;
}
.ace-topbar-name:hover{ color: var(--color-primary); }
.ace-topbar-badge{
  background: rgba(204,120,92,.15);
  color: var(--color-primary);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ace-topbar-courses{
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.ace-topbar-courses::-webkit-scrollbar{ display: none; }
.ace-topbar-course-pill{
  background: rgba(255,255,255,.06);
  color: var(--color-text-muted);
  font-size: .62rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ace-topbar-resume{
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.1);
  text-decoration: none;
}
.ace-topbar-resume-label{
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-primary);
  white-space: nowrap;
}
.ace-topbar-resume-title{
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ace-topbar-resume-btn{
  background: var(--color-primary);
  color: var(--color-bg);
  font-size: .68rem;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease;
}
.ace-topbar-resume:hover .ace-topbar-resume-btn{ background: var(--color-primary-dark); }

@media (max-width: 900px){
  /* Not enough width for the full lineup on phones/tablets — keep
     just the essentials (avatar, name, resume) and drop the rest. */
  .ace-topbar-badge,
  .ace-topbar-courses{ display: none; }
  .ace-topbar-resume-label{ display: none; }
  .ace-topbar-resume-title{ max-width: 80px; }
}

/* --- Body: sidebar + content, side by side --- */
.ace-player-body{
  display: flex;
  height: calc(100vh - 60px);
}

.ace-player-sidebar{
  width: 260px;
  flex-shrink: 0;
  background: var(--color-bg-alt);
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the two inner sections scroll independently below */
}

/* --- Part 1: pinned global nav (Dashboard / Learning Path / etc.) --- */
.ace-sidebar-nav{
  flex-shrink: 0;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ace-sidebar-nav-item{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--color-text);
  font-size: .8rem;
  font-weight: 600;
}
.ace-sidebar-nav-item svg{ width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-muted); }
.ace-sidebar-nav-item:hover{ background: rgba(255,255,255,.05); }
.ace-sidebar-nav-item:hover svg{ color: var(--color-primary); }
.ace-sidebar-nav-item.is-soon{ color: var(--color-text-muted); cursor: default; }
.ace-sidebar-nav-item.is-soon:hover{ background: none; }
.ace-sidebar-nav-item.is-soon:hover svg{ color: var(--color-text-muted); }
.ace-soon-badge{
  margin-left: auto;
  font-style: normal;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(255,255,255,.06);
  padding: 2px 6px;
  border-radius: 999px;
}

/* --- Part 2: scrollable course tree (Lessons > Topics > Quizzes) --- */
.ace-sidebar-course-tree{
  flex: 1;
  overflow-y: auto;
  padding: 14px 0 28px;
}

/* --- Part 3: pinned footer (Homepage / Log Out) --- */
.ace-sidebar-footer{
  flex-shrink: 0;
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* --- Custom scrollbar for the dark theme (replaces the default
   light/OS scrollbar wherever content scrolls in the app shell) --- */
.ace-sidebar-course-tree,
.ace-player-content{
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: rgba(255,255,255,.15) transparent; /* Firefox */
}
.ace-sidebar-course-tree::-webkit-scrollbar,
.ace-player-content::-webkit-scrollbar{
  width: 8px;
}
.ace-sidebar-course-tree::-webkit-scrollbar-track,
.ace-player-content::-webkit-scrollbar-track{
  background: transparent;
}
.ace-sidebar-course-tree::-webkit-scrollbar-thumb,
.ace-player-content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 999px;
}
.ace-sidebar-course-tree::-webkit-scrollbar-thumb:hover,
.ace-player-content::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.28);
}

.ace-sidebar-header{
  padding: 0 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
.ace-sidebar-course-title{
  display: block;
  color: var(--color-heading);
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 10px;
}
.ace-sidebar-course-title:hover{ color: var(--color-primary); }
.ace-sidebar-progress-track{
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  height: 5px;
  overflow: hidden;
  margin-bottom: 5px;
}
.ace-sidebar-progress-fill{
  background: var(--color-primary);
  height: 100%;
}
.ace-sidebar-progress-label{
  font-size: .68rem;
  color: var(--color-text-muted);
}

/* =========================================================
   SIDEBAR COURSE TREE
   ---------------------------------------------------------
   Redesigned for a calmer visual hierarchy: only the active
   item carries full weight/color, everything else recedes
   until you hover or open it — rather than every row reading
   at the same bold, uniformly-colored intensity regardless of
   state.
   ========================================= */

.ace-lesson-group{
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ace-lesson-group:last-child{ border-bottom: none; }

.ace-lesson-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  padding: 11px 14px 11px 12px;
  text-align: left;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.ace-lesson-toggle:hover{ background: rgba(255,255,255,.03); }
.ace-lesson-group.is-open .ace-lesson-toggle{
  border-left-color: rgba(204,120,92,.4);
  background: rgba(255,255,255,.02);
}

.ace-lesson-link{
  flex: 1;
  min-width: 0;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .01em;
  line-height: 1.4;
  transition: color .15s ease;
}
/* The lesson itself is being viewed, not just its group expanded —
   this earns full brightness + the accent colour; an open-but-not-
   current group stays muted so only one thing ever reads as "here". */
.ace-lesson-group.is-open .ace-lesson-link{ color: var(--color-text); }
.ace-lesson-link.is-active,
.ace-lesson-link:hover{ color: var(--color-primary) !important; }

.ace-lesson-caret{
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--color-text-muted);
  opacity: .55;
  transition: transform .18s ease, opacity .15s ease;
}
.ace-lesson-toggle:hover .ace-lesson-caret{ opacity: .9; }
.ace-lesson-group.is-open .ace-lesson-caret{ transform: rotate(180deg); opacity: .9; }

/* ---- Nested topics/quizzes: a thin connector line ties them
   visually to their parent lesson, the way a file tree does,
   instead of them just floating at an indent with no structural
   cue back to what they belong to. ---- */
.ace-topic-list{
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 14px 10px 16px;
  padding: 2px 0 2px 10px;
  border-left: 1px solid rgba(255,255,255,.07);
}
.ace-lesson-group.is-open .ace-topic-list{ display: flex; }

.ace-topic-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color .15s ease, background .15s ease;
}
.ace-topic-link:hover{ color: var(--color-text); background: rgba(255,255,255,.04); }
.ace-topic-link.is-active{
  color: var(--color-primary) !important;
  font-weight: 700;
  background: rgba(204,120,92,.09);
}

.ace-quiz-link{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 3px;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 500;
  opacity: .85;
  transition: color .15s ease, background .15s ease, opacity .15s ease;
}
.ace-quiz-link:hover{ color: var(--color-text); background: rgba(255,255,255,.04); opacity: 1; }
.ace-quiz-link.is-active{
  color: var(--color-primary) !important;
  font-weight: 700;
  background: rgba(204,120,92,.09);
  opacity: 1;
}
.ace-quiz-icon{ width: 12px; height: 12px; flex-shrink: 0; }

/* ---- Status dot: thinner ring, slightly smaller, so it reads as a
   quiet progress marker rather than competing with the label text
   for attention. ---- */
.ace-status-dot{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease;
}
.ace-lesson-toggle:hover .ace-status-dot,
.ace-topic-link:hover .ace-status-dot,
.ace-quiz-link:hover .ace-status-dot{ border-color: rgba(255,255,255,.4); }
.ace-status-dot.is-complete{
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.ace-status-dot.is-complete::after{
  content: '\2713';
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}


/* --- Mobile backdrop (behind the sliding sidebar) --- */
.ace-sidebar-backdrop{
  display: none;
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(0,0,0,.5);
  z-index: 998;
}
.ace-sidebar-backdrop.is-open{ display: block; }

/* --- Main content --- */
.ace-player-content{
  flex: 1;
  overflow-y: auto;
  padding: 40px 48px 80px;
}
/* Constrains readable width WITHOUT being on the scrolling element
   itself — keeps the scrollbar at the true screen edge instead of
   appearing to float in the middle with empty space beside it. */
.ace-content-inner{
  max-width: 860px;
  margin: 0 auto;
}
.ace-player-content h1,
.ace-player-content h2,
.ace-player-content h3,
.ace-player-content h4{
  color: var(--color-heading);
}
.ace-player-content p,
.ace-player-content li{
  color: var(--color-text);
  line-height: 1.7;
}
.ace-player-content a:not(.btn):not(.ld-button){
  color: var(--color-primary);
}
.ace-player-content img{ border-radius: 10px; }

@media (max-width: 900px){
  .ace-sidebar-toggle{ display: block; }
  .ace-player-sidebar{
    position: fixed;
    top: 60px; bottom: 0; left: 0;
    width: 260px;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .ace-player-sidebar.is-open{ transform: translateX(0); }
  .ace-player-content{ padding: 28px 20px 60px; }
  .ace-player-back span{ display: none; }
}

/* --- App-like navigation polish --- */
#ace-loading-bar{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--color-primary);
  z-index: 1100;
  opacity: 0;
  transition: width .3s ease, opacity .2s ease;
}
#ace-loading-bar.is-active{
  width: 70%;
  opacity: 1;
  transition: width 8s cubic-bezier(0.1, 0.8, 0.9, 1), opacity .2s ease;
}
.ace-player-content{
  transition: opacity .12s ease;
}

/* =========================================
   LOGIN PAGE — split screen (solid panel + banner image)
   ========================================= */
body.ace-login-page{
  margin: 0;
  background: var(--color-secondary);
}

.ace-login-shell{
  display: flex;
  min-height: 100vh;
}

/* --- Left: solid login panel --- */
.ace-login-panel{
  position: relative;
  width: 46%;
  min-width: 380px;
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}
.ace-login-back{
  position: absolute;
  top: 32px;
  left: 32px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  background: rgba(255,255,255,.05);
}
.ace-login-back:hover{ color: var(--color-heading); background: rgba(255,255,255,.1); }
.ace-login-back svg{ width: 18px; height: 18px; }

.ace-login-panel-inner{ width: 100%; max-width: 360px; }
.ace-login-panel-inner h1{
  color: var(--color-heading);
  font-size: 1.9rem;
  margin: 0 0 10px;
}
.ace-login-subtext{
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 32px;
}
.ace-login-subtext a{ color: var(--color-primary); font-weight: 600; }

.ace-login-error{
  background: rgba(220,80,80,.12);
  border: 1px solid rgba(220,80,80,.4);
  color: #f3d9d9;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .88rem;
  margin-bottom: 22px;
}

.ace-login-form{ display: flex; flex-direction: column; gap: 22px; }
.ace-login-field{ display: flex; flex-direction: column; gap: 6px; }
.ace-login-field span{
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ace-login-field input{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  padding: 8px 2px;
}
.ace-login-field input:focus{
  outline: none;
  border-bottom-color: var(--color-primary);
}

.ace-login-remember{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.ace-login-remember input{ accent-color: var(--color-primary); }

.ace-login-submit{
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
  transition: background .15s ease, transform .15s ease;
}
.ace-login-submit:hover{ background: var(--color-primary-dark); transform: translateY(-1px); }

/* CAPTCHA question added by the ACE Security plugin — a distinct
   bordered card rather than reusing the plain underline field style,
   so it reads as a deliberate "security check" moment. */
.ace-captcha-box{
  background: var(--color-bg-alt);
  border: 1px dashed rgba(224,141,111,.5);
  border-radius: 12px;
  padding: 14px 16px;
}
.ace-captcha-field{ display: flex; flex-direction: column; gap: 8px; }
.ace-captcha-field span{
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Courier New', monospace;
}
.ace-captcha-field span::before{ content: '> '; }
.ace-captcha-field input{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: .04em;
  padding: 10px 12px;
}
.ace-captcha-field input:focus{
  outline: none;
  border-color: var(--color-primary);
}

.ace-login-divider{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.ace-login-divider::before,
.ace-login-divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}

.ace-login-discord-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #5865F2;
  color: #fff;
  padding: 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.ace-login-discord-btn:hover{ background: #4752c4; transform: translateY(-1px); }
.ace-login-discord-btn svg{ width: 20px; height: 20px; }

/* --- Right: banner image graphic --- */
.ace-login-graphic{
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ace-login-graphic-overlay{
  position: absolute;
  inset: 0;
  /* Darker toward the center so the centered text always has contrast,
     regardless of what's behind it in the photo. */
  background:
    radial-gradient(ellipse at center, rgba(15,14,13,.72) 0%, rgba(15,14,13,.5) 45%, rgba(26,25,24,.25) 100%);
}
.ace-login-graphic-text{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 94%;
  padding: 0 20px;
}
.ace-login-graphic-text h2{
  color: #ffffff;
  /* clamp() scales the size down as the panel narrows, and nowrap
     keeps it on one line all the way down to the breakpoint where
     this panel hides on mobile. */
  font-size: clamp(1.1rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.ace-login-graphic-text h2 span{ color: var(--color-primary); }
.ace-login-graphic-text p{
  color: rgba(255,255,255,.92);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

@media (max-width: 860px){
  .ace-login-shell{ flex-direction: column; }
  .ace-login-panel{ width: 100%; min-width: 0; min-height: 100vh; padding: 80px 24px 40px; }
  .ace-login-graphic{ display: none; }
}

/* =========================================
   DASHBOARD PAGE
   ========================================= */
.ace-dashboard{ max-width: 780px; font-size: .92rem; }

/* --- Resume card --- */
.ace-dash-resume{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(204,120,92,.12), rgba(204,120,92,.04));
  border: 1px solid rgba(204,120,92,.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ace-dash-resume-label{
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.ace-dash-resume-title{ color: var(--color-heading); font-size: .88rem; font-weight: 600; }

/* --- Overall stats --- */
.ace-dash-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.ace-dash-stat{
  background: var(--color-bg-alt);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  transition: border-color .15s ease;
}
.ace-dash-stat:hover{ border-color: rgba(255,255,255,.2); }
.ace-dash-stat-value{
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-heading);
}
.ace-dash-stat-label{
  font-size: .65rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

.ace-dash-section-title{
  color: var(--color-heading);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 20px 0 10px;
}
.ace-dash-section-title:first-child{ margin-top: 0; }

.ace-dash-empty{
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}
.ace-dash-empty p{ color: var(--color-text-muted); margin-top: 0; font-size: .85rem; }

/* --- Course cards: bordered with a hover highlight, matching the
   same visual language established on the lesson/course pages. --- */
.ace-dash-course-list{ display: flex; flex-direction: column; gap: 8px; }
.ace-dash-course-row{
  display: block;
  background: var(--color-bg-alt);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ace-dash-course-row:hover{
  border-color: var(--color-primary);
  background: rgba(255,255,255,.03);
}
.ace-dash-course-row-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.ace-dash-course-row-top h3{
  color: var(--color-heading);
  font-size: .85rem;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ace-dash-course-link{
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: .75rem;
  font-weight: 700;
}
.ace-dash-course-row:hover .ace-dash-course-link{ color: var(--color-primary-dark); }
/* Same green "Completed" pill style used on the lesson page's
   topic titles. */
.ace-dash-course-badge{
  flex-shrink: 0;
  background: rgba(111,168,125,.15);
  color: #6fa87d;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: 999px;
}

.ace-dash-course-row-bar{ display: flex; align-items: center; gap: 10px; }
.ace-dash-progress-track{
  flex: 1;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.ace-dash-progress-fill{
  background: var(--color-primary);
  height: 100%;
  border-radius: 999px;
}
.ace-dash-course-row-meta{
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 640px){
  .ace-dash-profile{ flex-wrap: wrap; }
  .ace-dash-resume{ flex-direction: column; align-items: flex-start; }
}

/* =========================================
   STATISTICS PAGE — attempts table
   ========================================= */
.ace-stats-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.ace-stats-table th{
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ace-stats-table td{
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--color-text);
}
.ace-stats-pass{ color: #6fa87d; font-weight: 700; }
.ace-stats-fail{ color: #e0654a; font-weight: 700; }

/* =========================================
   HISTORY PAGE — edit profile + activity log
   ========================================= */
.ace-history-notice{
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .85rem;
  margin-bottom: 18px;
}
.ace-history-notice.is-success{
  background: rgba(111,168,125,.12);
  border: 1px solid rgba(111,168,125,.35);
  color: #c9e4d1;
}
.ace-history-notice.is-error{
  background: rgba(224,101,74,.12);
  border: 1px solid rgba(224,101,74,.35);
  color: #f3d9d1;
}

.ace-history-profile-form{
  background: var(--color-bg-alt);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ace-history-form-row{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ace-history-form-row label,
.ace-history-form-full{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 180px;
}
.ace-history-form-row input,
.ace-history-form-full input{
  font-family: inherit;
  font-size: .88rem;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--color-bg);
  color: var(--color-heading);
}
.ace-history-form-row input:focus,
.ace-history-form-full input:focus{ outline: none; border-color: var(--color-primary); }

.ace-history-form-divider{
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-heading);
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ace-history-form-divider span{
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: none;
}

.ace-history-profile-form .btn{ align-self: flex-start; }

/* --- Activity list --- */
.ace-history-list{ display: flex; flex-direction: column; gap: 8px; }
.ace-history-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 12px 16px;
}
.ace-history-icon{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(204,120,92,.12);
  color: var(--color-primary);
}
.ace-history-icon svg{ width: 15px; height: 15px; }
.ace-history-profile .ace-history-icon{
  background: rgba(255,255,255,.06);
  color: var(--color-text-muted);
}
.ace-history-item-desc{
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 500;
}
.ace-history-item-date{
  color: var(--color-text-muted);
  font-size: .72rem;
  margin-top: 2px;
}

/* =========================================
   TOPBAR AVATAR — now a button that opens
   the Edit Profile modal
   ========================================= */
.ace-topbar-avatar-btn{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: box-shadow .15s ease;
}
.ace-topbar-avatar-btn:hover{ box-shadow: 0 0 0 2px var(--color-primary); }
.ace-topbar-avatar-btn img{ display: block; }

/* =========================================
   EDIT PROFILE MODAL
   ========================================= */
.ace-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.ace-modal-backdrop.is-open{ opacity: 1; pointer-events: auto; }

.ace-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: 92%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-secondary);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: rgba(255,255,255,.15) transparent; /* Firefox */
}
.ace-modal::-webkit-scrollbar{ width: 8px; }
.ace-modal::-webkit-scrollbar-track{ background: transparent; }
.ace-modal::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 999px;
}
.ace-modal::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
.ace-modal.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.ace-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ace-modal-header h2{
  color: var(--color-heading);
  font-size: 1.1rem;
  margin: 0;
}
.ace-modal-close{
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
}
.ace-modal-close:hover{ color: var(--color-text); }
.ace-modal-close svg{ width: 20px; height: 20px; }

.ace-modal-body{ padding: 24px; }
.ace-modal-body .ace-history-profile-form{ margin-bottom: 0; padding: 0; background: none; }

/* --- Avatar upload --- */
.ace-avatar-upload{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ace-avatar-upload-preview{
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  cursor: pointer;
  display: block;
}
.ace-avatar-upload-preview img{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.ace-avatar-upload-overlay{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s ease;
}
.ace-avatar-upload-preview:hover .ace-avatar-upload-overlay{ opacity: 1; }
.ace-avatar-upload-hint{
  font-size: .68rem;
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 480px){
  .ace-history-form-row{ flex-direction: column; }
}

/* =========================================
   LEARNDASH CONTENT OVERRIDES
   Rewritten against the actual HTML LearnDash
   generates for a lesson page (confirmed via
   inspect-element), replacing several rounds
   of guessed class names with the real ones —
   .ld-breadcrumbs, .ld-progress-heading,
   .ld-table-list-header, .ld-table-list-item-
   preview (the actual icon+title link — this
   was the real cause of the earlier overlap
   bug, since padding had been applied to its
   PARENT .ld-table-list-item instead).
   ========================================= */

/* Broad safety net: any LearnDash element's border still catches our
   subtle theme color even if it's not specifically targeted above. */
.ace-player-content [class*="ld-"]{
  border-color: rgba(255,255,255,.08) !important;
}

/* --- Breadcrumb bar: "Course > Lesson" + status pill --- */
.ace-player-content .ld-breadcrumbs{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-bg-alt) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: .78rem !important;
}
.ace-player-content .ld-breadcrumbs-segments{
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
}
.ace-player-content .ld-breadcrumbs-segments li{ display: inline; }
.ace-player-content .ld-breadcrumbs-segments a{
  color: var(--color-text-muted) !important;
  text-decoration: none;
}
.ace-player-content .ld-breadcrumbs-segments a:hover{ color: var(--color-primary) !important; }

.ace-player-content .ld-status{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
.ace-player-content .ld-status-complete{
  background: #6fa87d !important;
  color: #16241a !important;
}

/* --- Progress section --- */
.ace-player-content .ld-progress{
  background: var(--color-bg-alt) !important;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 16px !important;
  margin: 0 !important;
}
.ace-player-content .ld-progress-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ace-player-content .ld-progress-label,
.ace-player-content .ld-progress-percentage,
.ace-player-content .ld-progress-steps{
  color: var(--color-text-muted) !important;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ace-player-content .ld-progress-stats{
  display: flex;
  gap: 10px;
}
.ace-player-content .ld-progress-bar{
  background: rgba(255,255,255,.1) !important;
  border-radius: 999px;
  height: 6px !important;
  overflow: hidden;
}
.ace-player-content .ld-progress-bar-percentage{
  background: var(--color-primary) !important;
  height: 100% !important;
}

/* --- The lesson's own written content, before LearnDash appends
   Mark Complete / the Lesson Content list to the same output — this
   had no typography treatment at all before, which is why it read
   as flat, unstyled text rather than part of a designed page. ---- */
.ace-topic-main > p{
  max-width: 68ch; /* comfortable reading line-length, independent of the full column width */
  margin: 0 0 18px;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--color-text);
}
.ace-topic-main > h2,
.ace-topic-main > h3,
.ace-topic-main > h4{
  margin: 28px 0 12px;
  color: var(--color-heading);
  font-weight: 700;
}
.ace-topic-main > ul,
.ace-topic-main > ol{
  max-width: 68ch;
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--color-text);
  font-size: .92rem;
  line-height: 1.7;
}
.ace-topic-main > ul li,
.ace-topic-main > ol li{ margin-bottom: 6px; }
.ace-topic-main > img,
.ace-topic-main > p > img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 8px 0 20px;
}
.ace-topic-main > p:first-child{ margin-top: 4px; }

/* Breathing room between the breadcrumb/progress card, the lesson's
   own prose, and the Lesson Content block below it — these used to
   sit right on top of each other with no rhythm between sections. */
.ace-player-content .ld-progress{
  margin-bottom: 26px !important;
}

/* --- Topic list header ("Lesson Content" bar) ---
   Redesigned away from a solid terracotta fill — that read as a
   generic default-plugin block, and doesn't match how every other
   card header on the site works (Feed's post cards, the lecture
   downloads section): a dark surface with a slim accent border and
   muted meta text, not a solid color block with white text on it. */
.ace-player-content .ld-table-list-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-alt) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: 10px !important;
  padding: 13px 18px !important;
  margin: 26px 0 0 !important;
}
.ace-player-content .ld-table-list-header .ld-text{
  color: var(--color-heading) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ace-player-content .ld-table-list-header .ld-icon{
  color: var(--color-primary) !important;
}
.ace-player-content .ld-lesson-list-progress,
.ace-player-content .ld-lesson-list-steps{
  color: var(--color-text-muted) !important;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600 !important;
}
.ace-player-content .ld-table-list-title{
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: .78rem;
}
.ace-player-content .ld-table-list-lesson-details{
  display: flex;
  gap: 10px;
  font-size: .72rem;
}

/* --- Topic rows, redesigned as individual cards matching the
   Practice page's course-card style, rather than a continuous
   bordered/striped list. Completed lessons get a highlighted border
   and tinted background, the same treatment the "selected" course
   card gets on the Practice page. --- */

/* Covering every plausible wrapping element this time — a thin line
   was still visible after the last fix, meaning yet another wrapper
   somewhere in the chain still has its own native border-width. */
.ace-player-content .learndash-wrapper,
.ace-player-content .ld-tabs,
.ace-player-content .ld-tabs-content,
.ace-player-content .ld-tab-content,
.ace-player-content .ld-lesson-topic-list,
.ace-player-content .ld-table-list,
.ace-player-content .ld-table-list-items{
  border: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.ace-player-content .ld-table-list{
  background: transparent !important;
  margin-top: 10px !important;
}
.ace-player-content .ld-table-list-items{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 10px !important; /* space between the header bar and the first card */
}
.ace-player-content .ld-table-list-item{
  display: block !important;
  border: none !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
/* The footer row (below the last quiz/lesson item, above the divider
   and Previous/Next buttons) — LearnDash paints a light background
   directly on this wrapper, unrelated to any of the item/list/header
   wrappers already covered above. */
.ace-player-content .ld-table-list-footer{
  background: transparent !important;
  padding: 0 !important;
}

/* This <a> is the actual row link wrapping both the icon and the
   title — the real element the previous overlap bug should have
   targeted. Setting display:flex here defines a clean, predictable
   layout for its children regardless of whatever positioning
   LearnDash's own CSS used, which is what makes padding safe to set
   here (unlike on the parent .ld-table-list-item, where padding
   changes broke the internal layout since the actual content wasn't
   even inside that element). The card look (border, radius,
   background) lives here too, since this element already has the
   correct padding/sizing/flex setup. */
.ace-player-content .ld-table-list-item-preview{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 12px;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--color-bg-alt) !important;
  text-decoration: none;
  transition: background .15s ease;
}
.ace-player-content .ld-table-list-item-preview:hover{
  background: rgba(255,255,255,.06) !important;
}
/* Completed — highlighted card, same visual language as a selected
   card on the Practice page. */
.ace-player-content .ld-table-list-item-preview.learndash-complete{
  background: rgba(204,120,92,.14) !important;
}

.ace-player-content .ld-topic-title{
  color: var(--color-text) !important;
  font-weight: 600;
  font-size: .85rem;
}
.ace-player-content .ld-table-list-item-preview:hover .ld-topic-title{
  color: var(--color-primary) !important;
}
.ace-player-content .ld-table-list-item-preview.learndash-complete .ld-topic-title{
  color: var(--color-heading) !important;
}
/* "Completed" badge after the title — same small-pill style as the
   course pills in the top bar, recolored green for the completed
   state specifically. */
.ace-player-content .ld-table-list-item-preview.learndash-complete .ld-topic-title::after{
  content: "Completed";
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  background: rgba(111,168,125,.15);
  color: #6fa87d;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Status icon — bulletproofed against whatever is making it render
   as an oval instead of the intended circle: pinning min/max width
   and height (in case LearnDash sets a conflicting min-width),
   clearing any background-image (in case the "icon" is actually an
   image/SVG rather than a plain colored shape), and zeroing font-size
   (in case it's rendered via an icon font glyph rather than a shape
   at all — each of those would explain the oval look on its own). */
.ace-player-content .ld-status-icon{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  background-image: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0;
  align-self: center !important;
  margin: 0 !important;
}
.ace-player-content .ld-status-icon.ld-status-complete{
  background: var(--color-primary) !important;
}
.ace-player-content .ld-status-icon.ld-status-complete::after{
  content: '\2713';
  font-size: 9px !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 700;
}

/* --- Bottom navigation: Previous Lesson / Mark Incomplete / Next
   Topic. "Back to Lesson" is relocated to a circular icon-only
   button at the top-left of the content area (matching the Login
   page's back button style) instead of sitting as a text link in
   this row — real HTML confirmed it's a plain text link with no
   icon of its own, so the arrow here is drawn with CSS. --- */
/* Simplified: no longer using position:absolute for placement —
   something was preventing that from applying (the button rendered
   in its original spot regardless), so app-shell.js now physically
   moves this element to the top of the content area in the DOM
   instead. This just styles it once it's there. */
.ace-player-content .ld-content-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ace-player-content .ld-content-action{
  display: flex;
  align-items: center;
}
/* The middle action historically held both the Mark Incomplete form
   AND the Back to Lesson link stacked — now that the link is moved
   out to the top-left button, this only needs to center the form. */
.ace-player-content .ld-content-action form{
  margin: 0 !important;
}
/* Hides "Back to Lesson" specifically in its original bottom spot —
   scoped to .ld-content-actions only, so if the JS relocation to the
   top-left button ever fails to run for some reason, this still
   guarantees it won't sit here overlapping the Mark Incomplete
   button either way. */
.ace-player-content .ld-content-actions .ld-course-step-back{
  display: none !important;
}

.ace-player-content .ld-course-step-back{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--color-text-muted) !important;
  text-decoration: none;
  font-size: 0; /* hides the "Back to Lesson" text visually — link and its label stay in the markup for accessibility */
  margin-bottom: 14px;
}
.ace-player-content .ld-course-step-back::before{
  content: '';
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 3px;
}
.ace-player-content .ld-course-step-back:hover{
  background: rgba(255,255,255,.1);
  color: var(--color-primary) !important;
}

/* Removes whatever decorative checkmark LearnDash was adding beside
   the Mark Incomplete button — not present in the actual HTML as an
   element, so it's almost certainly a pseudo-element on the form or
   button itself. */
.ace-player-content .sfwd-mark-incomplete::before,
.ace-player-content .sfwd-mark-incomplete::after,
.ace-player-content .learndash_mark_incomplete_button::before,
.ace-player-content .learndash_mark_incomplete_button::after{
  display: none !important;
  content: none !important;
}

/* --- Mark Complete / Next Topic button — small, not the default
   large block button --- */
.ace-player-content .ld-button,
.ace-player-content .learndash_mark_complete_button,
.ace-player-content input[name="mark_complete"]{
  background: var(--color-primary) !important;
  background-image: none !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.ace-player-content .ld-button:hover{ background: var(--color-primary-dark) !important; }

/* The Mark Complete/Incomplete button is now a brand-new element we
   build via JS (app-shell.js), not LearnDash's native input — no
   pseudo-element or background-image battles needed anymore, since
   there's nothing built-in on it to fight. */
.ace-player-content .ace-mark-complete-btn{
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  font-family: inherit;
  cursor: pointer;
}
.ace-player-content .ace-mark-complete-btn:hover{ background: var(--color-primary-dark) !important; }

/* Positioning it correctly still overlapped, so reverting to simply
   hiding it via the actual selector confirmed via dev tools. */
.ace-player-content .sfwd-mark-complete,
.ace-player-content .sfwd-mark-incomplete{
  position: relative !important;
}
.ace-player-content .sfwd-mark-complete::after,
.ace-player-content .sfwd-mark-incomplete::after{
  display: none !important;
  content: none !important;
}

/* --- Generic safety net: LearnDash's own configurable "primary"/
   "secondary" utility color classes, in case any other element uses
   them beyond what's covered above. --- */
.ace-player-content .ld-primary-background{ background: var(--color-primary) !important; }
.ace-player-content .ld-primary-color{ color: var(--color-primary) !important; }
.ace-player-content .ld-secondary-background{ background: rgba(255,255,255,.1) !important; }
.ace-player-content .ld-secondary-color{ color: var(--color-text-muted) !important; }
/* The individual "Expand" button's arrow icon carries
   .ld-primary-background directly on itself (unlike "Expand All",
   where that class only sits on the button) — the safety net above
   was filling it in as a solid dot instead of leaving the arrow
   shape visible. Icons are excluded from that rule here. */
.ace-player-content .ld-icon.ld-primary-background{
  background: none !important;
  color: var(--color-primary) !important;
}

/* =========================================
   COURSE PAGE — "Course Content" accordion
   The course overview page uses a DIFFERENT
   set of classes for its top-level listing
   (.ld-item-list-item) than the lesson page's
   topic list (.ld-table-list-item) — confirmed
   via the actual page source. The nested topic
   lists INSIDE each expanded section reuse the
   exact same .ld-table-list markup already
   styled above, so only this outer accordion
   layer needs new rules.
   ========================================= */

/* Course-page progress bar has an extra
   .ld-progress-inline class the lesson page's
   doesn't — using that as the hook to give it
   a fully self-contained box (no breadcrumb or
   table-list sits directly next to it here,
   unlike on a lesson page). */
.ace-player-content .ld-progress.ld-progress-inline{
  background: var(--color-bg-alt) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
  overflow: hidden;
}
/* Bulletproofing: the wrapper wasn't specifically targeted before,
   so if IT (rather than .ld-progress itself) was the actual source
   of the white background, this catches it too. */
.ace-player-content .ld-course-status{
  background: transparent !important;
}

/* "Course Content" heading + Expand All button */
.ace-player-content .ld-section-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 14px;
}
.ace-player-content .ld-section-heading h2{
  color: var(--color-heading) !important;
  font-size: 1.15rem;
  margin: 0;
}
.ace-player-content .ld-item-list-actions .ld-expand-button{
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.ace-player-content .ld-item-list-actions .ld-expand-button:hover{ background: var(--color-primary-dark) !important; }

/* Section rows (MATHEMATICS, BASIC STRUCTURAL ENGINEERING, etc.) —
   same flat-card visual language as the lesson page's topic cards. */
.ace-player-content .ld-item-list-items{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ace-player-content .ld-item-list-item{
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
}
.ace-player-content .ld-item-list-item-preview{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--color-bg-alt) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}
.ace-player-content .ld-tooltip{
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
/* Reverted the previous attempt — .ld-tooltip.ld-tooltip--hidden{
   display:none } turned out to hide the ACTUAL content (icon+title
   live inside this wrapper), not just a decorative arrow, which is
   why some rows went blank. The arrow is almost certainly a CSS
   pseudo-element on this same wrapper, so killing just that instead
   leaves the real content untouched. */
.ace-player-content .ld-tooltip::before,
.ace-player-content .ld-tooltip::after{
  display: none !important;
  content: none !important;
}
.ace-player-content .ld-item-name{
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.ace-player-content .ld-item-title{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--color-text) !important;
  font-weight: 700;
  font-size: .88rem;
}
/* Topic count as an inline badge beside the title instead of a
   second line underneath — same small-pill style as the "Completed"
   badge on the lesson page, just neutral-toned since this is just a
   count, not a completion state. */
.ace-player-content .ld-item-components{
  display: inline-flex !important;
  margin: 0 !important;
}
.ace-player-content .ld-item-component{
  display: inline-block !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--color-text-muted) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  margin: 0 !important;
}
.ace-player-content .ld-item-name:hover .ld-item-title{ color: var(--color-primary) !important; }

/* Individual "Expand" button per section — a quieter outline style,
   since the primary-colored one is reserved for "Expand All". */
.ace-player-content .ld-item-details .ld-expand-button{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--color-text-muted) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
.ace-player-content .ld-item-details .ld-expand-button:hover{
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
/* Replacing the icon shape outright rather than continuing to guess
   at whatever background/mask mechanism LearnDash is using — this
   redraws it as a simple rotated-border chevron, independent of
   LearnDash's own rendering entirely, so it can't be affected by
   whatever was causing the solid circle. */
.ace-player-content .ld-item-details .ld-icon-arrow-down{
  background: none !important;
  background-image: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  min-height: 7px !important;
  max-width: 7px !important;
  max-height: 7px !important;
  border: none !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  border-radius: 0 !important;
  transform: rotate(45deg) translateY(-1px);
}

/* The revealed container holding each section's nested topic list —
   slightly indented so it reads as a child of the section above it. */
.ace-player-content .ld-item-list-item-expanded{
  background: transparent !important;
  padding: 8px 0 4px 16px !important;
}

/* =========================================
   "GREAT JOB!" COMPLETION BANNER — confirmed
   via real HTML: .ld-alert.ld-alert-success.
   Restructured to stack content above the
   button instead of keeping them side-by-side
   with wrapping, which was overlapping instead
   of wrapping cleanly. Icon is reset the same
   defensive way the arrow icons were fixed
   earlier (position/size pinned from scratch),
   since LearnDash's icons have repeatedly
   turned out to use some non-standard
   positioning that fights simple overrides.
   ========================================= */
.ace-player-content .ld-alert.ld-alert-success{
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(111,168,125,.12) !important;
  border: 1px solid rgba(111,168,125,.35) !important;
  border-radius: 12px;
  padding: 16px 20px !important;
  margin-bottom: 20px;
  position: relative;
}
.ace-player-content .ld-alert-content{
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Simplified entirely — the separate icon circle kept fighting
   alignment against the text no matter what technique was tried, so
   it's removed outright. The checkmark now lives directly inside the
   text itself instead, as part of one single line — there's no
   longer a second box that needs to align against anything. */
.ace-player-content .ld-alert-icon{
  display: none !important;
}
.ace-player-content .ld-alert-messages{
  color: var(--color-heading) !important;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.4;
  margin: 0 !important;
  padding: 0 !important;
}
.ace-player-content .ld-alert-messages::before{
  content: '\2713  ';
  color: #6fa87d !important;
  font-weight: 700;
  font-size: 1.3em;
  vertical-align: middle;
}
/* The banner's own "Next Topic" link is redundant with the one in
   the bottom action row, and was the source of the overlap/stray-
   arrow issues — removed rather than kept fighting its layout. */
.ace-player-content .ld-alert > .ld-button{
  display: none !important;
}

/* Every .ld-button (Previous Lesson, Next Topic — both the one in
   this banner and the one in the bottom action row) stays on one
   line regardless of available width. */
.ace-player-content .ld-button{
  white-space: nowrap !important;
}

/* Higher-specificity fix for the "Complete" badge — it actually
   carries THREE classes at once (.ld-status .ld-status-complete
   .ld-secondary-background), and the generic secondary-background
   safety net was winning the color fight by cascade order despite
   being less semantically specific. This 3-class selector beats it
   on actual specificity, not just file position, so order no longer
   matters. */
.ace-player-content .ld-status.ld-status-complete{
  background: #6fa87d !important;
  color: #16241a !important;
}

/* =========================================
   DASHBOARD — Study Streak, Achievements,
   Leaderboard
   ========================================= */

/* --- Study streak banner --- */
.ace-dash-streak{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(204,120,92,.1);
  border: 1px solid rgba(204,120,92,.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ace-dash-streak-icon{ font-size: 1.3rem; line-height: 1; }
.ace-dash-streak-text{
  color: var(--color-text);
  font-size: .85rem;
}
.ace-dash-streak-text strong{ color: var(--color-heading); }

/* --- Achievement badges --- */
.ace-dash-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.ace-dash-badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-alt);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 88px;
  text-align: center;
}
.ace-dash-badge-icon{ font-size: 1.5rem; line-height: 1; }
.ace-dash-badge-label{
  color: var(--color-text-muted);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --- Leaderboard --- */
.ace-dash-leaderboard{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.ace-dash-leaderboard-row{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg-alt);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 16px;
}
.ace-dash-leaderboard-row.is-you{
  border-color: var(--color-primary);
  background: rgba(204,120,92,.08);
}
.ace-dash-leaderboard-rank{
  color: var(--color-text-muted);
  font-weight: 800;
  font-size: .82rem;
  width: 30px;
  flex-shrink: 0;
}
.ace-dash-leaderboard-name{
  flex: 1;
  color: var(--color-text);
  font-weight: 600;
  font-size: .85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ace-dash-leaderboard-row.is-you .ace-dash-leaderboard-name{ color: var(--color-heading); }
.ace-dash-leaderboard-count{
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: .74rem;
}
.ace-dash-empty-hint{
  font-size: .74rem !important;
  color: var(--color-text-muted);
  margin-top: 8px !important;
}

/* --- Leaderboard opt-in checkbox in Edit Profile --- */
.ace-history-checkbox-row{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--color-text);
  cursor: pointer;
}
.ace-history-checkbox-row input{ width: 15px; height: 15px; accent-color: var(--color-primary); }

/* --- Instructor Announcements --- */
.ace-dash-announcements{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto 16px;
  /* Announcements moved here from the Dashboard, and this is now the
     only place this class renders — matches .ace-feed's own width so
     it doesn't stretch wider than the feed column sitting below it. */
  max-width: 640px;
}
.ace-dash-announcement{
  background: var(--color-bg-alt);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--color-primary);
  border-radius: 10px;
  padding: 12px 16px;
}
.ace-dash-announcement.is-urgent{
  border-left-color: #e0654a;
  background: rgba(224,101,74,.08);
}
.ace-dash-announcement-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ace-dash-announcement-urgent-tag{
  background: #e0654a;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ace-dash-announcement-title{
  color: var(--color-heading);
  font-weight: 700;
  font-size: .85rem;
  flex: 1;
}
.ace-dash-announcement-date{
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: .7rem;
}
.ace-dash-announcement-body{
  color: var(--color-text);
  font-size: .8rem;
  line-height: 1.5;
}
.ace-dash-announcement-body p{ margin: 0 0 6px; }
.ace-dash-announcement-body p:last-child{ margin-bottom: 0; }

/* --- Score Trend chart --- */
.ace-score-trend{
  background: var(--color-bg-alt);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ace-score-trend-grid{
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}
.ace-score-trend-axis-label{
  fill: var(--color-text-muted);
  font-size: 8px;
}
.ace-score-trend-line{
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ace-score-trend-dot{
  fill: var(--color-primary);
  stroke: var(--color-bg-alt);
  stroke-width: 1.5;
}

/* =========================================
   LEARNDASH QUIZ ENGINE (WpProQuiz)
   Rewritten with the EXACT competing selectors
   confirmed via dev tools screenshots. The real
   issue: LearnDash's own CSS applies background/
   border to the .wpProQuiz_response WRAPPER
   itself and to the LABEL element specifically —
   not to the outer containers this was
   originally targeting, which is why earlier
   attempts had no visible effect. Their rules
   don't use !important, so adding it here wins
   regardless of their higher specificity.
   Cards are now flat/borderless, matching the
   Practice page's look exactly (color alone
   marks state, no border lines).
   ========================================= */

/* --- Instructions text above the quiz --- */
.ace-player-content .ld-tab-content{
  color: var(--color-text);
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.ace-player-content .ld-tab-content strong{ color: var(--color-heading); }

/* --- Question box — fieldset's native browser border removed --- */
.ace-player-content .wpProQuiz_content .wpProQuiz_question{
  border: none !important;
  padding: 0 !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_question_text{
  display: block;
  background: var(--color-bg-alt) !important;
  border: none !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: 12px;
  padding: 18px 20px 18px 22px !important;
  color: var(--color-heading) !important;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 16px !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_question_text p{ margin: 0 0 8px; }
.ace-player-content .wpProQuiz_content .wpProQuiz_question_text p:last-child{ margin-bottom: 0; }
.ace-player-content .wpProQuiz_content .wpProQuiz_question_text img{ max-width: 100%; height: auto; border-radius: 6px; }

/* --- Answer options: flat cards, no border, matching Practice page --- */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionList{
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem{
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* The LABEL is where LearnDash actually paints background/border —
   confirmed via dev tools — so the flat card look lives here now,
   not on the outer .wpProQuiz_questionListItem wrapper. */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem label{
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 16px !important;
  margin: 0 !important;
  background: var(--color-bg-alt) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 9px !important;
  color: var(--color-text) !important;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem label:hover{
  border-color: var(--color-primary) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Lettered answer badges (A/B/C/D), matching the Practice page.
   The badge is generated with a CSS counter on the label, and the
   native radio is visually hidden but kept in the DOM and focusable
   so LearnDash's own checked-state logic still works. */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionList{ counter-reset: ace-answer; }
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem label::before{
  counter-increment: ace-answer;
  content: counter(ace-answer, upper-alpha);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .7rem;
}

/* Visually hide the native radio without removing it from the a11y tree */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionInput{
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* Selected state — LearnDash adds .is-selected to the label, and
   :has() covers keyboard/programmatic selection too. */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem label.is-selected,
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem label:has(.wpProQuiz_questionInput:checked){
  border-color: var(--color-primary) !important;
  background: rgba(204,120,92,.12) !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem label.is-selected::before,
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem label:has(.wpProQuiz_questionInput:checked)::before{
  background: var(--color-primary);
  color: #2b120c;
}

/* Correct/Incorrect/Missed tags per option */
.ace-player-content .wpProQuiz_content .ld-quiz-question-item__status--correct,
.ace-player-content .wpProQuiz_content .ld-quiz-question-item__status--incorrect,
.ace-player-content .wpProQuiz_content .ld-quiz-question-item__status--missed{
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  flex-shrink: 0;
}
.ace-player-content .wpProQuiz_content .ld-quiz-question-item__status--correct,
.ace-player-content .wpProQuiz_content .ld-quiz-question-item__status--missed{
  background: rgba(111,168,125,.15) !important;
  color: #6fa87d !important;
}
.ace-player-content .wpProQuiz_content .ld-quiz-question-item__status--incorrect{
  background: rgba(224,101,74,.15) !important;
  color: #e0654a !important;
}

/* Whole-card highlight once an answer's been checked — applied to
   the LABEL now, confirmed as the actual element LearnDash targets. */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect label,
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrectIncomplete label{
  background: rgba(111,168,125,.12) !important;
  border-color: #6fa87d !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect label{
  background: rgba(224,101,74,.12) !important;
  border-color: #e0654a !important;
}
/* Letter badge follows the result colour, same as Practice page */
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrect label::before,
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerCorrectIncomplete label::before{
  background: #6fa87d;
  color: #16241a;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect label::before{
  background: #e0654a;
  color: #2b120c;
}

/* --- Back / Check / Next buttons --- */
.ace-player-content .wpProQuiz_content .wpProQuiz_button{
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_button:hover{ background: var(--color-primary-dark) !important; }

/* --- Correct/Incorrect response banner: the WRAPPER itself needed
   direct overrides, not just its children — confirmed via dev tools
   that .wpProQuiz_response carries LearnDash's own light background/
   border directly. --- */
.ace-player-content .wpProQuiz_content .wpProQuiz_response{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 12px !important;
  clear: both;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_correct,
.ace-player-content .wpProQuiz_content .wpProQuiz_incorrect{
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_correct{
  background: rgba(111,168,125,.12) !important;
  border: 1px solid rgba(111,168,125,.35) !important;
  color: #6fa87d !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_incorrect{
  background: rgba(224,101,74,.12) !important;
  border: 1px solid rgba(224,101,74,.35) !important;
  color: #e0654a !important;
}

/* --- Summary / results / info screens shown at the end --- */
.ace-player-content .wpProQuiz_content .wpProQuiz_results,
.ace-player-content .wpProQuiz_content .wpProQuiz_checkPage,
.ace-player-content .wpProQuiz_content .wpProQuiz_sending,
.ace-player-content .wpProQuiz_content .wpProQuiz_infopage,
.ace-player-content .wpProQuiz_content .wpProQuiz_text{
  background: var(--color-bg-alt) !important;
  border: none !important;
  border-radius: 12px;
  padding: 20px;
  color: var(--color-text) !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_header{ color: var(--color-heading) !important; }

/* --- Time Limit bar (shown on timed/all-questions quizzes) ---
   Confirmed via dev tools: LearnDash paints #e2e2ed directly on
   .wpProQuiz_time_limit itself. */
.ace-player-content .wpProQuiz_content .wpProQuiz_time_limit{
  background-color: var(--color-bg-alt) !important;
  border-radius: 10px !important;
  color: var(--color-text) !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_time_limit::before{
  background: var(--color-bg-alt) !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_time_limit .time,
.ace-player-content .wpProQuiz_content .wpProQuiz_time_limit .time span{
  color: var(--color-text) !important;
}
.ace-player-content .wpProQuiz_content .wpProQuiz_time_limit,
.ace-player-content .wpProQuiz_content .wpProQuiz_time_limit *{
  color: var(--color-text) !important;
}

/* --- Quiz Review navigator (all-questions-on-one-page mode) ---
   Confirmed via dev tools: LearnDash paints white bg / gray border /
   dark text directly on the .learndash-quiz-review__button elements
   inside .wpProQuiz_reviewQuestion, not on an outer wrapper — same
   "style lives on the innermost real element" pattern as the single-
   question quiz labels above. */
.ace-player-content .wpProQuiz_content .wpProQuiz_reviewQuestion,
.ace-player-content .wpProQuiz_content .wpProQuiz_reviewSummary,
.ace-player-content .wpProQuiz_content .wpProQuiz_reviewDiv{
  background: transparent !important;
  border: none !important;
}
.ace-player-content .wpProQuiz_content .learndash-quiz-review_list{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ace-player-content .wpProQuiz_content .learndash-quiz-review_item{
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ace-player-content .wpProQuiz_content .learndash-quiz-review__button{
  background-color: var(--color-bg-alt) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  min-width: 37px;
  padding: 6px 8px !important;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ace-player-content .wpProQuiz_content .learndash-quiz-review__button:hover{
  background-color: rgba(255,255,255,.06) !important;
  border-color: var(--color-primary) !important;
}

/* Read-only profile fields (codename, email) — visibly locked so
   students don't try to type in them and wonder why nothing happens. */
.ace-field-locked{
  opacity: .6;
  cursor: not-allowed;
  background: rgba(0,0,0,.25) !important;
}
.ace-field-locked-hint{
  font-weight: 400;
  font-size: .72rem;
  color: var(--color-text-muted);
}

/* =========================================================
   Free-tier lock card
   ========================================================= */

.ace-free-lock{
  text-align: center;
  max-width: 420px;
  margin: 60px auto;
  padding: 32px 24px;
}
.ace-free-lock-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(204,120,92,.12);
  border: 1px solid rgba(204,120,92,.3);
  color: var(--color-primary);
  margin-bottom: 18px;
}
.ace-free-lock-icon svg{ width: 26px; height: 26px; }
.ace-free-lock h2{
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--color-heading);
}
.ace-free-lock p{
  margin: 0 0 22px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.ace-free-lock-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.4;
  text-decoration: none;
  transition: filter .15s ease;
}
.ace-free-lock-btn:visited{ color: #fff !important; }
.ace-free-lock-btn:hover{ filter: brightness(1.08); }

/* Upgrade link — visible only to free-tier students, in the topbar */
.ace-topbar-student-code{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(204,120,92,.14);
  border: 1px solid rgba(204,120,92,.4);
  color: var(--color-primary);
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.ace-topbar-student-code:hover{ background: rgba(204,120,92,.24); }

/* Root cause of the broken-looking wrap: a flex item's default
   min-width is "auto", not 0 — without this, text that's longer than
   the available space can't actually shrink to wrap cleanly, and
   competes with the lock icon for room instead of yielding to it. */
.ace-sidebar-item-label{
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Lock icon — shown next to topics/quizzes a free-tier viewer can't
   open, so it's visible before they click rather than only after. */
.ace-lock-icon{
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: .7;
}
.ace-topic-link.is-locked,
.ace-quiz-link.is-locked{
  opacity: .6;
}
.ace-topic-link.is-locked:hover,
.ace-quiz-link.is-locked:hover{
  opacity: .85;
}

/* Free-preview — the opposite signal from locked: a visible highlight
   rather than a dimmed row, so the two states read as clearly
   different at a glance rather than "locked" vs "everything else". */
.ace-free-tag{
  margin-left: auto;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(111,168,125,.16);
  color: #6fa87d;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ace-topic-link.is-free-preview,
.ace-quiz-link.is-free-preview{
  background: rgba(111,168,125,.07);
}
.ace-topic-link.is-free-preview:hover,
.ace-quiz-link.is-free-preview:hover{
  background: rgba(111,168,125,.12);
}

/* Locked rows in LearnDash's own native step list (see course-player.js
   for how .is-locked/.is-free-preview get added here — this list's
   HTML isn't ours to inject a class into server-side, so it's added
   client-side by matching each row's URL path against the server-
   computed lists). Same visual language as the sidebar's treatment. */
.ace-player-content .ld-table-list-item-preview.is-locked{
  opacity: .6;
}
.ace-player-content .ld-table-list-item-preview.is-locked:hover{
  opacity: .85;
}
.ace-player-content .ld-table-list-item-preview.is-free-preview{
  background: rgba(111,168,125,.1) !important;
}
.ace-player-content .ld-table-list-item-preview.is-free-preview:hover{
  background: rgba(111,168,125,.16) !important;
}