/* Temporary: hide voice input UI across the app */
.btn-voice,
.voice-recording-overlay {
  display: none !important;
}
/* Ensure the first stats bar never tucks under sticky top */
.stats .bar-container:first-of-type { margin-top: 0; }

/* History container - no horizontal padding */
.history-container { padding-left: 0; padding-right: 0; }
.history-log { margin-left: auto; margin-right: auto; position: static; transform: none; }
:root {
  --bg: #f5f5f5;
  --ink: #333;
  --card: #fff;
  --border: #ccc;
  --header-h: 64px; /* dynamic header height fallback */
  --app-text-scale: 1; /* default text scaling factor */
  --app-header-pad-top: 8px;
  --app-header-pad-bottom: 8px;
  --app-header-pad-inline: 16px;
  --app-header-min-height: 56px;

  /* Responsive content width */
  --lane: 800px;
  --mobile-lane: 100%;
  --desktop-max-width: 1200px;
}

/* Distinct highlight for latest history chip (non-pulsing) */
.history-highlight {
  outline: 2px solid rgba(255, 213, 0, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.25);
  border-radius: 999px;
}

/* Hide scrollbars visually while keeping scroll */
html, body {
  /* Global background for playing pages */
  /* Background moved to body::before so theme backgrounds don't hide it */
  background: transparent !important;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}

/* Fixed full-screen background layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('img/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Theme-specific background treatments */
body.theme-light::before {
  background-image: none;
  background: #ffffff; /* pure white background */
}
body.theme-dark::before {
  background-image: none;
  background: #0b1220; /* deep dark solid */
}
body.theme-dark2::before {
  background-image: none;
  background: radial-gradient(1200px 800px at 50% 0%, #0b1220 0%, #060a12 45%, #03060b 100%);
}

/* Ensure main content sits above the background layer */
body > * { position: relative; z-index: 1; }
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0; height: 0;
}

/* Hide all scrollbars globally while keeping scroll functionality */
* {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

/* EXCEPTIONS: allow scrollbars in disclaimer text box explicitly */
.disclaimer-body {
  -ms-overflow-style: auto !important; /* IE/Edge */
  scrollbar-width: thin !important;    /* Firefox */
}
.disclaimer-body::-webkit-scrollbar {
  display: block !important;
  width: 10px; height: 10px;
}
.disclaimer-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.08);
  border-radius: 8px;
}
.disclaimer-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
}
.disclaimer-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.38);
}

/* Ensure header EU/US quick toggle is compact regardless of inline styles */
.app-header .variant-label { font-size: 11px !important; opacity: .8 !important; }
.app-header .switch { transform: scale(0.78) !important; transform-origin: center !important; margin: 0 !important; }

/* Skip link: hidden until focused, then visible for quick nav */
.skip-link {
  position: absolute;
  left: 8px;
  top: -40px;
  background: #111;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 10000;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
}

/* Responsive container for desktop - CONSOLIDATED 768px+ styles */
@media (min-width: 768px) {
  /* Remove body flex centering - not needed */
  body {
    display: block;
  }

  :root {
    --lane: 768px;
    --desktop-max-width: 768px;
  }

  /* Main app content wrapper - FIXED at 768px */
  .main-app-content {
    max-width: var(--desktop-max-width) !important;
    width: var(--desktop-max-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Top section - no padding */
  .top-section {
    padding-top: calc(env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    /* Completely override base full-width styles */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Main center container - no padding */
  .main-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: var(--desktop-max-width) !important; /* align with header */
    margin: 20px auto 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Scroll section - add padding for content */
  .scroll-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important; /* center within container on desktop */
    padding: 36px 0 16px 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Stats container */
  .stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Bar containers */
  .bar-container {
    margin-bottom: 0;
    width: 100%;
    max-width: none !important;
  }
  
  /* Chart blocks */
  .chart-block {
    margin: 0;
    width: 100%;
    max-width: none !important;
  }
  
  /* History container */
  .history-container {
    width: 100%;
    max-width: none !important;
    margin-bottom: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Numpad and buttons - hide visually but keep in DOM for initialization */
  .numpad-and-buttons {
    position: absolute;
    left: -9999px;
    visibility: hidden;
  }
  
  .numpad-container {
    display: grid !important;
  }
  
  /* Stats header */
  .stats-header {
    width: 100%;
    max-width: none !important;
    margin-top: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Footer */
  .special-buttons {
    max-width: var(--desktop-max-width) !important;
    width: var(--desktop-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    transform: none !important;
    position: fixed;
    bottom: 0;
  }
}

 

/* Introduction Page Styles */
.introduction-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
  cursor: pointer;
}

.introduction-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  position: relative;
  transform: translateY(-2%);
}

.introduction-logo {
  max-width: 250px;
  max-height: 250px;
  width: 50vw;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
  animation: logoFadeIn 1s ease-out;
}

.introduction-footer {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 16px;
  font-weight: 300;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
  white-space: nowrap;
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Main app content wrapper */
.main-app-content {
  display: block; /* Show immediately (intro page is separate now) */
  padding: 8px 0; /* No horizontal padding - children handle their own */
  margin: 0 0 16px 0; /* more space below to avoid overlap */
  padding-top: 0; /* handled by sticky top-section */
  opacity: 1;
  transition: opacity 0.5s ease;
}

.main-app-content[style*="display: block"] {
  display: block !important; /* Override to block when shown */
  opacity: 1;
}

/* Theme: Light - clean white theme */
body.theme-light {
  background: #ffffff !important;
  color: #1f2937;
}
body.theme-light .app-header,
body.theme-light .app-footer {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 -25px 45px rgba(0, 0, 0, 0.05) !important;
  padding-bottom: 0 !important;
  z-index: 1200 !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .stats,
body.theme-light .more-section {
  background: transparent !important;
  border-color: #e2e8f0 !important;
  color: #1f2937 !important;
}
body.theme-light .history-log {
  background: transparent !important;
  border-color: black !important;
}
body.theme-light .top-section {
  background: transparent !important;
  z-index: 100 !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.theme-light .top-section * {
  position: relative;
  z-index: 16 !important;
}
body.theme-light .dialog {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  color: #1f2937;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(20px);
}

body.theme-light .dialog::backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px);
}

body.theme-light .dialog-overlay {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px);
}

body.theme-light .dialog-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  color: #1f2937 !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(20px);
}

body.theme-light .dialog-content h3 {
  color: #1f2937 !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}

/* Ensure disclaimer checkbox renders at its intrinsic size (no full-width stretching) */
.dialog-actions label input[type="checkbox"],
#disclaimerAgreeCheckbox {
  width: auto !important;
  min-width: 16px; /* typical checkbox size */
  flex: 0 0 auto;
}

body.theme-light .dialog-actions button,
body.theme-light #langDialog button,
body.theme-light #testDialog button {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border: none !important;
  color: black !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  transition: all 0.3s ease !important;
}

body.theme-light .dialog-actions button:hover,
body.theme-light #langDialog button:hover,
body.theme-light #testDialog button:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

body.theme-light .dialog-actions button:nth-child(2),
body.theme-light .dialog-actions .btn-secondary {
  background: rgba(248, 250, 252, 0.9) !important;
  color: #374151 !important;
  border: 2px solid rgba(209, 213, 219, 0.6) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .dialog-actions button:nth-child(2):hover,
body.theme-light .dialog-actions .btn-secondary:hover {
  background: rgba(229, 231, 235, 0.9) !important;
  border-color: rgba(156, 163, 175, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
body.theme-light #langDialog select,
body.theme-light #testDialog select,
body.theme-light .dialog select {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid rgba(226, 232, 240, 0.6) !important;
  color: #1f2937 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

body.theme-light #langDialog select:focus,
body.theme-light #testDialog select:focus,
body.theme-light .dialog select:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

body.theme-light .social-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid rgba(226, 232, 240, 0.6) !important;
  color: #1f2937 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .social-btn:hover {
  background: rgba(248, 250, 252, 0.95) !important;
  border-color: #3b82f6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

body.theme-light .setting-group {
  background: rgba(248, 250, 252, 0.6) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.4) !important;
}

body.theme-light .board-dialog {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(20px);
}

body.theme-light .dialog input,
body.theme-light .dialog-content input {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid rgba(226, 232, 240, 0.6) !important;
  color: #1f2937 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

body.theme-light .dialog input:focus,
body.theme-light .dialog-content input:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

body.theme-light .dialog input::placeholder,
body.theme-light .dialog-content input::placeholder {
  color: #9ca3af !important;
}

body.theme-light .special-buttons {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 -25px 45px rgba(0, 0, 0, 0.05) !important;
  padding-bottom: 0 !important;
  z-index: 1200 !important;
}
body.theme-dark .special-buttons button {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #000000 !important;
}
body.theme-light .btn-voice.inactive {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
}
body.theme-light .btn-voice.active {
  background: rgba(59, 130, 246, 0.9) !important;
  color: white !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
body.theme-light .btn-voice.waiting {
  background: rgba(251, 191, 36, 0.95) !important;
  color: #78350f !important;
  border: 1px solid rgba(217, 119, 6, 0.7) !important;
  text-shadow: none !important;
}
body.theme-light .btn-voice.listening {
  background: rgba(239, 68, 68, 0.95) !important;
  color: #000000 !important;
  border: 1px solid rgba(220, 38, 38, 0.7) !important;
  text-shadow: none !important;
}
body.theme-light .btn-voice.recording {
  background: rgba(220, 38, 38, 0.95) !important;
  color: #000000 !important;
  border: 1px solid rgba(185, 28, 28, 0.8) !important;
  text-shadow: none !important;
}
body.theme-light .btn-test.stop {
  background: rgba(220, 38, 38, 0.9) !important;
  color: white !important;
  border: 1px solid rgba(220, 38, 38, 0.5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
body.theme-light .special-buttons button:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
body.theme-light .btn-voice.active:hover {
  background: rgba(37, 99, 235, 1) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}
body.theme-light .btn-test.stop:hover {
  background: rgba(185, 28, 28, 1) !important;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3) !important;
}

/* Theme: Dark (Dark Cyan) */
body.theme-dark {
  background: #102544 !important;
  background-image: none !important;
  color: #e9f1ff !important;
}
/* Theme: Dark 2 (Deep Teal) */
body.theme-dark2 {
  background: #0f2d2f !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .app-header,
body.theme-dark2 .app-footer {
  background: rgba(8, 28, 30, 0.25) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(140, 220, 220, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark2 .app-title {
  color: #e6f2f2 !important;
  -webkit-text-fill-color: #e6f2f2 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
body.theme-dark2 .special-buttons {
  background: rgba(8, 28, 30, 0.18) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(140, 220, 220, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark2 .special-buttons button {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #000 !important;
}
body.theme-dark2 .btn-voice.inactive { background: rgba(255, 255, 255, 0.18) !important; color: #000 !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; }
body.theme-dark2 .btn-voice.active { background: rgba(37, 99, 235, 0.95) !important; color: #fff !important; }
body.theme-dark2 .btn-voice.waiting { background: rgba(251, 191, 36, 0.95) !important; color: #78350f !important; border: 1px solid rgba(217, 119, 6, 0.7) !important; text-shadow: none !important; }
body.theme-dark2 .btn-voice.listening,
body.theme-dark2 .btn-voice.recording { background: rgba(239, 68, 68, 0.95) !important; color: #fff !important; border: 1px solid rgba(220, 38, 38, 0.7) !important; }
body.theme-dark2 .btn-test.stop { background: rgba(239, 68, 68, 0.95) !important; color: #fff !important; }
body.theme-dark2 .btn-reset { color: #000 !important; }
body.theme-dark2 .top-section,
body.theme-dark2 .history-log { background: transparent !important; }
body.theme-dark2 .history-log { border-color: rgba(140, 220, 220, 0.25) !important; }
body.theme-dark2 .dialog,
body.theme-dark2 .dialog-content {
  background: rgba(8, 28, 30, 0.92) !important;
  border: 1px solid rgba(140, 220, 220, 0.28) !important;
  color: #e6f2f2 !important;
}
/* Ensure disclaimer content text is readable in dark2 */
body.theme-dark2 .disclaimer-body {
  color: #e5e7eb !important;
}
/* Ensure stats header title and other headings readable in Dark 2 */
body.theme-dark2 .stats-header h3,
body.theme-dark2 h1,
body.theme-dark2 h2,
body.theme-dark2 h3,
body.theme-dark2 label,
body.theme-dark2 .switch-label {
  color: #e6f2f2 !important;
}
body.theme-dark2 .dialog-actions button,
body.theme-dark2 #langDialog button,
body.theme-dark2 #testDialog button {
  background: linear-gradient(135deg, #06b6b4, #0891a2) !important;
  border: none !important;
  color: white !important;
}
body.theme-dark2 .dialog-actions button:nth-child(2),
body.theme-dark2 .dialog-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e6f2f2 !important;
}
/* Account panel labels in Dark 2 theme - make "Free" label white */
body.theme-dark2 .account-card-value {
  color: #ffffff !important;
}
/* Inputs and selects in Dark 2 for proper contrast */
body.theme-dark2 #langDialog select,
body.theme-dark2 #testDialog select,
body.theme-dark2 .dialog select,
body.theme-dark2 .dialog input {
  background: rgba(8, 28, 30, 0.6) !important;
  border: 2px solid rgba(140, 220, 220, 0.28) !important;
  color: #e6f2f2 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}
body.theme-dark2 #langDialog select:focus,
body.theme-dark2 #testDialog select:focus,
body.theme-dark2 .dialog select:focus,
body.theme-dark2 .dialog input:focus {
  outline: none !important;
  border-color: #06b6b4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 180, 0.15) !important;
}
/* Text size buttons in Dark 2 theme */
body.theme-dark2 #btnTextSizeDown,
body.theme-dark2 #btnTextSizeUp {
  background: rgba(8, 28, 30, 0.6) !important;
  border: 2px solid rgba(140, 220, 220, 0.28) !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 #btnTextSizeDown:hover,
body.theme-dark2 #btnTextSizeUp:hover {
  background: rgba(8, 28, 30, 0.8) !important;
  border-color: rgba(140, 220, 220, 0.4) !important;
}
/* Settings-specific theme selector and label */
body.theme-dark2 .theme-label { color: #e6f2f2 !important; }
body.theme-dark2 .theme-select {
  background: rgba(8, 28, 30, 0.6) !important;
  border: 2px solid rgba(140, 220, 220, 0.28) !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .theme-select:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 180, 0.15) !important;
}
/* Dropdown options and states */
body.theme-dark2 .dialog select option {
  background: #0f2d2f !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .dialog select:disabled,
body.theme-dark2 .dialog input:disabled {
  background: rgba(8, 28, 30, 0.4) !important;
  border-color: rgba(140, 220, 220, 0.2) !important;
  color: rgba(230, 242, 242, 0.6) !important;
  opacity: 1 !important; /* keep readable */
}
/* Subscription modal + manage subscription in Dark 2 */
body.theme-dark2 .subscription-modal-content {
  background: rgba(8, 28, 30, 0.94);
  color: #e6f2f2;
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-modal h2,
body.theme-dark2 .subscription-modal h3 { color: #e6f2f2; }
body.theme-dark2 .subscription-modal p { color: #cfe9e9; }
body.theme-dark2 .subscription-modal .pricing-option {
  border-color: rgba(140, 220, 220, 0.25);
  background: rgba(8, 28, 30, 0.45);
}
body.theme-dark2 .subscription-modal .pricing-option:hover,
body.theme-dark2 .subscription-modal .pricing-option.selected {
  border-color: #06b6d4;
  background: rgba(6, 182, 180, 0.18);
}
body.theme-dark2 .account-info,
body.theme-dark2 .subscription-history {
  background: rgba(8, 28, 30, 0.55);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-status.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.12) 100%);
  border: 1px solid rgba(16,185,129,0.35);
}
body.theme-dark2 .subscription-status.inactive {
  background: linear-gradient(135deg, rgba(8,28,30,0.45) 0%, rgba(15,45,47,0.45) 100%);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-notes {
  background: rgba(233, 196, 106, 0.12);
  border: 1px solid rgba(233, 196, 106, 0.28);
  color: #faedcd;
}
/* Tables */

/* Wheel Heatmap */
.wheel-heatmap {
  position: relative;
  margin: 12px auto 8px auto;
  width: 100%;
  max-width: none; /* allow wheel to grow within layout */
}
.wheel-heatmap svg {
  display: block;
  width: 100%;
  height: auto;
}
.wheel-heatmap .wheel-tip {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}
/* Two-column layout: left wheel, right hot/cold */
.wheel-heatmap .wh-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 520px) { .wheel-heatmap .wh-layout { grid-template-columns: 1fr; } }
.wheel-heatmap .wh-left { width: 100%; display: flex; align-items: center; justify-content: center; }
.wheel-heatmap .wh-right { width: 100%; }

/* Hot/Cold panel: labels above lists; no boxes */
.wheel-heatmap .hot-cold-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.wheel-heatmap .hc-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; }
.wheel-heatmap .section-title { font-weight: 700; font-size: 13px; opacity: 0.95; min-width: 40px; }
.wheel-heatmap .section-title.cold { color: #2ca7ff; }
.wheel-heatmap .section-title.hot { color: #e84141; }
.wheel-heatmap .chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.wheel-heatmap .hc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px; /* smaller boxes */
  border-radius: 6px;
  font-weight: bold;
  font-size: 12px; /* slightly smaller text */
  color: #fff;
  min-width: 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Pulsing highlight for selected wheel section */
@keyframes whPulseStroke {
  0% { filter: drop-shadow(0 0 0 rgba(248, 227, 110, 0.0)); }
  50% { filter: drop-shadow(0 0 6px rgba(248, 227, 110, 0.8)); }
  100% { filter: drop-shadow(0 0 0 rgba(248, 227, 110, 0.0)); }
}
.wheel-heatmap svg .wh-pulse {
  animation: whPulseStroke 1.6s ease-in-out infinite;
}
.wheel-heatmap svg .wh-pulse-text {
  animation: whPulseStroke 1.6s ease-in-out infinite;
}

/* Stronger pulse specifically for the main (left) wheel highlight */
@keyframes whPulseStrong {
  0% { filter: drop-shadow(0 0 0 rgba(248, 227, 110, 0.0)); }
  50% { 
    filter: 
      drop-shadow(0 0 12px rgba(248, 227, 110, 0.95))
      drop-shadow(0 0 20px rgba(248, 227, 110, 0.55));
  }
  100% { filter: drop-shadow(0 0 0 rgba(248, 227, 110, 0.0)); }
}
.wheel-heatmap svg .wh-pulse-strong {
  animation: whPulseStrong 1.6s ease-in-out infinite;
}

/* Yellow rounded box to emphasize the latest number label on wheels */
.wheel-heatmap .latest-label-box {
  fill: rgba(250, 204, 21, 0.16); /* warm translucent yellow */
  stroke: #facc15;                /* amber border */
  stroke-width: 1.5;
  shape-rendering: geometricPrecision;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
/* Make the mini wheel's box a bit stronger for visibility at small size */
.wheel-heatmap .mini-wheel .latest-label-box {
  fill: rgba(250, 204, 21, 0.28);
  stroke-width: 2;
}
body.theme-dark2 .combo-table, body.theme-dark2 .streak-table {
  background: rgba(8, 28, 30, 0.65) !important;
  border: 1px solid rgba(140, 220, 220, 0.18) !important;
}
body.theme-dark2 .combo-table th, body.theme-dark2 .streak-table th {
  background: rgba(0,0,0,0.85) !important;
  color: #e6f2f2 !important;
}
/* Apply the same dark2 table treatment to dark theme for consistency */
body.theme-dark .combo-table, body.theme-dark .streak-table {
  background: rgba(8, 28, 30, 0.65) !important;
  border: 1px solid rgba(140, 220, 220, 0.18) !important;
}
body.theme-dark .combo-table th, body.theme-dark .streak-table th {
  background: rgba(0,0,0,0.85) !important;
  color: #e6f2f2 !important;
}

/* Ensure number frequency heatmap text is black for readability as requested */
.number-grid .number-item { color: #000 !important; font-size: 20px !important; }
body.theme-dark .app-header {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark .app-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Ensure header-specific title stays black in dark theme */
body.theme-dark .app-header .app-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.theme-dark .dialog,
body.theme-dark .dialog *,
body.theme-dark .dialog-content,
body.theme-dark .dialog-content *,
body.theme-dark #settingsDialog,
body.theme-dark #settingsDialog * {
  color: #f1f5f9 !important;
}
body.theme-dark .special-buttons {
  background: rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #ffffff !important;
  padding-bottom: 0 !important;
  z-index: 1200 !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #ffffff !important;
  padding-bottom: 0 !important;
  z-index: 1200 !important;
}
body.theme-dark .special-buttons button {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
body.theme-dark *,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark p,
body.theme-dark span,
body.theme-dark div,
body.theme-dark label,
body.theme-dark td,
body.theme-dark th {
  color: #e6f2f8 !important;
}
body.theme-dark .app-footer {
  background: rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark .history-log {
  background: transparent !important;
  border-color: rgba(140, 220, 220, 0.25) !important;
}
body.theme-dark .top-section {
  background: transparent !important;
  z-index: 100 !important;
  backdrop-filter: none !important;
}
body.theme-dark .top-section * {
  position: relative;
  z-index: 16 !important;
}
body.theme-dark .dialog {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .dialog::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

body.theme-dark .dialog-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

body.theme-dark .dialog-content {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9 !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .dialog-content h3 {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}

body.theme-dark .dialog-actions button,
body.theme-dark #langDialog button,
body.theme-dark #testDialog button {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
  transition: all 0.3s ease !important;
}

body.theme-dark .dialog-actions button:hover,
body.theme-dark #langDialog button:hover,
body.theme-dark #testDialog button:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4) !important;
}

body.theme-dark .dialog-actions button:nth-child(2),
body.theme-dark .dialog-actions .btn-secondary {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #f1f5f9 !important;
  border: 2px solid rgba(71, 85, 105, 0.6) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.theme-dark .dialog-actions button:nth-child(2):hover,
body.theme-dark .dialog-actions .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(100, 116, 139, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Text size buttons in dark theme */
body.theme-dark #btnTextSizeDown,
body.theme-dark #btnTextSizeUp {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #f1f5f9 !important;
  border-color: #475569 !important;
}

body.theme-dark #btnTextSizeDown:hover,
body.theme-dark #btnTextSizeUp:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(140, 220, 220, 0.4) !important;
}

/* Settings-specific theme selector and label */
body.theme-dark2 .theme-label { color: #e6f2f2 !important; }
body.theme-dark2 .theme-select {
  background: rgba(8, 28, 30, 0.6) !important;
  border: 2px solid rgba(140, 220, 220, 0.28) !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .theme-select:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 180, 0.15) !important;
}

/* Dropdown options and states */
body.theme-dark2 .dialog select option {
  background: #0f2d2f !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .dialog select:disabled,
body.theme-dark2 .dialog input:disabled {
  background: rgba(8, 28, 30, 0.4) !important;
  border-color: rgba(140, 220, 220, 0.2) !important;
  color: rgba(230, 242, 242, 0.6) !important;
  opacity: 1 !important; /* keep readable */
}

/* Subscription modal + manage subscription in Dark 2 */
body.theme-dark2 .subscription-modal-content {
  background: rgba(8, 28, 30, 0.94);
  color: #e6f2f2;
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-modal h2,
body.theme-dark2 .subscription-modal h3 { color: #e6f2f2; }
body.theme-dark2 .subscription-modal p { color: #cfe9e9; }
body.theme-dark2 .subscription-modal .pricing-option {
  border-color: rgba(140, 220, 220, 0.25);
  background: rgba(8, 28, 30, 0.45);
}
body.theme-dark2 .subscription-modal .pricing-option:hover,
body.theme-dark2 .subscription-modal .pricing-option.selected {
  border-color: #06b6d4;
  background: rgba(6, 182, 180, 0.18);
}
body.theme-dark2 .account-info,
body.theme-dark2 .subscription-history {
  background: rgba(8, 28, 30, 0.55);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-status.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.12) 100%);
  border: 1px solid rgba(16,185,129,0.35);
}
body.theme-dark2 .subscription-status.inactive {
  background: linear-gradient(135deg, rgba(8,28,30,0.45) 0%, rgba(15,45,47,0.45) 100%);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-notes {
  background: rgba(233, 196, 106, 0.12);
  border: 1px solid rgba(233, 196, 106, 0.28);
  color: #faedcd;
}
/* Tables */
body.theme-dark2 .combo-table, body.theme-dark2 .streak-table {
  background: rgba(8, 28, 30, 0.65) !important;
  border: 1px solid rgba(140, 220, 220, 0.18) !important;
}
body.theme-dark2 .combo-table th, body.theme-dark2 .streak-table th {
  background: rgba(0,0,0,0.85) !important;
  color: #e6f2f2 !important;
}

/* ---- Single-session modal visual theme (applied via .ssw-theme) ---- */
/* For <dialog> elements */
.dialog.ssw-theme::backdrop {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(6px) !important;
}
.dialog.ssw-theme {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.dialog.ssw-theme .dialog-content,
.dialog.ssw-theme { /* allow styling when content is direct children */
  background: rgba(17,24,39,0.92) !important; /* slate-900/92 */
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e5e7eb !important; /* zinc-200 */
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}
.dialog.ssw-theme h3 {
  color: #e5e7eb !important;
  font-weight: 700 !important;
}
.dialog.ssw-theme .dialog-actions button,
.dialog.ssw-theme .dialog-actions .primary {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(245,158,11,0.6) !important; /* amber-500 ring */
  background: rgba(245,158,11,0.12) !important;
  color: #fde68a !important;
  font-weight: 700 !important;
}
.dialog.ssw-theme .dialog-actions button:not(.primary) {
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #e5e7eb !important;
  font-weight: 600 !important;
}

/* For div-based overlay dialogs */
.dialog-overlay.ssw-theme {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(6px) !important;
}
.dialog-overlay.ssw-theme .dialog-content {
  background: rgba(17,24,39,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}
.dialog-overlay.ssw-theme .dialog-actions button:first-child {
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #e5e7eb !important;
}
.dialog-overlay.ssw-theme .dialog-actions .primary {
  border: 1px solid rgba(245,158,11,0.6) !important;
  background: rgba(245,158,11,0.12) !important;
  color: #fde68a !important;
  font-weight: 700 !important;
}
body.theme-dark .app-header {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark .app-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Ensure header-specific title stays black in dark theme */
body.theme-dark .app-header .app-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.theme-dark .dialog,
body.theme-dark .dialog *,
body.theme-dark .dialog-content,
body.theme-dark .dialog-content *,
body.theme-dark #settingsDialog,
body.theme-dark #settingsDialog * {
  color: #f1f5f9 !important;
}
body.theme-dark .special-buttons {
  background: rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #ffffff !important;
  padding-bottom: 0 !important;
  z-index: 1200 !important;
}
body.theme-dark .special-buttons button {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  color: #ffffff !important;
}
body.theme-dark *,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark p,
body.theme-dark span,
body.theme-dark div,
body.theme-dark label,
body.theme-dark td,
body.theme-dark th {
  color: #ffffff !important;
}
body.theme-dark .app-footer {
  background: rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark .history-log {
  background: transparent !important;
  border-color: #64748b !important;
}
body.theme-dark .top-section {
  background: transparent !important;
  z-index: 100 !important;
  backdrop-filter: none !important;
}
body.theme-dark .top-section * {
  position: relative;
  z-index: 16 !important;
}
body.theme-dark .dialog {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .dialog::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

body.theme-dark .dialog-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

body.theme-dark .dialog-content {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9 !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .dialog-content h3 {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}

body.theme-dark .dialog-actions button,
body.theme-dark #langDialog button,
body.theme-dark #testDialog button {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
  transition: all 0.3s ease !important;
}

body.theme-dark .dialog-actions button:hover,
body.theme-dark #langDialog button:hover,
body.theme-dark #testDialog button:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4) !important;
}

body.theme-dark .dialog-actions button:nth-child(2),
body.theme-dark .dialog-actions .btn-secondary {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #f1f5f9 !important;
  border: 2px solid rgba(71, 85, 105, 0.6) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.theme-dark .dialog-actions button:nth-child(2):hover,
body.theme-dark .dialog-actions .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(100, 116, 139, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Text size buttons in dark theme */
body.theme-dark #btnTextSizeDown,
body.theme-dark #btnTextSizeUp {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #f1f5f9 !important;
  border-color: #475569 !important;
}

body.theme-dark #btnTextSizeDown:hover,
body.theme-dark #btnTextSizeUp:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(140, 220, 220, 0.4) !important;
}

/* Settings-specific theme selector and label */
body.theme-dark2 .theme-label { color: #e6f2f2 !important; }
body.theme-dark2 .theme-select {
  background: rgba(8, 28, 30, 0.6) !important;
  border: 2px solid rgba(140, 220, 220, 0.28) !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .theme-select:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 180, 0.15) !important;
}

/* Dropdown options and states */
body.theme-dark2 .dialog select option {
  background: #0f2d2f !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .dialog select:disabled,
body.theme-dark2 .dialog input:disabled {
  background: rgba(8, 28, 30, 0.4) !important;
  border-color: rgba(140, 220, 220, 0.2) !important;
  color: rgba(230, 242, 242, 0.6) !important;
  opacity: 1 !important; /* keep readable */
}

/* Subscription modal + manage subscription in Dark 2 */
body.theme-dark2 .subscription-modal-content {
  background: rgba(8, 28, 30, 0.94);
  color: #e6f2f2;
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-modal h2,
body.theme-dark2 .subscription-modal h3 { color: #e6f2f2; }
body.theme-dark2 .subscription-modal p { color: #cfe9e9; }
body.theme-dark2 .subscription-modal .pricing-option {
  border-color: rgba(140, 220, 220, 0.25);
  background: rgba(8, 28, 30, 0.45);
}
body.theme-dark2 .subscription-modal .pricing-option:hover,
body.theme-dark2 .subscription-modal .pricing-option.selected {
  border-color: #06b6d4;
  background: rgba(6, 182, 180, 0.18);
}
body.theme-dark2 .account-info,
body.theme-dark2 .subscription-history {
  background: rgba(8, 28, 30, 0.55);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-status.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.12) 100%);
  border: 1px solid rgba(16,185,129,0.35);
}
body.theme-dark2 .subscription-status.inactive {
  background: linear-gradient(135deg, rgba(8,28,30,0.45) 0%, rgba(15,45,47,0.45) 100%);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-notes {
  background: rgba(233, 196, 106, 0.12);
  border: 1px solid rgba(233, 196, 106, 0.28);
  color: #faedcd;
}
/* Tables */
body.theme-dark2 .combo-table, body.theme-dark2 .streak-table {
  background: rgba(8, 28, 30, 0.65) !important;
  border: 1px solid rgba(140, 220, 220, 0.18) !important;
}
body.theme-dark2 .combo-table th, body.theme-dark2 .streak-table th {
  background: rgba(0,0,0,0.85) !important;
  color: #e6f2f2 !important;
}
body.theme-dark .app-header {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark .app-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Ensure header-specific title stays black in dark theme */
body.theme-dark .app-header .app-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.theme-dark .dialog,
body.theme-dark .dialog *,
body.theme-dark .dialog-content,
body.theme-dark .dialog-content *,
body.theme-dark #settingsDialog,
body.theme-dark #settingsDialog * {
  color: #f1f5f9 !important;
}
body.theme-dark .special-buttons {
  background: rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #ffffff !important;
  padding-bottom: 0 !important;
  z-index: 1200 !important;
}
body.theme-dark .special-buttons button {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  color: #ffffff !important;
}
body.theme-dark *,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark p,
body.theme-dark span,
body.theme-dark div,
body.theme-dark label,
body.theme-dark td,
body.theme-dark th {
  color: #ffffff !important;
}
body.theme-dark .app-footer {
  background: rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.theme-dark .history-log {
  background: transparent !important;
  border-color: #64748b !important;
}
body.theme-dark .top-section {
  background: transparent !important;
  z-index: 100 !important;
  backdrop-filter: none !important;
}
body.theme-dark .top-section * {
  position: relative;
  z-index: 16 !important;
}
body.theme-dark .dialog {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .dialog::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

body.theme-dark .dialog-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

body.theme-dark .dialog-content {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9 !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .dialog-content h3 {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}

body.theme-dark .dialog-actions button,
body.theme-dark #langDialog button,
body.theme-dark #testDialog button {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
  transition: all 0.3s ease !important;
}

body.theme-dark .dialog-actions button:hover,
body.theme-dark #langDialog button:hover,
body.theme-dark #testDialog button:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4) !important;
}

body.theme-dark .dialog-actions button:nth-child(2),
body.theme-dark .dialog-actions .btn-secondary {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #f1f5f9 !important;
  border: 2px solid rgba(71, 85, 105, 0.6) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.theme-dark .dialog-actions button:nth-child(2):hover,
body.theme-dark .dialog-actions .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(100, 116, 139, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Text size buttons in dark theme */
body.theme-dark #btnTextSizeDown,
body.theme-dark #btnTextSizeUp {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #f1f5f9 !important;
  border-color: #475569 !important;
}

body.theme-dark #btnTextSizeDown:hover,
body.theme-dark #btnTextSizeUp:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(140, 220, 220, 0.4) !important;
}

/* Settings-specific theme selector and label */
body.theme-dark2 .theme-label { color: #e6f2f2 !important; }
body.theme-dark2 .theme-select {
  background: rgba(8, 28, 30, 0.6) !important;
  border: 2px solid rgba(140, 220, 220, 0.28) !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .theme-select:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 180, 0.15) !important;
}

/* Dropdown options and states */
body.theme-dark2 .dialog select option {
  background: #0f2d2f !important;
  color: #e6f2f2 !important;
}
body.theme-dark2 .dialog select:disabled,
body.theme-dark2 .dialog input:disabled {
  background: rgba(8, 28, 30, 0.4) !important;
  border-color: rgba(140, 220, 220, 0.2) !important;
  color: rgba(230, 242, 242, 0.6) !important;
  opacity: 1 !important; /* keep readable */
}

/* Subscription modal + manage subscription in Dark 2 */
body.theme-dark2 .subscription-modal-content {
  background: rgba(8, 28, 30, 0.94);
  color: #e6f2f2;
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-modal h2,
body.theme-dark2 .subscription-modal h3 { color: #e6f2f2; }
body.theme-dark2 .subscription-modal p { color: #cfe9e9; }
body.theme-dark2 .subscription-modal .pricing-option {
  border-color: rgba(140, 220, 220, 0.25);
  background: rgba(8, 28, 30, 0.45);
}
body.theme-dark2 .subscription-modal .pricing-option:hover,
body.theme-dark2 .subscription-modal .pricing-option.selected {
  border-color: #06b6d4;
  background: rgba(6, 182, 180, 0.18);
}
body.theme-dark2 .account-info,
body.theme-dark2 .subscription-history {
  background: rgba(8, 28, 30, 0.55);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-status.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.12) 100%);
  border: 1px solid rgba(16,185,129,0.35);
}
body.theme-dark2 .subscription-status.inactive {
  background: linear-gradient(135deg, rgba(8,28,30,0.45) 0%, rgba(15,45,47,0.45) 100%);
  border: 1px solid rgba(140, 220, 220, 0.2);
}
body.theme-dark2 .subscription-notes {
  background: rgba(233, 196, 106, 0.12);
  border: 1px solid rgba(233, 196, 106, 0.28);
  color: #faedcd;
}
/* Tables */
body.theme-dark2 .combo-table, body.theme-dark2 .streak-table {
  background: rgba(8, 28, 30, 0.65) !important;
  border: 1px solid rgba(140, 220, 220, 0.18) !important;
}
body.theme-dark2 .combo-table th, body.theme-dark2 .streak-table th {
  background: rgba(0,0,0,0.85) !important;
  color: #e6f2f2 !important;
}

/* ---------- Top / Scroll Sections ---------- */
.app-header {
  position: fixed;
  /* Push header below camera cutout / status bar area */
  top: 0;
  left: 0;
  right: 0;
  --app-header-pad-top: 8px;
  --app-header-pad-bottom: 8px;
  --app-header-pad-inline: 16px;
  --app-header-min-height: 56px;
  background: rgba(128,128,128,0.85);
  backdrop-filter: blur(6px);
  z-index: 1000; /* Higher z-index to ensure buttons are clickable */
  width: 100%;
  margin: 0;
  /* Fallback grid for headers without .app-header-inner (e.g., European) */
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
}

.app-header-inner {
  max-width: 800px;
  margin: 0 auto;
  padding-left: 0; /* remove left padding */
  padding-right: 0; /* align right edge with scroll-section by default */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal parts */
  gap: 8px;
  align-items: center;
}
/* Base rule to keep the right cell single-line and right-aligned */
.app-header-inner > :last-child {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Three-column layout: left (account), center (title), right (variant toggle) */
.app-header-inner .app-title { 
  justify-self: center; 
  text-align: center;
  grid-column: 2; /* Force title to middle column */
}
#btnAccount { 
  justify-self: start;
  grid-column: 1; /* Force account to left column */
  width: 24px !important; /* Smaller button */
  height: 24px !important;
  padding: 3px !important;
}
#btnAccount img {
  width: 18px !important; /* Smaller icon */
  height: 18px !important;
}
/* Variant toggle container will auto-fill the right column */

.top-section {
  flex: 0 0 auto;
  position: sticky;
  /* Use dynamic header height measured in JS to avoid notch overlap on iOS */
  top: calc(env(safe-area-inset-top, 0px) + var(--header-h, 56px) + 16px);
  background: transparent; /* fully transparent */
  backdrop-filter: none;   /* remove blur per request */
  z-index: 5; /* below fixed header */
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom: 32px;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  border-bottom: none;
}

/* Mobile only: full-width breakout */
@media (max-width: 767px) {
  .top-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .scroll-section {
    /* keep small gutters on mobile */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  /* Match scroll-section right margin on mobile */
  .app-header-inner {
    padding-right: 10px !important; /* keep EU/US toggle aligned with scroll content */
  }
  
  .main-app-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Remove horizontal padding from top-section children */
  .top-section > h1,
  .top-section > .main-center {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Remove padding from stats section */
  .stats {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Version Badge - smaller and subtler */
/* Force tiny badge size regardless of prior rules */
.app-title .version-badge,
.version-badge {
  display: inline !important;
  background: #ff6b6b !important;
  color: white !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  font-size: 10px !important; /* ensure size wins */
  line-height: 1 !important;
  border: none !important;
  text-shadow: none !important;
  z-index: 1001 !important;
  white-space: nowrap !important;
  margin-left: 6px !important;
  vertical-align: baseline !important;
}

/* Settings: align text-size controls neatly */
#settingsDialog .text-size-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
#settingsDialog .text-size-btn {
  min-width: 36px;
  height: 28px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#settingsDialog #textScale {
  height: 4px;
}

/* Ensure version badge is always visible in all themes */
/* Theme-safe background already handled above */

/* Desktop responsive design for top-section - MOVED TO CONSOLIDATED BLOCK AT LINE 82 */
/*
/* DISABLED - Using consolidated 768px block at line 82 instead */
/*
@media (min-width: 768px) {
  .top-section {
    padding: 40px 20px;
    margin-top: 0;
    max-width: 800px !important;
    margin-left: auto;
    margin-right: auto;
  }
  
  .main-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 800px !important;
    margin: 0 auto;
  }

.main-center { margin-top: 20px !important; }
  
  .history-container {
    width: 100%;
    max-width: 800px !important;
    margin-bottom: 20px;
  }
  
  .numpad-and-buttons {
    width: 100%;
    max-width: 800px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .stats-header {
    width: 100%;
    max-width: 800px !important;
    margin-top: 20px;
  }
}
*/

/* Ensure .main-center keeps its top spacing across themes/breakpoints */
.main-center { margin-top: 20px !important; }

.scroll-section {
  position: relative;
  overflow: visible; /* do not clip over sticky top */
  padding: 32px 0 16px 0; /* No horizontal padding */
  /* Add small horizontal margins on mobile */
  margin-left: 10px;
  margin-right: 10px;
  z-index: 1; /* Lower z-index so top-section overlays it */
  /* Allow content to scroll under the header but start below it */
  margin-top: 0;
  /* Prevent layout shifts during auto-spin DOM updates */
  contain: layout style;
}

/* Desktop responsive design for scroll-section - MOVED TO CONSOLIDATED BLOCK AT LINE 82 */
/*
@media (min-width: 768px) {
  .scroll-section {
    padding: 36px 20px 16px 20px;
    max-width: 800px !important;
    margin: 0 auto;
  }
  
  .stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 800px !important;
    margin-left: auto;
    margin-right: auto;
  }
  
  .bar-container {
    margin-bottom: 0;
    max-width: 800px !important;
  }
  
  .chart-block { 
    margin: 0;
    max-width: 800px !important;
  }
}
*/

/* ---------- Headings ---------- */
h1 {
  font-size: 24px;
  text-align: center;
  margin: 10px 0 14px;
  font-weight: bold;
  color: #222;
}

.more-section h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 0 0; /* add 20px top margin, remove bottom margin */
  color: black;
}

/* ---------- Center Column ---------- */
.main-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: var(--desktop-max-width);
  margin: 20px auto 0 auto; /* global top spacing, centered */
  padding: 0;
}

/* ---------- History ---------- */
.history-container {
  width: 100%; /* full width like the bars */
  max-width: var(--lane);
  margin: 10px 0 0 0; /* add top margin */
  padding-top: 10px; /* add top padding */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.history-log {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden; /* prevent vertical scrollbars interfering */
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
  gap: 3px; /* reduced gap to bring numbers closer */
  background: transparent;
  padding: 6px; /* compact padding */
  border: 3px solid black;
  border-radius: 8px;
  min-height: 32px;
  width: 100%;
  max-width: var(--lane);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  box-sizing: border-box;
}
/* Mini number-only wheel on right panel */
.wheel-heatmap .mini-wheel { margin-top: 10px; display: flex; align-items: center; justify-content: center; }
.wheel-heatmap .mini-wheel { flex-direction: column; gap: 8px; }
.wheel-heatmap .mini-wheel .mini-wheel-legend { width: 100%; max-width: 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-items: center; justify-items: start; }
.wheel-heatmap .mini-wheel .legend-row { display: grid; grid-template-columns: 14px auto 1fr; gap: 8px; align-items: center; width: 100%; }
.wheel-heatmap .mini-wheel .leg-swatch { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.wheel-heatmap .mini-wheel .leg-label { font-size: 12px; opacity: 0.9; }
.wheel-heatmap .mini-wheel .leg-pct { font-size: 12px; justify-self: end; font-weight: 600; }
/* When user prefers newest on the left, visually reverse items */
.history-log.rtl {
  flex-direction: row-reverse;
}
.history-controls select { background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.1); }
.history-log.empty::before {
  content: "Start entering numbers to see history";
  color: #aaa;
  font-size: 13px;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.history-log div {
  padding: 4px 8px; /* reduced padding */
  margin: 2px; /* reduced margin */
  border-radius: 8px; /* added rounded corners */
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  flex: 0 0 auto;
  min-width: 28px; /* reduced min-width */
  text-align: center;
  border: none;
  cursor: pointer; /* last chip is removable; cursor indicates interactivity */
}

/* ---------- Numpad ---------- */
.numpad-and-buttons { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.numpad-container {
  display: grid;
  gap: 4px;
  width: 100%; /* full width like the bars */
  max-width: var(--lane);
  margin: 0;
  grid-template-columns: repeat(12, 1fr);
  background: transparent;
}

.numpad-container button {
  padding: 9px 0;
  font-size: 15px;
  cursor: pointer;
  border-radius: 3px;
  font-weight: bold;
  color: #fff;
  border: none;
  touch-action: manipulation;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Keypad mode: compact 6x6 with gaps — smaller buttons, larger text */
.numpad-container.kp-compact button { padding: 9px 0; font-size: 15px; }

/* Keypad mode: table view — wider buttons and larger text */
.numpad-container.table-view-mode { grid-template-columns: repeat(12, 1fr); }
.numpad-container.table-view-mode button { padding: 11px 0; font-size: 17px; }

/* Version badge under settings title */
.settings-version {
  margin: 6px 0 12px 0;
  display: flex;
  align-items: center;
}
.settings-version .version-badge {
  background: rgba(59, 130, 246, 0.15);
  color: #1f2937;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}

/* Prevent accidental double-tap zoom on tappable controls */
button, input, select, a { touch-action: manipulation; }

/* Keypad mode: alt custom layout */
.numpad-container.alt-layout-mode button { padding: 11px 0; font-size: 17px; }
.numpad-container.seq-layout-mode button { padding: 12px 0; font-size: 18px; }

/* Inline controls bar inside keypad */
.numpad-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  grid-column: 1 / -1;
}
.numpad-controls .np-ctrl {
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.numpad-controls .np-ctrl .icon { width: 18px; height: 18px; vertical-align: middle; }

/* Pressed feedback for keypad buttons */
.numpad-container button.pressed {
  outline: 3px solid #fbbf24; /* amber ring */
  box-shadow: 0 0 0 3px rgba(251,191,36,0.35);
  transform: translateY(1px) scale(0.98);
}

/* Sequential keypad: white-on-hover for better feedback */
.numpad-container.seq-layout-mode button:hover { color: #fff !important; filter: brightness(1.2); }
.numpad-container.seq-layout-mode button:focus-visible { color: #fff !important; filter: brightness(1.15); outline: 2px solid rgba(255,255,255,0.35); outline-offset: 1px; }

/* Remove extra space under the keypad when switching layouts */
.numpad-and-buttons { margin-bottom: 0 !important; }
.numpad-container { margin-bottom: 0 !important; }

/* Visual separators for 6x6 keypad layout */
/* Deprecated separator classes left as no-ops for safety */
.numpad-container button.kp-v-sep { border-left: 0 !important; }
.numpad-container button.kp-h-sep { border-top: 0 !important; }

/* ---------- Stats Header ---------- */
.stats-header {
  display: grid;
  grid-template-columns: auto 1fr; /* title auto width, slider expands */
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: var(--lane);
  margin: 0 auto; /* center to align with history container */
}
.stats-header h3 {
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
white-space: nowrap;   /* single line */
  overflow: hidden;      /* hide any accidental overflow */
  text-overflow: ellipsis;
  font-size: calc(14px * var(--app-text-scale));       /* responsive size with scaling */
  color: black;
}
#rangeSlider {
  width: 100%;
  flex: 1 1 auto;
  vertical-align: middle;
  accent-color: black;
}

/* ---------- Stats & Bars ---------- */
.stats {
  margin-top: 130px; /* updated per request */
  display: flex;
  flex-direction: column;
  gap: 15px; /* single source of bar spacing */
  width: 100%;
  max-width: var(--lane);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

/* Simple consistent margins for all body content - DISABLED */
/*
@media (max-width: 767px) {
  .top-section,
  .scroll-section {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
*/

/* Full-bleed top-section background - MOBILE ONLY (disabled for desktop) */
/*
.top-section {
  padding: 32px 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
*/

/* Ensure the first stats bar never tucks under sticky top */
.stats .bar-container:first-of-type { margin-top: 0; }

/* Constrain inner content to header width - DISABLED, using media query instead */
/*
.top-section > h1,
.top-section > .main-center {
  max-width: calc(var(--desktop-max-width));
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
*/

.bar-container {
  background: transparent ;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 24px;
  cursor: pointer;
  transition: opacity 0.2s;
  border:none;
  gap: 0;
}
.bar-container:hover { opacity: 0.85; }

.bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  height: 100%;
  white-space: nowrap;
  padding: 0 6px;
  box-sizing: border-box;
  
}

/* ---------- Charts ---------- */
canvas {
  margin-top: 30px;
  background: var(--card);
  border: 1px solid var(--border);
  display: block;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  border-radius: 6px;
}

/* ---------- More Section ---------- */
.more-section {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
  text-align: center;
  /* Enable smooth scrolling during auto-spin */
  touch-action: pan-y;
  overscroll-behavior: contain;
}


/* Constrain inner content to header's max width */
.top-section > h1,
.top-section > .main-center {
  max-width: var(--desktop-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px; /* align with header inner */
  padding-right: 12px;
  box-sizing: border-box;
}
.combo-table {
  width: 100%;
  max-width: var(--lane);
  margin-left: auto;
  margin-right: auto;
  /* Optimize scrolling during auto-spin updates */
  will-change: contents;
  contain: layout style;
}

.separator { height: 14px; }

.number-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(20px, 1fr));
  gap: 4px;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  grid-auto-flow:dense;
}
.heatmap-duo { display: grid; grid-template-rows: auto auto; gap: 10px; align-items: start; }
.number-grid.labels .number-item { color: #fff !important; font-weight: 700; }
.number-grid.labels .number-item[data-num="0"],
.number-grid.labels .number-item[data-num="37"] { background: #2e7d32 !important; }
.number-grid.labels .number-item { border-color: rgba(255,255,255,0.6); }

/* Heatmap legend (Blue/Yellow/Red) */
.heatmap-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 8px 0 0 0;
  font-size: 13px;
  opacity: 0.95;
}
.heatmap-legend .swatch {
  width: 18px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
body.theme-dark .heatmap-legend span,
body.theme-dark2 .heatmap-legend span { color: #e5e7eb; }

/* Hot/Cold icons larger */
.wheel-heatmap .section-title.cold,
.wheel-heatmap .section-title.hot { font-size: 20px; line-height: 1; }

/* Ensure "Number Frequency Heatmap" headings are 20px */
h3:has(#btnHeatmapHelp) { font-size: 20px !important; }

/* Mini wheel rotate controls */
.mini-wheel .rotate-controls { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.mini-wheel .rotate-controls .rot-btn { padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; }
.mini-wheel .rotate-controls .rot-btn:hover { background: rgba(255,255,255,0.2); }

/* Partition labels inside wedges */
.mini-wheel .partition-label { font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.mini-wheel .partition-highlight { 
  /* Remove stroke to avoid visible seam/line between segments */
  stroke: none !important; 
  stroke-width: 0 !important; 
  /* Keep subtle glow via filter animation only */
  animation: whPulseStroke 1.6s ease-in-out infinite; 
}
.mini-wheel .partition-highlight-label { animation: whPulseStroke 1.6s ease-in-out infinite; fill: #f8e36e !important; }

/* Pulse the latest number label (applies to both main and mini wheels) */
.wheel-heatmap .mini-number-pulse,
.wheel-heatmap [data-latest="1"] {
  /* Gentle, centered pulse with strong glow; minimal scale to avoid any jump */
  animation: miniNumberPulse 1.6s ease-in-out infinite;
  fill: #fffde7 !important; /* warm highlight */
  transform-box: fill-box;   /* transform around the text bounds */
  transform-origin: center;  /* scale around center to avoid shifts */
  paint-order: stroke fill;  /* draw stroke behind fill for readability */
  stroke: rgba(0,0,0,0.65);
  stroke-width: 0.9px;
  will-change: transform, filter;
}
@keyframes miniNumberPulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(248,227,110,0.0)); }
  45%  { transform: scale(1.035); filter: drop-shadow(0 0 10px rgba(248,227,110,0.95)) drop-shadow(0 0 14px rgba(248,227,110,0.55)); }
  55%  { transform: scale(1.035); filter: drop-shadow(0 0 10px rgba(248,227,110,0.95)) drop-shadow(0 0 14px rgba(248,227,110,0.55)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(248,227,110,0.0)); }
}

/* When combined with main-wheel glow classes, avoid double filter animations: keep scale + strong glow */
.wheel-heatmap .mini-number-pulse.wh-pulse-text,
.wheel-heatmap .mini-number-pulse.wh-pulse-strong {
  /* Override to blend a smooth scale with the strong glow for visual parity */
  animation: miniNumberScale 1.6s ease-in-out infinite, whPulseStrong 1.6s ease-in-out infinite;
}
@keyframes miniNumberScale {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  55%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* Force the inner center caption to 10px regardless of inherited styles */
.wheel-heatmap .wh-center-caption { font-size: 10px !important; line-height: 1.2; }
.number-item {
  text-align: center;
  font-weight: bold;
  border-radius: 3px;
  padding: 3px;
  font-size: 11px;
  border: 1px solid black;
  color: black;
}

/* Combo table tweaks: lighter header, smaller text, skinny 2nd column */
.combo-table {
  table-layout: auto;         /* let browser size columns naturally */
  background: white;
}

.combo-table th {
  background: black;        /* light bg so black text is readable */
  color: white;                 /* black header text */
  font-size: 13px;             /* smaller header text */
  padding: 6px 8px;
}

.combo-table td {
  font-size: 11.5px;           /* slightly smaller body text */
  padding: 4px 8px;
}

/* Make the "Inputs Ago" column auto-shrink to its content */
.combo-table th:nth-child(2),
.combo-table td:nth-child(2) {
  width: 1%;                   /* hint: as small as possible */
  white-space: nowrap;         /* prevent wrapping so it stays narrow */
  text-align: center;           /* nicer for numbers */
}


/* ---------- Shared chrome ---------- */
.bar-container, canvas {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* ---------- Fixed Footer Buttons ---------- */
.special-buttons {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-height, 0px) + 10px); left: 0; width: 100%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  border-left: none;
  border-right: none;
  box-shadow: 0 -25px 45px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  z-index: 2000; /* keep above content */
  visibility: visible !important; /* ensure visible */
  box-sizing: border-box;
  /* Auto height - no fixed height */
}
.special-buttons button {
  flex: 0 1 auto;
  min-width: 60px;
  padding: 10px 16px;
  font-size: 12px !important;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Icon inside footer buttons */
.special-buttons button .icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}
.special-buttons .btn-view .icon { filter: none; }

/* Icon in mobile keypad footer action */
.mobile-numpad-actions .mobile-action-btn .icon {
  width: 20px;
  height: 20px;
}

/* Hover effects for special buttons */
.special-buttons button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-voice.active:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-test.stop:hover {
  background: rgba(239, 68, 68, 1) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-reset { background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-view  { background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-voice { 
  background: rgba(255, 255, 255, 0.2); 
  color: white; 
  border: 1px solid rgba(255, 255, 255, 0.4); 
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 8px 12px;
  width: auto !important;
  min-width: 50px;
}
.btn-voice .voice-icon { 
  width: 18px; 
  height: 18px; 
  object-fit: contain; 
}
.btn-voice.inactive { background: rgba(255, 255, 255, 0.2) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; }
.btn-voice.active { background: rgba(255, 255, 255, 0.9); color: black; border: 1px solid rgba(0, 0, 0, 0.3); text-shadow: none; }
.btn-voice.waiting { background: rgba(251, 191, 36, 0.9) !important; color: black !important; border: 1px solid rgba(217, 119, 6, 0.6) !important; text-shadow: none !important; }
.btn-voice.listening { background: rgba(239, 68, 68, 0.9) !important; color: white !important; border: 1px solid rgba(220, 38, 38, 0.6) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; }
.btn-voice.recording { background: rgba(220, 38, 38, 0.95) !important; color: white !important; border: 1px solid rgba(185, 28, 28, 0.8) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; }
.btn-test { background: rgba(255, 255, 255, 0.2); color: white; font-weight: bold; border: 1px solid rgba(255, 255, 255, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-test.stop { background: rgba(220, 38, 38, 0.9) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; }

/* Make Reset & Run Test a bit smaller than others */
.btn-reset, .btn-test { padding: 5px 8px; min-width: 66px; }

/* Quick action buttons near swap */
.btn-zero, .btn-dzero, .btn-undo {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Default theme - black text for special buttons */
body:not(.theme-light):not(.theme-dark) .btn-reset,
body:not(.theme-light):not(.theme-dark) .btn-view,
body:not(.theme-light):not(.theme-dark) .btn-voice,
body:not(.theme-light):not(.theme-dark) .btn-test {
  color: black !important;
  text-shadow: none !important;
}

body:not(.theme-light):not(.theme-dark) .btn-voice.active {
  color: white !important;
}

body:not(.theme-light):not(.theme-dark) .btn-test.stop {
  color: white !important;
}

/* ---------- Dialogs ---------- */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  z-index: 1000;
}
.dialog-content {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  max-height: 90vh;
  overflow-y: auto;
  pointer-events: auto;
  width: 95vw;
  max-width: 560px;
  position: relative;
}
.dialog-content h3 {
  margin: 6px 0 10px;
  text-align: center;
  font-size: 24px;
}
.dialog-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 4px;
}
.dialog-actions button, #langDialog button {
  padding: 6px 10px;
  margin-bottom: calc(env(safe-area-inset-bottom, 0px));
  border: 1px solid #ddd;
  background: #fafafa;
  cursor: pointer;
}

/* Lang dialog tweaks */
#langDialog .dialog-content { max-width: 300px; text-align: center; }
#langDialog select { width: 90%; padding: 6px; margin-top: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .numpad-container { grid-template-columns: repeat(12, 1fr); }
  .number-grid { grid-template-columns: repeat(12, minmax(14px, 1fr)); }
  
}
/* Keep title + slider on one line, shrink title on small screens */
@media (max-width: 480px) {
  .stats-header {
    /* two columns: title grows, slider hugs content */
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
  }

  .stats-header h3 {
    font-size: clamp(11px, 3.6vw, 14px); /* auto scales down on small screens */
    white-space: nowrap;                  /* stay on one line */
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  /* let the slider fit without forcing a wrap */
  #rangeSlider {
    width: clamp(50px, 25vw, 80px);
    min-width: 0;
    flex: 0 0 auto;
    accent-color: black;
  }
}

/* ---------- Additional Responsive Design ---------- */
/* Extra small screens */
@media (max-width: 320px) {
  body {
    margin-top: 5px;
    padding-top: 60px;
  }
  
  .main-center {
    margin: 0 8px;
    gap: 12px;
  }
  
  .numpad-container {
    gap: 2px;
    grid-template-columns: repeat(12, minmax(12px, 1fr));
  }
}

/* Small screens */
@media (max-width: 400px) {
  .main-center {
    margin: 0 10px;
    gap: 15px;
  }
  
  .numpad-container {
    gap: 3px;
    grid-template-columns: repeat(12, minmax(14px, 1fr));
  }
}

/* Medium screens and tablets */
/* Medium screens and tablets - DISABLED (using consolidated 768px block instead) */
/*
@media (min-width: 601px) and (max-width: 1024px) {
  .main-center {
    max-width: 800px !important;
    margin: 0 auto;
  }
  
  .numpad-container,
  .history-container,
  .stats-header {
    max-width: 800px !important;
  }
}
*/

/* Large screens - Desktop - DISABLED (using consolidated 768px block instead) */
/*
@media (min-width: 1025px) {
  .main-center {
    max-width: 800px !important;
    margin: 0 auto;
  }
  
  .numpad-container,
  .history-container,
  .stats-header {
    max-width: 800px !important;
  }
  
  body {
    padding-top: 70px;
  }
}
*/

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    padding-top: 50px;
    margin-top: 5px;
    margin-bottom: 50px;
  }
  
  .main-center {
    gap: 10px;
  }
}


/* --- Heatmap flash effect --- */
@keyframes heatFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.9); transform: scale(1); }
  50%  { box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.35); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); transform: scale(1); }
}
.number-item.flash {
  animation: heatFlash 1.1s ease-in-out infinite;
  outline: 2px solid #ffcc00;
  will-change: transform;
}

/* Flash/glow effect for latest wheel segment (SVG), analogous to heatmap cell flash */
@keyframes whFlashGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(255, 204, 0, 0)); }
  50%  { filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.9)) drop-shadow(0 0 18px rgba(255, 204, 0, 0.45)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 204, 0, 0)); }
}
.wheel-heatmap svg .wh-flash {
  animation: whFlashGlow 1.6s ease-in-out infinite;
}

/* Hide the spacer cells but keep the grid shape */
.number-item.empty {
  visibility: hidden;  /* keeps the place in the grid */
}

/* Flash the heatmap cell brighter & bolder for ~1s */
.number-item.flash-hot {
  animation: heatPulse 1s ease-out;
  font-weight: 800;                  /* bolder text */
  border-color: #fff !important;     /* pop the border */
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.85), /* crisp white ring */
    0 0 14px rgba(255,0,0,0.55);      /* soft glow */
  filter: brightness(1.9) saturate(1.6);
}

@keyframes heatPulse {
  0%   { transform: scale(1);    filter: brightness(1)   saturate(1);   }
  20%  { transform: scale(1.08); filter: brightness(2)   saturate(1.8); }
  60%  { transform: scale(1.04); filter: brightness(1.6) saturate(1.4); }
  100% { transform: scale(1);    filter: brightness(1)   saturate(1);   }
}

/* Bar segment highlighting animation */
@keyframes barHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); transform: none; }
  50%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25); transform: none; }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transform: none; }
}

/* Disable bar highlight effect entirely */
.bar-segment.highlight {
  animation: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: auto !important;
  position: static !important;
}

/* Seamless percentage bars (no white lines) */
.bar-container{
  background: transparent !important;
  border: 0 !important;
  overflow: hidden;      /* clip edges */
}

.bar-segment{
  position: relative;
  border: 0 !important;  /* no borders on segments */
}

/* Slight overlap to kill subpixel gaps */
.bar-segment + .bar-segment{
  margin-left: -0.5px;   /* bleed over the seam */
}

/* Extra safety: extend each segment’s color over the joint */
.bar-segment::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -0.5px;
  width: 1px;
  background: inherit;   /* same color as the segment */
  pointer-events: none;
}

/* Match container rounding with the first/last segments */
.bar-segment:first-child{ border-radius: 4px 0 0 4px; }
.bar-segment:last-child { border-radius: 0 4px 4px 0; }

/* If you previously added any dividers, kill them */
.bar-segment{ border-right: none !important; }
.combo-table tr:nth-child(even) td { background: transparent; }
.combo-table tr:nth-child(odd)  td { background: transparent; }

/* Light theme specific styling for combo table */
body.theme-light .combo-table {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

body.theme-light .combo-table tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.6) !important;
}

body.theme-light .combo-table tr:nth-child(odd) td {
  background: transparent !important;
}

body.theme-light .combo-table th {
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-light .combo-table td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.3) !important;
}

/* Light theme specific styling for streak table */
body.theme-light .streak-table {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

body.theme-light .streak-table tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.6) !important;
}

body.theme-light .streak-table tr:nth-child(odd) td {
  background: transparent !important;
}

body.theme-light .streak-table th {
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-light .streak-table td {
  border-bottom: none !important;
}

/* --- Streak table: compact layout --- */
.streak-table {
  display: table !important;    /* keep intrinsic shrink-to-content behavior */
  width: auto;                  /* auto shrink width based on content */
  max-width: var(--lane);
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12.5px;            /* slightly smaller overall text */
  line-height: 1.15;            /* tighter line height */
  margin: 0 auto 50px;          /* center table and add space above footer */
  /* Optimize scrolling during auto-spin updates */
  will-change: contents;
  contain: layout style;
}

.streak-table th{
  padding: 4px 6px;             /* tighter row height */
  border-bottom: 1px solid #eee;
  background-color: #111;
}

.streak-table td {
  padding: 4px 6px;             /* tighter row height */
  border-bottom: none;          /* hide horizontal lines between rows */
}

.streak-table th {
  background: black;        /* light bg so black text is readable */
  color: white;                 /* black header text */
  font-size: 13px;             /* smaller header text */
  padding: 6px 8px;
}
.streak-table tr:nth-child(even) td { background: transparent; }
.streak-table tr:nth-child(odd)  td { background: transparent; }
/* numeric columns compact + centered */
.streak-table th:nth-child(2),
.streak-table td:nth-child(2),
.streak-table th:nth-child(3),
.streak-table td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

/* Auto-shrink the first "Group" column and keep it left-aligned */
.streak-table th:first-child,
.streak-table td:first-child {
  width: 1%;               /* hint to shrink to content */
  white-space: nowrap;     /* avoid wrapping group names */
  text-align: center;      /* align group column in the middle */
}

/* last row border cleanup */
.streak-table tr:last-child td {
  border-bottom: none;
}

/* Extra compact on very small screens */
@media (max-width: 480px) {
  .streak-table { font-size: 11px; }
  .streak-table thead th { font-size: 10.5px; }
  .streak-table th, .streak-table td { padding: 3px 5px; }
}


/* Space between Combination table and "Longest Streak" title */
.combo-table {
  margin: 6px auto 18px;   /* bottom gap after the combo table */
}

/* If the very next element is the Streak title (an h3), add a little extra top space */
.combo-table + h3 {
  margin-top: 10px;        /* gentle top margin for the title */
}

/* Make specific section headers bigger */
.more-section h3:first-of-type {
  font-size: calc(18px * var(--app-text-scale)) !important;
  font-weight: bold;
  margin-top: 0 !important;
  padding-top: 20px !important; /* use padding instead of margin for the first label */
}

/* Target the streak header that comes after combo table */
.combo-table + h3,
.more-section h3:last-of-type {
  font-size: calc(17px * var(--app-text-scale)) !important;
  font-weight: bold;
}

/* Make sure Statistics header responds to text scaling */
.stats-header h3 {
  font-size: calc(16px * var(--app-text-scale)) !important;
}


/* ===== Modern Mobile Header ===== */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
  --app-header-pad-top: 8px;
  --app-header-pad-bottom: 8px;
  --app-header-pad-inline: 16px;
  --app-header-min-height: 56px;
  background: rgba(41, 128, 185, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  z-index: 20;
  color: white;
  box-sizing: border-box;
}
.app-title {
  margin: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  color: black !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: black;
  white-space: nowrap; /* keep title + badge on one line */
}
/* When the header title is a brand image */
.app-title img {
  display: block;
  height: 22px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Removed: .icon-btn svg rule to allow inline styles to work */
/* Make account icon bigger and borderless */
#btnAccount {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
#btnAccount img { width: 40px !important; height: 40px !important; border-radius: 8px !important; display: block; }
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.icon-btn:active { transform: translateY(1px); }

.dialog::backdrop {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

.dialog {
  border: none;
  border-radius: 20px;
  padding: 24px;
  max-width: 520px;
  width: 92vw;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Base overlay/card styles for non-<dialog> overlays (e.g., #testDialog, #langDialog) */
.dialog-overlay {
  position: fixed;
  inset: 0;
  display: none; /* JS toggles to flex when open */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
}
.dialog-content {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 20px;
  padding: 20px;
  width: min(92vw, 520px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
  color: #1f2937;
}

/* Fallback centering when native <dialog> modal is not supported */
.dialog.fallback-open {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2001 !important;
}

.dialog h3 {
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 24px;
}

/* Help dialog body: smaller text and scrollable */
.help-body {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  font-size: 14px;
  line-height: 1.6;
}

.help-body p {
  font-size: 14px !important;
  margin: 8px 0;
}

.help-body ul {
  font-size: 13px !important;
  padding-left: 20px;
}

.help-body li {
  margin: 4px 0;
  font-size: 13px !important;
}

/* Custom scrollbar for help dialog */
.help-body::-webkit-scrollbar {
  width: 8px;
}

.help-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.help-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.help-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Make Settings and Account dialog titles bigger than other texts */
#settingsDialog h3,
#accountDialog h3 {
  font-size: 28px !important;
  line-height: 1.2;
  font-weight: 800;
}

/* Settings dialog: force white text on dark themes */
body.theme-dark #settingsDialog,
body.theme-dark #settingsDialog * { color: #ffffff !important; }
body.theme-dark2 #settingsDialog,
body.theme-dark2 #settingsDialog * { color: #ffffff !important; }

/* ===== Unified modal template for subscription/upgrade/profile ===== */
/* Overlay - FIXED: Prevents body scroll, modal stays centered */
.subscription-modal {
  position: fixed;
  inset: 0;
  display: none; /* JS sets to flex when open */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  overflow-y: auto; /* Allow scrolling the overlay if content is too tall */
  overflow-x: hidden; /* Prevent horizontal scroll */
  padding: 16px; /* Breathing room on all sides */
}

/* Card - Completely transparent wrapper, inner content has all styling */
.subscription-modal-content {
  position: relative; /* Allows centering with margin auto */
  width: auto;
  max-width: calc(100vw - 32px); /* Account for padding */
  margin: auto; /* Centers vertically and horizontally when scrolling */
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  color: inherit;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow-x: hidden; /* Prevent horizontal scroll on content */
  box-sizing: border-box;
}

/* Ensure all child elements respect max-width */
.subscription-modal-content * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Light theme alignment (matches dialog) */
body.theme-light .subscription-modal-content {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
}

/* Dark theme card (match app dark) */
body.theme-dark .subscription-modal-content {
  background: transparent !important; /* Remove dark background - let inline styles handle it */
  border: none !important;
  color: #e6f2f2 !important;
}

/* Dark 2 already has custom styles later in file; keep them overriding */

/* Modal header/footer simple spacing */
.subscription-modal-content .compact-modal-header h2 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 800;
}
.subscription-modal-content .compact-modal-header p {
  margin: 0 0 12px 0;
  opacity: 0.85;
}
.subscription-modal-content .compact-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* Buttons in modals: align with dialog buttons */
.subscription-modal-content .btn-primary,
.subscription-modal-content .plan-btn,
.subscription-modal-content .btn-watch-ad {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.subscription-modal-content .btn-primary:hover,
.subscription-modal-content .plan-btn:hover,
.subscription-modal-content .btn-watch-ad:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}
.subscription-modal-content .btn-secondary,
.subscription-modal-content .btn-skip,
.subscription-modal-content .btn-restore {
  background: rgba(248, 250, 252, 0.9);
  color: #374151;
  border: 2px solid rgba(209, 213, 219, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
body.theme-dark .subscription-modal-content .btn-secondary,
body.theme-dark .subscription-modal-content .btn-skip,
body.theme-dark .subscription-modal-content .btn-restore {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e6f2f2 !important;
}

/* Version row: keep badge next to label */
#settingsDialog .version-row {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
}
#settingsDialog .version-row .switch-label { margin-right: 6px; }
#settingsDialog .version-value {
  display: inline-block;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  background: none !important;
  border: none !important;
  color: inherit !important;
}
/* Light theme contrast for version badge */
body.theme-light #settingsDialog .version-value {
  background: none;
  border: none;
  color: #1f2937;
}

/* Ensure consistent font for settings labels and variant label */
#settingsDialog .switch .switch-label,
#settingsDialog .theme-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* European/American variant label should match the same font */
#settingsDialog .setting-variant .switch-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

.dialog-actions { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
  margin-top: 24px; 

}

.dialog-actions button {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dialog-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.dialog input, .dialog select {
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  transition: all 0.3s ease;
  width: 100%;
  margin: 4px 0;
}

.dialog input:focus, .dialog select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.board-dialog img { width: 100%; height: auto; border-radius: 8px; }

/* Account */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.social-btn {
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid rgba(209, 213, 219, 0.6);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #000;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.mt8 { margin-top: 12px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-grid label { font-size: 12px; color: #666; display:block; font-weight: 600; }

.profile-grid input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(209, 213, 219, 0.6);
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

.profile-grid input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.account-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

.account-actions .danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  width: auto !important; /* override inline width:100% */
}

.account-actions .danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Make Close button match the danger button look for consistency */
.account-actions .btn-close-inline {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  cursor: pointer;
}
.account-actions .btn-close-inline:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.flex-grow { flex: 1 1 auto; }
.sep { text-align: center; color: #777; margin: 12px 0; font-weight: 500; }

/* Settings */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.setting-note { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin: -6px 0 10px 0; line-height: 1.4; }
.theme-light .setting-note { color: #4b5563; }
.theme-dark .setting-note,
.theme-dark2 .setting-note { color: rgba(255, 255, 255, 0.75); }

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
  margin: 8px 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  padding: 16px;
}

.setting-row-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.seg { display: inline-flex; gap: 4px; }
.seg > button { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; }

/* Modern Switch control */
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { display:none; }
.switch .slider {
  position: relative; width: 52px; height: 30px; background: #e5e7eb; border-radius: 30px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.switch .slider::after {
  content:"⚪"; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px;
  background: linear-gradient(145deg, #ffffff, #f3f4f6); border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #6b7280;
}
.switch input:checked + .slider {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.switch input:checked + .slider::after {
  transform: translateX(22px);
  content: "⚡";
  color: #fbbf24;
}
.switch .switch-label { font-size: 14px; color: #374151; font-weight: 500; }

/* Theme selector */
.theme-label {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}
.theme-select {
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
  flex: 1;
}
.theme-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Match theme selector to dark theme background */
body.theme-dark .theme-select {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
}
body.theme-dark .theme-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Help marks */
.help-qs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  background: #3b82f6;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
}

.help-qs:hover {
  background: #2563eb;
  transform: scale(1.3);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
}

.help-qs:active {
  transform: scale(1.15);
}

.help-qs.hidden { display: none !important; }

/* Text scale */
:root { --app-text-scale: 1; }
body { font-size: calc(16px * var(--app-text-scale)); }
.app-header .app-title { font-size: 20px; } /* keep header title fixed */

/* Center streaks table + look like combo table */
.streaks-table { margin: 10px auto; border-collapse: collapse; }
.streaks-table th, .streaks-table td { border: 1px solid #ddd; padding: 6px 8px; text-align: center; }
.streaks-table th { background: transparent; }

/* Ensure percent bars clickable */
[data-board-popup], .cols-percent-bar, .dozens-percent-bar { pointer-events: auto; }

/* v3 updates */
/* Keep header & footer font sizes stable; scale only content */
.app-header, .app-header * { font-size: unset; }
.app-header .app-title { font-size: 20px !important; line-height: 1.2; }
 /* footer-style buttons often live here */

/* Streaks header black */
.streaks-table th { background: #000; color: #fff; }

/* Space under charts */
canvas { margin-bottom: 16px; }
.chart, .chart-container, .chart-wrap { margin-bottom: 16px; }

/* v4 updates */
/* American [switch] European layout */
.setting-variant { gap: 16px; justify-content: center; }
.switch-side { font-size: 14px; color: #333; }

/* Keep header/footer fixed size, content scales */
.app-header, .app-header * { font-size: unset !important; }


/* Slider help positioning (to the right of its label/track) */
.slider-label, label[for='slider'] { display: inline-flex; align-items: center; gap: 6px; }
#slider + .help-qs { margin-left: 8px; }

/* Remove any accidental help bubble in settings */
#settingsDialog .help-qs { display: none !important; }

/* v5 updates */
/* Variant row aligned left */
.setting-variant.left { justify-content: flex-start; }

/* Broader text scaling across content (exclude header/footer) */
:root { --app-text-scale: var(--app-text-scale, 1); }
body { font-size: calc(16px * var(--app-text-scale)); }
/* Apply scaling to all body content except header and footer */
body *:not(.app-header):not(.app-header *):not(.special-buttons):not(.special-buttons *) {
  font-size: inherit;
}
/* Specifically include key content areas */
.history-log, .history-log *,
.stats, .stats *,
.bar-segment, .bar-segment *,
.number-grid, .number-grid *,
.more-section, .more-section *,
h1, h3, p, span, div:not(.app-header):not(.special-buttons) {
  font-size: calc(1em * var(--app-text-scale)) !important;
}
/* Include popup dialogs in scaling */
.dialog, .dialog *, .dialog-content, .dialog-content *,
.dialog-overlay, .dialog-overlay * {
  font-size: calc(1em * var(--app-text-scale)) !important;
}
/* Inputs/buttons scale too (except footer) */
input:not(.app-header *):not(.special-buttons *),
select:not(.app-header *):not(.special-buttons *),
button:not(.app-header *):not(.special-buttons *),
label:not(.app-header *):not(.special-buttons *),
table:not(.app-header *):not(.special-buttons *) {
  font-size: calc(1em * var(--app-text-scale)) !important;
}

/* Ensure the first bars capture clicks */
#colsPercentContainer > *,
#dozensPercentContainer > * {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

/* v6: smaller Settings dialog */
#settingsDialog { max-width: 440px; }

/* Help Dialog - Centered popup */
#helpDialog {
  max-width: 420px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#helpDialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.help-body {
  text-align: left;
  line-height: 1.6;
  color: #374151;
  font-size: 15px;
}

.help-body ul {
  margin: 12px 0;
  padding-left: 20px;
}

.help-body li {
  margin: 8px 0;
}

.help-body p {
  margin: 10px 0;
}

/* v6: Special buttons maintain fixed size for consistency */


/* === Narrow header/footer to content lane === */
.app-header { width: 100% !important; margin: 0 !important; max-width: none !important; }
.special-buttons { left: 50% !important; transform: translateX(-50%) !important; width: min(100%, var(--lane)) !important; }

/* Header title color matches special buttons (#50E3C2) */
.app-title { color: #50E3C2; }


/* === Header width & style aligned to content lane === */
.app-header {
  max-width: var(--lane);
  margin: 0 auto;
  background: var(--low-color, #2980b9); /* match Low segment color */
}
.app-title { color: #000; } /* header label text black */

/* Make emoji icon size fit better & buttons slightly smaller */
.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px; /* make the emoji icon larger */
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* === Footer perfectly centered to lane === */
.special-buttons {
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--lane));
  background: var(--low-color, #2980b9); /* Low segment color */
}

/* Ensure stats header, history log, and numpad share same lane alignment */
.stats-header,
.history-log,
.numpad-container {
  max-width: var(--lane);
  margin-left: auto;
  margin-right: auto;
}


/* === Global text scaling improvement === */
:root { --app-text-scale: var(--app-text-scale, 1); } /* keep existing if set */
html { font-size: calc(16px * var(--app-text-scale)); }
/* Scale common UI elements that had fixed px to follow the base size */
.app-header, .app-title, .stats-header h3, .history-log, .bar-segment,
table, th, td, button, input, select, .dialog, .special-buttons button, .numpad-container button {
  font-size: 1rem;
}

/* === Header width & color aligned with scroll section (add gutters) === */
:root { --gutter: 10px; }
.app-header {
  max-width: calc(var(--lane) + (2 * var(--gutter)));
  margin: 0 auto;
  --app-header-pad-inline: var(--gutter);
  background: var(--low-color, #2980b9); /* Low segment color */
}
.app-title { color: #000; } /* header label text black */

/* Icon buttons: slightly smaller button, bigger glyph */
.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px; /* emoji/icon size */
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* === Footer perfectly centered and matched to scroll width (with gutters) === */
.special-buttons {
  left: 50%;
  transform: translateX(-50%);
  width: calc(min(100vw, var(--lane)) + (2 * var(--gutter)));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  background: var(--low-color, #2980b9); /* Low segment color */
}

/* === Align history container to the same width behavior as scroll section === */
.history-container {
  max-width: calc(var(--lane) + (2 * var(--gutter)));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.history-log,
.stats-header,
.numpad-container {
  max-width: var(--lane);
  margin-left: auto;
  margin-right: auto;
}


/* === Global text scaling === */
:root { --app-text-scale: var(--app-text-scale, 1); }
html { font-size: calc(16px * var(--app-text-scale)); }

/* Normalize common UI to respond to root font-size */
.app-title,
.stats-header h3,
.history-log,
.bar-segment,
table, th, td,
button, input, select, textarea, label,
.numpad-container button,
.special-buttons button,
.dialog, .dialog *,
h1, h2, h3, h4, h5, h6,
p, li, small, .help-qs {
  font-size: 1rem;
}

/* Tweak icon button sizing so emoji/icon grows with scale */
.icon-btn { width: 2.25rem; height: 2.25rem; font-size: 1.375rem; }
.special-buttons button { font-size: 12px !important; }
.bar-segment { font-size: 0.9rem; }


/* === Enforce Low-color sync for header/footer === */
:root { --low-color: #2980b9; } /* default; JS will update dynamically */
.app-header { background: rgba(41, 128, 185, 0.15) !important; backdrop-filter: blur(20px) !important; }
.special-buttons { background: rgba(255, 255, 255, 0.15) !important; }


/* === Stronger global text scaling === */
:root { --app-text-scale: var(--app-text-scale, 1); }
html { font-size: calc(16px * var(--app-text-scale)); }
body,
.app-header,
.special-buttons,
.top-section,
.scroll-section,
.main-center,
.history-container,
.history-log,
.stats-header h3,
.bar-segment,
.numpad-container,
.numpad-container button,
.dialog, .dialog *,
table, th, td,
button, input, select, textarea, label,
h1, h2, h3, h4, h5, h6,
p, li, small, .help-qs {
  font-size: 1rem;
}

/* Icon size scales with text */
.icon-btn { width: 2.25rem; height: 2.25rem; font-size: 1.375rem; }
.special-buttons button { font-size: 12px; }
.bar-segment { font-size: 0.9rem; }


/* ===== Global Text Scaling (applies to most text) ===== */
:root { --app-text-scale: var(--app-text-scale, 1); }
html { font-size: calc(16px * var(--app-text-scale)); line-height: 1.4; }
body { font-size: 1rem; }
/* Do not force global inheritance to avoid overriding component styles */
/* Keep header/footer font sizes fixed */
.app-header, .app-header *, .special-buttons, .special-buttons * { font-size: unset !important; }
/* Maintain heading hierarchy (still scales with root) */
h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.375rem !important; }
h3 { font-size: 1.125rem !important; }
/* Common UI tweaks that should remain readable */
.icon-btn { width: 2.25rem; height: 2.25rem; font-size: 1.375rem !important; }
.special-buttons button { font-size: 12px !important; }
.bar-segment { font-size: 0.95rem !important; }


/* ===== Global Text Scaling (definitive) ===== */

/* ===== Subscription Modals & Toast ===== */
.subscription-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.subscription-modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 32px;
  width: 95vw;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.subscription-modal .profile-required-content {
  max-width: 480px;
  text-align: left;
}

.subscription-modal .upgrade-required-content {
  max-width: 600px;
}

.subscription-modal h3 {
  margin: 0 0 24px 0;
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  text-align: center;
}

.subscription-modal h2 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 700;

.subscription-modal .summary-inline {
  font-weight: 500;
  color: #9cb3b3;
  font-size: 14px;
}

.subscription-modal .premium-features-block {
  margin-top: 12px;
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  padding: 12px 14px;
}
.subscription-modal .premium-features-block h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #2b3a3a;
}
.subscription-modal .premium-features {
  margin: 0 0 6px 18px;
}
.subscription-modal .premium-features li {
  margin: 4px 0;
}
.subscription-modal .feature-note {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #516a6a;
}
.subscription-modal .feature-note.success {
  color: #1c8c5d;
}
  color: #1f2937;
}

.subscription-modal p {
  margin: 16px 0;
  color: #6b7280;
  line-height: 1.6;
  font-size: 16px;
}

.subscription-modal .usage-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05));
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin: 24px 0;
  color: #1e40af;
  backdrop-filter: blur(10px);
}

.subscription-modal .pricing-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
}

.subscription-modal .pricing-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border: 2px solid rgba(229, 231, 235, 0.6);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

.subscription-modal .pricing-option:hover,
.subscription-modal .pricing-option.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.subscription-modal .pricing-option .duration {
  font-weight: 700;
  color: #1f2937;
  font-size: 18px;
}

.subscription-modal .pricing-option .price {
  font-weight: 800;
  color: #3b82f6;
  font-size: 20px;
}

.subscription-modal .modal-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.subscription-modal .modal-actions button {
  padding: 16px 32px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s ease;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subscription-modal .modal-actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.subscription-modal .btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.subscription-modal .btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.subscription-modal .btn-secondary {
  background: rgba(248, 250, 252, 0.9);
  color: #374151;
  border: 2px solid rgba(209, 213, 219, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.subscription-modal .btn-secondary:hover {
  background: rgba(229, 231, 235, 0.9);
  border-color: rgba(156, 163, 175, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subscription-modal .btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.subscription-modal .btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

.subscription-modal .btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.subscription-modal .btn-success:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.subscription-modal .profile-form,
.subscription-modal .subscription-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.subscription-modal .profile-form input,
.subscription-modal .subscription-modal-form input {
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
}

.subscription-modal .profile-form input:focus,
.subscription-modal .subscription-modal-form input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.subscription-modal .subscription-modal-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subscription-modal .subscription-modal-form label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.subscription-modal .subscription-info {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  color: #065f46;
}

.subscription-modal .subscription-info .status {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}

.subscription-modal .subscription-info .details {
  font-size: 14px;
  opacity: 0.8;
}

.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  z-index: 20001; /* Above any dialog overlays/panels */
  animation: toastIn 0.3s ease-out;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.toast.success {
  background: rgba(16, 185, 129, 0.9);
}

.toast.error {
  background: rgba(239, 68, 68, 0.9);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark theme for subscription modals */
body.theme-dark .subscription-modal-content {
  background: rgba(30, 41, 59, 0.95);
  color: #f1f5f9;
}

body.theme-dark .subscription-modal h3 {
  color: #f1f5f9;
}

body.theme-dark .subscription-modal p {
  color: #cbd5e1;
}

body.theme-dark .subscription-modal .pricing-option {
  border-color: #475569;
  background: rgba(51, 65, 85, 0.3);
}

body.theme-dark .subscription-modal .pricing-option:hover,
body.theme-dark .subscription-modal .pricing-option.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
}

/* ===== Hard override to fully hide Voice UI across app (belt-and-suspenders) ===== */
.special-buttons .btn-voice,
.voice-recording-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.theme-dark .subscription-modal .pricing-option .duration {
  color: #f1f5f9;
}

body.theme-dark .subscription-modal .btn-secondary {
  background: rgba(51, 65, 85, 0.9);
  color: #f1f5f9;
  border-color: #475569;
}

body.theme-dark .subscription-modal .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.9);
}

body.theme-dark .subscription-modal .profile-form input,
body.theme-dark .subscription-modal .subscription-modal-form input {
  background: rgba(51, 65, 85, 0.8);
  border-color: #475569;
  color: #f1f5f9;
}

body.theme-dark .subscription-modal .profile-form input::placeholder,
body.theme-dark .subscription-modal .subscription-modal-form input::placeholder {
  color: #94a3b8;
}

body.theme-dark .subscription-modal .subscription-modal-form label {
  color: #f1f5f9;
}

/* Light theme for subscription modals */
body.theme-light .subscription-modal-content {
  background: transparent; /* Remove white background */
  color: #1f2937;
}

body.theme-light .subscription-modal h3 {
  color: #1f2937;
}

body.theme-light .subscription-modal p {
  color: #6b7280;
}

body.theme-light .subscription-modal .pricing-option {
  border-color: #e2e8f0;
  background: #f8fafc;
}

body.theme-light .subscription-modal .pricing-option:hover,
body.theme-light .subscription-modal .pricing-option.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

body.theme-light .subscription-modal .btn-secondary {
  background: #f8fafc;
  color: #1f2937;
  border-color: #e2e8f0;
}

body.theme-light .subscription-modal .btn-secondary:hover {
  background: #e2e8f0;
}

body.theme-light .subscription-modal .subscription-modal-form input {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #1f2937;
}

body.theme-light .subscription-modal .subscription-modal-form input::placeholder {
  color: #9ca3af;
}

body.theme-light .subscription-modal .subscription-modal-form label {
  color: #1f2937;
}
:root { --app-text-scale: 1; }
html { font-size: calc(16px * var(--app-text-scale)); line-height: 1.4; }
body { font-size: 1rem; }
/* Force inheritance so any px declarations earlier are overridden */
*, *::before, *::after { font-size: inherit !important; }

/* Remove all margin from app header */
.app-header {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== Modern Upgrade Modal Styles ===== */
.modern-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.modern-modal-header .header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: white;
}

.modern-modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
}

.modern-modal-header .header-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.modern-subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.subscription-card {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.subscription-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.subscription-card:hover::before {
  opacity: 1;
}

.subscription-card:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.subscription-card.popular {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  transform: scale(1.02);
}

.subscription-card.popular::before {
  opacity: 1;
}

.subscription-card.free-option {
  border-color: #10b981;
}

.subscription-card.free-option::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.subscription-card.free-option:hover {
  border-color: #10b981;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.plan-icon {
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 8px;
}

.subscription-card.free-option .plan-icon {
  background: rgba(16, 185, 129, 0.1);
}

.plan-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-badge.free {
  background: #d1fae5;
  color: #065f46;
}

.plan-badge.popular {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.plan-badge.value {
  background: #fef3c7;
  color: #92400e;
}

.plan-badge.premium {
  background: #f3e8ff;
  color: #6b21a8;
}

.subscription-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 10px 0;
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 12px;
}

.plan-price .currency {
  font-size: 16px;
  color: #6b7280;
  margin-right: 2px;
}

.plan-price .amount {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.plan-price .period {
  font-size: 12px;
  color: #6b7280;
  margin-left: 4px;
}

.plan-benefits {
  text-align: left;
  margin-bottom: 16px;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.3;
}

.benefit svg {
  color: #10b981;
  flex-shrink: 0;
}

.plan-button {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.free-button {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.free-button:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.premium-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.premium-button:hover {
  background: linear-gradient(135deg, #5a67d8, #6b46c1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.modern-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}

.security-note svg {
  color: #10b981;
}

.btn-ghost {
  background: transparent;
  color: #6b7280;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modern-subscription-grid {
    padding: 37px 40px; /* equal top/bottom spacing on desktop, halved */
    gap: 16px;
  }
  
  .subscription-card.popular {
    transform: none;
  }
  
  .modern-modal-footer {
    flex-direction: column;
    gap: 16px;
  }
  
  .subscription-modal-content {
    width: 95vw;
    max-width: none;
    padding: 20px;
  }
}

/* ===== Compact 2x2 Upgrade Modal Styles ===== */
.compact-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.compact-modal-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.compact-modal-header p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Single-line plan layout */
.plans-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px auto;
  max-width: 600px;
}

.plan-row {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.2s ease;
}

.plan-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  border-color: #2563eb;
}

.plan-row .plan-price {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex: 1;
}

.plan-row .plan-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.plan-row .plan-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.plan-card {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px; /* Reduced from 140px for more compact layout */
}

.plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.plan-card.free {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #10b981;
}

.plan-card.free:hover {
  border-color: #059669;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.plan-card.premium {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #3b82f6;
}

.plan-card.premium:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.plan-card.popular {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #3b82f6;
  border-width: 3px;
}

.plan-badge {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: #3b82f6;
  color: white;
  font-size: 7px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.plan-card.free .plan-badge {
  background: #10b981;
}

.plan-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.plan-price {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-card.free .plan-price {
  background: linear-gradient(135deg, #10b981, #047857);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-description {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.3;
  margin-bottom: 0; /* Removed margin since descriptions are hidden */
  flex-grow: 0; /* Don't let it grow */
  display: none; /* Hide descriptions completely */
  align-items: center;
  justify-content: center;
  text-align: center;
}

.plan-btn {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.free-btn {
  background: linear-gradient(135deg, #10b981, #047857);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.free-btn:hover {
  background: linear-gradient(135deg, #059669, #065f46);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.premium-btn {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.premium-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.compact-modal-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.btn-skip {
  background: transparent;
  color: #6b7280;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-skip:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Mobile responsive for compact modal */
@media (max-width: 480px) {
  .plans-grid {
    max-width: 320px;
    gap: 10px;
  }
  
  .plan-card {
    padding: 12px;
    min-height: 120px;
  }
  
  .plan-description {
    font-size: 10px;
  }
  
  /* Mobile styles for single-line plans */
  .plans-list {
    gap: 10px;
    max-width: 100%;
  }
  
  .plan-row {
    padding: 12px 14px;
    gap: 10px;
  }
  
  .plan-row .plan-price {
    font-size: 22px;
  }
  
  .plan-row .plan-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* ===== Manage Subscription Modal Styles ===== */
.manage-subscription-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.manage-subscription-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.subscription-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.subscription-status.active {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #10b981;
}

.subscription-status.inactive {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 1px solid #d1d5db;
}
/* Dark theme overrides for manage subscription blocks */
body.theme-dark .subscription-status.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.20) 0%, rgba(5,150,105,0.12) 100%);
  border: 1px solid rgba(16,185,129,0.35);
}
body.theme-dark .subscription-status.inactive {
  background: linear-gradient(135deg, rgba(51,65,85,0.45) 0%, rgba(30,41,59,0.45) 100%);
  border: 1px solid rgba(148,163,184,0.25);
}
body.theme-dark .status-details h3 { color: #e2e8f0; }
body.theme-dark .status-details p { color: #cbd5e1; }
body.theme-dark .expiry-date { color: #e2e8f0 !important; }
body.theme-dark .days-left { color: #34d399 !important; }
body.theme-dark .limit-info { color: #e2e8f0 !important; }

.status-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.status-details h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.status-details p {
  font-size: 14px;
  color: #6b7280;
  margin: 2px 0;
}

.expiry-date {
  font-weight: 500;
  color: #374151 !important;
}

.days-left {
  font-weight: 600;
  color: #059669 !important;
}

.limit-info {
  font-weight: 500;
  color: #374151 !important;
}

.account-info, .subscription-history {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
body.theme-dark .account-info,
body.theme-dark .subscription-history {
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(8px);
}

.account-info h4, .subscription-history h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}
body.theme-dark .account-info h4,
body.theme-dark .subscription-history h4 { color: #e2e8f0; }

.info-row, .history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}
body.theme-dark .info-row,
body.theme-dark .history-item { border-bottom-color: rgba(148,163,184,0.2); }

.info-row:last-child, .history-item:last-child {
  border-bottom: none;
}

.label {
  font-weight: 500;
  color: #374151;
}
body.theme-dark .label { color: #cbd5e1; }

.value {
  color: #6b7280;
  text-align: right;
}
body.theme-dark .value { color: #94a3b8; }

.value.completed {
  color: #059669;
  font-weight: 500;
}

.value.incomplete {
  color: #dc2626;
  font-weight: 500;
}

.date, .type {
  font-size: 14px;
  color: #374151;
}
body.theme-dark .date,
body.theme-dark .type { color: #cbd5e1; }

.status {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}

.history-item .status {
  background: #d1fae5;
  color: #065f46;
}
body.theme-dark .history-item .status {
  background: rgba(16,185,129,0.18);
  color: #a7f3d0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.action-buttons.center { justify-content: center; }

.btn-extend, .btn-upgrade {
  flex: 1;
  padding: 12px 16px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Auto-width variant for Upgrade button when used on Free plan */
.btn-upgrade.fit {
  flex: 0 0 auto;
  padding-inline: 20px;
}

.btn-extend:hover, .btn-upgrade:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-cancel {
  flex: 1;
  padding: 12px 16px;
  background: #f3f4f6;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.theme-dark .btn-cancel {
  background: rgba(71, 85, 105, 0.35);
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, 0.35);
  backdrop-filter: blur(6px);
}
body.theme-dark .btn-cancel:hover {
  background: rgba(100, 116, 139, 0.45);
  border-color: rgba(252, 165, 165, 0.55);
}

.btn-cancel:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  transform: translateY(-1px);
}

.subscription-notes {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}
body.theme-dark .subscription-notes {
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.25);
  color: #fef3c7;
}

.subscription-notes p {
  font-size: 13px;
  color: #92400e;
  margin: 4px 0;
  line-height: 1.4;
}
body.theme-dark .subscription-notes p { color: #fde68a; }

.subscription-notes strong {
  color: #78350f;
}
body.theme-dark .subscription-notes strong { color: #fde047; }

/* Brief free plan description below summary */
.free-plan-note {
  margin: 8px 0 16px 0;
  font-size: 13px;
  color: #495057;
}
body.theme-dark .free-plan-note {
  color: #cbd5e1;
}

/* Mobile responsive for manage subscription */
@media (max-width: 480px) {
  .manage-subscription-header h2 {
    font-size: 18px;
  }
  
  .subscription-status {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .info-row, .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .value {
    text-align: left;
  }
}

/* ===== Theme-specific Subscription Modals ===== */

/* Light Theme Subscription Modals */
body.theme-light .subscription-modal {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px);
}

body.theme-light .subscription-modal-content {
  background: transparent !important; /* Remove white background */
  color: #1f2937 !important;
  border: none !important;
}

body.theme-light .subscription-modal h3,
body.theme-light .subscription-modal h2 {
  color: #1f2937 !important;
}

body.theme-light .subscription-modal p {
  color: #6b7280 !important;
}

body.theme-light .subscription-modal .usage-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05)) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #1e40af !important;
}

body.theme-light .subscription-modal .pricing-option {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(229, 231, 235, 0.6) !important;
}

body.theme-light .subscription-modal .pricing-option:hover,
body.theme-light .subscription-modal .pricing-option.selected {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.08) !important;
}

body.theme-light .subscription-modal .pricing-option .duration {
  color: #1f2937 !important;
}

body.theme-light .subscription-modal .pricing-option .price {
  color: #3b82f6 !important;
}

/* Dark Theme Subscription Modals */
body.theme-dark .subscription-modal {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

body.theme-dark .subscription-modal-content {
  background: rgba(15, 23, 42, 0.95) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
}

body.theme-dark .subscription-modal h3,
body.theme-dark .subscription-modal h2 {
  color: #f1f5f9 !important;
}

body.theme-dark .subscription-modal p {
  color: #94a3b8 !important;
}

body.theme-dark .subscription-modal .usage-info {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.05)) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  color: #06b6d4 !important;
}

body.theme-dark .subscription-modal .pricing-option {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(71, 85, 105, 0.6) !important;
}

body.theme-dark .subscription-modal .pricing-option:hover,
body.theme-dark .subscription-modal .pricing-option.selected {
  border-color: #06b6d4 !important;
  background: rgba(6, 182, 212, 0.1) !important;
}

body.theme-dark .subscription-modal .pricing-option .duration {
  color: #f1f5f9 !important;
}

/* Dark theme for single-line plan rows */
body.theme-dark .plan-row {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(71, 85, 105, 0.8) !important;
}

body.theme-dark .plan-row:hover {
  border-color: #06b6d4 !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
}

body.theme-dark .plan-row .plan-price {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

body.theme-dark .plan-row .plan-btn {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  color: #0f172a !important;
}

body.theme-dark .plan-row .plan-btn:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490) !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4) !important;
}

body.theme-dark .subscription-modal .pricing-option .price {
  color: #06b6d4 !important;
}

body.theme-dark .subscription-modal .btn-primary {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

body.theme-dark .subscription-modal .btn-primary:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490) !important;
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4) !important;
}

body.theme-dark .subscription-modal .btn-secondary {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #f1f5f9 !important;
  border-color: rgba(71, 85, 105, 0.6) !important;
}

body.theme-dark .subscription-modal .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.95) !important;
  border-color: rgba(100, 116, 139, 0.8) !important;

}

body.theme-dark .subscription-modal .btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

body.theme-dark .subscription-modal .btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Form inputs in modals */
body.theme-light .subscription-modal input,
body.theme-light .subscription-modal select {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid rgba(226, 232, 240, 0.6) !important;
  color: #1f2937 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
}

body.theme-light .subscription-modal input:focus,
body.theme-light .subscription-modal select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

body.theme-dark .subscription-modal input,
body.theme-dark .subscription-modal select {
  background: rgba(51, 65, 85, 0.9) !important;
  border: 2px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
}

/* Mobile Numpad Popup Overlay */
.mobile-numpad-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent; /* Make transparent so we can see through */
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none; /* Initially none, will be enabled when shown */
}

.mobile-numpad-overlay.show {
  opacity: 1;
  pointer-events: auto; /* Enable to capture tap-to-close */
}

/* Dim overlay background - separate element would be better but using pseudo-element */
.mobile-numpad-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none; /* Background doesn't block touches */
}

.mobile-numpad-popup {
  position: relative;
  width: 100%;
  max-width: 100vw;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0px 0px 0 0;
  padding: 10px 10px 0px 10px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  margin-bottom: 0px; /* lift the entire popup up so footer buttons are above home indicator */
  pointer-events: auto; /* Allow popup to receive touch events */
}

.mobile-numpad-overlay.show .mobile-numpad-popup {
  transform: translateY(0);
}

.mobile-numpad-content {
  flex: 1;
  margin-bottom: 0; /* remove extra space below keypad buttons */
  overflow-y: auto; /* Allow scrolling within the content area */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.mobile-numpad-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px; /* match popup side padding for perfect edge alignment */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mobile-numpad-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 520px; /* allow some room but fill container */
  margin: 0 auto;
}
.mobile-numpad-actions .actions-left,
.mobile-numpad-actions .actions-center,
.mobile-numpad-actions .actions-right {
  display: flex;
  align-items: center;
}
.mobile-numpad-actions .actions-left { justify-content: flex-start; gap: 12px; }
.mobile-numpad-actions .actions-center { justify-content: center; gap: 8px; }
.mobile-numpad-actions .actions-right { justify-content: flex-end; gap: 12px; }

.mobile-action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
}

.mobile-action-btn.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.mobile-action-btn:hover,
.mobile-action-btn:active {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

/* Green zero buttons in keypad popup */
.mobile-action-btn.zero-btn {
  background: #1f9d55; /* green */
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.mobile-action-btn.zero-btn:hover,
.mobile-action-btn.zero-btn:active {
  background: #178a48;
}

/* Slightly smaller body text for combination and streak tables (not headers) */
.combo-table tbody td,
.streak-table tbody td {
  font-size: calc(0.85em * var(--app-text-scale)) !important;
}

/* Voice Recording Popup */
.voice-recording-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* No background blur */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* Higher than other overlays */
  pointer-events: none; /* Allow interaction with background */
}

/* Temporary: hide voice input UI across pages (implementation remains) */
.btn-voice,
.voice-recording-overlay {
  display: none !important;
}

/* Overlay state backgrounds */
.voice-recording-overlay.waiting .voice-recording-popup {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.35);
}
.voice-recording-overlay.recording .voice-recording-popup {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.35);
}

.voice-recording-popup {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: auto; /* Allow interaction with popup */
  animation: pulse 2s ease-in-out infinite;
}

.voice-recording-popup .recording-icon {
  font-size: 40px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}
.voice-recording-popup .recording-icon img.voice-icon {
  width: 40px;
  height: 40px;
  display: block;
}

.voice-recording-popup .recording-text {
  font-size: 12px;
  color: #000 !important; /* ensure “Listening…” is black */
  text-align: center;
  margin-bottom: 8px;
  font-weight: 500;
}

.cancel-recording-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.9);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cancel-recording-btn:hover {
  background: rgba(220, 38, 38, 1);
  transform: scale(1.1);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 30px rgba(16, 185, 129, 0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.8), 0 0 80px rgba(16, 185, 129, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(16, 185, 129, 1), 0 0 100px rgba(16, 185, 129, 0.7);
  }
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* Mobile Keypad Trigger Button */

/* Pulse effect for the latest history chip */
.history-pulse {
  position: relative;
  z-index: 1;
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65);
}
.mobile-keypad-trigger {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: rgba(59, 130, 246, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 28px;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
}

.mobile-keypad-trigger:hover {
  background: rgba(59, 130, 246, 1);
  transform: scale(1.1);
}

/* Mobile Keypad Button in Footer */
.btn-keypad {
  /* Always show Keypad button to guarantee access on all devices */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Show mobile elements only on small screens */
/* Hide inline numpad on all screens - use mobile popup numpad only */
.numpad-and-buttons {
  display: none !important;
}

/* Always show mobile keypad trigger */
.mobile-keypad-trigger {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .mobile-keypad-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Auto-hide the regular numpad on mobile */
  .numpad-and-buttons {
    display: none !important;
  }
  
  /* Make mobile numpad buttons more touch-friendly */
  .mobile-numpad-content .numpad-container button { min-height: 48px; font-size: 18px; touch-action: manipulation; }
}
body.theme-dark .subscription-modal input:focus,
body.theme-dark .subscription-modal select:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1) !important;
}

/* Additional Desktop Responsive Styles - DISABLED to preserve 768px layout */
/*
/* DISABLED - Desktop centering moved to consolidated 768px block at line 82 */
/*
@media screen and (min-width: 769px) {
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .main-app-content,
  .app-header,
  .top-section,
  .main-center,
  .scroll-section,
  .stats,
  .history-container,
  .stats-header,
  .numpad-and-buttons,
  .bar-container,
  .chart-block,
  .more-section,
  .combo-table,
  .number-grid {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .app-header {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .special-buttons {
    max-width: 800px !important;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 20px 15px 20px;
    min-height: 60px;
  }
  
  .button-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .button-group button {
    min-width: 120px;
    height: 45px;
    font-size: 14px;
    padding: 8px 16px 8px 16px;
  }
  
  .numpad-container {
    max-width: 800px !important;
    margin: 0 auto;
    gap: 8px;
  }
  
  .numpad-container button {
    height: 45px;
    font-size: 16px;
    font-weight: 500;
  }
  
  .container {
    max-width: 800px !important;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .history-table, .stats-table {
    font-size: 14px;
  }
  .history-table, .stats-table, .combo-table, .streak-table { display: block; overflow-x: auto; overflow-y: visible; }
  .history-table table, .stats-table table, .combo-table table, .streak-table table { width: 100%; }
  .combo-table th, .combo-table td, .streak-table th, .streak-table td { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  @media (min-width: 769px) {
    html[style*="--app-text-scale: 2"], html[style*="--app-text-scale: 3"] {
      --table-font-size: 0.95rem;
    }
    .combo-table, .streak-table { font-size: var(--table-font-size, 1rem); }
    .combo-table th, .combo-table td, .streak-table th, .streak-table td { font-size: inherit; }
  }
  
  .history-table th,
  .history-table td,
  .stats-table th,
  .stats-table td {
    padding: 8px 12px;
  }
  
  .chart-block {
    min-height: 200px;
  }
  
  .voice-recording-popup {
    width: 200px;
    height: 200px;
  }
  
  .voice-recording-popup .recording-icon {
    font-size: 36px;
  }
  
  .voice-recording-popup .cancel-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .mobile-numpad-overlay {
    display: none !important;
  }
  
  .numpad-container {
    display: grid !important;
  }
  
  .numpad-container button:hover,
  .button-group button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  .scroll-section::-webkit-scrollbar {
    width: 6px;
  }
  
  .scroll-section::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }
  
  .scroll-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
  
  .scroll-section::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
  }
}
*/

/* === Header alignment overrides === */
.app-header {
  display: block !important; /* Change from grid to block to accommodate main-center */
  padding: 8px 12px !important;
  position: fixed !important;
  top: var(--safe-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(41, 128, 185, 0.15) !important; /* Apply same transparent background as top-section */
  backdrop-filter: blur(20px) !important; /* Keep blur for glass effect */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border */
  z-index: 1000 !important;
}
.app-header-inner { 
  display: grid !important;
  grid-template-columns: 48px 1fr max-content !important; /* let right column fit content */
  align-items: center !important;
  gap: 8px !important;
  max-width: var(--desktop-max-width) !important;
  margin: 0 auto !important;
  padding-left: 0 !important; /* remove left padding */
  padding-right: 0 !important; /* align with scroll-section right edge */
}
/* Keep the last header cell (EU/US toggle) on one line and right-aligned */
.app-header-inner > :last-child {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
#btnAccount { 
  justify-self: start !important; 
  grid-column: 1 !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  border-radius: 12px !important;
}
.app-header .app-title { 
  justify-self: center !important; 
  text-align: center !important; 
  grid-column: 2 !important;
  margin: 0 !important;
}
#btnSettings { 
  justify-self: end !important; 
  grid-column: 3 !important;
}
/* Style the main-center content within the header */
.app-header .main-center {
  max-width: var(--desktop-max-width) !important;
  margin: 12px auto 0 auto !important;
  padding: 0 !important;
}
/* Remove padding from history container and extend width */
.app-header .history-container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.app-header .history-log {
  padding: 8px 0 !important; /* Minimal vertical padding only */
  margin: 0 !important;
  width: 100% !important;
}

/* === Ensure header matches top-section in all themes === */
/* Default theme (no explicit theme class) */
.app-header {
  background: rgba(41, 128, 185, 0.10) !important; /* clearer glass */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Light theme */
body.theme-light .app-header {
  background: rgba(255, 255, 255, 0.12) !important; /* clearer glass */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05) !important;
}

/* Dark theme */
body.theme-dark .app-header {
  background: rgba(15, 23, 42, 0.50) !important; /* clearer dark glass */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(71, 85, 105, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Final guard: header paddings always include device safe areas */
.app-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--app-header-pad-top, 8px)) !important;
  padding-bottom: var(--app-header-pad-bottom, 8px) !important;
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--app-header-pad-inline, 16px)) !important;
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--app-header-pad-inline, 16px)) !important;
  min-height: calc(var(--app-header-min-height, 56px) + env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box;
}

/* === Footer: apply default glass style across all themes === */
.special-buttons,
body.theme-light .special-buttons,
body.theme-dark .special-buttons {
  background: rgba(255, 255, 255, 0.12) !important; /* clearer glass */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 -25px 45px rgba(0, 0, 0, 0.1) !important;
  z-index: 1200 !important;
  padding-bottom: 0 !important;
}

/* === Footer buttons: glass transparent across themes === */
.special-buttons button,
body.theme-light .special-buttons button,
body.theme-dark .special-buttons button {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Light theme - ensure text is dark/black */
body.theme-light .special-buttons button {
  color: #000000 !important;
}

.special-buttons button:hover:not(.btn-test.stop),
body.theme-light .special-buttons button:hover:not(.btn-test.stop),
body.theme-dark .special-buttons button:hover:not(.btn-test.stop) {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Preserve explicit active/stop button states */
.special-buttons .btn-voice.active {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #000 !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  text-shadow: none !important;
}
/* Use black text on glass buttons in dark theme for readability */
body.theme-dark .special-buttons .btn-reset,
body.theme-dark .special-buttons .btn-view,
body.theme-dark .special-buttons .btn-test,
body.theme-dark .special-buttons .btn-keypad,
body.theme-dark .special-buttons .btn-voice:not(.active):not(.waiting):not(.listening):not(.recording) {
  color: #000000 !important;
}
/* Theme-dark voice button states */
body.theme-dark .btn-voice.inactive {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
body.theme-dark .btn-voice.waiting {
  background: rgba(251, 191, 36, 0.95) !important;
  color: #78350f !important;
  border: 1px solid rgba(217, 119, 6, 0.7) !important;
  text-shadow: none !important;
}
body.theme-dark .btn-voice.listening {
  background: rgba(239, 68, 68, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(220, 38, 38, 0.7) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
body.theme-dark .btn-voice.recording {
  background: rgba(220, 38, 38, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(185, 28, 28, 0.8) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
/* Dedicated stop button palette */
.special-buttons .btn-test.stop {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  text-shadow: none !important;
}

.special-buttons .btn-test.stop:hover {
  background: #b91c1c !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

body.theme-dark .special-buttons .btn-test.stop,
body.theme-dark2 .special-buttons .btn-test.stop {
  background: #ef4444 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

body.theme-dark .special-buttons .btn-test.stop:hover,
body.theme-dark2 .special-buttons .btn-test.stop:hover {
  background: #dc2626 !important;
}

/* --- Final global spacing overrides --- */
.main-center { margin-top: 12px !important; }
.stats { margin-top: 130px !important; }

/* ===== Left Panel for Account (replaces bottom sheet) ===== */
.bottom-sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: auto; /* auto-width with min/max bounds for responsiveness */
  min-width: min(72vw, 320px);
  max-width: min(92vw, 520px);
  max-width: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-size: 10px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  transform: translateX(-105%);
}
.bottom-sheet.open {
  transform: translateX(0);
}

.left-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);
  position: sticky; /* stays at top of sheet */
  top: 0; 
  z-index: 1;
}

.left-panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
  color: #1f2937;
}

.back-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.back-btn svg {
  width: 18px;
  height: 18px;
}

.account-panel-body {
  padding: 12px 14px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 10px !important;
  color: #1f2937;
}

.account-panel-body.compact {
  gap: 11px;
  /* inherit base scaling; avoid locking a tiny size */
  font-size: 10px !important;
}

.account-user-card {
  display: grid;
  grid-template-columns: 1fr auto; /* details then actions */
  gap: 10px 14px;
  align-items: center;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 14px;
  padding: 12px;
  font-size: 10px; /* ensure overall card text is 10px */
}

.account-avatar {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}

.account-user-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column: 1;
}

.account-card-actions {
  grid-column: 2;
  justify-self: end; /* right align manage button */
}

.account-user-name { font-weight: 400; font-size: 12px; color: #111827; }
.account-panel-body.compact .account-user-name { font-size: 12px; }
.account-panel-body .account-user-username, #panelUsername.account-user-username, .account-user-meta .account-user-username { font-size: 10px !important; line-height: 1.2; }
.account-user-email, .account-user-phone { font-size: 10px; color: #4b5563; }
.account-panel-body.compact .account-user-email, .account-panel-body.compact .account-user-phone { font-size: 10px; }

/* Hide placeholder lines that read 'Not provided' to reduce clutter */
.account-user-email:contains('Not provided'),
.account-user-phone:contains('Not provided') { display: none; }

.account-subscription-pill {
  grid-column: 1 / -1;
  justify-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #047857;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-section-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #6b7280; text-transform: none; }
.account-panel-body.compact .account-section-title { font-size: 13px; }

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.6);
  background: rgba(249, 250, 251, 0.75);
}

.account-panel-body.compact .account-row {
  padding: 9px 11px;
}

.account-row.with-toggle {
  padding-right: 10px;
}

.account-row-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-row-title {
  font-weight: 600;
  color: #111827;
}

.account-row-subtitle {
  font-size: 9px;
  color: #6b7280;
}

.compact-switch {
  transform: scale(0.78);
  transform-origin: center right;
}

.account-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.15);
  background: rgba(59, 130, 246, 0.08);
}

/* Inline row for plan label + manage button */
.account-card-row.inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-card-row.inline .account-card-actions { margin-left: auto; }
.account-card-actions .account-link.small {
  width: auto;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
}
.account-card-value#subscriptionStatusPanel { margin-top: 4px; }

.account-panel-body.compact .account-card {
  padding: 10px;
}

.account-card-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #1d4ed8;
  text-transform: uppercase;
}

.account-card-value {
  font-size: 10px;
  font-weight: 700;
  color: #1f2937;
}

.account-panel-body.compact .account-card-value {
  font-size: 10px;
}

.account-card-note {
  font-size: 10px;
  color: #4b5563;
}

.account-panel-body.compact .account-card-note,
.account-panel-body.compact .setting-note,
.account-panel-body.compact .switch-subtext {
  font-size: 10px;
}

.account-panel-body .setting-row {
  justify-content: flex-start;
  width: 100%;
  gap: 10px;
}

.account-panel-body .setting-row.setting-variant {
  align-items: center;
  gap: 10px;
}

.account-panel-body .setting-row.setting-variant .setting-row-copy {
  align-items: flex-start;
  text-align: left;
}

.account-panel-body .switch {
  gap: 8px;
  transform: scale(1);
  transform-origin: left center;
}

.account-panel-body .switch-label { font-size: 10px !important; }

.account-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(209, 213, 219, 0.6);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 10px !important;
  font-weight: 500;
  color: #1f2937;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.account-panel-body.compact .account-link {
  padding: 8px 10px;
  font-size: 10px !important;
}

.account-link .chevron {
  margin-left: auto;
  font-size: 10px;
  color: #9ca3af;
}

.account-link-icon {
  font-size: 10px;
  width: 18px;
  display: inline-flex;
  justify-content: center;
}

.account-link:hover {
  background: rgba(243, 244, 246, 0.9);
  border-color: rgba(156, 163, 175, 0.7);
  transform: translateY(-1px);
}

.account-link:active {
  transform: translateY(0);
}

.account-link.account-settings-action {
  background: linear-gradient(135deg, #f97316, #facc15);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(249, 115, 22, 0.22);
}

.account-link.account-settings-action .chevron {
  color: rgba(255, 255, 255, 0.85);
}

.account-link.account-settings-action:hover {
  background: linear-gradient(135deg, #fb923c, #fde047);
  transform: translateY(-2px);
}

.account-signout {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.account-signout:hover {
  filter: brightness(1.05);
}

.account-panel-body.compact .account-signout {
  padding: 9px 10px;
  font-size: 9px;
}

.account-section .account-footer-links,
.dialog .account-footer-links,
.account-footer-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 10px !important;
  flex-wrap: wrap;
}

.account-section .account-footer-links a,
.dialog .account-footer-links a,
.account-footer-links a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  font-size: 10px !important;
}

.account-footer-links .divider {
  color: rgba(107, 114, 128, 0.6);
}

.account-footer-links a:hover {
  text-decoration: underline;
}

.account-footer-links.compact { gap: 5px; font-size: 10px !important; color: #6b7280; }

.account-footer-links.compact a {
  color: inherit;
}

.account-footer-links.compact .divider {
  color: rgba(107, 114, 128, 0.5);
}

.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.panel-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Dark theme support for left panel */
/* Dark theme support for bottom sheet */
body.theme-dark .bottom-sheet {
  background: rgba(11, 18, 32, 0.98);
}

body.theme-dark .left-panel-header {
  background: rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .left-panel-header h3,
body.theme-dark .back-btn {
  color: #f3f4f6;
}

body.theme-dark .back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.theme-dark .account-panel-body {
  color: #e5e7eb;
}

body.theme-dark .account-user-card {
  background: rgba(79, 70, 229, 0.18);
  border-color: rgba(129, 140, 248, 0.35);
}

body.theme-dark .account-user-name {
  color: #f9fafb;
}

body.theme-dark .account-user-email,
body.theme-dark .account-user-phone {
  color: #cbd5f5;
}

body.theme-dark .account-subscription-pill {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
  color: #bbf7d0;
}

body.theme-dark .account-row,
body.theme-dark .account-card,
body.theme-dark .account-link {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

body.theme-dark .account-row-subtitle,
body.theme-dark .account-card-note {
  color: #94a3b8;
}

body.theme-dark .account-card-label {
  color: #60a5fa;
}

body.theme-dark .account-link .chevron {
  color: #9ca3af;
}

body.theme-dark .account-footer-links a {
  color: #60a5fa;
}

body.theme-dark .account-link:hover {
  background: rgba(51, 65, 85, 0.7);
}

body.theme-dark2 .bottom-sheet {
  background: rgba(9, 14, 24, 0.96);
  border-right: 1px solid rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
}

body.theme-dark2 .left-panel-header {
  background: rgba(30, 41, 59, 0.7);
  border-bottom-color: rgba(148, 163, 184, 0.3);
}

body.theme-dark2 .left-panel-header h3,
body.theme-dark2 .back-btn {
  color: #e2e8f0;
}

body.theme-dark2 .back-btn:hover {
  background: rgba(148, 163, 184, 0.25);
}

body.theme-dark2 .account-panel-body {
  color: #cbd5f5;
}

body.theme-dark2 .account-user-card {
  background: rgba(79, 70, 229, 0.2);
  border-color: rgba(165, 180, 252, 0.35);
}

body.theme-dark2 .account-user-name {
  color: #f8fafc;
}

body.theme-dark2 .account-user-email,
body.theme-dark2 .account-user-phone {
  color: #cbd5f5;
}

body.theme-dark2 .account-subscription-pill {
  background: rgba(34, 197, 94, 0.24);
  border-color: rgba(52, 211, 153, 0.55);
  color: #bbf7d0;
}

body.theme-dark2 .account-row,
body.theme-dark2 .account-card,
body.theme-dark2 .account-link {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
}

body.theme-dark2 .account-row-subtitle,
body.theme-dark2 .account-card-note {
  color: #94a3b8;
}

body.theme-dark2 .account-card-label {
  color: #93c5fd;
}

body.theme-dark2 .account-link .chevron {
  color: #cbd5f5;
}

body.theme-dark2 .account-footer-links a {
  color: #93c5fd;
}

body.theme-dark2 .account-link:hover {
  background: rgba(30, 41, 59, 0.85);
}

/* ===== Enhanced Bar Segment Highlight ===== */
.bar-segment.highlight {
  /* Squared yellow highlight similar to other highlighted elements */
  box-shadow: 0 0 0 2px #FFD700, 0 0 20px rgba(255, 215, 0, 0.6) !important;
  z-index: 10 !important;
  position: relative !important;
  filter: brightness(1.2) !important;
  transition: all 0.3s ease !important;
  /* Remove animation - use static yellow squared highlight */
  animation: none !important;
}

/* Remove the pulsing animation */
@keyframes barPulse {
  0%, 100% {
    transform: scaleY(1.1);
    box-shadow: 0 0 0 2px #FFD700, 0 0 20px rgba(255, 215, 0, 0.6);
  }
  50% {
    transform: scaleY(1.1);
    box-shadow: 0 0 0 2px #FFD700, 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

/* ==== Scoped fix: keep Account panel text at 10px ====
   The global universal rule `*, *::before, *::after { font-size: inherit !important; }`
   appears later in the cascade and caused the account settings card to inherit 16px.
   Re-assert 10px for the left account panel specifically, without shrinking switches. */
.bottom-sheet .account-panel-body,
.bottom-sheet .account-panel-body .account-card,
.bottom-sheet .account-panel-body .setting-row,
.bottom-sheet .account-panel-body .switch-label,
.bottom-sheet .account-panel-body .theme-label,
.bottom-sheet .account-panel-body .account-link,
.bottom-sheet .account-panel-body .account-user-name,
.bottom-sheet .account-panel-body .account-user-email,
.bottom-sheet .account-panel-body .account-user-phone {
  font-size: 10px !important;
}

/* Ensure the European/American label keeps 10px and toggle size remains stable */
.bottom-sheet .account-panel-body .setting-variant .switch-label { font-size: 10px !important; }
.bottom-sheet .account-panel-body .switch .slider { transform: none !important; }

/* More compact switches only inside left account panel */
.bottom-sheet .account-panel-body .switch .slider {
  width: 44px !important;
  height: 24px !important;
}
.bottom-sheet .account-panel-body .switch .slider::after {
  width: 20px !important;
  height: 20px !important;
  top: 2px !important;
  left: 2px !important;
  font-size: 12px !important;
}
.bottom-sheet .account-panel-body .switch input:checked + .slider::after {
  transform: translateX(20px) !important;
}

/* Sentence-case section title for account panel */
.bottom-sheet .account-section-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* Ensure bar container allows overflow for highlight effect */
.bar-container {
  overflow: visible !important;
}

/* ===== RESPONSIVE FOOTER BUTTONS FOR ALL SCREEN SIZES ===== */

/* Base footer button styling - consistent across all devices */
.special-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(6px, 1.5vw, 12px) !important;
  padding: clamp(8px, 2vh, 12px) clamp(10px, 3vw, 16px) !important;
}

.special-buttons button {
  flex: 1 1 auto !important;
  min-width: clamp(70px, 18vw, 90px) !important;
  max-width: 140px !important;
  padding: clamp(8px, 1.8vh, 12px) clamp(10px, 2.5vw, 16px) !important;
  font-size: clamp(11px, 2.8vw, 13px) !important;
  height: auto !important;
  min-height: clamp(36px, 6vh, 44px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Icon-only button (btn-view) gets equal sizing */
.special-buttons .btn-view {
  min-width: clamp(70px, 18vw, 90px) !important;
  flex: 1 1 auto !important;
}

/* Icon sizing in footer buttons */
.special-buttons button .icon {
  width: clamp(16px, 4vw, 20px) !important;
  height: clamp(16px, 4vw, 20px) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Extra small phones (< 360px) */
@media (max-width: 360px) {
  .special-buttons {
    gap: 4px !important;
    padding: 6px 8px !important;
  }
  
  .special-buttons button {
    min-width: 60px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    min-height: 32px !important;
  }
  
  .special-buttons button .icon {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Small phones (361px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  .special-buttons {
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  
  .special-buttons button {
    min-width: 65px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    min-height: 36px !important;
  }
}

/* Standard phones (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
  .special-buttons {
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  
  .special-buttons button {
    min-width: 75px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }
}

/* Tablets and larger (> 640px) */
@media (min-width: 641px) {
  .special-buttons {
    gap: 12px !important;
    padding: 12px 16px !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .special-buttons button {
    min-width: 85px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }
}

/* Desktop (> 1024px) - DISABLED (using consolidated 768px block instead) */
/*
@media (min-width: 1025px) {
  .special-buttons {
    max-width: 900px !important;
  }
  
  .special-buttons button {
    min-width: 100px !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
  }
}
*/

/* Landscape mode adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .special-buttons {
    padding: 6px 12px !important;
  }
  
  .special-buttons button {
    min-height: 32px !important;
    padding: 6px 12px !important;
  }
}

/* Review Modal Styles */
.review-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.review-modal-overlay.show {
  opacity: 1;
}

.review-modal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 2px;
  max-width: 400px;
  width: 100%;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.review-modal-overlay.show .review-modal {
  transform: scale(1);
}

.review-modal-content {
  background: #fff;
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
}

.review-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.review-modal h2 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px 0;
}

.review-modal p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.review-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-btn {
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.review-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.review-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.review-btn-secondary {
  background: #f0f0f0;
  color: #666;
}

.review-btn-secondary:hover {
  background: #e0e0e0;
}

body.theme-dark .review-modal-content {
  background: #1a1a2e;
}

body.theme-dark .review-modal h2 {
  color: #fff;
}

body.theme-dark .review-modal p {
  color: #aaa;
}

body.theme-dark .review-btn-secondary {
  background: #2a2a3e;
  color: #aaa;
}

body.theme-dark .review-btn-secondary:hover {
  background: #3a3a4e;
}

/* Auto-spin dialog input and select fields in dark theme - fix text visibility */
body.theme-dark #testDialog input[type="number"],
body.theme-dark #testDialog select,
body.theme-dark .dialog-content input[type="number"],
body.theme-dark .dialog-content select {
  background: rgba(30, 41, 59, 0.9) !important;
  color: #f3f4f6 !important;
  border: 1px solid rgba(71, 85, 105, 0.6) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

body.theme-dark #testDialog input[type="number"]:focus,
body.theme-dark #testDialog select:focus,
body.theme-dark .dialog-content input[type="number"]:focus,
body.theme-dark .dialog-content select:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
  outline: none !important;
}

@media (max-width: 480px) {
  .review-modal-content {
    padding: 24px 20px;
  }
  
  .review-icon {
    font-size: 48px;
  }
  
  .review-modal h2 {
    font-size: 20px;
  }
  
  .review-modal p {
    font-size: 14px;
  }
  
  .review-btn {
    padding: 12px 20px;
    font-size: 15px;
  }
}