.btn.btn-exit:hover {
  filter: brightness(1.02);
  box-shadow: 0 14px 24px rgba(16, 39, 64, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after {
    opacity: 1;
  }
}

/* Disable button edge glow in admin UI (and the header "Admin Panel" button on the main page). */
#admin-panel-btn::after,
.admin-header .btn::after,
.admin-page .btn::after,
.admin-page ~ .admin-create-modal .btn::after,
.admin-page ~ .admin-progress-modal .btn::after,
.admin-page ~ .admin-manage-modal .btn::after,
.admin-page ~ .admin-create-queue-modal .btn::after,
.admin-page ~ .admin-renewals-modal .btn::after,
.admin-page ~ .admin-payments-modal .btn::after,
.admin-page ~ .admin-delete-modal .btn::after,
.admin-page ~ .admin-delete-confirm-modal .btn::after,
.admin-page ~ .admin-requests-modal .btn::after,
.admin-page ~ .admin-devices-modal .btn::after,
.admin-page ~ .admin-device-detail-modal .btn::after {
  display: none !important;
}

.card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 140px;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.1px;
  border: 1px solid transparent;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

.card .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  filter: brightness(1.02);
}

.card .btn.is-locked-course-btn {
  background: #9aa9bb;
  color: #ffffff;
  border-color: #8999ac;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.card:nth-child(1) .btn {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
  color: white;
  border-color: transparent;
}

.card:nth-child(2) .btn {
  background: linear-gradient(135deg, #26c6b0, #0f9b88);
  color: white;
  border-color: transparent;
}

.card:nth-child(3) .btn {
  background: linear-gradient(135deg, #6c8dff, #4d65d9);
  color: white;
  border-color: transparent;
}

.card:nth-child(4) .btn {
  background: linear-gradient(135deg, #ff9b3d, #e97817);
  color: white;
  border-color: transparent;
}

/* A permanently fixed bottom bar, not tied to the header or scroll position
   at all — no compact/expanded state, no sticky/fixed-under-header math, no
   scroll listener. This is deliberately simpler than the sticky-under-header
   version it replaced: that one needed a is-compact-driven size change plus
   careful static `top` values to avoid reintroducing scroll jank (see git
   history). A bottom bar sidesteps the whole problem — it never moves or
   resizes, so there's nothing to keep cheap on the scroll path. */
.quick-links {
  /* No explicit width: left+right alone stretch a fixed-position box to
     fill the viewport. Adding width:100% here over-constrains the box
     (per spec, `right` is then ignored) and made it overflow past the
     viewport edge by exactly its own horizontal padding. */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* flex-start, not center: on narrow viewports the 7 buttons overflow and
     need horizontal scroll — centering an overflowing flex line starts the
     scroll position in the middle of the content, hiding the first button
     (News) until the user scrolls backwards. flex-start keeps scrollLeft:0
     showing button 1 first, like any normal scrollable list. The ≥641px
     tier below switches to center once everything fits with room to spare. */
  justify-content: flex-start;
  gap: 5px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.10);
  /* Only needs to clear normal page content at the bottom of the screen
     (mobile only — desktop resets position to static below, where
     z-index has no effect at all). Used to be 950, high enough to
     accidentally outrank the header (900 at the time) in some real-device
     stacking edge case; nothing here needs to compete with the header. */
  z-index: 15;
  /* .hero-header got this same GPU-layer promotion during that same past
     incident (see its own comment above) but this bar didn't - reported
     again 2026-08-20: this fixed-position bottom bar visibly detaching
     from the viewport bottom and scrolling along with page content mid-
     scroll in real mobile Chrome specifically (not Safari/WebView-based
     in-app browsers, not reproducible headless) - the classic symptom of
     a fixed element left on the main-thread paint path instead of its own
     compositor layer while Chrome's address bar collapses and the
     viewport height is being recalculated. Matches the header's own fix
     exactly rather than inventing a new one. */
  will-change: transform;
  transform: translateZ(0);
}

.quick-links::-webkit-scrollbar {
  display: none;
}

.quick-link-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 12px 6px;
  min-width: 60px;
  border-radius: 16px;
  border: none;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  overflow: hidden;
}

/* glass highlight at top — gives depth */
.quick-link-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  border-radius: 22px 22px 50% 50% / 22px 22px 30px 30px;
  background: rgba(255,255,255,.18);
  pointer-events: none;
  z-index: 2;
}

.qlb-icon {
  font-size: 1.3rem;
  line-height: 1;
  display: block;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transition: transform 0.1s ease;
}

.qlb-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
}

/* >=641px: back in normal document flow, right under the daily-motivation /
   did-you-know cards (see index.html) — not a fixed bottom bar there. Only
   mobile keeps the fixed bar (screen real estate is tighter, and it's the
   pattern users are used to from apps); desktop has room to just show it
   as a regular row in the page. */
@media (min-width: 641px) {
  .quick-links {
    position: static;
    width: min(1080px, 100%);
    margin: 0 auto;
    justify-content: center;
    gap: 12px;
    /* Needs real top/bottom padding, not 0: overflow-x:auto here makes
       overflow-y compute to auto too (per spec, when one axis is
       non-visible the other can't stay visible), so anything outside the
       row's own padding box gets clipped — including each button's own
       box-shadow (the 3D "lip" below it), which was getting cut flat. */
    padding: 6px 0 18px;
    background: none;
    border-top: none;
    box-shadow: none;
  }
  .quick-link-btn {
    padding: 16px 20px 12px;
    min-width: 100px;
    border-radius: 20px;
    gap: 6px;
  }
  .qlb-icon { font-size: 2rem; }
  .qlb-label { font-size: 0.72rem; }

  /* .hero's own bottom padding (34px) plus .levels' top padding (60px)
     plus this row's own padding (needed for its shadow, see above) added
     up to a big empty gap before "Choose Your Level" now that the row
     lives here instead of floating as a fixed bar. Trim just the hero's
     side of that gap. */
  .hero:has(> .quick-links) {
    padding-bottom: 8px;
  }
}

/* Reserve room at the bottom of the page so the fixed quick-links bar never
   covers the last bit of content — mobile only; on wider viewports the bar
   is back in normal flow (see above) and needs no compensation. */
@media (max-width: 640px) {
  body:has(.quick-links) {
    padding-bottom: 68px;
  }
}

/* Цветные кнопки — одинаково в обеих темах */
.quick-links .quick-link-btn:nth-child(1) { background: linear-gradient(160deg,#1D4ED8,#3B82F6); color:#fff; box-shadow:0 6px 0 #1e3a8a,0 8px 18px rgba(29,78,216,.4); }
.quick-links .quick-link-btn:nth-child(2) { background: linear-gradient(160deg,#5B21B6,#7C3AED); color:#fff; box-shadow:0 6px 0 #3b0764,0 8px 18px rgba(91,33,182,.4); }
.quick-links .quick-link-btn:nth-child(3) { background: linear-gradient(160deg,#065F46,#059669); color:#fff; box-shadow:0 6px 0 #022c22,0 8px 18px rgba(6,95,70,.4); }
.quick-links .quick-link-btn:nth-child(4) { background: linear-gradient(160deg,#92400E,#D97706); color:#fff; box-shadow:0 6px 0 #451a03,0 8px 18px rgba(146,64,14,.4); }
.quick-links .quick-link-btn:nth-child(5) { background: linear-gradient(160deg,#991B1B,#DC2626); color:#fff; box-shadow:0 6px 0 #450a0a,0 8px 18px rgba(153,27,27,.4); }
.quick-links .quick-link-btn:nth-child(6) { background: linear-gradient(160deg,#713F12,#B45309); color:#fff; box-shadow:0 6px 0 #1c0701,0 8px 18px rgba(113,63,18,.4); }
.quick-links .quick-link-btn:nth-child(7) { background: linear-gradient(160deg,#0F766E,#14B8A6); color:#fff; box-shadow:0 6px 0 #042f2e,0 8px 18px rgba(15,118,110,.4); }

/* белый стеклянный оверлей при наведении */
.quick-link-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
  background: rgba(255,255,255,.15);
}

.quick-link-btn:hover {
  z-index: 2;
}
.quick-link-btn:hover::after { opacity: 1; }
.quick-links .quick-link-btn:nth-child(1):hover { box-shadow: 0 9px 0 #1e3a8a, 0 12px 22px rgba(29,78,216,.5); }
.quick-links .quick-link-btn:nth-child(2):hover { box-shadow: 0 9px 0 #3b0764, 0 12px 22px rgba(91,33,182,.5); }
.quick-links .quick-link-btn:nth-child(3):hover { box-shadow: 0 9px 0 #022c22, 0 12px 22px rgba(6,95,70,.5); }
.quick-links .quick-link-btn:nth-child(4):hover { box-shadow: 0 9px 0 #451a03, 0 12px 22px rgba(146,64,14,.5); }
.quick-links .quick-link-btn:nth-child(5):hover { box-shadow: 0 9px 0 #450a0a, 0 12px 22px rgba(153,27,27,.5); }
.quick-links .quick-link-btn:nth-child(6):hover { box-shadow: 0 9px 0 #1c0701, 0 12px 22px rgba(113,63,18,.5); }
.quick-links .quick-link-btn:nth-child(7):hover { box-shadow: 0 9px 0 #042f2e, 0 12px 22px rgba(15,118,110,.5); }
.quick-link-btn:hover .qlb-icon { transform: scale(1.12); }

.quick-link-btn:active {
  transform: translateY(4px) !important;
}
.quick-links .quick-link-btn:nth-child(1):active { box-shadow: 0 2px 0 #1e3a8a !important; }
.quick-links .quick-link-btn:nth-child(2):active { box-shadow: 0 2px 0 #3b0764 !important; }
.quick-links .quick-link-btn:nth-child(3):active { box-shadow: 0 2px 0 #022c22 !important; }
.quick-links .quick-link-btn:nth-child(4):active { box-shadow: 0 2px 0 #451a03 !important; }
.quick-links .quick-link-btn:nth-child(5):active { box-shadow: 0 2px 0 #450a0a !important; }
.quick-links .quick-link-btn:nth-child(6):active { box-shadow: 0 2px 0 #1c0701 !important; }
.quick-links .quick-link-btn:nth-child(7):active { box-shadow: 0 2px 0 #042f2e !important; }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 54px 8% 34px;
  background: #ffffff;
  transition: background 0.35s ease;
}

.hero-info-grid {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
}

.hero-image {
  width: min(980px, 100%);
}

.hero-image img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
}

.hero-info-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #d9dee5;
  border-radius: 14px;
  padding: 18px 20px;
}

.hero-info-card h3 {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 500;
}

.hero-info-card p {
  margin: 0;
  color: #2b4158;
  line-height: 1.5;
  font-size: 1.05rem;
}

.hero-daily-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  background: linear-gradient(160deg, #ffffff 0%, #f4f8fc 100%);
  border: 1.5px solid #d0dcea;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(20, 50, 90, 0.1), 0 2px 8px rgba(20, 50, 90, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Colour-coded top accent bar — blue for "Daily motivation", green→gold for "Did you know" */
.hero-daily-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2f7fd6, #6fb1ef);
}

#daily-tip-card::before {
  background: linear-gradient(90deg, #2f9e63, #f0b429);
}

.hero-daily-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(20, 50, 90, 0.16), 0 4px 12px rgba(20, 50, 90, 0.08), 0 0 0 1px rgba(240, 180, 41, 0.18);
  border-color: rgba(240, 180, 41, 0.4);
}

.hero-daily-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hero-daily-badge {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1558a8;
  background: #d6eaff;
  border-radius: 999px;
  padding: 5px 14px;
}

.hero-daily-badge--tip {
  color: #1e6b1e;
  background: #cceecc;
}

.hero-daily-edit-btn {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #1f4f7a, #123455);
  border: none;
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}

.hero-daily-edit-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.hero-daily-text {
  margin: 0;
  color: #0f2235;
  font-size: 1.22rem;
  line-height: 1.65;
  font-style: italic;
  font-weight: 600;
  padding-left: 16px;
  border-left: 3px solid #1a6eb5;
}

.daily-content-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}

.daily-content-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #f5f7fa;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  padding: 10px 12px;
}

.daily-content-item.is-inactive {
  opacity: 0.45;
}

.daily-content-item-text {
  flex: 1;
  font-size: 0.93rem;
  color: #1a2f45;
  line-height: 1.45;
  border: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  padding: 0;
  outline: none;
}

.daily-content-item-text:focus {
  background: #fff;
  border-radius: 4px;
  padding: 2px 4px;
}

.daily-content-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.daily-content-btn {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 3px 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

.daily-content-btn--save {
  background: #e0f0e8;
  color: #1f6e3a;
  border-color: #b8dfc8;
}

.daily-content-btn--save:disabled {
  background: #f0f4f8;
  color: #9aab9a;
  border-color: #dde6dd;
  cursor: default;
}

.daily-content-btn--toggle {
  background: #e8edf3;
  color: #4a6070;
  border-color: #cdd6e0;
}

.daily-content-btn--toggle.is-show {
  background: #1a6eb5;
  color: #ffffff;
  border-color: #1558a8;
  font-weight: 700;
}

.daily-content-btn--delete {
  background: #fde8e8;
  color: #b42318;
  border-color: #f5c0bc;
}

.daily-content-add-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 4px;
}

.daily-content-textarea {
  flex: 1;
  border: 1px solid #b9c7d5;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.93rem;
  resize: vertical;
  outline: none;
}

.daily-content-textarea:focus {
  border-color: #1a6eb5;
}

.calendar-admin-panel {
  margin-top: 4px;
}

.calendar-admin-hint {
  margin: 4px 0 14px;
  font-size: 0.9rem;
  color: #5b6f85;
  text-align: center;
}

.calendar-admin-level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.calendar-admin-level-btn {
  border: 1px solid rgba(240, 180, 41, 0.4);
  background: #f6f9fd;
  color: #16395d;
  border-radius: 12px;
  padding: 18px 12px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.calendar-admin-level-btn:hover {
  border-color: #f0b429;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 50, 90, 0.12);
}

.calendar-admin-back-btn {
  border: none;
  background: transparent;
  color: #1a6eb5;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
}

.calendar-admin-back-btn:hover {
  text-decoration: underline;
}

.calendar-admin-panel-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: #16395d;
}

.calendar-admin-lessons-list,
.calendar-admin-editor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.calendar-admin-lesson-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  text-align: left;
  background: #f6f9fd;
  border: 1px solid #dce3ec;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calendar-admin-lesson-card:hover {
  border-color: #f0b429;
  box-shadow: 0 4px 12px rgba(20, 50, 90, 0.1);
}

.calendar-admin-lesson-number {
  flex-shrink: 0;
  font-weight: 800;
  color: #16395d;
  font-size: 0.9rem;
}

.calendar-admin-lesson-title {
  flex: 1;
  font-size: 0.88rem;
  color: #5b6f85;
}

.calendar-admin-lesson-badge {
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: #1a8f4c;
  background: rgba(52, 211, 153, 0.15);
  border-radius: 999px;
  padding: 2px 8px;
}

.calendar-admin-editor-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #f6f9fd;
  border: 1px solid #dce3ec;
  border-radius: 12px;
  padding: 10px;
}

.calendar-admin-editor-textarea {
  flex: 1;
  border: 1px solid #b9c7d5;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  outline: none;
  background: #ffffff;
  color: #16395d;
}

.calendar-admin-editor-textarea:focus {
  border-color: #1a6eb5;
}

.calendar-admin-editor-row-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-admin-editor-icon-btn {
  border: 1px solid #b9c7d5;
  background: #ffffff;
  color: #16395d;
  border-radius: 8px;
  width: 30px;
  height: 26px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar-admin-editor-icon-btn:hover {
  border-color: #f0b429;
}

.calendar-admin-editor-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.calendar-admin-editor-delete-btn {
  border-color: rgba(224, 47, 47, 0.4);
  color: #e02f2f;
}

.calendar-admin-editor-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.calendar-admin-editor-input {
  flex: 1;
  border: 1px solid #b9c7d5;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  background: #ffffff;
  color: #16395d;
}

.calendar-admin-editor-input:focus {
  border-color: #1a6eb5;
}

.calendar-admin-editor-status {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #5b6f85;
  text-align: center;
  min-height: 1em;
}

.calendar-admin-loading,
.calendar-admin-empty {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: #5b6f85;
  text-align: center;
}

.levels {
  padding: 60px 8%;
  background: #ffffff;
  transition: background 0.35s ease;
}

.levels h2 {
  text-align: center;
  font-size: 2.4rem;
}

.levels h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, #f0b429, transparent);
  border-radius: 2px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* Responsive breakpoints — must come AFTER base rule */
@media (max-width: 900px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

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

.knowledge-test-wrap {
  margin-top: 34px;
  text-align: center;
}

.knowledge-test-note {
  margin: 0 0 12px;
  font-size: 1.75rem;
  font-weight: 700;
  color: #33485d;
}

.knowledge-test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #132a46, #1f4f7a);
  box-shadow: 0 10px 22px rgba(19, 42, 70, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.knowledge-test-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(19, 42, 70, 0.3);
  filter: brightness(1.03);
}

/* ══════════════════════════════════════════
   Choose Your Level — light theme card polish
   (mirrors the dark theme's accent-bordered
   glass cards, adapted for a white background)
   ══════════════════════════════════════════ */

.levels-title-accent {
  color: #c8860a;
}

.levels .card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #f2f6fb 100%);
  border: 1px solid rgba(16, 37, 58, 0.08);
  border-top: 3px solid var(--card-accent, #1f4f7a);
  border-radius: 20px;
  padding: 32px 26px 28px;
  box-shadow: 0 14px 34px rgba(16, 37, 58, 0.1), 0 4px 12px rgba(16, 37, 58, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.levels .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(16, 37, 58, 0.16), 0 0 0 1px rgba(240, 180, 41, 0.22);
}

.levels .card:nth-child(1) { --card-accent: #1682cf; }
.levels .card:nth-child(2) { --card-accent: #0f9b88; }
.levels .card:nth-child(3) { --card-accent: #4d65d9; }
.levels .card:nth-child(4) { --card-accent: #e97817; }

/* Level badge pill (e.g. "A1") — outlined in the card's accent colour */
.card-level-badge {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--card-accent, #1f4f7a);
  background: rgba(31, 79, 122, 0.06);
  border: 1px solid var(--card-accent, #1f4f7a);
  border-radius: 8px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 10px;
}

.levels .card li::before {
  content: "→ ";
  color: var(--card-accent, #1f4f7a);
}

/* ══════════════════════════════════════════
   Citizen X — Dark theme for main page
   (scoped under [data-theme="dark"] so the
   original light theme stays available)
   ══════════════════════════════════════════ */

/* Quick links — dark theme: keep colors but saturate slightly */
/* Mobile-only bar chrome (matches the fixed-bottom-bar mobile rule above —
   desktop resets background/border/box-shadow to none since the bar sits
   in normal page flow there, and this must not out-specificity that). */
@media (max-width: 640px) {
  [data-theme="dark"] .quick-links { background: #0a1628; border-top-color: rgba(255,255,255,.08); box-shadow: 0 -6px 18px rgba(0,0,0,.4); }
}
[data-theme="dark"] .quick-links .quick-link-btn:nth-child(1) { background: linear-gradient(160deg,#1D4ED8,#3B82F6); color:#fff; box-shadow:0 6px 0 #1e3a8a,0 8px 18px rgba(29,78,216,.4); }
[data-theme="dark"] .quick-links .quick-link-btn:nth-child(2) { background: linear-gradient(160deg,#5B21B6,#7C3AED); color:#fff; box-shadow:0 6px 0 #3b0764,0 8px 18px rgba(91,33,182,.4); }
[data-theme="dark"] .quick-links .quick-link-btn:nth-child(3) { background: linear-gradient(160deg,#065F46,#059669); color:#fff; box-shadow:0 6px 0 #022c22,0 8px 18px rgba(6,95,70,.4); }
[data-theme="dark"] .quick-links .quick-link-btn:nth-child(4) { background: linear-gradient(160deg,#92400E,#D97706); color:#fff; box-shadow:0 6px 0 #451a03,0 8px 18px rgba(146,64,14,.4); }
[data-theme="dark"] .quick-links .quick-link-btn:nth-child(5) { background: linear-gradient(160deg,#991B1B,#DC2626); color:#fff; box-shadow:0 6px 0 #450a0a,0 8px 18px rgba(153,27,27,.4); }
[data-theme="dark"] .quick-links .quick-link-btn:nth-child(6) { background: linear-gradient(160deg,#713F12,#B45309); color:#fff; box-shadow:0 6px 0 #1c0701,0 8px 18px rgba(113,63,18,.4); }
[data-theme="dark"] .quick-links .quick-link-btn:nth-child(7) { background: linear-gradient(160deg,#0F766E,#14B8A6); color:#fff; box-shadow:0 6px 0 #042f2e,0 8px 18px rgba(15,118,110,.4); }
[data-theme="dark"] .quick-link-btn::before { background: rgba(255,255,255,.18); }
[data-theme="dark"] .qlb-label { color: inherit; }

/* Hero section — dark cosmic background */
[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #060e1f 0%, #0a1628 100%);
  padding: 50px 8% 44px;
  gap: 24px;
}

/* Motivation cards — dark theme */
[data-theme="dark"] .hero-daily-card {
  background: rgba(20, 36, 62, 0.88);
  border: 1px solid rgba(240, 180, 41, 0.2);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Dark theme — keep the colour-coded top bar */

[data-theme="dark"] .hero-daily-badge {
  background: rgba(240, 180, 41, 0.15);
  color: #f0c040;
  border: 1px solid rgba(240,180,41,0.3);
}

[data-theme="dark"] .hero-daily-badge--tip {
  background: rgba(80, 200, 160, 0.12);
  color: #50d0a0;
  border: 1px solid rgba(80,200,160,0.3);
}

[data-theme="dark"] .hero-daily-edit-btn {
  background: linear-gradient(135deg, #f0b429, #c88a10);
  color: #0a1628;
}

[data-theme="dark"] .hero-daily-text {
  color: #d8e8ff;
  border-left-color: #f0b429;
}

/* Levels section — dark with gold title */
[data-theme="dark"] .levels {
  background: linear-gradient(180deg, #0a1628 0%, #0d1e38 100%);
  padding: 60px 8% 70px;
}

[data-theme="dark"] .levels h2 {
  color: #e8f0ff;
  font-size: 2.6rem;
  margin-bottom: 40px;
}

[data-theme="dark"] .levels-title-accent {
  color: #f0b429;
}

/* Level cards — dark glass with top accent border */
[data-theme="dark"] .levels .card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--card-accent, #f0b429);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  color: #d8e8ff;
  border-radius: 20px;
  padding: 32px 26px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-theme="dark"] .levels .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,180,41,0.25);
}

[data-theme="dark"] .levels .card:nth-child(1) { --card-accent: #4da6ff; }
[data-theme="dark"] .levels .card:nth-child(2) { --card-accent: #3ecfb0; }
[data-theme="dark"] .levels .card:nth-child(3) { --card-accent: #8b7fff; }
[data-theme="dark"] .levels .card:nth-child(4) { --card-accent: #f0b429; }

/* Level badge inside card */
[data-theme="dark"] .card-level-badge {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--card-accent, #f0b429);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-accent, #f0b429);
  border-radius: 8px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 10px;
}

[data-theme="dark"] .levels .card h3 {
  color: #ffffff;
  font-size: 1.3rem;
  margin: 0 0 16px;
}

[data-theme="dark"] .levels .card li {
  color: #9bb8d8;
  font-size: 0.95rem;
}

[data-theme="dark"] .levels .card li::before { content: "→ "; color: var(--card-accent, #f0b429); }

/* Card buttons — use card accent colour */
[data-theme="dark"] .levels .card:nth-child(1) .btn { background: linear-gradient(135deg, #2fa7ff, #1266b8); }
[data-theme="dark"] .levels .card:nth-child(2) .btn { background: linear-gradient(135deg, #3ecfb0, #0f9b80); }
[data-theme="dark"] .levels .card:nth-child(3) .btn { background: linear-gradient(135deg, #8b7fff, #5a4fd9); }
[data-theme="dark"] .levels .card:nth-child(4) .btn { background: linear-gradient(135deg, #f0b429, #c88a10); color: #0a1628; }

/* Knowledge test section */
[data-theme="dark"] .knowledge-test-note { color: #9bb8d8; }
[data-theme="dark"] .knowledge-test-btn {
  background: linear-gradient(135deg, #f0b429 0%, #c88a10 100%);
  color: #0a1628;
  font-weight: 800;
}

/* Upgrade banner on the levels section */
[data-theme="dark"] .levels .upgrade-banner {
  background: linear-gradient(135deg, #1a2f4d 0%, #0d1e38 100%);
  border: 1px solid rgba(240, 180, 41, 0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

[data-theme="dark"] .levels .upgrade-text h3 { color: #f0c040; }
[data-theme="dark"] .levels .upgrade-text p { color: #9bb8d8; }
[data-theme="dark"] .levels .upgrade-btn {
  background: linear-gradient(135deg, #f0b429, #c88a10);
  color: #0a1628;
}

/* ── Course/lesson list pages (a1/a2/b1/b2/...) — dark theme ──
   Mirrors the cosmic "glass card" look used by the homepage Levels section
   (gradient navy cards, soft gold accents) so these pages feel consistent
   instead of leaving plain light cards floating on a dark page. */
[data-theme="dark"] .lessons-page {
  background: linear-gradient(180deg, #0a1628 0%, #0d1e38 100%);
}

[data-theme="dark"] .lessons-header h1 {
  color: #e8f0ff;
}

[data-theme="dark"] .lessons-header p {
  color: #9bb8d8;
}

[data-theme="dark"] .lesson-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .lesson-card:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(240, 180, 41, 0.2);
}

[data-theme="dark"] .lesson-cover {
}

[data-theme="dark"] .lesson-content {
  background: linear-gradient(180deg, #0f1e38 0%, #0a1628 100%);
}

[data-theme="dark"] .lesson-content h3 {
  color: #e8f0ff;
}

[data-theme="dark"] .lesson-completed-badge {
  border: 1px solid rgba(80, 208, 160, 0.4);
  background: rgba(80, 208, 160, 0.12);
  color: #6be3ad;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lesson-unlock-timer {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #9bb8d8;
}

[data-theme="dark"] .is-locked-lesson-card::before {
  background: rgba(255, 255, 255, 0.06);
  color: #9bb8d8;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .is-locked-lesson-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #6f88a8;
}

[data-theme="dark"] .lesson-lock-note {
  color: #9bb8d8;
}

[data-theme="dark"] .lessons-access-note {
  border: 1px solid rgba(240, 180, 41, 0.25);
  background: rgba(240, 180, 41, 0.08);
  color: #f0d99a;
}

/* ── Tasks / lesson player / presentation / homework pages — dark theme ── */
[data-theme="dark"] .tasks-page,
[data-theme="dark"] .lesson-view-page,
[data-theme="dark"] .presentation-page,
[data-theme="dark"] .admin-page {
  background: linear-gradient(180deg, #0a1628 0%, #0d1e38 100%);
}

/* .admin-page (admin.html/mentor.html/parent.html/school.html) only ever
   grows as tall as its own content, so on short pages (e.g. a school with
   one class) the dark-theme gradient stopped partway down and the flat
   body background (#0a1628, dark-theme-legacy.css) showed through below
   it as a visible seam - originally fixed with a dark-only
   `min-height: 100vh`. That made dark-theme pages scrollable past the end
   of their real content (light theme, with no such rule, wasn't) - kept
   on request, now applied to both themes so short pages always reserve a
   full viewport worth of height and scroll consistently either way. Light
   theme has no seam risk either way (.admin-page has no background of its
   own there - lessons-catalog.css - so it just shows body's own flat
   white straight through, same color throughout). Scoped to just
   .admin-page, not the other two page types sharing the dark-theme
   gradient rule above - those have their own layout (lesson viewer /
   fullscreen presentation) that wasn't part of this ask. */
.admin-page {
  min-height: 100vh;
  box-sizing: border-box;
}

[data-theme="dark"] .presentation-frame-shell {
  background: #0a1628;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .pl-text {
  color: rgba(255, 255, 255, 0.75);
}

/* Dark theme = "night sky": small twinkling stars turned on (light theme
   stays plain, no stars - see lessons-catalog.css: .pl-stars base rules).
   The blobs/floats (.pl-blob/.pl-float) intentionally don't reskin by
   theme - same two colors and same emoji work fine on both backgrounds,
   exactly like the .lessons-loading-overlay pattern they're copied from. */
[data-theme="dark"] .pl-stars {
  display: block;
}

[data-theme="dark"] .pl-stars span {
  color: #ffd980;
}

[data-theme="dark"] .presentation-page.is-fullscreen .presentation-topbar {
  background: #0a1628;
}

[data-theme="dark"] .tasks-card,
[data-theme="dark"] .lesson-player-card,
[data-theme="dark"] .presentation-card,
[data-theme="dark"] .homework-ready-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tasks-card h1,
[data-theme="dark"] .lesson-player-title,
[data-theme="dark"] .homework-ready-card h1 {
  color: #e8f0ff;
}

[data-theme="dark"] .tasks-card p,
[data-theme="dark"] .tasks-list,
[data-theme="dark"] .homework-ready-card p {
  color: #9bb8d8;
}

[data-theme="dark"] .tasks-runtime-status {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #9bb8d8;
}

[data-theme="dark"] .tasks-runtime-status.is-error {
  background: rgba(255, 59, 59, 0.1);
  border-color: rgba(255, 99, 99, 0.35);
  color: #ffb4b4;
}

[data-theme="dark"] .lesson-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

/* ── Quiz / knowledge test questions — dark theme ── */
[data-theme="dark"] .quiz-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .quiz-topbar h1 {
  color: #e8f0ff;
}

[data-theme="dark"] .quiz-subtitle {
  color: #9bb8d8;
}

[data-theme="dark"] .quiz-explain-card {
  background: linear-gradient(180deg, #0f1e38 0%, #0a1628 100%);
  border-color: #2f6fb2;
}

[data-theme="dark"] .quiz-explain-header h3 {
  color: #e8f0ff;
}

[data-theme="dark"] .quiz-explain-text {
  color: #9bb8d8;
}

[data-theme="dark"] .quiz-explain-question {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  border-left-color: #2fa7ff;
  color: #e8f0ff;
}

[data-theme="dark"] .quiz-explain-actions {
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .quiz-explain-ask,
[data-theme="dark"] .quiz-explain-lang-label {
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-explain-note {
  color: #6f88a8;
}

[data-theme="dark"] .quiz-explain-option {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-explain-option.is-active {
  background: #2fa7ff;
  border-color: #2fa7ff;
  color: #0a1628;
}

[data-theme="dark"] .quiz-explain-lang-trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-explain-lang-caret {
  border-top-color: #d8e8ff;
}

[data-theme="dark"] .quiz-explain-lang-list {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .quiz-explain-lang-item {
  background: rgba(255, 255, 255, 0.05);
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-explain-lang-item:hover,
[data-theme="dark"] .quiz-explain-lang-item:focus {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .quiz-explain-lang-item.is-active {
  background: rgba(47, 167, 255, 0.18);
  border-color: #2fa7ff;
}

[data-theme="dark"] .quiz-question-shell {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .quiz-task-number {
  color: #6f88a8;
}

[data-theme="dark"] .quiz-question {
  color: #e8f0ff;
}

[data-theme="dark"] .quiz-option {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-option.is-selected {
  border-color: #f0b429;
  box-shadow: 0 0 0 1px #f0b429 inset;
}

[data-theme="dark"] .quiz-option.is-correct {
  background: rgba(80, 208, 160, 0.12);
  border-color: #2e7d55;
}

[data-theme="dark"] .quiz-option.is-wrong {
  background: rgba(255, 99, 99, 0.12);
  border-color: #b64232;
}

[data-theme="dark"] .quiz-option-key {
  border-color: rgba(255, 255, 255, 0.25);
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-status {
  color: #9bb8d8;
}

[data-theme="dark"] .quiz-status.is-correct {
  color: #6be3ad;
}

[data-theme="dark"] .quiz-status.is-wrong {
  color: #ff9a8a;
}

[data-theme="dark"] .quiz-status.is-warning {
  color: #f0d99a;
}

[data-theme="dark"] .quiz-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-explain-btn,
[data-theme="dark"] .quiz-explain-btn:disabled {
  background: rgba(240, 180, 41, 0.12);
  border-color: rgba(240, 180, 41, 0.4);
  color: #f0c040;
}

[data-theme="dark"] .quiz-nav-btn-primary {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
  color: #ffffff;
}

[data-theme="dark"] #quiz-prev-btn:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #d8e8ff;
}

[data-theme="dark"] .quiz-counter,
[data-theme="dark"] .quiz-final-result {
  color: #e8f0ff;
}

[data-theme="dark"] .quiz-retry-card,
[data-theme="dark"] .quiz-warmup-card,
[data-theme="dark"] .subscription-expired-card,
[data-theme="dark"] .subscription-confirm-card,
[data-theme="dark"] .subscription-sent-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
}

[data-theme="dark"] .quiz-retry-card h3,
[data-theme="dark"] .subscription-expired-card h3 {
  color: #e8f0ff;
}

[data-theme="dark"] .quiz-retry-card p,
[data-theme="dark"] .subscription-expired-card p {
  color: #9bb8d8;
}

/* The warm-up card only just picked up the same dark background as
   .quiz-retry-card above (both were plain white before) - its own text
   still needs the matching override, same as .quiz-retry-card's h3/p do,
   or the question and counter (dark navy / grey, meant for a white card)
   go unreadable on the new dark background. .quiz-warmup-badge and
   .quiz-retry-explanation are untouched on purpose: both carry their own
   light chip/box background regardless of theme, so they stay legible -
   same as .quiz-retry-card's own (currently also unstyled-for-dark)
   .quiz-retry-explanation. */
[data-theme="dark"] .quiz-warmup-question {
  color: #e8f0ff;
}

[data-theme="dark"] .quiz-warmup-counter {
  color: #9bb8d8;
}

[data-theme="dark"] .quiz-modal-theory-btn,
[data-theme="dark"] .subscription-expired-back-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

/* ── Login / Sign up modals — dark theme ── */
[data-theme="dark"] .login-modal-card,
[data-theme="dark"] .enroll-modal-card,
[data-theme="dark"] .enroll-success-card,
[data-theme="dark"] .legal-modal-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .login-modal-card h3,
[data-theme="dark"] .enroll-modal-card h3,
[data-theme="dark"] .enroll-success-card h3,
[data-theme="dark"] .legal-modal-card h3 {
  color: #e8f0ff;
}

[data-theme="dark"] .legal-modal-card p,
[data-theme="dark"] .enroll-plan-note,
[data-theme="dark"] .enroll-success-text,
[data-theme="dark"] .enroll-select-label,
[data-theme="dark"] .legal-text {
  color: #9bb8d8;
}

[data-theme="dark"] .login-form input,
[data-theme="dark"] .enroll-form input,
[data-theme="dark"] .enroll-form select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8e8ff;
}

[data-theme="dark"] .login-show-wrap,
[data-theme="dark"] .legal-signup,
[data-theme="dark"] .legal-agree,
[data-theme="dark"] .legal-consent-wrap,
[data-theme="dark"] .parent-access-signup {
  color: #9bb8d8;
}

[data-theme="dark"] .parent-access-header-icon {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .parent-access-steps li {
  color: #cfe0f5;
}

[data-theme="dark"] .parent-access-divider {
  color: #7f97b8;
}

[data-theme="dark"] .parent-access-divider::before,
[data-theme="dark"] .parent-access-divider::after {
  background: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .legal-link {
  color: #7cc3ff;
}

[data-theme="dark"] .login-cancel-btn,
[data-theme="dark"] .enroll-cancel-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

[data-theme="dark"] .login-error,
[data-theme="dark"] .enroll-message {
  color: #ff9a8a;
}

[data-theme="dark"] .enroll-message.is-success {
  color: #6be3ad;
}

[data-theme="dark"] .login-submit-btn:disabled,
[data-theme="dark"] .enroll-submit-btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: #6f88a8;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .legal-modal-close,
[data-theme="dark"] .enroll-modal-close {
  color: #6f88a8;
}

[data-theme="dark"] .legal-modal-close:hover,
[data-theme="dark"] .enroll-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8f0ff;
}

[data-theme="dark"] .enroll-success-check {
  background: rgba(80, 208, 160, 0.15);
}

/* ── Calendar modal — dark theme ── */
[data-theme="dark"] .calendar-modal-card {
  background: #0d1b2e;
  border: none;
}

[data-theme="dark"] .calendar-schedule-note {
  background: rgba(37,99,235,0.15);
  color: #93c5fd;
}

[data-theme="dark"] .calendar-month-label {
  color: #e8f0ff;
}

[data-theme="dark"] .calendar-nav-btn {
  background: rgba(37,99,235,0.15);
  color: #93c5fd;
}

[data-theme="dark"] .calendar-nav-btn:hover {
  background: #2563EB;
  color: #ffffff;
}

[data-theme="dark"] .calendar-weekdays {
  color: #4a6080;
}

[data-theme="dark"] .calendar-day {
  background: rgba(255,255,255,0.05);
  border: none;
  color: #d8e8ff;
}

[data-theme="dark"] button.calendar-day:hover {
  background: rgba(37,99,235,0.2);
}

[data-theme="dark"] .calendar-day.is-lesson {
  background: rgba(37,99,235,0.18);
}

[data-theme="dark"] .calendar-day.is-today {
  background: #2563EB;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37,99,235,0.5);
}

[data-theme="dark"] .calendar-day.is-completed {
  background: rgba(22,163,74,0.12);
  border: none;
}

[data-theme="dark"] .calendar-day.is-completed .calendar-day-number {
  color: #34d399;
}

[data-theme="dark"] .calendar-task-alert {
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

[data-theme="dark"] .calendar-legend {
  color: #6b8caa;
  border-top-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .daily-task-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .daily-task-card.is-done {
  background: rgba(46, 204, 113, 0.1);
  border-color: #34d399;
}

[data-theme="dark"] .daily-task-text {
  color: #d8e8ff;
}

[data-theme="dark"] .daily-task-card.is-done .daily-task-text {
  color: #34d399;
}

[data-theme="dark"] .daily-task-text a {
  color: #7ab8ff;
}

[data-theme="dark"] .daily-task-text a::after {
  color: #7ab8ff;
}

[data-theme="dark"] .daily-task-card.is-done .daily-task-text a {
  color: inherit;
}

[data-theme="dark"] .daily-task-check-visual {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .daily-tasks-status,
[data-theme="dark"] .daily-tasks-empty {
  color: #9bb8d8;
}

[data-theme="dark"] .daily-tasks-status.is-error {
  color: #f87171;
}

/* ── Admin panel — dark theme ── */
[data-theme="dark"] .admin-guard {
  background: rgba(255, 99, 99, 0.1);
  border-color: rgba(255, 99, 99, 0.35);
  color: #ffb4b4;
}

[data-theme="dark"] .admin-head {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .admin-head h1 {
  color: #e8f0ff;
}

[data-theme="dark"] .calendar-admin-hint {
  color: #9bb8d8;
}

[data-theme="dark"] .calendar-admin-level-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(240, 180, 41, 0.3);
  color: #e8f0ff;
}

[data-theme="dark"] .calendar-admin-level-btn:hover {
  border-color: #f0b429;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .calendar-admin-back-btn {
  color: #9bb8d8;
}

[data-theme="dark"] .calendar-admin-back-btn:hover {
  color: #f0c040;
}

[data-theme="dark"] .calendar-admin-panel-title {
  color: #e8f0ff;
}

[data-theme="dark"] .calendar-admin-lesson-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .calendar-admin-lesson-card:hover {
  border-color: #f0b429;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .calendar-admin-lesson-number {
  color: #e8f0ff;
}

[data-theme="dark"] .calendar-admin-lesson-title {
  color: #9bb8d8;
}

[data-theme="dark"] .calendar-admin-lesson-badge {
  color: #34d399;
  background: rgba(52, 211, 153, 0.15);
}

[data-theme="dark"] .calendar-admin-editor-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .calendar-admin-editor-textarea,
[data-theme="dark"] .calendar-admin-editor-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e8f0ff;
}

[data-theme="dark"] .calendar-admin-editor-textarea:focus,
[data-theme="dark"] .calendar-admin-editor-input:focus {
  border-color: #f0b429;
}

[data-theme="dark"] .calendar-admin-editor-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e8f0ff;
}

[data-theme="dark"] .calendar-admin-editor-icon-btn:hover {
  border-color: #f0b429;
}

[data-theme="dark"] .calendar-admin-editor-delete-btn {
  border-color: rgba(255, 99, 99, 0.4);
  color: #ff8a8a;
}

[data-theme="dark"] .calendar-admin-editor-status,
[data-theme="dark"] .calendar-admin-loading,
[data-theme="dark"] .calendar-admin-empty {
  color: #9bb8d8;
}

[data-theme="dark"] .admin-head p,
[data-theme="dark"] .admin-empty-note,
[data-theme="dark"] .admin-create-hint {
  color: #9bb8d8;
}

[data-theme="dark"] .admin-search-suggestions {
  background: #0e1c32;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .admin-search-suggestion-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .admin-search-suggestion-item:hover,
[data-theme="dark"] .admin-search-suggestion-item.is-active {
  background: #163050;
}
[data-theme="dark"] .admin-search-suggestion-name {
  color: #dde8f8;
}
[data-theme="dark"] .admin-search-suggestion-username {
  color: #7ab2e8;
}
[data-theme="dark"] .admin-search-suggestion-phone,
[data-theme="dark"] .admin-search-suggestion-empty,
[data-theme="dark"] .admin-search-result-empty {
  color: #8ab4d8;
}
[data-theme="dark"] .admin-search-result {
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .admin-username-search,
[data-theme="dark"] .admin-requests-search input,
[data-theme="dark"] .admin-create-form input,
[data-theme="dark"] .admin-create-form select,
[data-theme="dark"] .admin-create-form textarea,
[data-theme="dark"] .admin-payment-form input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-create-form input[readonly],
[data-theme="dark"] .admin-create-form select:disabled {
  background: rgba(255, 255, 255, 0.03);
  color: #6f88a8;
}

[data-theme="dark"] .admin-create-form select {
  border-color: rgba(240, 180, 41, 0.35);
}

[data-theme="dark"] .admin-payment-approval-btn {
  background: linear-gradient(135deg, #2fbf71, #1a8f4c);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

[data-theme="dark"] .admin-homework-toggle-btn[data-enabled="true"] {
  background: linear-gradient(135deg, #2fbf71, #1a8f4c);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

[data-theme="dark"] .admin-homework-toggle-btn[data-enabled="false"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #c7d4e6;
  box-shadow: none;
}

[data-theme="dark"] .admin-dashboard-panel,
[data-theme="dark"] .admin-table-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .admin-dashboard-stat {
  background: linear-gradient(180deg, #142a4a 0%, #0f1e38 100%);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .admin-dashboard-row {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .admin-dashboard-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .admin-stat-icon {
  background: var(--admin-stat-icon-bg-dark, rgba(47, 167, 255, 0.18));
}

[data-theme="dark"] .admin-dashboard-stat { --admin-stat-icon-bg-dark: rgba(47, 167, 255, 0.2); }
[data-theme="dark"] .admin-stat-card-manage { --admin-stat-icon-bg-dark: rgba(52, 211, 153, 0.18); }
[data-theme="dark"] .admin-stat-card-progress { --admin-stat-icon-bg-dark: rgba(240, 180, 41, 0.22); }
[data-theme="dark"] .admin-stat-card-health { --admin-stat-icon-bg-dark: rgba(52, 211, 153, 0.2); }

[data-theme="dark"] .admin-dashboard-stat h3,
[data-theme="dark"] .admin-stat-card-title {
  color: #6f88a8;
}

[data-theme="dark"] .admin-dashboard-stat p,
[data-theme="dark"] .admin-stat-card-hint,
[data-theme="dark"] .admin-table-card h2 {
  color: #e8f0ff;
}

[data-theme="dark"] .admin-table-toggle-btn,
[data-theme="dark"] .admin-create-cancel-btn,
[data-theme="dark"] .admin-requests-close-btn,
[data-theme="dark"] .admin-devices-close-btn,
[data-theme="dark"] .admin-manage-close-btn,
[data-theme="dark"] .admin-renewals-close-btn,
[data-theme="dark"] .admin-payments-close-btn,
[data-theme="dark"] .admin-delete-close-btn,
[data-theme="dark"] .admin-delete-confirm-cancel-btn,
[data-theme="dark"] .admin-progress-close-btn,
[data-theme="dark"] .admin-create-queue-close-btn,
[data-theme="dark"] .admin-create-queue-manual-btn,
[data-theme="dark"] .admin-user-password-reveal-btn,
[data-theme="dark"] .admin-renewals-action-btn,
[data-theme="dark"] .admin-device-detail-close-btn,
[data-theme="dark"] .admin-lessons-close {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-create-cancel-btn {
  border-color: rgba(255, 90, 78, 0.35);
}

[data-theme="dark"] .admin-table th,
[data-theme="dark"] .admin-table td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: #d8e8ff;
}

[data-theme="dark"] .admin-table th {
  color: #6f88a8;
}

[data-theme="dark"] .admin-create-modal-card,
[data-theme="dark"] .admin-requests-modal-card,
[data-theme="dark"] .admin-devices-modal-card,
[data-theme="dark"] .admin-manage-modal-card,
[data-theme="dark"] .admin-renewals-modal-card,
[data-theme="dark"] .admin-create-queue-modal-card,
[data-theme="dark"] .admin-payments-modal-card,
[data-theme="dark"] .admin-delete-modal-card,
[data-theme="dark"] .admin-delete-confirm-card,
[data-theme="dark"] .admin-progress-modal-card,
[data-theme="dark"] .admin-device-detail-card,
[data-theme="dark"] .admin-lessons-modal-card,
[data-theme="dark"] .admin-lessons-manager-card,
[data-theme="dark"] .admin-lesson-edit-card,
[data-theme="dark"] .admin-lessons-confirm-card,
[data-theme="dark"] .admin-quiz-editor-card,
[data-theme="dark"] .admin-lessons-card {
  background: linear-gradient(160deg, #0f1e38 0%, #0a1628 100%);
  border-color: rgba(255, 255, 255, 0.1);
}