/* ============================================================
   CRUISE TRAINING PLATFORM — Warm Friendly Design
   Inspired by PlugPro UI — warm orange, cream, welcoming
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Primary — Warm Orange */
  --primary:       #F5A623;
  --primary-dark:  #D4891C;
  --primary-light: #FEF3DC;
  --primary-pale:  #FFFAF2;

  /* Status Colors */
  --green:         #34C759;
  --green-light:   #E8FAF0;
  --red:           #FF3B30;
  --red-light:     #FFF0EF;
  --blue:          #007AFF;
  --blue-light:    #EAF2FF;
  --teal:          #32ADE6;
  --teal-light:    #E5F5FE;
  --purple:        #AF52DE;
  --purple-light:  #F5EEFF;
  --indigo:        #5856D6;

  /* Semantic aliases */
  --clr-primary:    var(--primary);
  --clr-primary-lt: var(--primary-light);
  --clr-primary-dk: var(--primary-dark);
  --clr-primary-lt2:var(--primary-pale);
  --clr-accent:     var(--teal);
  --clr-success:    var(--green);
  --clr-success-lt: var(--green-light);
  --clr-danger:     var(--red);
  --clr-danger-lt:  var(--red-light);
  --clr-warning:    #FF9500;
  --clr-warning-lt: #FFF4E0;
  --clr-info:       var(--blue);
  --clr-info-lt:    var(--blue-light);
  --clr-secondary:  #9A8878;
  --clr-secondary-lt:#F5EDE0;

  /* Warm Backgrounds */
  --clr-bg:             #FBF5EA;
  --clr-surface:        #FFFFFF;
  --clr-surface-2:      #F9F1E3;
  --clr-surface-raised: #F0E8D8;
  --clr-border:         rgba(180,140,90,.14);
  --clr-separator:  rgba(180,140,90,.10);
  --clr-text:       #1A1208;
  --clr-text-muted: #9A8878;
  --clr-text-tertiary: #C8B89A;

  /* Layout */
  --sidebar-w:    260px;
  --topnav-h:     58px;
  --bottom-nav-h: 84px;

  /* Radii */
  --radius:    20px;
  --radius-sm:  14px;
  --radius-xs:   8px;
  --radius-pill: 100px;

  /* Shadows — warm, subtle */
  --shadow-xs:  0 2px 8px rgba(180,120,40,.06);
  --shadow:     0 4px 20px rgba(180,120,40,.10);
  --shadow-md:  0 8px 32px rgba(180,120,40,.14);
  --shadow-lg:  0 20px 60px rgba(180,120,40,.18);
  --shadow-card:0 2px 12px rgba(180,120,40,.08);

  /* Motion */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --transition:  .2s var(--ease-out);
  --transition-spring: .4s var(--ease-spring);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; opacity: .8; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; }

/* ── Top Navigation ─────────────────────────────────────── */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topnav-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: .5px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.1rem;
  z-index: 1000;
}

.topnav-left { display: flex; align-items: center; gap: .6rem; }
.topnav-right { display: flex; align-items: center; gap: .5rem; }

.brand {
  display: flex; align-items: center; gap: .55rem;
  color: var(--clr-text);
  font-size: .97rem; font-weight: 800;
  letter-spacing: -.03em;
}
.brand .fa {
  color: var(--primary);
  font-size: 1rem;
  background: var(--primary-light);
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.brand:hover { opacity: 1; }

.sidebar-toggle {
  background: var(--clr-surface-2);
  border: none; cursor: pointer;
  color: var(--clr-text-muted);
  font-size: .9rem;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.sidebar-toggle:hover   { background: var(--primary-light); color: var(--primary); }
.sidebar-toggle:active  { transform: scale(.92); }

/* User chip */
.user-chip {
  display: flex; align-items: center; gap: .45rem;
  cursor: pointer; position: relative;
  padding: .28rem .65rem .28rem .28rem;
  border-radius: var(--radius-pill);
  background: var(--clr-surface-2);
  transition: background var(--transition);
}
.user-chip:hover { background: var(--primary-light); }
.user-chip .user-name {
  color: var(--clr-text); font-size: .82rem; font-weight: 600;
  max-width: 120px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.user-chip .fa-chevron-down { color: var(--clr-text-muted); font-size: .65rem; }

.avatar-sm {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid rgba(180,120,40,.15);
}
.avatar-placeholder {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .73rem; font-weight: 800;
}

.role-tag {
  font-size: .6rem; font-weight: 700;
  padding: .12rem .5rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: .05em;
}
.role-admin     { background: rgba(175,82,222,.15); color: var(--purple); }
.role-observer  { background: rgba(50,173,230,.15); color: var(--teal); }
.role-candidate { background: var(--primary-light); color: var(--primary-dark); }
.role-guest     { background: var(--clr-surface-2); color: var(--clr-secondary); }

/* Dropdown */
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px); right: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  overflow: hidden;
  animation: dropIn .22s var(--ease-spring);
}
@keyframes dropIn {
  from { opacity:0; transform: scale(.94) translateY(-8px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.user-chip.open .user-dropdown { display: block; }
.dropdown-info { padding: .9rem 1rem; }
.dropdown-info strong { display: block; font-size: .9rem; color: var(--clr-text); font-weight: 700; }
.dropdown-info small  { color: var(--clr-text-muted); font-size: .75rem; }
.dropdown-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; font-size: .88rem;
  color: var(--clr-text);
  transition: background var(--transition);
}
.dropdown-item:hover { background: var(--clr-surface-2); }
.dropdown-item.text-danger { color: var(--red); }
hr { border: none; border-top: .5px solid var(--clr-separator); }

/* ── Layout ─────────────────────────────────────────────── */
.layout {
  display: flex;
  margin-top: var(--topnav-h);
  flex: 1;
  min-height: calc(100vh - var(--topnav-h));
}

/* ── Sidebar (desktop) ──────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: .5px solid var(--clr-separator);
  min-height: 100%;
  flex-shrink: 0;
  transition: transform var(--transition), width var(--transition);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar.collapsed { width: 0; overflow: hidden; }

.sidebar-inner { padding: 1.25rem 0 6rem; }

.nav-section { margin-bottom: .5rem; }
.nav-label {
  display: block; padding: .7rem 1.2rem .25rem;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--clr-text-muted);
}

.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; margin: .1rem .75rem;
  color: var(--clr-text-muted);
  font-size: .88rem; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.nav-item .fa {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  background: var(--clr-surface-2);
  color: var(--clr-secondary);
  transition: all var(--transition);
  flex-shrink: 0;
}
.nav-item:hover {
  background: var(--primary-pale);
  color: var(--clr-text);
}
.nav-item:hover .fa { color: var(--primary); background: var(--primary-light); }
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.nav-item.active .fa {
  background: var(--primary);
  color: #fff;
}
.nav-item:hover { text-decoration: none; }

/* ── Main Content ───────────────────────────────────────── */
.main-content {
  flex: 1;
  padding: 1.5rem 1.25rem 6rem;
  min-width: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* ── iOS Bottom Tab Bar ──────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-top: .5px solid var(--clr-border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav-inner {
  display: flex; justify-content: space-around;
  max-width: 500px; margin: 0 auto;
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 4px 12px;
  color: var(--clr-text-muted);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color var(--transition), transform var(--transition);
  position: relative; min-width: 52px;
}
.bottom-nav-item .fa {
  font-size: 1.3rem;
  transition: transform var(--transition-spring), color var(--transition);
}
.bottom-nav-item.active { color: var(--primary); }
.bottom-nav-item.active .fa { transform: scale(1.1); }
.bottom-nav-item:active .fa { transform: scale(.88); }
.bottom-nav-item .nav-badge {
  position: absolute; top: 2px; left: calc(50% + 6px);
  background: var(--red); color: #fff;
  font-size: .5rem; font-weight: 700;
  min-width: 14px; height: 14px;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}

/* ── Page Header ─────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .6rem;
}
.page-title {
  font-size: 1.55rem; font-weight: 800;
  letter-spacing: -.04em; color: var(--clr-text);
  line-height: 1.1;
}
.page-title small {
  font-size: .82rem; font-weight: 400;
  color: var(--clr-text-muted); margin-left: .4rem;
  letter-spacing: 0;
}
.page-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
/* ── Dashboard Cards ───────────────────────────────────── */

.card {
  background: rgba(255,255,255,.92);
  border-radius: 25px;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  margin-bottom: 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
}

.card-header {
  padding: 1.35rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.card-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 850;
  color: #171717;
  letter-spacing: -.04em;
}

.card-title .fa {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff4df;
  color: #ff9500 !important;
  font-size: 1rem;
  flex-shrink: 0;
}

.card-body {
  padding: 1.25rem 1.4rem;
}

/* Button inside card header */
.card-header .btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  background: #fff3df;
  color: #171717;
  border: 1px solid rgba(120,80,20,.08);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
  font-size: .95rem;
  font-weight: 800;
}

/* ── Clean Dashboard Table ─────────────────────────────── */

.table-responsive {
  width: 100%;
  overflow-x: hidden;
}

.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.table th {
  background: #fff4e8;
  color: #9b8b7c;
  padding: 1rem 1.4rem;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(15,23,42,.06);
  color: #8c7f73;
  font-size: .95rem;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table td a {
  color: #ff9500;
  font-weight: 700;
}

.table td small {
  color: #9ca3af;
  font-size: .85rem;
}

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

/* Чтобы на маленьком экране не ломалось */
@media (max-width: 768px) {
  .card-header {
    padding: 1.1rem 1.15rem;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .table th,
  .table td {
    padding: .9rem 1.1rem;
  }

  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(4),
  .table td:nth-child(4) {
    display: none;
  }
}
.dashboard-two-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  width: 100%;
}

.dashboard-two-grid .card {
  min-width: 0;
  width: 100%;
}

.dashboard-two-grid .card-header {
  min-width: 0;
}

.dashboard-two-grid .card-title {
  min-width: 0;
  flex: 1;
  font-size: 1.7rem;
  line-height: 1.05;
}

.dashboard-two-grid .card-header .btn {
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-two-grid .table-responsive {
  width: 100%;
  overflow-x: auto;
}

.dashboard-two-grid .table {
  min-width: 520px;
}

/* mobile */
@media (max-width: 900px) {
  .dashboard-two-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-two-grid .table {
    min-width: 100%;
  }
}
/* ── Hero / Welcome Banner ──────────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, var(--primary) 0%, #E8870A 100%);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-banner::before {
  content: '';
  position: absolute;
  top: -30px; right: -20px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
}
.hero-banner::after {
  content: '';
  position: absolute;
  bottom: -40px; right: 60px;
  width: 100px; height: 100px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.hero-tag {
  display: inline-block;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  margin-bottom: .65rem;
}
.hero-title {
  font-size: 1.4rem; font-weight: 800;
  color: #fff; letter-spacing: -.03em;
  line-height: 1.2; margin-bottom: .35rem;
}
.hero-sub {
  font-size: .82rem; color: rgba(255,255,255,.82);
  margin-bottom: 1rem; line-height: 1.5;
}
.hero-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff;
  color: var(--primary-dark);
  font-size: .85rem; font-weight: 700;
  padding: .55rem 1.15rem;
  border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.hero-btn:hover { background: #fff; opacity: .9; transform: scale(.97); }

/* ── Stats Grid ─────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  background: var(--clr-surface);
  border-radius: var(--radius);
  padding: 1.15rem 1.1rem;
  display: flex; align-items: center; gap: .95rem;
  border: .5px solid var(--clr-border);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.stat-card:active { transform: scale(.97); }

.stat-icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.stat-card .stat-icon          { background: var(--primary-light);  color: var(--primary-dark); }
.stat-card.green .stat-icon    { background: var(--green-light);    color: var(--green); }
.stat-card.red .stat-icon      { background: var(--red-light);      color: var(--red); }
.stat-card.yellow .stat-icon   { background: var(--clr-warning-lt); color: var(--clr-warning); }
.stat-card.blue .stat-icon     { background: var(--teal-light);     color: var(--teal); }
.stat-value {
  font-size: 1.8rem; font-weight: 800;
  letter-spacing: -.05em; line-height: 1;
}
.stat-label {
  font-size: .72rem; color: var(--clr-text-muted);
  margin-top: .2rem; font-weight: 500;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .6rem 1.15rem;
  border-radius: var(--radius-pill);
  font-size: .87rem; font-weight: 700;
  cursor: pointer; border: none;
  transition: all var(--transition);
  text-decoration: none; white-space: nowrap;
  letter-spacing: -.01em;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.95); }
.btn:hover  { text-decoration: none; }

.btn-primary  { background: var(--primary);      color: #fff; }
.btn-primary:hover { background: var(--primary-dark); opacity: 1; }
.btn-success  { background: var(--green);         color: #fff; }
.btn-success:hover { background: #28a745; opacity: 1; }
.btn-danger   { background: var(--red);           color: #fff; }
.btn-danger:hover  { background: #d92b22; opacity: 1; }
.btn-warning  { background: var(--clr-warning);   color: #fff; }
.btn-info     { background: var(--teal);           color: #fff; }

.btn-outline {
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border: .5px solid var(--clr-border);
}
.btn-outline:hover { background: var(--primary-pale); opacity: 1; }

.btn-secondary {
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  border: .5px solid var(--clr-border);
}
.btn-secondary:hover { background: rgba(0,0,0,.06); color: var(--clr-text); opacity: 1; }

.btn-primary-tint { background: var(--primary-light); color: var(--primary-dark); }
.btn-primary-tint:hover { background: #fde8c0; opacity: 1; }
.btn-success-tint { background: var(--green-light);  color: var(--green); }
.btn-danger-tint  { background: var(--red-light);    color: var(--red); }

.btn-sm { padding: .38rem .9rem; font-size: .78rem; }
.btn-lg { padding: .82rem 1.65rem; font-size: .97rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-icon { padding: .45rem; border-radius: 10px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .015em;
}
.badge-success   { background: var(--green-light);    color: #1a7a35; }
.badge-danger    { background: var(--red-light);      color: #c0392b; }
.badge-warning   { background: var(--clr-warning-lt); color: #b8630a; }
.badge-info      { background: var(--teal-light);     color: #0a6fa8; }
.badge-secondary { background: var(--clr-surface-2);  color: var(--clr-secondary); }
.badge-primary   { background: var(--primary-light);  color: var(--primary-dark); }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem; font-size: .88rem; font-weight: 500;
  border: none; position: relative;
  animation: slideDown .25s var(--ease-out);
}
@keyframes slideDown {
  from { opacity:0; transform: translateY(-8px); }
  to   { opacity:1; transform: translateY(0); }
}
.alert-success { background: var(--green-light);    color: #1a7a35; }
.alert-danger  { background: var(--red-light);      color: #c0392b; }
.alert-warning { background: var(--clr-warning-lt); color: #b8630a; }
.alert-info    { background: var(--blue-light);     color: #0055cc; }
.alert-close {
  margin-left: auto; background: none; border: none;
  font-size: 1.1rem; cursor: pointer; opacity: .45; padding: 0 .2rem; line-height: 1;
}
.alert-close:hover { opacity: 1; }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1.05rem; }
.form-label {
  display: block; margin-bottom: .4rem;
  font-size: .78rem; font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.form-label .required { color: var(--red); margin-left: .15rem; }

.form-control, .form-select, textarea.form-control {
  display: block; width: 100%;
  padding: .78rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-2);
  font-family: var(--font-sans);
  font-size: .97rem;
  color: var(--clr-text);
  transition: box-shadow var(--transition), background var(--transition);
  appearance: none; -webkit-appearance: none;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
  outline: none;
  background: var(--clr-surface);
  box-shadow: 0 0 0 3.5px rgba(245,166,35,.25), inset 0 0 0 1.5px var(--primary);
}
textarea.form-control { resize: vertical; min-height: 100px; }
.form-hint  { font-size: .76rem; color: var(--clr-text-muted); margin-top: .3rem; }
.form-error { font-size: .76rem; color: var(--red); margin-top: .3rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

/* iOS Settings-style grouped form */
.form-group-card {
  background: var(--clr-surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: .5px solid var(--clr-border);
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-card);
}
.form-group-card .form-row-item {
  padding: .95rem 1.15rem;
  border-bottom: .5px solid var(--clr-separator);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.form-group-card .form-row-item:last-child { border-bottom: none; }
.form-group-card .form-row-item-label { flex: 1; }
.form-group-card .form-row-item-label strong {
  display: block; font-size: .9rem; font-weight: 600; color: var(--clr-text);
}
.form-group-card .form-row-item-label small {
  font-size: .76rem; color: var(--clr-text-muted); margin-top: .1rem; display: block;
}

/* ── iOS Toggle Switch ──────────────────────────────────── */
.ios-toggle {
  position: relative; display: inline-block;
  width: 51px; height: 31px; flex-shrink: 0;
}
.ios-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-toggle-slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #E0D4C0;
  border-radius: 31px;
  transition: background .28s ease;
}
.ios-toggle-slider::before {
  position: absolute; content: '';
  height: 27px; width: 27px;
  left: 2px; bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .28s var(--ease-spring);
  box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.05);
}
.ios-toggle input:checked + .ios-toggle-slider { background: var(--green); }
.ios-toggle input:checked + .ios-toggle-slider::before { transform: translateX(20px); }

/* ── Tables ─────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.table th {
  padding: .65rem 1.1rem;
  text-align: left; background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: .5px solid var(--clr-separator);
  white-space: nowrap;
}
.table td {
  padding: .82rem 1.1rem;
  border-bottom: .5px solid var(--clr-separator);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--primary-pale); }
.table tbody tr:last-child td { border-bottom: none; }

/* ── Progress Bar ────────────────────────────────────────── */
.progress {
  height: 7px; background: var(--clr-surface-2);
  border-radius: var(--radius-pill); overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-pill);
  transition: width .6s var(--ease-out);
}
.progress-bar.green  { background: linear-gradient(90deg, var(--green), #27ae60); }
.progress-bar.red    { background: linear-gradient(90deg, var(--red), #c0392b); }
.progress-bar.yellow { background: linear-gradient(90deg, var(--clr-warning), #e67e22); }
.progress-lg { height: 10px; }

.progress-label {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--clr-text-muted); font-weight: 500;
  margin-bottom: .45rem;
}
/* ===== LESSON ADMIN APPLE CARDS ===== */

.lesson-module-card {
  margin-bottom: 1.5rem;
  padding: 1.1rem;
  border-radius: 32px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    0 18px 45px rgba(90,55,15,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.lesson-module-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.lesson-module-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.lesson-module-info {
  flex: 1;
  min-width: 0;
}

.lesson-module-info h2 {
  margin: 0;
  color: var(--clr-text);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.04em;
}

.lesson-module-info p {
  margin: .15rem 0 0;
  color: var(--clr-text-muted);
  font-size: .9rem;
  font-weight: 700;
}

.lesson-add-btn {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(245,166,35,.25);
}

.lesson-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.lesson-admin-card {
  padding: 1rem;
  border-radius: 26px;
  background: rgba(249,241,227,.72);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .2s ease, box-shadow .2s ease;
}

.lesson-admin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(90,55,15,.08);
}

.lesson-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .9rem;
}

.lesson-card-badges {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lesson-admin-card h3 {
  margin: 0;
  color: var(--clr-text);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.03em;
}

.lesson-card-sub {
  margin: .35rem 0 1rem;
  color: var(--clr-text-muted);
  font-size: .85rem;
  font-weight: 650;
}

.lesson-admin-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}

.lesson-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: white;
  color: var(--clr-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(90,55,15,.04);
}

.lesson-icon-btn.primary {
  background: var(--primary);
  color: white;
}

.lesson-icon-btn.info {
  background: var(--blue-light);
  color: var(--blue);
}

.lesson-icon-btn.danger {
  background: var(--red-light);
  color: var(--red);
}

.lesson-empty-card {
  grid-column: 1 / -1;
  padding: 1.4rem;
  border-radius: 24px;
  background: rgba(249,241,227,.72);
  color: var(--clr-text-muted);
  text-align: center;
  font-weight: 700;
}

@media (max-width: 700px) {
  .lesson-module-card {
    padding: .9rem;
    border-radius: 28px;
  }

  .lesson-card-grid {
    grid-template-columns: 1fr;
  }

  .lesson-module-info h2 {
    font-size: 1.2rem;
  }
}
/* ── Category Pills (filter tabs) ───────────────────────── */
.category-pills {
  display: flex; gap: .5rem; overflow-x: auto;
  padding-bottom: .5rem; margin-bottom: 1.25rem;
  scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.category-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .95rem;
  border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer; border: none;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  transition: all var(--transition);
  text-decoration: none;
}
.category-pill.active,
.category-pill:hover {
  background: var(--primary);
  color: #fff;
}
.category-pill .fa { font-size: .8rem; }

/* ── Section Header ──────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .85rem;
}
.section-title {
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: -.025em; color: var(--clr-text);
}
.section-more {
  font-size: .8rem; font-weight: 600; color: var(--primary);
}

/* ── Welcome Greeting ────────────────────────────────────── */
.greeting-block {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.35rem;
}
.greeting-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; border: 2.5px solid var(--primary-light);
  flex-shrink: 0;
}
.greeting-avatar-placeholder {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800;
  flex-shrink: 0;
}
.greeting-text .greeting-hello {
  font-size: .82rem; color: var(--clr-text-muted); font-weight: 500;
}
.greeting-text .greeting-name {
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--clr-text);
  line-height: 1.1;
}

/* ── Exam / Test ─────────────────────────────────────────── */
.exam-card { max-width: 680px; margin: 0 auto; }
.question-block {
  background: var(--clr-surface);
  border-radius: var(--radius);
  padding: 1.35rem;
  margin-bottom: .85rem;
  border: .5px solid var(--clr-border);
  box-shadow: var(--shadow-card);
}
.question-number {
  font-size: .68rem; color: var(--clr-text-muted);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: .45rem;
}
.question-text {
  font-size: .97rem; font-weight: 600;
  margin-bottom: 1.1rem; line-height: 1.55; letter-spacing: -.01em;
}
.answer-option {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  margin-bottom: .5rem; cursor: pointer;
  transition: all var(--transition);
  background: var(--clr-surface);
}
.answer-option:hover     { border-color: var(--primary); background: var(--primary-pale); }
.answer-option.selected  { border-color: var(--primary); background: var(--primary-light); }
.answer-option.correct   { border-color: var(--green);   background: var(--green-light); }
.answer-option.wrong     { border-color: var(--red);     background: var(--red-light); }
.answer-option:active    { transform: scale(.98); }
.answer-option input[type=radio] { margin-top: .1rem; accent-color: var(--primary); flex-shrink:0; }
.answer-text { font-size: .9rem; line-height: 1.45; }

.answer-explanation {
  background: var(--teal-light); border-radius: var(--radius-xs);
  padding: .7rem .9rem; font-size: .82rem; margin-top: .5rem;
  display: none; color: var(--teal); font-weight: 500;
}

.exam-timer {
  position: sticky; top: calc(var(--topnav-h) + .75rem); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(26,18,8,.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  color: #fff;
  padding: .85rem 1.35rem;
  border-radius: var(--radius); margin-bottom: 1.35rem;
  box-shadow: var(--shadow-md);
}
.timer-display {
  font-size: 1.55rem; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.timer-display.warning { color: #ffd60a; }
.timer-display.danger  { color: #ff6b6b; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Avatars ─────────────────────────────────────────────── */
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 72px; height: 72px; }
.avatar-xl { width: 100px; height: 100px; }

/* ── Auth Page ──────────────────────────────────────────── */
.auth-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem;
  background: linear-gradient(160deg, #8B5E1A 0%, var(--primary) 55%, #FFD080 100%);
}
.auth-card {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-radius: 28px;
  padding: 2.25rem 2rem;
  width: 100%; max-width: 390px;
  box-shadow: var(--shadow-lg);
  animation: authIn .5s var(--ease-spring);
}
@keyframes authIn {
  from { opacity:0; transform: translateY(28px) scale(.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo .fa-anchor {
  font-size: 2.4rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-logo h1 {
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -.04em; color: var(--clr-text); margin-top: .5rem;
}
.auth-logo p { font-size: .85rem; color: var(--clr-text-muted); margin-top: .25rem; }

/* ── Filter / Search Bar ────────────────────────────────── */
.filter-bar {
  display: flex; gap: .5rem; flex-wrap: wrap;
  align-items: center; margin-bottom: 1.1rem;
}
.filter-bar .form-control,
.filter-bar .form-select { max-width: 200px; }
.search-box { position: relative; }
.search-box .fa {
  position: absolute; left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-muted); font-size: .9rem;
  pointer-events: none;
}
.search-box input { padding-left: 2.6rem; }

/* ── Profile Card ────────────────────────────────────────── */
.profile-card {
  display: flex; gap: 1.35rem; align-items: flex-start; flex-wrap: wrap;
}
.profile-photo {
  width: 90px; height: 115px; object-fit: cover;
  border-radius: var(--radius); flex-shrink: 0; box-shadow: var(--shadow);
}
.profile-photo-placeholder {
  width: 90px; height: 115px;
  background: var(--clr-surface-2); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--clr-text-muted); font-size: 2rem; gap: .4rem;
  border: 1.5px dashed var(--clr-border); flex-shrink: 0;
}
.profile-info { flex: 1; min-width: 180px; }
.profile-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.035em; margin-bottom: .35rem; }
.profile-meta { display: flex; flex-wrap: wrap; gap: .4rem .75rem; margin-top: .55rem; }
.profile-meta-item {
  display: flex; align-items: center; gap: .3rem;
  font-size: .8rem; color: var(--clr-text-muted); font-weight: 500;
}
.profile-meta-item .fa { width: 14px; text-align: center; color: var(--primary); }

/* ── Certificate ─────────────────────────────────────────── */
.certificate {
  max-width: 640px; margin: 1.5rem auto;
  background: linear-gradient(135deg, #FFFDF7, var(--primary-light));
  border: 2px solid var(--primary);
  border-radius: 26px; padding: 2.75rem 2rem; text-align: center;
  box-shadow: var(--shadow-lg);
}
.cert-anchor { font-size: 2.8rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.cert-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--clr-text); }
.cert-subtitle { font-size: .85rem; color: var(--clr-text-muted); }
.cert-name { font-size: 1.45rem; font-weight: 800; color: var(--primary-dark); margin: .75rem 0; letter-spacing: -.035em; }
.cert-id { font-size: .72rem; color: var(--clr-text-muted); letter-spacing: .12em; margin-top: 1rem; }

/* ── Lesson Content ──────────────────────────────────────── */
.lesson-content { line-height: 1.8; font-size: .97rem; user-select: none; -webkit-user-select: none; }
.lesson-content h2 {
  font-size: 1.2rem; font-weight: 800;
  margin: 1.6rem 0 .7rem; color: var(--primary-dark);
  letter-spacing: -.03em;
}
.lesson-content h3 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .5rem; letter-spacing: -.02em; }
.lesson-content p   { margin-bottom: .9rem; }
.lesson-content img {
  border-radius: var(--radius); max-width: 100%;
  box-shadow: var(--shadow); margin: .85rem 0; pointer-events: none;
}

/* Watermark */
.watermark {
  position: fixed; bottom: 1.5rem; right: 1.25rem;
  font-size: .65rem; color: rgba(0,0,0,.07);
  transform: rotate(-20deg); pointer-events: none;
  font-weight: 700; letter-spacing: .04em; z-index: 9999; user-select: none;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination { display: flex; gap: .35rem; align-items: center; margin-top: .85rem; justify-content: center; flex-wrap: wrap; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .45rem;
  border-radius: 10px; background: var(--clr-surface-2);
  color: var(--clr-text); font-size: .84rem; font-weight: 600;
  border: .5px solid var(--clr-border); transition: all var(--transition);
}
.page-link:hover { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); opacity: 1; }
.page-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-link.disabled { opacity: .3; pointer-events: none; }

/* ── Section label ───────────────────────────────────────── */
.section-label {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--clr-text-muted);
  padding: .2rem 0 .5rem .25rem;
  display: block;
}

/* ── Utilities ──────────────────────────────────────────── */
.text-muted    { color: var(--clr-text-muted); }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-danger   { color: var(--red); }
.text-success  { color: var(--green); }
.fw-600        { font-weight: 600; }
.fw-700        { font-weight: 700; }
.fw-800        { font-weight: 800; }
.mb-0          { margin-bottom: 0; }
.mt-1          { margin-top: .5rem; }
.mt-2          { margin-top: 1rem; }
.d-flex        { display: flex; }
.align-center  { align-items: center; }
.gap-1         { gap: .5rem; }
.gap-2         { gap: 1rem; }
.flex-wrap     { flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────── */
.app-footer {
  text-align: center; padding: .75rem;
  font-size: .75rem; color: var(--clr-text-muted);
  border-top: .5px solid var(--clr-separator);
  background: var(--clr-surface);
}

/* ── Sidebar overlay ─────────────────────────────────────── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(60,30,0,.35);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  z-index: 850;
}
.sidebar-overlay.show { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --topnav-h: 54px; }

  .sidebar {
    position: fixed; z-index: 900;
    height: 100%; top: var(--topnav-h);
    transform: translateX(-100%);
    width: min(var(--sidebar-w), 82vw);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }

  .bottom-nav { display: block; }

  .main-content { padding: 1rem .9rem calc(var(--bottom-nav-h) + 1rem); }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .stat-value { font-size: 1.4rem; }
  .page-title { font-size: 1.3rem; }
  .filter-bar .form-control, .filter-bar .form-select { max-width: 100%; }
  .auth-card { border-radius: 22px; padding: 1.85rem 1.35rem; }
  .table th:nth-child(n+5), .table td:nth-child(n+5) { display: none; }
  .brand span { display: none; }
  .module-cards-grid { grid-template-columns: repeat(2, 1fr); }
}




@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .main-content { padding: 1.6rem 1.6rem 2.5rem; }
}

@media (min-width: 1200px) {
  .main-content { padding: 1.85rem 2.25rem 2.5rem; }
  .module-cards-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ============================================================
   DUOLINGO-STYLE LESSON
   ============================================================ */

/* Full-screen lesson layout (no sidebar distractions) */
body.lesson-page .sidebar { display: none; }
body.lesson-page .main-content { padding: 0; max-width: 100%; }
body.lesson-page .bottom-nav  { display: none !important; }

/* Lesson chrome */
.duo-chrome {
  position: fixed; top: var(--topnav-h); left: 0; right: 0;
  z-index: 500;
  background: var(--clr-surface);
  border-bottom: .5px solid var(--clr-border);
  padding: .75rem 1.25rem .65rem;
}
.duo-chrome-inner {
  max-width: 680px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
}
.duo-close-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--clr-surface-2);
  border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-muted); font-size: 1rem;
  transition: all var(--transition);
}
.duo-close-btn:hover { background: var(--red-light); color: var(--red); }

.duo-prog-track {
  flex: 1; height: 14px; background: var(--clr-surface-2);
  border-radius: var(--radius-pill); overflow: hidden;
}
.duo-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius-pill);
  transition: width .5s var(--ease-out);
  min-width: 4px;
}

.duo-step-counter {
  font-size: .78rem; font-weight: 700; color: var(--clr-text-muted);
  white-space: nowrap; flex-shrink: 0;
}

/* Content wrapper */
.duo-body {
  margin-top: calc(var(--topnav-h) + 24px);
  padding: 1.5rem 1.25rem 6rem;
  max-width: 680px; margin-left: auto; margin-right: auto;
  margin-top: calc(var(--topnav-h) + 24px);
}

/* Steps */
.duo-step { display: none; animation: duoFadeIn .3s var(--ease-out); }
.duo-step.active { display: block; }
@keyframes duoFadeIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Step 1 — Reading material */
.duo-read-card {
  background: var(--clr-surface);
  border-radius: var(--radius);
  border: .5px solid var(--clr-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.duo-read-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: .85rem;
}
.duo-read-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.duo-read-title { color: #fff; font-size: 1.1rem; font-weight: 800; letter-spacing: -.025em; }
.duo-read-module { color: rgba(255,255,255,.75); font-size: .78rem; margin-top: .15rem; }
.duo-read-body { padding: 1.5rem; }
.duo-read-body .lesson-content { user-select: auto; -webkit-user-select: auto; }

/* CTA bar */
.duo-cta-bar {
  display: flex; justify-content: center;
  padding: 1rem 1.25rem 1.5rem;
  gap: .75rem;
}

/* Step 2 — Quiz (one question at a time) */
.duo-q-card {
  background: var(--clr-surface);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  border: .5px solid var(--clr-border);
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}
.duo-q-tag {
  font-size: .7rem; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .9rem; display: flex; align-items: center; gap: .35rem;
}
.duo-q-text {
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 1.4rem; line-height: 1.5;
  color: var(--clr-text);
}
.duo-answers {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
}
@media (max-width: 500px) { .duo-answers { grid-template-columns: 1fr; } }

.duo-ans-btn {
  padding: .95rem 1rem;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  cursor: pointer; font-size: .9rem; font-weight: 600;
  text-align: left; line-height: 1.35;
  transition: all var(--transition);
  font-family: var(--font-sans);
  color: var(--clr-text);
}
.duo-ans-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-pale);
  transform: translateY(-1px);
}
.duo-ans-btn.selected  { border-color: var(--primary); background: var(--primary-light); }
.duo-ans-btn.correct   { border-color: var(--green); background: var(--green-light); color: #0f5a23; }
.duo-ans-btn.wrong     { border-color: var(--red);   background: var(--red-light);   color: #8b1a14; }
.duo-ans-btn:disabled  { cursor: default; }
.duo-ans-btn:active:not(:disabled) { transform: scale(.97); }

/* Feedback bar */
.duo-feedback {
  position: sticky; bottom: 0;
  padding: 1rem 1.25rem;
  border-top: .5px solid var(--clr-border);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: none; align-items: center; gap: 1rem;
  transition: background var(--transition);
}
.duo-feedback.show   { display: flex;  justify-content: center; align-items: center; }
.duo-feedback-inner { display: flex; flex-direction: column;  justify-content: center; align-items: center;  gap: 10px; }
.duo-feedback.correct { background: var(--green-light); border-color: rgba(52,199,89,.3); }
.duo-feedback.wrong   { background: var(--red-light);   border-color: rgba(255,59,48,.3); }
.duo-feedback-icon { font-size: 1.5rem; flex-shrink: 0; }
.duo-feedback-msg { flex: 1; }
.duo-feedback-msg strong { font-size: .95rem; font-weight: 800; display: block; }
.duo-feedback-msg small  { font-size: .78rem; color: var(--clr-text-muted); margin-top: .15rem; display: block; }

/* Step 3 — Complete */
.duo-complete {
  text-align: center; padding: 3.5rem 1.5rem 2rem;
}
.duo-complete-anim { font-size: 5.5rem; animation: bounceIn .6s var(--ease-spring); margin-bottom: 1rem; }
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(.95); }
  100% { transform: scale(1); opacity: 1; }
}
.duo-complete-title {
  font-size: 2rem; font-weight: 800;
  letter-spacing: -.045em; color: var(--clr-text);
  margin-bottom: .5rem;
}
.duo-complete-sub { font-size: .95rem; color: var(--clr-text-muted); margin-bottom: 2rem; line-height: 1.5; }
.duo-stats-row {
  display: flex; justify-content: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 2rem;
}
.duo-stat-chip {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  text-align: center; min-width: 110px;
  box-shadow: var(--shadow-card);
}
.duo-stat-chip .val { font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; }
.duo-stat-chip .lbl { font-size: .72rem; color: var(--clr-text-muted); font-weight: 600; margin-top: .15rem; }

/* Confetti particles (JS-driven) */
.confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.confetti-dot {
  position: absolute; width: 10px; height: 10px;
  border-radius: 2px; opacity: 0;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(-20px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

/* ============================================================
   YOUTUBE-STYLE MODULE PLAYLIST (candidate/module.php)
   ============================================================ */

   /* =========================================
   MODULES APP CARDS
========================================= */

.modules-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1.2rem;
}

.module-app-card{
  overflow:hidden;
  border-radius:32px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border:1px solid rgba(255,255,255,.7);

  box-shadow:
    0 10px 30px rgba(180,120,40,.08),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:.25s ease;
}

.module-app-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 18px 45px rgba(180,120,40,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.module-app-cover{
  height:120px;

  background:
    linear-gradient(
      135deg,
      var(--primary-light),
      #FFE7B8
    );

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
}

.module-cover-icon{
  width:74px;
  height:74px;
  border-radius:26px;

  background:white;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--primary);
  font-size:1.5rem;

  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.module-cover-badge{
  position:absolute;
  top:14px;
  right:14px;

  background:rgba(255,255,255,.88);

  padding:.45rem .8rem;
  border-radius:100px;

  font-size:.72rem;
  font-weight:800;

  color:var(--primary-dark);

  backdrop-filter:blur(12px);
}

.module-app-body{
  padding:1.1rem;
}

.module-app-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.module-app-top h3{
  margin:0;
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:-.04em;
}

.module-app-top p{
  margin:.35rem 0 0;
  color:var(--clr-text-muted);
  font-size:.86rem;
  line-height:1.45;
}

.module-status-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
  margin-top:.4rem;
}

.module-status-dot.active{
  background:#34C759;
  box-shadow:0 0 0 6px rgba(52,199,89,.15);
}

.module-status-dot.hidden{
  background:#C7C7CC;
}

.module-meta-row{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.module-meta-chip{
  padding:.45rem .8rem;
  border-radius:100px;

  background:var(--clr-surface-2);

  font-size:.74rem;
  font-weight:700;

  color:var(--clr-text-muted);

  display:flex;
  align-items:center;
  gap:.4rem;
}

.module-meta-chip.success{
  background:#EAF9EF;
  color:#34C759;
}

.module-actions{
  display:flex;
  gap:.55rem;
}

.module-action-btn{
  width:42px;
  height:42px;

  border-radius:15px;

  background:white;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--clr-text-muted);

  box-shadow:0 8px 18px rgba(0,0,0,.05);

  transition:.2s ease;
}

.module-action-btn:hover{
  transform:translateY(-2px);
}

.module-action-btn.secondary{
  background:var(--clr-surface-2);
}

.module-action-btn.danger{
  background:#FFF1F0;
  color:#FF3B30;
}

/* MOBILE */

@media (max-width:900px){

  div[style*="grid-template-columns:400px 1fr"]{
    grid-template-columns:1fr !important;
  }

}

.module-playlist-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius); padding: 1.5rem;
  margin-bottom: 1.25rem; color: #fff;
  display: flex; align-items: center; gap: 1.25rem;
}
.module-playlist-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; flex-shrink: 0;
}
.module-playlist-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.module-playlist-sub   { font-size: .82rem; opacity: .82; margin-top: .2rem; }
.module-playlist-prog  {
  margin-top: .85rem;
  background: rgba(255,255,255,.25); border-radius: 100px; height: 8px; overflow: hidden;
}
.module-playlist-prog-bar {
  height: 100%; background: #fff; border-radius: 100px;
  transition: width .6s var(--ease-out);
}

.yt-list { background: var(--clr-surface); border-radius: var(--radius); overflow: hidden; border: .5px solid var(--clr-border); box-shadow: var(--shadow-card); }

.yt-card {
  display: flex; gap: .95rem; align-items: flex-start;
  padding: .9rem 1rem; border-bottom: .5px solid var(--clr-separator);
  text-decoration: none; color: var(--clr-text);
  transition: background var(--transition);
}
.yt-card:hover { background: var(--primary-pale); }
.yt-card:last-child { border-bottom: none; }

.yt-thumb {
  width: 128px; min-width: 128px; height: 76px;
  border-radius: var(--radius-sm); overflow: hidden;
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.yt-thumb-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition);
}
.yt-card:hover .yt-thumb-overlay { opacity: 1; }
.yt-play-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: var(--clr-text);
}
.yt-done-stamp {
  position: absolute; top: 5px; right: 5px;
  background: var(--green); color: #fff;
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700;
}
.yt-num-badge {
  position: absolute; bottom: 4px; right: 5px;
  background: rgba(0,0,0,.62); color: #fff;
  font-size: .58rem; font-weight: 700;
  padding: .08rem .35rem; border-radius: 4px;
}

.yt-info { flex: 1; min-width: 0; padding-top: .1rem; }
.yt-title {
  font-size: .9rem; font-weight: 700; color: var(--clr-text);
  letter-spacing: -.015em; line-height: 1.3; margin-bottom: .35rem;
}
.yt-meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.yt-badge {
  font-size: .62rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: var(--radius-pill);
}
.yt-badge-done     { background: var(--green-light); color: #0f5a23; }
.yt-badge-pending  { background: var(--clr-surface-2); color: var(--clr-secondary); }
.yt-badge-test     { background: var(--primary-light); color: var(--primary-dark); }
.yt-badge-optional { background: var(--clr-surface-2); color: var(--clr-text-muted); }

/* ============================================================
   QUIZLET-STYLE VOCABULARY FLASHCARDS
   ============================================================ */

.vocab-page { max-width: 600px; margin: 0 auto; }

.vocab-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem;
}
.vocab-counter {
  font-size: .78rem; color: var(--clr-text-muted); font-weight: 600;
}

/* Category pills */
.vocab-filters {
  display: flex; gap: .4rem; overflow-x: auto;
  padding-bottom: .35rem; margin-bottom: 1.25rem;
  scrollbar-width: none;
}
.vocab-filters::-webkit-scrollbar { display: none; }
.vocab-filter {
  padding: .35rem .85rem; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  cursor: pointer; border: 1.5px solid var(--clr-border);
  background: var(--clr-surface); color: var(--clr-text-muted);
  transition: all var(--transition);
}
.vocab-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Progress bar */
.vocab-progress { margin-bottom: 1.5rem; }
.vocab-progress-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; color: var(--clr-text-muted); margin-bottom: .45rem;
}
.vocab-prog-track {
  height: 8px; background: var(--clr-surface-2);
  border-radius: var(--radius-pill); overflow: hidden;
}
.vocab-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #27ae60);
  border-radius: var(--radius-pill);
  transition: width .5s var(--ease-out);
}

/* Flashcard */
.flashcard-scene {
  perspective: 1200px;
  width: 100%; height: 220px;
  margin: 0 auto 1.25rem; cursor: pointer;
}
.flashcard-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .55s cubic-bezier(0.4,0,0.2,1);
  transform-style: preserve-3d;
}
.flashcard-scene.flipped .flashcard-inner { transform: rotateY(180deg); }

.fc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.75rem 2rem; text-align: center;
  border: .5px solid var(--clr-border);
  box-shadow: var(--shadow);
  user-select: none;
}
.fc-front { background: var(--clr-surface); }
.fc-back  {
  background: linear-gradient(135deg, var(--primary-light), #FDECC0);
  transform: rotateY(180deg);
}
.fc-lang {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--clr-text-muted); margin-bottom: .85rem;
}
.fc-word {
  font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.15; color: var(--clr-text);
}
.fc-translation {
  font-size: 1rem; font-weight: 700;
  color: var(--primary-dark); margin-top: .65rem;
}
.fc-example {
  font-size: .78rem; color: var(--clr-text-muted);
  margin-top: .65rem; line-height: 1.6; font-style: italic;
}
.fc-tap {
  position: absolute; bottom: .85rem;
  font-size: .65rem; color: var(--clr-text-tertiary);
  display: flex; align-items: center; gap: .25rem;
}

/* Know / Don't Know buttons */
.vocab-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin-bottom: 1.5rem;
}
.vocab-btn-no {
  padding: .9rem; border-radius: var(--radius-sm);
  background: var(--red-light); color: var(--red);
  border: 2px solid rgba(255,59,48,.25);
  font-size: .9rem; font-weight: 800; cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition);
}
.vocab-btn-no:hover { background: var(--red); color: #fff; }
.vocab-btn-yes {
  padding: .9rem; border-radius: var(--radius-sm);
  background: var(--green-light); color: var(--green);
  border: 2px solid rgba(52,199,89,.25);
  font-size: .9rem; font-weight: 800; cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition);
}
.vocab-btn-yes:hover { background: var(--green); color: #fff; }

/* Vocab mini nav */
.vocab-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .5rem;
}
.vocab-nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--clr-surface-2); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--clr-text-muted);
  transition: all var(--transition);
}
.vocab-nav-btn:hover { background: var(--primary-light); color: var(--primary-dark); }
.vocab-pos { font-size: .82rem; font-weight: 700; color: var(--clr-text-muted); }

/* Vocab done screen */
.vocab-done {
  text-align: center; padding: 2.5rem 1.5rem;
  background: var(--clr-surface); border-radius: var(--radius);
  border: .5px solid var(--clr-border); box-shadow: var(--shadow-card);
  display: none;
}
.vocab-done.show { display: block; animation: duoFadeIn .4s var(--ease-spring); }
.vocab-done-emoji { font-size: 4rem; margin-bottom: .85rem; }
.vocab-done-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .4rem; }

/* ============================================================
   ATTENDANCE TABLE STYLES
   ============================================================ */
.attend-status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .7rem; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700;
}
.attend-present  { background: var(--green-light); color: #0f5a23; }
.attend-absent   { background: var(--red-light);   color: #8b1a14; }
.attend-late     { background: var(--clr-warning-lt); color: #7a3d00; }
.attend-excused  { background: var(--blue-light);  color: #003080; }
.attend-none     { background: var(--clr-surface-2); color: var(--clr-text-muted); }

.attend-grid {
  display: grid; gap: .6rem;
}
.attend-row {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .85rem;
  box-shadow: var(--shadow-xs);
}
.attend-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; flex-shrink: 0;
}
.attend-name { font-weight: 700; font-size: .9rem; }
.attend-crew { font-size: .72rem; color: var(--clr-text-muted); }


/* MOBILE DEFAULT */

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  margin: 1.5rem 0 2rem;
}

.filter-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .9rem;
}

.filter-controls .btn {
  grid-column: span 3;
}

/* DESKTOP */

@media (min-width: 1100px) {

  .filter-bar {
    display: grid;

    grid-template-columns:
      minmax(320px,1.5fr)
      1fr
      1fr
      1fr
      auto
      auto;

    gap: 1rem;

    align-items: center;
  }

  .filter-controls {
    display: contents;
  }

  .filter-controls .btn {
    grid-column: auto;
  }
}
.filter-bar .search-box {
  position: relative;
  width: 100%;
}

.filter-bar .search-box input {
  width: 100%;
  height: 45px;
  padding-left: 56px;
  background: #fff;
  border-radius: 24px;
}

/* DESKTOP FILTER BAR */

@media (min-width: 1100px) {

  .filter-bar {
    display: grid;

    grid-template-columns:
      minmax(320px,1.6fr)
      180px
      180px
      180px
      auto
      auto;

    gap: .55rem;

    align-items: center;
  }

  .filter-controls {
    display: contents;
  }
}

/* SELECT STYLE */

.filter-bar .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 18px center;

  background-size: 18px;

  padding-right: 52px;
}
/* ============================================================
   MODULE HERO (candidate/module.php)
 /* ===== MODULE HERO FIX ===== */

.module-hero {
  border-radius: 34px;
  padding: 1.25rem;
  overflow: hidden;
  min-height: auto;
}

.module-hero-body {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 1rem;
}

.module-hero-info {
  min-width: 0;
  overflow: hidden;
}

.module-hero-title {
  font-size: 1.45rem;
  line-height: 1.15;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

.module-hero-desc {
  font-size: .95rem;
  line-height: 1.45;
  max-width: 100%;
}

.module-hero-emoji {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  font-size: 2.1rem;
}

.module-hero-ring {
  width: 70px;
  height: 70px;
}

/* mobile */
@media (max-width: 480px) {
  .module-hero {
    padding: 1.1rem;
    border-radius: 30px;
  }

  .module-hero-body {
    grid-template-columns: 64px minmax(0, 1fr) 58px;
    gap: .8rem;
  }

  .module-hero-emoji {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 1.8rem;
  }

  .module-hero-title {
    font-size: 1.25rem;
  }

  .module-hero-desc {
    font-size: .82rem;
  }

  .module-hero-ring {
    width: 58px;
    height: 58px;
  }

  .ring-svg {
    width: 58px;
    height: 58px;
  }

  .ring-label {
    font-size: .72rem;
  }
}

/* YT card done state */
.yt-card-done .yt-title { color: var(--clr-text-muted); }
.yt-thumb-emoji {
  font-size: 2rem; position: relative; z-index: 1;
}
.yt-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-tertiary); padding: .25rem; flex-shrink: 0;
}
.yt-badge-done, .yt-badge-pending, .yt-badge-test, .yt-badge-optional {
  font-size: .62rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: var(--radius-pill);
}
.yt-badge-done     { background: var(--green-light); color: #0f5a23; }
.yt-badge-pending  { background: var(--clr-surface-2); color: var(--clr-secondary); }
.yt-badge-test     { background: var(--primary-light); color: var(--primary-dark); }
.yt-badge-optional { background: var(--clr-surface-2); color: var(--clr-text-muted); }

/* ============================================================
   DUOLINGO LESSON — MISSING COMPONENTS
   ============================================================ */

/* Exit button in chrome */
.duo-exit-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--clr-surface-2); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-muted); font-size: .95rem; flex-shrink: 0;
  transition: all var(--transition);
}
.duo-exit-btn:hover { background: var(--red-light); color: var(--red); }

/* Progress wrap inside chrome */
.duo-prog-wrap { flex: 1; }

/* Step count chip */
.duo-step-count {
  font-size: .72rem; font-weight: 800;
  color: var(--clr-text-muted); white-space: nowrap; flex-shrink: 0;
}

/* Chrome inner flex */
.duo-chrome { display: flex; align-items: center; gap: 1rem; }

/* Reading card layout */
.duo-read-header {
  padding: 1.5rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
}
.duo-read-header-info { flex: 1; }
.duo-read-tag {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.8); margin-bottom: .35rem;
  display: flex; align-items: center; gap: .35rem;
}
.duo-read-content {
  padding: 1.5rem;
  line-height: 1.75; color: var(--clr-text);
}
.duo-read-footer {
  padding: 1rem 1.25rem 1.5rem;
  display: flex; justify-content: center;
}
.duo-continue-btn {
  min-width: 220px; font-size: 1rem; padding: .9rem 2rem;
  border-radius: var(--radius-pill); font-weight: 800;
  letter-spacing: -.02em;
}
.duo-done-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.2); color: #fff;
  padding: .3rem .75rem; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}

/* Question eyebrow */
.duo-q-eyebrow {
  font-size: .72rem; font-weight: 800; color: var(--primary);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .85rem; display: flex; align-items: center; gap: .35rem;
}

/* Explanation */
.duo-explanation {
  margin-top: 1rem;
  background: var(--primary-pale);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-size: .82rem; color: var(--clr-text);
  display: flex; gap: .5rem; align-items: flex-start;
  line-height: 1.55;
}

/* Feedback bar next button */
.duo-feedback-next {
  background: var(--clr-text); color: #fff;
  border: none; cursor: pointer; border-radius: var(--radius-pill);
  padding: .6rem 1.4rem; font-size: .88rem; font-weight: 800;
  font-family: var(--font-sans); white-space: nowrap;
  transition: all var(--transition);
}
.duo-feedback.correct .duo-feedback-next { background: var(--green); }
.duo-feedback.wrong   .duo-feedback-next { background: var(--red); }

/* Feedback text */
.duo-feedback-text {
  flex: 1; font-size: .9rem; font-weight: 700; color: var(--clr-text);
}

/* Complete screen */
.duo-complete {
  text-align: center; padding: 4rem 1.5rem 2rem;
  position: relative; overflow: hidden;
}
.duo-complete-icon {
  font-size: 5.5rem;
  animation: bounceIn .6s var(--ease-spring);
  margin-bottom: 1rem; display: block;
}
.duo-complete-title {
  font-size: 2rem; font-weight: 800;
  letter-spacing: -.045em; margin-bottom: .5rem;
}
.duo-complete-sub {
  font-size: .95rem; color: var(--clr-text-muted); margin-bottom: 2rem;
}
.duo-complete-stats {
  display: flex; justify-content: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 2rem;
}
.duo-stat-chip {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem; text-align: center;
  min-width: 100px; box-shadow: var(--shadow-card);
}
.duo-stat-chip.green { border-color: rgba(52,199,89,.3); background: var(--green-light); }
.duo-stat-chip.orange { border-color: rgba(245,166,35,.3); background: var(--primary-light); }
.duo-stat-chip.blue { border-color: rgba(0,122,255,.2); background: #EAF2FF; }
.duo-stat-chip.gold { border-color: rgba(245,166,35,.3); background: #FFFBE8; }
.duo-stat-num { font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; display: block; }
.duo-stat-lbl { font-size: .7rem; color: var(--clr-text-muted); font-weight: 700; margin-top: .15rem; display: block; }
.duo-complete-actions {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
}

/* Confetti from duo-complete */
.duo-complete .confetti-dot {
  position: absolute; border-radius: 3px;
}

/* ============================================================
   VOCABULARY — MISSING COMPONENTS
   ============================================================ */

.vocab-overall-bar {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-xs);
}

.vocab-cats {
  display: flex; gap: .5rem; overflow-x: auto;
  padding-bottom: .4rem; margin-bottom: 1.25rem;
  scrollbar-width: none;
}
.vocab-cats::-webkit-scrollbar { display: none; }
.vocab-cat-pill {
  display: inline-flex; align-items: center;
  padding: .38rem 1rem; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  text-decoration: none;
  background: var(--clr-surface); color: var(--clr-text-muted);
  border: 1.5px solid var(--clr-border);
  transition: all var(--transition);
}
.vocab-cat-pill:hover { border-color: var(--primary); color: var(--primary); }
.vocab-cat-pill.active {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
}

.flashcard-deck { max-width: 580px; margin: 0 auto; }
.vocab-counter {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-bottom: 1rem; font-weight: 700;
  font-size: .88rem; color: var(--clr-text-muted);
}
.flashcard-inner.flipped { transform: rotateY(180deg); }

/* Vocab progress dots */
.vocab-mini-prog {
  display: flex; gap: .3rem; justify-content: center;
  flex-wrap: wrap; margin-top: 1.25rem;
}
.vocab-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--clr-surface-2); border: 1.5px solid var(--clr-border);
  transition: all var(--transition);
}
.vocab-dot.current  { border-color: var(--primary); background: var(--primary-light); transform: scale(1.25); }
.vocab-dot.learning { background: var(--primary-light); border-color: var(--primary); }
.vocab-dot.known    { background: var(--green); border-color: var(--green); }

/* FC known state */
.flashcard-scene.fc-known .fc-front { background: var(--green-light); }

/* Vocab done */
.vocab-done {
  background: var(--clr-surface); border-radius: var(--radius);
  border: .5px solid var(--clr-border); box-shadow: var(--shadow-card);
}
.vocab-done-inner {
  padding: 3.5rem 2rem; text-align: center;
}
.vocab-done-title {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: .75rem 0 .4rem;
}
.vocab-done-sub { color: var(--clr-text-muted); font-size: .9rem; }

/* ============================================================
   ATTENDANCE — FULL LAYOUT (admin + observer)
   ============================================================ */

.attend-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .attend-layout { grid-template-columns: 1fr; }
}

.attend-sidebar {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-xs);
  position: sticky; top: calc(var(--topnav-h) + 1rem);
}
.attend-sidebar-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--clr-text-muted);
  margin-bottom: .75rem;
}
.attend-date-list { display: flex; flex-direction: column; gap: .3rem; }
.attend-date-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--clr-text);
  font-size: .8rem; font-weight: 600;
  transition: all var(--transition);
}
.attend-date-item:hover { background: var(--primary-pale); }
.attend-date-item.active { background: var(--primary-light); color: var(--primary-dark); }
.attend-date-item i { color: var(--clr-text-muted); font-size: .75rem; }

.attend-main {}
.attend-date-heading {
  font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
}

/* Candidate row */
.attend-row {
  flex-wrap: wrap;
}
.attend-person {
  display: flex; align-items: center; gap: .75rem;
  min-width: 180px;
}
.attend-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.attend-avatar-ph {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; flex-shrink: 0;
}
.attend-btns {
  display: flex; gap: .4rem; flex-wrap: wrap; flex: 1;
}
.attend-status-btn {
  padding: .38rem .85rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface-2); cursor: pointer;
  font-size: .75rem; font-weight: 700; font-family: var(--font-sans);
  color: var(--clr-text-muted); transition: all var(--transition);
  white-space: nowrap;
}
.attend-status-btn:hover { border-color: var(--primary); color: var(--primary); }
.attend-present.active  { background: var(--green-light); color: #0f5a23; border-color: var(--green); }
.attend-late.active     { background: #FFF3CD; color: #7a3d00; border-color: #F5A623; }
.attend-excused.active  { background: #EAF2FF; color: #003080; border-color: var(--blue); }
.attend-absent.active   { background: var(--red-light); color: #8b1a14; border-color: var(--red); }

.attend-notes-wrap { width: 100%; margin-top: .4rem; }

/* ============================================================
   MODAL (admin/vocabulary.php)
   ============================================================ */

.modal-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.modal-box {
  background: var(--clr-surface);
  border-radius: var(--radius);
  width: 100%; max-width: 560px;
  box-shadow: 0 24px 80px rgba(0,0,0,.2);
  animation: duoFadeIn .25s var(--ease-out);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: .5px solid var(--clr-border);
}
.modal-title { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--clr-surface-2); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-muted); font-size: .8rem;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--red-light); color: var(--red); }
.modal-body { padding: 1.5rem; }

/* ============================================================
   DATA TABLE (admin pages)
   ============================================================ */

/* ===== APPLE CORE VOCAB ADMIN CARDS ===== */

.vocab-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.vocab-admin-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 30px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    0 18px 45px rgba(90, 55, 15, .08),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.vocab-admin-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 60px rgba(90, 55, 15, .12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.vocab-admin-media {
  width: 104px;
  height: 104px;
  border-radius: 26px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fff8ed, #f4ead9);
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.vocab-admin-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vocab-admin-body {
  flex: 1;
  min-width: 0;
}

.vocab-admin-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .35rem;
}

.vocab-category {
  padding: .32rem .75rem;
  border-radius: 999px;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  font-size: .7rem;
  font-weight: 900;
  text-transform: capitalize;
}

.vocab-admin-card h3 {
  margin: .15rem 0 .25rem;
  color: var(--purple);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.035em;
}

.vocab-example {
  color: var(--clr-text-muted);
  font-size: .88rem;
  line-height: 1.45;
  font-style: italic;
  margin-bottom: .85rem;
}

.vocab-translations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: .85rem;
}

.vocab-translations div {
  position: relative;
  min-width: 0;
  padding: .8rem;
  border-radius: 20px;
  background: rgba(249, 241, 227, .75);
}

.vocab-translations span {
  display: block;
  margin-bottom: .3rem;
  color: var(--clr-text-muted);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.vocab-translations strong {
  display: block;
  color: var(--purple);
  font-size: .95rem;
  font-weight: 800;
  word-break: break-word;
}

.vocab-mini-audio {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: white;
  color: var(--primary);
  cursor: pointer;
}

.vocab-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
  color: var(--clr-text-muted);
  font-size: .76rem;
  font-weight: 800;
}

.vocab-media-tags {
  display: flex;
  gap: .35rem;
  align-items: center;
  white-space: nowrap;
}

.vocab-admin-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
}

.vocab-card-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 16px;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.vocab-card-btn:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.vocab-card-btn:active {
  transform: scale(.92);
}

.vocab-card-btn.danger {
  background: var(--red-light);
  color: var(--red);
}

.vocab-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border-radius: 30px;
  background: white;
  color: var(--clr-text-muted);
  text-align: center;
  box-shadow: var(--shadow-card);
}

@media (max-width: 760px) {
  .vocab-admin-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .vocab-admin-card {
    flex-direction: column;
    padding: 1rem;
  }

  .vocab-admin-media {
    width: 100%;
    height: 190px;
    border-radius: 26px;
  }

  .vocab-admin-card h3 {
    font-size: 1.55rem;
  }

  .vocab-translations {
    grid-template-columns: 1fr;
  }
}
/* Log activity helper (in case it doesn't exist) */

/* ============================================================
   LESSON BUILDER — Admin UI (admin/lesson_builder.php)
   ============================================================ */

.builder-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .builder-layout { grid-template-columns: 1fr; }
}

/* Block list */
.builder-blocks {
  display: flex; flex-direction: column; gap: .65rem;
}
.builder-empty {
  background: var(--clr-surface);
  border: 2px dashed var(--clr-border);
  border-radius: var(--radius);
  padding: 3rem 2rem; text-align: center;
  color: var(--clr-text-muted);
}

/* Individual block card */
.lb-card {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.lb-card:hover      { box-shadow: var(--shadow-card); }
.lb-card-editing    { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }

.lb-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .85rem;
  background: var(--clr-surface-2);
  border-bottom: .5px solid var(--clr-separator);
  gap: .5rem;
}
.lb-type-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
}
.lb-type-warning         { background: #FFF4E0; color: #8B4500; border-color: #F5A623; }
.lb-type-tip             { background: var(--blue-light); color: #003080; border-color: var(--blue); }
.lb-type-important       { background: #FFFBE8; color: #7A5500; border-color: #FFD60A; }
.lb-type-safety          { background: var(--red-light); color: #8b1a14; border-color: var(--red); }
.lb-type-service_standard{ background: #F5EEFF; color: #5A1F8A; border-color: #AF52DE; }
.lb-type-heading         { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }

.lb-controls {
  display: flex; gap: .25rem; align-items: center; flex-shrink: 0;
}
.lb-ctrl-btn {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--clr-text-muted);
  transition: all var(--transition); text-decoration: none;
}
.lb-ctrl-btn:hover        { background: var(--clr-surface-2); color: var(--clr-text); }
.lb-ctrl-edit:hover       { background: var(--primary-light); color: var(--primary-dark); }
.lb-ctrl-delete:hover     { background: var(--red-light); color: var(--red); }

/* Card preview */
.lb-card-preview { padding: .75rem .9rem; min-height: 40px; }
.lb-prev-heading { font-weight: 800; color: var(--clr-text); }
.lb-prev-h2 { font-size: 1.1rem; }
.lb-prev-h3 { font-size: .95rem; }
.lb-prev-h4 { font-size: .85rem; }
.lb-prev-text { font-size: .82rem; color: var(--clr-text-muted); line-height: 1.5; }
.lb-prev-list { margin: 0; padding-left: 1.2rem; font-size: .82rem; color: var(--clr-text-muted); }
.lb-prev-list li { margin-bottom: .15rem; }
.lb-prev-img {
  width: 100%; max-height: 100px; object-fit: cover;
  border-radius: 8px;
}
.lb-prev-no-img {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--clr-text-muted);
  padding: .5rem 0;
}
.lb-prev-gallery {
  display: flex; gap: .35rem;
}
.lb-prev-gallery img {
  width: 60px; height: 45px; object-fit: cover; border-radius: 6px;
}
.lb-prev-divider {
  height: 2px; background: var(--clr-border); border-radius: 2px; margin: .5rem 0;
}
.lb-prev-semantic {
  border-radius: 8px; padding: .6rem .85rem; font-size: .82rem;
}
.lb-prev-warning         { background: #FFF4E0; }
.lb-prev-tip             { background: var(--blue-light); }
.lb-prev-important       { background: #FFFBE8; }
.lb-prev-safety          { background: var(--red-light); }
.lb-prev-service_standard{ background: #F5EEFF; }
.lb-prev-semantic-title  { font-weight: 800; font-size: .72rem; margin-bottom: .2rem; }

/* Add block button */
.lb-add-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .9rem;
  background: var(--clr-surface);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-sm);
  color: var(--primary); font-size: .9rem; font-weight: 800;
  cursor: pointer; font-family: var(--font-sans);
  transition: all var(--transition);
}
.lb-add-btn:hover { background: var(--primary-pale); border-style: solid; }

/* Editor panel */
.builder-editor { position: sticky; top: calc(var(--topnav-h) + 1rem); }
.be-panel {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.be-panel-idle {
  padding: 3rem 1.5rem; text-align: center;
  color: var(--clr-text-muted);
}
.be-panel-header {
  display: flex; align-items: center;
  padding: .9rem 1.25rem;
  border-bottom: .5px solid var(--clr-border);
  background: var(--clr-surface-2);
  gap: .5rem;
}
.be-panel-title { font-size: .9rem; font-weight: 800; flex: 1; }
.be-panel-body  { padding: 1.25rem; }
.be-field       { margin-bottom: .85rem; }
.lb-gallery-slot {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--clr-surface-2); border-radius: var(--radius-sm);
  padding: .65rem; margin-bottom: .5rem;
}
.lb-gallery-slot-preview {
  width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
}
.lb-gallery-slot-fields { display: flex; flex-direction: column; gap: .35rem; flex: 1; }

/* Picker modal */
.picker-box { max-width: 480px; }
.picker-body {
  padding: 1.25rem;
  max-height: 65vh; overflow-y: auto;
}
.picker-group-label {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--clr-text-muted); margin-bottom: .5rem;
}
.picker-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
@media (max-width: 500px) { .picker-grid { grid-template-columns: repeat(2,1fr); } }

.picker-type-btn {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .85rem .5rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface-2);
  cursor: pointer; font-family: var(--font-sans);
  transition: all var(--transition); gap: .2rem;
}
.picker-type-btn:hover {
  border-color: var(--primary); background: var(--primary-pale);
  transform: translateY(-2px); box-shadow: var(--shadow-card);
}
.picker-emoji { font-size: 1.5rem; line-height: 1; }
.picker-label { font-size: .78rem; font-weight: 800; color: var(--clr-text); }
.picker-desc  { font-size: .62rem; color: var(--clr-text-muted); line-height: 1.3; }

.picker-semantic-warning          .picker-type-btn:hover, .picker-semantic-warning          { border-color: #F5A623; }
.picker-semantic-tip              .picker-type-btn:hover, .picker-semantic-tip              { border-color: var(--blue); }
.picker-semantic-important        .picker-type-btn:hover, .picker-semantic-important        { border-color: #FFD60A; }
.picker-semantic-safety           .picker-type-btn:hover, .picker-semantic-safety           { border-color: var(--red); }
.picker-semantic-service_standard .picker-type-btn:hover, .picker-semantic-service_standard { border-color: #AF52DE; }

/* ============================================================
   LESSON BLOCK RENDERER — Candidate View
   Beautiful Apple/Duolingo reading experience
   ============================================================ */

.lesson-blocks {
  display: flex; flex-direction: column; gap: 1.25rem;
}

/* Heading */
.lb-heading {
  color: var(--clr-text);
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0;
}
.lb-h2 { font-size: 1.5rem; font-weight: 800; }
.lb-h3 { font-size: 1.2rem; font-weight: 700; }
.lb-h4 { font-size: 1rem;  font-weight: 700; color: var(--clr-text-muted); }

/* Text paragraph */
.lb-text {
  font-size: 1rem; line-height: 1.8;
  color: var(--clr-text); margin: 0;
}

/* List */
.lb-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .5rem;
}
.lb-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .95rem; line-height: 1.55; color: var(--clr-text);
  padding: .5rem .75rem;
  background: var(--clr-surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}
.lb-list li::before {
  content: ''; display: inline-block; flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); margin-top: .45rem;
}

/* Image */
.lb-image {
  margin: 0; border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.lb-image img {
  width: 100%; display: block;
  object-fit: cover; max-height: 420px;
}
.lb-image-caption {
  padding: .65rem 1rem;
  font-size: .78rem; color: var(--clr-text-muted);
  text-align: center; font-style: italic;
  background: var(--clr-surface-2);
}

/* Gallery */
.lb-gallery {
  display: grid; gap: .5rem;
  border-radius: var(--radius); overflow: hidden;
}
.lb-gallery-1 { grid-template-columns: 1fr; }
.lb-gallery-2 { grid-template-columns: 1fr 1fr; }
.lb-gallery-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.lb-gallery-4 { grid-template-columns: 1fr 1fr; }
.lb-gallery-3 .lb-gallery-item:first-child { grid-row: 1 / span 2; }
.lb-gallery-item { margin: 0; position: relative; overflow: hidden; border-radius: 12px; }
.lb-gallery-item img { width: 100%; height: 160px; object-fit: cover; display: block; }
.lb-gallery-item figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #fff; font-size: .65rem; padding: .5rem .65rem;
}

/* Divider */
.lb-divider {
  height: 1px; background: var(--clr-border);
  border-radius: 1px; margin: .25rem 0;
  position: relative;
}
.lb-divider::after {
  content: '✦';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--clr-bg); padding: 0 .75rem;
  font-size: .65rem; color: var(--clr-text-tertiary);
}

/* Semantic blocks — shared */
.lb-semantic {
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  border-left: 4px solid;
  position: relative; overflow: hidden;
}
.lb-semantic::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 4px; opacity: .15;
}
.lb-semantic-header {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .55rem;
}
.lb-semantic-emoji { font-size: 1.1rem; flex-shrink: 0; }
.lb-semantic-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em;
}
.lb-semantic-body {
  font-size: .92rem; line-height: 1.65;
}

/* Warning — orange/red */
.lb-warning {
  background: linear-gradient(135deg, #FFF4E0, #FFF8EC);
  border-color: #F5A623;
}
.lb-warning .lb-semantic-title { color: #8B4500; }
.lb-warning .lb-semantic-body  { color: #5A2D00; }

/* Tip — blue */
.lb-tip {
  background: linear-gradient(135deg, #EAF4FF, #F0F8FF);
  border-color: var(--blue);
}
.lb-tip .lb-semantic-title { color: #003080; }
.lb-tip .lb-semantic-body  { color: #001A4D; }

/* Important — yellow/gold */
.lb-important {
  background: linear-gradient(135deg, #FFFBE8, #FFFDF5);
  border-color: #FFD60A;
}
.lb-important .lb-semantic-title { color: #7A5500; }
.lb-important .lb-semantic-body  { color: #4A3000; }
.dark-theme .lb-important .lb-semantic-title {
  color: #FFFFFF;
}

.dark-theme .lb-important .lb-semantic-body {
  color: rgba(255,255,255,.82);
}

/* Safety — red */
.lb-safety {
  background: linear-gradient(135deg, #FFF0EF, #FFF5F5);
  border-color: var(--red);
}
.lb-safety .lb-semantic-title { color: #8B0000; }
.lb-safety .lb-semantic-body  { color: #5A0000; }

/* Service Standard — purple */
.lb-service-standard {
  background: linear-gradient(135deg, #F5EEFF, #FAF5FF);
  border-color: #AF52DE;
}
.lb-service-standard .lb-semantic-title { color: #5A1F8A; }
.lb-service-standard .lb-semantic-body  { color: #3A0F5A; }

/* Legacy HTML block */
.lb-html {
  line-height: 1.75; color: var(--clr-text);
}
.lb-html h1,.lb-html h2,.lb-html h3 {
  font-weight: 800; letter-spacing: -.02em; margin: 1.25rem 0 .5rem;
}
.lb-html p  { margin: 0 0 .85rem; }
.lb-html ul,.lb-html ol { padding-left: 1.5rem; margin: 0 0 .85rem; }
.lb-html li { margin-bottom: .3rem; }
.lb-html img { max-width: 100%; border-radius: var(--radius-sm); }

/* =========================================================
   DARK THEME — LESSON BLOCKS
========================================================= */

/* WARNING */
.dark-theme .lb-warning{
  background: linear-gradient(135deg,#2B1B0F,#1A120C);
  border-color:#F59E0B;
}

.dark-theme .lb-warning .lb-semantic-title{
  color:#FBBF24;
}

.dark-theme .lb-warning .lb-semantic-body{
  color:#FED7AA;
}


/* TIP */
.dark-theme .lb-tip{
  background: linear-gradient(135deg,#0F172A,#111827);
  border-color:#3B82F6;
}

.dark-theme .lb-tip .lb-semantic-title{
  color:#60A5FA;
}

.dark-theme .lb-tip .lb-semantic-body{
  color:#DBEAFE;
}


/* IMPORTANT */
.dark-theme .lb-important{
  background: linear-gradient(135deg,#2A2110,#1B160B);
  border-color:#FACC15;
}

.dark-theme .lb-important .lb-semantic-title{
  color:#FEF08A;
}

.dark-theme .lb-important .lb-semantic-body{
  color:#FDE68A;
}


/* SAFETY */
.dark-theme .lb-safety{
  background: linear-gradient(135deg,#2A1010,#180A0A);
  border-color:#EF4444;
}

.dark-theme .lb-safety .lb-semantic-title{
  color:#F87171;
}

.dark-theme .lb-safety .lb-semantic-body{
  color:#FECACA;
}


/* SERVICE STANDARD */
.dark-theme .lb-service-standard{
  background: linear-gradient(135deg,#1E1333,#140D24);
  border-color:#A855F7;
}

.dark-theme .lb-service-standard .lb-semantic-title{
  color:#D8B4FE;
}

.dark-theme .lb-service-standard .lb-semantic-body{
  color:#E9D5FF;
}

/* ============================================================
   INLINE LESSON BUILDER (admin/lesson_builder.php)
   ============================================================ */

/* Two-column layout */
.bldr-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .bldr-wrap { grid-template-columns: 1fr; }
}

/* ── Left: block list ─────────────────────────────────────── */
.bldr-list {
  display: flex; flex-direction: column; gap: .6rem;
}
.bldr-empty {
  text-align: center; padding: 3.5rem 1.5rem;
  color: var(--clr-text-muted);
  background: var(--clr-surface);
  border: 2px dashed var(--clr-border);
  border-radius: var(--radius);
}
.bldr-empty p { margin:.5rem 0 0; font-size:.88rem; line-height:1.6; }

/* Block card */
.bldr-card {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, border-color .15s;
}
.bldr-card:hover        { box-shadow: var(--shadow-card); }
.bldr-card--active      { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }

.bldr-card-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem;
  background: var(--clr-surface-2);
  border-bottom: .5px solid var(--clr-separator);
  gap: .5rem;
}
.bldr-type-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; padding: .18rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--clr-surface); color: var(--clr-text-muted);
  border: 1px solid var(--clr-border); white-space: nowrap;
}
.bldr-type-heading         { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }
.bldr-type-warning         { background: #FFF4E0; color: #8B4500; border-color: #F5A623; }
.bldr-type-tip             { background: var(--blue-light); color: #003080; border-color: var(--blue); }
.bldr-type-important       { background: #FFFBE8; color: #7A5500; border-color: #FFD60A; }
.bldr-type-safety          { background: var(--red-light); color: #8b1a14; border-color: var(--red); }
.bldr-type-service_standard{ background: #F5EEFF; color: #5A1F8A; border-color: #AF52DE; }

.bldr-card-actions { display: flex; gap: .2rem; align-items: center; flex-shrink: 0; }

.bldr-icon-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: none; cursor: pointer; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--clr-text-muted);
  transition: all .15s; text-decoration: none; font-family: inherit;
}
.bldr-icon-btn:hover        { background: var(--clr-surface-2); color: var(--clr-text); }
.bldr-icon-btn--edit:hover  { background: var(--primary-light); color: var(--primary-dark); }
.bldr-icon-btn--edit.active { background: var(--primary); color: #fff; }
.bldr-icon-btn--del:hover   { background: var(--red-light); color: var(--red); }

.bldr-card-preview { padding: .7rem .9rem; min-height: 36px; }

/* Previews */
.bldr-prev-heading   { font-weight: 800; color: var(--clr-text); }
.bldr-prev-h2        { font-size: 1.05rem; }
.bldr-prev-h3        { font-size: .92rem; }
.bldr-prev-h4        { font-size: .82rem; color: var(--clr-text-muted); }
.bldr-prev-text      { font-size: .82rem; color: var(--clr-text-muted); line-height: 1.5; }
.bldr-prev-list      { margin: 0; padding-left: 1.1rem; font-size: .8rem; color: var(--clr-text-muted); }
.bldr-prev-list li   { margin-bottom: .1rem; }
.bldr-prev-list .muted { color: var(--clr-text-tertiary); list-style: none; margin-left: -1.1rem; }
.bldr-prev-img       { width: 100%; max-height: 90px; object-fit: cover; border-radius: 6px; display: block; }
.bldr-prev-empty     { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--clr-text-muted); }
.bldr-prev-gallery   { display: flex; gap: .3rem; }
.bldr-prev-gallery img { width: 56px; height: 40px; object-fit: cover; border-radius: 5px; }
.bldr-prev-divider   { text-align: center; color: var(--clr-text-tertiary); font-size: .7rem; border-top: 1px solid var(--clr-border); padding-top: .3rem; margin: .2rem 0; }
.bldr-prev-semantic  { border-radius: 6px; padding: .5rem .75rem; font-size: .8rem; }
.bldr-prev-warning         { background: #FFF4E0; }
.bldr-prev-tip             { background: var(--blue-light); }
.bldr-prev-important       { background: #FFFBE8; }
.bldr-prev-safety          { background: var(--red-light); }
.bldr-prev-service_standard{ background: #F5EEFF; }
.bldr-prev-semantic-title  { font-weight: 800; font-size: .7rem; margin-bottom: .15rem; }

/* ── Right: editor panel ──────────────────────────────────── */
.bldr-editor {
  position: sticky; top: calc(var(--topnav-h) + .75rem);
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - var(--topnav-h) - 1.5rem);
  overflow-y: auto;
}
.bldr-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem;
  font-weight: 800; font-size: .9rem;
  border-bottom: .5px solid var(--clr-border);
  background: var(--clr-surface-2);
  position: sticky; top: 0; z-index: 10;
}

/* Type picker grid */
.bldr-picker-section-label {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--clr-text-muted);
  padding: .75rem 1rem .35rem;
}
.bldr-picker-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: .4rem; padding: 0 1rem .75rem;
}
.bldr-type-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: .2rem; padding: .65rem .25rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--clr-border);
  background: var(--tbg, var(--clr-surface-2));
  cursor: pointer; font-family: var(--font-sans);
  transition: all .15s;
}
.bldr-type-btn:hover {
  border-color: var(--tfg, var(--primary));
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.bldr-type-btn.selected {
  border-color: var(--tfg, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tfg, var(--primary)) 25%, transparent);
}
.bldr-type-emoji { font-size: 1.35rem; line-height: 1; }
.bldr-type-name  { font-size: .62rem; font-weight: 700; color: var(--tfg, var(--clr-text-muted)); text-align: center; }

/* Divider between picker and form */
.bldr-form-divider {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1rem;
  font-size: .78rem; font-weight: 800;
  border-top: .5px solid var(--clr-border);
  background: var(--primary-pale);
  color: var(--primary-dark);
}

/* Block fill form */
.bldr-form { padding: .9rem 1rem; }
.bf-field   { margin-bottom: .85rem; }
.bf-hint    {
  font-size: .68rem; font-weight: 400;
  color: var(--clr-text-muted); margin-left: .35rem;
}
.bf-field--center { text-align: center; }
.bf-hint-block {
  font-size: .78rem; color: var(--clr-text-muted);
  margin-top: .5rem; line-height: 1.5;
}

/* Segmented control (heading size) */
.bf-segmented {
  display: flex; gap: .3rem; margin-top: .35rem;
}
.bf-seg-opt {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: .45rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--clr-border);
  font-size: .78rem; font-weight: 700; cursor: pointer;
  background: var(--clr-surface-2); color: var(--clr-text-muted);
  transition: all .15s;
}
.bf-seg-opt input { display: none; }
.bf-seg-opt.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.bf-seg-opt:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* Gallery row */
.bf-gallery-row {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .55rem .65rem; border-radius: var(--radius-sm);
  background: var(--clr-surface-2); margin-bottom: .4rem;
}
.bf-gallery-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--clr-border); display: flex; align-items: center;
  justify-content: center; font-size: .7rem; font-weight: 800;
  color: var(--clr-text-muted); flex-shrink: 0; margin-top: .25rem;
}
.bf-gallery-thumb {
  width: 54px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
}
.bf-gallery-fields { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 0; }

/* Divider preview */
.bf-divider-preview {
  height: 2px; background: var(--clr-border); border-radius: 2px;
  margin: .85rem 0 .5rem; position: relative; display: flex;
  align-items: center; justify-content: center;
}
.bf-divider-preview span {
  background: var(--clr-surface); padding: 0 .65rem;
  font-size: .75rem; color: var(--clr-text-muted); position: absolute;
}

/* Image preview inside edit form */
.bf-img-preview {
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: .65rem;
}
.bf-img-preview img {
  width: 100%; max-height: 160px; object-fit: cover; display: block;
}

/* form-control-sm */
.form-control-sm {
  padding: .35rem .65rem; font-size: .8rem;
  border-radius: var(--radius-sm);
}

/* ============================================================
   DARK THEME
   ============================================================ */
.dark-theme {
  --clr-bg:           #111111;
  --clr-surface:      #1C1C1E;
  --clr-surface-2:    #2C2C2E;
  --clr-surface-raised: #3A3A3C;
  --clr-border:       rgba(255,255,255,.10);
  --clr-separator:    rgba(255,255,255,.07);
  --clr-text:         #F2F2F7;
  --clr-text-muted:   #8E8E93;
  --clr-text-tertiary:#636366;
  --primary-pale:     #2A1F0A;
  --clr-primary-lt:   rgba(245,166,35,.15);
  --clr-primary-lt2:  rgba(245,166,35,.08);
  --clr-success-lt:   rgba(52,199,89,.12);
  --clr-danger-lt:    rgba(255,59,48,.12);
  --clr-warning-lt:   rgba(255,159,10,.12);
  --clr-info-lt:      rgba(0,122,255,.12);
  --clr-secondary-lt: rgba(88,86,214,.12);
}

/* ===== DARK THEME FIXES ===== */

.dark-theme {
  --card-bg: #1C1C1E;
  --border: rgba(255,255,255,.08);
  --primary: #F5A623;
}

.dark-theme .main-content {
  background: #111111;
}

.dark-theme .cp-hero,
.dark-theme .cp-kpi,
.dark-theme .cand-card,
.dark-theme .module-card,
.dark-theme .lesson-module-card,
.dark-theme .lesson-admin-card,
.dark-theme .vocab-admin-card,
.dark-theme .module-simple-card {
  background: #1C1C1E;
  border-color: rgba(255,255,255,.08);
  color: var(--clr-text);
}

.dark-theme .module-card-img,
.dark-theme .module-app-cover {
  background: linear-gradient(135deg, #2C2C2E, #1C1C1E) !important;
}

.dark-theme .module-card-title,
.dark-theme .lesson-name,
.dark-theme .card-title,
.dark-theme .page-title {
  color: #F2F2F7;
}

.dark-theme .module-card-sub,
.dark-theme .lesson-meta,
.dark-theme .text-muted {
  color: #8E8E93 !important;
}

.dark-theme .lesson-list {
  background: #1C1C1E;
  border-color: rgba(255,255,255,.08);
}

.dark-theme .lesson-item {
  background: #1C1C1E;
}

.dark-theme .lesson-item:hover {
  background: #2C2C2E;
}

.dark-theme .module-card .btn,
.dark-theme .btn-primary {
  background: var(--primary);
  color: #111111;
}

.dark-theme .badge-primary,
.dark-theme .module-card-price {
  background: rgba(245,166,35,.14);
  color: var(--primary);
}

.dark-theme body { background: var(--clr-bg); color: var(--clr-text); }

/* Nav & surfaces */
.dark-theme .topnav        { background: #1C1C1E; border-bottom-color: rgba(255,255,255,.08); }
.dark-theme .sidebar       { background: #1C1C1E; border-right-color:  rgba(255,255,255,.08); }
.dark-theme .bottom-nav    { background: #1C1C1E; border-top-color:    rgba(255,255,255,.08); }
.dark-theme .card          { background: #1C1C1E; }
.dark-theme .modal-box     { background: #1C1C1E; }
.dark-theme .nav-item      { color: var(--clr-text-muted); }
.dark-theme .nav-item.active,
.dark-theme .nav-item:hover { background: rgba(245,166,35,.12); color: var(--primary); }
.dark-theme .nav-label     { color: var(--clr-text-tertiary); }
.dark-theme .bottom-nav-item          { color: var(--clr-text-muted); }
.dark-theme .bottom-nav-item.active   { color: var(--primary); }

/* Inputs */
.dark-theme .form-control,
.dark-theme .form-select,
.dark-theme select.form-control {
  background: #2C2C2E;
  border-color: rgba(255,255,255,.12);
  color: var(--clr-text);
}
.dark-theme .form-control:focus {
  background: #3A3A3C;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(245,166,35,.20);
}
.dark-theme .form-control::placeholder { color: #636366; }
.dark-theme .input-group-text {
  background: #2C2C2E;
  border-color: rgba(255,255,255,.12);
  color: var(--clr-text-muted);
}

/* Tables */
.dark-theme .data-table thead th {
  background: #2C2C2E;
  color: var(--clr-text-muted);
  border-bottom-color: rgba(255,255,255,.08);
}
.dark-theme .data-table tbody tr { border-bottom-color: rgba(255,255,255,.06); }
.dark-theme .data-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* Buttons */
.dark-theme .btn-outline,
.dark-theme .btn-outline-secondary {
  border-color: rgba(255,255,255,.18);
  color: var(--clr-text-muted);
}
.dark-theme .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.dark-theme .btn-secondary { background: #3A3A3C; color: var(--clr-text); border-color: transparent; }
.dark-theme .btn-secondary:hover { background: #48484A; }

/* Module/lesson cards */
.dark-theme .module-block   { background: #1C1C1E; border-color: rgba(255,255,255,.08); }
.dark-theme .module-header  { background: #2C2C2E; }
.dark-theme .lesson-item    { border-bottom-color: rgba(255,255,255,.06); }
.dark-theme .lesson-item:hover { background: rgba(255,255,255,.04); }

/* Lesson blocks */
.dark-theme .lb-semantic { background: var(--clr-surface-2); }
.dark-theme .lb-warning  { border-color: rgba(255,159,10,.35); }
.dark-theme .lb-tip      { border-color: rgba(52,199,89,.35);  }
.dark-theme .lb-important{ border-color: rgba(245,166,35,.35); }
.dark-theme .lb-safety   { border-color: rgba(255,59,48,.35);  }
.dark-theme .lb-service-standard { border-color: rgba(88,86,214,.35); }

/* Builder */
.dark-theme .bldr-card  { background: #1C1C1E; border-color: rgba(255,255,255,.08); }
.dark-theme .bldr-type-btn { background: #2C2C2E; border-color: rgba(255,255,255,.08); color: var(--clr-text-muted); }
.dark-theme .bldr-type-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(245,166,35,.08); }
.dark-theme .bldr-editor-panel { background: #1C1C1E; }
.dark-theme .bldr-form-wrap    { background: #2C2C2E; border-color: rgba(255,255,255,.08); }

/* Flash cards / duo */
.dark-theme .duo-chrome  { background: #1C1C1E; border-color: rgba(255,255,255,.08); }
.dark-theme .duo-step    { background: #1C1C1E; }
.dark-theme .duo-feedback { background: #2C2C2E; }
.dark-theme .duo-opt     { background: #2C2C2E; border-color: rgba(255,255,255,.10); }
.dark-theme .duo-opt:hover { border-color: var(--primary); }

/* Misc */
.dark-theme .badge-secondary { background: #3A3A3C; color: var(--clr-text-muted); }
.dark-theme .form-group-card { background: #2C2C2E; border-color: rgba(255,255,255,.08); }
.dark-theme .page-header     { border-bottom-color: rgba(255,255,255,.08); }
.dark-theme .dropdown-info   { border-bottom-color: rgba(255,255,255,.08); }
.dark-theme .user-dropdown   { background: #1C1C1E; border-color: rgba(255,255,255,.10);
                                box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.dark-theme .dropdown-item   { color: var(--clr-text-muted); }
.dark-theme .dropdown-item:hover { background: rgba(255,255,255,.06); color: var(--clr-text); }

/* Vocab study screen */
.dark-theme .vocab-study-screen { background: #111111; }
.dark-theme .vocab-study-header  { background: #1C1C1E; border-bottom-color: rgba(255,255,255,.08); }
.dark-theme .vocab-fc-front,
.dark-theme .vocab-fc-back { background: #1C1C1E; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.dark-theme .vocab-playlist-card { background: #1C1C1E; border-color: rgba(255,255,255,.08); }
.dark-theme .vpc-footer { background: #2C2C2E; border-top-color: rgba(255,255,255,.06); }

/* Dark toggle button */
.topnav-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--clr-text-muted); font-size: 1rem;
  transition: background .15s, color .15s;
}
.topnav-icon-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); }
.dark-theme .topnav-icon-btn { color: #FF9F0A; }
.dark-theme .topnav-icon-btn:hover { background: rgba(255,255,255,.08); }

/* ============================================================
   VOCABULARY PLAYLIST OVERVIEW
   ============================================================ */
.vocab-playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding-bottom: 2rem;
}

.vocab-playlist-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border-radius: var(--radius);
  border: 1.5px solid var(--clr-border);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  position: relative;
}
.vocab-playlist-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,.10);
  border-color: var(--cat-color, var(--primary));
  text-decoration: none;
  color: inherit;
}

/* Left color accent */
.vpc-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--cat-color, var(--primary));
  border-radius: 4px 0 0 4px;
}

.vpc-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1rem 1.35rem;
}

.vpc-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cat-color, var(--primary)) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

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

.vpc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vpc-meta {
  font-size: .78rem;
  color: var(--clr-text-muted);
  margin-bottom: .4rem;
}

.vpc-lang-tag {
  font-weight: 600;
  font-size: .75rem;
}
.vpc-lang-de { color: #FF9F0A; }
.vpc-lang-en { color: #007AFF; }

.vpc-diffs {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}

.vpc-diff-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--dot-color, #8E8E93) 15%, transparent);
  color: var(--dot-color, #8E8E93);
  font-size: .68rem;
  font-weight: 700;
}

/* Progress ring */
.vpc-ring-wrap {
  position: relative;
  width: 48px; height: 48px;
  flex-shrink: 0;
}

.vpc-ring {
  width: 48px; height: 48px;
  transform: rotate(-90deg);
}

.vpc-ring-bg {
  fill: none;
  stroke: var(--clr-border);
  stroke-width: 3;
}

.vpc-ring-fill {
  fill: none;
  stroke: var(--cat-color, var(--primary));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}

.vpc-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: var(--clr-text-muted);
}

/* Card footer */
.vpc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.1rem .6rem 1.35rem;
  background: var(--clr-surface-2);
  border-top: 1px solid var(--clr-separator);
}

.vpc-progress-text {
  font-size: .78rem;
  color: var(--clr-text-muted);
}

.vpc-start-btn {
  font-size: .8rem;
  font-weight: 600;
  color: var(--cat-color, var(--primary));
}

/* ============================================================
   VOCABULARY STUDY MODE (full-screen flashcard)
   ============================================================ */
.vocab-study-screen {
  position: fixed;
  inset: 0;
  background: var(--clr-bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.vocab-study-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  height: 56px;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-separator);
  flex-shrink: 0;
}

.vocab-back-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  text-decoration: none;
  font-size: .9rem;
  transition: background .15s;
  flex-shrink: 0;
}
.vocab-back-btn:hover { background: var(--clr-border); color: var(--clr-text); }

.vocab-study-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  text-align: center;
}

/* Language toggle pill */
.vocab-lang-pill {
  display: flex;
  background: var(--clr-surface-2);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.vocab-lang-btn {
  padding: .25rem .75rem;
  border-radius: 16px;
  border: none;
  background: transparent;
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vocab-lang-btn.active {
  background: var(--cat-color, var(--primary));
  color: #fff;
}

/* Progress bar */
.vocab-progress-bar {
  height: 4px;
  background: var(--clr-border);
  flex-shrink: 0;
}
.vocab-progress-fill {
  height: 100%;
  background: var(--cat-color, var(--primary));
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* Card stage */
.vocab-card-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem 2rem;
  overflow: hidden;
}

/* 3-D flip scene */
.vocab-fc-scene {
  perspective: 1000px;
  width: 100%;
  max-width: 420px;
  cursor: pointer;
}

.vocab-fc-card {
  position: relative;
  width: 100%;
  min-height: 260px;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.vocab-fc-card.flipped { transform: rotateY(180deg); }

.vocab-fc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  background: var(--clr-surface);
  box-shadow: 0 8px 40px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.5rem;
  gap: .75rem;
  min-height: 260px;
  border: 1.5px solid var(--clr-border);
}

.vocab-fc-back {
  transform: rotateY(180deg);
  background: color-mix(in srgb, var(--cat-color, var(--primary)) 8%, var(--clr-surface));
}

/* Difficulty badge */
.vocab-diff-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  padding: .2rem .65rem;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}

/* Card image */
.vocab-fc-image-wrap {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-surface-2);
}
.vocab-fc-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main word */
.vocab-fc-word {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 800;
  color: var(--clr-text);
  letter-spacing: -.02em;
  text-align: center;
}

.vocab-fc-hint {
  font-size: .8rem;
  color: var(--clr-text-tertiary);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Audio button */
.vocab-audio-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cat-color, var(--primary));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: transform .15s, opacity .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.vocab-audio-btn:hover { transform: scale(1.1); }
.vocab-audio-btn:active { transform: scale(.95); }

/* Back face */
.vocab-fc-translation {
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--clr-text);
  text-align: center;
}

.vocab-fc-example {
  font-size: .85rem;
  color: var(--clr-text-muted);
  font-style: italic;
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
}

/* Counter */
.vocab-counter {
  font-size: .85rem;
  color: var(--clr-text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Action buttons */
.vocab-actions {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 360px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.vocab-actions.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.vocab-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .85rem .5rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  transition: transform .15s, box-shadow .15s;
}
.vocab-action-btn:active { transform: scale(.96); }
.vocab-action-btn i { font-size: 1.3rem; }

.vocab-action-skip {
  background: var(--clr-danger-lt);
  color: var(--clr-danger);
}
.vocab-action-skip:hover { background: rgba(255,59,48,.18); }

.vocab-action-know {
  background: var(--clr-success-lt);
  color: var(--clr-success);
}
.vocab-action-know:hover { background: rgba(52,199,89,.18); }

/* ── Completion screen ──────────────────────────────────────── */
.vocab-complete-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.vocab-complete-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  width: 100%;
}

.vocab-complete-emoji {
  font-size: 4rem;
  line-height: 1;
}

.vocab-complete-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--clr-text);
  margin: 0;
}

.vocab-complete-sub {
  font-size: 1rem;
  color: var(--clr-text-muted);
  margin: 0;
}

.vocab-complete-stats {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 1.25rem 2rem;
  background: var(--clr-surface);
  border-radius: var(--radius);
  border: 1.5px solid var(--clr-border);
  width: 100%;
  max-width: 320px;
  margin: .25rem 0 .75rem;
}

.vocab-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.vocab-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.vocab-stat span:last-child {
  font-size: .75rem;
  color: var(--clr-text-muted);
  font-weight: 500;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .vocab-playlist-grid {
    grid-template-columns: 1fr;
  }
  .vocab-card-stage {
    padding: 1rem .75rem 1.5rem;
    gap: 1rem;
  }
  .vocab-fc-word { font-size: 1.75rem; }
  .vocab-fc-face { padding: 1.5rem 1rem; min-height: 220px; }
}


/* ============================================================
   CANDIDATE CARD GRID  (.cand-card)
   ============================================================ */
.cand-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.cand-card {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s, box-shadow .18s;
    position: relative;
}
.cand-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
}

.cand-card-bar {
    height: 5px;
    background: var(--card-bar, #94a3b8);
}

.cand-card-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    position: relative;
}
.cand-card-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.cand-card-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
}
.cand-card-status-dot {
    position: absolute;
    bottom: 2px;
    right: calc(50% - 40px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.cand-card-name {
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text, #1e293b);
    margin: .75rem 1rem .15rem;
    line-height: 1.3;
}
.cand-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center;
    padding: 0 1rem;
}
.cand-card-crew {
    font-size: .72rem;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-muted, #64748b);
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: .03em;
}
.cand-card-pos {
    font-size: .72rem;
    color: var(--text-muted, #64748b);
    padding: 2px 8px;
}
.cand-card-group {
    text-align: center;
    font-size: .75rem;
    color: var(--text-muted, #64748b);
    margin: .3rem 1rem 0;
}
.cand-card-group i { margin-right: .2rem; }

.cand-card-badges {
    display: flex;
    justify-content: center;
    margin: .5rem 1rem 0;
}

.cand-card-progress-wrap {
    padding: .6rem 1.1rem 0;
}
.cand-card-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--text-muted, #64748b);
    margin-bottom: .25rem;
}
.cand-card-progress-bar {
    height: 6px;
    background: var(--bg-subtle, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}
.cand-card-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.cand-card-stats {
    display: flex;
    justify-content: space-around;
    padding: .65rem 1rem;
    margin-top: .3rem;
    border-top: 1px solid var(--border, #e2e8f0);
}
.cand-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    font-size: .75rem;
    color: var(--text-muted, #64748b);
}
.cand-card-stat i { font-size: .85rem; }
.ccs-pass { color: #22c55e; font-weight: 700; }
.ccs-fail { color: #ef4444; font-weight: 700; }
.ccs-none { color: var(--text-muted, #94a3b8); }

.cand-card-actions {
    display: flex;
    gap: .4rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--border, #e2e8f0);
    margin-top: auto;
}
.cand-card-actions .btn-primary { flex: 1; }

/* Dark theme overrides */
.dark-theme .cand-card { background: var(--card-bg); border-color: var(--border); }
.dark-theme .cand-card-avatar-placeholder { border-color: #374151; }
.dark-theme .cand-card-status-dot { border-color: #1f2937; }


/* ============================================================
   CANDIDATE PROFILE / DOSSIER  (.cp-*)
   ============================================================ */

/* Breadcrumb */
.cp-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--text-muted, #64748b);
}
.cp-breadcrumb a {
    color: var(--primary, #f97316);
    text-decoration: none;
}
.cp-breadcrumb a:hover { text-decoration: underline; }
.cp-breadcrumb i.fa-chevron-right { font-size: .65rem; opacity: .5; }

/* Hero card */
.cp-hero {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.cp-hero-bar {
    height: 6px;
    background: var(--hero-bar, #94a3b8);
}
.cp-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    flex-wrap: wrap;
}

.cp-hero-avatar-wrap { flex-shrink: 0; }
.cp-hero-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.cp-hero-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
}

.cp-hero-info { flex: 1; min-width: 200px; }
.cp-hero-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text, #1e293b);
    margin: 0 0 .4rem;
}
.cp-hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .85rem;
    color: var(--text-muted, #64748b);
}
.cp-hero-sub span i { margin-right: .25rem; }

/* KPI tiles */
.cp-kpi-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.cp-kpi {
    background: var(--bg-subtle, #f8fafc);
    border-radius: 10px;
    padding: .6rem 1.1rem;
    text-align: center;
    min-width: 70px;
    border: 1px solid var(--border, #e2e8f0);
}
.cp-kpi-val {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text, #1e293b);
}
.cp-kpi-label {
    font-size: .65rem;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .2rem;
}

/* Two-column layout */
.cp-layout {
    display: grid;
    grid-template-columns: 540px 1fr !important;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .cp-layout { grid-template-columns: 1fr; }
    .cp-kpi-row { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Cards inside profile */
.cp-card { margin-bottom: 1.25rem; }
.cp-card .card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .9rem;
    padding: .875rem 1.1rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    color: var(--text, #1e293b);
}
.cp-card .card-header i { color: var(--primary, #f97316); }

/* Info grid */
.cp-info-grid { padding: .5rem 0; }
.cp-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .5rem 1.1rem;
    border-bottom: 1px solid var(--border, #f1f5f9);
    font-size: .875rem;
}
.cp-info-row:last-child { border-bottom: none; }
.cp-info-label { color: var(--text-muted, #64748b); font-weight: 500; }
.cp-info-val { color: var(--text, #1e293b); text-align: right; max-width: 55%; word-break: break-word; }

/* Exam table */
.cp-table { font-size: .85rem; margin: 0; }
.cp-table thead th { padding: .6rem 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.cp-table tbody td { padding: .6rem 1rem; }
.cp-row-pass { border-left: 3px solid #22c55e; }
.cp-row-fail { border-left: 3px solid #ef4444; }

/* Overall progress bar */
.cp-overall-bar-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    font-size: .8rem;
    color: var(--text-muted);
}
.cp-overall-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--bg-subtle, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
}
.cp-overall-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .5s ease;
}

/* Module accordion */
.cp-module { border-bottom: 1px solid var(--border, #f1f5f9); }
.cp-module:last-child { border-bottom: none; }

.cp-module-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.1rem;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.cp-module-header:hover { background: var(--bg-subtle, #f8fafc); }
.cp-module-icon { font-size: .9rem; flex-shrink: 0; color: var(--text-muted); }
.cp-module-title { font-weight: 600; font-size: .875rem; flex: 1; color: var(--text); }
.cp-module-count {
    font-size: .75rem;
    background: var(--bg-subtle, #e2e8f0);
    padding: 2px 7px;
    border-radius: 99px;
    color: var(--text-muted);
}
.cp-module-mini-bar {
    width: 60px;
    height: 5px;
    background: var(--bg-subtle, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.cp-module-mini-fill {
    height: 100%;
    background: var(--primary, #f97316);
    border-radius: 3px;
}
.cp-module-done .cp-module-mini-fill { background: #22c55e; }
.cp-module-chevron {
    font-size: .65rem;
    color: var(--text-muted);
    transition: transform .2s;
    flex-shrink: 0;
}
.cp-module.cp-module-open .cp-module-chevron { transform: rotate(180deg); }

.cp-module-lessons {
    display: none;
    padding: 0 1.1rem .5rem 2.4rem;
}
.cp-module.cp-module-open .cp-module-lessons { display: block; }

.cp-lesson-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    font-size: .82rem;
    color: var(--text-muted, #64748b);
    border-bottom: 1px dashed var(--border, #f1f5f9);
}
.cp-lesson-row:last-child { border-bottom: none; }
.cp-lesson-done .cp-lesson-title { color: var(--text); }
.cp-lesson-icon { flex-shrink: 0; font-size: .8rem; }
.cp-lesson-title { flex: 1; }
.cp-lesson-req {
    font-size: .68rem;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 4px;
}
.cp-lesson-score {
    font-size: .72rem;
    background: #dcfce7;
    color: #166534;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.cp-lesson-date {
    font-size: .7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Attendance legend */
.cp-att-legend {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--text-muted);
    margin-left: auto;
    flex-wrap: wrap;
}
.cp-att-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: .1rem;
}

/* Attendance timeline strip */
.cp-att-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.cp-att-pip {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    cursor: default;
    transition: transform .1s;
}
.cp-att-pip:hover { transform: scale(1.4); }

/* Attendance status badges in table */
.cp-att-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
}
.cp-att-badge.cp-att-present  { background: #dcfce7; color: #166534; }
.cp-att-badge.cp-att-late     { background: #fef3c7; color: #92400e; }
.cp-att-badge.cp-att-absent   { background: #fee2e2; color: #991b1b; }
.cp-att-badge.cp-att-excused  { background: #ede9fe; color: #5b21b6; }

/* Row left border by status */
.cp-att-row.cp-att-present td:first-child  { border-left: 3px solid #22c55e; }
.cp-att-row.cp-att-late    td:first-child  { border-left: 3px solid #f59e0b; }
.cp-att-row.cp-att-absent  td:first-child  { border-left: 3px solid #ef4444; }
.cp-att-row.cp-att-excused td:first-child  { border-left: 3px solid #8b5cf6; }

/* Empty state */
.cp-empty {
    padding: 2.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .9rem;
}
.cp-empty i { display: block; font-size: 2rem; margin-bottom: .6rem; opacity: .3; }

/* Dark theme */


/* =========================================
   APPLE TRAINING MODULE CARDS
========================================= */

.module-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
}

.module-card{
  position:relative;

  background:
    rgba(255,255,255,.82);

  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border:
    1px solid rgba(255,255,255,.7);

  border-radius:32px;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(180,120,40,.08),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.module-card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 20px 45px rgba(180,120,40,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.module-card:active{
  transform:scale(.985);
}

/* TOP COVER */

.module-card-img{
  height:155px !important;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.module-card-img::after{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.0),
      rgba(255,255,255,.08)
    );
}

/* BIG EMOJI */

.module-emoji{
  font-size:4rem !important;

  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,.08));

  transform:
    translateY(2px);
}

/* PROGRESS BADGE */

.module-progress-ring{
  position:absolute;

  top:14px;
  right:14px;

  background:
    rgba(255,255,255,.88);

  backdrop-filter:blur(14px);

  border-radius:999px;

  padding:.45rem .75rem;

  font-size:.72rem;
  font-weight:800;

  color:var(--primary-dark);

  box-shadow:
    0 4px 12px rgba(0,0,0,.05);
}

/* BODY */

.module-card-body{
  padding:1.15rem;
}

.module-card-tag{
  display:flex;
  align-items:center;
  gap:.4rem;

  font-size:.68rem;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:var(--primary);

  margin-bottom:.55rem;
}

/* TITLE */

.module-card-title{
  font-size:1.15rem !important;
  font-weight:900 !important;

  letter-spacing:-.04em;

  line-height:1.2;

  margin-bottom:.4rem;
}

/* SUB */

.module-card-sub{
  color:var(--clr-text-muted);

  font-size:.82rem;

  margin-bottom:1rem;

  line-height:1.45;
}

/* FOOTER */

.module-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:.75rem;
}

/* BADGE */

.module-card-price{
  display:flex;
  align-items:center;
  gap:.4rem;

  padding:.45rem .8rem !important;

  border-radius:999px;

  font-size:.74rem !important;
  font-weight:800 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* BUTTON */

.module-card .btn{
  border-radius:14px !important;

  padding:
    .55rem .9rem !important;

  font-size:.78rem !important;
  font-weight:800 !important;

  box-shadow:
    0 8px 18px rgba(245,166,35,.18);
}

/* MOBILE */

@media (max-width:700px){

  .module-cards-grid{
    grid-template-columns:1fr;
  }

  .module-card-img{
    height:170px !important;
  }

  .module-emoji{
    font-size:4.5rem !important;
  }

}

/* ===== Candidate Dashboard Fix ===== */

/* 2 cards per row feeling */
.module-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.module-card {
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 45px rgba(90,55,15,.1);
}

.module-card-img {
  height: 135px !important;
}

.module-emoji {
  font-size: 3.4rem !important;
}

.module-card-body {
  padding: 1rem;
}

.module-card-title {
  font-size: 1.05rem !important;
  line-height: 1.2;
}

.module-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* All Lessons block */
.module-block {
  background: rgba(255,255,255,.9);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 14px 35px rgba(90,55,15,.08);
}

.module-header {
  padding: 1rem 1.1rem;
  background: white;
  border-radius: 28px 28px 0 0;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.module-title {
  font-size: 1rem;
  font-weight: 850;
  color: var(--clr-text);
}

.module-meta {
  margin-left: auto;
  font-size: .8rem;
  color: var(--clr-text-muted);
}

.lesson-list {
  background: white;
  border: none;
  border-radius: 0 0 28px 28px;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  border-top: 1px solid var(--clr-separator);
}

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

.lesson-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--clr-text);
}

.lesson-meta {
  margin-top: .25rem;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.lesson-actions {
  display: flex;
  align-items: center;
}

.lesson-actions .btn {
  border-radius: 999px;
  padding: .45rem .85rem !important;
  font-size: .78rem;
  font-weight: 800;
}

/* Mobile: still 2 cards if screen allows */
@media (max-width: 430px) {
  .module-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .module-card-img {
    height: 105px !important;
  }

  .module-emoji {
    font-size: 2.7rem !important;
  }

  .module-card-body {
    padding: .8rem;
  }

  .module-card-title {
    font-size: .88rem !important;
  }

  .module-card-sub {
    font-size: .72rem;
  }

  .module-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
  }

  .module-card .btn {
    width: 100%;
    justify-content: center;
  }
}
.module-hero-clean {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 34px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
}

.module-hero-content {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 68px;
  gap: 1rem;
  align-items: center;
}

.module-hero-clean .module-hero-back {
  margin-bottom: 1rem;
}

.module-hero-clean .module-hero-emoji {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.module-hero-text {
  min-width: 0;
  overflow: hidden;
}

.module-hero-text h1 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 900;
  color: var(--clr-text-tertiary);
  overflow-wrap: anywhere;
}

.module-hero-text p {
  margin: .35rem 0 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--clr-text-muted);
  overflow-wrap: anywhere;
}

.module-hero-clean .module-hero-tag {
  color: var(--hero-accent);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .35rem;
}

.module-hero-clean .module-hero-ring {
  width: 68px;
  height: 68px;
  position: relative;
}

.module-hero-clean .ring-svg {
  width: 68px;
  height: 68px;
}

.module-hero-clean .ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.module-hero-clean .module-hero-bar {
  margin-top: 1.1rem;
  height: 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.09);
  overflow: hidden;
}

.module-hero-clean .module-hero-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.module-hero-clean .module-hero-meta {
  margin-top: .6rem;
  color: var(--clr-text-muted);
  font-size: .9rem;
  font-weight: 700;
}

@media (max-width: 480px) {
  .module-hero-clean {
    padding: 1rem;
    border-radius: 30px;
  }

  .module-hero-content {
    grid-template-columns: 60px minmax(0, 1fr) 54px;
    gap: .75rem;
  }

  .module-hero-clean .module-hero-emoji {
    width: 60px;
    height: 60px;
    min-width: 60px;
    font-size: 1.6rem;
    border-radius: 20px;
  }

  .module-hero-text h1 {
    font-size: 1.18rem;
  }

  .module-hero-text p {
    font-size: .82rem;
  }

  .module-hero-clean .module-hero-ring,
  .module-hero-clean .ring-svg {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-110%) !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .main-content {
    overflow-x: hidden !important;
  }
}

.questions-admin-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.25rem;
}

.question-app-card {
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 50px rgba(90,55,15,.08);
}

.question-cover {
  height: 135px;
  background: linear-gradient(135deg,#fff4d6,#ffe2a8);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-cover-icon {
  width: 86px;
  height: 86px;
  border-radius: 28px;
  background: #fff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
}

.question-count-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #fff;
  color: var(--primary-dark);
  padding: .45rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
}

.question-body {
  padding: 1.15rem;
}

.question-title-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.question-title-row h3 {
  margin: 0;
  color: var(--purple);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.25;
}

.question-status-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px rgba(52,199,89,.12);
  flex-shrink: 0;
}

.question-sub {
  margin: .45rem 0 .8rem;
  color: var(--clr-text-muted);
  font-weight: 650;
}

.question-answers {
  display: grid;
  gap: .45rem;
}

.question-answer {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .65rem .75rem;
  border-radius: 16px;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  font-weight: 650;
}

.question-answer.correct {
  background: var(--green-light);
  color: var(--green);
  font-weight: 900;
}

.question-note {
  margin-top: .8rem;
  padding: .75rem;
  border-radius: 18px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  line-height: 1.4;
}

.question-actions {
  display: flex;
  gap: .55rem;
  margin-top: 1rem;
}

.question-action-btn {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-action-btn.danger {
  background: var(--red-light);
  color: var(--red);
}

.question-empty-card {
  padding: 2rem;
  border-radius: 30px;
  background: #fff;
  color: var(--clr-text-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .questions-admin-layout {
    grid-template-columns: 1fr;
  }

  .questions-grid {
    grid-template-columns: 1fr;
  }
}





.questions-layout,
.questions-admin-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.questions-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.question-module-card {
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 55px rgba(90,55,15,.08);
}

.question-card-cover {
  height: 135px;
  background: linear-gradient(135deg, #fff5d8, #ffe3a8);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-card-icon {
  width: 88px;
  height: 88px;
  border-radius: 30px;
  background: white;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}

.question-card-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: white;
  color: var(--primary-dark);
  font-weight: 900;
}

.question-card-body {
  padding: 1.25rem;
}

.question-card-body h3 {
  margin: 0 0 .45rem;
  color: var(--purple);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.25;
}

.question-card-body p {
  margin: 0 0 .9rem;
  color: var(--clr-text-muted);
  font-weight: 700;
}

.question-card-answers {
  display: grid;
  gap: .5rem;
}

.question-card-answer {
  padding: .65rem .8rem;
  border-radius: 16px;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  font-weight: 700;
}

.question-card-answer.correct {
  background: var(--green-light);
  color: var(--green);
  font-weight: 900;
}

.question-card-explanation {
  margin-top: .8rem;
  padding: .8rem;
  border-radius: 18px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
}

.question-card-actions {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
}

.question-card-btn {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-card-btn.danger {
  background: var(--red-light);
  color: var(--red);
}

.question-empty-card {
  padding: 2rem;
  border-radius: 30px;
  background: white;
  color: var(--clr-text-muted);
  text-align: center;
  font-weight: 800;
}

@media (max-width: 900px) {
  .questions-layout,
  .questions-admin-layout {
    grid-template-columns: 1fr;
  }

  .questions-card-grid {
    grid-template-columns: 1fr;
  }
}
.drag-handle{
  width:20px;
  height:20px;
  border-top-left-radius: 10px;
  background:var(--clr-surface-2);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:grab;

  color:var(--clr-text-muted);
}

.drag-handle:active{
  cursor:grabbing;
}

.drag-ghost{
  opacity:.4;
}
/* ============================================================
   DARK MODE — System preference + [data-theme="dark"]
   Targets all major UI surfaces for full readability
   ============================================================ */








/* ── Dark mode specific overrides ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Topnav */
  .topnav {
    border-bottom-color: rgba(255,200,120,.08);
  }

  /* Sidebar */
  .sidebar {
    border-right-color: rgba(255,200,120,.08);
  }
  .sidebar-link { color: var(--clr-text-muted); }
  .sidebar-link:hover,
  .sidebar-link.active { color: var(--primary); background: rgba(245,166,35,.12); }

  /* Cards */
  .card {
    background: var(--clr-surface);
    border-color: rgba(255,200,120,.08);
  }

  /* Input fields */
  input, textarea, select {
    background: var(--clr-surface-2) !important;
    color: var(--clr-text) !important;
    border-color: rgba(255,200,120,.15) !important;
  }
  input::placeholder, textarea::placeholder {
    color: var(--clr-text-tertiary) !important;
  }
  input:focus, textarea:focus, select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(245,166,35,.18) !important;
  }

  /* Lesson blocks */
  .lb-semantic { border-color: rgba(255,200,120,.10); }
  .lb-semantic.lb-warning   { background: rgba(255,149,0,.12); border-left-color: #FF9500; }
  .lb-semantic.lb-tip       { background: rgba(245,166,35,.10); border-left-color: var(--primary); }
  .lb-semantic.lb-important { background: rgba(245,166,35,.10); border-left-color: var(--primary); }
  .lb-semantic.lb-safety    { background: rgba(52,199,89,.10);  border-left-color: var(--green); }
  .lb-semantic.lb-service-standard { background: rgba(0,122,255,.10); border-left-color: var(--blue); }

  /* Tables */
  table { background: var(--clr-surface); }
  th { background: var(--clr-surface-2) !important; color: var(--clr-text) !important; }
  tr:nth-child(even) td { background: var(--clr-surface-2); }
  td { color: var(--clr-text); border-color: rgba(255,200,120,.08) !important; }

  /* Vocab card */
  .vocab-card, .vc-card {
    background: var(--clr-surface);
    border-color: rgba(255,200,120,.10);
  }
  .vocab-card .word-de, .vc-card .word-de { color: var(--clr-text); }
  .vocab-card .word-en, .vc-card .word-en { color: var(--clr-text-muted); }

  /* Bottom nav */
  .bottom-nav {
    border-top-color: rgba(255,200,120,.08);
  }

  /* Modals */
  .modal-content {
    background: var(--clr-surface);
    border-color: rgba(255,200,120,.10);
  }
  .modal-header, .modal-footer {
    border-color: rgba(255,200,120,.08);
    background: var(--clr-surface-2);
  }

  /* Badges — ensure contrast */
  .badge-secondary { background: rgba(154,136,120,.25); color: #D4C4B0; }
  .badge-success   { background: rgba(52,199,89,.20);  color: #5EE87A; }
  .badge-danger    { background: rgba(255,59,48,.20);  color: #FF6961; }
  .badge-warning   { background: rgba(255,149,0,.20);  color: #FFB340; }
  .badge-info      { background: rgb(255 255 255 / 58%);  color: #5AC8FA; }
  .badge-primary   { background: rgba(245,166,35,.20); color: #FFD07A; }

  /* Exam option cards */
  .exam-option, .eoa-card, .eoc-card {
    background: var(--clr-surface);
    border-color: rgba(255,200,120,.10);
  }
  .exam-option:hover, .eoa-card:hover {
    border-color: var(--primary);
    background: rgba(245,166,35,.06);
  }

  /* Progress bars */
  .progress-bar-bg { background: var(--clr-surface-2); }

  /* Stat cards */
  .stat-card { background: var(--clr-surface); }
  .stat-card .stat-value { color: var(--clr-text); }
  .stat-card .stat-label { color: var(--clr-text-muted); }

  /* Admin pages — breadcrumbs, section headers */
  .page-header {  border-color: rgba(255,200,120,.08); }
  .breadcrumb-item { color: var(--clr-text-muted); }

  /* Scrollbar — dark themed */
  ::-webkit-scrollbar-track { background: var(--clr-surface-2); }
  ::-webkit-scrollbar-thumb { background: rgba(245,166,35,.25); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(245,166,35,.40); }
}



.vocab-dash {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 860px) {
  .vocab-dash { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vocab-dash { grid-template-columns: 1fr 1fr; gap: .5rem; }
}

/* Base card */
.vd-card {
  background: var(--clr-surface);
  border: .5px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  box-shadow: var(--shadow-xs);
  transition: transform .18s var(--ease-out), box-shadow .18s;
  overflow: hidden;
  position: relative;
}
.vd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.vd-card-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .1rem;
}

.vd-card-body {
  flex: 1;
  min-width: 0;
}

.vd-big-num {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  color: var(--clr-text);
  letter-spacing: -.04em;
}
.vd-of {
  font-size: .75rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: 0;
}

.vd-card-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-top: .15rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Progress bar shared */
.vd-prog-bar {
  height: 4px;
  background: var(--clr-surface-raised);
  border-radius: 99px;
  margin-top: .5rem;
  overflow: hidden;
}
.vd-prog-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
  transition: width .6s var(--ease-out);
}
.vd-prog-goal {
  background: linear-gradient(90deg, #34C759, #30D158);
}
.vd-prog-xp {
  background: linear-gradient(90deg, #5856D6, #AF52DE);
}

/* Streak card — accent color top bar */
.vd-streak::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF9500, #FF3B30);
  border-radius: var(--radius) var(--radius) 0 0;
}
.vd-streak .vd-big-num { color: #FF9500; }

/* Streak day pills row */
.vd-streak-days {
  display: flex;
  gap: .2rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}
.vd-day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
}
.vd-day-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-surface-raised);
  transition: background .2s;
}
.vd-day-dot.done { background: #FF9500; }
.vd-day-pill.vd-day-today .vd-day-dot { box-shadow: 0 0 0 2px rgba(255,149,0,.35); }
.vd-day-pill span {
  font-size: .5rem;
  font-weight: 700;
  color: var(--clr-text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* XP card */
.vd-xp::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5856D6, #AF52DE);
  border-radius: var(--radius) var(--radius) 0 0;
}
.vd-xp .vd-big-num { color: #5856D6; }

.vd-level-chip {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: var(--radius-pill);
  padding: .1rem .55rem;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .03em;
}

/* Goal card */
.vd-goal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #34C759, #30D158);
  border-radius: var(--radius) var(--radius) 0 0;
}
.vd-goal .vd-big-num { color: #34C759; }

/* Progress card */
.vd-progress::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ── Red dot badge (Instagram-style) on unstarted categories ── */
.vocab-playlist-card { position: relative; }

.vpc-new-dot {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 12px; height: 12px;
  background: #FF3B30;
  border-radius: 50%;
  border: 2px solid var(--clr-surface);
  box-shadow: 0 0 0 1px rgba(255,59,48,.3), 0 2px 6px rgba(255,59,48,.4);
  z-index: 5;
  animation: vd-dot-pulse 2s ease-in-out infinite;
}

@keyframes vd-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255,59,48,.3), 0 2px 6px rgba(255,59,48,.4); }
  50%       { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255,59,48,.2), 0 3px 10px rgba(255,59,48,.5); }
}