/* ==========================================================================
   vgalediploma.com. Premium Design System & Typography Engine
   Author: Professional CSS Writer
   Theme: Mobile-first, Clean, Quiet, High Legibility, Tabular Numbers
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Design Tokens (:root)
   -------------------------------------------------------------------------- */
:root {
  /* Dark theme (default) */
  --bg:            #0d0f11;
  --surface:       #15191d;
  --surface-2:     #1b2025;
  --border:        #2a3036;
  --border-strong: #384048;
  --text:          #f3f5f6;
  --text-muted:    #a1aab4;
  --text-subtle:   #707a84;
  --accent:        #006cf6;
  --accent-hover:  #1d7ef8;
  --accent-ink:    #ffffff;   /* κείμενο πάνω στο accent */
  --accent-soft:   rgb(0 108 246 / 0.12);
  --success:       #22b889;
  --danger:        #e5575c;
  --warning:       #d9a441;
  --danger-soft:   rgb(229 87 92 / 0.10);
  --warning-soft:  rgb(217 164 65 / 0.10);

  /* Radii - strictly 8px buttons, 12px cards */
  --r-sm: 6px;   /* badges */
  --r-md: 8px;   /* κουμπιά, inputs */
  --r-lg: 12px;  /* κάρτες */
  --r-pill: 999px; /* μόνο για micro badges */

  /* Shadows - none on surfaces, only for dropdowns/modals */
  --shadow-modal: 0 12px 32px rgb(0 0 0 / 0.45);

  /* Motion System Tokens */
  --motion-fast:   150ms;
  --motion-normal: 220ms;
  --motion-slow:   350ms;
  --motion-ease:   cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* Automatic Device Settings: Light theme when system prefers light */
@media (prefers-color-scheme: light) {
  :root {
    --bg:            #fafaf9;
    --surface:       #ffffff;
    --surface-2:     #f4f5f6;
    --border:        #e2e5e8;
    --border-strong: #cbd0d6;
    --text:          #14171a;
    --text-muted:    #5a646e;
    --text-subtle:   #828d97;
    --accent:        #0062eb;
    --accent-hover:  #0052c7;
    --accent-ink:    #ffffff;
    --accent-soft:   rgb(0 98 235 / 0.10);
    --success:       #13946a;
    --danger:        #d9383e;
    --warning:       #b5811d;
    --danger-soft:   rgb(217 56 62 / 0.08);
    --warning-soft:  rgb(181 129 29 / 0.08);
    --shadow-modal:  0 12px 32px rgb(0 0 0 / 0.08);

    color-scheme: light;
  }
}

/* --------------------------------------------------------------------------
   3. Global Resets & Typography
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

section[id],
[id^="section-"] {
  scroll-margin-top: 80px;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

::selection {
  background-color: var(--accent-soft) !important;
  color: var(--text) !important;
}

/* Custom Brand Blue Theme Scrollbars (Global & all scrollable containers) */
html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 10px rgba(0, 108, 246, 0.5);
}

::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
  background: #2563eb;
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Typography Hierarchy: weights only 400, 500, 600 */
h1, .h1 {
  font-size: clamp(26px, 5vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  text-wrap: balance !important;
  margin: 0 0 12px 0;
}

h2, .h2 {
  font-size: clamp(18px, 4vw, 22px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  text-wrap: balance !important;
  margin: 0 0 12px 0;
}

h3, .h3 {
  font-size: clamp(15px, 3.5vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  text-wrap: balance !important;
}

h4, .h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  text-wrap: balance !important;
}

/* Paragraphs & Text Flow: Prevent Orphan words and ensure pretty balanced lines */
p, .section-desc, .mode-card-desc, .tip-desc {
  text-wrap: pretty;
}

.text-balance {
  text-wrap: balance !important;
}

.text-pretty {
  text-wrap: pretty !important;
}

.no-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar,
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
  max-width: 60ch;
  margin: 0 0 16px 0;
}

/* Tabular numerals for numbers, stats, timers */
.font-mono,
[id^="stat-"],
[id^="res-"],
#header-timer,
#header-mistakes,
#quiz-timer-inline,
.tabular-nums,
table td:nth-child(3),
table td:nth-child(4),
table td:nth-child(5) {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* --------------------------------------------------------------------------
   4. Layout: Container, Header, Footer
   -------------------------------------------------------------------------- */
.max-w-6xl {
  max-width: 1120px !important;
}

main {
  width: 100%;
  margin-inline: auto !important;
}

main.max-w-6xl {
  max-width: 1120px !important;
  padding-inline: max(16px, env(safe-area-inset-left)) !important;
  padding-block: 32px !important;
}

@media (min-width: 640px) {
  main.max-w-6xl {
    padding-inline: 24px !important;
    padding-block: 40px !important;
  }
}

@media (min-width: 1024px) {
  main.max-w-6xl {
    padding-inline: 32px !important;
    padding-block: 48px !important;
  }
}

/* Header - Smart auto-hiding with transform: translateY */
header {
  background-color: var(--bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  will-change: transform;
  transition: transform var(--motion-normal) var(--motion-ease) !important;
}

header.header--hidden {
  transform: translateY(-100%) !important;
}

header:focus-within {
  transform: translateY(0) !important;
}

header > div:first-child {
  height: 60px !important;
  max-width: 1120px !important;
  padding-inline: max(16px, env(safe-area-inset-left)) !important;
}

header a img[src*="wordmark"] {
  height: 38px;
  max-height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

header a img[src*="wordmark"] {
  height: 32px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (min-width: 640px) {
  header > div:first-child {
    height: 64px !important;
    padding-inline: 24px !important;
  }

  header a img[src*="wordmark"] {
    height: 40px;
  }
}

footer a img[src*="wordmark"],
aside a img[src*="wordmark"] {
  transition: opacity 0.2s ease;
}

/* Header Logo: 28px square, radius 8px, flat accent bg, white icon */
header .w-10.h-10 {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--r-md) !important;
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .w-10.h-10 svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #ffffff !important;
}

header span.text-base,
header span.sm\:text-lg {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
}

/* Header badge: "ΚΟΚ Β" */
header span.text-\[10px\] {
  font-size: 12px !important;
  font-weight: 500 !important;
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 8px !important;
  color: var(--text-muted) !important;
}

/* Subtitle in header: hidden on mobile */
header p.text-\[11px\] {
  display: none !important;
}
@media (min-width: 768px) {
  header p.text-\[11px\] {
    display: block !important;
    font-size: 12px !important;
    color: var(--text-subtle) !important;
  }
}

/* Navigation items in header: Permanent Desktop Visibility >= 768px */
#header-desktop-nav,
.header-desktop-nav {
  display: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  #header-desktop-nav,
  .header-desktop-nav,
  header nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
}

@media (min-width: 1024px) {
  #header-desktop-nav,
  .header-desktop-nav,
  header nav {
    gap: 8px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .nav-expand-pill {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12.5px !important;
  }
  .nav-expand-pill .nav-expand-label {
    font-size: 12.5px !important;
  }
}

/* --------------------------------------------------------------------------
   Desktop Navigation Links: Modern, Clean & Authentic SaaS (Linear / Vercel style)
   No solid overlay boxes/borders. Soft dust glow backdrop on hover and active.
   -------------------------------------------------------------------------- */
.nav-expand-pill {
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer;
  position: relative;
  box-shadow: none !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

/* Pseudo-element for smooth, hardware-accelerated "dust glow" behind the link */
.nav-expand-pill::before {
  content: "";
  position: absolute;
  inset: -2px 0;
  border-radius: 9999px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 75%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-expand-pill .nav-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--text-muted) !important;
  transition: color 0.2s ease, filter 0.2s ease;
}

.nav-expand-pill .nav-expand-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

/* Label */
.nav-expand-pill .nav-expand-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: inherit !important;
  margin-left: 0 !important;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

/* Hover: No hard box / border overlay, emit soft grey dust glow */
.nav-expand-pill:hover,
.nav-expand-pill:focus-visible {
  color: #f8fafc !important;
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.nav-expand-pill:hover::before,
.nav-expand-pill:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.nav-expand-pill:hover .nav-expand-icon,
.nav-expand-pill:focus-visible .nav-expand-icon {
  color: #f8fafc !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.nav-expand-pill:hover .nav-expand-label,
.nav-expand-pill:focus-visible .nav-expand-label {
  color: #f8fafc !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* Active tab: No hard box / border overlay, emit soft blue dust glow */
.nav-expand-pill.active {
  background: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.nav-expand-pill.active::before {
  background: radial-gradient(ellipse at center, rgba(0, 108, 246, 0.38) 0%, rgba(0, 108, 246, 0.16) 50%, transparent 80%);
  filter: blur(8px);
  opacity: 1;
  transform: scale(1.04);
}

.nav-expand-pill.active .nav-expand-icon {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 8px rgba(0, 108, 246, 0.75));
}

.nav-expand-pill.active .nav-expand-label {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 0 14px rgba(0, 108, 246, 0.65);
}

/* User avatar pill */
.user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  overflow: hidden;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.user-avatar-circle:hover,
.user-avatar-circle.active {
  border-color: var(--accent);
  transform: scale(1.04);
}

.user-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Mobile Animated Hamburger & Slide-in Left Drawer
   -------------------------------------------------------------------------- */
#mobile-drawer-toggle {
  touch-action: manipulation;
}

#mobile-drawer-toggle.is-active .hamburger-bar-top {
  transform: translateY(6px) rotate(45deg);
}

#mobile-drawer-toggle.is-active .hamburger-bar-mid {
  opacity: 0;
  transform: scaleX(0);
}

#mobile-drawer-toggle.is-active .hamburger-bar-bot {
  transform: translateY(-6px) rotate(-45deg);
}

/* Backdrop */
#mobile-sidebar-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Drawer translate */
#mobile-sidebar-drawer.is-open {
  transform: translateX(0) !important;
}

/* Links inside Mobile Drawer */
.mobile-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.mobile-drawer-link:hover,
.mobile-drawer-link:focus-visible {
  background: var(--surface-2);
  color: var(--text);
}

.mobile-drawer-link.active {
  background: rgba(0, 108, 246, 0.08);
  color: var(--text);
  border-color: rgba(0, 108, 246, 0.2);
  font-weight: 600;
}

.mobile-drawer-link-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.15s ease;
  shrink: 0;
}

.mobile-drawer-link:hover .mobile-drawer-link-icon {
  color: var(--text);
}

.mobile-drawer-link.active .mobile-drawer-link-icon {
  color: var(--accent);
}

/* User pill in header */
header .relative.flex.items-center.gap-2\.5 {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 4px 10px !important;
  box-shadow: none !important;
}

header .relative.flex.items-center.gap-2\.5 img {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border-strong) !important;
}

/* Footer */
footer {
  border-top: 1px solid var(--border) !important;
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--text-subtle) !important;
  font-size: 13px !important;
  padding: 32px 24px !important;
  margin-top: auto !important;
}

footer a, footer strong {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   5. Components: Cards, Badges, Stats, Buttons, Inputs
   -------------------------------------------------------------------------- */

/* Cards: Flat surface, 1px border, 12px radius, no glows, no blurs */
.glass-panel,
.glass-card,
section .glass-panel,
section .glass-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 32px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 640px) {
  .glass-panel,
  .glass-card,
  section .glass-panel,
  section .glass-card {
    padding: 20px !important;
  }
}

/* Remove decorative blurs & glowing gradient blobs */
.blur-3xl,
.pointer-events-none.rounded-full,
.animate-ping,
.animate-pulse {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Homepage Architecture: Sections, Hero, Modes, Tips, FAQ
   -------------------------------------------------------------------------- */
.homepage-section {
  margin-top: 56px;
}

@media (min-width: 768px) {
  .homepage-section {
    margin-top: 72px;
  }
}

/* ==========================================================================
   Editorial Homepage & Storytelling Sections (Stop thinking in cards)
   ========================================================================== */

/* =========================================================================
   Rich Dual-Zone Hero Experience (Split Composition Backdrop + Mobile Spot)
   ========================================================================= */
.editorial-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 68px) clamp(20px, 4vw, 48px);
  background-color: #080d1a;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.45);
}

/* Desktop Hero Ambient Backdrop Container */
.hero-desktop-backdrop-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-desktop-backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: opacity 0.5s ease-in-out;
}

/* Organic Gradient Mask: 
   Left 50-60% is deep solid #080d1a / #0b1329 with 100% text contrast, 
   organically fading into the driving subject on the right 40-50% */
.hero-backdrop-gradient-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #080d1a 0%,
    #080d1a 38%,
    rgba(8, 13, 26, 0.95) 52%,
    rgba(8, 13, 26, 0.6) 68%,
    rgba(8, 13, 26, 0.15) 85%,
    transparent 100%
  ),
  linear-gradient(
    180deg,
    rgba(8, 13, 26, 0.4) 0%,
    transparent 20%,
    transparent 80%,
    #080d1a 100%
  );
  pointer-events: none;
}

.hero-editorial-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-editorial-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Mobile Hero Dedicated Focal Spot (Organic Feathered Edges) */
.hero-mobile-spot-wrap {
  width: 100%;
  max-width: 320px;
  margin: 12px auto 20px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mobile-focal-img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
  mask-image: radial-gradient(ellipse at center, black 65%, transparent 98%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 65%, transparent 98%);
  transition: transform 0.3s ease;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-badge-editorial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgb(0 108 246 / 0.25);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.hero-headline-editorial {
  font-size: clamp(38px, 5.5vw, 68px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 20px 0 !important;
  text-wrap: balance;
  will-change: transform, opacity;
  animation: heroTitleReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-headline-editorial > span {
  display: inline;
  background-image: linear-gradient(
    115deg,
    #ffffff 0%,
    #e2e8f0 20%,
    #60a5fa 36%,
    #006cf6 48%,
    #38bdf8 60%,
    #ffffff 78%,
    #cbd5e1 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  will-change: background-position;
  animation: heroGradientSweep 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}

@keyframes heroTitleReveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroGradientSweep {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

.hero-lead-editorial {
  font-size: clamp(16px, 1.8vw, 19px) !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  max-width: 52ch !important;
  margin: 0 0 32px 0 !important;
  text-wrap: pretty;
}

.hero-actions-editorial {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero-btn-primary,
.hero-actions-editorial .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 26px !important;
  background: linear-gradient(135deg, #0284c7 0%, #006cf6 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.hero-btn-primary:hover,
.hero-actions-editorial .btn-primary:hover {
  background: linear-gradient(135deg, #0396e6 0%, #1a7cf7 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.hero-btn-primary:active,
.hero-actions-editorial .btn-primary:active {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: none !important;
}

.hero-btn-secondary,
.hero-actions-editorial .btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 22px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.hero-btn-secondary:hover,
.hero-actions-editorial .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

.hero-btn-secondary:active,
.hero-actions-editorial .btn-secondary:active {
  transform: translateY(0px) scale(0.98) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.hero-disclaimer-editorial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 12px;
}

.hero-disclaimer-editorial svg {
  width: 14px;
  height: 14px;
  color: var(--warning);
  flex-shrink: 0;
}

/* Hero Functional Exam Preview Component */
.hero-preview-frame {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 48px -12px rgb(0 0 0 / 0.4);
  overflow: hidden;
  position: relative;
  transition: transform var(--motion-normal) var(--motion-ease);
}

.hero-preview-header {
  height: 42px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-preview-dots {
  display: flex;
  gap: 6px;
}

.hero-preview-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.hero-preview-body {
  padding: 24px;
}

.hero-preview-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.hero-preview-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

.hero-preview-opt.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

.hero-preview-opt-badge {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-subtle);
  flex-shrink: 0;
}

.hero-preview-opt.is-active .hero-preview-opt-badge {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

/* Section B: Exam Parameters Strip */
.exam-specs-band {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px clamp(16px, 3vw, 28px);
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .specs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.spec-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
}

.spec-val {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.spec-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.spec-detail {
  font-size: 12px;
  color: var(--text-subtle);
}

/* ==========================================================================
   Section C: Pinned Scroll-Driven Storytelling Experience
   ========================================================================== */
.story-section {
  padding: clamp(64px, 10vw, 120px) 0;
  position: relative;
}

.story-header {
  margin-bottom: clamp(40px, 6vw, 64px);
  text-align: left;
}

.story-tag {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
  display: inline-block;
}

.story-title {
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin: 0 0 12px 0 !important;
}

.story-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0;
}

/* Desktop Pinned Layout */
.story-stage-container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
  position: relative;
}

@media (max-width: 860px) {
  .story-stage-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .story-pinned-viewport {
    display: none !important;
  }
}

/* Left Pinned Stage Window (Desktop) */
.story-pinned-viewport {
  position: sticky;
  top: 96px;
  min-height: 420px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 36px -12px rgb(0 0 0 / 0.35);
  overflow: hidden;
}

.story-scenes-wrapper {
  position: relative;
  min-height: 320px;
}

.story-scene {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 300ms var(--motion-ease), transform 300ms var(--motion-ease), visibility 300ms;
  transform: translateY(12px);
}

.story-scene.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transform: translateY(0);
}

/* Right Scroll Narrative Steps */
.story-steps-scroll {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 14vw, 160px);
  padding-bottom: 40px;
}

@media (max-width: 860px) {
  .story-steps-scroll {
    gap: 36px;
    padding-bottom: 0;
  }
}

.story-step-card {
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--motion-normal) var(--motion-ease),
              background-color var(--motion-normal) var(--motion-ease),
              transform var(--motion-normal) var(--motion-ease);
  cursor: pointer;
}

.story-step-card:hover {
  transform: translateY(-2px);
}

.story-step-card.is-step-active {
  border-color: var(--accent);
  background: var(--surface-2);
}

.story-step-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.story-step-spot-thumb {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  transition: transform 0.3s var(--motion-ease);
}

@media (max-width: 640px) {
  .story-step-spot-thumb {
    width: 32px;
    height: 32px;
  }
}

.story-step-card:hover .story-step-spot-thumb {
  transform: translateY(-2px) scale(1.05);
}

.story-scene-spot-header {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-scene-spot-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  flex-shrink: 0;
}

/* Stage Navigation Indicator Dots */
.story-dot {
  background-color: var(--border-strong);
  cursor: pointer;
  border: none;
  padding: 0;
  outline: none;
  opacity: 0.7;
}

.story-dot:hover {
  opacity: 1;
  background-color: var(--text-muted);
}

.story-dot.is-active {
  background-color: var(--accent);
  box-shadow: 0 0 10px rgba(0, 108, 246, 0.6);
  transform: scale(1.25);
  opacity: 1;
}

.story-step-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-step-heading {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 10px 0 !important;
}

.story-step-body {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* Split Showcase Row for Prentzas ID */
.editorial-showcase-split {
  padding: clamp(64px, 8vw, 100px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

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

.prentzas-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgb(0 108 246 / 0.3);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  margin-bottom: 16px;
}

/* Final CTA Section */
.closing-cta-section {
  padding: clamp(70px, 9vw, 130px) 0 clamp(70px, 9vw, 130px) 0;
  text-align: center;
  position: relative;
}

.closing-cta-arena {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 24px);
}

.closing-cta-container {
  position: relative;
  z-index: 5;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.closing-title {
  font-size: clamp(30px, 4.5vw, 48px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin: 0 0 16px 0 !important;
}

.closing-lead {
  font-size: 16px !important;
  color: var(--text-muted) !important;
  margin: 0 0 32px 0 !important;
  max-width: 50ch;
}


/* Redesigned Wide Hero Card */
.hero-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 40px 24px !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 640px) {
  .hero-card {
    padding: 48px 36px !important;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid rgb(34 184 137 / 0.25) !important;
  border-radius: var(--r-sm) !important;
  padding: 4px 10px !important;
  margin-bottom: 16px !important;
}

.hero-title {
  font-size: clamp(28px, 4.5vw, 42px) !important;
  font-weight: 600 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  margin: 0 0 14px 0 !important;
  max-width: 26ch;
  text-wrap: balance;
}

.hero-lead {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  max-width: 58ch !important;
  margin: 0 auto 28px auto !important;
  text-wrap: pretty;
}

/* Compact Horizontal Information Strip */
.hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 28px auto;
  overflow: hidden;
}

.hero-strip-item {
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.hero-strip-item:last-child {
  border-right: none;
}

.hero-strip-val {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.hero-strip-lbl {
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .hero-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-strip-item:nth-child(2) {
    border-right: none;
  }
  .hero-strip-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }
}

/* Hero Actions & Secondary Button */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Subtle Failure Rule Note */
.exam-rule-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid rgb(217 164 65 / 0.25);
  border-radius: var(--r-md);
  padding: 8px 16px;
  text-align: left;
  max-width: 620px;
  margin: 0 auto;
}

.exam-rule-note svg {
  width: 16px;
  height: 16px;
  color: var(--warning);
  flex-shrink: 0;
}

/* Section Header Typography */
.section-header {
  margin-bottom: 24px;
}

.section-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  margin: 0 0 6px 0 !important;
}

.section-desc {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  max-width: 64ch;
}

/* Mode Cards Grid (2 primary columns) */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

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

.mode-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  will-change: transform, border-color;
  transition: transform var(--motion-normal) var(--motion-ease),
              border-color var(--motion-normal) var(--motion-ease),
              background-color var(--motion-normal) var(--motion-ease);
}

@media (max-width: 640px) {
  .mode-card {
    padding: 20px 16px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mode-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }
}

.mode-card:active {
  transform: translateY(0);
}

.mode-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 16px;
  padding: 8px;
}

.mode-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.mode-card-title {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 8px 0 !important;
}

.mode-card-desc {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  margin: 0 0 16px 0 !important;
}

.mode-card-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-subtle);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-card .btn-primary,
.mode-card .btn-secondary {
  margin-top: auto;
  width: 100%;
}

/* Secondary Tools Row: Category Drill & Speed Drill */
.secondary-modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .secondary-modes-grid {
    grid-template-columns: 1fr;
  }
}

.secondary-mode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--motion-normal) var(--motion-ease),
              border-color var(--motion-normal) var(--motion-ease);
}

@media (max-width: 640px) {
  .secondary-mode-card {
    padding: 16px 14px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .secondary-mode-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }
}

.secondary-mode-card:active {
  transform: translateY(0);
}

/* Tips Grid (3 columns) */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

.tip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-normal) var(--motion-ease),
              border-color var(--motion-normal) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .tip-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }
}

.tip-card:active {
  transform: translateY(0);
}

.tip-step {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.tip-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 0 8px 0 !important;
}

.tip-desc {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* Prentzas ID Educational Section */
.prentzas-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color var(--motion-normal) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .prentzas-card:hover {
    border-color: var(--border-strong);
  }
}

@media (min-width: 768px) {
  .prentzas-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 36px;
  }
  .prentzas-card-content {
    max-width: 620px;
  }
}

.prentzas-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.prentzas-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.prentzas-benefit-item svg {
  color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Accessible FAQ Accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--motion-normal) var(--motion-ease),
              background-color var(--motion-normal) var(--motion-ease);
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--border-strong);
}

.faq-item summary {
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
  transition: color var(--motion-fast) var(--motion-ease);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--text);
}

.faq-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
  transition: transform var(--motion-normal) var(--motion-ease),
              color var(--motion-normal) var(--motion-ease);
  flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-answer {
  padding: 0 24px 20px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Scroll-Reveal Entrance Animation Classes
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
  transition: opacity var(--motion-slow) var(--motion-ease),
              transform var(--motion-slow) var(--motion-ease);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Mode card titles */
#view-modes h4 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}

#view-modes p.text-xs {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--text-muted) !important;
}

/* Stat Cards (30 / 35' / ≤1 / Άμεση) */
.stat-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px) {
  .stat-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .stat-grid-4 {
    gap: 8px !important;
  }
}

.stat-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.stat-num {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
}

.stat-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

.stat-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-subtle) !important;
}

/* Question Navigator Grid (36x36px cells) */
.quiz-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 6px;
  margin-block: 16px;
}

@media (max-width: 480px) {
  .quiz-nav-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }
  .quiz-nav-cell {
    height: 40px !important;
    min-height: 40px !important;
  }
}

.quiz-nav-cell {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

.quiz-nav-cell.current {
  border-color: var(--accent) !important;
  color: var(--text) !important;
  background: var(--surface-2) !important;
}

.quiz-nav-cell.correct {
  border-color: var(--success) !important;
  background: rgb(62 194 143 / 0.10) !important;
  color: var(--success) !important;
  font-weight: 600 !important;
}

.quiz-nav-cell.wrong {
  border-color: var(--danger) !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  font-weight: 600 !important;
}

.quiz-nav-cell.answered {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.grid.grid-cols-2.lg\:grid-cols-4,
.grid.grid-cols-2.sm\:grid-cols-4 {
  gap: 12px !important;
}

@media (max-width: 480px) {
  .grid.grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2.sm\:grid-cols-4 {
    gap: 8px !important;
  }
}

.grid.grid-cols-2.lg\:grid-cols-4 > div,
.grid.grid-cols-2.sm\:grid-cols-4 > div {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: none !important;
}

/* Numbers inside stat cards: 24px, 600, tabular-nums, single --text color */
[id^="stat-total-"],
[id^="stat-pass-"],
[id^="stat-active-"],
[id^="stat-tests-"],
[id^="res-correct"],
[id^="res-mistakes"],
[id^="res-time"],
[id^="res-percent"] {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* Stat card labels */
.grid.grid-cols-2.lg\:grid-cols-4 > div > span:first-child,
.grid.grid-cols-2.sm\:grid-cols-4 > div > div:first-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

/* Stat card sub-labels */
.grid.grid-cols-2.lg\:grid-cols-4 > div > div[class*="text-\[11px\]"],
.grid.grid-cols-2.sm\:grid-cols-4 > div > div[class*="text-\[11px\]"] {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-subtle) !important;
}

.grid.grid-cols-2.lg\:grid-cols-4 > div > div[class*="text-\[11px\]"] a {
  color: var(--text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Primary Button Specification */
button[class*="bg-gradient-to-r"],
button[class*="from-emerald-"],
button[class*="from-indigo-"],
button[class*="from-amber-"],
button[class*="from-rose-"],
#btn-next,
button.btn-primary,
a.btn-primary,
.btn-primary {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: var(--r-md) !important;
  background: var(--accent) !important;
  background-image: none !important;
  color: var(--accent-ink) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  line-height: 1 !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  will-change: transform, background-color;
  transition: background-color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease) !important;
}

#btn-next.btn-danger,
#btn-next.bg-danger {
  background: var(--danger) !important;
  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  #btn-next.btn-danger:hover,
  #btn-next.bg-danger:hover {
    background: #d43f45 !important;
    transform: translateY(-1px) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  button[class*="bg-gradient-to-r"]:hover,
  #btn-next:hover,
  button.btn-primary:hover,
  a.btn-primary:hover,
  .btn-primary:hover {
    background: var(--accent-hover) !important;
    background-image: none !important;
    transform: translateY(-1px) !important;
  }
}

button[class*="bg-gradient-to-r"]:active,
#btn-next:active,
button.btn-primary:active,
a.btn-primary:active,
.btn-primary:active {
  transform: translateY(1px) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

button:disabled,
a.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Arrow inside buttons moves 2px right on hover */
button svg,
a svg,
.btn-primary svg,
.btn-secondary svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  transition: transform var(--motion-fast) var(--motion-ease) !important;
}

@media (hover: hover) and (pointer: fine) {
  button:hover svg,
  a:hover svg,
  .btn-primary:hover svg,
  .btn-secondary:hover svg {
    transform: translateX(2px) !important;
  }
}

/* Secondary Buttons */
button[class*="bg-slate-800"]:not(.hidden),
#btn-practice-exam-mistakes:not(.hidden),
button.btn-secondary:not(.hidden),
a.btn-secondary:not(.hidden),
.btn-secondary:not(.hidden) {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: var(--r-md) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border-strong) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  will-change: transform, background-color, border-color;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease) !important;
}

/* Ensure buttons with font size modifiers keep their compact heights */
a.btn-secondary.text-xs,
button.btn-secondary.text-xs,
.btn-secondary.text-xs {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  gap: 6px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

a.btn-primary.text-xs,
button.btn-primary.text-xs,
.btn-primary.text-xs {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  gap: 6px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Ensure all buttons, links, icons and spans stay strictly inline on a single line */
.btn-primary,
.btn-secondary,
.hero-btn-primary,
.hero-btn-secondary,
.feed-action-btn,
button.btn-primary,
button.btn-secondary,
a.btn-primary,
a.btn-secondary,
#btn-next:not(.hidden),
#btn-practice-exam-mistakes:not(.hidden),
#btn-practice-all-mistakes:not(.hidden),
#btn-start-mistakes:not(.hidden),
#btn-share-score-feed:not(.hidden),
#btn-follow-user:not(.hidden) {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.btn-primary > *,
.btn-secondary > *,
.hero-btn-primary > *,
.hero-btn-secondary > *,
.feed-action-btn > * {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.btn-primary svg,
.btn-secondary svg,
.hero-btn-primary svg,
.hero-btn-secondary svg,
.feed-action-btn svg,
.btn-primary i,
.btn-secondary i,
.hero-btn-primary i,
.hero-btn-secondary i,
.feed-action-btn i,
button svg,
button i {
  display: inline-block !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

/* Secondary Mode Card (Category Select + Button) Robust Inline Protection */
.secondary-mode-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.secondary-mode-card select {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
}

.secondary-mode-card button,
.secondary-mode-card .btn-secondary,
.secondary-mode-card .btn-primary {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile responsive padding and sizing for all action buttons */
@media (max-width: 640px) {
  button[class*="bg-gradient-to-r"],
  button[class*="from-emerald-"],
  button[class*="from-indigo-"],
  button[class*="from-amber-"],
  button[class*="from-rose-"],
  #btn-next,
  button.btn-primary:not(.text-xs):not([class*="!text-xs"]),
  a.btn-primary:not(.text-xs):not([class*="!text-xs"]),
  .btn-primary:not(.text-xs):not([class*="!text-xs"]),
  button[class*="bg-slate-800"],
  #btn-practice-exam-mistakes,
  button.btn-secondary:not(.text-xs):not([class*="!text-xs"]),
  a.btn-secondary:not(.text-xs):not([class*="!text-xs"]),
  .btn-secondary:not(.text-xs):not([class*="!text-xs"]) {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    gap: 6px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  button[class*="bg-slate-800"]:hover,
  #btn-practice-exam-mistakes:hover,
  button.btn-secondary:hover,
  a.btn-secondary:hover,
  .btn-secondary:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    transform: translateY(-1px) !important;
  }
}

button[class*="bg-slate-800"]:active,
#btn-practice-exam-mistakes:active,
button.btn-secondary:active,
a.btn-secondary:active,
.btn-secondary:active {
  transform: translateY(1px) !important;
}

/* Header Auth Buttons (Σύνδεση & Create Account) */
.header-btn-login,
.header-btn-register {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: var(--r-md) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--motion-fast) var(--motion-ease) !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .header-btn-login,
  .header-btn-register {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

/* Σύνδεση (Clean secondary ghost pill) */
.header-btn-login {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

.header-btn-login:hover {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.header-btn-login:active {
  transform: translateY(0);
  background: var(--surface-2) !important;
}

/* Create Account (Vibrant solid accent button) */
.header-btn-register {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 1px 3px rgba(0, 108, 246, 0.25) !important;
}

.header-btn-register:hover {
  background: var(--accent-hover) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 108, 246, 0.35) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.header-btn-register:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 108, 246, 0.2) !important;
}

/* Legacy Prentzas ID Login Link in Banners */
a[href*="/auth/start"]:not(.header-btn-login):not(.header-btn-register) {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-2) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color .15s ease-out, border-color .15s ease-out !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

a[href*="/auth/start"]:not(.header-btn-login):not(.header-btn-register):hover {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* User Avatar Circle in Header (Clean, minimal, no clutter) */
.user-avatar-circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 9999px !important;
  border: 1.5px solid var(--border-strong) !important;
  background: var(--surface-2) !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  will-change: transform, border-color, box-shadow;
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease) !important;
}

.user-avatar-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 9999px !important;
  display: block !important;
}

.user-avatar-circle span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
  .user-avatar-circle:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    transform: scale(1.05) !important;
  }
}

.user-avatar-circle:active {
  transform: scale(0.95) !important;
}

.user-avatar-circle.active,
.user-avatar-circle:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}

/* Warning boxes (Κανόνας Αποτυχίας / Login Alerts) */
.p-3\.5.rounded-2xl.bg-indigo-950\/40,
#res-sync-notice,
.warning-box {
  background: var(--warning-soft) !important;
  border: 1px solid rgb(217 164 65 / 0.25) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-3\.5.rounded-2xl.bg-indigo-950\/40 strong,
.warning-box strong {
  color: var(--warning) !important;
  font-weight: 600 !important;
}

.p-3\.5.rounded-2xl.bg-indigo-950\/40 svg,
.warning-box svg {
  color: var(--warning) !important;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
}

/* Inputs & Selects */
select,
input {
  height: 40px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  padding: 0 12px;
  font-size: 16px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: border-color .15s ease-out, box-shadow .15s ease-out !important;
}

/* Ensure inputs with left search/filter icons have proper left clearance */
input[class*="pl-10"],
input.pl-10 {
  padding-left: 2.6rem !important;
}

input[class*="pl-8"],
input.pl-8 {
  padding-left: 2.25rem !important;
}

input[class*="pl-11"],
input.pl-11 {
  padding-left: 2.85rem !important;
}

@media (min-width: 640px) {
  select,
  input {
    font-size: 14px !important;
  }
}

select:focus,
input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   6. Examination Screen (Quiz Experience)
   -------------------------------------------------------------------------- */
#view-quiz {
  max-width: 720px !important;
  margin-inline: auto !important;
}

/* Top Bar: Question 1/30, Timer, Mistakes */
#view-quiz > div:first-child {
  min-height: 44px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#quiz-mode-pill {
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px 8px !important;
}

#quiz-question-counter {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
}

#header-timer {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
}

#header-mistakes {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  font-variant-numeric: tabular-nums !important;
}

#header-mistakes.text-rose-400 {
  color: var(--danger) !important;
  font-weight: 600 !important;
}

/* Progress bar: 4px height, flat border background, flat accent fill with clean clearance */
#view-quiz .w-full.bg-\[var\(--surface-2\)\],
#view-quiz .w-full.bg-slate-800\/80 {
  height: 6px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important;
  margin-top: 10px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
  clear: both !important;
}

#quiz-progress-bar {
  background: var(--accent) !important;
  background-image: none !important;
  height: 100% !important;
  border-radius: 9999px !important;
  transition: width .25s ease-out !important;
}

/* Quiz Question Title */
#quiz-question-title {
  font-size: clamp(18px, 2.4vw, 20px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  margin-bottom: 20px !important;
  overflow-wrap: anywhere;
}

#quiz-category-tag {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-subtle) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 8px !important;
}

/* Question Images */
#quiz-image-box {
  margin-block: 16px !important;
}

#quiz-image-box > div {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  box-shadow: none !important;
}

#quiz-image-el {
  border-radius: var(--r-sm) !important;
  max-width: 100% !important;
}

#quiz-mode-pill {
  display: none !important;
}

@media (min-width: 640px) {
  #quiz-mode-pill {
    display: inline-block !important;
  }
}

/* Answer Choices List */
#quiz-answers-list {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

/* Individual Answer Option Button */
#quiz-answers-list button,
.quiz-choice-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 14px 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out !important;
}

#quiz-answers-list button *,
.quiz-choice-btn * {
  white-space: normal;
}

#quiz-answers-list button .quiz-choice-text,
.quiz-choice-btn .quiz-choice-text,
#quiz-answers-list button > div:last-child {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

@media (hover: hover) {
  #quiz-answers-list button:hover,
  .quiz-choice-btn:hover {
    border-color: var(--border-strong) !important;
    background: var(--surface-2) !important;
  }
}

/* Answer Letter Index Box (Α, Β, Γ) */
#quiz-answers-list [id^="badge-letter-"],
.quiz-choice-badge {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  flex-shrink: 0 !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
}

/* Correct Answer State */
#quiz-answers-list button.selected-correct,
.quiz-choice-btn.selected-correct,
#quiz-answers-list button.bg-emerald-500\/15,
#quiz-answers-list button.bg-emerald-500\/10 {
  border: 1px solid var(--success) !important;
  background: rgb(62 194 143 / 0.12) !important;
  color: var(--text) !important;
}

#quiz-answers-list button.selected-correct [id^="badge-letter-"],
.quiz-choice-btn.selected-correct .quiz-choice-badge,
#quiz-answers-list button.bg-emerald-500\/15 [id^="badge-letter-"],
#quiz-answers-list button.bg-emerald-500\/10 [id^="badge-letter-"] {
  background: var(--success) !important;
  color: #04140d !important;
  border-color: var(--success) !important;
  font-weight: 700 !important;
}

/* Incorrect Answer State */
#quiz-answers-list button.selected-wrong,
.quiz-choice-btn.selected-wrong,
#quiz-answers-list button.bg-rose-500\/15 {
  border: 1px solid var(--danger) !important;
  background: rgba(244, 63, 94, 0.12) !important;
  color: var(--text) !important;
}

#quiz-answers-list button.selected-wrong [id^="badge-letter-"],
.quiz-choice-btn.selected-wrong .quiz-choice-badge,
#quiz-answers-list button.bg-rose-500\/15 [id^="badge-letter-"] {
  background: var(--danger) !important;
  color: #ffffff !important;
  border-color: var(--danger) !important;
  font-weight: 700 !important;
}

/* Action / Feedback Bar */
#quiz-action-bar {
  border-top: 1px solid var(--border) !important;
  padding-top: 16px !important;
}

@media (max-width: 640px) {
  #quiz-action-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom)) 0;
    margin-inline: -20px;
    padding-inline: 20px;
    z-index: 30;
  }
}

/* Feedback Label */
#quiz-feedback-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

#quiz-feedback-label .text-emerald-400 {
  color: var(--success) !important;
}

#quiz-feedback-label .text-rose-400 {
  color: var(--danger) !important;
}

/* --------------------------------------------------------------------------
   7. Results Screen
   -------------------------------------------------------------------------- */
#view-results {
  max-width: 720px !important;
  margin-inline: auto !important;
}

#view-results #result-headline {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}

#view-results #result-icon-box {
  display: none !important; /* Remove emoji icon box per brief */
}

#result-tag {
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  padding: 3px 8px !important;
  display: inline-block;
  margin-bottom: 12px !important;
}

#result-tag.bg-emerald-500\/10 {
  background: rgb(62 194 143 / 0.12) !important;
  color: var(--success) !important;
  border: 1px solid rgb(62 194 143 / 0.25) !important;
}

#result-tag.bg-rose-500\/10 {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid rgb(229 87 92 / 0.25) !important;
}

/* Question Review List */
#review-list > div {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 8px !important;
}

#review-list > div.border-rose-500\/30 {
  border-color: rgb(229 87 92 / 0.35) !important;
}

/* --------------------------------------------------------------------------
   8. Dashboard: Tables, Charts & Mistake Bank
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

table thead th {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-subtle) !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 10px 12px !important;
}

table tbody tr {
  height: 48px !important;
  border-bottom: 1px solid var(--border) !important;
  transition: background-color .12s ease-out !important;
}

table tbody tr:hover {
  background-color: var(--surface-2) !important;
}

table tbody td {
  padding: 10px 12px !important;
  color: var(--text) !important;
}

table td:nth-child(3),
table td:nth-child(4),
table td:nth-child(5) {
  text-align: right !important;
}

table thead th:nth-child(3),
table thead th:nth-child(4),
table thead th:nth-child(5) {
  text-align: right !important;
}

/* Status Badges in Table */
table span.bg-emerald-500\/10 {
  background: rgb(62 194 143 / 0.12) !important;
  color: var(--success) !important;
  border: 1px solid rgb(62 194 143 / 0.20) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

table span.bg-rose-500\/10 {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid rgb(229 87 92 / 0.20) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Overflow wrapper for tables */
.overflow-x-auto {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Mistake Notebook Cards */
#mistakes-cards-container > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
}

#mistakes-cards-container .bg-emerald-500\/10 {
  background: rgb(62 194 143 / 0.08) !important;
  border: 1px solid rgb(62 194 143 / 0.20) !important;
  color: var(--text) !important;
  border-radius: var(--r-md) !important;
}

/* --------------------------------------------------------------------------
   9. Modals (Zoom & Popups)
   -------------------------------------------------------------------------- */
#image-modal {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#image-modal > div {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-modal) !important;
}

#image-modal button {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--r-sm) !important;
}

#image-modal button:hover {
  color: var(--text) !important;
}

/* --------------------------------------------------------------------------
   10. Motion, Reduced-Motion & Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }

  header,
  header.header--hidden {
    transform: none !important;
  }

  .story-pinned-viewport {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   11. Extra Global Responsive & Text Structure Polish
   -------------------------------------------------------------------------- */
/* Prevent orphan lines and awkward wrapping on badges, pills, metrics and titles */
.kpi-title,
.table-header,
.badge,
.tag,
.chip,
.tab-btn,
.nav-link {
  white-space: nowrap;
}

/* Ensure nice fluid wrapping for long Greek headings without splitting single orphan words */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

p, .desc, .lead {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

/* --------------------------------------------------------------------------
   12. Community Feed Timeline & Streamline Social Interface
   -------------------------------------------------------------------------- */
.feed-timeline-container {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Unified Feed Stream Surface */
.feed-stream {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Individual Post Item in Stream */
.feed-post-item {
  position: relative;
  padding: 20px 22px;
  background: transparent;
  transition: background-color var(--motion-fast) var(--motion-ease);
}

.feed-post-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.feed-post-item:hover {
  background-color: rgb(255 255 255 / 0.015);
}

@media (prefers-color-scheme: light) {
  .feed-post-item:hover {
    background-color: rgb(0 0 0 / 0.02);
  }
}

.feed-post-item.post-highlight {
  background-color: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Feed Composer */
.feed-composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.feed-composer:focus-within {
  border-color: var(--border-strong);
}

/* Feed Minimal Tabs Navigation */
.feed-tabs-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.feed-tab-button {
  position: relative;
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease);
}

.feed-tab-button:hover {
  color: var(--text);
}

.feed-tab-button.active {
  color: var(--text);
  font-weight: 600;
}

.feed-tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* Post Typography & Header */
.feed-post-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  transition: color var(--motion-fast) var(--motion-ease);
}

.feed-post-author:hover {
  color: var(--accent);
}

.feed-post-meta {
  font-size: 12px;
  color: var(--text-subtle);
  line-height: 1.2;
}

.feed-post-content {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
  word-break: break-word;
}

/* Post Action Row */
.feed-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.feed-action-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}

.feed-action-btn:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

/* Share button success bounce & color animation */
@keyframes sharePulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.18); }
  50% { transform: scale(0.92); }
  75% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.feed-action-btn.active-shared {
  color: var(--accent) !important;
  background-color: var(--accent-soft) !important;
  animation: sharePulse 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feed-action-btn.active-shared i,
.feed-action-btn.active-shared svg {
  animation: sharePulse 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feed-action-btn.active-like {
  color: #3b82f6 !important;
  background-color: rgb(59 130 246 / 0.10) !important;
}

.feed-action-btn.active-dislike {
  color: var(--danger) !important;
  background-color: var(--danger-soft) !important;
}

.feed-action-btn i,
.feed-action-btn svg {
  font-size: 13px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Comment Action Buttons (Like / Reply) */
.comment-action-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-ease);
  user-select: none;
}

.comment-action-btn:hover {
  color: var(--text);
  background-color: var(--surface);
  border-color: var(--border);
}

.comment-action-btn.active-like {
  color: #3b82f6 !important;
  background-color: rgb(59 130 246 / 0.12) !important;
  border-color: rgb(59 130 246 / 0.25) !important;
}

.comment-action-btn.active-like i {
  color: #3b82f6 !important;
  animation: commentLikePulse 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.comment-action-btn i,
.comment-action-btn svg {
  font-size: 11px !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}

@keyframes commentLikePulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Restrained Embedded Cards */
.embedded-preview-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.embedded-preview-box:hover {
  border-color: var(--border-strong);
}

/* Minimal Share Toast Notification */
.share-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 180ms ease, transform 180ms ease;
}

.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .feed-post-item,
  .feed-action-btn,
  .feed-tab-button,
  .embedded-preview-box,
  .share-toast {
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .feed-post-item {
    padding: 16px 14px;
  }
  .feed-composer {
    padding: 14px 14px;
  }
}

/* ==========================================================================
   GLOBAL ZERO-WRAP & ICON STABILITY ENFORCEMENT
   Prevents text and SVG / FontAwesome icons inside buttons, badges, links,
   and action elements from ever wrapping onto separate lines.
   ========================================================================== */
.btn-primary,
.btn-secondary,
.hero-btn-primary,
.hero-btn-secondary,
.feed-action-btn,
.comment-action-btn,
button[onclick*="startCategoryQuiz"],
button[id^="btn-"]:not(.quiz-choice-btn):not([id*="answer-btn"]),
a[class*="btn-"] {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.btn-primary svg,
.btn-primary i,
.btn-secondary svg,
.btn-secondary i,
.hero-btn-primary svg,
.hero-btn-primary i,
.hero-btn-secondary svg,
.hero-btn-secondary i,
.feed-action-btn svg,
.feed-action-btn i,
.comment-action-btn svg,
.comment-action-btn i,
button[onclick*="startCategoryQuiz"] svg,
button[onclick*="startCategoryQuiz"] i,
a[class*="btn-"] svg,
a[class*="btn-"] i {
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  pointer-events: none;
}

.btn-primary > span,
.btn-secondary > span,
.hero-btn-primary > span,
.hero-btn-secondary > span,
button[onclick*="startCategoryQuiz"] > span {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Ensure the category select input and start button stay neatly aligned */
.secondary-mode-card .flex-col.sm\:flex-row {
  flex-wrap: nowrap !important;
}

/* Dialog scale-in pop animation */
@keyframes dialogPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-dialog-pop {
  animation: dialogPop 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ensure utility hidden class overrides button display rules without stomping responsive utilities */
.hidden:not([class*="sm:"]):not([class*="md:"]):not([class*="lg:"]):not([class*="xl:"]),
#btn-practice-exam-mistakes.hidden,
#btn-practice-all-mistakes.hidden,
#btn-start-mistakes.hidden,
#btn-share-score-feed.hidden,
#btn-next.hidden,
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Mascot Illustrations & Transparent Alpha Graphics
   -------------------------------------------------------------------------- */
.mascot-result-img {
  width: 140px;
  height: 105px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .mascot-result-img {
    width: 170px;
    height: 128px;
    margin-bottom: 16px;
  }
}

.mascot-clean-slate {
  width: 110px;
  height: 110px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
  transition: transform 0.3s ease;
}

.mascot-clean-slate:hover {
  transform: translateY(-2px) scale(1.03);
}

.mascot-keys-guest {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}

.mascot-podium-header {
  width: 130px;
  height: auto;
  max-height: 95px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

@media (min-width: 640px) {
  .mascot-podium-header {
    width: 160px;
    max-height: 110px;
  }
}

.mascot-podium-header:hover {
  transform: translateY(-3px) scale(1.02);
}

.mascot-cta-banner {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

@media (min-width: 640px) {
  .mascot-cta-banner {
    width: 110px;
    height: 110px;
  }
}

/* Ensure responsive display utilities always respect media queries */
@media (min-width: 640px) {
  .sm\:block { display: block !important; }
  .sm\:inline { display: inline !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:flex { display: flex !important; }
  .sm\:hidden { display: none !important; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex !important; }
  .md\:block { display: block !important; }
  .md\:inline { display: inline !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:hidden { display: none !important; }
}