/* LingoCat — the Class tab (lessons, homework, announcements, quests) and the media pieces
   shared with the teacher dashboard (viewer, players, voice recorder, attachments). */

/* ------------------------------------------------------------------ tab badge */

.tab-icon { position: relative; display: inline-grid; place-items: center; }
.tab-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--pink-a), var(--pink-b));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 4px 8px -2px rgba(200, 0, 80, 0.5);
  animation: badge-pop 0.4s ease-out;
}
.tab-badge.is-dot { min-width: 0; width: 12px; height: 12px; padding: 0; top: -1px; right: -3px; }
@keyframes badge-pop {
  from { transform: scale(0.4); }
  60% { transform: scale(1.15); }
}

/* ------------------------------------------------------------------ shared bits */

.page-class .section-title,
.materials .section-title,
.lesson-quests .section-title,
.homework .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rich { overflow-wrap: anywhere; }
.rich p + p { margin-top: 0.65em; }
.rich a { color: var(--accent-ink); font-weight: 700; }
.empty-line { padding: 10px 4px; font-weight: 600; }
.chip-coin { background: #fff4d6; border-color: rgba(245, 184, 61, 0.45); color: #8a5300; font-size: 0.8rem; padding: 3px 9px 3px 5px; }
.chip-coin .coin-dot { width: 15px; height: 15px; }
.chip-new { background: var(--accent); border-color: transparent; color: #fff; }
.chip-link { color: var(--accent-ink); text-decoration: none; }
.chip-live { background: #ffe3ec; border-color: transparent; color: #c41c5c; }
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff2e6e;
  animation: live 1.6s ease-out infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(255, 46, 110, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255, 46, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 110, 0); }
}
.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
}
.more-btn { display: flex; margin: 6px auto 0; }

/* calendar-page date */
.date-block {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 54px;
  height: 60px;
  flex: none;
  border-radius: 16px;
  border-top: 9px solid var(--accent);
  background: linear-gradient(180deg, #ffffff, var(--tile-b));
  box-shadow: inset 0 -3px 0 rgb(var(--shade) / 0.1), 0 8px 14px -10px rgb(var(--shade) / 0.6);
  line-height: 1;
}
.date-block b { font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.date-block small { margin-top: 3px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: var(--ink-2); }

/* row tile used by to-dos, quests and links */
.todo-row,
.quest-row,
.material-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.todo-row {
  background: linear-gradient(160deg, var(--tile-a), var(--tile-b));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 8px 16px -14px rgb(var(--shade) / 0.6);
}
.todo-row:active,
.quest-row:active,
.lesson-row:active,
.material-link:active { transform: translateY(1px) scale(0.995); }
.todo-row:disabled { cursor: progress; opacity: 0.7; }
.todo-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 -2px 0 rgb(var(--shade) / 0.08);
}
.todo-icon { color: var(--accent-ink); }
.todo-icon.is-hw { background: var(--accent-soft); }
.todo-icon.is-quest { background: #fff0d2; color: #a35f00; }
.todo-icon.is-done { background: var(--good-tint); color: var(--good-ink); }
.todo-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.todo-main strong { overflow-wrap: anywhere; }
.todo-kind { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.meta-due { display: inline-flex; align-items: center; gap: 3px; }
.meta-due.is-late { color: var(--bad-ink); }
.accepts { display: inline-flex; gap: 6px; color: var(--accent-ink); }
.accept { display: inline-flex; }
.todo-go { display: inline-flex; flex: none; color: var(--ink-3); transform: rotate(180deg); }
.todo-go svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ class overview */

.class-head { display: grid; gap: 8px; }
.class-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.class-meta .chip { padding: 5px 12px 5px 9px; background: var(--glass-strong); color: var(--ink); font-size: var(--t-s); }
.class-meta .chip .icon { color: var(--accent-ink); }

.next-lesson { display: grid; gap: 8px; padding: 18px; overflow: hidden; }
.next-lesson::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.next-lesson > * { position: relative; z-index: 1; }
.next-lesson.is-live,
.lesson-hero.is-live { border-color: rgba(255, 79, 139, 0.65); box-shadow: 0 0 0 4px rgba(255, 79, 139, 0.18), 0 22px 44px -26px rgb(var(--shade) / 0.55); }
.next-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.next-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.next-title { font-size: 1.45rem; overflow-wrap: anywhere; }
.next-when { color: var(--ink-2); font-weight: 700; }
.next-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.next-actions .btn { flex: 1 1 auto; }
.join-host { font-size: 0.72em; font-weight: 700; opacity: 0.8; }
.next-lesson.is-empty { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-weight: 700; }
.next-lesson.is-empty .emo { width: 46px; height: 46px; }

.todo { padding: 16px 14px 14px; }
.todo .section-title { margin: 0 4px 10px; }
.todo-list { display: grid; gap: 8px; }
.todo-done { display: flex; align-items: center; gap: 10px; padding: 6px; color: var(--ink-2); font-weight: 700; }
.todo-done .emo { width: 42px; height: 42px; }

.post-list { display: grid; gap: 10px; }
.post { display: grid; gap: 10px; padding: 14px 16px; }
.post.is-pinned { background: linear-gradient(160deg, #fffaf1, rgba(255, 246, 226, 0.82)); }
.post-head { display: flex; flex-wrap: wrap; gap: 6px; }
.post-head:empty { display: none; }
.post-body { font-size: 1rem; }
.post-photos { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 6px; }
.post-photos.n2 { --cols: 2; }
.post-photos.n3 { --cols: 3; }
.post-files { display: grid; gap: 8px; }
.post-foot { font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); }

.lesson-list { display: grid; gap: 8px; }
.lessons .segmented { margin-bottom: 2px; }
.lesson-row,
.quest-row,
.material-link { padding: 10px 12px; }
.lesson-row { display: flex; align-items: center; gap: 12px; border-radius: 22px; color: var(--ink); text-decoration: none; transition: transform 0.12s ease; }
.lesson-row.is-past .date-block { border-top-color: var(--ink-3); }
.lesson-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lesson-main strong { overflow-wrap: anywhere; }
.lesson-when { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }

/* ------------------------------------------------------------------ one lesson */

.lesson-hero { display: grid; gap: 12px; padding: 16px; }
.lesson-hero-top { display: flex; align-items: flex-start; gap: 12px; }
.lesson-hero-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lesson-hero-chip { display: flex; }
.lesson-hero h1 { font-size: 1.35rem; overflow-wrap: anywhere; }
.material-list { display: grid; gap: 10px; }
.material { display: grid; gap: 8px; padding: 12px; }
.material-title { padding: 0 2px; }
.material-link { border-radius: 22px; }
.ext { display: inline-flex; flex: none; color: var(--ink-3); }
.homework { display: grid; gap: 12px; }
.hw-box { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, var(--tile-a), var(--tile-b)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.hw-meta { font-weight: 800; }
.hw-result,
.hw-bonus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 700; }
.hw-result .icon { color: var(--good-ink); }
.hw-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--warn-tint); }
.hw-note .icon { margin-top: 2px; color: var(--warn); }

/* ------------------------------------------------------------------ quest */

.quest-hero { display: grid; justify-items: center; gap: 10px; padding: 20px 18px; text-align: center; }
.quest-emo .emo { width: 86px; height: 86px; animation: bob 2.6s ease-in-out infinite alternate; }
.quest-hero h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
.quest-chips { justify-content: center; }
.quest-text { justify-self: stretch; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); text-align: left; font-size: 1.02rem; }
.accept-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.quest-status { display: grid; gap: 8px; padding: 14px 16px; border: 1.5px solid var(--glass-line); border-radius: var(--r-l); }
.quest-status strong { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.quest-status p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quest-status.is-approved { background: linear-gradient(160deg, #e6fcf1, #c6f1db); color: #0b5e47; }
.quest-status.is-returned { background: linear-gradient(160deg, #fff7e3, #ffe6b6); color: #7a4a00; }
.quest-status.is-sent { background: linear-gradient(160deg, var(--glass-strong), var(--glass)); }
.teacher-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.75); color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.answer { display: grid; gap: 10px; }
.answer-files { display: grid; gap: 8px; }
.composer { display: grid; gap: 12px; }
.answer-input { font-size: 1.02rem; }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-btn {
  flex: 1 1 0;
  min-width: 92px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1.5px solid var(--glass-line);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--tile-a), var(--tile-b));
  color: var(--ink);
  font-weight: 800;
  font-size: var(--t-s);
  cursor: pointer;
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 rgb(var(--shade) / 0.1), 0 8px 14px -12px rgb(var(--shade) / 0.6);
  transition: transform 0.12s ease;
}
.tool-btn:active { transform: translateY(2px); }
.tool-btn .icon { color: var(--accent-ink); }
.composer-hint:empty { display: none; }

/* ------------------------------------------------------------------ home reminder */

.reminder { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 24px; color: var(--ink); text-decoration: none; }
.reminder-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.reminder.is-live .reminder-icon { background: linear-gradient(180deg, var(--pink-a), var(--pink-b)); color: #fff; }
.reminder-text { flex: 1; min-width: 0; display: grid; }
.reminder-text strong { font-size: var(--t-s); }
.reminder-text span { overflow: hidden; color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.reminder-go { padding: 6px 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-s); font-weight: 800; white-space: nowrap; }
.reminder.is-live { border-color: rgba(255, 79, 139, 0.6); }
.reminder.is-live .reminder-go { background: linear-gradient(180deg, var(--pink-a), var(--pink-b)); color: #fff; }

/* ------------------------------------------------------------------ media (shared) */

.media-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgb(var(--shade) / 0.08);
  cursor: zoom-in;
}
.media-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-photos.n1 .media-photo,
.material .media-photo,
.answer-files .media-photo { aspect-ratio: auto; max-height: 380px; background: rgba(255, 255, 255, 0.5); }
.post-photos.n1 .media-photo img,
.material .media-photo img,
.answer-files .media-photo img { height: auto; max-height: 380px; object-fit: contain; }
.media-slides { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 12px; }
.media-slides.is-compact { grid-template-columns: 96px minmax(0, 1fr); }
.media-slides-cover {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 10px 18px -12px rgb(var(--shade) / 0.6), 0 0 0 1px rgb(var(--shade) / 0.1);
}
.media-slides-cover img { width: 100%; height: 100%; object-fit: contain; }
.media-slides-cover > .icon { color: var(--ink-3); }
.media-slides-badge { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(40, 20, 60, 0.75); color: #fff; font-size: 0.7rem; font-weight: 800; }
.media-meta { display: grid; gap: 4px; min-width: 0; }
.media-meta strong { overflow-wrap: anywhere; }
.media-meta .row { margin-top: 2px; }
.media-audio { display: grid; gap: 6px; }
.media-audio audio { width: 100%; height: 42px; }
.media-audio-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 800; }
.media-audio-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-audio-name .icon { color: var(--accent-ink); }
.media-video { display: grid; gap: 6px; }
.media-video video { display: block; width: 100%; max-height: 60vh; border-radius: 14px; background: #000; }
.media-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--glass-strong); color: var(--ink); text-decoration: none; }
.media-doc-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.media-doc .media-meta { flex: 1; }

/* ------------------------------------------------------------------ viewer (shared) */

dialog.viewer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: radial-gradient(120% 80% at 50% 0%, #2c1b45 0%, #160b25 60%, #10081c 100%);
  color: #fff;
}
dialog.viewer:not([open]) { display: none; }
dialog.viewer::backdrop { background: rgba(22, 12, 36, 0.6); }
.viewer-head { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.viewer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-count { font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0.85; }
.viewer .viewer-btn { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.14); color: #fff; }
.viewer-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 0; }
.viewer-frame { display: grid; place-items: center; height: 100%; min-height: 0; padding: 4px; overflow: hidden; touch-action: pan-y pinch-zoom; }
.viewer-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; background: #fff; user-select: none; }
.viewer-frame.is-zoomed { place-items: start; overflow: auto; touch-action: auto; }
.viewer-frame.is-zoomed .viewer-img { width: 200%; max-width: none; height: auto; max-height: none; }
.viewer-nav { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 10px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(20, 10, 34, 0.6); color: #fff; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.viewer-nav:hover { background: rgba(60, 30, 90, 0.75); }
.viewer-nav.is-next .icon { transform: rotate(180deg); }
.viewer-strip { display: flex; gap: 6px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); overflow-x: auto; }
.viewer-thumb { flex: none; width: 72px; height: 50px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; opacity: 0.55; cursor: pointer; }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer-thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.viewer-media .viewer-stage { display: grid; grid-template-columns: 1fr; place-items: center; padding: 12px; }
.viewer-media video { max-width: 100%; max-height: 80vh; border-radius: 10px; }
.viewer-media audio { width: min(480px, 92vw); }
@media (max-width: 600px) {
  .viewer-stage { grid-template-columns: minmax(0, 1fr); }
  .viewer-nav { position: absolute; z-index: 2; top: 50%; width: 40px; height: 40px; margin: 0; transform: translateY(-50%); }
  .viewer-nav.is-prev { left: 6px; }
  .viewer-nav.is-next { right: 6px; }
}

/* ------------------------------------------------------------------ voice recorder (shared) */

.rec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 22px;
  background: linear-gradient(160deg, #ffffff, var(--tile-b));
  box-shadow: inset 0 2px 0 #fff, 0 10px 20px -14px rgb(var(--shade) / 0.6);
}
.rec-big {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  flex: none;
  border: 4px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7aa5, #e8205e);
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(220, 30, 90, 0.7), inset 0 -4px 0 rgba(120, 0, 40, 0.25);
}
.rec-big.is-on { animation: rec-pulse 1.4s ease-out infinite; }
.rec-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.rec-square { width: 20px; height: 20px; border-radius: 5px; background: #fff; }
@keyframes rec-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 32, 94, 0.5), 0 10px 20px -8px rgba(220, 30, 90, 0.7); }
  70% { box-shadow: 0 0 0 16px rgba(232, 32, 94, 0), 0 10px 20px -8px rgba(220, 30, 90, 0.7); }
  100% { box-shadow: 0 0 0 0 rgba(232, 32, 94, 0), 0 10px 20px -8px rgba(220, 30, 90, 0.7); }
}
.rec-text { flex: 1; min-width: 150px; display: grid; gap: 4px; }
.rec-live { display: flex; align-items: center; gap: 6px; color: #c41c5c; }
.rec-blink-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: #ff2e6e; animation: rec-blink 1s steps(2) infinite; }
@keyframes rec-blink {
  50% { opacity: 0.2; }
}
.rec-bars { display: flex; flex: 1; align-items: center; gap: 3px; height: 28px; }
.rec-bars i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--pink-a), var(--pink-b)); transform: scaleY(0.15); transition: transform 0.08s linear; }
.rec-time { min-width: 3.2em; }
.rec-review { display: flex; flex: 1 1 100%; align-items: center; gap: 10px; }
.rec-review audio { flex: 1; min-width: 0; height: 42px; }
.rec-actions { flex: 1 1 100%; justify-content: flex-end; }

/* ------------------------------------------------------------------ attachments (shared) */

.attach-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.attach-list:empty { display: none; }
.attach-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass-strong); }
.attach-item.is-error { border-color: var(--bad); }
.attach-thumb { width: 48px; height: 48px; flex: none; border-radius: 12px; object-fit: cover; }
.attach-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--tile-b); }
.attach-icon { color: var(--accent-ink); }
.attach-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.attach-name { overflow: hidden; font-size: var(--t-s); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.attach-bar { display: block; height: 6px; border-radius: 99px; background: rgb(var(--shade) / 0.12); overflow: hidden; }
.attach-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--joy-a), var(--accent)); transition: width 0.2s ease; }

/* ------------------------------------------------------------------ night theme */

[data-theme="night"] .post.is-pinned { background: linear-gradient(160deg, rgba(255, 210, 120, 0.2), var(--glass)); }
[data-theme="night"] .date-block { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); }
[data-theme="night"] .todo-icon,
[data-theme="night"] .todo-icon.is-hw,
[data-theme="night"] .todo-icon.is-quest,
[data-theme="night"] .teacher-note,
[data-theme="night"] .quest-text { background: rgba(255, 255, 255, 0.12); }
[data-theme="night"] .quest-status.is-approved { background: rgba(17, 144, 110, 0.28); color: #c9ffe9; }
[data-theme="night"] .quest-status.is-returned { background: rgba(255, 200, 100, 0.2); color: #ffe2a8; }
[data-theme="night"] .rec { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)); }
[data-theme="night"] .chip-coin { background: rgba(245, 184, 61, 0.2); color: #ffe3a1; }
[data-theme="night"] .chip-live { background: rgba(255, 46, 110, 0.25); color: #ffc2d6; }