@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================
   QPAL — WARM ACADEMIC THEME + NAVIGATION DRAWER
   Final visual layer. Preserves QPal's semantic performance and
   answer-feedback colours while replacing the former monochrome system.
   ========================================================= */
:root {
  --app-font: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --page-bg: #fffaf6;
  --page-bg-alt: #fff4eb;
  --surface: #fffdfb;
  --surface-elevated: #ffffff;
  --surface-muted: #fff7f0;
  --surface-hover: #ffefe2;

  --text-primary: #20140f;
  --text-secondary: #74665f;
  --text-muted: #9b8d85;

  --border-subtle: #edd9ca;
  --border-strong: #d9ad8d;
  --accent: #b94700;
  --accent-hover: #973900;
  --accent-soft: #fff0e4;
  --accent-border: #d06b2c;
  --accent-contrast: #ffffff;
  --accent-gold: #ef650b;
  --accent-coral: #ef650b;
  --success: #15825d;
  --warning: #b87900;
  --danger: #c83b46;
  --danger-soft: #fff0f1;
  --focus-ring: rgba(239, 101, 11, 0.22);

  --shadow-card: 0 15px 36px rgba(88, 47, 23, 0.09);
  --shadow-control: 0 6px 17px rgba(88, 47, 23, 0.08);
  --shadow-popover: 0 18px 44px rgba(72, 36, 17, 0.16);
  --shadow-dialog: 0 28px 78px rgba(72, 36, 17, 0.22);
  --control-hover-shadow: rgba(239, 101, 11, 0.16);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --overlay-bg: rgba(43, 25, 16, 0.44);

  --bg-white: var(--text-primary);
  --bg-black: var(--surface);
  --hover-gray: var(--surface-hover);

  --qpal-nav-width: 330px;
  --qpal-nav-gutter: 16px;
}

html.dark-mode {
  --page-bg: #0d0907;
  --page-bg-alt: #140d09;
  --surface: #18100c;
  --surface-elevated: #211610;
  --surface-muted: #261810;
  --surface-hover: #351d10;

  --text-primary: #fff8f2;
  --text-secondary: #b9aaa1;
  --text-muted: #887a72;

  --border-subtle: #482817;
  --border-strong: #75401f;
  --accent: #ff7420;
  --accent-hover: #ff8a43;
  --accent-soft: #341a0d;
  --accent-border: #a95524;
  --accent-contrast: #20140f;
  --accent-gold: #ff7420;
  --accent-coral: #ff7420;
  --success: #4fd0a0;
  --warning: #f0bd4c;
  --danger: #ff7d88;
  --danger-soft: rgba(255, 125, 136, 0.12);
  --focus-ring: rgba(255, 116, 32, 0.24);

  --shadow-card: 0 19px 46px rgba(0, 0, 0, 0.38);
  --shadow-control: 0 8px 20px rgba(0, 0, 0, 0.26);
  --shadow-popover: 0 20px 48px rgba(0, 0, 0, 0.5);
  --shadow-dialog: 0 30px 82px rgba(0, 0, 0, 0.62);
  --control-hover-shadow: rgba(255, 116, 32, 0.14);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --overlay-bg: rgba(4, 2, 1, 0.76);

  --bg-white: var(--text-primary);
  --bg-black: var(--surface);
  --hover-gray: var(--surface-hover);
}

html,
body,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea,
option,
optgroup,
table,
th,
td,
svg text {
  font-family: var(--app-font) !important;
}

body,
.dark-mode body,
html.qpal-color-locked body {
  background:
    radial-gradient(circle at 12% -8%, rgba(239, 101, 11, 0.09), transparent 34%),
    linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 48%, var(--page-bg) 100%) !important;
  color: var(--text-primary) !important;
}

html.dark-mode body,
html.dark-mode.qpal-color-locked body {
  background:
    radial-gradient(circle at 13% -8%, rgba(255, 116, 32, 0.095), transparent 34%),
    linear-gradient(180deg, var(--page-bg-alt) 0%, var(--page-bg) 50%, var(--page-bg) 100%) !important;
}

/* Remove the former global grayscale pass. QPal's meaningful insight and
   answer colours remain authored by their existing feature rules. */
.dashboard-topbar,
.game-container,
.board-countdown-container,
.about-author-overlay,
.admin-overlay,
.attempt-history-overlay,
.central-admin-delete-overlay,
.central-admin-editor-overlay,
.central-admin-manager-overlay,
.central-admin-question-detail-overlay,
.central-admin-question-overlay,
.central-admin-search-overlay,
.confirm-overlay,
.developer-email-contact-overlay,
.developer-icon-picker-overlay,
.flashcard-import-restriction-overlay,
.mistakes-review-clear-confirm-overlay,
.mistakes-review-info-overlay,
.mistakes-review-modal-overlay,
.qpal-library-question-overlay,
.qpal-shared-library-overlay,
.quick-tip-admin-overlay,
.quick-tip-popup-overlay,
.unfinished-assessment-overlay,
.user-auth-overlay,
.user-profile-overlay,
.user-signout-overlay,
.welcome-overlay {
  filter: none !important;
}

/* Uniform text hierarchy. */
:where(
  h1, h2, h3, h4, h5, h6,
  .dashboard-title-row h2,
  .quick-insights-title,
  .analytics-title,
  .question-title,
  .modal-title,
  .confirm-title,
  .welcome-title,
  .user-auth-title,
  .admin-dialog-title,
  .quick-tip-popup-heading strong,
  .mistakes-review-modal-header h2,
  .user-profile-section-copy strong
) {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em;
}

:where(
  p,
  .dashboard-subtitle,
  .question-subtitle,
  .confirm-desc,
  .welcome-description,
  .user-auth-subtitle,
  .admin-dialog-description,
  .empty-state-text,
  .quick-tip-popup-subtitle,
  .user-profile-section-copy > span,
  .mistakes-review-modal-header > div > span
) {
  color: var(--text-secondary) !important;
}

/* Warm surfaces across the application. */
html.qpal-color-locked :is(
  .dashboard-container,
  .main-dashboard-card,
  .quick-insights-card,
  .dashboard-insights-card,
  .dashboard-review-tips-card,
  .mistakes-review-card,
  .countdown-card,
  .game-container,
  .analytics-card,
  .user-auth-dialog,
  .user-signout-dialog,
  .modal-content,
  [role='dialog']
) {
  background-image: linear-gradient(var(--surface-elevated), var(--surface-elevated)) !important;
  border-color: var(--border-subtle) !important;
}

:where(
  .game-container,
  .quick-insights-card,
  .analytics-card,
  .countdown-card,
  .user-profile-dialog,
  .mistakes-review-modal,
  .quick-tip-popup,
  .qpal-shared-library-dialog,
  .about-author-dialog,
  .admin-dialog,
  .user-auth-dialog,
  .user-signout-dialog,
  .confirm-box
) {
  box-shadow: var(--shadow-card), var(--inner-highlight) !important;
}

/* Main buttons and active controls use QPal orange. */
:where(
  .admin-btn-primary,
  .user-auth-dialog .user-auth-submit,
  .user-signout-dialog .user-signout-button.primary,
  .user-profile-primary-button,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .ultimate-btn,
  #ultimate-trigger,
  .developer-email-contact-copy,
  .qpal-shared-library-add:not(.is-added),
  .quick-tip-launch-button,
  .primary-btn,
  button[type='submit']:not(.btn-danger)
) {
  color: var(--accent-contrast) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

:where(
  .admin-btn-primary,
  .user-auth-dialog .user-auth-submit,
  .user-signout-dialog .user-signout-button.primary,
  .user-profile-primary-button,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .ultimate-btn,
  #ultimate-trigger,
  .developer-email-contact-copy,
  .qpal-shared-library-add:not(.is-added),
  .quick-tip-launch-button,
  .primary-btn,
  button[type='submit']:not(.btn-danger)
):hover,
:where(
  .admin-btn-primary,
  .user-auth-dialog .user-auth-submit,
  .user-signout-dialog .user-signout-button.primary,
  .user-profile-primary-button,
  .mistakes-review-open,
  .mistakes-review-start,
  .unfinished-assessment-resume,
  .ultimate-btn,
  #ultimate-trigger,
  .developer-email-contact-copy,
  .qpal-shared-library-add:not(.is-added),
  .quick-tip-launch-button,
  .primary-btn,
  button[type='submit']:not(.btn-danger)
):focus-visible {
  color: var(--accent-contrast) !important;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 0 0 4px var(--focus-ring), 0 9px 24px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

/* Selected states stay warm and consistent rather than reverting to black. */
:where(
  .mode-btn.active-study,
  .mode-btn.active-exam,
  .mode-btn.active-flashcards,
  .exam-pop-opt-btn.active,
  .study-pop-opt-btn.active,
  .flashcard-opt-btn.active,
  .matrix-tab.active,
  .qpal-shared-library-tabs button.is-active,
  .user-auth-dialog .user-auth-tab.active,
  .central-admin-user.active,
  .central-admin-filter-menu button.active
) {
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}

:where(
  .mode-btn.active-study,
  .mode-btn.active-exam,
  .mode-btn.active-flashcards,
  .exam-pop-opt-btn.active,
  .study-pop-opt-btn.active,
  .flashcard-opt-btn.active,
  .qpal-shared-library-tabs button.is-active,
  .user-auth-dialog .user-auth-tab.active,
  .central-admin-user.active,
  .central-admin-filter-menu button.active
) {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

:where(
  .mode-btn.active-study,
  .mode-btn.active-exam,
  .mode-btn.active-flashcards,
  .exam-pop-opt-btn.active,
  .study-pop-opt-btn.active,
  .flashcard-opt-btn.active
) * {
  color: var(--accent) !important;
  background: transparent !important;
}

.matrix-tab.active::after,
.unfinished-assessment-progress-track > span {
  background: var(--accent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

:where(input, textarea, select):focus,
:where(input, textarea, select):focus-visible {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
  outline: none !important;
}

:where(input[type='checkbox'], input[type='radio'], input[type='range']) {
  accent-color: var(--accent) !important;
}

/* Destructive actions retain a distinct red meaning. */
:where(
  .btn-danger,
  .mistakes-review-clear,
  .unfinished-assessment-discard,
  .central-admin-delete,
  button[class*='delete'],
  button[class*='danger']
) {
  color: var(--danger) !important;
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border-subtle)) !important;
}

/* =========================================================
   DASHBOARD TOP BAR + LEFT NAVIGATION DRAWER
   ========================================================= */
.dashboard-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 2px 0 0 !important;
  padding: 0 2px !important;
  box-sizing: border-box;
}

.dashboard-header-controls {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 50px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  gap: 10px !important;
}

.qpal-navigation-topbar {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.qpal-navigation-toggle {
  display: inline-grid !important;
  place-items: center;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-control), var(--inner-highlight) !important;
  cursor: pointer;
}

.qpal-navigation-toggle:hover,
.qpal-navigation-toggle:focus-visible {
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
}

.qpal-navigation-toggle svg {
  width: 23px;
  height: 23px;
}

.qpal-navigation-wordmark {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.05;
}

.qpal-navigation-wordmark strong {
  color: var(--text-primary) !important;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.qpal-navigation-wordmark span {
  margin-top: 4px;
  color: var(--text-secondary) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qpal-navigation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10890;
  border: 0;
  padding: 0;
  background: rgba(30, 17, 11, 0.52) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 190ms ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.dark-mode .qpal-navigation-backdrop {
  background: rgba(0, 0, 0, 0.68) !important;
}

.qpal-navigation-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10900;
  display: flex;
  width: min(var(--qpal-nav-width), calc(100vw - var(--qpal-nav-gutter)));
  max-width: 100%;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  box-shadow: 22px 0 58px rgba(60, 31, 14, 0.2);
  transform: translateX(-104%);
  visibility: hidden;
  transition: transform 210ms cubic-bezier(.2, .8, .2, 1), visibility 210ms;
}

.dark-mode .qpal-navigation-drawer {
  box-shadow: 24px 0 64px rgba(0, 0, 0, 0.58);
}

body.qpal-navigation-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.qpal-navigation-open .qpal-navigation-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.qpal-navigation-open .qpal-navigation-drawer {
  transform: translateX(0);
  visibility: visible;
}

.qpal-navigation-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.qpal-navigation-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.qpal-navigation-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
  font-size: 19px;
  font-weight: 800;
}

.qpal-navigation-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.qpal-navigation-brand-copy strong {
  color: var(--text-primary) !important;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.qpal-navigation-brand-copy span {
  overflow: hidden;
  margin-top: 3px;
  color: var(--text-secondary) !important;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qpal-navigation-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
}

.qpal-navigation-close:hover,
.qpal-navigation-close:focus-visible {
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
}

.qpal-navigation-close svg {
  width: 20px;
  height: 20px;
}

.qpal-navigation-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.qpal-navigation-section + .qpal-navigation-section {
  margin-top: 22px;
}

.qpal-navigation-section-title {
  display: block;
  margin: 0 10px 8px;
  color: var(--text-muted) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qpal-navigation-list {
  display: grid;
  gap: 4px;
}

.qpal-navigation-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.qpal-navigation-item svg {
  width: 23px !important;
  height: 23px !important;
  color: currentColor;
}

.qpal-navigation-item-label {
  min-width: 0;
  color: inherit !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.qpal-navigation-item:hover,
.qpal-navigation-item:focus-visible {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border-subtle)) !important;
  background: var(--accent-soft) !important;
  transform: translateX(2px);
}

.qpal-navigation-item.is-active {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border-subtle)) !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.qpal-navigation-item.is-active .qpal-navigation-item-label {
  font-weight: 700;
}

.qpal-navigation-badge {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  font-size: 10px;
  font-weight: 800;
}

.qpal-navigation-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px max(15px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
}

.qpal-navigation-footer-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.qpal-navigation-footer-copy strong {
  color: var(--text-primary) !important;
  font-size: 13px;
  font-weight: 700;
}

.qpal-navigation-footer-copy span {
  margin-top: 3px;
  color: var(--text-secondary) !important;
  font-size: 11px;
}

.qpal-navigation-theme-toggle {
  display: grid !important;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--inner-highlight) !important;
  cursor: pointer;
}

.qpal-navigation-theme-toggle:hover,
.qpal-navigation-theme-toggle:focus-visible {
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
}

.qpal-navigation-theme-toggle svg {
  width: 21px !important;
  height: 21px !important;
}

body.qpal-session-active .qpal-navigation-backdrop,
body.qpal-session-active .qpal-navigation-drawer {
  display: none !important;
}

/* Preserve existing insight and answer-feedback semantics. */
.quick-insights-card,
.quick-insights-modal-overlay,
.game-container.subject-insights-view,
.central-admin-progress-insights,
.choice-btn.correct,
.choice-btn.wrong,
.active-recall-feedback.correct,
.active-recall-feedback.incorrect {
  filter: none !important;
}

/* User-facing discovery badges should harmonise with the new accent. */
.qpal-toolbar-badge,
.qpal-shared-library-tab-badge {
  background: var(--accent) !important;
  border-color: var(--surface-elevated) !important;
  color: var(--accent-contrast) !important;
  font-family: var(--app-font) !important;
}

@media (max-width: 720px) {
  :root {
    --qpal-nav-width: 322px;
    --qpal-nav-gutter: 12px;
  }

  body {
    padding-inline: 10px !important;
  }

  .dashboard-topbar {
    min-height: 50px !important;
    padding-inline: 0 !important;
  }

  .dashboard-header-controls {
    min-height: 48px !important;
  }

  .qpal-navigation-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
  }

  .qpal-navigation-wordmark strong {
    font-size: 17px;
  }

  .qpal-navigation-wordmark span {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  :root {
    --qpal-nav-width: 304px;
    --qpal-nav-gutter: 10px;
  }

  .qpal-navigation-drawer-header {
    padding-inline: 14px;
  }

  .qpal-navigation-scroll {
    padding-inline: 10px;
  }

  .qpal-navigation-item {
    min-height: 46px !important;
    padding-inline: 10px !important;
  }

  .qpal-navigation-item-label {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qpal-navigation-backdrop,
  .qpal-navigation-drawer,
  .qpal-navigation-item {
    transition-duration: 1ms !important;
  }
}

/* =========================================================
   QPAL — CLICKABLE DEVELOPER LINKS + COMPACT BOARD COUNTDOWN
   ========================================================= */
.about-author-social-link {
  position: relative;
  z-index: 1;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto !important;
}

/* Keep the countdown informative without letting it dominate the dashboard. */
.board-countdown-container {
  margin: 0 auto !important;
  padding: 8px 12px 10px !important;
}

.countdown-title {
  margin-bottom: 2px !important;
  font-size: clamp(12px, 1.15vw, 14px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.045em !important;
}

.countdown-subtitle {
  margin-bottom: 8px !important;
  font-size: clamp(10px, 0.95vw, 11.5px) !important;
  line-height: 1.35 !important;
}

.countdown-ticker {
  gap: clamp(12px, 2.4vw, 20px) !important;
}

.ticker-segment {
  min-width: 40px !important;
}

.ticker-value {
  font-size: clamp(20px, 2.15vw, 24px) !important;
  line-height: 1 !important;
}

.ticker-lbl {
  margin-top: 3px !important;
  font-size: clamp(8px, 0.75vw, 9.5px) !important;
  line-height: 1.15 !important;
}

@media (max-width: 560px) {
  .board-countdown-container {
    padding: 6px 8px 8px !important;
  }

  .countdown-title {
    font-size: 12.5px !important;
  }

  .countdown-subtitle {
    margin-bottom: 7px !important;
    font-size: 10px !important;
  }

  .countdown-ticker {
    gap: 12px !important;
  }

  .ticker-segment {
    min-width: 36px !important;
  }

  .ticker-value {
    font-size: 20px !important;
  }

  .ticker-lbl {
    font-size: 8px !important;
  }
}

@media (max-width: 350px) {
  .countdown-title {
    font-size: 12px !important;
  }

  .countdown-subtitle {
    font-size: 9.5px !important;
  }

  .countdown-ticker {
    gap: 9px !important;
  }

  .ticker-segment {
    min-width: 33px !important;
  }

  .ticker-value {
    font-size: 18.5px !important;
  }
}