/* =====================================================================
   Online Tijara — Tutor LMS learning ecosystem (dashboard / registration
   / lessons) restyled into the premium Arabic "e-commerce operating
   system" look, over the cosmos backdrop. Defensive: mostly recolors via
   Tutor's own CSS variables + glass surfaces; never changes Tutor markup
   or logic, so updates stay safe. Loads only on the learning area.
   ===================================================================== */

/* 1) Recolor Tutor's whole UI from blue → molten orange/gold via its own
      design tokens. One block recolors links, active states, buttons,
      progress bars, icons, focus rings… across the dashboard. */
.ot-futuristic {
  --tutor-color-primary: #ff6b1a;
  --tutor-color-primary-hover: #ff8a3d;
  --tutor-color-primary-rgb: 255, 107, 26;
  --tutor-body-bg: transparent;
  --tutor-border-color: rgba(255, 255, 255, .08);
}

/* 2) Let the cosmos show through Tutor's containers. */
.ot-futuristic .tutor-wrap,
.ot-futuristic .tutor-dashboard,
.ot-futuristic .tutor-dashboard-content,
.ot-futuristic .tutor-dashboard-content-inner,
.ot-futuristic .tutor-dashboard-header {
  background: transparent !important;
  color: var(--ot-text);
}
.ot-futuristic.tutor-dashboard-page main,
.ot-futuristic .tutor-template-no-header,
.ot-futuristic main { background: transparent; }

/* Headings + body legible on dark. */
.ot-futuristic .tutor-dashboard :is(h1,h2,h3,h4,h5,h6) { color: var(--ot-text); font-family: 'Cairo', sans-serif; }
.ot-futuristic .tutor-dashboard p,
.ot-futuristic .tutor-dashboard li,
.ot-futuristic .tutor-dashboard span,
.ot-futuristic .tutor-color-secondary,
.ot-futuristic .tutor-color-muted,
.ot-futuristic .tutor-fs-7 { color: var(--ot-text-dim); }

/* =====================================================================
   HEADER — greeting + avatar (the "welcome to your command center")
   ===================================================================== */
.ot-futuristic .tutor-dashboard-header {
  border-radius: 24px; padding: clamp(20px, 3vw, 32px) !important;
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid var(--ot-border) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  position: relative; overflow: hidden;
}
.ot-futuristic .tutor-dashboard-header::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ot-orange), var(--ot-gold), transparent);
}
.ot-futuristic .tutor-dashboard-header-greetings,
.ot-futuristic .tutor-dashboard-header-display-name { color: var(--ot-text) !important; }
.ot-futuristic .tutor-dashboard-header-display-name { font-family: 'Cairo', sans-serif; font-weight: 900; }
.ot-futuristic .tutor-dashboard-header-avatar img,
.ot-futuristic .tutor-dashboard-header-avatar .tutor-avatar,
.ot-futuristic .tutor-avatar {
  border: 2px solid transparent !important;
  /* dark base color so the computed bg is never white even behind a
     transparent-PNG avatar (Tutor ships .tutor-avatar with a white fill). */
  background-color: #15151f !important;
  background-image: linear-gradient(#15151f,#15151f), linear-gradient(135deg, var(--ot-orange), var(--ot-gold)) !important;
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 8px 28px var(--ot-glow);
}
/* the text-initials avatar circle (no photo) → molten */
.ot-futuristic .tutor-avatar-text,
.ot-futuristic [class*="avatar"] .tutor-avatar-text {
  background: radial-gradient(circle at 30% 30%, #fff7ec, var(--ot-orange) 55%, var(--ot-orange-deep)) !important;
  color: #160a02 !important; font-weight: 800;
}

/* =====================================================================
   SIDE MENU — the navigation rail → glass with molten active state
   ===================================================================== */
.ot-futuristic .tutor-dashboard-permalinks,
.ot-futuristic .tutor-dashboard-menu {
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--ot-border) !important; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.ot-futuristic .tutor-dashboard-menu-item-link {
  color: var(--ot-text-dim) !important; font-weight: 600; border: none !important;
  transition: background .3s var(--ot-ease), color .3s var(--ot-ease);
}
.ot-futuristic .tutor-dashboard-menu-item-icon { color: var(--ot-gold) !important; }
.ot-futuristic .tutor-dashboard-menu-item-link:hover { color: var(--ot-text) !important; background: rgba(255,107,26,.08) !important; }
.ot-futuristic .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
.ot-futuristic .tutor-dashboard-menu-item.is-active .tutor-dashboard-menu-item-link,
.ot-futuristic li.active > .tutor-dashboard-menu-item-link {
  background: linear-gradient(135deg, var(--ot-orange), var(--ot-orange-2) 60%, var(--ot-gold)) !important;
  color: #160a02 !important; box-shadow: 0 10px 28px var(--ot-glow);
}
.ot-futuristic .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon,
.ot-futuristic .tutor-dashboard-menu-item.is-active .tutor-dashboard-menu-item-icon { color: #160a02 !important; }
.ot-futuristic .tutor-dashboard-menu-divider { border-color: var(--ot-border) !important; }

/* =====================================================================
   CARDS — stat tiles + course cards → frosted obsidian glass
   ===================================================================== */
.ot-futuristic .tutor-card,
.ot-futuristic [class*="dashboard-info-card"],
.ot-futuristic .tutor-dashboard-content-inner > .tutor-row > [class*="col"] > div {
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ot-border) !important; border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.4); color: var(--ot-text);
  transition: transform .4s var(--ot-ease), box-shadow .4s var(--ot-ease);
}
.ot-futuristic .tutor-card:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(255,107,26,.2); }
.ot-futuristic .tutor-card :is(h1,h2,h3,h4,h5,h6),
.ot-futuristic .tutor-card .tutor-color-black { color: var(--ot-text) !important; }

/* Big readout numbers (Completed / Active / Enrolled) → glowing gold. */
.ot-futuristic [class*="dashboard-info-card"] :is(h2,h3,.tutor-fs-3,.tutor-fs-2),
.ot-futuristic .tutor-dashboard-content-inner .tutor-fs-2 {
  font-family: var(--ot-num); font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(135deg, var(--ot-orange), var(--ot-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(255,107,26,.4));
}
.ot-futuristic [class*="dashboard-info-card"] [class*="icon"],
.ot-futuristic [class*="dashboard-info-card"] svg { color: var(--ot-orange) !important; }

/* =====================================================================
   PROGRESS — the dopamine bar. (Primary var already recolors the fill.)
   ===================================================================== */
.ot-futuristic .tutor-progress-bar,
.ot-futuristic [class*="progress-bar"] > span,
.ot-futuristic .tutor-progress-value {
  background: linear-gradient(90deg, var(--ot-orange), var(--ot-gold)) !important;
  box-shadow: 0 0 12px var(--ot-glow);
}
.ot-futuristic [class*="progress"] { color: var(--ot-gold) !important; }
.ot-futuristic .tutor-ratings-stars i { color: var(--ot-gold) !important; }

/* =====================================================================
   TABS (Enrolled / Active / Completed) → molten active underline
   ===================================================================== */
.ot-futuristic .tutor-nav-link { color: var(--ot-text-dim) !important; }
.ot-futuristic .tutor-nav-link.is-active,
.ot-futuristic .tutor-nav-link:hover { color: var(--ot-gold) !important; }
.ot-futuristic .tutor-nav-link.is-active { border-bottom-color: var(--ot-orange) !important; }

/* =====================================================================
   BUTTONS → molten primary
   ===================================================================== */
.ot-futuristic .tutor-btn-primary,
.ot-futuristic .tutor-btn.tutor-btn-primary,
.ot-futuristic .tutor-enroll-course-button {
  background: linear-gradient(135deg, var(--ot-orange), var(--ot-orange-2) 60%, var(--ot-gold)) !important;
  border: none !important; color: #160a02 !important; font-weight: 800 !important;
  border-radius: 50px !important; box-shadow: 0 14px 34px var(--ot-glow) !important;
}
.ot-futuristic .tutor-btn-primary:hover { transform: translateY(-2px); }
.ot-futuristic .tutor-btn-outline-primary,
.ot-futuristic .tutor-btn.tutor-btn-outline-primary {
  border: 1px solid var(--ot-orange) !important; color: var(--ot-gold) !important; background: rgba(255,107,26,.06) !important; border-radius: 50px !important;
}

/* Empty-state ("no courses yet") — keep legible + on-brand, motivating. */
.ot-futuristic .tutor-dashboard-content .tutor-empty-state,
.ot-futuristic [class*="empty"] p,
.ot-futuristic [class*="no-data"] { color: var(--ot-text-dim) !important; }

/* Inputs / forms (profile, settings, registration) → dark glass fields. */
.ot-futuristic .tutor-form-control,
.ot-futuristic .tutor-input-group input,
.ot-futuristic input[type="text"],
.ot-futuristic input[type="email"],
.ot-futuristic input[type="password"],
.ot-futuristic textarea,
.ot-futuristic select {
  background: rgba(255,255,255,.04) !important; color: var(--ot-text) !important;
  border: 1px solid var(--ot-border) !important; border-radius: 12px !important;
}
.ot-futuristic .tutor-form-control:focus,
.ot-futuristic input:focus, .ot-futuristic textarea:focus, .ot-futuristic select:focus {
  border-color: var(--ot-orange) !important; box-shadow: 0 0 0 3px rgba(255,107,26,.2) !important; outline: none;
}
.ot-futuristic label, .ot-futuristic .tutor-form-label { color: var(--ot-text) !important; }

/* Spacing under the fixed nav. */
.ot-futuristic.tutor-dashboard-page .tutor-wrap,
body.page-dashboard { padding-top: 8px; }

/* =====================================================================
   MOBILE-FIRST — the menu rail stacks above content; comfortable taps
   ===================================================================== */
@media (max-width: 900px) {
  .ot-futuristic .tutor-dashboard-menu-item-link { padding: 14px 16px !important; min-height: 48px; }
  .ot-futuristic .tutor-dashboard-header { text-align: center; }
}

/* =====================================================================
   COMMAND CENTER — the dashboard landing (tutor/dashboard/dashboard.php).
   "You entered your e-commerce operating system." Hero + momentum ring +
   readout tiles + continue-learning course cards. Mobile-first.
   ===================================================================== */
.ot-cc { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 30px); }

/* Hero */
.ot-cc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: clamp(24px, 3.4vw, 40px) !important; border-radius: 24px; position: relative; overflow: hidden;
}
.ot-cc-hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--ot-orange), var(--ot-gold)); }
.ot-cc-kicker { display: inline-block; color: var(--ot-gold); font-family: var(--ot-num); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 10px; }
.ot-cc-hero h2 { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--ot-text); margin: 0 0 8px; }
.ot-cc-hero p { color: var(--ot-text-dim); max-width: 520px; line-height: 1.85; margin: 0 0 20px; }
.ot-cc-resume {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 24px; border-radius: 50px; text-decoration: none;
  background: linear-gradient(135deg, var(--ot-orange), var(--ot-orange-2) 60%, var(--ot-gold)); color: #160a02; font-weight: 800;
  box-shadow: 0 14px 34px var(--ot-glow); transition: transform .3s var(--ot-ease), box-shadow .3s var(--ot-ease);
}
.ot-cc-resume:hover { transform: translateY(-3px); box-shadow: 0 20px 44px var(--ot-glow); }
.ot-cc-resume-title { font-weight: 600; opacity: .85; border-inline-start: 1px solid rgba(22,10,2,.3); padding-inline-start: 12px; }

/* Momentum ring (overall progress) */
.ot-cc-ring {
  --size: 138px; width: var(--size); height: var(--size); flex-shrink: 0; border-radius: 50%; position: relative; display: grid; place-items: center;
  background: conic-gradient(var(--ot-gold) calc(var(--ot-pct, 0) * 1%), rgba(255,255,255,.07) 0);
  box-shadow: 0 0 34px rgba(255,107,26,.28);
}
.ot-cc-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: rgba(11,11,17,.9); }
.ot-cc-ring-center { position: relative; text-align: center; }
.ot-cc-ring-center .ot-num { font-size: 1.9rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--ot-orange), var(--ot-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ot-cc-ring-center small { display: block; color: var(--ot-text-dim); font-size: .7rem; margin-top: 4px; }

/* Readout tiles */
.ot-cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ot-cc-stat { padding: 22px 18px !important; border-radius: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ot-cc-ic { font-size: 1.5rem; }
.ot-cc-stat-num { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--ot-orange), var(--ot-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 12px rgba(255,107,26,.4)); }
.ot-cc-lbl { color: var(--ot-text-dim); font-size: .9rem; }

/* Section head */
.ot-cc-section-head { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ot-cc-section-head h3 { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--ot-text); margin: 0; }
.ot-cc-seeall { color: var(--ot-gold); text-decoration: none; font-size: .9rem; font-weight: 600; }
.ot-cc-seeall:hover { color: var(--ot-orange-2); }

/* Continue-learning course cards */
.ot-cc-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.ot-cc-course { text-decoration: none; border-radius: 20px !important; overflow: hidden; display: flex; flex-direction: column; transform-style: preserve-3d; }
.ot-cc-course-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(145deg, var(--ot-surface), var(--ot-bg-2)); display: grid; place-items: center; overflow: hidden; }
.ot-cc-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ot-cc-thumb-fallback { font-size: 2.6rem; opacity: .5; }
.ot-cc-course-pct { position: absolute; top: 10px; inset-inline-start: 10px; padding: 4px 10px; border-radius: 50px; font-size: .78rem; font-weight: 800; color: #160a02; background: linear-gradient(135deg, var(--ot-orange), var(--ot-gold)); box-shadow: 0 6px 16px var(--ot-glow); }
.ot-cc-course-body { padding: 16px 18px 18px; }
.ot-cc-course-body h4 { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--ot-text); margin: 0 0 12px; line-height: 1.4; }
.ot-cc-progress { height: 7px; border-radius: 50px; background: rgba(255,255,255,.07); overflow: hidden; }
.ot-cc-progress-bar { display: block; height: 100%; border-radius: 50px; background: linear-gradient(90deg, var(--ot-orange), var(--ot-gold)); box-shadow: 0 0 12px var(--ot-glow); }
.ot-cc-course-meta { margin-top: 12px; font-size: .86rem; }
.ot-cc-continue { color: var(--ot-gold); font-weight: 700; }
.ot-cc-done { color: #2ee07a; font-weight: 700; }

/* Empty state — motivating, not sad */
.ot-cc-empty { padding: clamp(32px, 5vw, 56px) !important; border-radius: 22px; text-align: center; }
.ot-cc-empty-ic { font-size: 3rem; display: block; margin-bottom: 14px; filter: drop-shadow(0 8px 24px var(--ot-glow)); }
.ot-cc-empty h4 { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 1.4rem; color: var(--ot-text); margin: 0 0 8px; }
.ot-cc-empty p { color: var(--ot-text-dim); max-width: 440px; margin: 0 auto 22px; line-height: 1.8; }
.ot-cc-cta { display: inline-flex; padding: 14px 30px; border-radius: 50px; background: linear-gradient(135deg, var(--ot-orange), var(--ot-orange-2) 60%, var(--ot-gold)); color: #160a02; font-weight: 800; text-decoration: none; box-shadow: 0 14px 34px var(--ot-glow); }
.ot-cc-cta:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
  .ot-cc-hero { flex-direction: column; text-align: center; }
  .ot-cc-hero p { margin-inline: auto; }
  .ot-cc-resume { flex-wrap: wrap; justify-content: center; }
  .ot-cc-resume-title { border: none; padding: 0; }
  .ot-cc-stats { gap: 10px; }
  .ot-cc-stat { padding: 16px 8px !important; }
}

/* =====================================================================
   LESSON PLAYER — premium RTL "spotlight" view (single lesson).
   Tutor's spotlight player ships a solid-orange top bar and a light-grey
   topics sidebar (white sidebar title), both illegible on the cosmos.
   This recolours them into a dark glass cockpit: glass top bar with a
   molten underline, dark glass topics rail, legible lesson links with a
   gold ACTIVE lesson, forge-green completion checks, and glass prev/next.
   Additive + defensive (colour / shape / shadow only over Tutor markup).
   Latin numerals. Scoped to .ot-futuristic; loads via the learning area.
   ===================================================================== */

/* Top bar → dark glass cockpit with a molten underline. */
.ot-futuristic .tutor-single-page-top-bar {
  position: relative;
  background: linear-gradient(180deg, rgba(13,13,20,.92), rgba(13,13,20,.78)) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ot-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.4) !important;
}
.ot-futuristic .tutor-single-page-top-bar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ot-orange) 30%, var(--ot-gold) 70%, transparent);
  opacity: .7;
}
.ot-futuristic .tutor-course-topic-single-header-title {
  color: var(--ot-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
}
/* Iconic buttons in the bar → glass chips. */
.ot-futuristic .tutor-single-page-top-bar .tutor-iconic-btn {
  color: var(--ot-text) !important;
  background: rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  transition: color .25s var(--ot-ease), background .25s var(--ot-ease);
}
.ot-futuristic .tutor-single-page-top-bar .tutor-iconic-btn:hover {
  color: var(--ot-gold) !important;
  background: rgba(255,255,255,.1) !important;
}

/* Topics sidebar → dark glass rail (kills the light-grey + white title). */
.ot-futuristic .tutor-lesson-sidebar {
  background: linear-gradient(180deg, rgba(13,13,20,.6), rgba(7,7,9,.55)) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-inline-start: 1px solid var(--ot-border) !important;
}
.ot-futuristic .tutor-course-single-sidebar-wrapper { background: transparent !important; }
.ot-futuristic .tutor-course-single-sidebar-title {
  background: transparent !important;
  color: var(--ot-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--ot-border) !important;
}
/* Section (topic) label in the rail → gold. */
.ot-futuristic .tutor-course-topic-title {
  color: var(--ot-gold) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
}

/* The rail's topic accordion ships grey headers + white bodies — clear them
   so the dark glass rail shows through (scoped to the lesson sidebar). */
.ot-futuristic .tutor-lesson-sidebar .tutor-accordion-item,
.ot-futuristic .tutor-lesson-sidebar .tutor-accordion-item-body {
  background: transparent !important;
}
.ot-futuristic .tutor-lesson-sidebar .tutor-accordion-item-header {
  background: transparent !important;
  color: var(--ot-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--ot-border) !important;
}
.ot-futuristic .tutor-lesson-sidebar .tutor-accordion-item-header.is-active {
  background: rgba(255,107,26,.08) !important;
}

/* Lesson links in the rail — Tutor paints the <a> white; clear it. */
.ot-futuristic .tutor-course-topic-item > a {
  background: transparent !important;
  border-radius: 12px;
  transition: background .25s var(--ot-ease);
}
.ot-futuristic .tutor-course-topic-item:hover > a { background: rgba(255,255,255,.04) !important; }
.ot-futuristic .tutor-course-topic-item-title {
  color: var(--ot-text-dim) !important;
  font-family: 'Cairo', sans-serif !important;
}
.ot-futuristic .tutor-course-topic-item-icon { color: var(--ot-text-dim) !important; }
.ot-futuristic .tutor-course-topic-item:hover .tutor-course-topic-item-title { color: var(--ot-text) !important; }

/* ACTIVE lesson = molten tint + gold title + start-edge bar (RTL-safe). */
.ot-futuristic .tutor-course-topic-item.is-active > a {
  background: rgba(255,107,26,.12) !important;
  border-inline-start: 3px solid var(--ot-orange) !important;
}
.ot-futuristic .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
  color: var(--ot-gold) !important;
  font-weight: 700 !important;
}
.ot-futuristic .tutor-course-topic-item.is-active .tutor-course-topic-item-icon { color: var(--ot-orange) !important; }

/* Completion check → forge-green (matches dashboard "done"). */
.ot-futuristic .tutor-form-check-circle:checked {
  background-color: #2ee07a !important;
  border-color: #2ee07a !important;
}

/* Footer prev/next → glass pills. */
.ot-futuristic .tutor-single-course-content-prev,
.ot-futuristic .tutor-single-course-content-next {
  background: var(--ot-glass) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 14px !important;
  color: var(--ot-text) !important;
  transition: border-color .3s var(--ot-ease), transform .3s var(--ot-ease);
}
.ot-futuristic .tutor-single-course-content-prev:hover,
.ot-futuristic .tutor-single-course-content-next:hover {
  border-color: rgba(255,210,122,.4) !important;
  transform: translateY(-2px);
}

/* Secondary buttons ship light-grey — glass them on the dark theme. */
.ot-futuristic .tutor-btn-secondary {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--ot-border) !important;
  color: var(--ot-text) !important;
}
.ot-futuristic .tutor-btn-secondary:hover {
  border-color: rgba(255,210,122,.4) !important;
  color: var(--ot-gold) !important;
}

/* Mobile bottom progress bar (Tutor ships it white) → dark glass dock. */
.ot-futuristic .tutor-spotlight-mobile-progress-complete {
  background: linear-gradient(180deg, rgba(13,13,20,.96), rgba(7,7,9,.92)) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--ot-border) !important;
  color: var(--ot-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ot-futuristic .tutor-single-page-top-bar .tutor-iconic-btn,
  .ot-futuristic .tutor-course-topic-item > a,
  .ot-futuristic .tutor-single-course-content-prev,
  .ot-futuristic .tutor-single-course-content-next { transition: none !important; }
  .ot-futuristic .tutor-single-course-content-prev:hover,
  .ot-futuristic .tutor-single-course-content-next:hover { transform: none; }
}

/* =====================================================================
   MY COURSES — premium glass enrolled-course cards (dashboard course
   lists / "enrolled-courses" tab). Tutor's card is flat + ships a light
   placeholder.svg thumbnail (the "white card" on the dark dashboard).
   We give it a real glass shell, brand the empty thumbnail with the
   molten "Core" motif, gold ratings, molten progress, and a full-width
   "continue learning" CTA (the key momentum action). Real featured
   images (src without "placeholder") are shown untouched.
   Additive + defensive. Latin numerals (1/2, 50%). Scoped .ot-futuristic.
   ===================================================================== */
.ot-futuristic .tutor-course-card {
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ot-border) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.42);
  transition: transform .4s var(--ot-ease), box-shadow .4s var(--ot-ease), border-color .4s var(--ot-ease);
}
.ot-futuristic .tutor-course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,210,122,.35) !important;
  box-shadow: 0 30px 66px rgba(0,0,0,.5), 0 0 0 1px rgba(255,210,122,.12);
}

/* Thumbnail: dark molten frame; brand the empty placeholder with a Core orb. */
.ot-futuristic .tutor-course-thumbnail {
  position: relative;
  background: linear-gradient(145deg, var(--ot-surface), var(--ot-bg-2));
}
/* display:none (not opacity:0) so the empty-alt placeholder leaves the a11y
   tree — fixes Lighthouse image-alt; the branded Core orb shows instead. */
.ot-futuristic .tutor-card-image-top[src*="placeholder"],
.ot-futuristic .tutor-course-thumbnail img[src*="placeholder"] { display: none; }
.ot-futuristic .tutor-course-thumbnail:has(img[src*="placeholder"]) { aspect-ratio: 16 / 9; }
.ot-futuristic .tutor-course-thumbnail:has(img[src*="placeholder"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,107,26,.42), rgba(255,107,26,0) 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 15px);
}
.ot-futuristic .tutor-course-thumbnail:has(img[src*="placeholder"])::before {
  content: "";
  position: absolute;
  top: 50%; inset-inline-start: 50%;
  width: 58px; height: 58px;
  transform: translate(50%, -50%);              /* RTL-safe centring */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ot-gold-soft), var(--ot-orange) 70%);
  box-shadow: 0 0 38px var(--ot-glow);
  z-index: 1;
}

/* Card body. */
.ot-futuristic .tutor-course-card .tutor-card-body { padding: 20px !important; }
.ot-futuristic .tutor-course-name a {
  color: var(--ot-text) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.45 !important;
}
.ot-futuristic .tutor-course-name a:hover { color: var(--ot-gold) !important; }
.ot-futuristic .tutor-course-card .tutor-ratings-stars [class*="tutor-icon-star"] { color: var(--ot-gold) !important; }

/* Progress → molten fill + glow. */
.ot-futuristic .tutor-course-card .tutor-progress-bar {
  height: 8px !important;
  border-radius: 50px !important;
  background: rgba(255,255,255,.07) !important;
  overflow: hidden;
}
.ot-futuristic .tutor-course-card .tutor-progress-value {
  background: linear-gradient(90deg, var(--ot-orange), var(--ot-gold)) !important;
  box-shadow: 0 0 12px var(--ot-glow);
}

/* "Continue learning" CTA → full-width molten button (momentum action). */
.ot-futuristic .tutor-course-card .list-item-button .tutor-btn {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, var(--ot-orange), var(--ot-orange-2) 60%, var(--ot-gold)) !important;
  border: none !important;
  color: #160a02 !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  box-shadow: 0 12px 28px var(--ot-glow) !important;
  transition: transform .3s var(--ot-ease);
}
.ot-futuristic .tutor-course-card .list-item-button .tutor-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .ot-futuristic .tutor-course-card,
  .ot-futuristic .tutor-course-card .list-item-button .tutor-btn { transition: none !important; }
  .ot-futuristic .tutor-course-card:hover,
  .ot-futuristic .tutor-course-card .list-item-button .tutor-btn:hover { transform: none; }
}

/* =====================================================================
   MOMENTUM & ACHIEVEMENT — continue-learning + mastery psychology on the
   Command Center. Obsidian Forge identity: forge-track progression, molten
   resume, streak as a building-momentum readout, one-time cinematic
   milestone celebration. Premium / business — not childish gamification.
   ===================================================================== */

/* Resume = deep-link to the next lesson. Lead label + truncating title. */
.ot-cc-resume { flex-wrap: wrap; max-width: 100%; }
.ot-cc-resume-lead { font-weight: 800; }
.ot-cc-resume-title {
  max-width: min(52vw, 320px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ot-cc-resume-go { font-weight: 900; }
/* Course context under the resume CTA: title + % + slim molten bar. */
.ot-cc-resume-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 16px 0 6px; color: var(--ot-text-dim); font-size: .9rem; max-width: 420px;
}
.ot-cc-resume-meta .ot-num { color: var(--ot-gold); font-weight: 800; }
.ot-cc-resume-bar { max-width: 420px; height: 6px; border-radius: 50px; background: rgba(255,255,255,.07); overflow: hidden; }
.ot-cc-resume-bar span { display: block; height: 100%; border-radius: 50px; background: linear-gradient(90deg, var(--ot-orange), var(--ot-gold)); box-shadow: 0 0 12px var(--ot-glow); }

/* Streak = building-momentum readout (subtle, premium — not a toy badge). */
.ot-cc-streak {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 20px;
  padding: 9px 16px; border-radius: 50px;
  background: rgba(255,107,26,.08); border: 1px solid rgba(255,210,122,.22);
}
.ot-cc-streak-flame { font-size: 1rem; filter: drop-shadow(0 0 8px var(--ot-glow)); align-self: center; }
.ot-cc-streak .ot-num { font-size: 1.4rem; font-weight: 800; color: var(--ot-gold); line-height: 1; }
.ot-cc-streak-lbl { color: var(--ot-text-dim); font-size: .82rem; }

/* Path to Mastery — forge track of milestone nodes. */
.ot-cc-track-pct { color: var(--ot-gold); font-weight: 800; font-size: .95rem; }
.ot-cc-track {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 6px; padding: 22px 8px 8px;
}
.ot-cc-track-line {
  position: absolute; top: 33px; inset-inline: 36px; height: 3px; border-radius: 50px;
  background: rgba(255,255,255,.08);
}
.ot-cc-track-fill {
  position: absolute; inset-inline-start: 0; top: 0; height: 100%; border-radius: 50px;
  background: linear-gradient(90deg, var(--ot-orange), var(--ot-gold));
  box-shadow: 0 0 14px var(--ot-glow);
  transition: width .9s var(--ot-ease);
}
.ot-cc-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; text-align: center; }
.ot-cc-node-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
  background: var(--ot-bg-2); border: 2px solid rgba(255,255,255,.12); color: transparent;
  transition: transform .3s var(--ot-ease);
}
.ot-cc-node.is-reached .ot-cc-node-dot {
  background: radial-gradient(circle at 35% 30%, var(--ot-gold-soft), var(--ot-orange) 72%);
  border-color: rgba(255,210,122,.6); box-shadow: 0 0 16px var(--ot-glow);
}
.ot-cc-node-lbl { font-family: 'Cairo', sans-serif; font-size: .76rem; color: var(--ot-text-dim); line-height: 1.3; }
.ot-cc-node.is-reached .ot-cc-node-lbl { color: var(--ot-text); font-weight: 700; }

/* One-time milestone celebration — cinematic, restrained. */
.ot-cc-celebrate {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px !important; border-radius: 20px;
  border: 1px solid rgba(255,210,122,.3) !important;
  animation: ot-cele-in .7s var(--ot-ease) both;
}
.ot-cc-cele-core {
  position: absolute; inset-inline-start: -40px; top: 50%; width: 220px; height: 220px;
  transform: translateY(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,107,26,.34), transparent 66%);
  animation: ot-cele-bloom 2.4s var(--ot-ease) infinite;
}
.ot-cc-cele-ic { position: relative; font-size: 2rem; filter: drop-shadow(0 6px 18px var(--ot-glow)); }
.ot-cc-cele-text { position: relative; display: flex; flex-direction: column; gap: 3px; }
.ot-cc-cele-text strong { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 1.15rem; color: var(--ot-text); }
.ot-cc-cele-text strong .ot-num { color: var(--ot-gold); }
.ot-cc-cele-text span { color: var(--ot-text-dim); font-size: .92rem; }
@keyframes ot-cele-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ot-cele-bloom { 0%,100% { opacity: .5; transform: translateY(-50%) scale(.9); } 50% { opacity: 1; transform: translateY(-50%) scale(1.08); } }

@media (max-width: 720px) {
  .ot-cc-track { flex-wrap: wrap; gap: 14px 6px; padding-top: 10px; }
  .ot-cc-track-line { display: none; }              /* nodes wrap → drop the connecting rail */
  .ot-cc-node { flex: 0 0 30%; }
  .ot-cc-resume-title { max-width: 70vw; }
  .ot-cc-streak { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ot-cc-resume-bar span, .ot-cc-track-fill { transition: none !important; }
  .ot-cc-celebrate { animation: none !important; }
  .ot-cc-cele-core { animation: none !important; opacity: .6 !important; }
}

/* =====================================================================
   VERIFICATION-AWARE banners + FREE-MEMBER tier dashboard (aspirational,
   upgrade-focused). Student keeps the Command Center above; member gets
   locked mastery previews + an upgrade panel. RTL, mobile-first.
   ===================================================================== */

/* status toast (?ot_v=verified/resent/invalid) */
.ot-cc-toast { margin: 0 0 16px; padding: 13px 18px; border-radius: 14px; font-family: 'Tajawal', sans-serif; font-weight: 600; }
.ot-cc-toast-ok { background: rgba(46,224,122,.1); border: 1px solid rgba(46,224,122,.32); color: #4ee68f; }
.ot-cc-toast-warn { background: rgba(255,170,60,.1); border: 1px solid rgba(255,170,60,.32); color: #ffc36b; }

/* verify banner (shown until email verified) */
.ot-cc-verify {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px !important; border-radius: 18px; margin-bottom: 18px;
  border: 1px solid rgba(255,210,122,.32) !important;
}
.ot-cc-verify-ic { font-size: 1.5rem; flex-shrink: 0; }
.ot-cc-verify-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.ot-cc-verify-text strong { font-family: 'Cairo', sans-serif; color: var(--ot-text); font-size: 1.02rem; }
.ot-cc-verify-text span { color: var(--ot-text-dim); font-size: .9rem; }
.ot-cc-verify-btn {
  flex-shrink: 0; padding: 11px 22px; border-radius: 50px; text-decoration: none; font-weight: 800; font-family: 'Cairo', sans-serif;
  background: rgba(255,210,122,.12); border: 1px solid rgba(255,210,122,.4); color: var(--ot-gold); transition: background .25s var(--ot-ease);
}
.ot-cc-verify-btn:hover { background: rgba(255,210,122,.2); color: #fff; }

/* ---- member hero (locked side instead of the momentum ring) ---- */
.ot-cc-tier-badge { display: inline-block; margin-inline-start: 8px; padding: 2px 10px; border-radius: 50px; background: rgba(255,255,255,.08); border: 1px solid var(--ot-border); color: var(--ot-text); font-family: 'Tajawal', sans-serif; font-size: .7rem; letter-spacing: 0; }
.ot-cc-mhero .ot-cc-hero-text p strong { color: var(--ot-gold); }
.ot-cc-mcta { margin-top: 4px; }
.ot-cc-mlock { flex-shrink: 0; display: grid; place-items: center; gap: 8px; width: 138px; height: 138px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,210,122,.3); }
.ot-cc-mlock-ico { font-size: 2.4rem; filter: drop-shadow(0 6px 18px var(--ot-glow)); }
.ot-cc-mlock-lbl { color: var(--ot-text-dim); font-size: .82rem; }

.ot-cc-lock-tag { color: var(--ot-gold); font-size: .82rem; font-weight: 700; }

/* ---- locked mastery previews (aspirational, warms on hover) ---- */
.ot-cc-locked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ot-cc-locked {
  position: relative; padding: 24px 20px !important; border-radius: 20px; overflow: hidden;
  filter: grayscale(.4) saturate(.7); opacity: .9; transition: filter .4s var(--ot-ease), opacity .4s var(--ot-ease), transform .4s var(--ot-ease);
}
.ot-cc-locked:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.ot-cc-locked-badge { position: absolute; top: 14px; inset-inline-start: 14px; font-size: .95rem; opacity: .7; }
.ot-cc-locked-ic { font-size: 2rem; display: block; margin-bottom: 12px; }
.ot-cc-locked-step { display: block; color: var(--ot-gold); font-size: .76rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 4px; }
.ot-cc-locked h4 { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--ot-text); margin: 0 0 8px; line-height: 1.4; }
.ot-cc-locked p { color: var(--ot-text-dim); font-size: .9rem; line-height: 1.7; margin: 0; }

/* ---- upgrade panel (conversion centerpiece) ---- */
.ot-cc-upgrade {
  position: relative; overflow: hidden; margin-top: 22px;
  padding: clamp(28px, 4vw, 46px) !important; border-radius: 24px;
  border: 1px solid rgba(255,210,122,.26) !important; text-align: center;
}
.ot-cc-up-core { position: absolute; top: -160px; inset-inline-start: 50%; transform: translateX(50%); width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,107,26,.3), rgba(255,210,122,.08) 42%, transparent 68%); animation: ot-cele-bloom 4s var(--ot-ease) infinite; }
.ot-cc-up-badge { position: relative; display: inline-block; padding: 7px 18px; border-radius: 50px; font-size: .82rem; font-weight: 800; color: var(--ot-gold); background: rgba(255,210,122,.09); border: 1px solid rgba(255,210,122,.28); margin-bottom: 16px; font-family: 'Tajawal', sans-serif; }
.ot-cc-upgrade h3 { position: relative; font-family: 'Cairo', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; margin: 0 0 12px; }
.ot-cc-upgrade > p { position: relative; color: var(--ot-text-dim); line-height: 1.9; max-width: 560px; margin: 0 auto 22px; font-family: 'Tajawal', sans-serif; }
.ot-cc-up-points { position: relative; list-style: none; margin: 0 auto 26px; padding: 0; max-width: 460px; display: grid; gap: 11px; text-align: start; }
.ot-cc-up-points li { display: flex; align-items: center; gap: 12px; color: var(--ot-text); font-family: 'Tajawal', sans-serif; line-height: 1.6; }
.ot-cc-up-points li span { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,107,26,.1); border: 1px solid rgba(255,210,122,.2); }
.ot-cc-up-cta { position: relative; display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ot-cc-up-price { font-family: var(--ot-num); font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg, var(--ot-orange), var(--ot-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ot-cc-up-fine { position: relative; margin-top: 18px; color: var(--ot-text-dim); font-size: .82rem; }

@media (max-width: 720px) {
  .ot-cc-mhero { flex-direction: column; text-align: center; }
  .ot-cc-mlock { width: 110px; height: 110px; }
  .ot-cc-verify { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-cc-up-core { animation: none !important; opacity: .6 !important; }
  .ot-cc-locked { transition: none !important; }
}

/* =====================================================================
   STUDENT EXPERIENCE POLISH  (v2.7 — refinement layer, appended last so it
   wins the cascade). Pure overrides scoped to .ot-futuristic; no Tutor
   markup/logic touched. Covers: warm contrast, premium empty states,
   form/tab polish, content hierarchy, subtle motion, mobile ergonomics,
   locked identity fields. RTL-safe, reduced-motion aware.
   ===================================================================== */
/* ──────────────────────────────────────────────────────────────────
   DESIGN TOKENS — single source of truth for the dashboard palette,
   warm-ink hierarchy, depth + motion timing. (Consolidated v3.0: the
   former duplicate token blocks below now reference these.)
   ────────────────────────────────────────────────────────────────── */
.ot-futuristic {
  --ot-ink:         #F5F2EA;  /* headings — warm white */
  --ot-ink-primary: #E7DED2;  /* primary body */
  --ot-ink-2:       #D2C7B8;  /* secondary */
  --ot-ink-muted:   #A79F92;  /* muted */
  --ot-accent:      #FF8A2A;  /* warm accent */
  --ot-ink-shadow:  0 1px 2px rgba(0,0,0,.45);
  /* depth + motion — reuse instead of re-declaring per rule */
  --ot-dur:         .25s;
  --ot-dur-slow:    .4s;
  --ot-radius:      18px;
  --ot-radius-lg:   26px;
}

/* ---- 1) CONTRAST / READABILITY — remap Tutor text to the warm palette ---- */
.ot-futuristic .tutor-dashboard :is(h1,h2,h3,h4,h5,h6),
.ot-futuristic .tutor-dashboard-content :is(h1,h2,h3,h4,h5,h6),
.ot-futuristic .tutor-color-black,
.ot-futuristic .tutor-fs-3,
.ot-futuristic .tutor-fs-4,
.ot-futuristic .tutor-fs-5 { color: var(--ot-ink) !important; }
.ot-futuristic .tutor-dashboard :is(h1,h2,h3) { text-shadow: var(--ot-ink-shadow); }

.ot-futuristic .tutor-dashboard p,
.ot-futuristic .tutor-dashboard li,
.ot-futuristic .tutor-dashboard td,
.ot-futuristic .tutor-dashboard span,
.ot-futuristic .tutor-color-secondary,
.ot-futuristic .tutor-fs-6 { color: var(--ot-ink-2) !important; }

.ot-futuristic .tutor-color-muted,
.ot-futuristic .tutor-color-hints,
.ot-futuristic .tutor-color-subdued,
.ot-futuristic .tutor-fs-7,
.ot-futuristic .tutor-fs-8,
.ot-futuristic small { color: var(--ot-ink-muted) !important; }

/* Placeholders + labels — the biggest "faint" offenders. */
.ot-futuristic ::placeholder { color: var(--ot-ink-muted) !important; opacity: 1 !important; }
.ot-futuristic .tutor-form-control::placeholder,
.ot-futuristic input::placeholder,
.ot-futuristic textarea::placeholder { color: rgba(215,207,194,.62) !important; }
.ot-futuristic .tutor-form-label,
.ot-futuristic label { color: var(--ot-ink) !important; font-weight: 600; }
.ot-futuristic .tutor-form-field-type,
.ot-futuristic .tutor-required-fields { color: var(--ot-ink-muted) !important; }

/* Tables (orders, quiz attempts, Q&A lists) — readable rows + gold heads. */
.ot-futuristic .tutor-table th,
.ot-futuristic .tutor-table thead th { color: var(--ot-gold) !important; background: rgba(255,255,255,.03) !important; }
.ot-futuristic .tutor-table td,
.ot-futuristic .tutor-table tbody td { color: var(--ot-ink-2) !important; border-color: rgba(255,255,255,.07) !important; }
.ot-futuristic .tutor-table tbody tr:hover td { background: rgba(255,107,26,.05) !important; }

/* ---- 2) EMPTY STATES — premium Obsidian-Forge cards ---- */
.ot-futuristic .tutor-empty-state,
.ot-futuristic .td-empty-state,
.ot-futuristic .tutor-empty-state-wrapper > .tutor-empty-state,
.ot-futuristic [class*="empty-state"]:not(.tutor-empty-state-wrapper) {
  position: relative;
  background: linear-gradient(160deg, rgba(26,26,38,.74), rgba(13,13,20,.66)) !important;
  border: 1px solid rgba(255,210,122,.18) !important;
  border-radius: 22px !important;
  padding: clamp(28px,5vw,44px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.ot-futuristic .tutor-empty-state-wrapper { background: transparent !important; border: 0 !important; padding: 0 !important; }
/* Hide the light/grey plugin illustrations. */
.ot-futuristic .tutor-empty-state img,
.ot-futuristic .tutor-empty-state > svg,
.ot-futuristic .td-empty-state img,
.ot-futuristic .td-empty-state > svg { display: none !important; }
/* Premium glowing icon in its place. */
.ot-futuristic .tutor-empty-state::before,
.ot-futuristic .td-empty-state::before {
  content: "✦"; display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  font-size: 1.7rem; color: var(--ot-gold);
  background: radial-gradient(circle at 50% 38%, rgba(255,107,26,.34), rgba(255,210,122,.08) 60%, transparent 72%);
  border: 1px solid rgba(255,210,122,.3);
  box-shadow: 0 0 30px rgba(255,107,26,.35), inset 0 0 18px rgba(255,210,122,.15);
  animation: ot-float 4.5s var(--ot-ease) infinite;
}
.ot-futuristic .tutor-empty-state :is(h5,h6),
.ot-futuristic .td-empty-state :is(h5,h6) { color: var(--ot-ink) !important; font-family: 'Cairo',sans-serif; font-weight: 800; }
.ot-futuristic .tutor-empty-state p,
.ot-futuristic .td-empty-state p { color: var(--ot-ink-muted) !important; }
/* Soft orange glow wash behind the card. */
.ot-futuristic .tutor-empty-state::after,
.ot-futuristic .td-empty-state::after {
  content: ""; position: absolute; top: -40%; inset-inline-start: 50%; transform: translateX(50%);
  width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,107,26,.10), transparent 68%);
}

/* ---- 5) FORM / INPUT POLISH — deeper glass + premium focus glow ---- */
.ot-futuristic .tutor-form-control,
.ot-futuristic .tutor-input-group input,
.ot-futuristic input:is([type="text"],[type="email"],[type="password"],[type="tel"],[type="url"],[type="number"],[type="search"]),
.ot-futuristic textarea,
.ot-futuristic select {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 13px !important;
  color: var(--ot-ink) !important;
  padding: 12px 15px !important;
  transition: border-color .25s var(--ot-ease), box-shadow .25s var(--ot-ease), background .25s var(--ot-ease) !important;
}
.ot-futuristic .tutor-form-control:hover,
.ot-futuristic textarea:hover,
.ot-futuristic select:hover { border-color: rgba(255,210,122,.32) !important; background: rgba(255,255,255,.06) !important; }
.ot-futuristic .tutor-form-control:focus,
.ot-futuristic input:focus,
.ot-futuristic textarea:focus,
.ot-futuristic select:focus {
  border-color: rgba(255,210,122,.6) !important;
  box-shadow: 0 0 0 3px rgba(255,107,26,.16), 0 8px 26px rgba(255,107,26,.14) !important;
  background: rgba(255,255,255,.07) !important;
  outline: none !important;
}

/* ---- 6) TABS / NAV — glowing active + animated pill underline ---- */
.ot-futuristic .tutor-nav { border-bottom: 1px solid rgba(255,255,255,.08) !important; gap: 4px; }
.ot-futuristic .tutor-nav-link,
.ot-futuristic .tutor-nav .tutor-nav-link {
  position: relative; color: var(--ot-ink-2) !important; font-weight: 600;
  padding: 12px 18px !important; border: 0 !important; background: transparent !important;
  transition: color .25s var(--ot-ease), background .25s var(--ot-ease) !important;
}
.ot-futuristic .tutor-nav-link:hover { color: var(--ot-gold) !important; background: rgba(255,255,255,.04) !important; border-radius: 12px 12px 0 0; }
.ot-futuristic .tutor-nav-link.is-active,
.ot-futuristic .tutor-nav-link[aria-selected="true"],
.ot-futuristic .tutor-nav-item.active .tutor-nav-link {
  color: var(--ot-gold) !important;
  text-shadow: 0 0 16px rgba(255,210,122,.45);
}
.ot-futuristic .tutor-nav-link.is-active::after,
.ot-futuristic .tutor-nav-link[aria-selected="true"]::after,
.ot-futuristic .tutor-nav-item.active .tutor-nav-link::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ot-orange), var(--ot-gold));
  box-shadow: 0 0 14px rgba(255,107,26,.6);
  animation: ot-tab-in .35s var(--ot-ease);
}
@keyframes ot-tab-in { from { transform: scaleX(.3); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ---- 9) CONTENT HIERARCHY — foreground cards read brighter than the bg ---- */
.ot-futuristic .tutor-card,
.ot-futuristic .tutor-dashboard-content .tutor-card,
.ot-futuristic .tutor-dashboard-content-inner > .tutor-fs-5 ~ * .tutor-card {
  background: linear-gradient(160deg, rgba(30,30,44,.82), rgba(15,15,23,.78)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.42) !important;
}
/* Gentle scrim so the WebGL backdrop never out-shouts the content column. */
.ot-futuristic.tutor-dashboard-page .tutor-dashboard-content::before {
  content: ""; position: absolute; inset: -10% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 30%, rgba(7,7,9,.55), transparent 75%);
}
.ot-futuristic.tutor-dashboard-page .tutor-dashboard-content { position: relative; }

/* ---- 8) MOTION — subtle premium feel (reduced-motion guarded) ---- */
@keyframes ot-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ot-futuristic .tutor-card,
.ot-futuristic .tutor-dashboard-menu-item-link,
.ot-futuristic .tutor-btn { transition: transform .3s var(--ot-ease), box-shadow .3s var(--ot-ease), background .25s var(--ot-ease), color .25s var(--ot-ease) !important; }
.ot-futuristic .tutor-card:hover { transform: translateY(-3px); }
.ot-futuristic .tutor-btn.tutor-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255,107,26,.45) !important; }

/* ---- 4) LOCKED IDENTITY FIELDS (paired with student-polish.js + server guard) ---- */
.ot-futuristic .ot-field-locked { position: relative; }
.ot-futuristic .ot-field-locked input,
.ot-futuristic .ot-field-locked select {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--ot-ink-muted) !important;
  cursor: not-allowed !important;
  padding-inline-start: 40px !important;
}
.ot-futuristic .ot-field-locked .ot-lock-badge {
  position: absolute; inset-block-start: 50%; inset-inline-start: 12px; transform: translateY(-50%);
  pointer-events: none; color: var(--ot-gold); font-size: 1rem; opacity: .85; z-index: 2;
}
.ot-futuristic .ot-lock-note {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: .78rem; color: var(--ot-ink-muted);
}

/* ---- 7) MOBILE ERGONOMICS — toggler, sidebar, keyboard-safe spacing ---- */
.ot-futuristic .tutor-dashboard-menu-toggler {
  background: var(--ot-glass) !important; border: 1px solid rgba(255,210,122,.22) !important;
  color: var(--ot-gold) !important; border-radius: 14px !important; min-height: 48px;
  font-family: 'Cairo',sans-serif; font-weight: 700;
}
@media (max-width: 900px) {
  .ot-futuristic .tutor-dashboard-left-menu { border-radius: 18px; }
  .ot-futuristic .tutor-dashboard-menu-item-link { padding: 14px 16px !important; min-height: 50px; font-size: 1rem; }
  /* Keyboard-safe: keep room below forms so the on-screen keyboard never
     covers the field being edited, and let focused fields scroll into view. */
  .ot-futuristic .tutor-dashboard-content { padding-bottom: 40vh !important; }
  .ot-futuristic .tutor-form-control,
  .ot-futuristic input, .ot-futuristic textarea, .ot-futuristic select { scroll-margin-top: 90px; font-size: 16px !important; /* iOS no-zoom */ }
  .ot-futuristic .tutor-empty-state::before,
  .ot-futuristic .td-empty-state::before { width: 60px; height: 60px; font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ot-futuristic .tutor-empty-state::before,
  .ot-futuristic .td-empty-state::before { animation: none !important; }
  .ot-futuristic .tutor-card,
  .ot-futuristic .tutor-btn,
  .ot-futuristic .tutor-nav-link { transition: none !important; }
  .ot-futuristic .tutor-card:hover,
  .ot-futuristic .tutor-btn.tutor-btn-primary:hover { transform: none !important; }
  .ot-futuristic .tutor-nav-link.is-active::after { animation: none !important; }
}

/* ---- 2b) Tutor's WHITE list/empty panels (.tutor-bg-white) on dashboard
   pages (quiz attempts, reviews, generic "No Data Found") → dark glass.
   Requirement: NO white plugin boxes remain on the dark theme. The big
   empty panel ships as .tutor-bg-white.tutor-px-32.tutor-py-64.tutor-text-center
   inside a .tutor-divider; we card it + swap the grey illustration for the
   glowing premium icon. ---- */
.ot-futuristic .tutor-bg-white {
  background: linear-gradient(160deg, rgba(26,26,38,.74), rgba(13,13,20,.66)) !important;
  color: var(--ot-ink-2) !important;
}
.ot-futuristic .tutor-divider:has(> .tutor-bg-white) { border-color: rgba(255,210,122,.18) !important; }
.ot-futuristic .tutor-bg-white.tutor-py-64 {
  position: relative;
  border: 1px solid rgba(255,210,122,.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.ot-futuristic .tutor-bg-white.tutor-py-64 > svg,
.ot-futuristic .tutor-bg-white.tutor-py-64 > img { display: none !important; }
.ot-futuristic .tutor-bg-white.tutor-py-64::before {
  content: "✦"; display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  font-size: 1.7rem; color: var(--ot-gold);
  background: radial-gradient(circle at 50% 38%, rgba(255,107,26,.34), rgba(255,210,122,.08) 60%, transparent 72%);
  border: 1px solid rgba(255,210,122,.3);
  box-shadow: 0 0 30px rgba(255,107,26,.35), inset 0 0 18px rgba(255,210,122,.15);
  animation: ot-float 4.5s var(--ot-ease) infinite;
}
.ot-futuristic .tutor-bg-white.tutor-py-64 :is(h5,h6) { color: var(--ot-ink) !important; font-family: 'Cairo',sans-serif; font-weight: 800; }
.ot-futuristic .tutor-bg-white.tutor-py-64 p,
.ot-futuristic .tutor-color-hints { color: var(--ot-ink-muted) !important; }
@media (prefers-reduced-motion: reduce) {
  .ot-futuristic .tutor-bg-white.tutor-py-64::before { animation: none !important; }
}

/* =====================================================================
   DASHBOARD v2.8 — FLOATING GLASS CONTENT (final luxury polish pass).
   The flat feeling came from .tutor-dashboard-content being transparent on
   the cosmos, so default sub-pages (settings/orders/quiz/profile/…) had no
   panel. Here the sub-page content becomes a floating glass control-center
   panel with strong readability + depth; tables/forms/tabs are redesigned
   fintech-grade. The bespoke command-center INDEX keeps its own cards.
   Appended last → wins the cascade. RTL-safe, reduced-motion aware.
   ===================================================================== */
/* Palette tokens centralized in the DESIGN TOKENS block above (v3.0). */
/* Warm the command-center INDEX too (it reads var(--ot-text-dim)). */
.ot-futuristic.tutor-dashboard-page { --ot-text-dim: #A79F92; }

/* ---- Text hierarchy (brighter primary per final spec) ---- */
.ot-futuristic .tutor-dashboard p,
.ot-futuristic .tutor-dashboard li,
.ot-futuristic .tutor-dashboard td,
.ot-futuristic .tutor-dashboard-content :is(p,li,td,dd),
.ot-futuristic .tutor-form-control { color: var(--ot-ink-primary) !important; }
.ot-futuristic .tutor-dashboard :is(h1,h2,h3,h4,h5,h6),
.ot-futuristic .tutor-dashboard-content :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ot-ink) !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); line-height: 1.4;
}
.ot-futuristic .tutor-color-secondary { color: var(--ot-ink-2) !important; }
.ot-futuristic .tutor-color-muted,
.ot-futuristic .tutor-color-hints,
.ot-futuristic .tutor-fs-7,
.ot-futuristic .tutor-fs-8 { color: var(--ot-ink-muted) !important; }

/* ====================================================================
   2) FLOATING GLASS CONTENT PANEL — sub-pages only (.ot-dash-sub).
   ==================================================================== */
.ot-futuristic.ot-dash-sub .tutor-dashboard-content {
  background: linear-gradient(158deg, rgba(26,26,40,.86), rgba(12,12,19,.82)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid rgba(255,210,122,.16) !important;
  border-radius: 26px !important;
  padding: clamp(22px, 3.2vw, 40px) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 70px rgba(255,138,42,.05) !important;
  position: relative; overflow: hidden;
}
.ot-futuristic.ot-dash-sub .tutor-dashboard-content::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--ot-accent), var(--ot-gold), transparent);
}
/* Ambient corner glow inside the panel for depth. */
.ot-futuristic.ot-dash-sub .tutor-dashboard-content::after {
  content: ''; position: absolute; top: -120px; inset-inline-end: -80px; width: 360px; height: 360px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,138,42,.10), transparent 70%);
}
.ot-futuristic.ot-dash-sub .tutor-dashboard-content > * { position: relative; z-index: 1; }

/* Page title inside the panel → strong, with an accent tick. */
.ot-futuristic.ot-dash-sub .tutor-dashboard-content-inner > .tutor-fs-5,
.ot-futuristic.ot-dash-sub .tutor-dashboard-content-inner > h3:first-child,
.ot-futuristic.ot-dash-sub .tutor-dashboard-content > .tutor-fs-5 {
  font-family: 'Cairo', sans-serif !important; font-weight: 900 !important;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important; color: var(--ot-ink) !important;
  padding-inline-start: 16px; margin-bottom: 22px !important; position: relative;
}
.ot-futuristic.ot-dash-sub .tutor-dashboard-content-inner > .tutor-fs-5::before,
.ot-futuristic.ot-dash-sub .tutor-dashboard-content > .tutor-fs-5::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 1.05em; border-radius: 4px;
  background: linear-gradient(180deg, var(--ot-accent), var(--ot-gold)); box-shadow: 0 0 12px rgba(255,138,42,.5);
}

/* ====================================================================
   3) TABLES — luxury fintech surface (orders, quiz attempts, any list).
   ==================================================================== */
.ot-futuristic .tutor-table,
.ot-futuristic table.tutor-table,
.ot-futuristic .tutor-dashboard-content table {
  width: 100%; background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important; border-collapse: separate !important; border-spacing: 0 !important;
  overflow: hidden;
}
.ot-futuristic .tutor-table thead th,
.ot-futuristic .tutor-dashboard-content table thead th {
  background: rgba(255,138,42,.10) !important; color: var(--ot-gold) !important;
  font-family: 'Cairo', sans-serif !important; font-weight: 800 !important; letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,210,122,.22) !important; padding: 15px 18px !important; text-align: start;
}
.ot-futuristic .tutor-table tbody td,
.ot-futuristic .tutor-dashboard-content table tbody td {
  background: transparent !important; color: var(--ot-ink-primary) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important; padding: 15px 18px !important; vertical-align: middle;
}
.ot-futuristic .tutor-table tbody tr,
.ot-futuristic .tutor-dashboard-content table tbody tr { transition: background .25s var(--ot-ease), box-shadow .25s var(--ot-ease); }
.ot-futuristic .tutor-table tbody tr:hover td,
.ot-futuristic .tutor-dashboard-content table tbody tr:hover td { background: rgba(255,138,42,.07) !important; color: var(--ot-ink) !important; }
.ot-futuristic .tutor-table tbody tr:hover,
.ot-futuristic .tutor-dashboard-content table tbody tr:hover { box-shadow: inset 3px 0 0 0 var(--ot-accent); }
.ot-futuristic .tutor-table tbody tr:last-child td { border-bottom: 0 !important; }
/* Kill any stray white surfaces inside tables/lists. */
.ot-futuristic .tutor-table .tutor-bg-white,
.ot-futuristic .tutor-dashboard-content .tutor-bg-white { background: transparent !important; }

/* ====================================================================
   4) FORMS / INPUTS — premium glass + warm accent focus.
   ==================================================================== */
.ot-futuristic .tutor-form-control,
.ot-futuristic .tutor-form-select,
.ot-futuristic .tutor-input-group input,
.ot-futuristic input:is([type=text],[type=email],[type=password],[type=tel],[type=url],[type=number],[type=search],[type=date]),
.ot-futuristic textarea,
.ot-futuristic select {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 13px !important; color: var(--ot-ink) !important;
  padding: 13px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: border-color .25s var(--ot-ease), box-shadow .25s var(--ot-ease), background .25s var(--ot-ease) !important;
}
.ot-futuristic ::placeholder { color: rgba(210,199,184,.66) !important; opacity: 1 !important; }
.ot-futuristic .tutor-form-control:hover,
.ot-futuristic textarea:hover, .ot-futuristic select:hover { border-color: rgba(255,210,122,.34) !important; background: rgba(255,255,255,.065) !important; }
.ot-futuristic .tutor-form-control:focus,
.ot-futuristic input:focus, .ot-futuristic textarea:focus, .ot-futuristic select:focus {
  border-color: var(--ot-accent) !important;
  box-shadow: 0 0 0 3px rgba(255,138,42,.18), 0 10px 30px rgba(255,138,42,.16), inset 0 1px 0 rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.075) !important; outline: none !important;
}
.ot-futuristic .tutor-form-group,
.ot-futuristic .tutor-mb-32 { margin-bottom: 22px !important; }
.ot-futuristic .tutor-form-label,
.ot-futuristic label { color: var(--ot-ink) !important; font-weight: 600 !important; margin-bottom: 8px !important; display: inline-block; }

/* ====================================================================
   5) SETTINGS TABS — premium pill/underline, glowing active.
   ==================================================================== */
.ot-futuristic .tutor-nav { border-bottom: 1px solid rgba(255,255,255,.1) !important; gap: 6px; margin-bottom: 26px !important; flex-wrap: wrap; }
.ot-futuristic .tutor-nav-item { margin: 0 !important; }
.ot-futuristic .tutor-nav-link {
  position: relative; color: var(--ot-ink-2) !important; font-family: 'Cairo', sans-serif; font-weight: 700;
  padding: 13px 22px !important; border: 0 !important; background: transparent !important; border-radius: 12px 12px 0 0;
  transition: color .25s var(--ot-ease), background .25s var(--ot-ease) !important;
}
.ot-futuristic .tutor-nav-link:hover { color: var(--ot-gold) !important; background: rgba(255,255,255,.05) !important; }
.ot-futuristic .tutor-nav-link.is-active,
.ot-futuristic .tutor-nav-link[aria-selected="true"],
.ot-futuristic .tutor-nav-item.active .tutor-nav-link { color: var(--ot-gold) !important; text-shadow: 0 0 16px rgba(255,210,122,.5); }
.ot-futuristic .tutor-nav-link.is-active::after,
.ot-futuristic .tutor-nav-link[aria-selected="true"]::after,
.ot-futuristic .tutor-nav-item.active .tutor-nav-link::after {
  content: ''; position: absolute; inset-inline: 14px; bottom: -1px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ot-accent), var(--ot-gold)); box-shadow: 0 0 14px rgba(255,138,42,.65);
  animation: ot-tab-in .35s var(--ot-ease);
}

/* ====================================================================
   6) PROFILE — photo + locked fields read as protected, still elegant.
   ==================================================================== */
.ot-futuristic .tutor-dashboard-content .tutor-profile-photo,
.ot-futuristic .tutor-form-wrap .tutor-profile-photo,
.ot-futuristic .photo-area,
.ot-futuristic .cover-area { border-radius: 18px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.ot-futuristic .ot-field-locked input,
.ot-futuristic .ot-field-locked select {
  background: rgba(255,255,255,.025) !important; border-color: rgba(255,210,122,.16) !important;
  color: var(--ot-ink-muted) !important; cursor: not-allowed !important; padding-inline-start: 42px !important;
}
.ot-futuristic .ot-lock-badge { color: var(--ot-gold); opacity: .9; filter: drop-shadow(0 0 6px rgba(255,210,122,.4)); }

/* ====================================================================
   9) MICROINTERACTIONS — subtle lift/glow (reduced-motion guarded).
   ==================================================================== */
.ot-futuristic.ot-dash-sub .tutor-dashboard-content,
.ot-futuristic .tutor-card,
.ot-futuristic .tutor-btn { transition: transform .3s var(--ot-ease), box-shadow .3s var(--ot-ease), background .25s var(--ot-ease) !important; }
.ot-futuristic .tutor-card:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0,0,0,.5) !important; }
.ot-futuristic .tutor-btn.tutor-btn-primary { background: linear-gradient(135deg, var(--ot-accent), #ff6b1a 70%, var(--ot-gold)) !important; color: #160a02 !important; border: 0 !important; font-weight: 800 !important; }
.ot-futuristic .tutor-btn.tutor-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,138,42,.5) !important; }

/* ====================================================================
   10) MOBILE — comfortable panel padding, scrollable tables, no overlap.
   ==================================================================== */
@media (max-width: 900px) {
  .ot-futuristic.ot-dash-sub .tutor-dashboard-content { padding: 18px 16px !important; border-radius: 20px !important; padding-bottom: 40vh !important; }
  /* Tables scroll horizontally instead of breaking the layout. */
  .ot-futuristic .tutor-dashboard-content table,
  .ot-futuristic .tutor-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .ot-futuristic .tutor-nav { gap: 2px; }
  .ot-futuristic .tutor-nav-link { padding: 11px 14px !important; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ot-futuristic.ot-dash-sub .tutor-dashboard-content,
  .ot-futuristic .tutor-card, .ot-futuristic .tutor-btn,
  .ot-futuristic .tutor-table tbody tr { transition: none !important; }
  .ot-futuristic .tutor-card:hover,
  .ot-futuristic .tutor-btn.tutor-btn-primary:hover { transform: none !important; }
  .ot-futuristic .tutor-nav-link.is-active::after { animation: none !important; }
}

/* ---- v2.8b) TinyMCE bio editor (front-end profile) → dark glass.
   The editor chrome ships white .mce-* panels; the iframe content is themed
   via content_style (tiny/teeny_mce_before_init in functions.php). ---- */
.ot-futuristic .mce-tinymce,
.ot-futuristic .mce-panel,
.ot-futuristic .mce-container,
.ot-futuristic .mce-container-body,
.ot-futuristic .mce-toolbar-grp,
.ot-futuristic .mce-edit-area,
.ot-futuristic .mce-statusbar,
.ot-futuristic .mce-flow-layout,
.ot-futuristic .mce-btn,
.ot-futuristic .mce-btn-group {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.ot-futuristic .mce-tinymce { border-radius: 13px !important; overflow: hidden; }
.ot-futuristic .mce-edit-area iframe { background: #15151f !important; }
.ot-futuristic .mce-btn:hover,
.ot-futuristic .mce-btn.mce-active { background: rgba(255,138,42,.14) !important; }
.ot-futuristic .mce-ico,
.ot-futuristic .mce-btn button,
.ot-futuristic .mce-statusbar .mce-path-item,
.ot-futuristic .mce-menubtn span { color: var(--ot-ink-2) !important; }
.ot-futuristic .mce-statusbar { color: var(--ot-ink-muted) !important; }

/* Profile photo placeholder frame → dark (no white circle). */
.ot-futuristic .tutor_profile_pic,
.ot-futuristic .tutor-dashboard-content .profile-uploader ~ *,
.ot-futuristic [class*="profile-pic"] { background: rgba(255,255,255,.03) !important; }

/* v2.8c) WP editor wrapper (.wp-editor-container ships white) + profile photo
   area (#tutor_profile_area has a white bg-color behind the avatar). */
.ot-futuristic .wp-editor-wrap,
.ot-futuristic .wp-editor-container,
.ot-futuristic .wp-editor-tools,
.ot-futuristic .mce-edit-area {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.ot-futuristic #tutor_profile_area { background-color: #1b1b27 !important; border: 1px solid rgba(255,210,122,.16) !important; }

/* Cover-photo area ships a light bg-color behind its image → dark, so no
   light band shows around/behind a placeholder cover. (Real uploaded covers
   keep their inline background-image.) */
.ot-futuristic #tutor_cover_area { background-color: #15151f !important; }

/* Tutor's DEFAULT cover placeholder (`cover-photo.jpg`) is a purple stock
   band that clashes with the Obsidian-Forge palette. When the inline style
   still points at that default, swap it for a branded molten cosmos band.
   A user who uploads a real cover gets a different inline URL, so this
   substring match leaves genuine covers untouched. */
.ot-futuristic #tutor_cover_area[style*="cover-photo.jpg"] {
  background-image:
    radial-gradient(140% 180% at 50% 135%, rgba(255,138,42,.26), transparent 58%),
    radial-gradient(70% 120% at 12% -10%, rgba(255,210,122,.10), transparent 55%),
    linear-gradient(180deg, #0c0c12 0%, #14141d 60%, #1a1521 100%) !important;
  position: relative;
}
/* faint trajectory grid over the branded band (decorative, behind the avatar) */
.ot-futuristic #tutor_cover_area[style*="cover-photo.jpg"]::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,210,122,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,210,122,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
          mask-image: linear-gradient(180deg, transparent, #000 70%);
}

/* =====================================================================
   PERMISSION-DENIED screen → on-brand dark glass.
   Tutor's permission-denied template ships a light SVG illustration and a
   white card; students don't normally reach it (nav is curated), but if any
   Tutor access check denies a request the screen should still be dark +
   legible. Hide the light illustration and drop in a glowing forge glyph.
   ===================================================================== */
.ot-futuristic .tutor-page-permission-denied .tutor-card {
  background: linear-gradient(160deg, rgba(26,26,38,.96), rgba(13,13,20,.98)) !important;
  border: 1px solid rgba(255,210,122,.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
}
.ot-futuristic .tutor-page-permission-denied .tutor-svg-img img { display: none !important; }
.ot-futuristic .tutor-page-permission-denied .tutor-svg-img {
  position: relative;
  height: 96px;
  margin-bottom: 8px;
}
.ot-futuristic .tutor-page-permission-denied .tutor-svg-img::before {
  content: "✦";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; line-height: 1;
  color: var(--ot-gold, #ffd27a);
  text-shadow: 0 0 26px var(--ot-glow, rgba(255,138,42,.6));
}
.ot-futuristic .tutor-page-permission-denied .tutor-color-black,
.ot-futuristic .tutor-page-permission-denied .tutor-fs-5 { color: var(--ot-ink, #F5F2EA) !important; }
.ot-futuristic .tutor-page-permission-denied .tutor-color-muted,
.ot-futuristic .tutor-page-permission-denied .tutor-fs-6 { color: var(--ot-ink-muted, #A79F92) !important; }

/* =====================================================================
   DASHBOARD v2.9 — FINAL PRODUCT-FEEL PASS.
   Profile hero, loading skeletons, microinteractions, mobile sidebar
   animation, de-WordPress-ing (selects/pagination/spinners/toasts).
   Appended last. RTL-safe, fully reduced-motion guarded.
   ===================================================================== */

/* ---- 2) PROFILE HEADER → cinematic hero ---- */
.ot-futuristic .tutor-dashboard-header {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(255,138,42,.18), transparent 55%),
    radial-gradient(90% 120% at 0% 120%, rgba(255,107,26,.12), transparent 60%),
    linear-gradient(135deg, rgba(30,24,32,.94), rgba(13,13,20,.96)) !important;
  border: 1px solid rgba(255,210,122,.2) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
/* drifting ambient light */
.ot-futuristic .tutor-dashboard-header::after {
  content: ''; position: absolute; top: -50%; inset-inline-end: -10%;
  width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,138,42,.16), transparent 68%);
  animation: ot-drift 11s ease-in-out infinite;
}
.ot-futuristic .tutor-dashboard-header > * { position: relative; z-index: 1; }
@keyframes ot-drift { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-26px,18px) scale(1.08);} }
/* avatar framing */
.ot-futuristic .tutor-dashboard-header-avatar img,
.ot-futuristic .tutor-dashboard-header-avatar .tutor-avatar {
  border-radius: 50% !important; border: 2px solid rgba(255,210,122,.5) !important;
  box-shadow: 0 0 0 5px rgba(255,107,26,.12), 0 12px 30px rgba(255,107,26,.3) !important;
  transition: transform .4s var(--ot-ease), box-shadow .4s var(--ot-ease) !important;
}
.ot-futuristic .tutor-dashboard-header:hover .tutor-dashboard-header-avatar img { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255,107,26,.18), 0 16px 40px rgba(255,107,26,.42) !important; }

/* ---- 3) LOADING — page-enter + skeleton shimmer + AJAX veil ---- */
@keyframes ot-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ot-futuristic.ot-dash-sub .tutor-dashboard-content,
.ot-futuristic.ot-dash-index .tutor-dashboard-content-inner { animation: ot-enter .5s var(--ot-ease) both; }

@keyframes ot-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ot-skel {
  position: relative; border-radius: 12px; min-height: 16px;
  background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,210,122,.1) 50%, rgba(255,255,255,.04) 70%);
  background-size: 200% 100%; animation: ot-shimmer 1.4s linear infinite;
}
/* AJAX busy veil (added by student-polish.js on jQuery ajaxStart). */
.ot-futuristic .tutor-dashboard-content.ot-ajax-busy { position: relative; }
.ot-futuristic .tutor-dashboard-content.ot-ajax-busy > *:not(.ot-ajax-veil) { opacity: .35; transition: opacity .25s var(--ot-ease); filter: blur(.5px); }
.ot-ajax-veil {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; border-radius: inherit;
  background: rgba(10,10,16,.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ot-ajax-veil::after {
  content: ''; width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(255,210,122,.25); border-top-color: var(--ot-accent);
  animation: ot-spin .8s linear infinite;
}
@keyframes ot-spin { to { transform: rotate(360deg); } }

/* ---- 4) MICROINTERACTIONS — expensive, smooth ---- */
.ot-futuristic .tutor-btn { transition: transform .2s var(--ot-ease), box-shadow .25s var(--ot-ease), background .25s var(--ot-ease), filter .2s var(--ot-ease) !important; }
.ot-futuristic .tutor-btn:active { transform: translateY(0) scale(.97) !important; }
.ot-futuristic .tutor-dashboard-menu-item-link { transition: background .25s var(--ot-ease), color .25s var(--ot-ease), padding-inline-start .25s var(--ot-ease) !important; }
.ot-futuristic .tutor-dashboard-menu-item-link:hover { padding-inline-start: 22px !important; }
.ot-futuristic .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
.ot-futuristic .tutor-dashboard-menu-item-link.active { box-shadow: inset 3px 0 0 var(--ot-accent); }
.ot-futuristic a, .ot-futuristic .tutor-btn-link { transition: color .2s var(--ot-ease); }

/* ---- 6) DE-WORDPRESS — selects, pagination, spinners, toasts ---- */
.ot-futuristic select,
.ot-futuristic .tutor-form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffd27a' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 14px center !important; /* RTL: chevron on the left */
  padding-inline-start: 40px !important;
}
.ot-futuristic .tutor-pagination .page-numbers,
.ot-futuristic .tutor-pagination a,
.ot-futuristic .tutor-pagination span {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.1) !important;
  color: var(--ot-ink-2) !important; border-radius: 10px !important; min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; transition: all .25s var(--ot-ease) !important;
}
.ot-futuristic .tutor-pagination .page-numbers:hover,
.ot-futuristic .tutor-pagination a:hover { border-color: rgba(255,210,122,.4) !important; color: var(--ot-gold) !important; }
.ot-futuristic .tutor-pagination .current,
.ot-futuristic .tutor-pagination .page-numbers.current {
  background: linear-gradient(135deg, var(--ot-accent), var(--ot-gold)) !important; color: #160a02 !important;
  border-color: transparent !important; box-shadow: 0 8px 20px rgba(255,138,42,.4) !important;
}
/* Tutor spinners / loading bits → molten */
.ot-futuristic .tutor-spinner,
.ot-futuristic .is-loading::after,
.ot-futuristic .loader-area::before {
  border-color: rgba(255,210,122,.25) !important; border-top-color: var(--ot-accent) !important;
}
.ot-futuristic .loader-area { color: var(--ot-ink-muted) !important; }
/* Toast notifications → dark glass */
.ot-futuristic .tutor-toast,
.tutor-toast-parent .tutor-toast {
  background: linear-gradient(160deg, rgba(26,26,38,.96), rgba(13,13,20,.97)) !important;
  border: 1px solid rgba(255,210,122,.28) !important; color: var(--ot-ink) !important;
  border-radius: 14px !important; box-shadow: 0 20px 50px rgba(0,0,0,.55) !important;
}

/* ---- 5/10) MOBILE — sidebar slide animation + ergonomics ---- */
@media (max-width: 900px) {
  .ot-futuristic .tutor-dashboard.is-sidebar-expanded .tutor-dashboard-left-menu {
    animation: ot-slide-down .38s var(--ot-ease) both;
  }
  .ot-futuristic .tutor-dashboard-menu-item-link:hover { padding-inline-start: 18px !important; }
  .ot-futuristic .tutor-dashboard-header { text-align: start; }
}
@keyframes ot-slide-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---- 8) PERFORMANCE / reduced-motion ---- */
.ot-futuristic .tutor-dashboard-content { -webkit-overflow-scrolling: touch; }
@media (prefers-reduced-motion: reduce) {
  .ot-futuristic .tutor-dashboard-header::after,
  .ot-futuristic .ot-skel,
  .ot-futuristic .tutor-dashboard.is-sidebar-expanded .tutor-dashboard-left-menu,
  .ot-futuristic.ot-dash-sub .tutor-dashboard-content,
  .ot-futuristic.ot-dash-index .tutor-dashboard-content-inner { animation: none !important; }
  .ot-futuristic .ot-ajax-veil::after { animation: none !important; }
  .ot-futuristic .tutor-dashboard-header:hover .tutor-dashboard-header-avatar img { transform: none; }
  .ot-futuristic .tutor-btn:active { transform: none !important; }
}

/* =====================================================================
   QUIZ PLAYER — "Forge Trial" cinematic dark RTL theming.
   Tutor renders the quiz inside the spotlight (single-quiz.php → the shared
   common header/footer, already themed by the LESSON PLAYER block above).
   The quiz BODY itself shipped light: a white start panel, black question
   text, a grey meta bar, plain option cards. This block drops the whole
   quiz flow onto the Obsidian-Forge palette — glass start panel + info
   chips, a HUD meta bar with a molten time ring, glass answer-option cards
   with a molten "selected" glow, themed drag/match/ordering surfaces,
   pagination dots, and the inline attempt-result view. Defensive (colour /
   shape / shadow over Tutor markup only), scoped to .ot-futuristic, Latin
   numerals via --ot-num. Enqueued on tutor_quiz singulars (see the
   ot_tutor_learning_types() gating in functions.php).
   ===================================================================== */

/* The quiz body floats on the cosmos like the lesson content. */
.ot-futuristic .tutor-quiz-wrapper,
.ot-futuristic .tutor-quiz-single-wrap,
.ot-futuristic .tutor-quiz-wrap { background: transparent !important; }

/* ---- Start screen ---- */
.ot-futuristic .tutor-start-quiz-wrapper {
  position: relative; overflow: hidden;
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--ot-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.ot-futuristic .tutor-start-quiz-wrapper::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ot-gold, #ffd27a), var(--ot-accent, #ff8a2a), transparent);
  opacity: .7;
}
.ot-futuristic .tutor-start-quiz-title .tutor-color-black,
.ot-futuristic .tutor-start-quiz-title .tutor-fs-4 {
  color: var(--ot-ink, #F5F2EA) !important;
  font-family: 'Cairo', sans-serif !important; font-weight: 800 !important;
}
/* small "Quiz" kicker above the title */
.ot-futuristic .tutor-start-quiz-title .tutor-fs-6.tutor-color-black {
  color: var(--ot-accent, #ff8a2a) !important;
  font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase;
}
/* the quiz summary text under the title */
.ot-futuristic .tutor-start-quiz-title > div:last-child { color: var(--ot-ink-2, #D7CFC2) !important; }

/* Info chips (questions / time / attempts / passing grade) */
.ot-futuristic .tutor-quiz-info-area { display: flex; flex-wrap: wrap; gap: 12px; }
.ot-futuristic .tutor-quiz-info {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--ot-border);
}
.ot-futuristic .tutor-quiz-info .tutor-color-muted { color: var(--ot-ink-muted, #A79F92) !important; }
.ot-futuristic .tutor-quiz-info .tutor-color-black {
  color: var(--ot-gold, #ffd27a) !important;
  font-family: var(--ot-num) !important; font-weight: 700 !important;
}
/* skip button (ghost) on the start screen + "skip question" in the body */
.ot-futuristic .skip-quiz-btn,
.ot-futuristic .tutor-next-btn {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--ot-border) !important;
  color: var(--ot-ink-2, #D7CFC2) !important;
  border-radius: 50px !important;
}
.ot-futuristic .skip-quiz-btn:hover,
.ot-futuristic .tutor-next-btn:hover { color: var(--ot-gold, #ffd27a) !important; border-color: rgba(255,210,122,.4) !important; }

/* ---- Attempt meta bar (counter / attempts / time remaining) ---- */
.ot-futuristic .quiz-meta-info {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; margin-bottom: 8px;
  background: linear-gradient(160deg, rgba(26,26,38,.7), rgba(13,13,20,.55)) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--ot-border); border-radius: 16px;
}
.ot-futuristic .quiz-meta-info-left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ot-futuristic .quiz-meta-info .tutor-color-muted { color: var(--ot-ink-muted, #A79F92) !important; }
.ot-futuristic .quiz-meta-info .quiz-meta-info-left .tutor-color-secondary,
.ot-futuristic .quiz-meta-info .tutor-quiz-question-counter {
  color: var(--ot-gold, #ffd27a) !important; font-family: var(--ot-num) !important; font-weight: 700 !important;
}
/* time remaining readout */
.ot-futuristic .quiz-time-remaining { display: flex; align-items: center; gap: 8px; }
.ot-futuristic #tutor-quiz-time-update {
  color: var(--ot-ink, #F5F2EA) !important; font-family: var(--ot-num) !important; letter-spacing: .03em;
}
.ot-futuristic .quiz-time-remaining .tutor-color-muted { color: var(--ot-ink-muted, #A79F92) !important; }
/* progress / expired ring → molten / danger stroke */
.ot-futuristic .quiz-time-remaining-progress-circle circle { stroke: rgba(255,255,255,.12) !important; fill: none !important; }
.ot-futuristic .quiz-time-remaining-progress-circle circle:last-child { stroke: var(--ot-accent, #ff8a2a) !important; }
.ot-futuristic .quiz-time-remaining-expired-circle circle { stroke: #ff5b5b !important; fill: none !important; }
.ot-futuristic .color-text-error,
.ot-futuristic #tutor-quiz-time-update.color-text-error { color: #ff7a7a !important; }

/* ---- Question ---- */
.ot-futuristic .quiz-question-title,
.ot-futuristic .quiz-question-title.tutor-color-black {
  color: var(--ot-ink, #F5F2EA) !important;
  font-family: 'Cairo', sans-serif !important; font-weight: 700 !important; line-height: 1.55;
}
.ot-futuristic .question-marks {
  display: inline-block; font-family: var(--ot-num) !important;
  color: var(--ot-gold, #ffd27a) !important;
  background: rgba(255,210,122,.08); border: 1px solid rgba(255,210,122,.2);
  padding: 4px 12px; border-radius: 50px; font-size: .85rem;
}
.ot-futuristic .matching-quiz-question-desc .tutor-color-secondary { color: var(--ot-ink-2, #D7CFC2) !important; }

/* ---- Answer options (choice box: radio / checkbox) ----
   Lighter than the generic glass .tutor-card so 4-6 options don't read as
   heavy floating panels; the molten lift moves to the SELECTED state. */
.ot-futuristic .tutor-quiz-question-item { cursor: pointer; }
.ot-futuristic .tutor-quiz-answer-single .tutor-card {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color .25s var(--ot-ease), background .25s var(--ot-ease) !important;
}
.ot-futuristic .tutor-quiz-answer-single .tutor-card:hover { transform: none !important; box-shadow: none !important; }
.ot-futuristic .tutor-quiz-question-item:hover .tutor-card {
  border-color: rgba(255,210,122,.32) !important; background: rgba(255,255,255,.06) !important;
}
.ot-futuristic .tutor-quiz-answer-single .tutor-card .tutor-color-black { color: var(--ot-ink, #F5F2EA) !important; }
/* radio / checkbox accent (were default browser controls on dark) */
.ot-futuristic .tutor-quiz-question-item .tutor-form-check-input {
  accent-color: var(--ot-accent, #ff8a2a);
  width: 18px; height: 18px; flex-shrink: 0;
}
/* SELECTED option → molten glow (progressive enhancement via :has) */
.ot-futuristic .tutor-quiz-question-item:has(.tutor-form-check-input:checked) .tutor-card {
  border-color: rgba(255,138,42,.6) !important;
  background: linear-gradient(160deg, rgba(255,138,42,.12), rgba(255,107,26,.04)) !important;
  box-shadow: 0 0 0 1px rgba(255,138,42,.35), 0 10px 30px rgba(255,107,26,.18) !important;
}
.ot-futuristic .tutor-quiz-question-item:has(.tutor-form-check-input:checked) .tutor-color-black { color: var(--ot-gold, #ffd27a) !important; }

/* ---- Drag / ordering / matching surfaces ---- */
.ot-futuristic .tutor-quiz-dotted-box,
.ot-futuristic .tutor-dropzone {
  background: rgba(255,255,255,.03) !important;
  border: 1.5px dashed rgba(255,210,122,.28) !important;
  border-radius: 14px !important; color: var(--ot-ink-2, #D7CFC2) !important;
}
.ot-futuristic .tutor-quiz-border-box,
.ot-futuristic .tutor-matching-item,
.ot-futuristic .quiz-ordering-ans-item,
.ot-futuristic .quiz-matching-ans-item,
.ot-futuristic .quiz-image-ordering-ans-item,
.ot-futuristic .tutor-draggable {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 12px !important; color: var(--ot-ink, #F5F2EA) !important;
}
.ot-futuristic .tutor-draggable { cursor: grab; }
.ot-futuristic .tutor-draggable:active { cursor: grabbing; }
.ot-futuristic .tutor-quiz-image-ordering-icon,
.ot-futuristic .tutor-matching-item [class*="tutor-icon-hamburger"] { color: var(--ot-ink-muted, #A79F92) !important; }
.ot-futuristic .tutor-quiz-ans-no { color: var(--ot-gold, #ffd27a) !important; font-family: var(--ot-num) !important; }
.ot-futuristic .tutor-dragging-text-conent { color: var(--ot-ink-muted, #A79F92) !important; }

/* ---- Pagination dots (question_pagination layout) ---- */
.ot-futuristic .tutor-quiz-questions-pagination ul {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 8px; padding: 0;
}
.ot-futuristic .tutor-quiz-question-paginate-item {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; text-decoration: none;
  font-family: var(--ot-num) !important; font-size: .9rem;
  color: var(--ot-ink-2, #D7CFC2);
  background: rgba(255,255,255,.04); border: 1px solid var(--ot-border);
  transition: color .25s var(--ot-ease), border-color .25s var(--ot-ease), background .25s var(--ot-ease);
}
.ot-futuristic .tutor-quiz-question-paginate-item:hover { border-color: rgba(255,210,122,.4); color: var(--ot-gold, #ffd27a); }
.ot-futuristic .tutor-quiz-question-paginate-item.active,
.ot-futuristic .tutor-quiz-question-paginate-item.is-active {
  background: linear-gradient(135deg, var(--ot-accent, #ff8a2a), var(--ot-gold, #ffd27a)) !important;
  color: #160a02 !important; border-color: transparent !important; box-shadow: 0 8px 20px rgba(255,138,42,.4);
}

/* ---- Nav buttons (Back / Submit / Skip) + disabled state ---- */
.ot-futuristic .tutor-quiz-btn-group,
.ot-futuristic .tutor-quiz-btn-grp { align-items: center; }
.ot-futuristic .tutor-quiz-next-btn-all[disabled],
.ot-futuristic .start-quiz-btn[disabled],
.ot-futuristic .tutor-btn-primary[disabled] {
  opacity: .45 !important; filter: grayscale(.3); cursor: not-allowed;
  box-shadow: none !important; transform: none !important;
}

/* ---- Warning / reattempt box ---- */
.ot-futuristic .tutor-quiz-warning-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(160deg, rgba(255,170,40,.1), rgba(255,107,26,.04)) !important;
  border: 1px solid rgba(255,180,60,.28) !important; border-radius: 14px !important;
  padding: 14px 18px;
}
.ot-futuristic .tutor-quiz-warning-box .tutor-color-warning,
.ot-futuristic .tutor-quiz-warning-box .tutor-icon-circle-warning-outline { color: #ffbe5c !important; }
.ot-futuristic .tutor-quiz-alert-text,
.ot-futuristic .tutor-quiz-warning-box .tutor-color-secondary { color: var(--ot-ink-2, #D7CFC2) !important; }
/* reattempt is a bare .tutor-btn (no -primary) → make it molten */
.ot-futuristic .reattempt-btn {
  background: linear-gradient(135deg, var(--ot-accent, #ff8a2a), var(--ot-gold, #ffd27a)) !important;
  color: #160a02 !important; border: none !important; font-weight: 800 !important; border-radius: 50px !important;
}

/* ---- Inline attempt-result view (after finishing) ---- */
.ot-futuristic .tutor-quiz-attempt-details {
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--ot-border) !important; border-radius: 18px !important;
  color: var(--ot-ink, #F5F2EA) !important;
}
.ot-futuristic .tutor-quiz-attempt-details .tutor-color-black { color: var(--ot-ink, #F5F2EA) !important; }
.ot-futuristic .tutor-quiz-attempt-details .tutor-color-muted { color: var(--ot-ink-muted, #A79F92) !important; }
.ot-futuristic .tutor-instructor-note,
.ot-futuristic .tutor-quiz-attempt-note {
  background: rgba(255,255,255,.04) !important; border: 1px solid var(--ot-border) !important;
  border-radius: 12px !important; color: var(--ot-ink-2, #D7CFC2) !important;
}
.ot-futuristic .tutor-quiz-attempt-details .tutor-color-success { color: #2ee07a !important; }
.ot-futuristic .tutor-quiz-attempt-details .tutor-color-danger { color: #ff7a7a !important; }

/* ---- Mobile + reduced motion ---- */
@media (max-width: 720px) {
  .ot-futuristic .quiz-meta-info { padding: 12px 14px; }
  .ot-futuristic .quiz-meta-info-left { gap: 16px; }
  .ot-futuristic .quiz-question.tutor-mr-md-100 { margin-inline-end: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-futuristic .tutor-quiz-answer-single .tutor-card,
  .ot-futuristic .tutor-quiz-question-paginate-item { transition: none !important; }
}

/* =====================================================================
   LESSON DISCUSSION — the spotlight "Join the conversation" comments tab.
   Default markup is light: author names ship with NO colour class (so they
   inherit dark-on-dark in this theme), the composer + comment cards are
   plain. The spotlight tab nav (.tutor-nav-link) is already themed by the
   LESSON PLAYER block; this styles the discussion PANE — heading, composer
   (avatar + glass textarea + molten submit), threaded comment cards, the
   "Reply" affordance, indented replies, the divider line, and Load More.
   Scoped to .ot-futuristic. Defensive colour/shape over Tutor markup.
   ===================================================================== */

.ot-futuristic .tutor-course-spotlight-comments,
.ot-futuristic .tutor-single-course-lesson-comments { background: transparent !important; }

/* Section heading "Join the conversation" */
.ot-futuristic .tutor-single-course-lesson-comments > .tutor-color-black,
.ot-futuristic .tutor-single-course-lesson-comments > .tutor-fs-5 {
  color: var(--ot-ink, #F5F2EA) !important;
  font-family: 'Cairo', sans-serif !important; font-weight: 800 !important;
}

/* Composer + reply boxes → glass card */
.ot-futuristic .tutor-comment-box {
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--ot-border) !important;
  border-radius: 18px !important;
  padding: 16px !important;
}
.ot-futuristic .tutor-comment-box.tutor-reply-box { background: rgba(255,255,255,.025) !important; }
.ot-futuristic .comment-avatar img {
  border-radius: 50% !important;
  border: 1px solid rgba(255,210,122,.25);
  box-shadow: 0 0 14px rgba(255,138,42,.18);
}
.ot-futuristic .tutor-comment-textarea textarea,
.ot-futuristic .tutor-comment-box textarea.tutor-form-control { min-height: 84px; resize: vertical; }

/* Comment cards */
.ot-futuristic .tutor-comments-list { background: transparent !important; }
.ot-futuristic .tutor-single-comment {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}
/* Author name (ships with no colour class → would inherit dark) + timestamp */
.ot-futuristic .tutor-comment-author .tutor-fw-bold,
.ot-futuristic .tutor-comment-author > span:first-child {
  color: var(--ot-ink, #F5F2EA) !important; font-weight: 700 !important;
}
.ot-futuristic .tutor-comment-author .tutor-fs-7 { color: var(--ot-ink-muted, #A79F92) !important; font-family: var(--ot-num) !important; }
.ot-futuristic .tutor-comment-text { color: var(--ot-ink-2, #D7CFC2) !important; }

/* "Reply" affordance (a .tutor-color-secondary span) → tappable accent */
.ot-futuristic .tutor-comment-actions .tutor-color-secondary {
  color: var(--ot-ink-2, #D7CFC2) !important; cursor: pointer;
  transition: color .25s var(--ot-ease);
}
.ot-futuristic .tutor-comment-actions .tutor-color-secondary:hover { color: var(--ot-gold, #ffd27a) !important; }

/* Indented reply thread */
.ot-futuristic .tutor-child-comment {
  border-inline-start: 2px solid rgba(255,210,122,.18);
  padding-inline-start: 16px;
}

/* Divider line between top-level comments → faint molten rule */
.ot-futuristic .tutor-comment-line {
  display: block; height: 1px; margin-top: 20px; border: 0 !important;
  background: linear-gradient(90deg, rgba(255,210,122,.22), rgba(255,255,255,.04) 60%, transparent) !important;
}

/* Load More (button class is dynamic; the wrapper is stable) */
.ot-futuristic .tutor-button-wrapper .tutor-btn {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--ot-border) !important;
  color: var(--ot-ink-2, #D7CFC2) !important; border-radius: 50px !important;
}
.ot-futuristic .tutor-button-wrapper .tutor-btn:hover { color: var(--ot-gold, #ffd27a) !important; border-color: rgba(255,210,122,.4) !important; }

@media (prefers-reduced-motion: reduce) {
  .ot-futuristic .tutor-comment-actions .tutor-color-secondary { transition: none !important; }
}

/* =====================================================================
   DASHBOARD v3.0 — STABILIZATION & LAUNCH (final WP purge + mobile perf).
   Additive, appended last. Covers the last default surfaces (checkbox /
   radio / validation / upload / tooltip / modal) and reduces GPU cost on
   phones. RTL-safe, reduced-motion aware.
   ===================================================================== */

/* ---- 7) FINAL WP PURGE — controls that still looked default ---- */
/* Native checkboxes/radios → brand-tinted (conflict-free; quiz player relies
   on accent-color too, so this is consistent rather than a custom box). */
.ot-futuristic input[type="checkbox"],
.ot-futuristic input[type="radio"],
.ot-futuristic .tutor-form-check-input {
  accent-color: var(--ot-accent);
  width: 18px; height: 18px; cursor: pointer;
}
/* Validation + alert messages → dark glass with semantic edge. */
.ot-futuristic .tutor-alert,
.ot-futuristic .tutor-form-feedback,
.ot-futuristic .tutor-input-feedback {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-inline-start: 3px solid var(--ot-accent) !important;
  border-radius: 12px !important; color: var(--ot-ink-primary) !important;
}
.ot-futuristic .tutor-alert-success { border-inline-start-color: #2ee07a !important; }
.ot-futuristic .tutor-alert-danger,
.ot-futuristic .tutor-alert-warning { border-inline-start-color: #ff8a3d !important; }
.ot-futuristic .tutor-validation-icon,
.ot-futuristic .tutor-icon-circle-mark-line { color: #2ee07a !important; }

/* Upload areas (profile photo / cover / dropzones) → glass chips. */
.ot-futuristic .tutor_pp_uploader,
.ot-futuristic .profile-uploader,
.ot-futuristic .tutor-dropzone,
.ot-futuristic .tutor-cover-uploader,
.ot-futuristic .image-previewer label {
  background: rgba(255,255,255,.05) !important;
  border: 1px dashed rgba(255,210,122,.34) !important;
  color: var(--ot-gold) !important; border-radius: 12px !important;
  transition: border-color var(--ot-dur) var(--ot-ease), background var(--ot-dur) var(--ot-ease) !important;
}
.ot-futuristic .tutor_pp_uploader:hover,
.ot-futuristic .tutor-dropzone:hover { border-color: var(--ot-accent) !important; background: rgba(255,138,42,.08) !important; }

/* Tooltips → dark glass. */
.ot-futuristic .tutor-tooltip,
.ot-futuristic [data-tutor-tooltip]::after,
.ot-futuristic .tooltip-wrap .tooltip-txt {
  background: rgba(13,13,20,.97) !important; color: var(--ot-ink) !important;
  border: 1px solid rgba(255,210,122,.28) !important; border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.5) !important; font-size: .8rem !important;
}

/* Modals (logout / delete confirms etc. on the dashboard) → dark glass. */
.ot-futuristic .tutor-modal .tutor-modal-content,
.ot-futuristic .tutor-modal-content {
  background: linear-gradient(160deg, rgba(26,26,40,.97), rgba(13,13,20,.98)) !important;
  border: 1px solid rgba(255,210,122,.24) !important; border-radius: 20px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.6) !important; color: var(--ot-ink) !important;
}
.ot-futuristic .tutor-modal-overlay { background: rgba(5,5,8,.74) !important; }
.ot-futuristic .tutor-modal-close-o,
.ot-futuristic .tutor-modal-close { background: rgba(255,255,255,.06) !important; color: var(--ot-ink) !important; border-radius: 10px !important; }

/* ---- 5) MOBILE PERFORMANCE — drop stacked backdrop-blur on phones.
   Multiple live-blur glass layers over the animated WebGL cost too much on
   mid-range devices; keep the look with near-opaque surfaces, no blur. ---- */
@media (max-width: 768px) {
  .ot-futuristic .tutor-dashboard-left-menu,
  .ot-futuristic .tutor-dashboard-header,
  .ot-futuristic.ot-dash-sub .tutor-dashboard-content {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .ot-futuristic.ot-dash-sub .tutor-dashboard-content {
    background: linear-gradient(158deg, rgba(22,22,34,.975), rgba(11,11,18,.965)) !important;
  }
  .ot-futuristic .tutor-dashboard-left-menu { background: rgba(16,16,24,.96) !important; }
}