/* Teacher workspace navigation and view switching. */
.dashboard {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-bottom: 136px;
}

.dashboard .card {
  border-color: rgba(6, 93, 180, 0.12);
}

.dashboard.streaks-view,
.dashboard.history-view {
  max-width: 1280px;
}

.teacher-dashboard-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(6, 93, 180, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--soft) 46%, transparent)),
    var(--panel);
  box-shadow: var(--shadow-soft);
}

.dashboard-header-logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(17, 25, 35, 0.08);
  overflow: hidden;
}

.dashboard-header-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.dashboard-header-copy {
  min-width: 0;
}

.dashboard-product-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 14px 30px rgba(17, 25, 35, 0.12);
  overflow: hidden;
}

.dashboard-product-logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.dashboard-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.dashboard-header-copy h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(1.28rem, 2vw, 1.85rem);
}

.dashboard-header-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.dashboard-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(330px, 42vw);
}

.dashboard-header-chip {
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.dashboard-header-chip strong {
  color: var(--ink);
  font-size: 0.9rem;
}

#teacherCard {
  display: flex;
  flex-direction: column;
}

#teacherCard /* Teacher identity, attendance, streak, profile, and history components. */
/* Teacher welcome header, avatar, and at-a-glance identity details. */
.teacher-welcome {
  order: 1;
}

#teacherCard .teacher-announcement {
  order: 2;
}

#teacherCard .teacher-status-badge {
  order: 3;
}

#teacherCard .clock-hero {
  order: 4;
  margin: 0 0 14px;
}

#teacherCard .today-status {
  order: 5;
}

#teacherCard .today-timeline {
  order: 6;
}

#teacherCard .smart-notices {
  order: 7;
}

#teacherCard .attendance-snapshot {
  order: 6;
}

#teacherCard .mini-calendar {
  order: 7;
}

#teacherCard .profile-card {
  order: 8;
}

#teacherCard .settings-card {
  order: 9;
}

#teacherCard .welcome-timebar {
  order: 10;
  margin-top: 0;
}

@media (min-width: 1100px) {
  .dashboard.home-view #teacherCard {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.68fr);
    grid-template-areas:
      "welcome welcome"
      "clock alert"
      "clock statusBadge"
      "clock todayStatus"
      "clock timeline"
      "clock notices";
    gap: 18px;
    align-items: start;
    align-content: start;
  }

  .dashboard.home-view #teacherCard .teacher-welcome {
    grid-area: welcome;
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .dashboard.home-view #teacherCard .clock-hero {
    grid-area: clock;
    min-height: 0;
    align-self: start;
  }

  .dashboard.home-view #teacherCard .teacher-announcement {
    grid-area: alert;
  }

  .dashboard.home-view #teacherCard .teacher-status-badge {
    grid-area: statusBadge;
  }

  .dashboard.home-view #teacherCard .profile-completion-card {
    grid-area: completion;
  }

  .dashboard.home-view #teacherCard .smart-notices {
    grid-area: notices;
  }

  .dashboard.home-view #teacherCard .today-status {
    grid-area: todayStatus;
  }

  .dashboard.home-view #teacherCard .today-timeline {
    grid-area: timeline;
  }

  .dashboard.home-view #teacherCard .teacher-announcement,
  .dashboard.home-view #teacherCard .teacher-status-badge,
  .dashboard.home-view #teacherCard .today-status,
  .dashboard.home-view #teacherCard .smart-notices,
  .dashboard.home-view #teacherCard .today-timeline {
    margin: 0;
  }
}

.dashboard.home-view #teacherCard .profile-completion-card,
.dashboard.home-view #teacherCard .welcome-timebar,
.dashboard.home-view #teacherCard .term-countdown-card,
.dashboard.home-view #teacherCard .streak-card,
.dashboard.home-view #teacherCard .attendance-snapshot,
.dashboard.home-view #teacherCard .mini-calendar {
  display: none !important;
}

.dashboard.home-view #teacherCard {
  gap: 14px;
}

.dashboard.home-view #teacherCard .teacher-welcome,
.dashboard.home-view #teacherCard .clock-hero,
.dashboard.home-view #teacherCard .teacher-announcement,
.dashboard.home-view #teacherCard .teacher-status-badge,
.dashboard.home-view #teacherCard .today-status,
.dashboard.home-view #teacherCard .today-timeline,
.dashboard.home-view #teacherCard .smart-notices {
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(17, 25, 35, 0.07);
}

.dashboard.home-view #teacherCard .teacher-welcome {
  padding: 16px;
}

.dashboard.home-view #teacherCard .welcome-copy {
  gap: 6px;
}

.dashboard.home-view #teacherCard .welcome-copy h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.dashboard.home-view #teacherCard .welcome-copy > .hint {
  max-width: 64ch;
  font-size: 0.9rem;
}

.dashboard.home-view #teacherCard .welcome-meta .pill:not(#readyBadge) {
  display: none;
}

.dashboard.home-view #teacherCard .clock-hero {
  padding: 16px;
  gap: 12px;
}

.dashboard.home-view #teacherCard .clock-face {
  min-height: 188px;
}

.dashboard.home-view #teacherCard .clock-face strong {
  font-size: clamp(2.35rem, 6vw, 4.15rem);
}

.dashboard.home-view #teacherCard .clock-hero-head {
  gap: 8px;
}

.dashboard.home-view #teacherCard .hero-mode-pill {
  display: none;
}

.dashboard.home-view #teacherCard .secure-check,
.dashboard.home-view #teacherCard .arrival-preview,
.dashboard.home-view #teacherCard .teacher-notification,
.dashboard.home-view #teacherCard .system-health,
.dashboard.home-view #teacherCard .offline-sync-panel {
  padding: 10px 12px;
  border-radius: 12px;
}

.dashboard.home-view #teacherCard .clock-actions {
  gap: 8px;
  margin-top: 0;
}

.dashboard.home-view #teacherCard .clock-actions button {
  min-height: 48px;
  font-size: 0.96rem;
}

.dashboard.home-view #teacherCard .clock-actions button.secondary,
.dashboard.home-view #teacherCard .clock-actions button.ghost {
  min-height: 44px;
  font-size: 0.9rem;
}

.dashboard.home-view #teacherCard .teacher-announcement,
.dashboard.home-view #teacherCard .teacher-status-badge,
.dashboard.home-view #teacherCard .today-status,
.dashboard.home-view #teacherCard .smart-notice {
  padding: 12px;
}

.dashboard.home-view #teacherCard .announcement-icon,
.dashboard.home-view #teacherCard .status-badge-mark,
.dashboard.home-view #teacherCard .notice-icon {
  width: 38px;
  min-width: 38px;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: none;
}

.dashboard.home-view #teacherCard .announcement-copy span,
.dashboard.home-view #teacherCard .status-badge-copy span,
.dashboard.home-view #teacherCard .notice-copy span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.86rem;
}

.dashboard.home-view #teacherCard .today-status {
  gap: 5px;
  margin: 0;
  box-shadow: inset 3px 0 0 rgba(6, 93, 180, 0.42);
}

.dashboard.home-view #teacherCard .today-status strong {
  font-size: 1.05rem;
}

.dashboard.home-view #teacherCard .today-timeline {
  gap: 10px;
  padding: 12px;
  margin: 0;
}

.dashboard.home-view #teacherCard .timeline-steps {
  gap: 8px;
}

.dashboard.home-view #teacherCard .timeline-step {
  min-height: 76px;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  box-shadow: none;
}

.dashboard.home-view #teacherCard .timeline-dot {
  width: 24px;
  font-size: 0.72rem;
}

.dashboard.home-view #teacherCard .timeline-step span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.78rem;
}

.dashboard.home-view #teacherCard .missed-clock-note {
  border-radius: 14px;
}

.dashboard.home-view #teacherCard .missed-clock-note summary {
  padding: 12px;
}

.dashboard.home-view #teacherCard .missed-note-form {
  padding: 0 12px 12px;
}

.dashboard:not(.home-view) > .card,
.dashboard.profile-view .profile-card,
.dashboard.settings-view .settings-card {
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(17, 25, 35, 0.07);
}

.dashboard.history-view #teacherHistoryCard,
.dashboard.news-view #teacherNewsCard,
.dashboard.settings-view #teacherRequestsCard,
.dashboard.history-view #teacherStreaksCard {
  padding: 16px;
}

.dashboard.history-view #teacherHistoryCard > h2,
.dashboard.news-view #teacherNewsCard > h2,
.dashboard.settings-view #teacherRequestsCard > h2 {
  margin-bottom: 4px;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.history-filter-bar,
.report-tools {
  gap: 8px;
}

.history-filter-bar button,
.report-tools button,
.teacher-news-actions button,
.self-service-card button,
.streak-leaderboard-hero button,
.streak-challenge-banner button {
  min-height: 38px;
  min-width: auto;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 0.84rem;
}

.teacher-insight-card,
.self-service-card,
.teacher-news-item,
.notification-center-card,
.history-entry,
.report-summary-card,
.snapshot-card {
  border-radius: 12px;
  box-shadow: none;
}

.teacher-insight-card,
.self-service-card {
  padding: 12px;
}

.teacher-insight-card strong,
.self-service-card strong,
.snapshot-card strong,
.report-summary-card strong {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.teacher-insight-card span,
.self-service-card span,
.snapshot-card small {
  font-size: 0.82rem;
  line-height: 1.3;
}

.teacher-news-item {
  gap: 12px;
  padding: 12px;
}

.teacher-news-copy span {
  line-height: 1.35;
}

.streak-leaderboard-hero,
.streak-challenge-banner {
  padding: 14px;
  border-radius: 14px;
}

.streak-leaderboard-summary {
  gap: 10px;
}

.dashboard:not(.hidden) #teacherCard > *,
.dashboard:not(.hidden) #teacherHistoryCard,
.dashboard:not(.hidden) #teacherNewsCard,
.dashboard:not(.hidden) #teacherRequestsCard,
.dashboard:not(.hidden) #teacherStreaksCard {
  animation: dashboardRise 420ms ease both;
}

body.teacher-dashboard .dashboard {
  view-transition-name: teacher-section;
}

body.reduce-motion .dashboard:not(.hidden) #teacherCard > *,
body.reduce-motion .dashboard:not(.hidden) #teacherHistoryCard,
body.reduce-motion .dashboard:not(.hidden) #teacherNewsCard,
body.reduce-motion .dashboard:not(.hidden) #teacherRequestsCard,
body.reduce-motion .dashboard:not(.hidden) #teacherStreaksCard {
  animation: none !important;
}

.dashboard:not(.hidden) #teacherCard > *:nth-child(2) {
  animation-delay: 40ms;
}

.dashboard:not(.hidden) #teacherCard > *:nth-child(3) {
  animation-delay: 80ms;
}

.dashboard:not(.hidden) #teacherCard > *:nth-child(4) {
  animation-delay: 120ms;
}

.dashboard:not(.hidden) #teacherCard > *:nth-child(5) {
  animation-delay: 160ms;
}

.dashboard:not(.hidden) #teacherCard > *:nth-child(6) {
  animation-delay: 200ms;
}

.dashboard.home-view #teacherCard .profile-card,
.dashboard.home-view #teacherCard .settings-card,
.dashboard.home-view #teacherHistoryCard,
.dashboard.home-view #teacherNewsCard,
.dashboard.home-view #teacherStreaksCard,
.dashboard.home-view #teacherRequestsCard,
.dashboard.history-view #teacherCard,
.dashboard.history-view #teacherNewsCard,
.dashboard.history-view #teacherRequestsCard,
.dashboard.history-view #teacherNotificationCenterCard,
.dashboard.news-view #teacherCard,
.dashboard.news-view #teacherHistoryCard,
.dashboard.news-view #teacherStreaksCard,
.dashboard.news-view #teacherRequestsCard,
.dashboard.news-view #teacherNotificationCenterCard,
.dashboard.streaks-view #teacherCard,
.dashboard.streaks-view #teacherHistoryCard,
.dashboard.streaks-view #teacherNewsCard,
.dashboard.streaks-view #teacherRequestsCard,
.dashboard.streaks-view #teacherNotificationCenterCard,
.dashboard.streaks-view #adminPanel,
.dashboard.history-view #adminPanel,
.dashboard.profile-view #teacherCard > :not(.profile-card),
.dashboard.profile-view #teacherHistoryCard,
.dashboard.profile-view #teacherNewsCard,
.dashboard.profile-view #teacherStreaksCard,
.dashboard.profile-view #teacherRequestsCard,
.dashboard.profile-view #teacherNotificationCenterCard,
.dashboard.profile-view #adminPanel,
.dashboard.settings-view #teacherCard > :not(.settings-card),
.dashboard.settings-view #teacherHistoryCard,
.dashboard.settings-view #teacherNewsCard,
.dashboard.settings-view #teacherStreaksCard,
.dashboard.settings-view #teacherNotificationCenterCard,
.dashboard.settings-view #adminPanel {
  display: none !important;
}

.dashboard.profile-view #teacherCard,
.dashboard.settings-view #teacherCard {
  gap: 0;
}

.dashboard.profile-view .profile-card,
.dashboard.settings-view .settings-card {
  margin: 0;
}

.bottom-nav {
  display: none;
  position: relative;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(6, 93, 180, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 248, 252, 0.78));
  box-shadow: 0 18px 42px rgba(17, 25, 35, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  overflow: hidden;
}

.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 5px auto 5px 5px;
  width: calc((100% - 10px - (4 * 6px)) / 5);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.38), transparent 54%),
    linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 24px rgba(6, 93, 180, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
  transform: translateX(calc(var(--nav-index, 0) * (100% + 6px)));
  transition: transform 260ms cubic-bezier(0.2, 0.82, 0.2, 1), box-shadow 200ms ease, background 200ms ease;
  pointer-events: none;
  z-index: 0;
}

body.dark .bottom-nav,
body.theme-graphite .bottom-nav,
body.theme-nightfall .bottom-nav,
body.theme-amethyst .bottom-nav,
body.theme-forest .bottom-nav,
body.theme-burgundy .bottom-nav,
body.theme-obsidian .bottom-nav,
body.theme-deepsea .bottom-nav,
body.theme-copper .bottom-nav {
  border-color: rgba(113, 187, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 27, 36, 0.84), rgba(9, 17, 28, 0.78));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark .bottom-nav::before,
body.theme-graphite .bottom-nav::before,
body.theme-nightfall .bottom-nav::before,
body.theme-amethyst .bottom-nav::before,
body.theme-forest .bottom-nav::before,
body.theme-burgundy .bottom-nav::before,
body.theme-obsidian .bottom-nav::before,
body.theme-deepsea .bottom-nav::before,
body.theme-copper .bottom-nav::before {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34), 0 0 30px color-mix(in srgb, var(--brand) 28%, transparent);
}

.bottom-nav button {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 160ms ease, color 160ms ease, filter 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav button.active {
  color: #fff;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.22);
}

.bottom-nav button:active,
.bottom-nav button.nav-tap {
  transform: translateY(1px) scale(0.94);
}

.bottom-nav button.nav-tap .nav-icon {
  animation: navIconBounce 310ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.bottom-nav button:not(.active):hover {
  color: var(--brand);
  filter: saturate(1.08);
}

body.theme-obsidian .bottom-nav button.active,
body.theme-deepsea .bottom-nav button.active,
body.theme-forest .bottom-nav button.active {
  color: #07111a;
}

.bottom-nav button > span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav button.active .nav-icon {
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.36));
}

.bottom-nav button.has-unread:not(.active) .nav-icon {
  animation: navUnreadPulse 1700ms ease-in-out infinite;
}

.bottom-nav button.streak-active .nav-icon.streaks {
  animation: navStreakFlicker 1350ms ease-in-out infinite;
}

body.nav-style-compact .bottom-nav {
  width: min(440px, calc(100vw - 40px));
  padding: 5px;
  border-radius: 16px;
}

body.nav-style-compact .bottom-nav button {
  min-height: 46px;
  border-radius: 12px;
  gap: 2px;
}

body.nav-style-minimal .bottom-nav {
  border-color: transparent;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(17, 25, 35, 0.1);
  backdrop-filter: none;
}

body.nav-style-minimal .bottom-nav button.active {
  color: var(--brand);
  background: var(--soft);
  box-shadow: none;
}

body.nav-labels-hidden .bottom-nav button > span:last-child { display: none; }
body.nav-labels-hidden .bottom-nav button { min-height: 48px; }

body.reduce-motion .bottom-nav::before,
body.reduce-motion .bottom-nav button,
body.reduce-motion .bottom-nav .nav-icon {
  animation: none !important;
  transition: none !important;
}

body.teacher-dashboard .bottom-nav:not(.hidden) {
  position: fixed;
  z-index: 130;
  display: flex;
}

@keyframes navIconBounce {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-3px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes navUnreadPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(6, 93, 180, 0)); }
  50% { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 52%, transparent)); }
}

@keyframes navStreakFlicker {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(248, 113, 113, 0.24)); transform: rotate(-1deg) scale(1); }
  35% { filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.5)); transform: rotate(1.4deg) scale(1.06); }
  70% { filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.42)); transform: rotate(-1.2deg) scale(0.98); }
}

@media (min-width: 521px) {
  body.teacher-dashboard .page {
    padding-bottom: 176px;
  }

  body.teacher-dashboard .bottom-nav:not(.hidden) {
    left: 50%;
    bottom: 8px;
    width: min(520px, calc(100vw - 44px));
    transform: translateX(-50%);
  }

  .bottom-nav button {
    min-height: 48px;
    padding: 6px 9px;
    font-size: 0.74rem;
  }
}

@media (min-width: 760px) {
  body.teacher-dashboard .page {
    padding-bottom: 176px;
  }

  body.teacher-dashboard .bottom-nav:not(.hidden) {
    top: auto;
    bottom: 8px;
    width: min(520px, calc(100vw - 48px));
    min-width: 0;
    padding: 5px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(17, 25, 35, 0.16);
  }

  body.teacher-dashboard .bottom-nav button {
    min-height: 48px;
    padding: 6px 9px;
    border-radius: 14px;
    font-size: 0.72rem;
  }
}

@media (min-width: 1024px) {
  body.teacher-dashboard main {
    padding: 24px 30px 34px;
  }

  body.teacher-dashboard .page {
    padding-bottom: 42px;
  }

  body.teacher-dashboard .topbar {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 78px;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  body.teacher-dashboard .topbar .tabs {
    display: none;
  }

  body.teacher-dashboard .topbar-logo-link {
    justify-self: start;
    min-width: 0;
  }

  body.teacher-dashboard .top-actions {
    justify-self: end;
    width: auto;
  }

  body.teacher-dashboard .bottom-nav:not(.hidden) {
    position: fixed;
    top: 29px;
    left: 50%;
    bottom: auto;
    z-index: 145;
    width: min(620px, calc(100vw - 520px));
    max-width: 620px;
    min-width: 0;
    transform: translateX(-50%);
    padding: 6px;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(17, 25, 35, 0.12);
  }

  body.teacher-dashboard .bottom-nav:not(.hidden)::before {
    inset: 6px auto 6px 6px;
    width: calc((100% - 12px - (4 * 6px)) / 5);
  }

  body.teacher-dashboard .bottom-nav button {
    min-height: 46px;
    padding: 6px 8px;
    border-radius: 14px;
    font-size: 0.72rem;
  }

  body.teacher-dashboard .dashboard {
    padding-bottom: 44px;
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {
  body.teacher-dashboard .topbar {
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 12px;
  }

  body.teacher-dashboard .topbar-logo-copy span {
    display: none;
  }

  body.teacher-dashboard .bottom-nav button {
    gap: 1px;
    font-size: 0.68rem;
  }

  body.teacher-dashboard .bottom-nav:not(.hidden) {
    width: min(520px, calc(100vw - 420px));
  }
}

.nav-icon {
  display: grid;
  width: 22px;
  aspect-ratio: 1;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}

.nav-icon.home::before {
  content: "";
  width: 15px;
  height: 13px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 3px;
  transform: translateY(3px);
}

.nav-icon.home::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 13px;
  height: 13px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

.nav-icon.history::before {
  content: "";
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-icon.history::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(2px, -2px);
}

.nav-icon.profile::before {
  content: "";
  position: absolute;
  top: 2px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-icon.profile::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 17px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 999px 999px 4px 4px;
  border-bottom-width: 1px;
}

.nav-icon.settings::before,
.nav-icon.settings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.nav-icon.settings::before {
  width: 18px;
  height: 18px;
  border: 2px dashed currentColor;
}

.nav-icon.settings::after {
  width: 6px;
  height: 6px;
  background: currentColor;
}

.nav-icon.bell::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 14px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 5px 5px;
  transform: translateY(-1px);
}

.nav-icon.bell::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 999px 999px;
  box-shadow: 0 5px 0 -3px currentColor;
}

.nav-icon.announce::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: skewY(-5deg);
}

.nav-icon.announce::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(36deg);
  border-radius: 0 0 3px 0;
}

.nav-icon.streaks::before {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 15px;
  height: 18px;
  border-radius: 13px 13px 13px 13px;
  background: currentColor;
  clip-path: polygon(50% 0, 70% 28%, 62% 50%, 88% 70%, 70% 100%, 50% 92%, 30% 100%, 12% 70%, 38% 50%, 30% 28%);
}

.nav-icon.streaks::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 7px;
  height: 9px;
  border-radius: 999px 999px 999px 999px;
  background: var(--panel);
  clip-path: polygon(50% 0, 78% 50%, 65% 100%, 50% 88%, 35% 100%, 22% 50%);
  opacity: 0.9;
}

.teacher-welcome {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(232, 169, 81, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(6, 93, 180, 0.12), rgba(20, 166, 161, 0.08)),
    var(--panel-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.streak-popover-open .teacher-welcome {
  z-index: 150;
}

.teacher-avatar {
  display: grid;
  width: 58px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  box-shadow: 0 12px 24px rgba(6, 93, 180, 0.22);
  font-size: 1.25rem;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

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

.admin-teacher-photo {
  display: inline-grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  box-shadow: 0 8px 18px rgba(6, 93, 180, 0.18);
  font-size: 0.82rem;
  font-weight: 900;
  vertical-align: middle;
}

.admin-teacher-photo.large {
  width: 84px;
  border-radius: 18px;
  font-size: 1.35rem;
}

.admin-teacher-photo.small {
  width: 34px;
  border-radius: 10px;
  font-size: 0.72rem;
}

.admin-teacher-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-teacher-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 180px;
}

.admin-teacher-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-teacher-name small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-teacher-name strong {
  overflow-wrap: anywhere;
}

.admin-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.teacher-welcome:hover .teacher-avatar {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 28px rgba(6, 93, 180, 0.28);
}

.hero-streak-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  gap: 8px;
  align-items: center;
  align-self: center;
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 12px 24px rgba(17, 25, 35, 0.1);
  z-index: 2;
  font: inherit;
  text-align: left;
  cursor: default;
}

.hero-streak-badge:hover,
.hero-streak-badge:focus-visible {
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: 0 12px 24px rgba(17, 25, 35, 0.1);
  outline: none;
}

.hero-streak-flame {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #6b7280;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.68) 0 15%, transparent 17%),
    linear-gradient(145deg, #e5e7eb, #cbd5e1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    inset 0 -5px 10px rgba(15, 23, 42, 0.08);
  overflow: visible;
}

.hero-streak-flame::before,
.hero-streak-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform-origin: 50% 86%;
  pointer-events: none;
}

.hero-streak-flame::before {
  width: 15px;
  height: 21px;
  z-index: 2;
  border-radius: 62% 62% 68% 14% / 76% 76% 42% 38%;
  background:
    radial-gradient(circle at 57% 74%, rgba(255, 255, 255, 0.7) 0 15%, transparent 17%),
    linear-gradient(165deg, color-mix(in srgb, currentColor 62%, white) 0%, currentColor 45%, color-mix(in srgb, currentColor 82%, black) 100%);
  filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.12));
  transform: translateX(-50%) rotate(-13deg) scale(0.96);
}

.hero-streak-flame::after {
  width: 8px;
  height: 13px;
  z-index: 3;
  border-radius: 62% 62% 62% 12% / 78% 78% 38% 38%;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, currentColor 24%, white) 60%, transparent 100%);
  transform: translateX(-47%) translateY(1px) rotate(-9deg) scale(0.9);
  opacity: 0.85;
}

.hero-streak-flame span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.hero-streak-flame span::before,
.hero-streak-flame span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform-origin: 50% 86%;
  border-radius: 62% 62% 70% 12% / 78% 78% 42% 38%;
  pointer-events: none;
}

.hero-streak-flame span::before {
  width: 20px;
  height: 25px;
  z-index: 1;
  background:
    radial-gradient(circle at 44% 70%, rgba(255, 255, 255, 0.36) 0 11%, transparent 13%),
    linear-gradient(155deg, #d1d5db 0%, #9ca3af 48%, #6b7280 100%);
  transform: translateX(-50%) rotate(-16deg);
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.15));
}

.hero-streak-flame span::after {
  width: 11px;
  height: 18px;
  z-index: 2;
  background: linear-gradient(165deg, #f8fafc 0%, #d1d5db 58%, rgba(209, 213, 219, 0.2) 100%);
  transform: translateX(-47%) translateY(2px) rotate(-8deg) scale(0.92);
  opacity: 0.88;
}

.hero-streak-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.hero-streak-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1;
  white-space: nowrap;
}

.hero-streak-copy span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-streak-badge.active {
  border-color: rgba(220, 38, 38, 0.34);
  background:
    radial-gradient(circle at 20% 0%, rgba(248, 113, 113, 0.2), transparent 44%),
    color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12), 0 14px 26px rgba(127, 29, 29, 0.12);
}

.hero-streak-badge.active .hero-streak-flame {
  color: #dc2626;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 247, 237, 0.92) 0 13%, transparent 16%),
    radial-gradient(circle at 50% 58%, rgba(251, 146, 60, 0.52), transparent 54%),
    linear-gradient(145deg, #fee2e2, #fca5a5);
  box-shadow:
    0 0 14px rgba(248, 113, 113, 0.42),
    0 0 28px rgba(251, 146, 60, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  animation: streakFlameAlive 1.55s ease-in-out infinite, streakHeatGlow 2.6s ease-in-out infinite;
}

.hero-streak-badge.active .hero-streak-flame span::before {
  background:
    radial-gradient(circle at 50% 72%, rgba(254, 240, 138, 0.64) 0 12%, transparent 14%),
    linear-gradient(158deg, #f97316 0%, #ef4444 45%, #991b1b 100%);
  filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.52));
  animation: flameOuterFlicker 1.22s ease-in-out infinite;
}

.hero-streak-badge.active .hero-streak-flame::before {
  background:
    radial-gradient(circle at 52% 72%, rgba(255, 255, 255, 0.72) 0 14%, transparent 16%),
    linear-gradient(165deg, #fed7aa 0%, #f97316 48%, #dc2626 100%);
  filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.55));
  animation: flameMiddleFlicker 1.04s ease-in-out infinite;
}

.hero-streak-badge.active .hero-streak-flame span::after,
.hero-streak-badge.active .hero-streak-flame::after {
  background: linear-gradient(172deg, #ffffff 0%, #fef3c7 38%, #facc15 76%, rgba(250, 204, 21, 0.15) 100%);
  animation: flameCoreFlicker 0.92s ease-in-out infinite;
}

.hero-streak-badge.gold {
  border-color: rgba(217, 119, 6, 0.4);
  background:
    radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.22), transparent 44%),
    color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.14), 0 14px 28px rgba(146, 64, 14, 0.14);
}

.hero-streak-badge.gold .hero-streak-flame {
  color: #d97706;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 251, 235, 0.96) 0 13%, transparent 16%),
    radial-gradient(circle at 50% 58%, rgba(251, 191, 36, 0.62), transparent 54%),
    linear-gradient(145deg, #fef3c7, #f59e0b);
  box-shadow:
    0 0 16px rgba(251, 191, 36, 0.48),
    0 0 34px rgba(245, 158, 11, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  animation: streakFlameAlive 1.35s ease-in-out infinite, streakHeatGlow 2.3s ease-in-out infinite;
}

.hero-streak-badge.gold .hero-streak-flame span::before {
  background:
    radial-gradient(circle at 50% 72%, rgba(255, 255, 255, 0.55) 0 12%, transparent 14%),
    linear-gradient(158deg, #fde68a 0%, #f59e0b 43%, #b45309 100%);
}

.hero-streak-badge.gold .hero-streak-flame::before {
  background:
    radial-gradient(circle at 52% 72%, rgba(255, 255, 255, 0.72) 0 14%, transparent 16%),
    linear-gradient(165deg, #fef3c7 0%, #fbbf24 48%, #d97706 100%);
}

.hero-streak-badge.legendary {
  border-color: rgba(126, 34, 206, 0.42);
  background:
    radial-gradient(circle at 20% 0%, rgba(192, 132, 252, 0.24), transparent 44%),
    color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14), 0 14px 30px rgba(88, 28, 135, 0.16);
}

.hero-streak-badge.legendary .hero-streak-flame {
  color: #7e22ce;
  background:
    radial-gradient(circle at 50% 62%, rgba(250, 245, 255, 0.96) 0 13%, transparent 16%),
    radial-gradient(circle at 50% 58%, rgba(192, 132, 252, 0.62), transparent 54%),
    linear-gradient(145deg, #f3e8ff, #c084fc);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.5), 0 0 34px rgba(192, 132, 252, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.74);
  animation: streakFlameAlive 1.25s ease-in-out infinite, streakHeatGlow 2.1s ease-in-out infinite;
}

.hero-streak-badge.legendary .hero-streak-flame span::before {
  background: linear-gradient(158deg, #e9d5ff 0%, #a855f7 46%, #6b21a8 100%);
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.58));
}

.hero-streak-badge.legendary .hero-streak-flame::before {
  background: linear-gradient(165deg, #f3e8ff 0%, #c084fc 48%, #9333ea 100%);
}

.hero-streak-badge.legendary .hero-streak-flame span::after,
.hero-streak-badge.legendary .hero-streak-flame::after {
  background: linear-gradient(172deg, #ffffff 0%, #f5d0fe 38%, #d946ef 76%, rgba(217, 70, 239, 0.16) 100%);
}

.hero-streak-badge.pending {
  border-color: rgba(37, 99, 235, 0.36);
  background:
    radial-gradient(circle at 20% 0%, rgba(96, 165, 250, 0.2), transparent 44%),
    color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1), 0 14px 26px rgba(30, 64, 175, 0.1);
}

.hero-streak-badge.pending .hero-streak-flame {
  color: #2563eb;
  background:
    radial-gradient(circle at 50% 62%, rgba(239, 246, 255, 0.96) 0 13%, transparent 16%),
    radial-gradient(circle at 50% 58%, rgba(96, 165, 250, 0.46), transparent 54%),
    linear-gradient(145deg, #dbeafe, #60a5fa);
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  animation: streakPendingPulse 1.8s ease-in-out infinite;
}

.hero-streak-badge.pending .hero-streak-flame span::before {
  background: linear-gradient(158deg, #bfdbfe 0%, #3b82f6 52%, #1d4ed8 100%);
}

.hero-streak-badge.pending .hero-streak-flame::before {
  background: linear-gradient(165deg, #dbeafe 0%, #60a5fa 50%, #2563eb 100%);
}

.hero-streak-badge.protected {
  border-color: rgba(6, 148, 162, 0.34);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.08), 0 14px 26px rgba(15, 118, 110, 0.08);
}

.hero-streak-badge.protected .hero-streak-flame {
  color: #0f766e;
  background: linear-gradient(145deg, #ccfbf1, #5eead4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  filter: saturate(0.82);
}

.hero-streak-badge.broken {
  border-color: rgba(192, 57, 43, 0.28);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.hero-streak-badge.broken .hero-streak-flame {
  color: #9f1239;
  background: linear-gradient(145deg, #ffe4e6, #fda4af);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  filter: saturate(0.72);
}

@keyframes streakPendingPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(96, 165, 250, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.68); }
  50% { transform: scale(1.045); box-shadow: 0 0 22px rgba(96, 165, 250, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.78); }
}

.hero-streak-badge.activated {
  animation: heroStreakIgnite 900ms ease both;
}

.hero-streak-badge.active.activated .hero-streak-flame {
  animation:
    flameIgniteBase 1.8s ease both,
    streakFlameAlive 1.55s ease-in-out 1.8s infinite,
    streakHeatGlow 2.6s ease-in-out 1.8s infinite;
}

.hero-streak-badge.active.activated .hero-streak-flame span::before {
  animation:
    flameIgniteOuter 1.8s ease both,
    flameOuterFlicker 1.22s ease-in-out 1.8s infinite;
}

.hero-streak-badge.active.activated .hero-streak-flame::before {
  animation:
    flameIgniteMiddle 1.8s ease both,
    flameMiddleFlicker 1.04s ease-in-out 1.8s infinite;
}

.hero-streak-badge.active.activated .hero-streak-flame span::after,
.hero-streak-badge.active.activated .hero-streak-flame::after {
  animation:
    flameIgniteCore 1.8s ease both,
    flameCoreFlicker 0.92s ease-in-out 1.8s infinite;
}

.hero-streak-badge.active.ignition-pending .hero-streak-flame {
  color: #6b7280;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.68) 0 15%, transparent 17%),
    linear-gradient(145deg, #e5e7eb, #cbd5e1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    inset 0 -5px 10px rgba(15, 23, 42, 0.08);
  animation: none;
  filter: saturate(0.55);
}

.hero-streak-badge.active.ignition-pending .hero-streak-flame span::before {
  background:
    radial-gradient(circle at 44% 70%, rgba(255, 255, 255, 0.36) 0 11%, transparent 13%),
    linear-gradient(155deg, #d1d5db 0%, #9ca3af 48%, #6b7280 100%);
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.15));
  animation: none;
}

.hero-streak-badge.active.ignition-pending .hero-streak-flame::before {
  background:
    radial-gradient(circle at 57% 74%, rgba(255, 255, 255, 0.7) 0 15%, transparent 17%),
    linear-gradient(165deg, #e5e7eb 0%, #9ca3af 55%, #6b7280 100%);
  filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.12));
  animation: none;
}

.hero-streak-badge.active.ignition-pending .hero-streak-flame span::after,
.hero-streak-badge.active.ignition-pending .hero-streak-flame::after {
  background: linear-gradient(165deg, #f8fafc 0%, #d1d5db 58%, rgba(209, 213, 219, 0.2) 100%);
  animation: none;
}

.streak-popover {
  position: absolute;
  top: 62px;
  left: 14px;
  z-index: 90;
  display: grid;
  gap: 12px;
  width: min(360px, calc(100% - 28px));
  max-height: min(270px, calc(100vh - 190px));
  overflow-y: auto;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 189, 89, 0.12), transparent 34%),
    color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 24px 48px rgba(17, 25, 35, 0.2);
  backdrop-filter: blur(12px);
  animation: streakPopoverIn 180ms ease both;
}

.streak-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.streak-popover-head strong {
  color: var(--ink);
  font-size: 1rem;
}

.streak-popover p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.streak-popover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.streak-popover-grid div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.streak-popover-grid span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.streak-popover-grid strong {
  color: var(--ink);
  font-size: 1rem;
  white-space: nowrap;
}

.streak-popover-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.streak-popover-week .streak-day {
  min-height: 54px;
  padding: 7px 3px;
}

.streak-popover .hint {
  font-size: 0.8rem;
}

.streak-celebration-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(248, 113, 113, 0.28), transparent 30%),
    radial-gradient(circle at 50% 58%, rgba(251, 146, 60, 0.14), transparent 28%),
    rgba(8, 15, 28, 0.62);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  opacity: 1;
  transition: opacity 220ms ease;
}

.streak-celebration-modal.hidden {
  pointer-events: none;
  opacity: 0;
}

.streak-celebration-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(380px, calc(100vw - 36px));
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  text-align: center;
  background: transparent;
  box-shadow: none;
  transform: scale(1);
  animation: streakCelebrationIn 420ms cubic-bezier(.2,.8,.2,1) both;
}

.streak-celebration-modal.hidden .streak-celebration-card {
  animation: none;
}

.streak-celebration-flame {
  position: relative;
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 59%, rgba(255, 255, 255, 0.92) 0 7%, transparent 9%),
    radial-gradient(circle at 50% 53%, rgba(251, 146, 60, 0.62), transparent 58%),
    radial-gradient(circle at 50% 72%, rgba(127, 29, 29, 0.58), transparent 44%),
    linear-gradient(145deg, rgba(254, 226, 226, 0.22), rgba(248, 113, 113, 0.14));
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.06),
    0 0 44px rgba(248, 113, 113, 0.54),
    0 0 108px rgba(251, 146, 60, 0.28);
  overflow: hidden;
  animation: streakBigGlow 1.9s ease-in-out infinite;
}

.streak-celebration-flame::before,
.streak-celebration-flame::after,
.streak-celebration-flame span::before,
.streak-celebration-flame span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform-origin: 50% 88%;
  border-radius: 62% 62% 70% 12% / 78% 78% 42% 38%;
  pointer-events: none;
}

.streak-celebration-flame::before {
  width: 72px;
  height: 100px;
  z-index: 2;
  background:
    radial-gradient(circle at 48% 78%, rgba(254, 240, 138, 0.62) 0 10%, transparent 12%),
    linear-gradient(180deg, rgba(251, 191, 36, 0.82) 0%, #f97316 24%, #ef4444 58%, #7f1d1d 100%);
  filter: drop-shadow(0 0 18px rgba(248, 113, 113, 0.68));
  animation: streakBigOuter 1.12s ease-in-out infinite;
}

.streak-celebration-flame::after {
  width: 46px;
  height: 76px;
  z-index: 3;
  background:
    radial-gradient(circle at 52% 72%, rgba(255, 255, 255, 0.7) 0 14%, transparent 16%),
    linear-gradient(178deg, #fef3c7 0%, #fb923c 42%, #dc2626 100%);
  filter: drop-shadow(0 0 15px rgba(251, 146, 60, 0.72));
  animation: streakBigMiddle 0.98s ease-in-out infinite;
}

.streak-celebration-flame span::before {
  width: 25px;
  height: 48px;
  z-index: 4;
  background: linear-gradient(172deg, #ffffff 0%, #fef3c7 38%, #facc15 76%, rgba(250, 204, 21, 0.15) 100%);
  animation: streakBigCore 0.82s ease-in-out infinite;
}

.streak-celebration-flame span::after {
  inset: -18px;
  left: auto;
  bottom: auto;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent, rgba(251, 191, 36, 0.28), transparent, rgba(248, 113, 113, 0.22), transparent);
  transform: none;
  animation: streakBigHalo 3.2s linear infinite;
}

.streak-celebration-flame .flame-tongue,
.streak-celebration-flame .flame-spark,
.streak-celebration-flame .flame-shimmer {
  position: absolute;
  pointer-events: none;
}

.streak-celebration-flame .flame-tongue {
  bottom: 30px;
  left: 50%;
  z-index: 2;
  width: 23px;
  height: 62px;
  border-radius: 58% 64% 68% 14% / 76% 80% 38% 40%;
  background: linear-gradient(180deg, rgba(254, 215, 170, 0.92), #fb923c 42%, #b91c1c 100%);
  filter: blur(0.1px) drop-shadow(0 0 10px rgba(251, 146, 60, 0.45));
  opacity: 0.9;
  transform-origin: 50% 92%;
}

.streak-celebration-flame .flame-tongue.t1 {
  transform: translateX(-36px) rotate(-24deg) scale(0.82);
  animation: flameTongueLeft 1.24s ease-in-out infinite;
}

.streak-celebration-flame .flame-tongue.t2 {
  width: 19px;
  height: 54px;
  transform: translateX(18px) rotate(20deg) scale(0.78);
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.88), #f97316 50%, #991b1b 100%);
  animation: flameTongueRight 1.06s ease-in-out infinite;
}

.streak-celebration-flame .flame-tongue.t3 {
  width: 15px;
  height: 42px;
  z-index: 5;
  transform: translateX(-6px) translateY(14px) rotate(8deg) scale(0.72);
  background: linear-gradient(180deg, #fff 0%, #fef3c7 36%, #f59e0b 100%);
  animation: flameTongueCenter 0.88s ease-in-out infinite;
}

.streak-celebration-flame .flame-shimmer {
  top: 18px;
  left: 50%;
  z-index: 6;
  width: 64px;
  height: 92px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.13), transparent 62%);
  mix-blend-mode: screen;
  filter: blur(5px);
  opacity: 0.48;
  transform: translateX(-50%);
  animation: flameHeatShimmer 1.45s ease-in-out infinite;
}

.streak-celebration-flame .flame-spark {
  z-index: 7;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fef3c7;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.9);
  opacity: 0;
  animation: flameSparkRise 1.55s ease-out infinite;
}

.streak-celebration-flame .flame-spark.s1 { left: 50%; bottom: 64px; animation-delay: 0.05s; }
.streak-celebration-flame .flame-spark.s2 { left: 38%; bottom: 54px; width: 4px; height: 4px; animation-delay: 0.38s; }
.streak-celebration-flame .flame-spark.s3 { left: 61%; bottom: 58px; width: 3px; height: 3px; animation-delay: 0.68s; }
.streak-celebration-flame .flame-spark.s4 { left: 45%; bottom: 46px; width: 3px; height: 3px; animation-delay: 1.02s; }

.streak-celebration-modal.legendary {
  background:
    radial-gradient(circle at 50% 38%, rgba(168, 85, 247, 0.32), transparent 32%),
    radial-gradient(circle at 50% 58%, rgba(217, 70, 239, 0.2), transparent 30%),
    rgba(8, 15, 28, 0.68);
}

.streak-celebration-modal.legendary .streak-celebration-flame {
  background:
    radial-gradient(circle at 50% 59%, rgba(255, 255, 255, 0.96) 0 7%, transparent 9%),
    radial-gradient(circle at 50% 53%, rgba(192, 132, 252, 0.7), transparent 58%),
    radial-gradient(circle at 50% 72%, rgba(76, 29, 149, 0.68), transparent 44%),
    linear-gradient(145deg, rgba(243, 232, 255, 0.3), rgba(168, 85, 247, 0.2));
  animation-name: streakBigPurpleGlow;
}

.streak-celebration-modal.legendary .streak-celebration-flame::before {
  background:
    radial-gradient(circle at 48% 78%, rgba(250, 245, 255, 0.7) 0 10%, transparent 12%),
    linear-gradient(180deg, #e9d5ff 0%, #c084fc 24%, #9333ea 58%, #4c1d95 100%);
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.78));
}

.streak-celebration-modal.legendary .streak-celebration-flame::after {
  background:
    radial-gradient(circle at 52% 72%, rgba(255, 255, 255, 0.76) 0 14%, transparent 16%),
    linear-gradient(178deg, #faf5ff 0%, #c084fc 42%, #7e22ce 100%);
  filter: drop-shadow(0 0 15px rgba(192, 132, 252, 0.82));
}

.streak-celebration-modal.legendary .streak-celebration-flame span::before {
  background: linear-gradient(172deg, #ffffff 0%, #f5d0fe 38%, #c084fc 76%, rgba(126, 34, 206, 0.18) 100%);
}

.streak-celebration-modal.legendary .streak-celebration-flame span::after {
  background: conic-gradient(from 90deg, transparent, rgba(192, 132, 252, 0.38), transparent, rgba(217, 70, 239, 0.28), transparent);
}

.streak-celebration-modal.legendary .streak-celebration-flame .flame-tongue {
  background: linear-gradient(180deg, rgba(243, 232, 255, 0.96), #a855f7 42%, #581c87 100%);
  filter: blur(0.1px) drop-shadow(0 0 10px rgba(192, 132, 252, 0.65));
}

.streak-celebration-modal.legendary .streak-celebration-flame .flame-tongue.t2 {
  background: linear-gradient(180deg, rgba(250, 245, 255, 0.94), #c084fc 50%, #6b21a8 100%);
}

.streak-celebration-modal.legendary .streak-celebration-flame .flame-tongue.t3 {
  background: linear-gradient(180deg, #fff 0%, #f5d0fe 36%, #a855f7 100%);
}

.streak-celebration-modal.legendary .streak-celebration-flame .flame-spark {
  background: #f5d0fe;
  box-shadow: 0 0 10px rgba(216, 180, 254, 0.95);
}

@keyframes streakBigPurpleGlow {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1.05);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.07), 0 0 44px rgba(168, 85, 247, 0.58), 0 0 108px rgba(192, 132, 252, 0.34);
  }
  48% {
    transform: scale(1.045);
    filter: saturate(1.28);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.09), 0 0 58px rgba(168, 85, 247, 0.72), 0 0 122px rgba(192, 132, 252, 0.42);
  }
}

.streak-celebration-card h2 {
  margin: 0;
  font-size: clamp(1.6rem, 7vw, 2.35rem);
  line-height: 1.05;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.55);
}

.streak-celebration-card p {
  margin: 0;
  max-width: 300px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.streak-celebration-card button {
  margin-top: 2px;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.streak-celebration-card button:hover {
  background: rgba(255, 255, 255, 0.18);
}

@keyframes streakFlameAlive {
  0%, 100% { transform: translateY(0) scale(1) rotate(-1deg); filter: saturate(1); }
  30% { transform: translateY(-1px) scale(1.05) rotate(1.4deg); filter: saturate(1.25); }
  62% { transform: translateY(0) scale(0.98) rotate(-1.2deg); filter: saturate(1.12); }
}

@keyframes flameOuterFlicker {
  0%, 100% { transform: translateX(-50%) rotate(-16deg) scale(1); opacity: 0.98; }
  32% { transform: translateX(-51%) translateY(-1px) rotate(-10deg) scale(1.04, 1.08); opacity: 1; }
  68% { transform: translateX(-49%) rotate(-19deg) scale(0.97, 1.02); opacity: 0.94; }
}

@keyframes flameMiddleFlicker {
  0%, 100% { transform: translateX(-50%) rotate(-13deg) scale(0.96); opacity: 0.98; }
  38% { transform: translateX(-48%) translateY(-1px) rotate(-6deg) scale(1.03, 1.08); opacity: 1; }
  72% { transform: translateX(-51%) rotate(-17deg) scale(0.94, 1); opacity: 0.92; }
}

@keyframes flameCoreFlicker {
  0%, 100% { transform: translateX(-47%) translateY(1px) rotate(-9deg) scale(0.9); opacity: 0.82; }
  45% { transform: translateX(-46%) translateY(0) rotate(-4deg) scale(0.96, 1.08); opacity: 0.98; }
  78% { transform: translateX(-49%) translateY(2px) rotate(-12deg) scale(0.86, 0.98); opacity: 0.78; }
}

@keyframes streakHeatGlow {
  0%, 100% { filter: saturate(1) drop-shadow(0 0 0 rgba(251, 146, 60, 0)); }
  50% { filter: saturate(1.18) drop-shadow(0 0 5px rgba(251, 146, 60, 0.28)); }
}

@keyframes flameIgniteBase {
  0% {
    color: #6b7280;
    background:
      radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.68) 0 15%, transparent 17%),
      linear-gradient(145deg, #e5e7eb, #cbd5e1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
    transform: translateY(0) scale(0.96) rotate(-1deg);
    filter: saturate(0.55);
  }
  42% {
    color: #f97316;
    background:
      radial-gradient(circle at 50% 62%, rgba(255, 247, 237, 0.78) 0 14%, transparent 16%),
      radial-gradient(circle at 50% 58%, rgba(251, 146, 60, 0.36), transparent 54%),
      linear-gradient(145deg, #fed7aa, #fb923c);
    box-shadow: 0 0 10px rgba(251, 146, 60, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.62);
    transform: translateY(-1px) scale(1.08) rotate(1deg);
    filter: saturate(1.18);
  }
  72% {
    color: #dc2626;
    background:
      radial-gradient(circle at 50% 62%, rgba(255, 247, 237, 0.92) 0 13%, transparent 16%),
      radial-gradient(circle at 50% 58%, rgba(251, 146, 60, 0.52), transparent 54%),
      linear-gradient(145deg, #fee2e2, #fca5a5);
    box-shadow: 0 0 18px rgba(248, 113, 113, 0.48), 0 0 30px rgba(251, 146, 60, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.62);
    transform: translateY(0) scale(1.02) rotate(-1deg);
    filter: saturate(1.34);
  }
  100% {
    color: #dc2626;
    background:
      radial-gradient(circle at 50% 62%, rgba(255, 247, 237, 0.92) 0 13%, transparent 16%),
      radial-gradient(circle at 50% 58%, rgba(251, 146, 60, 0.52), transparent 54%),
      linear-gradient(145deg, #fee2e2, #fca5a5);
    box-shadow: 0 0 14px rgba(248, 113, 113, 0.42), 0 0 28px rgba(251, 146, 60, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.62);
    transform: translateY(0) scale(1) rotate(-1deg);
    filter: saturate(1);
  }
}

@keyframes flameIgniteOuter {
  0% {
    background:
      radial-gradient(circle at 44% 70%, rgba(255, 255, 255, 0.36) 0 11%, transparent 13%),
      linear-gradient(155deg, #d1d5db 0%, #9ca3af 48%, #6b7280 100%);
    filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.15));
    transform: translateX(-50%) rotate(-16deg) scale(0.9, 0.95);
  }
  46% {
    background:
      radial-gradient(circle at 50% 72%, rgba(254, 240, 138, 0.5) 0 12%, transparent 14%),
      linear-gradient(158deg, #fb923c 0%, #f97316 45%, #c2410c 100%);
    filter: drop-shadow(0 0 7px rgba(251, 146, 60, 0.45));
    transform: translateX(-50%) translateY(-1px) rotate(-10deg) scale(1.08, 1.12);
  }
  100% {
    background:
      radial-gradient(circle at 50% 72%, rgba(254, 240, 138, 0.64) 0 12%, transparent 14%),
      linear-gradient(158deg, #f97316 0%, #ef4444 45%, #991b1b 100%);
    filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.52));
    transform: translateX(-50%) rotate(-16deg) scale(1);
  }
}

@keyframes flameIgniteMiddle {
  0% {
    background:
      radial-gradient(circle at 57% 74%, rgba(255, 255, 255, 0.7) 0 15%, transparent 17%),
      linear-gradient(165deg, #e5e7eb 0%, #9ca3af 55%, #6b7280 100%);
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.12));
    transform: translateX(-50%) rotate(-13deg) scale(0.9);
  }
  48% {
    background:
      radial-gradient(circle at 52% 72%, rgba(255, 255, 255, 0.72) 0 14%, transparent 16%),
      linear-gradient(165deg, #ffedd5 0%, #fb923c 48%, #ea580c 100%);
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.5));
    transform: translateX(-48%) translateY(-1px) rotate(-6deg) scale(1.06);
  }
  100% {
    background:
      radial-gradient(circle at 52% 72%, rgba(255, 255, 255, 0.72) 0 14%, transparent 16%),
      linear-gradient(165deg, #fed7aa 0%, #f97316 48%, #dc2626 100%);
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.55));
    transform: translateX(-50%) rotate(-13deg) scale(0.96);
  }
}

@keyframes flameIgniteCore {
  0% {
    background: linear-gradient(165deg, #f8fafc 0%, #d1d5db 58%, rgba(209, 213, 219, 0.2) 100%);
    opacity: 0.64;
    transform: translateX(-47%) translateY(2px) rotate(-8deg) scale(0.78);
  }
  56% {
    background: linear-gradient(172deg, #ffffff 0%, #ffedd5 38%, #fb923c 76%, rgba(251, 146, 60, 0.15) 100%);
    opacity: 0.92;
    transform: translateX(-46%) translateY(0) rotate(-4deg) scale(1.03);
  }
  100% {
    background: linear-gradient(172deg, #ffffff 0%, #fef3c7 38%, #facc15 76%, rgba(250, 204, 21, 0.15) 100%);
    opacity: 0.85;
    transform: translateX(-47%) translateY(1px) rotate(-9deg) scale(0.9);
  }
}

@keyframes heroStreakIgnite {
  0% { transform: scale(0.96); box-shadow: 0 12px 24px rgba(17, 25, 35, 0.1); filter: saturate(0.45); }
  35% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(251, 146, 60, 0.2), 0 0 26px rgba(248, 113, 113, 0.26); filter: saturate(1.35); }
  68% { transform: scale(0.99); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12), 0 16px 28px rgba(127, 29, 29, 0.16); }
  100% { transform: scale(1); }
}

/* Respect the operating system's reduced-motion accessibility setting. */
@media (prefers-reduced-motion: reduce) {
  .hero-streak-badge.active .hero-streak-flame,
  .hero-streak-badge.gold .hero-streak-flame,
  .hero-streak-badge.legendary .hero-streak-flame,
  .hero-streak-badge.pending .hero-streak-flame,
  .hero-streak-badge.active .hero-streak-flame::before,
  .hero-streak-badge.active .hero-streak-flame::after,
  .hero-streak-badge.active .hero-streak-flame span::before,
  .hero-streak-badge.active .hero-streak-flame span::after,
  .hero-streak-badge.activated,
  .streak-celebration-flame,
  .streak-celebration-flame::before,
  .streak-celebration-flame::after,
  .streak-celebration-flame span::before,
  .streak-celebration-flame span::after,
  .streak-celebration-flame .flame-tongue,
  .streak-celebration-flame .flame-spark,
  .streak-celebration-flame .flame-shimmer {
    animation: none;
  }
}

@keyframes streakPopoverIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes streakCelebrationIn {
  from { opacity: 0; transform: translateY(16px) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes streakBigGlow {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06), 0 0 44px rgba(248, 113, 113, 0.54), 0 0 108px rgba(251, 146, 60, 0.28);
  }
  48% {
    transform: scale(1.045);
    filter: saturate(1.26);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08), 0 0 58px rgba(248, 113, 113, 0.66), 0 0 122px rgba(251, 146, 60, 0.34);
  }
}

@keyframes streakBigOuter {
  0%, 100% { transform: translateX(-50%) rotate(-17deg) scale(1); border-radius: 64% 58% 70% 12% / 78% 78% 40% 38%; }
  34% { transform: translateX(-52%) translateY(-5px) rotate(-8deg) scale(1.08, 1.14); border-radius: 52% 72% 62% 18% / 82% 70% 42% 36%; }
  70% { transform: translateX(-47%) translateY(-1px) rotate(-22deg) scale(0.96, 1.05); border-radius: 70% 54% 72% 10% / 76% 82% 38% 40%; }
}

@keyframes streakBigMiddle {
  0%, 100% { transform: translateX(-50%) rotate(-11deg) scale(0.98); border-radius: 62% 64% 66% 14% / 78% 76% 40% 38%; }
  42% { transform: translateX(-47%) translateY(-4px) rotate(-2deg) scale(1.08, 1.16); border-radius: 54% 72% 58% 16% / 82% 70% 42% 36%; }
  78% { transform: translateX(-53%) translateY(1px) rotate(-16deg) scale(0.93, 1.03); border-radius: 70% 54% 72% 12% / 76% 82% 38% 40%; }
}

@keyframes streakBigCore {
  0%, 100% { transform: translateX(-48%) translateY(2px) rotate(-7deg) scale(0.9); opacity: 0.82; }
  50% { transform: translateX(-47%) translateY(-2px) rotate(-2deg) scale(1.05, 1.16); opacity: 1; }
}

@keyframes streakBigHalo {
  to { transform: rotate(360deg); }
}

@keyframes flameTongueLeft {
  0%, 100% { transform: translateX(-36px) rotate(-24deg) scale(0.82); opacity: 0.74; }
  45% { transform: translateX(-42px) translateY(-8px) rotate(-14deg) scale(0.95, 1.18); opacity: 0.92; }
  74% { transform: translateX(-31px) translateY(-2px) rotate(-29deg) scale(0.78, 1.04); opacity: 0.68; }
}

@keyframes flameTongueRight {
  0%, 100% { transform: translateX(18px) rotate(20deg) scale(0.78); opacity: 0.78; }
  38% { transform: translateX(26px) translateY(-7px) rotate(10deg) scale(0.92, 1.14); opacity: 0.95; }
  80% { transform: translateX(13px) translateY(-1px) rotate(25deg) scale(0.74, 1.02); opacity: 0.7; }
}

@keyframes flameTongueCenter {
  0%, 100% { transform: translateX(-6px) translateY(14px) rotate(8deg) scale(0.72); opacity: 0.72; }
  52% { transform: translateX(-2px) translateY(6px) rotate(-2deg) scale(0.9, 1.18); opacity: 0.96; }
}

@keyframes flameHeatShimmer {
  0%, 100% { transform: translateX(-50%) translateY(4px) skewX(-5deg) scaleY(0.96); opacity: 0.28; }
  42% { transform: translateX(-47%) translateY(-4px) skewX(8deg) scaleY(1.06); opacity: 0.56; }
  72% { transform: translateX(-53%) translateY(0) skewX(-10deg) scaleY(1.02); opacity: 0.4; }
}

@keyframes flameSparkRise {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  16% { opacity: 1; }
  72% { opacity: 0.78; }
  100% { transform: translate(var(--spark-x, 12px), -62px) scale(0.08); opacity: 0; }
}

.streak-celebration-flame .flame-spark.s1 { --spark-x: 13px; }
.streak-celebration-flame .flame-spark.s2 { --spark-x: -18px; }
.streak-celebration-flame .flame-spark.s3 { --spark-x: 20px; }
.streak-celebration-flame .flame-spark.s4 { --spark-x: -10px; }

.teacher-announcement,
.profile-completion-card,
.teacher-status-badge {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(245, 248, 251, 0.78)),
    var(--panel-soft);
  box-shadow: 0 12px 24px rgba(17, 25, 35, 0.07);
}

body.dark .teacher-announcement,
body.dark .profile-completion-card,
body.dark .teacher-status-badge,
body.theme-graphite .teacher-announcement,
body.theme-graphite .profile-completion-card,
body.theme-graphite .teacher-status-badge,
body.theme-nightfall .teacher-announcement,
body.theme-nightfall .profile-completion-card,
body.theme-nightfall .teacher-status-badge,
body.theme-amethyst .teacher-announcement,
body.theme-amethyst .profile-completion-card,
body.theme-amethyst .teacher-status-badge,
body.theme-forest .teacher-announcement,
body.theme-forest .profile-completion-card,
body.theme-forest .teacher-status-badge,
body.theme-burgundy .teacher-announcement,
body.theme-burgundy .profile-completion-card,
body.theme-burgundy .teacher-status-badge,
body.theme-obsidian .teacher-announcement,
body.theme-obsidian .profile-completion-card,
body.theme-obsidian .teacher-status-badge,
body.theme-deepsea .teacher-announcement,
body.theme-deepsea .profile-completion-card,
body.theme-deepsea .teacher-status-badge,
body.theme-copper .teacher-announcement,
body.theme-copper .profile-completion-card,
body.theme-copper .teacher-status-badge {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(18, 27, 36, 0.82)),
    var(--panel-soft);
}

.teacher-announcement {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.announcement-icon {
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 22px rgba(6, 93, 180, 0.18);
  font-weight: 900;
}

.announcement-copy,
.completion-copy,
.status-badge-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.announcement-copy strong,
.completion-copy strong,
.status-badge-copy strong {
  color: var(--ink);
  line-height: 1.2;
}

.announcement-copy span,
.completion-copy span,
.status-badge-copy span {
  color: var(--muted);
  line-height: 1.35;
}

.teacher-status-badge {
  grid-template-columns: auto 1fr;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(32, 122, 75, 0.14), rgba(20, 166, 161, 0.1)),
    var(--panel-soft);
}

.status-badge-mark {
  display: grid;
  width: 56px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--ok), var(--accent));
  box-shadow: 0 14px 24px rgba(32, 122, 75, 0.2);
  font-size: 1.35rem;
  font-weight: 900;
}

.teacher-status-badge.late .status-badge-mark,
.teacher-status-badge.waiting .status-badge-mark {
  background: linear-gradient(135deg, var(--warn), var(--gold));
}

.completion-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.completion-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  position: relative;
}

.completion-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width 180ms ease;
  position: relative;
  overflow: hidden;
}

.completion-track.incomplete .completion-fill::after,
.profile-completion-card.incomplete .completion-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.55) 48%, transparent 62%);
  background-size: 220% 100%;
  animation: progressShimmer 1900ms ease-in-out infinite;
}

.completion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.completion-list span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-size: 0.78rem;
  font-weight: 900;
}

.completion-list span.done {
  color: #08784b;
  background: rgba(18, 140, 90, 0.12);
  border-color: rgba(18, 140, 90, 0.22);
}

.school-logo-badge {
  display: inline-grid;
  width: 64px;
  aspect-ratio: 1;
  place-items: center;
  align-self: center;
  justify-self: center;
  flex: 0 0 auto;
  padding: 6px;
  border: 1px solid rgba(232, 169, 81, 0.36);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 22px rgba(17, 25, 35, 0.1);
}

.school-logo-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body.dark .school-logo-badge {
  border-color: rgba(240, 185, 106, 0.32);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
}

.school-choice-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(6, 93, 180, 0.14);
  border-radius: 16px;
  background: var(--panel-soft);
}

.school-choice-preview strong {
  display: block;
  color: var(--brand-deep);
  font-size: 0.94rem;
}

body.dark .school-choice-preview strong {
  color: var(--ink);
}

.welcome-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.welcome-copy h2 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  line-height: 1.08;
}

.welcome-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.welcome-timebar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.time-tile {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.time-tile:hover,
.snapshot-card:hover,
.calendar-day:hover,
.profile-item:hover,
.report-summary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 93, 180, 0.26);
  box-shadow: 0 14px 26px rgba(17, 25, 35, 0.1);
}

.time-tile span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.time-tile strong {
  align-self: end;
  color: var(--brand-deep);
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  line-height: 1;
}

body.dark .time-tile strong {
  color: var(--ink);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.clock-face {
  display: grid;
  place-items: center;
  min-height: 238px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92) 0 36%, transparent 37%),
    radial-gradient(circle at 50% 42%, transparent 0 48%, rgba(6, 93, 180, 0.3) 49% 50%, transparent 51%),
    linear-gradient(145deg, rgba(6, 93, 180, 0.14), rgba(20, 166, 161, 0.12)),
    var(--soft);
  text-align: center;
  border: 1px solid rgba(6, 93, 180, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 18px 40px rgba(6, 93, 180, 0.12);
  overflow: hidden;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.clock-face::before {
  content: "";
  position: absolute;
  width: min(220px, 58vw);
  aspect-ratio: 1;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 50%;
  animation: clockPulse 2600ms ease-in-out infinite;
}

.clock-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: min(78px, 20vw);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), transparent);
  opacity: 0.42;
  transform-origin: 50% 92%;
  transform: translate(-50%, -92%) rotate(0deg);
  animation: clockHandSweep 12000ms linear infinite;
  pointer-events: none;
}

.clock-face.on-time {
  border-color: rgba(32, 122, 75, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 18px 42px rgba(32, 122, 75, 0.16);
}

.clock-face.warning {
  border-color: rgba(185, 106, 34, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 18px 42px rgba(185, 106, 34, 0.17);
}

body.dark .clock-face {
  background:
    radial-gradient(circle at 50% 42%, rgba(20, 34, 48, 0.96) 0 36%, transparent 37%),
    radial-gradient(circle at 50% 42%, transparent 0 48%, rgba(113, 187, 255, 0.34) 49% 50%, transparent 51%),
    linear-gradient(145deg, rgba(74, 163, 255, 0.16), rgba(67, 215, 207, 0.1)),
    #0d1721;
  border-color: rgba(113, 187, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 42px rgba(0, 0, 0, 0.32);
}

body.theme-graphite .clock-face,
body.theme-nightfall .clock-face,
body.theme-amethyst .clock-face,
body.theme-forest .clock-face,
body.theme-burgundy .clock-face,
body.theme-obsidian .clock-face,
body.theme-deepsea .clock-face,
body.theme-copper .clock-face {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--panel-soft) 90%, #fff) 0 36%, transparent 37%),
    radial-gradient(circle at 50% 42%, transparent 0 48%, color-mix(in srgb, var(--brand) 32%, transparent) 49% 50%, transparent 51%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand) 15%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)),
    var(--panel);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 42px rgba(0, 0, 0, 0.32);
}

body.dark .clock-face::before {
  border-color: rgba(113, 187, 255, 0.22);
}

body.dark .clock-face.on-time {
  border-color: rgba(101, 209, 142, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(101, 209, 142, 0.14);
}

body.dark .clock-face.warning {
  border-color: rgba(255, 157, 114, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(255, 157, 114, 0.13);
}

.clock-face > div {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 100%;
}

/* Primary clock-in experience, location checks, and arrival feedback. */
.clock-hero {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(6, 93, 180, 0.22);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(20, 166, 161, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(245, 248, 251, 0.78)),
    var(--panel-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 20px 44px rgba(17, 25, 35, 0.1);
}

.dashboard.home-view .clock-hero {
  max-width: 100%;
}

.clock-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  width: min(112%, 560px);
  aspect-ratio: 1;
  margin: auto;
  background: url("../smc-logo.png") center / contain no-repeat;
  opacity: 0.06;
  filter: saturate(0.85);
  pointer-events: none;
  z-index: 0;
}

.clock-hero > * {
  position: relative;
  z-index: 1;
}

.clock-hero.clock-in-success {
  animation: successPop 520ms ease;
}

body.dark .clock-hero {
  background:
    radial-gradient(circle at top left, rgba(67, 215, 207, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(19, 34, 48, 0.96), rgba(10, 18, 27, 0.94)),
    var(--panel-soft);
  border-color: rgba(113, 187, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.32);
}

body.dark .clock-hero::before,
body.theme-graphite .clock-hero::before,
body.theme-nightfall .clock-hero::before,
body.theme-amethyst .clock-hero::before,
body.theme-forest .clock-hero::before,
body.theme-burgundy .clock-hero::before,
body.theme-obsidian .clock-hero::before,
body.theme-deepsea .clock-hero::before,
body.theme-copper .clock-hero::before {
  opacity: 0.09;
  filter: saturate(0.9) brightness(1.18);
}

.clock-hero.hero-style-spotlight {
  border-color: rgba(6, 93, 180, 0.32);
  background:
    radial-gradient(circle at 82% 10%, rgba(232, 169, 81, 0.2), transparent 30%),
    radial-gradient(circle at 16% 8%, rgba(20, 166, 161, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 252, 0.82)),
    var(--panel-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 26px 56px rgba(6, 93, 180, 0.16);
}

.clock-hero.hero-style-spotlight .clock-face {
  min-height: 214px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.72) 0 42%, transparent 43%),
    radial-gradient(circle at 50% 45%, transparent 0 54%, color-mix(in srgb, var(--brand) 24%, transparent) 55% 56%, transparent 57%),
    radial-gradient(circle at 85% 10%, rgba(232, 169, 81, 0.24), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, var(--accent) 13%, transparent)),
    var(--soft);
}

.clock-hero.hero-style-spotlight .clock-face::before {
  opacity: 0.45;
  width: min(188px, 52vw);
}

body.dark .clock-hero.hero-style-spotlight,
body.theme-graphite .clock-hero.hero-style-spotlight,
body.theme-nightfall .clock-hero.hero-style-spotlight,
body.theme-amethyst .clock-hero.hero-style-spotlight,
body.theme-forest .clock-hero.hero-style-spotlight,
body.theme-burgundy .clock-hero.hero-style-spotlight,
body.theme-obsidian .clock-hero.hero-style-spotlight,
body.theme-deepsea .clock-hero.hero-style-spotlight,
body.theme-copper .clock-hero.hero-style-spotlight {
  background:
    radial-gradient(circle at 82% 10%, rgba(240, 185, 106, 0.18), transparent 30%),
    radial-gradient(circle at 18% 6%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(10, 18, 27, 0.9)),
    var(--panel-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 58px rgba(0, 0, 0, 0.36);
}

.clock-hero.hero-style-focus {
  border-color: rgba(20, 166, 161, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 248, 251, 0.82)),
    var(--panel);
  box-shadow:
    inset 5px 0 0 var(--accent),
    0 18px 38px rgba(17, 25, 35, 0.1);
}

.clock-hero.hero-style-focus::before {
  opacity: 0.035;
  width: min(78%, 360px);
  right: -12%;
  left: auto;
}

.clock-hero.hero-style-focus .clock-face {
  place-items: start;
  min-height: 204px;
  padding: 24px;
  text-align: left;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent) 0 10px, transparent 10px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(245, 248, 251, 0.74)),
    var(--panel);
}

.clock-hero.hero-style-focus .clock-face > div {
  justify-items: start;
  width: 100%;
}

.clock-hero.hero-style-focus .clock-face::before {
  display: none;
}

body.dark .clock-hero.hero-style-focus,
body.theme-graphite .clock-hero.hero-style-focus,
body.theme-nightfall .clock-hero.hero-style-focus,
body.theme-amethyst .clock-hero.hero-style-focus,
body.theme-forest .clock-hero.hero-style-focus,
body.theme-burgundy .clock-hero.hero-style-focus,
body.theme-obsidian .clock-hero.hero-style-focus,
body.theme-deepsea .clock-hero.hero-style-focus,
body.theme-copper .clock-hero.hero-style-focus {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(10, 18, 27, 0.92)),
    var(--panel);
}

body.dark .clock-hero.hero-style-focus .clock-face,
body.theme-graphite .clock-hero.hero-style-focus .clock-face,
body.theme-nightfall .clock-hero.hero-style-focus .clock-face,
body.theme-amethyst .clock-hero.hero-style-focus .clock-face,
body.theme-forest .clock-hero.hero-style-focus .clock-face,
body.theme-burgundy .clock-hero.hero-style-focus .clock-face,
body.theme-obsidian .clock-hero.hero-style-focus .clock-face,
body.theme-deepsea .clock-hero.hero-style-focus .clock-face,
body.theme-copper .clock-hero.hero-style-focus .clock-face {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 0 10px, transparent 10px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(10, 18, 27, 0.78)),
    var(--panel);
}

.clock-hero.hero-style-minimal {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 12px 26px rgba(17, 25, 35, 0.08);
}

.clock-hero.hero-style-minimal::before {
  display: none;
}

.clock-hero.hero-style-minimal .clock-face {
  min-height: 194px;
  background: var(--panel-soft);
  border-color: var(--line);
  box-shadow: none;
}

.clock-hero.hero-style-minimal .clock-face::before {
  opacity: 0.38;
  animation: none;
}

.clock-hero.hero-compact {
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
}

.clock-hero.hero-compact .clock-face {
  min-height: 178px;
  border-radius: 16px;
}

.clock-hero.hero-compact .clock-face strong {
  font-size: clamp(2.5rem, 10vw, 3.8rem);
}

.clock-hero.hero-compact .clock-actions {
  margin-top: 6px;
}

.clock-hero.hero-compact .clock-actions button {
  min-height: 56px;
}

.clock-hero.hero-align-left .clock-face {
  justify-items: start;
  text-align: left;
}

.clock-hero.hero-align-left .clock-face > div {
  justify-items: start;
}

.clock-hero.hero-align-left .clock-hero-head {
  grid-template-columns: minmax(0, auto) auto auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.clock-hero.hero-align-left .secure-check,
.clock-hero.hero-align-left .arrival-preview,
.clock-hero.hero-align-left .clock-actions,
.clock-hero.hero-align-left .system-health {
  justify-content: start;
  text-align: left;
}

.clock-hero.hero-layout-wide {
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  align-items: center;
}

.clock-hero.hero-layout-wide .clock-hero-head,
.clock-hero.hero-layout-wide .clock-face,
.clock-hero.hero-layout-wide .success-celebration,
.clock-hero.hero-layout-wide .teacher-notification,
.clock-hero.hero-layout-wide .clock-actions {
  grid-column: 1;
}

.clock-hero.hero-layout-wide .secure-check,
.clock-hero.hero-layout-wide .arrival-preview,
.clock-hero.hero-layout-wide .system-health,
.clock-hero.hero-layout-wide .offline-sync-panel,
.clock-hero.hero-layout-wide .missed-clock-note,
.clock-hero.hero-layout-wide #clockMessage {
  grid-column: 2;
}

.clock-hero.hero-layout-stacked {
  justify-items: stretch;
}

.clock-hero.hero-layout-stacked .clock-face {
  min-height: 240px;
}

.clock-hero.hero-layout-minimal .clock-hero-head,
.clock-hero.hero-layout-minimal .secure-check,
.clock-hero.hero-layout-minimal .arrival-preview,
.clock-hero.hero-layout-minimal .system-health,
.clock-hero.hero-layout-minimal .offline-sync-panel,
.clock-hero.hero-layout-minimal .missed-clock-note {
  display: none !important;
}

.clock-hero.clock-style-analog .clock-face {
  min-height: 222px;
}

.clock-hero.clock-style-analog .clock-face::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 58px;
  left: 50%;
  top: calc(50% - 54px);
  border-radius: 999px;
  background: var(--brand);
  transform-origin: 50% 54px;
  animation: heroHandTick 12s linear infinite;
  opacity: 0.7;
}

.clock-hero.clock-style-countdown .clock-face strong::before {
  content: "Clock-in window ";
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 900;
}

.clock-hero.clock-style-ring .clock-face {
  background:
    conic-gradient(from -90deg, color-mix(in srgb, var(--brand) 72%, transparent) 0 74%, transparent 74% 100%),
    var(--panel-soft);
  padding: 8px;
}

.clock-hero.clock-style-ring .clock-face > div {
  width: calc(100% - 18px);
  min-height: calc(100% - 18px);
  border-radius: 999px;
  background: var(--panel);
  place-content: center;
}

.clock-hero.hero-theme-school {
  --hero-primary: #063b75;
  --hero-accent: #d6a548;
  border-color: rgba(214, 165, 72, 0.4);
}

.clock-hero.hero-theme-calm {
  --hero-primary: #0d766f;
  --hero-accent: #14a6a1;
  border-color: rgba(20, 166, 161, 0.35);
}

.clock-hero.hero-theme-midnight {
  --hero-primary: #07111a;
  --hero-accent: #71bbff;
  color: #f7fbff;
  border-color: rgba(113, 187, 255, 0.28);
  background: linear-gradient(145deg, #111d2a, #07111a);
}

.clock-hero.hero-theme-contrast {
  --hero-primary: #000;
  --hero-accent: #ffcc33;
  border: 2px solid #000;
  background: #fff;
  box-shadow: none;
}

.clock-hero.hero-theme-school .clock-face,
.clock-hero.hero-theme-calm .clock-face {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.72), transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--hero-primary) 18%, transparent), color-mix(in srgb, var(--hero-accent) 18%, transparent)),
    var(--panel-soft);
}

.clock-hero.hero-theme-midnight .clock-face,
.clock-hero.hero-theme-midnight .secure-check,
.clock-hero.hero-theme-midnight .arrival-preview,
.clock-hero.hero-theme-midnight .system-health,
.clock-hero.hero-theme-midnight .offline-sync-panel {
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.clock-hero.bg-plain {
  background: var(--panel);
}

.clock-hero.bg-plain::before {
  display: none;
}

.clock-hero.bg-logo::before {
  opacity: 0.1;
  width: min(94%, 480px);
}

.clock-hero.bg-pattern {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, transparent) 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 248, 251, 0.82)),
    var(--panel-soft);
}

.clock-hero.button-style-pill .clock-actions button {
  max-width: 260px;
  border-radius: 999px;
  justify-self: center;
}

.clock-hero.button-style-circle .clock-actions {
  justify-content: center;
}

.clock-hero.button-style-circle .clock-actions button:first-child {
  width: 118px;
  height: 118px;
  min-height: 118px;
  border-radius: 999px;
  flex-direction: column;
  padding: 8px;
}

.clock-hero.button-style-quiet .clock-actions button:first-child {
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  background: var(--panel);
  box-shadow: none;
}

.clock-hero.animation-none *,
.clock-hero.animation-none::before,
.clock-hero.animation-none .clock-face::before,
.clock-hero.animation-none .clock-face::after {
  animation: none !important;
}

.clock-hero.animation-pulse .clock-actions button:first-child {
  animation: adminSoftPulse 1800ms ease-in-out infinite;
}

.clock-hero.animation-scan .secure-icon {
  animation: gpsRing 1400ms ease-in-out infinite;
}

@keyframes heroHandTick {
  to { transform: rotate(360deg); }
}

.clock-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.hero-eyebrow {
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hero-cutoff {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(6, 93, 180, 0.1);
  color: var(--brand-deep);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

.hero-mode-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

body.dark .hero-cutoff {
  background: rgba(74, 163, 255, 0.16);
  color: #d9ecff;
  border: 1px solid rgba(113, 187, 255, 0.22);
}

body.dark .hero-mode-pill,
body.theme-graphite .hero-mode-pill,
body.theme-nightfall .hero-mode-pill,
body.theme-amethyst .hero-mode-pill,
body.theme-forest .hero-mode-pill,
body.theme-burgundy .hero-mode-pill,
body.theme-obsidian .hero-mode-pill,
body.theme-deepsea .hero-mode-pill,
body.theme-copper .hero-mode-pill {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.clock-face strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(2.7rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--brand-deep);
  max-width: 100%;
  text-align: center;
  word-break: keep-all;
}

body.dark .clock-face strong {
  color: var(--ink);
}

body.theme-graphite .clock-face strong,
body.theme-nightfall .clock-face strong,
body.theme-amethyst .clock-face strong,
body.theme-forest .clock-face strong,
body.theme-burgundy .clock-face strong,
body.theme-obsidian .clock-face strong,
body.theme-deepsea .clock-face strong,
body.theme-copper .clock-face strong {
  color: var(--ink);
}

.clock-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(32, 122, 75, 0.12);
  color: var(--ok);
  font-size: 0.82rem;
  font-weight: 900;
}

.clock-status-pill.warning {
  background: rgba(185, 106, 34, 0.12);
  color: var(--warn);
}

body.dark .clock-status-pill {
  background: rgba(101, 209, 142, 0.14);
  color: #a9efc2;
  border: 1px solid rgba(101, 209, 142, 0.2);
}

body.theme-graphite .clock-status-pill,
body.theme-nightfall .clock-status-pill,
body.theme-amethyst .clock-status-pill,
body.theme-forest .clock-status-pill,
body.theme-burgundy .clock-status-pill,
body.theme-obsidian .clock-status-pill,
body.theme-deepsea .clock-status-pill,
body.theme-copper .clock-status-pill {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent);
}

body.dark .clock-status-pill.warning {
  background: rgba(255, 157, 114, 0.14);
  color: #ffc8b3;
  border-color: rgba(255, 157, 114, 0.22);
}

body.theme-graphite .clock-status-pill.warning,
body.theme-nightfall .clock-status-pill.warning,
body.theme-amethyst .clock-status-pill.warning,
body.theme-forest .clock-status-pill.warning,
body.theme-burgundy .clock-status-pill.warning,
body.theme-obsidian .clock-status-pill.warning,
body.theme-deepsea .clock-status-pill.warning,
body.theme-copper .clock-status-pill.warning {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
}

.clock-actions {
  margin-top: 14px;
}

.clock-actions button {
  width: 100%;
  min-height: 64px;
  border-radius: 14px;
  font-size: 1.12rem;
  box-shadow: 0 16px 32px rgba(6, 93, 180, 0.25);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.fingerprint-icon {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}

.fingerprint-icon::before,
.fingerprint-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.fingerprint-icon::before {
  inset: 4px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-left-color: transparent;
}

.fingerprint-icon::after {
  left: 50%;
  top: 5px;
  width: 6px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-top-color: transparent;
  border-bottom-color: transparent;
  transform: translateX(-50%);
}

.clock-actions button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-120%);
  transition: transform 420ms ease;
}

.clock-actions button:hover::after {
  transform: translateX(120%);
}

.clock-actions button > span {
  position: relative;
  z-index: 1;
}

.clock-actions button.is-busy::after {
  width: 20px;
  height: 20px;
  inset: 0;
  margin: auto;
  border: 3px solid rgba(255, 255, 255, 0.48);
  border-top-color: #fff;
  border-radius: 50%;
  background: transparent;
  transform: none;
  animation: spin 800ms linear infinite;
}

.missed-clock-note {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(6, 93, 180, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(245, 248, 251, 0.82)),
    var(--panel-soft);
  box-shadow: 0 14px 26px rgba(17, 25, 35, 0.08);
}

body.dark .missed-clock-note,
body.theme-graphite .missed-clock-note,
body.theme-nightfall .missed-clock-note,
body.theme-amethyst .missed-clock-note,
body.theme-forest .missed-clock-note,
body.theme-burgundy .missed-clock-note,
body.theme-obsidian .missed-clock-note,
body.theme-deepsea .missed-clock-note,
body.theme-copper .missed-clock-note {
  border-color: rgba(113, 187, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(18, 27, 36, 0.78)),
    var(--panel-soft);
}

.missed-clock-note summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  list-style: none;
  cursor: pointer;
  color: var(--brand-deep);
  font-weight: 900;
}

.missed-clock-note summary::-webkit-details-marker {
  display: none;
}

.missed-note-icon {
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 20px rgba(6, 93, 180, 0.18);
  position: relative;
}

.missed-note-icon::before {
  content: "";
  width: 15px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.missed-note-icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background: currentColor;
  transform: translateY(5px);
  box-shadow: 0 -5px 0 currentColor;
}

.missed-note-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missed-note-title strong {
  color: var(--ink);
  line-height: 1.15;
}

.missed-note-title span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.missed-request-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(6, 93, 180, 0.1);
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.missed-request-status.pending {
  background: rgba(185, 106, 34, 0.16);
  color: #8b4f17;
}

.missed-request-status.approved {
  background: rgba(32, 122, 75, 0.16);
  color: #207a4b;
}

.missed-request-status.denied {
  background: rgba(174, 48, 48, 0.14);
  color: #ae3030;
}

.missed-clock-note.is-unavailable {
  border-color: color-mix(in srgb, var(--muted) 34%, var(--line));
  background: color-mix(in srgb, var(--muted) 5%, var(--panel-soft));
}

.missed-clock-note.is-unavailable .missed-note-form {
  opacity: 0.68;
}

.missed-note-toggle {
  width: 28px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(6, 93, 180, 0.1);
  position: relative;
}

.missed-note-toggle::before,
.missed-note-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
}

.missed-note-toggle::after {
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.missed-clock-note[open] .missed-note-toggle::after {
  transform: rotate(0);
}

body.dark .missed-clock-note summary,
body.theme-graphite .missed-clock-note summary,
body.theme-nightfall .missed-clock-note summary,
body.theme-amethyst .missed-clock-note summary,
body.theme-forest .missed-clock-note summary,
body.theme-burgundy .missed-clock-note summary,
body.theme-obsidian .missed-clock-note summary,
body.theme-deepsea .missed-clock-note summary,
body.theme-copper .missed-clock-note summary {
  color: var(--ink);
}

.missed-note-form {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.missed-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.missed-clock-note textarea {
  min-height: 74px;
  resize: vertical;
}

.missed-clock-note .hint {
  margin: 0;
}

.missed-note-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(6, 93, 180, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
}

.missed-note-extra {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed rgba(6, 93, 180, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.34);
}

.missed-note-extra summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--brand-deep);
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.missed-note-extra summary::after {
  content: "+";
  width: 22px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(6, 93, 180, 0.1);
  color: var(--brand);
}

.missed-note-extra[open] summary::after {
  content: "-";
}

.missed-request-detail {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

body.dark .missed-note-actions,
body.theme-graphite .missed-note-actions,
body.theme-nightfall .missed-note-actions,
body.theme-amethyst .missed-note-actions,
body.theme-forest .missed-note-actions,
body.theme-burgundy .missed-note-actions,
body.theme-obsidian .missed-note-actions,
body.theme-deepsea .missed-note-actions,
body.theme-copper .missed-note-actions {
  background: rgba(255, 255, 255, 0.05);
}

.secure-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 22px rgba(17, 25, 35, 0.06);
  transition: border-color 180ms ease, background 180ms ease;
  position: relative;
  overflow: hidden;
}

.secure-check.ok {
  border-color: rgba(32, 122, 75, 0.3);
  background: rgba(223, 241, 231, 0.72);
}

.secure-check.warn,
.secure-check.bad {
  border-color: rgba(185, 106, 34, 0.3);
  background: rgba(247, 229, 220, 0.72);
}

.secure-check.checking .secure-icon {
  animation: clockPulse 1200ms ease-in-out infinite;
}

.secure-check.checking::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 16px;
  opacity: 0;
  animation: zoneRing 1500ms ease-in-out infinite;
  pointer-events: none;
}

body.dark .secure-check {
  border-color: rgba(113, 187, 255, 0.18);
  background: rgba(13, 23, 33, 0.78);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

body.dark .secure-check.ok {
  border-color: rgba(101, 209, 142, 0.3);
  background: rgba(22, 55, 42, 0.72);
}

body.dark .secure-check.warn,
body.dark .secure-check.bad {
  border-color: rgba(255, 157, 114, 0.32);
  background: rgba(59, 34, 26, 0.72);
}

.secure-icon {
  position: relative;
  display: grid;
  width: 44px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 12px 22px rgba(6, 93, 180, 0.2);
}

.secure-icon::after {
  content: "";
  width: 16px;
  height: 9px;
  border: solid #fff;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg) translate(1px, -1px);
}

.secure-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.secure-copy strong {
  color: var(--ink);
  line-height: 1.2;
}

.secure-copy span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.arrival-preview {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(32, 122, 75, 0.26);
  background: linear-gradient(135deg, rgba(32, 122, 75, 0.1), rgba(20, 166, 161, 0.08));
}

.arrival-preview.warn {
  border-color: rgba(185, 106, 34, 0.28);
  background: linear-gradient(135deg, rgba(185, 106, 34, 0.1), rgba(247, 229, 220, 0.54));
}

body.dark .arrival-preview {
  border-color: rgba(101, 209, 142, 0.28);
  background: linear-gradient(135deg, rgba(22, 55, 42, 0.82), rgba(14, 36, 38, 0.7));
}

body.dark .arrival-preview.warn {
  border-color: rgba(255, 157, 114, 0.32);
  background: linear-gradient(135deg, rgba(59, 34, 26, 0.84), rgba(42, 27, 24, 0.72));
}

.arrival-preview strong {
  color: var(--ink);
  font-size: 1rem;
}

.arrival-preview span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  border: 1px solid rgba(91, 104, 120, 0.12);
}

.pill.ok {
  color: var(--ok);
  background: #dff1e7;
}

.pill.bad {
  color: var(--warn);
  background: #f7e5dc;
}

.today-status {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  box-shadow: inset 4px 0 0 rgba(6, 93, 180, 0.42);
}

.today-status strong {
  font-size: 1.2rem;
}

.today-timeline {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 16px;
  background: var(--panel-soft);
}

.timeline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.timeline-title strong {
  color: var(--ink);
}

.timeline-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.timeline-step {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--muted);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.timeline-dot {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 0.82rem;
  font-weight: 900;
}

.timeline-step strong {
  color: var(--ink);
  line-height: 1.15;
}

.timeline-step span:last-child {
  font-size: 0.86rem;
  line-height: 1.3;
}

.timeline-step.done {
  border-color: rgba(32, 122, 75, 0.32);
  background: linear-gradient(135deg, rgba(32, 122, 75, 0.1), rgba(20, 166, 161, 0.08));
}

.timeline-step.done .timeline-dot {
  color: #fff;
  background: linear-gradient(135deg, var(--ok), var(--accent));
}

.timeline-step.active {
  border-color: rgba(6, 93, 180, 0.36);
  box-shadow: 0 12px 24px rgba(6, 93, 180, 0.1);
}

.timeline-step.active .timeline-dot {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.timeline-step.bad {
  border-color: rgba(182, 81, 45, 0.34);
  background: rgba(182, 81, 45, 0.08);
}

.timeline-step.bad .timeline-dot {
  color: #fff;
  background: var(--warn);
}

/* Attendance summaries, streak progress, and recent status cards. */
.attendance-snapshot {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(245, 248, 251, 0.72)),
    var(--panel-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.dark .attendance-snapshot {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(18, 27, 36, 0.82)),
    var(--panel-soft);
}

.term-countdown-card {
  --christmas-intensity: 0;
  --christmas-snow-speed: 30s;
  --snow-ground-height: 4px;
  --snow-ground-opacity: 0;
  --grass-opacity: 1;
  --snow-cover-opacity: 0;
  --snowfall-opacity: 0;
  --snowfall-drift: 0px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin: 14px 0;
  min-height: 164px;
  padding: 24px 20px 20px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent), color-mix(in srgb, var(--gold) 8%, transparent)),
    var(--panel);
  box-shadow: 0 14px 28px rgba(17, 25, 35, 0.07);
}

.term-countdown-card::before,
.term-countdown-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

.term-countdown-card > * {
  position: relative;
  z-index: 1;
}

.term-snow-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--snow-ground-height);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 105%, rgba(9, 37, 25, 0.7) 0 54%, transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 46%),
    repeating-linear-gradient(102deg, rgba(142, 205, 86, 0.85) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(84deg, rgba(77, 161, 72, 0.9) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(74deg, rgba(31, 113, 59, 0.96) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, rgba(98, 181, 78, 0.98) 0 24%, rgba(37, 123, 61, 0.98) 58%, rgba(16, 62, 39, 0.98) 100%);
  border-top: 1px solid rgba(151, 222, 132, 0.58);
  box-shadow:
    inset 0 7px 12px rgba(255, 255, 255, 0.12),
    inset 0 -12px 18px rgba(0, 40, 22, 0.24),
    inset 0 -3px 0 rgba(9, 37, 25, 0.72),
    0 -8px 18px rgba(71, 157, 82, 0.12);
  filter: drop-shadow(0 -9px 18px rgba(53, 132, 70, 0.16));
  background-position: 0 0, 0 0, 0 0, 8px 2px, 16px 4px, 0 0;
  background-size: auto, auto, 32px 100%, 46px 100%, 58px 100%, auto;
  transform: translateY(18%);
  transform-origin: bottom center;
  transition: height 700ms ease, opacity 700ms ease, transform 700ms ease;
}

.term-snow-ground::before,
.term-snow-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.term-snow-ground::before {
  opacity: var(--snow-cover-opacity);
  background:
    radial-gradient(ellipse at 6% 8px, rgba(255, 255, 255, 0.98) 0 14px, transparent 15px),
    radial-gradient(ellipse at 22% 4px, rgba(250, 253, 255, 0.96) 0 22px, transparent 23px),
    radial-gradient(ellipse at 48% 10px, rgba(255, 255, 255, 0.98) 0 18px, transparent 19px),
    radial-gradient(ellipse at 72% 3px, rgba(246, 252, 255, 0.94) 0 26px, transparent 27px),
    radial-gradient(ellipse at 96% 11px, rgba(255, 255, 255, 0.95) 0 21px, transparent 22px),
    radial-gradient(ellipse at 38% 92%, rgba(88, 131, 170, 0.2) 0 18%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0 38%, rgba(228, 242, 255, 0.9) 70%, rgba(181, 210, 237, 0.5) 100%);
  box-shadow:
    inset 0 8px 14px rgba(255, 255, 255, 0.34),
    inset 0 -10px 18px rgba(88, 131, 170, 0.18),
    0 -10px 24px rgba(214, 237, 255, 0.18);
  transform: scaleY(calc(0.72 + (var(--snow-cover-opacity) * 0.28)));
  transform-origin: bottom center;
}

.term-snow-ground::after {
  opacity: calc(0.42 - (var(--snow-cover-opacity) * 0.22));
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(circle, rgba(218, 255, 185, 0.8) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(178, 232, 255, 0.58) 0 1.2px, transparent 1.6px),
    radial-gradient(ellipse at 20% 95%, rgba(4, 29, 18, 0.38) 0 18%, transparent 42%),
    radial-gradient(ellipse at 74% 96%, rgba(4, 29, 18, 0.28) 0 22%, transparent 46%);
  background-size: auto, 30px 20px, 54px 28px, auto, auto;
  transform: translateX(-115%) skewX(-2deg);
  animation: termGrassDew 10s ease-in-out infinite, termSnowGroundGlow 11s ease-in-out infinite;
}

.term-countdown-card.christmas .term-snow-ground {
  opacity: var(--snow-ground-opacity);
  transform: translateY(0);
  animation: termGrassSway 7.5s ease-in-out infinite;
}

.term-countdown-card.christmas .term-snow-ground::before {
  animation: termSnowSparkle 8s ease-in-out infinite;
}

.term-countdown-card.christmas::before {
  opacity: var(--snowfall-opacity);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 0.9px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.76) 0 1.2px, transparent 1.5px),
    radial-gradient(circle, rgba(218, 239, 255, 0.72) 0 1.8px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 2.4px, transparent 2.9px),
    radial-gradient(circle, rgba(255, 255, 255, 0.58) 0 0.7px, transparent 1px);
  background-size: 42px 48px, 68px 76px, 96px 112px, 148px 168px, 28px 36px;
  background-position: 0 0, 22px 12px, 42px 28px, 84px 36px, 12px 20px;
  filter: blur(calc(var(--christmas-intensity) * 0.18px));
  animation: termSnow var(--christmas-snow-speed) linear infinite, termSnowDrift calc(var(--christmas-snow-speed) * 1.35) ease-in-out infinite;
}

.term-countdown-card.christmas::after {
  opacity: calc(0.04 + (var(--christmas-intensity) * 0.28));
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 16%),
    radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 20%);
  transform: translateX(-120%);
  animation: termTwinkle calc(12s - (var(--christmas-intensity) * 4s)) ease-in-out infinite;
}

.term-countdown-card.christmas {
  border-color: rgba(244, 189, 80, 0.42);
  background:
    radial-gradient(circle at 88% 14%, rgba(244, 189, 80, 0.16), transparent 24%),
    radial-gradient(circle at 10% 88%, rgba(45, 137, 74, 0.18), transparent 28%),
    linear-gradient(145deg, #071421, #102942 58%, #06111d);
  box-shadow: 0 16px 32px rgba(7, 20, 33, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark .term-countdown-card.christmas {
  background:
    radial-gradient(circle at 88% 14%, rgba(244, 189, 80, 0.18), transparent 24%),
    radial-gradient(circle at 10% 88%, rgba(45, 137, 74, 0.2), transparent 28%),
    linear-gradient(145deg, #06111d, #0d243b 58%, #050d17);
}

.term-countdown-card.hidden {
  display: none !important;
}

.term-countdown-card.warn {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warn) 11%, transparent), color-mix(in srgb, var(--gold) 9%, transparent)),
    var(--panel);
}

.term-countdown-card.urgent {
  border-color: color-mix(in srgb, #d75050 52%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, #d75050 10%, transparent), color-mix(in srgb, var(--warn) 8%, transparent)),
    var(--panel);
}

.term-countdown-ring {
  --term-ring-color: var(--ok);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  width: 124px;
  height: 124px;
  padding: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--panel) 57%, transparent 58%),
    conic-gradient(var(--term-ring-color) var(--term-progress), color-mix(in srgb, var(--line) 70%, transparent) 0);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 20px rgba(17, 25, 35, 0.07);
  text-align: center;
  box-sizing: border-box;
}

.term-countdown-card.warn .term-countdown-ring {
  --term-ring-color: var(--warn);
}

.term-countdown-card.urgent .term-countdown-ring {
  --term-ring-color: #d75050;
}

.term-countdown-card.christmas .term-countdown-ring {
  --term-ring-color: var(--gold);
  background:
    radial-gradient(circle at center, #0a1b2c 55%, transparent 56%),
    conic-gradient(var(--gold) var(--term-progress), rgba(255, 255, 255, 0.16) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.term-countdown-ring strong {
  color: var(--ink);
  font-size: clamp(1.9rem, 5vw, 2.45rem);
  line-height: 0.9;
}

.term-countdown-card.christmas .term-countdown-ring strong {
  color: #fff8de;
  animation: termNumberTwinkle 3.2s ease-in-out infinite;
}

.term-countdown-card.christmas .term-countdown-ring span,
.term-countdown-card.christmas .term-countdown-copy p,
.term-countdown-card.christmas .term-countdown-meta {
  color: rgba(245, 249, 255, 0.82);
}

.term-countdown-card.christmas .term-countdown-copy h3 {
  color: #ffffff;
}

.term-countdown-card.christmas #termStatusPill {
  border-color: rgba(244, 189, 80, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: #fff8de;
}

.term-countdown-ring span {
  color: var(--muted);
  max-width: 76px;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: normal;
}

.term-countdown-copy {
  display: grid;
  gap: 9px;
  align-content: center;
  min-width: 0;
}

.term-countdown-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.term-countdown-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 3.3vw, 1.85rem);
  line-height: 1.05;
}

.term-countdown-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.term-progress-track {
  position: relative;
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 78%, transparent);
}

.term-progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 14% 50%, #d75050 0 3px, transparent 3.4px),
    radial-gradient(circle at 39% 50%, #2d894a 0 3px, transparent 3.4px),
    radial-gradient(circle at 66% 50%, var(--gold) 0 3px, transparent 3.4px),
    radial-gradient(circle at 88% 50%, #d75050 0 3px, transparent 3.4px);
}

.term-countdown-card.christmas .term-progress-track::after {
  opacity: calc(0.05 + (var(--christmas-intensity) * 0.23));
}

.term-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--ok));
  transition: width 360ms ease;
}

.term-countdown-card.warn .term-progress-fill {
  background: linear-gradient(90deg, var(--gold), var(--warn));
}

.term-countdown-card.urgent .term-progress-fill {
  background: linear-gradient(90deg, var(--warn), #d75050);
}

.term-countdown-card.christmas .term-progress-fill {
  background: linear-gradient(90deg, var(--brand), var(--gold));
}

.term-countdown-card.christmas .term-progress-track {
  background: rgba(255, 255, 255, 0.16);
}

.term-countdown-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.term-season-pill,
.term-final-week-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, var(--gold));
  color: color-mix(in srgb, var(--brand) 72%, var(--ink));
  font-size: 0.74rem;
  font-weight: 1000;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(17, 25, 35, 0.08);
}

.term-season-pill {
  padding: 5px 10px;
  z-index: 2;
}

.term-countdown-card.christmas .term-season-pill {
  border-color: rgba(244, 189, 80, 0.42);
  background: rgba(7, 20, 33, 0.78);
  color: #fff8de;
  backdrop-filter: blur(10px);
}

.term-season-pill::before,
.term-final-week-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}

.term-final-week-badge {
  padding: 4px 8px;
  color: #8a1f1f;
  border-color: rgba(215, 80, 80, 0.26);
  background: rgba(215, 80, 80, 0.08);
}

.term-final-week-badge::before {
  border-radius: 2px;
  background: #d75050;
  box-shadow: 0 0 0 3px rgba(215, 80, 80, 0.1);
}

.term-season-pill.hidden,
.term-final-week-badge.hidden {
  display: none;
}

@keyframes termSnow {
  0% {
    background-position: 0 0, 22px 12px, 42px 28px, 84px 36px, 12px 20px;
  }
  100% {
    background-position: 10px 96px, 8px 152px, 58px 224px, 66px 312px, 24px 144px;
  }
}

@keyframes termSnowDrift {
  0%, 100% {
    transform: translateX(calc(var(--snowfall-drift) * -0.35));
  }
  50% {
    transform: translateX(var(--snowfall-drift));
  }
}

@keyframes termTwinkle {
  0%, 48% {
    transform: translateX(-120%);
  }
  68%, 100% {
    transform: translateX(120%);
  }
}

@keyframes termNumberTwinkle {
  0%, 100% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 0 calc(8px + (var(--christmas-intensity) * 14px)) rgba(244, 189, 80, calc(0.08 + (var(--christmas-intensity) * 0.36)));
  }
}

@keyframes termSnowSparkle {
  0%, 100% {
    background-position: 0 0, 10px 6px, 24px 4px;
  }
  50% {
    background-position: 12px 2px, 2px 10px, 36px 2px;
  }
}

@keyframes termSnowGroundGlow {
  0%, 56% {
    transform: translateX(-115%) skewX(-2deg);
  }
  76%, 100% {
    transform: translateX(115%) skewX(-2deg);
  }
}

@keyframes termGrassSway {
  0%, 100% {
    background-position: 0 0, 0 0, 0 0, 8px 2px, 16px 4px, 0 0;
  }
  50% {
    background-position: 0 0, 0 0, 6px 0, 2px 2px, 22px 4px, 0 0;
  }
}

@keyframes termGrassDew {
  0%, 100% {
    background-position: 0 0, 0 0, 8px 6px, 0 0, 0 0;
  }
  50% {
    background-position: 0 0, 12px 1px, 2px 10px, 0 0, 0 0;
  }
}

@media (max-width: 520px) {
  .term-countdown-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-top: 44px;
  }

  .term-countdown-copy {
    justify-items: center;
  }

  .term-countdown-meta {
    justify-content: center;
  }
}

.feature-update-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 13, 22, 0.62);
  backdrop-filter: blur(11px);
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease, visibility 320ms ease, backdrop-filter 320ms ease;
}

.feature-update-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.feature-update-modal.hidden .feature-update-card {
  opacity: 0;
  transform: translateY(24px) scale(0.965);
}

.feature-update-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  width: min(580px, 100%);
  max-height: min(860px, calc(100vh - 36px));
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(244, 189, 80, 0.32);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 12%, rgba(244, 189, 80, 0.16), transparent 26%),
    radial-gradient(circle at 12% 92%, rgba(45, 137, 74, 0.14), transparent 30%),
    var(--panel);
  box-shadow: 0 24px 70px rgba(4, 12, 20, 0.34);
  transform: translateY(0) scale(1);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.2, 0.82, 0.2, 1);
  animation: featureModalIn 420ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.feature-scroll-cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 5;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 950;
  cursor: pointer;
  animation: featureScrollCue 1.7s ease-in-out infinite;
}

.feature-scroll-cue.visible {
  display: inline-flex;
  transform: translateX(-50%);
}

.feature-scroll-cue::after {
  content: "↓";
  font-size: 1rem;
  line-height: 1;
}

@keyframes featureScrollCue {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 3px; }
}

.feature-slide-editor-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.feature-slide-editor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.feature-slide-editor-item strong,
.feature-slide-editor-item span { display: block; min-width: 0; }
.feature-slide-editor-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-slide-editor-item span { color: var(--muted); font-size: 0.78rem; font-weight: 800; }

@media (max-width: 760px) {
  .feature-scroll-cue.visible { display: inline-flex; }
  .feature-slide-editor-item { align-items: flex-start; }
  .feature-slide-editor-item button { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-scroll-cue { animation: none; }
}

.feature-update-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 0;
  border-radius: inherit;
  background: url("../timeentrypro-logo.png") center 42% / min(260px, 58%) auto no-repeat;
  opacity: 0.045;
  pointer-events: none;
  filter: saturate(0.95);
}

.feature-update-card > * {
  position: relative;
  z-index: 1;
}

body.dark .feature-update-card {
  border-color: rgba(244, 189, 80, 0.42);
  background:
    radial-gradient(circle at 88% 12%, rgba(244, 189, 80, 0.18), transparent 26%),
    radial-gradient(circle at 12% 92%, rgba(45, 137, 74, 0.18), transparent 30%),
    linear-gradient(145deg, #0b1724, #101d2a 58%, #08111b);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
}

body.dark .feature-update-card::before {
  opacity: 0.075;
  filter: saturate(1.1) brightness(1.18);
}

.feature-update-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(10px);
}

.feature-preview-countdown {
  --feature-progress: 16%;
  --feature-snow-cover: 0.04;
  --feature-accent: var(--accent);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  justify-self: center;
  width: min(330px, 100%);
  min-height: 112px;
  padding: 12px 12px 22px;
  border: 1px solid rgba(244, 189, 80, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 12%, rgba(244, 189, 80, 0.16), transparent 22%),
    radial-gradient(circle at 11% 86%, rgba(69, 157, 88, 0.16), transparent 26%),
    linear-gradient(145deg, #071421, #112b43 58%, #06111d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 16px 34px rgba(4, 12, 20, 0.2);
  color: #fff;
  animation: featurePreviewIn 520ms 80ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.feature-preview-countdown.feature-preview-settings {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 92px;
  padding: 16px;
  border-color: rgba(43, 142, 247, 0.22);
  border-radius: 17px;
  background:
    radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--feature-accent) 16%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, white), color-mix(in srgb, var(--panel) 92%, var(--muted) 8%));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--text);
}

body.dark .feature-preview-countdown.feature-preview-settings {
  background:
    radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--feature-accent) 24%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, white 4%), color-mix(in srgb, var(--panel) 84%, #000 16%));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.feature-preview-countdown::before,
.feature-preview-countdown::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.feature-preview-countdown.feature-preview-settings::before,
.feature-preview-countdown.feature-preview-settings::after,
.feature-preview-countdown.feature-preview-settings .feature-preview-ground,
.feature-preview-countdown.feature-preview-settings .feature-preview-ring,
.feature-preview-countdown.feature-preview-settings .feature-preview-head,
.feature-preview-countdown.feature-preview-settings .term-progress-track,
.feature-preview-countdown.feature-preview-settings .feature-preview-meta {
  display: none;
}

.feature-preview-countdown::before {
  opacity: 0.08;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 0.9px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1.3px, transparent 1.7px),
    radial-gradient(circle, rgba(218, 239, 255, 0.7) 0 1.9px, transparent 2.4px);
  background-size: 42px 48px, 76px 88px, 118px 138px;
  animation: termSnow 35s linear infinite, termSnowDrift 48s ease-in-out infinite;
}

.feature-preview-countdown::after {
  opacity: 0.18;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(circle at 88% 16%, rgba(244, 189, 80, 0.16), transparent 18%);
  transform: translateX(-120%);
  animation: termTwinkle 11s ease-in-out infinite;
}

.feature-preview-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 46%),
    repeating-linear-gradient(102deg, rgba(142, 205, 86, 0.86) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(84deg, rgba(77, 161, 72, 0.9) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(74deg, rgba(31, 113, 59, 0.96) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, rgba(98, 181, 78, 0.98) 0 24%, rgba(37, 123, 61, 0.98) 58%, rgba(16, 62, 39, 0.98) 100%);
  border-top: 1px solid rgba(151, 222, 132, 0.58);
  box-shadow: inset 0 -12px 18px rgba(0, 40, 22, 0.24);
  animation: termGrassSway 7.5s ease-in-out infinite;
}

.feature-preview-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--feature-snow-cover);
  background:
    radial-gradient(ellipse at 18% 5px, rgba(255, 255, 255, 0.96) 0 20px, transparent 21px),
    radial-gradient(ellipse at 58% 8px, rgba(255, 255, 255, 0.94) 0 18px, transparent 19px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(214, 235, 252, 0.78));
}

.feature-preview-ring {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 58px;
  height: 58px;
  padding: 7px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #0a1b2c 55%, transparent 56%),
    conic-gradient(var(--gold) var(--feature-progress), rgba(255, 255, 255, 0.16) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 12px 24px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.feature-preview-ring strong {
  color: #fff8de;
  font-size: 1.05rem;
  line-height: 0.95;
}

.feature-preview-ring span {
  max-width: 44px;
  color: rgba(245, 249, 255, 0.86);
  font-size: 0.36rem;
  font-weight: 1000;
  line-height: 1.05;
  text-transform: uppercase;
}

.feature-preview-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.feature-preview-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.feature-preview-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(0.86rem, 2.2vw, 1.02rem);
  line-height: 1.05;
}

.feature-preview-countdown.feature-preview-settings .feature-preview-copy h3 {
  color: var(--text);
  font-size: 0.98rem;
  letter-spacing: 0;
}

.feature-preview-copy p,
.feature-preview-meta {
  margin: 0;
  color: rgba(245, 249, 255, 0.84);
  font-size: 0.66rem;
  font-weight: 850;
}

.feature-preview-countdown.feature-preview-settings .feature-preview-copy p {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.feature-preview-setting-control {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: space-between;
  min-width: 140px;
  min-height: 50px;
  padding: 0 13px 0 16px;
  border: 2px solid var(--feature-accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 96%, white 4%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--feature-accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 850;
}

.feature-preview-countdown.feature-preview-settings .feature-preview-setting-control {
  display: flex;
}

.feature-preview-setting-control span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-preview-setting-control::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.feature-preview-countdown.feature-preview-appearance {
  --feature-accent: var(--gold);
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  width: min(430px, 100%);
  min-height: 210px;
  border-color: rgba(244, 189, 80, 0.32);
}

.feature-preview-countdown.feature-preview-appearance .feature-preview-setting-control {
  display: none;
}

.feature-preview-countdown.feature-preview-appearance .feature-preview-copy {
  gap: 3px;
}

.feature-preview-countdown.feature-preview-appearance .feature-preview-copy h3 {
  font-size: 0.96rem;
}

.feature-preview-countdown.feature-preview-appearance .feature-preview-copy p {
  font-size: 0.68rem;
}

.feature-preview-theme-grid {
  position: relative;
  z-index: 1;
  display: none;
  gap: 8px;
  min-width: 0;
}

.feature-preview-countdown.feature-preview-appearance .feature-preview-theme-grid {
  display: grid;
}

.feature-preview-install-card {
  position: relative;
  z-index: 1;
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--feature-accent) 24%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--feature-accent) 14%, transparent), transparent 30%),
    color-mix(in srgb, var(--panel) 96%, white 4%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--feature-accent) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.feature-preview-countdown.feature-preview-install {
  --feature-accent: var(--accent);
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 152px;
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}

.feature-preview-countdown.feature-preview-install .feature-preview-copy {
  gap: 4px;
}

.feature-preview-countdown.feature-preview-install .feature-preview-setting-control {
  display: none;
}

.feature-preview-countdown.feature-preview-install .feature-preview-install-card {
  display: grid;
}

.feature-preview-install-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #08233f, #0f8aa6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(15, 23, 42, 0.16);
}

.feature-preview-install-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.feature-preview-install-card strong,
.feature-preview-install-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-preview-install-card strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 1000;
}

.feature-preview-install-card span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
}

.feature-preview-install-card em {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 26%, transparent);
}

.feature-preview-theme-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 1000;
}

.feature-preview-theme-head span {
  color: var(--muted);
  font-size: 0.65rem;
  text-transform: none;
}

.feature-preview-theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.feature-preview-theme-tile {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 68px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 96%, white 4%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.feature-preview-theme-tile.selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.feature-preview-theme-swatch {
  display: block;
  height: 31px;
  border-radius: 9px;
  background:
    linear-gradient(145deg, #1768b8 0 38%, transparent 39%),
    linear-gradient(145deg, rgba(245, 248, 255, 0.92) 0 40%, rgba(206, 240, 236, 0.92) 41% 62%, rgba(109, 203, 195, 0.95) 63%),
    #16a5ad;
  box-shadow: inset 0 -10px 0 rgba(255, 255, 255, 0.16);
}

.feature-preview-theme-swatch.ocean {
  background:
    linear-gradient(135deg, #0d8ec8 0 42%, transparent 43%),
    linear-gradient(145deg, rgba(232, 252, 255, 0.95) 0 42%, rgba(85, 214, 204, 0.94) 43%),
    #29c1bb;
}

.feature-preview-theme-swatch.emerald {
  background:
    linear-gradient(135deg, #1d855d 0 42%, transparent 43%),
    linear-gradient(145deg, rgba(223, 249, 231, 0.94) 0 42%, rgba(29, 160, 180, 0.92) 43%),
    #1aa2b8;
}

.feature-preview-theme-tile strong {
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 1000;
  line-height: 1.05;
}

.feature-preview-theme-tile em {
  position: absolute;
  top: 9px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
}

.feature-preview-meta {
  display: none;
}

.feature-update-copy {
  display: grid;
  align-content: center;
  gap: 9px;
  width: min(510px, 100%);
  padding: 6px 8px 8px;
}

.feature-update-top {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(510px, 100%);
  padding: 6px 48px 6px;
  text-align: center;
}

.feature-update-top::after {
  content: "";
  width: min(96px, 34%);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), transparent);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--gold) 28%, transparent);
}

.feature-update-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 14%, var(--panel));
  color: color-mix(in srgb, var(--gold) 74%, var(--ink));
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: featureCopyIn 420ms 95ms ease both;
}

.feature-update-card.priority-important .feature-update-eyebrow {
  border-color: color-mix(in srgb, var(--warn) 44%, transparent);
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
  color: color-mix(in srgb, var(--warn) 78%, var(--ink));
}

.feature-update-card.priority-security .feature-update-eyebrow {
  border-color: color-mix(in srgb, #d75050 46%, transparent);
  background: color-mix(in srgb, #d75050 14%, var(--panel));
  color: color-mix(in srgb, #d75050 82%, var(--ink));
}

.feature-update-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  animation: featureCopyIn 420ms 140ms ease both;
}

.feature-update-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.feature-update-feature-label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 1000;
  letter-spacing: 0;
}

.feature-update-top h2,
.feature-update-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.42rem, 3.3vw, 1.9rem);
  line-height: 1.02;
  animation: featureCopyIn 420ms 190ms ease both;
}

.feature-update-top h2 {
  padding-right: 0;
  font-size: clamp(1.72rem, 5vw, 2.35rem);
  text-wrap: balance;
}

.feature-update-copy p,
.feature-update-why {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.38;
}

.feature-update-benefit {
  color: var(--ink) !important;
  font-size: 0.92rem;
  font-weight: 950 !important;
  animation: featureCopyIn 420ms 235ms ease both;
}

.feature-update-why {
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 7%, var(--panel-soft));
  animation: featureCopyIn 420ms 280ms ease both;
}

.feature-update-points {
  display: grid;
  gap: 7px;
  animation: featureCopyIn 420ms 325ms ease both;
}

.feature-update-point {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-soft) 86%, transparent);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.35;
}

.feature-update-point::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent);
}

.feature-update-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  animation: featureCopyIn 420ms 370ms ease both;
}

.feature-update-step-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.feature-update-step-actions button {
  min-height: 38px;
  padding: 8px 12px;
}

body.dark .feature-update-point,
body.dark .feature-update-why {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.13);
}

body.dark .feature-update-benefit {
  color: #f7fbff !important;
}

@keyframes featureModalIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes featurePreviewIn {
  from {
    opacity: 0;
    transform: translateX(-14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes featureCopyIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.reduce-motion .feature-update-card,
body.reduce-motion .feature-preview-countdown,
body.reduce-motion .feature-update-eyebrow,
body.reduce-motion .feature-update-kicker,
body.reduce-motion .feature-update-top h2,
body.reduce-motion .feature-update-copy h2,
body.reduce-motion .feature-update-benefit,
body.reduce-motion .feature-update-why,
body.reduce-motion .feature-update-points,
body.reduce-motion .feature-update-actions {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 760px) {
  .feature-update-modal {
    padding: 10px;
    align-items: center;
  }

  .feature-update-card {
    gap: 6px;
    width: min(390px, 100%);
    max-height: min(620px, calc(100vh - 20px));
    padding: 10px;
    border-radius: 16px;
  }

  .feature-update-card::before {
    background-size: min(190px, 52%) auto;
    opacity: 0.035;
  }

  .feature-update-close {
    top: 10px;
    right: 10px;
    width: 34px;
    min-height: 34px;
  }

  .feature-preview-countdown {
    grid-template-columns: 48px minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
    width: min(250px, 100%);
    min-height: 78px;
    padding: 9px 9px 18px;
    border-radius: 14px;
  }

  .feature-preview-ring {
    width: 48px;
    height: 48px;
    padding: 6px;
  }

  .feature-preview-ring strong {
    font-size: 0.9rem;
  }

  .feature-preview-copy h3 {
    font-size: 0.88rem;
  }

  .feature-preview-copy p,
  .feature-preview-meta {
    font-size: 0.6rem;
  }

  .feature-preview-countdown.feature-preview-settings {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 148px);
    width: min(290px, 100%);
    min-height: 76px;
    padding: 11px;
  }

  .feature-preview-setting-control {
    min-width: 0;
    min-height: 42px;
    padding: 0 10px 0 12px;
    font-size: 0.84rem;
  }

  .feature-preview-head,
  .feature-update-actions {
    justify-content: center;
  }

  .feature-update-eyebrow {
    min-height: 20px;
    padding: 4px 9px;
    font-size: 0.58rem;
  }

  .feature-update-kicker {
    justify-content: center;
    gap: 5px;
  }

  .feature-update-count,
  .feature-update-feature-label {
    font-size: 0.7rem;
  }

  .feature-update-step-actions {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .feature-update-copy {
    gap: 5px;
    width: min(330px, 100%);
    padding: 2px 0;
    text-align: center;
  }

  .feature-update-top {
    gap: 5px;
    width: min(330px, 100%);
    padding: 24px 40px 0;
  }

  .feature-update-top::after {
    width: 72px;
    height: 3px;
  }

  .feature-update-top h2 {
    font-size: 1.22rem;
    line-height: 1.05;
  }

  .feature-update-benefit {
    font-size: 0.76rem;
  }

  .feature-update-copy p,
  .feature-update-why {
    font-size: 0.72rem;
    line-height: 1.24;
  }

  .feature-update-why {
    padding: 7px 9px;
    border-radius: 10px;
  }

  .feature-update-points {
    gap: 5px;
  }

  .feature-update-point {
    gap: 7px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .feature-update-point::before {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
  }

  .feature-update-actions {
    gap: 7px;
  }

  .feature-update-media {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 6px;
    width: min(320px, 100%);
  }

  .feature-update-media img {
    height: 72px;
    border-radius: 10px;
  }

  .feature-update-actions > button,
  .feature-update-step-actions button {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  .feature-update-modal {
    padding: 8px;
  }

  .feature-update-card {
    width: min(320px, 100%);
    max-height: min(560px, calc(100vh - 16px));
  }

  .feature-preview-countdown {
    width: min(220px, 100%);
  }

  .feature-preview-ring {
    width: 44px;
    height: 44px;
  }

  .feature-preview-countdown.feature-preview-settings {
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: left;
  }

  .feature-preview-countdown.feature-preview-settings .feature-preview-copy {
    text-align: left;
  }

  .feature-preview-install-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .feature-preview-install-card em {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .feature-update-top {
    padding: 24px 36px 0;
  }

  .feature-update-top h2 {
    font-size: 1.08rem;
  }

  .feature-update-kicker {
    display: none;
  }

  .feature-update-copy {
    width: 100%;
  }

  .feature-update-media img {
    height: 64px;
  }

  .feature-update-point:nth-child(n + 3) {
    display: none;
  }
}

.snapshot-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.snapshot-title strong {
  color: var(--ink);
}

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

.snapshot-card {
  display: grid;
  gap: 8px;
  min-height: 106px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 10px 22px rgba(17, 25, 35, 0.06);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.snapshot-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.snapshot-card strong {
  align-self: end;
  color: var(--brand-deep);
  font-size: clamp(1.55rem, 5vw, 2.15rem);
  line-height: 1;
}

.snapshot-card small {
  color: var(--muted);
  line-height: 1.25;
}

.profile-edit-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}

.profile-edit-panel.hidden {
  display: none !important;
}

.profile-edit-panel .hint {
  margin: 0;
}

body.dark .snapshot-card strong {
  color: var(--ink);
}

.streak-card {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 189, 89, 0.2), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, white), color-mix(in srgb, var(--brand-2) 8%, var(--panel)));
  box-shadow: 0 18px 34px rgba(17, 25, 35, 0.1);
}

.streak-card::before {
  content: "";
  position: absolute;
  inset: auto -15% -40% 22%;
  height: 82px;
  background: radial-gradient(circle, rgba(255, 189, 89, 0.16), transparent 68%);
  pointer-events: none;
}

.streak-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background:
    conic-gradient(var(--brand-2) var(--streak-progress, 0%), rgba(148, 163, 184, 0.25) 0),
    var(--panel);
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--panel) 92%, white), 0 14px 26px rgba(17, 25, 35, 0.12);
}

.streak-ring::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

.streak-ring strong,
.streak-ring span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.streak-ring strong {
  color: var(--brand-deep);
  font-size: 2.25rem;
  line-height: 0.95;
}

.streak-ring span {
  max-width: 72px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.streak-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.streak-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.streak-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 3vw, 1.35rem);
}

.streak-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.streak-week-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.streak-day {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-height: 66px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.streak-day span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.streak-day strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 0.82rem;
}

.streak-day.kept {
  border-color: rgba(18, 138, 79, 0.32);
  background: rgba(18, 138, 79, 0.1);
}

.streak-day.kept strong {
  color: #fff;
  background: var(--ok);
}

.streak-day.protected,
.streak-day.closed {
  border-color: rgba(6, 93, 180, 0.26);
  background: rgba(6, 93, 180, 0.09);
}

.streak-day.protected strong,
.streak-day.closed strong {
  color: var(--brand-deep);
  background: #dcebff;
}

.streak-day.missed {
  border-color: rgba(192, 57, 43, 0.24);
  background: rgba(192, 57, 43, 0.08);
}

.streak-day.missed strong {
  color: #fff;
  background: var(--bad);
}

.streak-day.pending {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.08);
}

.streak-day.pending strong {
  color: #fff;
  background: #2563eb;
  animation: streakPendingPulse 1.8s ease-in-out infinite;
}

.streak-day strong {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .streak-day.pending strong { animation: none; }
}

.streak-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.streak-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.streak-card.celebrate {
  animation: streakGlow 900ms ease both;
}

.streak-card.streak-milestone .streak-ring {
  animation: streakRingPulse 760ms ease both;
}

@keyframes streakRingPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

body.reduce-motion .streak-card.streak-milestone,
body.reduce-motion .streak-card.streak-milestone .streak-ring {
  animation: none;
}

@keyframes streakGlow {
  0% { box-shadow: 0 18px 34px rgba(17, 25, 35, 0.1); }
  45% { box-shadow: 0 0 0 5px rgba(255, 189, 89, 0.18), 0 22px 40px rgba(17, 25, 35, 0.14); }
  100% { box-shadow: 0 18px 34px rgba(17, 25, 35, 0.1); }
}

body.dark .streak-card,
body.theme-graphite .streak-card,
body.theme-nightfall .streak-card,
body.theme-amethyst .streak-card,
body.theme-forest .streak-card,
body.theme-burgundy .streak-card,
body.theme-obsidian .streak-card,
body.theme-deepsea .streak-card,
body.theme-copper .streak-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 189, 89, 0.16), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 88%, black), color-mix(in srgb, var(--brand) 10%, var(--panel)));
}

/* Monthly history calendar and selected-day attendance details. */
.mini-calendar {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 16px;
  background: var(--panel-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.calendar-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-title strong {
  color: var(--ink);
}

.calendar-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(52px, 1fr));
  gap: 6px;
  padding-bottom: 2px;
}

.calendar-day {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 92px;
  min-width: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

button.calendar-day {
  cursor: pointer;
  font: inherit;
}

.calendar-day:hover,
.calendar-day.selected {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow: 0 14px 26px rgba(6, 93, 180, 0.12);
  transform: translateY(-1px);
}

.calendar-day.blank {
  visibility: hidden;
  pointer-events: none;
}

.calendar-day.today {
  border-color: rgba(6, 93, 180, 0.42);
  box-shadow: 0 12px 22px rgba(6, 93, 180, 0.1);
}

.calendar-day.today:not(.compact-recent-day)::before {
  content: "Today";
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 0 8px 16px rgba(6, 93, 180, 0.18);
}

.calendar-day strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1;
}

.calendar-day span {
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-day small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.calendar-status {
  display: inline-flex;
  width: fit-content;
  min-height: 21px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.calendar-time {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
}

.compact-history-link {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.compact-recent-day .calendar-today-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 0.56rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 0 8px 16px rgba(6, 93, 180, 0.18);
}

.calendar-day.present .calendar-status {
  color: var(--ok);
  background: #dff1e7;
}

.calendar-day.streak-kept {
  box-shadow: inset 0 -3px 0 rgba(18, 138, 79, 0.58);
}

.calendar-day.streak-milestone {
  border-color: rgba(255, 189, 89, 0.78);
  box-shadow: inset 0 -3px 0 rgba(255, 189, 89, 0.82), 0 0 0 3px rgba(255, 189, 89, 0.16);
}

.calendar-day.streak-broken {
  box-shadow: inset 0 -3px 0 rgba(192, 57, 43, 0.5);
}

.calendar-streak-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  color: #6a4500;
  background: rgba(255, 189, 89, 0.2);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.calendar-day.tardy .calendar-status {
  color: var(--warn);
  background: #f7e5dc;
}

.calendar-day.absent .calendar-status {
  color: #b42318;
  background: #ffe4e2;
}

.calendar-day.closed .calendar-status {
  color: var(--muted);
  background: #edf1f5;
}

.calendar-day.corrected::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.calendar-day.term-start,
.calendar-day.term-end {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 62%),
    var(--panel);
}

.calendar-day.term-end {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
}

.calendar-term-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  font-size: 0.66rem;
  font-weight: 900;
}

.calendar-day.term-end .calendar-term-label {
  color: #8a5a00;
  background: color-mix(in srgb, var(--gold) 18%, var(--panel));
}

.calendar-day.has-school-event {
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 64%),
    var(--panel);
}

.calendar-event-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: color-mix(in srgb, var(--brand) 9%, var(--panel));
  font-size: 0.64rem;
  font-weight: 900;
}

.calendar-event-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.calendar-event-list p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 5%, var(--panel));
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.calendar-weekdays,
.calendar-legend,
.calendar-month-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.calendar-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--line);
}

.calendar-legend .present i { background: var(--ok); }
.calendar-legend .late i { background: var(--warn); }
.calendar-legend .missed i { background: #d75050; }
.calendar-legend .closed i { background: #a8b1bd; }
.calendar-legend .corrected i { background: #7c3aed; }

.calendar-selected-detail {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.calendar-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.calendar-detail-grid div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.calendar-detail-grid span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-detail-grid strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.calendar-dot {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--line);
}

.calendar-day.present .calendar-dot {
  background: var(--ok);
}

.calendar-day.tardy .calendar-dot {
  background: var(--warn);
}

.calendar-day.absent .calendar-dot {
  background: #d75050;
}

.calendar-day.closed .calendar-dot {
  background: #a8b1bd;
}

.calendar-day.today .calendar-dot {
  box-shadow: 0 0 0 5px rgba(6, 93, 180, 0.12);
}

.smart-notices {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.smart-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 93, 180, 0.08), rgba(20, 166, 161, 0.08)),
    var(--panel-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.notice-icon {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 22px rgba(6, 93, 180, 0.2);
  font-size: 1.1rem;
  font-weight: 900;
}

.smart-notice.ok .notice-icon {
  background: linear-gradient(135deg, var(--ok), var(--accent));
}

.smart-notice.warn .notice-icon {
  background: var(--warn);
}

.profile-card,
/* Teacher profile preferences, privacy information, and device settings. */
.settings-card {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(6, 93, 180, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(245, 248, 251, 0.72)),
    var(--panel-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.dark .profile-card,
body.dark .settings-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(18, 27, 36, 0.82)),
    var(--panel-soft);
}

.profile-title,
.settings-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-title strong,
.settings-title strong {
  color: var(--ink);
}

.profile-photo-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 93, 180, 0.09), rgba(20, 166, 161, 0.06)),
    var(--panel);
}

.profile-photo-preview {
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  box-shadow: 0 14px 26px rgba(6, 93, 180, 0.2);
  font-size: 1.45rem;
  font-weight: 900;
}

.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signature-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.14);
  border-radius: 16px;
  background: var(--panel);
}

.signature-head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.signature-head strong,
.signature-preview strong {
  color: var(--ink);
}

.signature-pad {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px dashed rgba(6, 93, 180, 0.36);
  border-radius: 14px;
  background:
    linear-gradient(transparent 72%, rgba(6, 93, 180, 0.12) 72%, rgba(6, 93, 180, 0.12) 73%, transparent 73%),
    #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  cursor: crosshair;
  touch-action: none;
}

.signature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.saved-signature-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.saved-signature-preview span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.saved-signature-preview img {
  width: 100%;
  max-height: 110px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.signature-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.signature-preview img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.record-signature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 168px;
  min-height: 32px;
  padding: 4px 7px;
  border: 1px solid rgba(20, 166, 161, 0.28);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(20, 166, 161, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.record-signature img {
  width: 58px;
  height: 22px;
  object-fit: contain;
  border-radius: 999px;
  background: #fff;
}

.record-signature.missing {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel-soft);
}

.teacher-signature-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
}

.admin-signature-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-signature-preview img {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.profile-photo-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.profile-photo-copy strong {
  color: var(--ink);
}

.photo-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 16, 24, 0.62);
  backdrop-filter: blur(10px);
}

.photo-crop-card {
  display: grid;
  gap: 14px;
  width: min(460px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.photo-crop-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.photo-crop-head strong {
  color: var(--ink);
  font-size: 1.12rem;
}

.photo-crop-frame {
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--line) 34%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--line) 34%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--line) 34%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--line) 34%, transparent) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

.photo-crop-preview {
  width: min(320px, 100%);
  aspect-ratio: 1;
  border: 4px solid #fff;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(17, 25, 35, 0.2);
}

.photo-crop-controls {
  display: grid;
  gap: 10px;
}

.photo-crop-controls label {
  gap: 6px;
}

.photo-crop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.photo-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(6, 93, 180, 0.16);
}

.photo-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.teacher-badge-card,
.profile-info-panel,
.privacy-note,
.profile-help-panel,
.profile-extra-details {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.profile-extra-details summary,
.profile-help-panel summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

.profile-extra-details[open] summary,
.profile-help-panel[open] summary {
  margin-bottom: 10px;
}

.teacher-badge-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--gold) 16%, transparent), transparent 34%),
    linear-gradient(180deg, #102033 0 78px, transparent 78px),
    var(--panel);
  box-shadow: 0 16px 34px rgba(17, 25, 35, 0.08);
}

.teacher-badge-card::before {
  content: "";
  position: absolute;
  inset: 74px 0 auto 0;
  width: auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}

.teacher-badge-card > * {
  position: relative;
  z-index: 1;
}

.badge-brand-row,
.badge-main,
.badge-actions,
.privacy-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.badge-brand-row img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.badge-brand-row {
  justify-content: space-between;
  min-height: 78px;
  padding: 14px 16px 18px;
  border-bottom: 0;
  color: #fff;
}

.teacher-badge-card strong,
.profile-info-panel > strong,
.privacy-note strong {
  color: var(--ink);
  font-weight: 900;
}

.badge-brand-row span {
  color: #fff;
  font-weight: 1000;
}

.badge-main {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 178px);
  gap: 14px;
  justify-content: initial;
  align-items: stretch;
  padding: 16px;
}

.badge-main > div:first-child,
.badge-identity {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 16px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 15%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 4%, var(--panel-soft));
}

.badge-photo {
  display: grid;
  width: 108px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 14px 26px rgba(6, 93, 180, 0.18);
  font-size: 1.3rem;
  font-weight: 900;
}

.teacher-qr-box {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 178px;
  min-height: 178px;
  padding: 10px;
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  background: #fff;
  box-shadow: inset 0 0 0 8px #fff, 0 10px 22px rgba(17, 25, 35, 0.08);
}

.teacher-qr-box img {
  width: min(154px, 100%);
  height: auto;
  image-rendering: pixelated;
}

.teacher-qr-box canvas {
  display: none;
}

.badge-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-main span,
.privacy-note span {
  color: var(--muted);
  font-weight: 700;
}

.badge-actions {
  align-items: stretch;
  padding: 0 16px 16px;
}

@media (max-width: 620px) {
  .badge-main {
    grid-template-columns: 1fr;
  }

  .teacher-qr-box {
    min-height: 0;
  }
}

.badge-size-select {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.badge-size-select select {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
}

.copy-teacher-id-button {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  box-shadow: 0 10px 20px rgba(6, 93, 180, 0.14);
}

body.theme-obsidian .copy-teacher-id-button,
body.theme-deepsea .copy-teacher-id-button,
body.theme-forest .copy-teacher-id-button {
  color: #07111a;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.teacher-badge-card.temporary-qr {
  border-color: color-mix(in srgb, var(--warn) 36%, var(--line));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--warn) 14%, transparent);
}

.teacher-badge-card.temporary-qr .teacher-qr-box {
  animation: adminSoftPulse 1800ms ease-in-out infinite;
}

.badge-print-preview {
  display: grid;
  gap: 14px;
}

.badge-print-preview img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.badge-print-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.badge-print-status div,
.badge-print-instructions {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.badge-print-status strong,
.badge-print-instructions strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
}

.badge-print-status span,
.badge-print-instructions span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.streak-revive-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 12px;
  background: color-mix(in srgb, #f3e8ff 28%, var(--panel));
}

.streak-revive-panel[hidden] { display: none; }
.streak-revive-panel > div { display: grid; gap: 3px; min-width: 0; }
.streak-revive-panel strong { color: var(--ink); font-size: 0.88rem; }
.streak-revive-panel span { color: var(--muted); font-size: 0.78rem; line-height: 1.3; }
.streak-revive-panel button { flex: 0 0 auto; }

.teacher-revive-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.teacher-revive-line button {
  padding: 4px 8px;
  font-size: 0.72rem;
}

.scan-preview-card {
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
}

.scan-preview-shell {
  display: grid;
  gap: 16px;
}

.scan-preview-brand,
.scan-preview-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scan-preview-brand {
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scan-preview-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.scan-preview-badge {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--gold) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 50%),
    var(--panel-soft);
  animation: celebrationIn 420ms ease both;
}

.scan-preview-mark {
  display: grid;
  width: 62px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 16px 30px color-mix(in srgb, var(--brand) 22%, transparent);
  font-weight: 900;
}

.scan-preview-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-preview-badge h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1.15;
}

.scan-preview-badge p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.profile-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-mini-list {
  display: grid;
  gap: 8px;
}

.profile-mini-list span,
.profile-stat-grid span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.profile-mini-list strong,
.profile-stat-grid strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.profile-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.profile-mini-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.test-scanner-card {
  max-width: 1040px;
  margin-inline: auto;
  overflow: hidden;
  border-color: color-mix(in srgb, #22d3ee 30%, var(--line));
  background:
    linear-gradient(135deg, rgba(6, 16, 31, 0.98), rgba(13, 31, 47, 0.96)),
    var(--panel);
  color: #e8f8ff;
}

.admin-inline-scanner-host {
  grid-column: 1 / -1;
}

.test-scanner-card.admin-scanner-inline {
  width: 100%;
  max-width: none;
  margin: 8px 0 0;
  border-radius: 16px;
  box-shadow: none !important;
}

.test-scanner-card::before {
  background:
    linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.35), transparent),
    linear-gradient(180deg, rgba(214, 165, 72, 0.22), transparent);
}

.test-scanner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.86fr);
  gap: 18px;
}

.test-scanner-stage,
.scanner-result-panel {
  min-width: 0;
}

.test-scanner-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.scanner-kicker,
.scanner-status-pill {
  width: fit-content;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  color: #9ff6ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 7px 10px;
  text-transform: uppercase;
}

.test-scanner-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1;
}

.test-scanner-head p {
  max-width: 62ch;
  margin: 0;
  color: #a9bfd0;
  font-weight: 750;
  line-height: 1.45;
}

.scanner-camera-shell {
  position: relative;
  display: grid;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px),
    #06101f;
  background-size: 32px 32px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.scanner-camera-shell video {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  opacity: 0.22;
}

.scanner-camera-shell.scanning video {
  opacity: 0.92;
}

.scanner-camera-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: #c8d8e5;
}

.scanner-camera-placeholder strong {
  color: #ffffff;
  font-size: 1.25rem;
}

.scanner-camera-placeholder span {
  color: #9cb0c2;
  font-weight: 750;
}

.scanner-hud {
  position: absolute;
  inset: 22px;
  pointer-events: none;
}

.scanner-corner {
  position: absolute;
  width: 54px;
  height: 54px;
  border-color: #22d3ee;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.65));
}

.scanner-corner.top-left {
  top: 0;
  left: 0;
  border-top: 3px solid;
  border-left: 3px solid;
}

.scanner-corner.top-right {
  top: 0;
  right: 0;
  border-top: 3px solid;
  border-right: 3px solid;
}

.scanner-corner.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 3px solid;
  border-left: 3px solid;
}

.scanner-corner.bottom-right {
  right: 0;
  bottom: 0;
  border-right: 3px solid;
  border-bottom: 3px solid;
}

.scanner-sweep {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 18%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #22d3ee, #d6a548, transparent);
  box-shadow: 0 0 26px rgba(34, 211, 238, 0.82);
  animation: scannerSweep 2.2s ease-in-out infinite;
}

.scanner-target-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d6a548;
  box-shadow: 0 0 0 8px rgba(214, 165, 72, 0.12), 0 0 20px rgba(214, 165, 72, 0.65);
  transform: translate(-50%, -50%);
}

.scanner-control-deck {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.scanner-control-deck button {
  min-width: 132px;
}

.scanner-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.scanner-signal-row span {
  min-height: 27px;
  padding: 7px 10px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #b9e8f0;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.scanner-manual-entry,
.scanner-upload-entry {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: #c8d8e5;
  font-weight: 850;
}

.scanner-manual-entry input,
.scanner-upload-entry input {
  border-color: rgba(34, 211, 238, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.scanner-upload-entry input {
  padding: 10px;
  cursor: pointer;
}

.scanner-result-panel {
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(214, 165, 72, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
}

.scanner-result-empty {
  display: grid;
  min-height: 390px;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  color: #9cb0c2;
}

.scanner-core {
  width: 78px;
  aspect-ratio: 1;
  border: 2px solid rgba(34, 211, 238, 0.62);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(214, 165, 72, 0.2)),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 22px rgba(34, 211, 238, 0.24), 0 0 24px rgba(34, 211, 238, 0.18);
}

.scanner-result-empty strong {
  color: #ffffff;
  font-size: 1.1rem;
}

.scanner-result-content {
  display: grid;
  gap: 14px;
}

.scanner-profile-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.scanner-profile-photo {
  display: grid;
  width: 74px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 18px;
  background: linear-gradient(135deg, #065db4, #12b3a8);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 950;
}

.scanner-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-profile-top h3 {
  margin: 8px 0 4px;
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1.1;
}

.scanner-profile-top p {
  margin: 0;
  color: #a9bfd0;
  font-weight: 850;
}

.scanner-status-pill.ok {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.16);
  color: #b7ffd0;
}

.scanner-status-pill.bad {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.14);
  color: #ffd1d1;
}

.scanner-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.scanner-profile-grid div,
.scanner-clock-card {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.scanner-profile-grid span,
.scanner-clock-card span,
.scanner-clock-card small {
  color: #9cb0c2;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.25;
}

.scanner-profile-grid strong,
.scanner-clock-card strong {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.scanner-clock-card {
  border-color: rgba(34, 211, 238, 0.2);
}

.scanner-clock-card.clocked {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.13);
}

.scanner-clock-card.duplicate {
  border-color: rgba(214, 165, 72, 0.42);
  background: rgba(214, 165, 72, 0.12);
}

.scanner-clock-card.blocked {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.12);
}

.test-scanner-card .message {
  margin-top: 12px;
  border-color: rgba(34, 211, 238, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #d6f7ff;
}

.test-scanner-card .message.ok {
  color: #b7ffd0;
}

.test-scanner-card .message.bad {
  color: #ffd1d1;
}

@keyframes scannerSweep {
  0%, 100% { top: 18%; opacity: 0.65; }
  50% { top: 82%; opacity: 1; }
}

@media (max-width: 860px) {
  .test-scanner-grid {
    grid-template-columns: 1fr;
  }

  .scanner-camera-shell,
  .scanner-camera-shell video {
    min-height: 330px;
  }
}

@media (max-width: 520px) {
  .test-scanner-card {
    padding: 14px;
  }

  .scanner-profile-grid {
    grid-template-columns: 1fr;
  }

  .scanner-control-deck {
    display: grid;
    grid-template-columns: 1fr;
  }

  .scanner-control-deck button {
    width: 100%;
  }
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-stat-grid div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  background: var(--panel-soft);
}

.profile-streak-summary {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 6%, var(--panel-soft));
}

.profile-streak-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-streak-summary-head strong { color: var(--ink); }
.profile-streak-summary-head span { color: var(--muted); font-size: 0.76rem; font-weight: 800; }

.profile-streak-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profile-streak-summary-grid div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.profile-streak-summary-grid strong { color: var(--ink); font-size: 1rem; }
.profile-streak-summary-grid span { color: var(--muted); font-size: 0.68rem; font-weight: 900; }

@media (max-width: 720px) {
  .profile-streak-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.profile-help-panel summary {
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 720px) {
  .profile-insight-grid,
  .profile-stat-grid {
    grid-template-columns: 1fr;
  }
}

body.printing-badge * {
  visibility: hidden !important;
}

body.printing-badge #teacherBadgeCard,
body.printing-badge #teacherBadgeCard * {
  visibility: visible !important;
}

body.printing-badge #teacherBadgeCard {
  position: fixed;
  inset: 24px auto auto 24px;
  width: 420px;
  background: #fff;
  color: #16233f;
  box-shadow: none;
}

.settings-grid {
  display: grid;
  gap: 12px;
}

.school-name {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.settings-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-copy strong {
  color: var(--ink);
  line-height: 1.2;
}

.settings-copy span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.settings-row input[type="text"] {
  min-width: min(240px, 100%);
}

.profile-control-row select {
  min-width: min(220px, 100%);
}

.switch {
  position: relative;
  display: inline-flex;
  width: 54px;
  height: 32px;
  flex: 0 0 auto;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch span {
  width: 100%;
  border-radius: 999px;
  background: var(--line);
  box-shadow: inset 0 0 0 1px rgba(91, 104, 120, 0.16);
  cursor: pointer;
  transition: background 160ms ease;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(17, 25, 35, 0.18);
  transition: transform 160ms ease;
}

.switch input:checked + span {
  background: linear-gradient(135deg, var(--brand), var(--accent));
}

.switch input:checked + span::after {
  transform: translateX(22px);
}

.theme-grid {
  display: grid;
  gap: 12px;
}

.theme-mode-group {
  display: grid;
  gap: 10px;
}

.theme-mode-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-weight: 900;
}

.theme-mode-title span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.theme-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.theme-option {
  display: grid;
  gap: 10px;
  min-height: 116px;
  padding: 12px;
  border: 1px solid rgba(91, 104, 120, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(245, 248, 251, 0.78)),
    var(--panel);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.theme-option:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 93, 180, 0.26);
  box-shadow: 0 12px 22px rgba(17, 25, 35, 0.09);
}

body.dark .theme-option,
body.theme-graphite .theme-option,
body.theme-nightfall .theme-option,
body.theme-amethyst .theme-option,
body.theme-forest .theme-option,
body.theme-burgundy .theme-option,
body.theme-obsidian .theme-option,
body.theme-deepsea .theme-option,
body.theme-copper .theme-option {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(18, 27, 36, 0.78)),
    var(--panel);
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-option:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(6, 93, 180, 0.12), 0 16px 28px rgba(17, 25, 35, 0.1);
}

.theme-option:has(input:checked)::after {
  content: "Selected";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 0.68rem;
  font-weight: 900;
}

.theme-swatch {
  display: block;
  height: 58px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(91, 104, 120, 0.12);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.theme-swatch::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.theme-swatch::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 9px;
  width: 46%;
  height: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 54px 0 0 rgba(255, 255, 255, 0.45);
}

.theme-swatch span {
  display: block;
  position: absolute;
  inset: 0;
}

.theme-option strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.2;
}

.appearance-settings {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
}

.advanced-appearance {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
}

.advanced-appearance summary {
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.choice-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-chip-grid label { position: relative; cursor: pointer; }
.choice-chip-grid input { position: absolute; opacity: 0; pointer-events: none; }

.choice-chip-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-weight: 800;
  transition: 140ms ease;
}

.choice-chip-grid input:checked + span {
  border-color: var(--brand);
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 18px rgba(6, 93, 180, 0.18);
}

.hero-settings-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(6, 93, 180, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(6, 93, 180, 0.08), rgba(20, 166, 161, 0.06)),
    var(--panel);
}

.hero-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hero-style-option {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  cursor: pointer;
  position: relative;
}

.hero-style-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hero-style-option:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(6, 93, 180, 0.12);
}

.hero-style-preview {
  display: grid;
  gap: 7px;
  height: 46px;
  padding: 8px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 80% 0, rgba(232, 169, 81, 0.22), transparent 34%),
    linear-gradient(135deg, var(--brand), var(--brand-2));
}

.hero-style-preview::before,
.hero-style-preview::after {
  content: "";
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.hero-style-preview::before {
  width: 48%;
  height: 7px;
}

.hero-style-preview::after {
  width: 76%;
  height: 13px;
  opacity: 0.72;
}

.hero-style-preview.focus {
  background:
    linear-gradient(90deg, var(--accent) 0 8%, transparent 8%),
    linear-gradient(135deg, var(--panel), var(--panel-soft));
  border: 1px solid var(--line);
}

.hero-style-preview.focus::before,
.hero-style-preview.focus::after {
  background: var(--brand);
}

.hero-style-preview.minimal {
  background: var(--panel);
  border: 1px solid var(--line);
}

.hero-style-preview.minimal::before,
.hero-style-preview.minimal::after {
  background: var(--muted);
}

.hero-style-option strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.15;
}

.clock-hero-preview {
  display: grid;
  gap: 10px;
  min-height: 240px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 80% 0, rgba(232, 169, 81, 0.24), transparent 34%),
    linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: var(--shadow-soft);
  text-align: center;
  overflow: hidden;
}

.clock-hero-preview.preview-focus {
  color: var(--ink);
  background:
    linear-gradient(90deg, var(--accent) 0 8px, transparent 8px),
    linear-gradient(135deg, var(--panel), var(--panel-soft));
}

.clock-hero-preview.preview-minimal {
  color: var(--ink);
  background: var(--panel);
}

.clock-hero-preview.preview-theme-school {
  background: linear-gradient(135deg, #063b75, #d6a548);
}

.clock-hero-preview.preview-theme-calm {
  background: linear-gradient(135deg, #0d766f, #14a6a1);
}

.clock-hero-preview.preview-theme-midnight {
  background: linear-gradient(135deg, #111d2a, #07111a);
}

.clock-hero-preview.preview-theme-contrast {
  color: #000;
  background: #fff;
  border: 2px solid #000;
}

.clock-hero-preview.preview-bg-plain {
  background: var(--panel);
  color: var(--ink);
}

.clock-hero-preview.preview-bg-pattern {
  background:
    linear-gradient(135deg, rgba(6, 93, 180, 0.18) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--brand), var(--brand-2));
}

.clock-hero-preview.preview-layout-wide {
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
}

.clock-hero-preview.preview-layout-wide .preview-hero-head,
.clock-hero-preview.preview-layout-wide .preview-clock-face,
.clock-hero-preview.preview-layout-wide button {
  grid-column: 1;
}

.clock-hero-preview.preview-layout-wide .preview-secure-check,
.clock-hero-preview.preview-layout-wide .preview-arrival,
.clock-hero-preview.preview-layout-wide .preview-missed {
  grid-column: 2;
}

.clock-hero-preview.preview-layout-minimal .preview-hero-head,
.clock-hero-preview.preview-layout-minimal .preview-secure-check,
.clock-hero-preview.preview-layout-minimal .preview-arrival,
.clock-hero-preview.preview-layout-minimal .preview-missed {
  display: none !important;
}

.clock-hero-preview.preview-clock-analog .preview-clock-face strong {
  font-size: 1.4rem;
}

.clock-hero-preview.preview-clock-ring .preview-clock-face {
  border-radius: 999px;
  background: conic-gradient(#fff 0 74%, rgba(255,255,255,0.22) 74% 100%);
  color: var(--brand);
}

.clock-hero-preview.preview-button-circle button {
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: 999px;
}

.clock-hero-preview.preview-button-quiet button {
  color: var(--brand);
  background: #fff;
}

.clock-hero-preview.preview-animation-pulse button {
  animation: adminSoftPulse 1800ms ease-in-out infinite;
}

.clock-hero-preview.preview-animation-none *,
.clock-hero-preview.preview-animation-none {
  animation: none !important;
}

.clock-hero-preview.preview-compact {
  min-height: 186px;
  gap: 7px;
  padding: 12px;
}

.clock-hero-preview.preview-left {
  text-align: left;
  justify-items: start;
}

.preview-hero-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.preview-hero-head span,
.preview-arrival,
.preview-missed {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  font-weight: 900;
}

.preview-focus .preview-hero-head span,
.preview-focus .preview-arrival,
.preview-focus .preview-missed,
.preview-minimal .preview-hero-head span,
.preview-minimal .preview-arrival,
.preview-minimal .preview-missed {
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.preview-clock-face {
  display: grid;
  place-items: center;
  gap: 3px;
  width: min(100%, 210px);
  min-height: 86px;
  justify-self: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.preview-left .preview-clock-face {
  justify-self: start;
}

.preview-focus .preview-clock-face,
.preview-minimal .preview-clock-face {
  background: var(--panel-soft);
  border-color: var(--line);
}

.preview-clock-face strong {
  font-size: 2.3rem;
  line-height: 1;
}

.preview-clock-face span,
.preview-secure-check span {
  font-size: 0.78rem;
  opacity: 0.82;
}

.preview-secure-check {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
}

.preview-focus .preview-secure-check,
.preview-minimal .preview-secure-check {
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.clock-hero-preview button {
  justify-self: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  opacity: 1;
}

.preview-left button {
  justify-self: start;
}

.theme-light span:nth-child(1) { background: linear-gradient(135deg, #f8fbff, #e7f0fa); }
.theme-light span:nth-child(2) { clip-path: polygon(0 0, 100% 0, 0 100%); background: #065db4; }
.theme-light span:nth-child(3) { clip-path: polygon(100% 0, 100% 100%, 0 100%); background: #14a6a1; }
.theme-dark span:nth-child(1) { background: linear-gradient(135deg, #081018, #172331); }
.theme-dark span:nth-child(2) { clip-path: circle(42% at 22% 18%); background: #4aa3ff; }
.theme-dark span:nth-child(3) { clip-path: circle(48% at 92% 94%); background: #43d7cf; }
.theme-ocean-swatch span:nth-child(1) { background: linear-gradient(135deg, #eaf9ff, #dff6f4); }
.theme-ocean-swatch span:nth-child(2) { clip-path: polygon(0 0, 72% 0, 24% 100%, 0 100%); background: #0477bf; }
.theme-ocean-swatch span:nth-child(3) { clip-path: polygon(54% 0, 100% 0, 100% 100%, 22% 100%); background: #22c1b6; }
.theme-emerald-swatch span:nth-child(1) { background: linear-gradient(135deg, #edf9f3, #e3f4f6); }
.theme-emerald-swatch span:nth-child(2) { clip-path: polygon(0 0, 78% 0, 36% 100%, 0 100%); background: #167a56; }
.theme-emerald-swatch span:nth-child(3) { clip-path: polygon(58% 0, 100% 0, 100% 100%, 28% 100%); background: #0f9fbd; }
.theme-sunrise-swatch span:nth-child(1) { background: linear-gradient(135deg, #fff5e4, #ffe7e0); }
.theme-sunrise-swatch span:nth-child(2) { clip-path: circle(56% at 14% 14%); background: #f4bd50; }
.theme-sunrise-swatch span:nth-child(3) { clip-path: polygon(42% 0, 100% 0, 100% 100%, 18% 100%); background: #0f9fbd; }
.theme-royal-swatch span:nth-child(1) { background: linear-gradient(135deg, #f2f5ff, #e8fbf9); }
.theme-royal-swatch span:nth-child(2) { clip-path: polygon(0 0, 78% 0, 32% 100%, 0 100%); background: #2857b8; }
.theme-royal-swatch span:nth-child(3) { clip-path: polygon(56% 0, 100% 0, 100% 100%, 24% 100%); background: #11a6a0; }
.theme-coral-swatch span:nth-child(1) { background: linear-gradient(135deg, #fff0eb, #f7e4df); }
.theme-coral-swatch span:nth-child(2) { clip-path: circle(56% at 17% 22%); background: #c65347; }
.theme-coral-swatch span:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 18% 100%); background: #168f9a; }
.theme-lavender-swatch span:nth-child(1) { background: linear-gradient(135deg, #f5f2fb, #ece8fb); }
.theme-lavender-swatch span:nth-child(2) { clip-path: polygon(0 0, 74% 0, 34% 100%, 0 100%); background: #6d5cc8; }
.theme-lavender-swatch span:nth-child(3) { clip-path: circle(48% at 92% 86%); background: #d56aa2; }
.theme-slate-swatch span:nth-child(1) { background: linear-gradient(135deg, #eef5f6, #e1ecef); }
.theme-slate-swatch span:nth-child(2) { clip-path: polygon(0 0, 72% 0, 38% 100%, 0 100%); background: #346b7a; }
.theme-slate-swatch span:nth-child(3) { clip-path: polygon(62% 0, 100% 0, 100% 100%, 28% 100%); background: #bf8f38; }
.theme-graphite-swatch span:nth-child(1) { background: linear-gradient(135deg, #0b0f14, #1a232d); }
.theme-graphite-swatch span:nth-child(2) { clip-path: polygon(0 0, 72% 0, 36% 100%, 0 100%); background: #8fb3ff; }
.theme-graphite-swatch span:nth-child(3) { clip-path: polygon(66% 0, 100% 0, 100% 100%, 42% 100%); background: #d7a85c; }
.theme-berry-swatch span:nth-child(1) { background: linear-gradient(135deg, #fff0f5, #edf9f8); }
.theme-berry-swatch span:nth-child(2) { clip-path: circle(58% at 18% 26%); background: #a43d76; }
.theme-berry-swatch span:nth-child(3) { clip-path: polygon(48% 0, 100% 0, 100% 100%, 20% 100%); background: #169b9b; }
.theme-nightfall-swatch span:nth-child(1) { background: linear-gradient(135deg, #070b11, #151d2a); }
.theme-nightfall-swatch span:nth-child(2) { clip-path: polygon(0 0, 74% 0, 34% 100%, 0 100%); background: #5e8cff; }
.theme-nightfall-swatch span:nth-child(3) { clip-path: circle(52% at 92% 88%); background: #12b7c9; }
.theme-amethyst-swatch span:nth-child(1) { background: linear-gradient(135deg, #100816, #21172c); }
.theme-amethyst-swatch span:nth-child(2) { clip-path: circle(56% at 18% 24%); background: #a46bff; }
.theme-amethyst-swatch span:nth-child(3) { clip-path: polygon(48% 0, 100% 0, 100% 100%, 20% 100%); background: #e05d9d; }
.theme-forest-swatch span:nth-child(1) { background: linear-gradient(135deg, #07100c, #16251f); }
.theme-forest-swatch span:nth-child(2) { clip-path: polygon(0 0, 76% 0, 30% 100%, 0 100%); background: #35b779; }
.theme-forest-swatch span:nth-child(3) { clip-path: circle(48% at 92% 82%); background: #9eb95e; }
.theme-burgundy-swatch span:nth-child(1) { background: linear-gradient(135deg, #12080a, #27181b); }
.theme-burgundy-swatch span:nth-child(2) { clip-path: polygon(0 0, 70% 0, 38% 100%, 0 100%); background: #c95461; }
.theme-burgundy-swatch span:nth-child(3) { clip-path: circle(48% at 90% 86%); background: #d99c5c; }
.theme-obsidian-swatch span:nth-child(1) { background: linear-gradient(135deg, #050608, #171717); }
.theme-obsidian-swatch span:nth-child(2) { clip-path: polygon(0 0, 78% 0, 30% 100%, 0 100%); background: #e4c16f; }
.theme-obsidian-swatch span:nth-child(3) { clip-path: circle(48% at 92% 86%); background: #63d7c4; }
.theme-deepsea-swatch span:nth-child(1) { background: linear-gradient(135deg, #031018, #0d2533); }
.theme-deepsea-swatch span:nth-child(2) { clip-path: circle(54% at 18% 20%); background: #2db8d7; }
.theme-deepsea-swatch span:nth-child(3) { clip-path: polygon(52% 0, 100% 0, 100% 100%, 24% 100%); background: #70e0a2; }
.theme-copper-swatch span:nth-child(1) { background: linear-gradient(135deg, #130b08, #2c1d17); }
.theme-copper-swatch span:nth-child(2) { clip-path: polygon(0 0, 74% 0, 32% 100%, 0 100%); background: #d08755; }
.theme-copper-swatch span:nth-child(3) { clip-path: circle(48% at 92% 86%); background: #f0bd77; }

.monthly-report {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.monthly-report-title {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--panel)), var(--panel-soft));
}

.monthly-report-title strong {
  color: var(--ink);
  font-size: 1rem;
}

.monthly-report-title span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.history-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.history-filter-bar button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 0.78rem;
}

#teacherHistoryCard .report-tools {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  gap: 8px;
  align-items: end;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

#teacherHistoryCard .report-tools label {
  font-size: 0.78rem;
}

#teacherHistoryCard .report-tools input,
#teacherHistoryCard .report-tools select {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 0.86rem;
}

#teacherHistoryCard .report-tools button {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 0.78rem;
}

.admin-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.admin-note-cell {
  min-width: 0;
}

.admin-note-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.admin-note-control input {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
}

.admin-note-control button {
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.admin-attendance-list,
.audit-log-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.admin-attendance-card,
.audit-log-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  box-shadow: 0 10px 22px rgba(17, 25, 35, 0.07);
}

.admin-attendance-head,
.audit-log-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.admin-attendance-meta,
.audit-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-attendance-stats,
.audit-log-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-attendance-stat,
.audit-log-detail {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.admin-attendance-stat span,
.audit-log-detail span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-attendance-stat strong,
.audit-log-value {
  min-width: 0;
  color: var(--ink);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.admin-attendance-actions,
.audit-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.choice-inline {
  display: inline-flex;
  min-height: 38px;
  gap: 8px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.choice-inline input {
  accent-color: var(--brand);
}

.admin-attendance-note {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.audit-log-reason {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.admin-device-actions button {
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.admin-workspace {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}