/* Custom styling for NEET 2027 Tracker */
:root {
  --primary: #3b82f6;
  --primary-dark: #1d4ed8;
  --accent: #10b981;
  --fire: #f97316;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#login-overlay.hidden {
  display: none !important;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 231, 235, 0.8);
}

.dark .glass-card {
  background: rgba(24, 28, 38, 0.85);
  border: 1px solid rgba(55, 65, 81, 0.6);
}

/* ==========================================================================
   MULTI-MODE THEME ENGINE:
   1. theme-black (100% OLED Pitch Black, totally black not blue)
   2. theme-darkgrey (Soothing for eyes dark neutral grey)
   3. theme-grey (Medium neutral grey)
   4. theme-night (Warm soothing off-white paper reading tone)
   5. theme-light (Crisp daylight white)
   ========================================================================== */

/* --- 1. PITCH BLACK (Zero blue, 100% Pure OLED Black) --- */
html.theme-black.dark body {
  background-color: #000000 !important;
  color: #f4f4f5 !important;
}
html.theme-black.dark header {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-color: #27272a !important;
}
html.theme-black.dark footer {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-color: #27272a !important;
}
html.theme-black.dark .glass-card {
  background: #09090b !important;
  border-color: #27272a !important;
}
html.theme-black.dark .bg-slate-950 {
  background-color: #000000 !important;
}
html.theme-black.dark .bg-slate-900 {
  background-color: #09090b !important;
}
html.theme-black.dark .bg-slate-800 {
  background-color: #141416 !important;
}
html.theme-black.dark .border-slate-800,
html.theme-black.dark .border-slate-700 {
  border-color: #27272a !important;
}
html.theme-black.dark input,
html.theme-black.dark select,
html.theme-black.dark textarea {
  background-color: #141416 !important;
  border-color: #27272a !important;
  color: #fafafa !important;
}
html.theme-black.dark tr.border-b {
  border-color: #1f1f23 !important;
}
html.theme-black.dark tr:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* --- 2. DARK GREY (Soothing For Eyes) --- */
html.theme-darkgrey.dark body {
  background-color: #121214 !important;
  color: #e4e4e7 !important;
}
html.theme-darkgrey.dark header {
  background-color: rgba(18, 18, 20, 0.9) !important;
  border-color: #2c2c32 !important;
}
html.theme-darkgrey.dark footer {
  background-color: rgba(18, 18, 20, 0.9) !important;
  border-color: #2c2c32 !important;
}
html.theme-darkgrey.dark .glass-card {
  background: #1a1a1e !important;
  border-color: #2c2c32 !important;
}
html.theme-darkgrey.dark .bg-slate-950 {
  background-color: #121214 !important;
}
html.theme-darkgrey.dark .bg-slate-900 {
  background-color: #1a1a1e !important;
}
html.theme-darkgrey.dark .bg-slate-800 {
  background-color: #24242b !important;
}
html.theme-darkgrey.dark .border-slate-800,
html.theme-darkgrey.dark .border-slate-700 {
  border-color: #2c2c32 !important;
}
html.theme-darkgrey.dark input,
html.theme-darkgrey.dark select,
html.theme-darkgrey.dark textarea {
  background-color: #24242b !important;
  border-color: #2c2c32 !important;
  color: #f4f4f5 !important;
}
html.theme-darkgrey.dark tr.border-b {
  border-color: #28282f !important;
}
html.theme-darkgrey.dark tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* --- 3. GREY MODE (Soft Neutral Grey) --- */
html.theme-grey.dark body {
  background-color: #222327 !important;
  color: #f4f4f5 !important;
}
html.theme-grey.dark header {
  background-color: rgba(34, 35, 39, 0.9) !important;
  border-color: #3d3f47 !important;
}
html.theme-grey.dark footer {
  background-color: rgba(34, 35, 39, 0.9) !important;
  border-color: #3d3f47 !important;
}
html.theme-grey.dark .glass-card {
  background: #2c2d33 !important;
  border-color: #3d3f47 !important;
}
html.theme-grey.dark .bg-slate-950 {
  background-color: #222327 !important;
}
html.theme-grey.dark .bg-slate-900 {
  background-color: #2c2d33 !important;
}
html.theme-grey.dark .bg-slate-800 {
  background-color: #373942 !important;
}
html.theme-grey.dark .border-slate-800,
html.theme-grey.dark .border-slate-700 {
  border-color: #3d3f47 !important;
}
html.theme-grey.dark input,
html.theme-grey.dark select,
html.theme-grey.dark textarea {
  background-color: #373942 !important;
  border-color: #3d3f47 !important;
  color: #ffffff !important;
}
html.theme-grey.dark tr.border-b {
  border-color: #393a42 !important;
}
html.theme-grey.dark tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- 4. NIGHT MODE (Warm Off-White / Paper Candle Colors) --- */
html.theme-night body {
  background-color: #f6f1e8 !important;
  color: #2c2724 !important;
}
html.theme-night header {
  background-color: rgba(246, 241, 232, 0.95) !important;
  border-color: #e5dcce !important;
}
html.theme-night footer {
  background-color: rgba(246, 241, 232, 0.95) !important;
  border-color: #e5dcce !important;
}
html.theme-night .glass-card {
  background: #fdfaf4 !important;
  border-color: #e5dcce !important;
  color: #2c2724 !important;
  box-shadow: 0 2px 12px rgba(90, 70, 50, 0.06) !important;
}
html.theme-night .bg-slate-950,
html.theme-night .bg-slate-900 {
  background-color: #fdfaf4 !important;
}
html.theme-night .bg-slate-800,
html.theme-night .bg-slate-100 {
  background-color: #ede6d8 !important;
}
html.theme-night .border-slate-800,
html.theme-night .border-slate-700,
html.theme-night .border-slate-200 {
  border-color: #e5dcce !important;
}
html.theme-night input,
html.theme-night select,
html.theme-night textarea {
  background-color: #ede6d8 !important;
  border-color: #dcd1bf !important;
  color: #2c2724 !important;
}
html.theme-night .text-slate-100,
html.theme-night .text-slate-200,
html.theme-night .text-white {
  color: #2c2724 !important;
}
html.theme-night .text-slate-400,
html.theme-night .text-slate-300 {
  color: #6a6058 !important;
}
html.theme-night tr.border-b {
  border-color: #e7dfd1 !important;
}
html.theme-night tr:hover {
  background-color: rgba(180, 140, 100, 0.08) !important;
}

/* Night Mode Overlays & Auth Modals */
html.theme-night #login-overlay,
html.theme-night #google-config-modal {
  background-color: rgba(44, 39, 36, 0.6) !important;
}
html.theme-night #login-overlay > div,
html.theme-night #google-config-modal > div {
  background-color: #fdfaf4 !important;
  border-color: #e5dcce !important;
  color: #2c2724 !important;
  box-shadow: 0 10px 40px rgba(90, 70, 50, 0.16) !important;
}
html.theme-night #login-overlay .bg-white,
html.theme-night #google-config-modal .bg-white {
  background-color: #fdfaf4 !important;
}
html.theme-night #login-overlay .bg-slate-100,
html.theme-night #google-config-modal .bg-slate-100 {
  background-color: #ede6d8 !important;
  border-color: #e5dcce !important;
}
html.theme-night #login-overlay input,
html.theme-night #google-config-modal input {
  background-color: #ede6d8 !important;
  border-color: #dcd1bf !important;
  color: #2c2724 !important;
}
html.theme-night #login-overlay input::placeholder,
html.theme-night #google-config-modal input::placeholder {
  color: #9c8e82 !important;
}
html.theme-night #btn-google-auth-custom {
  background-color: #f6f0e4 !important;
  border-color: #dcd1bf !important;
  color: #2c2724 !important;
}
html.theme-night #btn-google-auth-custom:hover {
  background-color: #ede3d1 !important;
}

/* --- 5. BLACK & WHITE THEME (Pure Monochrome Everywhere) --- */
html.theme-bw {
  filter: grayscale(100%) !important;
}
html.theme-bw body {
  background-color: #fafafa !important;
  color: #09090b !important;
}
html.theme-bw header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e4e4e7 !important;
}
html.theme-bw footer {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e4e4e7 !important;
}
html.theme-bw .glass-card {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
  color: #09090b !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
}
html.theme-bw .bg-slate-950,
html.theme-bw .bg-slate-900 {
  background-color: #ffffff !important;
}
html.theme-bw .bg-slate-800,
html.theme-bw .bg-slate-100 {
  background-color: #f4f4f5 !important;
}
html.theme-bw .border-slate-800,
html.theme-bw .border-slate-700,
html.theme-bw .border-slate-200 {
  border-color: #e4e4e7 !important;
}
html.theme-bw input,
html.theme-bw select,
html.theme-bw textarea {
  background-color: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}
html.theme-bw .text-slate-100,
html.theme-bw .text-slate-200,
html.theme-bw .text-white {
  color: #09090b !important;
}
html.theme-bw .text-slate-400,
html.theme-bw .text-slate-300 {
  color: #71717a !important;
}
html.theme-bw tr.border-b {
  border-color: #e4e4e7 !important;
}
html.theme-bw tr:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Flame animation for streaks */
@keyframes flame-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4)); }
  50% { transform: scale(1.15) rotate(-3deg); filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.8)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4)); }
}

.flame-active {
  display: inline-block;
  animation: flame-pulse 2s infinite ease-in-out;
}

/* Smooth custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.8);
}

/* Checkboxes */
.custom-checkbox {
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.custom-checkbox:hover {
  transform: scale(1.15);
}

/* Confetti celebration container */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ==========================================================================
   SEPARATE ROUNDED NAVIGATION TABS (Blurry Background on Each Tab Pill)
   ========================================================================== */
.tab-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.85rem; /* rounded-xl like Add Column */
  font-size: 0.8125rem; /* ~13px */
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: #1e293b;
  text-decoration: none;
}

/* Blurry Background Wallpaper Layer on Each Tab */
.tab-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  background-image: url('header-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(2.5px);
  transform: scale(1.15);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.3s ease;
}

/* Contrast Scrim Layer for Readability */
.tab-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 1;
  transition: background-color 0.2s ease;
}

.dark .tab-btn {
  border-color: rgba(63, 63, 70, 0.75);
  color: #f1f5f9;
}
.dark .tab-btn::after {
  background: rgba(18, 18, 22, 0.72);
}

/* Ensure tab contents (icon + label) appear sharp above background */
.tab-btn > * {
  position: relative;
  z-index: 2;
}

/* Hover effects */
.tab-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.12);
  border-color: rgba(148, 163, 184, 0.9);
}
.tab-btn:hover::before {
  transform: scale(1.22);
}
.tab-btn:hover::after {
  background: rgba(255, 255, 255, 0.52);
}
.dark .tab-btn:hover::after {
  background: rgba(28, 28, 34, 0.6);
}

/* Active Tab State: Vibrant Elevated Pill */
.tab-btn.active {
  border-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px -1px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px);
}
.tab-btn.active::after {
  background: #2563eb !important;
  opacity: 0.92;
}
.dark .tab-btn.active {
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 16px -1px rgba(59, 130, 246, 0.5) !important;
}
.dark .tab-btn.active::after {
  background: #2563eb !important;
  opacity: 0.92;
}

/* Specific Theme Overrides */
html.theme-black.dark .tab-btn {
  border-color: #27272a;
  color: #ffffff;
}
html.theme-black.dark .tab-btn::after {
  background: rgba(0, 0, 0, 0.8);
}
html.theme-black.dark .tab-btn:hover::after {
  background: rgba(20, 20, 22, 0.7);
}
html.theme-black.dark .tab-btn.active::after {
  background: #2563eb !important;
}

html.theme-darkgrey.dark .tab-btn {
  border-color: #2c2c32;
  color: #ffffff;
}
html.theme-darkgrey.dark .tab-btn::after {
  background: rgba(18, 18, 20, 0.8);
}
html.theme-darkgrey.dark .tab-btn:hover::after {
  background: rgba(30, 30, 34, 0.7);
}

html.theme-grey.dark .tab-btn {
  border-color: #3d3f47;
  color: #ffffff;
}
html.theme-grey.dark .tab-btn::after {
  background: rgba(34, 35, 39, 0.78);
}
html.theme-grey.dark .tab-btn:hover::after {
  background: rgba(45, 47, 54, 0.68);
}

html.theme-night .tab-btn {
  border-color: #d8cebc;
  color: #3d3429;
}
html.theme-night .tab-btn::after {
  background: rgba(246, 241, 232, 0.75);
}
html.theme-night .tab-btn:hover::after {
  background: rgba(238, 230, 218, 0.65);
}
html.theme-night .tab-btn.active {
  border-color: #1e3a8a !important;
  color: #ffffff !important;
}
html.theme-night .tab-btn.active::after {
  background: #1e3a8a !important;
}

/* Subcategory filter pills (Physics, Chemistry, Biology, All Combined) */
.subcat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 0.75rem; /* rounded-xl */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  background-color: #f1f5f9;
  color: #475569;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.subcat-pill:hover {
  background-color: #e2e8f0;
  color: #0f172a;
}

.dark .subcat-pill {
  background-color: #1e293b;
  color: #94a3b8;
}

.dark .subcat-pill:hover {
  background-color: #334155;
  color: #f8fafc;
}

/* Selected State: NO BLUE! Just a clean, prominent outlined border */
.subcat-pill.active {
  background-color: #f8fafc !important;
  border-color: #0f172a !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dark .subcat-pill.active {
  background-color: #1e293b !important;
  border-color: #f8fafc !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.1);
}

/* Theme overrides */
html.theme-black.dark .subcat-pill {
  background-color: #141416 !important;
  color: #a1a1aa !important;
}
html.theme-black.dark .subcat-pill:hover {
  background-color: #27272a !important;
  color: #ffffff !important;
}
html.theme-black.dark .subcat-pill.active {
  background-color: #18181b !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important;
}

html.theme-darkgrey.dark .subcat-pill {
  background-color: #24242b !important;
  color: #a1a1aa !important;
}
html.theme-darkgrey.dark .subcat-pill:hover {
  background-color: #32323c !important;
  color: #ffffff !important;
}
html.theme-darkgrey.dark .subcat-pill.active {
  background-color: #2a2a34 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

html.theme-grey.dark .subcat-pill {
  background-color: #32343d !important;
  color: #cbd5e1 !important;
}
html.theme-grey.dark .subcat-pill:hover {
  background-color: #424550 !important;
  color: #ffffff !important;
}
html.theme-grey.dark .subcat-pill.active {
  background-color: #3a3d47 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Night Mode: Warm Paper Tone with dark outline border */
html.theme-night .subcat-pill {
  background-color: #ede6d8 !important;
  color: #5c5549 !important;
}
html.theme-night .subcat-pill:hover {
  background-color: #e2dac9 !important;
  color: #2c2724 !important;
}
html.theme-night .subcat-pill.active {
  background-color: #ede6d8 !important;
  border-color: #2c2724 !important;
  color: #2c2724 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(44, 39, 36, 0.15) !important;
}

/* Custom Rounded Select Dropdowns (Removes Native OS Boxy Appearance) */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1em 1em !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

html.theme-night select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235c5549' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Total Progress Card Selected State - Black Selection Border */
#card-overall-overview.ring-black {
  --tw-ring-color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px #000000, 0 4px 6px -1px rgba(0, 0, 0, 0.15) !important;
}

/* Subject button active / inactive states */
.subject-tab-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.active-subject {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  font-weight: 700;
}
.inactive-subject {
  background: rgba(241, 245, 249, 0.8);
  color: #475569;
}
.dark .inactive-subject {
  background: rgba(30, 41, 59, 0.8);
  color: #cbd5e1;
}
.inactive-subject:hover {
  background: rgba(226, 232, 240, 1);
}
.dark .inactive-subject:hover {
  background: rgba(51, 65, 85, 1);
}

/* Medal cards */
.medal-unlocked {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.8), rgba(255, 255, 255, 0.9));
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.18);
  transform: translateY(-2px);
  transition: all 0.25s ease;
}
.dark .medal-unlocked {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(30, 41, 59, 0.85));
  border: 1.5px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 4px 22px rgba(245, 158, 11, 0.22);
}
.medal-unlocked:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.28);
}

.medal-locked {
  background: rgba(248, 250, 252, 0.6);
  border: 1px dashed rgba(203, 213, 225, 0.8);
  opacity: 0.75;
  transition: all 0.2s ease;
}
.dark .medal-locked {
  background: rgba(15, 23, 42, 0.5);
  border: 1px dashed rgba(51, 65, 85, 0.8);
  opacity: 0.65;
}
.medal-locked:hover {
  opacity: 0.9;
}

/* YPT Study Timer digital clock */
#ypt-digital-clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}
.dark #ypt-digital-clock {
  text-shadow: 0 0 25px rgba(96, 165, 250, 0.35);
}

/* Calendar Day Cell */
#calendar-days-grid > div {
  user-select: none;
  min-height: 58px;
}

/* Japanese Stationery Watercolor Cloud Backdrop for Monthly Fruit Calendar */
#calendar-cloud-backdrop {
  border-radius: 1.5rem;
  border-width: 1.5px;
  border-style: solid;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02);
}

#calendar-fruit-header {
  min-height: 52px;
}

#calendar-fruit-illustration svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

/* Mobile & Touch Optimizations */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 640px) {
  .overflow-x-auto, .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  button, a, input, select {
    -webkit-tap-highlight-color: transparent;
  }

  #calendar-days-grid > div {
    min-height: 48px;
    padding: 2px;
  }
}

/* Header Brand Badge (Rounded Rectangle with Blurry Medical Workspace Wallpaper) */
.header-brand-badge {
  position: relative;
  overflow: hidden;
  border-radius: 0.85rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(203, 213, 225, 0.9);
}
.dark .header-brand-badge {
  border-color: rgba(63, 63, 70, 0.8);
}
html.theme-black.dark .header-brand-badge {
  border-color: #27272a;
}
html.theme-night .header-brand-badge {
  border-color: #d8cebc;
}
.header-brand-bg {
  position: absolute;
  inset: -8px;
  background-image: url('header-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.15);
  pointer-events: none;
}
.header-brand-scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.58);
  pointer-events: none;
}
.dark .header-brand-scrim {
  background: rgba(0, 0, 0, 0.65);
}
html.theme-night .header-brand-scrim {
  background: rgba(246, 241, 232, 0.65);
}
html.theme-grey.dark .header-brand-scrim {
  background: rgba(34, 35, 39, 0.7);
}
html.theme-darkgrey.dark .header-brand-scrim {
  background: rgba(18, 18, 20, 0.75);
}
html.theme-black.dark .header-brand-scrim {
  background: rgba(0, 0, 0, 0.75);
}

/* ==========================================================================
   INTERACTIVE HAMMER-PINNED STICKY NOTE CHECKBOXES
   ========================================================================== */
.task-check-btn {
  position: relative;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 auto;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.task-check-btn:focus-visible {
  outline: 2px solid #3b82f6;
  border-radius: 0.375rem;
}

/* Empty uncompleted checkbox square */
.empty-box {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
  border: 2px solid #cbd5e1;
  background-color: rgba(255, 255, 255, 0.75);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .empty-box {
  border-color: #475569;
  background-color: rgba(30, 41, 59, 0.75);
}

html.theme-black.dark .empty-box {
  border-color: #3f3f46;
  background-color: #141416;
}

html.theme-night .empty-box {
  border-color: #dcd1bf;
  background-color: #ede6d8;
}

.task-check-btn:hover .empty-box {
  border-color: #94a3b8;
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dark .task-check-btn:hover .empty-box {
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Hide empty box when pinned sticky note is active (Hammer Mode) */
html.anim-mode-hammer .task-check-btn.is-checked .empty-box,
html.anim-mode-hammer .task-check-btn.animating-strike .empty-box,
html:not(.anim-mode-pen):not(.anim-mode-gun) .task-check-btn.is-checked .empty-box,
html:not(.anim-mode-pen):not(.anim-mode-gun) .task-check-btn.animating-strike .empty-box {
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

/* Pinned Sticky Note Container */
.pinned-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.2) rotate(-10deg);
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Rest State: Firmly Pinned */
.task-check-btn.is-checked .pinned-note {
  opacity: 1;
  transform: scale(1) rotate(-2deg);
}

.task-check-btn.animating-strike .pinned-note {
  animation: note-pinned-in 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.task-check-btn.animating-peel .pinned-note {
  animation: note-peel-away 0.22s ease-in forwards;
}

/* Post-It Yellow Sticky Note Paper */
.note-paper {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  background: #fef08a; /* Cheerful post-it yellow */
  border: 1px solid #fde047;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.dark .note-paper {
  background: #fde047;
  border-color: #eab308;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

html.theme-night .note-paper {
  background: #fef9c3;
  border-color: #fef08a;
}

/* Hand-drawn Green Checkmark on Sticky Note */
.note-tick {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1;
  color: #15803d; /* Vibrant bold emerald green */
  text-shadow: 0 0.5px 0.5px rgba(21, 128, 61, 0.3);
  margin-top: 1px;
}

.dark .note-tick {
  color: #14532d;
}

/* Red Push Pin Pinning the Note */
.push-pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  z-index: 5;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

/* Impact Spark / Dust Ring */
.pin-spark {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #eab308;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.task-check-btn.animating-strike .pin-spark {
  animation: pin-impact-spark 0.35s ease-out 0.22s forwards;
}

/* Hammer Tool (Swings down onto pin) */
.hammer-tool {
  position: absolute;
  top: -16px;
  right: -12px;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform: translate(14px, -18px) rotate(50deg) scale(0.6);
  transform-origin: bottom right;
}

.task-check-btn.animating-strike .hammer-tool {
  animation: hammer-pin-strike 0.52s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

/* Hammer Strike Animation */
@keyframes hammer-pin-strike {
  0% {
    opacity: 0;
    transform: translate(16px, -20px) rotate(55deg) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translate(10px, -14px) rotate(40deg) scale(1.05);
  }
  42% {
    /* STRIKE IMPACT ON PIN */
    opacity: 1;
    transform: translate(-4px, -2px) rotate(-22deg) scale(1.12);
  }
  52% {
    /* IMPACT RECOIL BOUNCE */
    opacity: 1;
    transform: translate(0px, -7px) rotate(-6deg) scale(1.02);
  }
  75% {
    opacity: 0.85;
    transform: translate(8px, -14px) rotate(18deg) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(16px, -22px) rotate(35deg) scale(0.4);
  }
}

/* Note Impact Recoil */
@keyframes note-pinned-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-8px) rotate(-10deg);
  }
  38% {
    opacity: 1;
    transform: scale(1.1) translateY(-1px) rotate(-1deg);
  }
  44% {
    /* Moment of strike! Impact compression */
    transform: scale(0.92, 0.86) translateY(2.5px) rotate(1.5deg);
  }
  60% {
    /* Elastic rebound */
    transform: scale(1.06, 1.04) translateY(-1.5px) rotate(-2.5deg);
  }
  80% {
    transform: scale(0.98) translateY(0.5px) rotate(-1.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(-1.5deg);
  }
}

/* Impact Ring Spark */
@keyframes pin-impact-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2);
  }
}

/* Unpin / Peel Away */
@keyframes note-peel-away {
  0% {
    opacity: 1;
    transform: scale(1) rotate(-1.5deg);
  }
  35% {
    opacity: 0.9;
    transform: scale(1.12) rotate(6deg) translateY(-3px);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(25deg) translateY(8px);
  }
}

/* ==========================================================================
   ANIMATION MODES: HAMMER & PIN vs PEN MARKING vs GUN & BULLET
   ========================================================================== */

/* Mode 1: Hammer only (or default) */
html.anim-mode-hammer .task-check-btn .inked-check,
html.anim-mode-hammer .task-check-btn .pen-tool,
html.anim-mode-hammer .task-check-btn .bullet-check,
html.anim-mode-hammer .task-check-btn .gun-tool,
html:not(.anim-mode-pen):not(.anim-mode-gun) .task-check-btn .inked-check,
html:not(.anim-mode-pen):not(.anim-mode-gun) .task-check-btn .pen-tool,
html:not(.anim-mode-pen):not(.anim-mode-gun) .task-check-btn .bullet-check,
html:not(.anim-mode-pen):not(.anim-mode-gun) .task-check-btn .gun-tool {
  display: none !important;
}

/* Mode 2: Pen only */
html.anim-mode-pen .task-check-btn .pinned-note,
html.anim-mode-pen .task-check-btn .hammer-tool,
html.anim-mode-pen .task-check-btn .bullet-check,
html.anim-mode-pen .task-check-btn .gun-tool {
  display: none !important;
}

/* Mode 3: Gun only */
html.anim-mode-gun .task-check-btn .pinned-note,
html.anim-mode-gun .task-check-btn .hammer-tool,
html.anim-mode-gun .task-check-btn .inked-check,
html.anim-mode-gun .task-check-btn .pen-tool {
  display: none !important;
}

/* Pen Mode: Empty Box remains as styled checked square */
html.anim-mode-pen .task-check-btn.is-checked .empty-box,
html.anim-mode-pen .task-check-btn.animating-pen .empty-box {
  opacity: 1 !important;
  transform: scale(1) !important;
  border-color: #10b981;
  background-color: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.16);
}

html.dark.anim-mode-pen .task-check-btn.is-checked .empty-box,
html.dark.anim-mode-pen .task-check-btn.animating-pen .empty-box {
  border-color: #059669;
  background-color: rgba(6, 78, 59, 0.35);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

html.theme-black.dark.anim-mode-pen .task-check-btn.is-checked .empty-box,
html.theme-black.dark.anim-mode-pen .task-check-btn.animating-pen .empty-box {
  border-color: #10b981;
  background-color: rgba(5, 46, 22, 0.45);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

html.theme-night.anim-mode-pen .task-check-btn.is-checked .empty-box,
html.theme-night.anim-mode-pen .task-check-btn.animating-pen .empty-box {
  border-color: #15803d;
  background-color: #f0fdf4;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

/* Inked Drawn Checkmark Container */
.inked-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ink-svg {
  width: 1.15rem;
  height: 1.15rem;
  overflow: visible;
}

.ink-path {
  fill: none;
  stroke: #10b981;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.12));
}

html.dark .ink-path {
  stroke: #34d399;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

html.theme-black.dark .ink-path {
  stroke: #34d399;
}

html.theme-night .ink-path {
  stroke: #15803d;
}

/* Checked state in pen mode */
.task-check-btn.is-checked .inked-check {
  opacity: 1;
  transform: scale(1);
}

.task-check-btn.is-checked .ink-path {
  stroke-dashoffset: 0;
}

/* Pen Drawing Animation Trigger */
.task-check-btn.animating-pen .inked-check {
  opacity: 1;
  transform: scale(1);
}

.task-check-btn.animating-pen .ink-path {
  animation: pen-ink-draw 0.48s ease-out forwards;
}

.task-check-btn.animating-peel .inked-check {
  animation: ink-erase 0.2s ease-in forwards;
}

/* Fountain Pen Tool Actor */
.pen-tool {
  position: absolute;
  left: 6.5px;
  top: -12.5px;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  transform: translate(22px, -18px) rotate(14deg);
}

.task-check-btn.animating-pen .pen-tool {
  animation: pen-draw-action 0.48s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Pen Hand-Drawing Action Keyframes */
@keyframes pen-draw-action {
  0% {
    opacity: 0;
    transform: translate(22px, -18px) rotate(14deg) scale(0.8);
  }
  16% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  42% {
    opacity: 1;
    transform: translate(4px, 4px) rotate(-4deg) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(12px, -5px) rotate(6deg) scale(1);
  }
  86% {
    opacity: 0.9;
    transform: translate(16px, -11px) rotate(12deg) scale(0.95);
  }
  100% {
    opacity: 0;
    transform: translate(26px, -22px) rotate(22deg) scale(0.6);
  }
}

/* Synchronous Ink Reveal */
@keyframes pen-ink-draw {
  0% {
    stroke-dashoffset: 24;
  }
  16% {
    stroke-dashoffset: 24;
  }
  42% {
    stroke-dashoffset: 15;
  }
  72% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Ink Erase / Uncheck */
@keyframes ink-erase {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 0.8;
    transform: scale(1.1) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }
}

/* ==========================================================================
   ANIMATION MODE: GUN & BULLET HOLE TICK MARK
   ========================================================================== */

/* Gun Mode: Empty Box transforms into perforated bullet target plate */
html.anim-mode-gun .task-check-btn.is-checked .empty-box,
html.anim-mode-gun .task-check-btn.animating-gun .empty-box {
  opacity: 1 !important;
  transform: scale(1) !important;
  border-color: #64748b;
  background-color: #f1f5f9;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(100, 116, 139, 0.15);
}

html.dark.anim-mode-gun .task-check-btn.is-checked .empty-box,
html.dark.anim-mode-gun .task-check-btn.animating-gun .empty-box {
  border-color: #475569;
  background-color: #141416;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(100, 116, 139, 0.25);
}

html.theme-black.dark.anim-mode-gun .task-check-btn.is-checked .empty-box,
html.theme-black.dark.anim-mode-gun .task-check-btn.animating-gun .empty-box {
  border-color: #3f3f46;
  background-color: #0c0a09;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.95);
}

html.theme-night.anim-mode-gun .task-check-btn.is-checked .empty-box,
html.theme-night.anim-mode-gun .task-check-btn.animating-gun .empty-box {
  border-color: #a8a29e;
  background-color: #f5f0e6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Real Jagged Torn Metal Bullet Hole (Matching User Reference) */
.bullet-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bullet-svg {
  width: 1.55rem;
  height: 1.55rem;
  overflow: visible;
  filter: drop-shadow(0 2px 3.5px rgba(0, 0, 0, 0.55));
}

/* Checked state in gun mode */
.task-check-btn.is-checked .bullet-check {
  opacity: 1;
  transform: scale(1);
}

/* Firing & Bullet Hole Blast Animation */
.task-check-btn.animating-gun .bullet-check {
  animation: bullet-hole-shatter 0.44s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.task-check-btn.animating-peel .bullet-check {
  animation: ink-erase 0.2s ease-in forwards;
}

@keyframes bullet-hole-shatter {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  20% {
    opacity: 0;
    transform: scale(0.1);
  }
  24% {
    /* Impact punch blast! */
    opacity: 1;
    transform: scale(1.32);
    filter: drop-shadow(0 0 12px #f97316) brightness(1.4);
  }
  50% {
    transform: scale(0.94);
    filter: drop-shadow(0 0 6px #f59e0b);
  }
  75% {
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 2px 3.5px rgba(0, 0, 0, 0.55));
  }
}

/* Impact Spark Blast Ring */
.bullet-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fbbf24;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.task-check-btn.animating-gun .bullet-spark {
  animation: bullet-spark-expand 0.32s ease-out 0.1s forwards;
}

@keyframes bullet-spark-expand {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.2);
    border-color: #ffffff;
  }
  40% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.4);
    border-color: #f97316;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
    border-color: #ea580c;
  }
}

/* Gun Actor (Rear 3/4 Glock matching PIXTA 22724654) */
.gun-tool {
  position: absolute;
  left: -14px;
  bottom: -16px;
  width: 50px;
  height: 58px;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform-origin: 20px 58px;
}

/* Forward Muzzle Flash hidden by default, pops on during gunshot */
.glock-muzzle-flash,
.rear-muzzle-flash {
  opacity: 0;
  transform-origin: 48px 15px;
  transform: scale(0);
}

.task-check-btn.animating-gun .gun-tool {
  animation: glock-fire-recoil 0.44s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.task-check-btn.animating-gun .glock-muzzle-flash,
.task-check-btn.animating-gun .rear-muzzle-flash {
  animation: glock-muzzle-pop 0.16s ease-out 0.1s forwards;
}

/* Gun Draw & Diagonal Recoil Kick matching rear 3/4 Glock */
@keyframes glock-fire-recoil {
  0% {
    opacity: 0;
    transform: translate(-6px, 14px) rotate(-8deg) scale(0.85);
  }
  16% {
    /* Aiming sights right at center of checkbox */
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  22% {
    /* THE GUNSHOT RECOIL KICK BACK-DOWNWARDS */
    opacity: 1;
    transform: translate(-8px, 14px) rotate(-14deg) scale(1.08);
  }
  44% {
    /* Recoil recovery */
    opacity: 1;
    transform: translate(-3px, 4px) rotate(-4deg) scale(1.02);
  }
  68% {
    /* Lowering weapon down */
    opacity: 0.85;
    transform: translate(-6px, 12px) rotate(-8deg) scale(0.92);
  }
  100% {
    /* Holstered / gone */
    opacity: 0;
    transform: translate(-14px, 24px) rotate(-16deg) scale(0.7);
  }
}

/* Muzzle Flash Keyframes */
@keyframes glock-muzzle-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
    transform: scale(1.4);
  }
  70% {
    opacity: 0.8;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* ==========================================================================
   COLOURLESS / COLOURFULL MODE ENGINE
   ========================================================================== */

/* 1. Remove background wallpapers and frosted glass scrims on overview cards */
html.mode-colourless .overview-bg-img,
html.mode-colourless #card-overall-overview [style*="total-progress-bg.jpg"],
html.mode-colourless #card-physics-overview [style*="physics-bg.jpg"],
html.mode-colourless #card-chemistry-overview [style*="chemistry-bg.jpg"],
html.mode-colourless #card-biology-overview [style*="biology-bg.jpg"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background-image: none !important;
}

html.mode-colourless .overview-scrim,
html.mode-colourless #card-overall-overview > div:nth-child(2),
html.mode-colourless #card-physics-overview > div:nth-child(2),
html.mode-colourless #card-chemistry-overview > div:nth-child(2),
html.mode-colourless #card-biology-overview > div:nth-child(2) {
  display: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Make overview cards normal cards like others on the website */
html.mode-colourless #card-overall-overview,
html.mode-colourless #card-physics-overview,
html.mode-colourless #card-chemistry-overview,
html.mode-colourless #card-biology-overview {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.dark.mode-colourless #card-overall-overview,
.dark.mode-colourless #card-physics-overview,
.dark.mode-colourless #card-chemistry-overview,
.dark.mode-colourless #card-biology-overview {
  background: #0f172a !important;
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

html.theme-black.dark.mode-colourless #card-overall-overview,
html.theme-black.dark.mode-colourless #card-physics-overview,
html.theme-black.dark.mode-colourless #card-chemistry-overview,
html.theme-black.dark.mode-colourless #card-biology-overview {
  background: #141416 !important;
  background-color: #141416 !important;
  border-color: #27272a !important;
}

html.theme-darkgrey.dark.mode-colourless #card-overall-overview,
html.theme-darkgrey.dark.mode-colourless #card-physics-overview,
html.theme-darkgrey.dark.mode-colourless #card-chemistry-overview,
html.theme-darkgrey.dark.mode-colourless #card-biology-overview {
  background: #1a1a1f !important;
  background-color: #1a1a1f !important;
  border-color: #2e2e38 !important;
}

html.theme-grey.dark.mode-colourless #card-overall-overview,
html.theme-grey.dark.mode-colourless #card-physics-overview,
html.theme-grey.dark.mode-colourless #card-chemistry-overview,
html.theme-grey.dark.mode-colourless #card-biology-overview {
  background: #26272e !important;
  background-color: #26272e !important;
  border-color: #3b3d47 !important;
}

html.theme-night.mode-colourless #card-overall-overview,
html.theme-night.mode-colourless #card-physics-overview,
html.theme-night.mode-colourless #card-chemistry-overview,
html.theme-night.mode-colourless #card-biology-overview {
  background: #f7f3ea !important;
  background-color: #f7f3ea !important;
  border-color: #ded6c8 !important;
}

/* Ensure text contrast on total progress card in dark mode */
html.mode-colourless.dark #card-overall-overview span,
html.theme-black.dark.mode-colourless #card-overall-overview span,
html.theme-darkgrey.dark.mode-colourless #card-overall-overview span {
  color: #f1f5f9 !important;
}

/* 2. Navigation Tab Buttons: Remove background image and blur, make normal */
html.mode-colourless .tab-btn::before,
html.mode-colourless .tab-btn::after {
  display: none !important;
  background-image: none !important;
}

html.mode-colourless .tab-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

.dark.mode-colourless .tab-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html.theme-black.dark.mode-colourless .tab-btn {
  background-color: #18181b !important;
  border-color: #27272a !important;
  color: #fafafa !important;
}

html.theme-night.mode-colourless .tab-btn {
  background-color: #ede6d8 !important;
  border-color: #dcd1bf !important;
  color: #3e3931 !important;
}

html.mode-colourless .tab-btn.active,
html.mode-colourless .tab-btn.active-tab {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px -1px rgba(37, 99, 235, 0.4) !important;
}

.dark.mode-colourless .tab-btn.active,
.dark.mode-colourless .tab-btn.active-tab {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* 3. Header Brand Badge: Remove background image and scrim */
html.mode-colourless .header-brand-bg,
html.mode-colourless .header-brand-scrim {
  display: none !important;
  background-image: none !important;
}

/* 4. Syllabus Checkboxes: Return to standard default clean checkboxes */
html.mode-colourless .task-check-btn .pinned-note,
html.mode-colourless .task-check-btn .hammer-tool,
html.mode-colourless .task-check-btn .inked-check,
html.mode-colourless .task-check-btn .pen-tool,
html.mode-colourless .task-check-btn .bullet-check,
html.mode-colourless .task-check-btn .gun-tool {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.mode-colourless .task-check-btn .empty-box {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 0.375rem !important;
  border: 2px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.dark.mode-colourless .task-check-btn .empty-box {
  border-color: #475569 !important;
  background-color: #1e293b !important;
}

html.theme-black.dark.mode-colourless .task-check-btn .empty-box {
  border-color: #3f3f46 !important;
  background-color: #141416 !important;
}

html.theme-night.mode-colourless .task-check-btn .empty-box {
  border-color: #dcd1bf !important;
  background-color: #ede6d8 !important;
}

html.mode-colourless .task-check-btn:hover .empty-box {
  border-color: #10b981 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}

/* Checked state: Default emerald checkbox with crisp white checkmark */
html.mode-colourless .task-check-btn.is-checked .empty-box {
  opacity: 1 !important;
  transform: scale(1) !important;
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important;
}

.dark.mode-colourless .task-check-btn.is-checked .empty-box {
  background-color: #059669 !important;
  border-color: #059669 !important;
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.4) !important;
}

html.mode-colourless .task-check-btn.is-checked .empty-box::after {
  content: "" !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) translate(-0.5px, -1px) !important;
  box-sizing: border-box !important;
}

/* 5. Colourless / Colourfull Button styling */
#header-colourless-btn,
#footer-colourless-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 6. Infinite Question Practice & Mock Tests Notice Colourless overrides */
html.mode-colourless #tab-infinite-practice .bg-gradient-to-tr {
  background: #334155 !important;
  box-shadow: none !important;
}
html.mode-colourless #tab-infinite-practice .text-blue-600,
html.mode-colourless #tab-infinite-practice .text-blue-400,
html.mode-colourless #tab-tests .text-blue-600,
html.mode-colourless #tab-tests .text-blue-400 {
  color: #334155 !important;
}
html.mode-colourless #tab-infinite-practice .border-blue-200,
html.mode-colourless #tab-infinite-practice .dark\:border-blue-800\/80,
html.mode-colourless #tab-tests .border-blue-200,
html.mode-colourless #tab-tests .dark\:border-blue-800\/80 {
  border-color: #cbd5e1 !important;
}
html.mode-colourless #tab-infinite-practice .bg-blue-50,
html.mode-colourless #tab-infinite-practice .dark\:bg-blue-950\/60,
html.mode-colourless #tab-tests .bg-blue-50,
html.mode-colourless #tab-tests .dark\:bg-blue-950\/60 {
  background-color: #f1f5f9 !important;
}
.dark.mode-colourless #tab-infinite-practice .text-blue-600,
.dark.mode-colourless #tab-infinite-practice .text-blue-400,
.dark.mode-colourless #tab-tests .text-blue-600,
.dark.mode-colourless #tab-tests .text-blue-400 {
  color: #94a3b8 !important;
}
.dark.mode-colourless #tab-infinite-practice .border-blue-200,
.dark.mode-colourless #tab-infinite-practice .dark\:border-blue-800\/80,
.dark.mode-colourless #tab-tests .border-blue-200,
.dark.mode-colourless #tab-tests .dark\:border-blue-800\/80 {
  border-color: #334155 !important;
}
.dark.mode-colourless #tab-infinite-practice .bg-blue-50,
.dark.mode-colourless #tab-infinite-practice .dark\:bg-blue-950\/60,
.dark.mode-colourless #tab-tests .bg-blue-50,
.dark.mode-colourless #tab-tests .dark\:bg-blue-950\/60 {
  background-color: #1e293b !important;
}

html.mode-colourless #streak-hall-of-fame-card .text-amber-600,
html.mode-colourless #streak-hall-of-fame-card .text-amber-400 {
  color: #334155 !important;
}
html.mode-colourless #streak-hall-of-fame-card .bg-amber-500\/10 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
.dark.mode-colourless #streak-hall-of-fame-card .text-amber-600,
.dark.mode-colourless #streak-hall-of-fame-card .text-amber-400 {
  color: #94a3b8 !important;
}
.dark.mode-colourless #streak-hall-of-fame-card .bg-amber-500\/10 {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

#header-colourless-btn.is-colourless-active,
#footer-colourless-btn.is-colourless-active {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(59, 130, 246, 0.15)) !important;
  border-color: rgba(147, 51, 234, 0.5) !important;
  color: #9333ea !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25) !important;
}

.dark #header-colourless-btn.is-colourless-active,
.dark #footer-colourless-btn.is-colourless-active {
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
}

/* ==========================================================================
   BLACK & WHITE TRANSITION ANIMATION (ON ACTIVATING COLOURLESS)
   ========================================================================== */
.bw-shockwave-ring {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 50px 18px rgba(255, 255, 255, 0.9),
              inset 0 0 40px rgba(0, 0, 0, 0.9);
  animation: bw-shockwave-expand 1.15s cubic-bezier(0.1, 0.8, 0.22, 1) forwards;
}

.bw-sweep-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--origin-x, 50%) var(--origin-y, 50%),
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.85) 100%);
  animation: bw-sweep-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bw-flash-layer {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  animation: bw-camera-flash 0.45s ease-out forwards;
}

.bw-particle {
  position: absolute;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 900;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95));
  transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
}

@keyframes bw-shockwave-expand {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.1);
  }
  40% {
    opacity: 0.95;
  }
  100% {
    width: 280vmax;
    height: 280vmax;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes bw-sweep-in {
  0% { opacity: 0; }
  30% { opacity: 0.65; }
  100% { opacity: 0; }
}

@keyframes bw-camera-flash {
  0% { opacity: 0; }
  15% { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes bw-particle-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.4);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)) rotate(calc(var(--rot) * 0.4)) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.2);
  }
}

body.animating-bw-mode {
  animation: body-monochrome-wave 1.15s ease forwards;
}

@keyframes body-monochrome-wave {
  0% { filter: grayscale(0%) contrast(100%); }
  25% { filter: grayscale(90%) contrast(125%) brightness(1.08); }
  65% { filter: grayscale(50%) contrast(110%); }
  100% { filter: none; }
}

/* ==========================================================================
   RAINBOW TRANSITION ANIMATION (ON ACTIVATING COLOURFULL)
   ========================================================================== */
.rainbow-shockwave-ring {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 0, 90, 0.85) 42%,
    rgba(255, 130, 0, 0.85) 52%,
    rgba(255, 235, 59, 0.9) 62%,
    rgba(0, 230, 118, 0.9) 72%,
    rgba(0, 176, 255, 0.9) 82%,
    rgba(156, 39, 176, 0.9) 92%,
    rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.95);
  animation: rainbow-shockwave-expand 1.35s cubic-bezier(0.12, 0.8, 0.25, 1) forwards;
}

.rainbow-aurora-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 0, 100, 0.4),
    rgba(255, 140, 0, 0.4),
    rgba(255, 230, 0, 0.4),
    rgba(0, 230, 118, 0.4),
    rgba(0, 180, 255, 0.4),
    rgba(170, 0, 255, 0.4),
    rgba(255, 0, 128, 0.4));
  background-size: 300% 300%;
  mix-blend-mode: screen;
  animation: rainbow-aurora-wave 1.3s ease-out forwards;
}

.rainbow-flash-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 235, 59, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  animation: rainbow-light-flash 0.55s ease-out forwards;
}

.rainbow-particle {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
  transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
}

@keyframes rainbow-shockwave-expand {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.1);
  }
  45% {
    opacity: 0.95;
  }
  100% {
    width: 280vmax;
    height: 280vmax;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes rainbow-aurora-wave {
  0% {
    opacity: 0;
    background-position: 0% 50%;
  }
  30% {
    opacity: 0.85;
    background-position: 100% 50%;
  }
  100% {
    opacity: 0;
    background-position: 200% 50%;
  }
}

@keyframes rainbow-light-flash {
  0% { opacity: 0; }
  25% { opacity: 0.75; }
  100% { opacity: 0; }
}

@keyframes rainbow-particle-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.3);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.45), calc(var(--ty) * 0.45)) rotate(calc(var(--rot) * 0.45)) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.3);
  }
}

body.animating-rainbow-mode {
  animation: body-rainbow-shimmer 1.35s ease forwards;
}

@keyframes body-rainbow-shimmer {
  0% { filter: hue-rotate(0deg) saturate(100%); }
  35% { filter: hue-rotate(45deg) saturate(140%) brightness(1.05); }
  70% { filter: hue-rotate(15deg) saturate(115%); }
  100% { filter: none; }
}

/* ==========================================================================
   NEET MOTIVATION GLOWING BULB & SPEECH BUBBLE
   ========================================================================== */
/* Steady luminous glow - NO blinking or pulse animation */
.bulb-glowing {
  display: inline-block;
  filter: drop-shadow(0 0 4px #f59e0b) drop-shadow(0 0 10px #fbbf24);
  cursor: pointer;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Bulb when tapped / read (stops glowing, inactive until next 5h cycle) */
.bulb-dimmed {
  filter: grayscale(85%) opacity(35%) !important;
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
}

#neet-motivation-bubble {
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.2), 0 0 12px rgba(245, 158, 11, 0.15);
}

html.theme-night #neet-motivation-bubble {
  background-color: #fdfaf4 !important;
  border-color: #dcd1bf !important;
  box-shadow: 0 10px 25px -3px rgba(90, 70, 50, 0.15), 0 0 12px rgba(245, 158, 11, 0.2) !important;
}

html.theme-night #neet-motivation-bubble > div {
  background-color: #fdfaf4 !important;
  border-color: #dcd1bf !important;
}

/* ==========================================================================
   STUDY TIMER CUSTOM GALLERY BACKGROUND & CLOCK COLOR ADAPTATION
   ========================================================================== */
#ypt-card-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#ypt-card-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0.28);
}

#ypt-stopwatch-card > div.relative,
#ypt-stopwatch-card > div[class*="relative"] {
  position: relative !important;
  z-index: 10 !important;
}

/* Allow custom background to override any theme card background */
html.theme-night #ypt-stopwatch-card.has-custom-bg,
html.theme-black #ypt-stopwatch-card.has-custom-bg,
html.theme-darkgrey #ypt-stopwatch-card.has-custom-bg,
html.theme-grey #ypt-stopwatch-card.has-custom-bg,
#ypt-stopwatch-card.has-custom-bg {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35) !important;
}

@keyframes clockShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.clock-shake {
  animation: clockShake 0.45s ease-in-out;
}

#ypt-stopwatch-card.has-custom-bg.bg-is-light #ypt-digital-clock {
  color: #0f172a !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.95), 0 0 4px rgba(255, 255, 255, 0.9) !important;
}

#ypt-stopwatch-card.has-custom-bg.bg-is-light #ypt-subject-tagline {
  color: #0f172a !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.95) !important;
  font-weight: 800 !important;
}

#ypt-stopwatch-card.has-custom-bg.bg-is-dark #ypt-digital-clock {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 0, 0, 0.85) !important;
}

#ypt-stopwatch-card.has-custom-bg.bg-is-dark #ypt-subject-tagline {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) !important;
  font-weight: 700 !important;
}

#ypt-stopwatch-card.has-custom-bg .text-slate-500,
#ypt-stopwatch-card.has-custom-bg .dark\:text-slate-400 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

#timer-clock-color-popover {
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Custom Timer Task Pills & Mode Toggle - Warm Aesthetic */
.timer-task-pill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.timer-task-pill.active {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: #ffffff !important;
  border-color: rgba(251, 191, 36, 0.6) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

#ypt-stopwatch-card.has-custom-bg #btn-timer-mode-toggle {
  background: rgba(45, 28, 12, 0.6) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fef3c7 !important;
}

#ypt-stopwatch-card.has-custom-bg .timer-task-pill:not(.active) {
  background: rgba(30, 20, 10, 0.45) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: rgba(254, 243, 199, 0.95) !important;
}

#ypt-stopwatch-card.has-custom-bg #btn-add-timer-task {
  background: rgba(45, 28, 12, 0.6) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fef3c7 !important;
}

#ypt-stopwatch-card.has-custom-bg #btn-timer-bg-gallery,
#ypt-stopwatch-card.has-custom-bg #btn-timer-reset {
  background: rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Glassy Study Timer Action Buttons (Start / Pause) */
.timer-glass-btn {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  letter-spacing: 0.02em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Default on Warm Paper / Light Cards */
#btn-timer-start {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 8px 24px -4px rgba(140, 115, 85, 0.16),
              inset 0 1px 2px 0 rgba(255, 255, 255, 0.95),
              inset 0 -1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

#btn-timer-start:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
  box-shadow: 0 12px 28px -4px rgba(140, 115, 85, 0.24),
              inset 0 1px 3px 0 rgba(255, 255, 255, 1) !important;
}

#btn-timer-pause {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #92400e !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.2),
              inset 0 1px 2px 0 rgba(255, 255, 255, 0.8) !important;
}

#btn-timer-pause:hover {
  background: rgba(245, 158, 11, 0.28) !important;
  color: #78350f !important;
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 12px 28px -4px rgba(245, 158, 11, 0.3) !important;
}

/* Glassy Action Button when Custom Wallpaper is Active */
#ypt-stopwatch-card.has-custom-bg #btn-timer-start {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
              inset 0 1px 2px 0 rgba(255, 255, 255, 0.6) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

#ypt-stopwatch-card.has-custom-bg #btn-timer-start:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.4),
              inset 0 1px 3px 0 rgba(255, 255, 255, 0.85) !important;
}

#ypt-stopwatch-card.has-custom-bg #btn-timer-pause {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fef08a !important;
  border: 1px solid rgba(251, 191, 36, 0.55) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35),
              inset 0 1px 2px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

#ypt-stopwatch-card.has-custom-bg #btn-timer-pause:hover {
  background: rgba(245, 158, 11, 0.38) !important;
  border-color: rgba(251, 191, 36, 0.8) !important;
}

#ypt-stopwatch-card.has-custom-bg.bg-is-light #btn-timer-start {
  background: rgba(255, 255, 255, 0.55) !important;
  color: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  text-shadow: none !important;
}

#ypt-stopwatch-card.has-custom-bg.bg-is-light #btn-timer-pause {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #78350f !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  text-shadow: none !important;
}

/* Pure Dark Themes without custom background (html.theme-black, html.theme-darkgrey, html.theme-bw) */
html.theme-black #btn-timer-start,
html.theme-darkgrey #btn-timer-start,
html.theme-bw #btn-timer-start {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

html.theme-black #btn-timer-start:hover,
html.theme-darkgrey #btn-timer-start:hover,
html.theme-bw #btn-timer-start:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

html.theme-black #btn-timer-pause,
html.theme-darkgrey #btn-timer-pause,
html.theme-bw #btn-timer-pause {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fef08a !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
}

/* Hide background and color customization in Colourless Mode */
html.mode-colourless #ypt-card-bg-img,
html.mode-colourless #ypt-card-bg-overlay,
html.mode-colourless #btn-timer-clock-color,
html.mode-colourless #btn-timer-bg-gallery,
html.mode-colourless #btn-timer-bg-remove,
html.mode-colourless #timer-clock-color-popover,
html.mode-colourless #timer-banner-color-picker,
html.mode-colourless #timer-banner-color-picker-container,
html.mode-colourless #btn-timer-banner-color-toggle,
html.mode-colourless #timer-banner-color-popover {
  display: none !important;
}

/* In Colourful Mode: timer-banner-box displays the selected theme gradient directly */
html:not(.mode-colourless) #timer-banner-box {
  background: var(--timer-banner-bg, linear-gradient(135deg, #1d4ed8 0%, #4338ca 50%, #6b21a8 100%)) !important;
  color: var(--timer-banner-color, #ffffff) !important;
  border-color: var(--timer-banner-border, rgba(255, 255, 255, 0.25)) !important;
}

html:not(.mode-colourless) #timer-banner-box h2,
html:not(.mode-colourless) #timer-banner-box #today-total-time-badge {
  color: var(--timer-banner-color, #ffffff) !important;
}

html:not(.mode-colourless) #timer-banner-box div[class*="border-t"] {
  border-color: var(--timer-banner-border, rgba(255, 255, 255, 0.25)) !important;
}

html:not(.mode-colourless) #timer-banner-box .timer-progress-track {
  background-color: var(--timer-banner-track, rgba(0, 0, 0, 0.25)) !important;
}

.timer-banner-swatch-btn {
  box-sizing: border-box;
  flex-shrink: 0;
  transition: transform 0.15s ease, outline 0.15s ease, box-shadow 0.15s ease;
}

.timer-banner-swatch-btn:hover {
  transform: scale(1.3) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
}

#timer-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

/* Ferrari Road Track & Racing Car Animation */
#race-road-track {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
}

@keyframes carVibration {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  25% { transform: translateY(calc(-50% - 0.75px)) rotate(-0.6deg); }
  75% { transform: translateY(calc(-50% + 0.75px)) rotate(0.6deg); }
}

.car-racing-vibe {
  animation: carVibration 0.16s infinite ease-in-out;
}

/* High Contrast Badges in Colourful Mode: Rich vibrant backgrounds */
html:not(.mode-colourless) #timer-banner-box:not(.banner-is-light) #timer-status-pill {
  background: rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html:not(.mode-colourless) #timer-banner-box:not(.banner-is-light) #timer-status-pill.timer-running {
  background: rgba(5, 150, 105, 0.35) !important;
  border: 1px solid rgba(52, 211, 153, 0.7) !important;
  color: #6ee7b7 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

html:not(.mode-colourless) #timer-banner-box:not(.banner-is-light) #timer-status-pill.timer-paused {
  background: rgba(217, 119, 6, 0.35) !important;
  border: 1px solid rgba(251, 191, 36, 0.7) !important;
  color: #fde047 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

html:not(.mode-colourless) #timer-banner-box:not(.banner-is-light) .badge-need-more {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(253, 224, 71, 0.75) !important;
  color: #fef08a !important; /* Luminous bright golden yellow */
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html:not(.mode-colourless) #timer-banner-box:not(.banner-is-light) .badge-need-more strong {
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

html:not(.mode-colourless) #timer-banner-box:not(.banner-is-light) .badge-confirmed {
  background: rgba(6, 78, 59, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.8) !important;
  color: #a7f3d0 !important; /* Luminous mint emerald */
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html:not(.mode-colourless) #timer-banner-box:not(.banner-is-light) .badge-day-off {
  background: rgba(15, 118, 110, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(45, 212, 191, 0.8) !important;
  color: #ccfbf1 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* When Banner Box is Warm Paper White (warm swatch) */
html:not(.mode-colourless) #timer-banner-box.banner-is-light #timer-status-pill {
  background: rgba(217, 119, 6, 0.12) !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  color: #92400e !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

html:not(.mode-colourless) #timer-banner-box.banner-is-light #timer-status-pill.timer-running {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(5, 150, 105, 0.4) !important;
  color: #065f46 !important;
}

html:not(.mode-colourless) #timer-banner-box.banner-is-light #timer-status-pill.timer-paused {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(217, 119, 6, 0.45) !important;
  color: #92400e !important;
}

html:not(.mode-colourless) #timer-banner-box.banner-is-light .badge-need-more {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(217, 119, 6, 0.45) !important;
  color: #78350f !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

html:not(.mode-colourless) #timer-banner-box.banner-is-light .badge-need-more strong {
  color: #451a03 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

html:not(.mode-colourless) #timer-banner-box.banner-is-light .badge-confirmed {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(5, 150, 105, 0.4) !important;
  color: #065f46 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

html:not(.mode-colourless) #timer-banner-box.banner-is-light .badge-day-off {
  background: rgba(13, 148, 136, 0.15) !important;
  border: 1px solid rgba(13, 148, 136, 0.4) !important;
  color: #0f766e !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* In Colourless Mode ONLY: strip banner colors and use clean monochrome (warm white in night theme) */
html.mode-colourless #timer-banner-color-picker,
html.mode-colourless #timer-banner-color-picker-container,
html.mode-colourless #btn-timer-banner-color-toggle,
html.mode-colourless #timer-banner-color-popover {
  display: none !important;
}

html.mode-colourless.theme-night #timer-banner-box,
html.mode-colourless:not(.dark) #timer-banner-box {
  background: #fdfaf4 !important;
  background-image: none !important;
  color: #2c2724 !important;
  border-color: #e5dcce !important;
  box-shadow: 0 2px 14px rgba(90, 70, 50, 0.06) !important;
}

html.mode-colourless.theme-night #timer-banner-box h2,
html.mode-colourless.theme-night #timer-banner-box #today-total-time-badge,
html.mode-colourless:not(.dark) #timer-banner-box h2,
html.mode-colourless:not(.dark) #timer-banner-box #today-total-time-badge {
  color: #2c2724 !important;
}

html.mode-colourless.theme-night #timer-banner-box div[class*="border-t"],
html.mode-colourless:not(.dark) #timer-banner-box div[class*="border-t"] {
  border-color: #e5dcce !important;
}

html.mode-colourless.dark:not(.theme-night) #timer-banner-box {
  background: #18181b !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #27272a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

html.mode-colourless.dark:not(.theme-night) #timer-banner-box #today-threshold-progress-bar {
  background: #ffffff !important;
}

/* In Colourless Mode (Warm Off-White for Ready for Study & Banner Box) */
html.mode-colourless.theme-night #timer-banner-box,
html.mode-colourless:not(.dark) #timer-banner-box {
  background: #fdfaf4 !important;
  background-image: none !important;
  color: #2c2724 !important;
  border-color: #e5dcce !important;
  box-shadow: 0 2px 14px rgba(90, 70, 50, 0.06) !important;
}

html.mode-colourless.theme-night #timer-banner-box h2,
html.mode-colourless.theme-night #timer-banner-box #today-total-time-badge,
html.mode-colourless:not(.dark) #timer-banner-box h2,
html.mode-colourless:not(.dark) #timer-banner-box #today-total-time-badge {
  color: #2c2724 !important;
}

html.mode-colourless.theme-night #timer-banner-box div[class*="border-t"],
html.mode-colourless:not(.dark) #timer-banner-box div[class*="border-t"] {
  border-color: #e5dcce !important;
}

html.mode-colourless:not(.dark) #timer-banner-box #today-threshold-progress-bar {
  background: #52525b !important;
}

/* Ready to Study Pill in Colourless Mode: Clean Warm Off-White */
html.mode-colourless #timer-banner-box #timer-status-pill,
html.mode-colourless #timer-status-pill {
  background: #fdfaf4 !important;
  background-color: #fdfaf4 !important;
  border: 1px solid #e5dcce !important;
  color: #2c2724 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(90, 70, 50, 0.08) !important;
}

html.mode-colourless #timer-banner-box #timer-status-pill.timer-running {
  background: #fdfaf4 !important;
  background-color: #fdfaf4 !important;
  border: 1px solid #d4d4d8 !important;
  color: #18181b !important;
}

html.mode-colourless #timer-banner-box #timer-status-pill.timer-paused {
  background: #fdfaf4 !important;
  background-color: #fdfaf4 !important;
  border: 1px solid #d4d4d8 !important;
  color: #18181b !important;
}

/* Badges in Colourless Mode: Pure clean off-white (no green/amber) */
html.mode-colourless.theme-night #timer-banner-box .badge-need-more,
html.mode-colourless:not(.dark) #timer-banner-box .badge-need-more {
  background: #fdfaf4 !important;
  border: 1px solid #e5dcce !important;
  color: #2c2724 !important;
  font-weight: 800 !important;
}

html.mode-colourless.theme-night #timer-banner-box .badge-need-more strong,
html.mode-colourless:not(.dark) #timer-banner-box .badge-need-more strong {
  color: #1c1917 !important;
  text-decoration: none !important;
}

html.mode-colourless.theme-night #timer-banner-box .badge-confirmed,
html.mode-colourless:not(.dark) #timer-banner-box .badge-confirmed {
  background: #fdfaf4 !important;
  border: 1px solid #e5dcce !important;
  color: #2c2724 !important;
  font-weight: 900 !important;
}

html.mode-colourless.theme-night #timer-banner-box .badge-day-off,
html.mode-colourless:not(.dark) #timer-banner-box .badge-day-off {
  background: #fdfaf4 !important;
  border: 1px solid #e5dcce !important;
  color: #2c2724 !important;
  font-weight: 800 !important;
}

/* In Colourless Mode (Dark theme) */
html.mode-colourless.dark:not(.theme-night) #timer-banner-box #timer-status-pill {
  background: #fdfaf4 !important;
  background-color: #fdfaf4 !important;
  border: 1px solid #e5dcce !important;
  color: #2c2724 !important;
  font-weight: 800 !important;
}

html.mode-colourless.dark:not(.theme-night) #timer-banner-box .badge-need-more,
html.mode-colourless.dark:not(.theme-night) #timer-banner-box .badge-confirmed,
html.mode-colourless.dark:not(.theme-night) #timer-banner-box .badge-day-off {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* Neutralize Study Timer Bar in Colourless Mode */
html.mode-colourless #btn-timer-mode-toggle {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #d4d4d8 !important;
}
html.mode-colourless #timer-mode-pill {
  background: #18181b !important;
  color: #ffffff !important;
}
html.mode-colourless .timer-task-pill:not(.active) {
  background: #f4f4f5 !important;
  color: #52525b !important;
  border-color: #e4e4e7 !important;
}
html.mode-colourless .timer-task-pill.active {
  background: #18181b !important;
  color: #ffffff !important;
  border-color: #27272a !important;
  box-shadow: none !important;
}
html.mode-colourless #btn-add-timer-task {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #d4d4d8 !important;
}
html.mode-colourless #btn-timer-start {
  background: #18181b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
html.mode-colourless #btn-timer-pause {
  background: #52525b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html.mode-colourless.dark #btn-timer-mode-toggle,
html.mode-colourless .dark #btn-timer-mode-toggle {
  background: #27272a !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !important;
}
html.mode-colourless.dark #timer-mode-pill,
html.mode-colourless .dark #timer-mode-pill {
  background: #ffffff !important;
  color: #000000 !important;
}
html.mode-colourless.dark .timer-task-pill:not(.active),
html.mode-colourless .dark .timer-task-pill:not(.active) {
  background: #27272a !important;
  color: #a1a1aa !important;
  border-color: #3f3f46 !important;
}
html.mode-colourless.dark .timer-task-pill.active,
html.mode-colourless .dark .timer-task-pill.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}
html.mode-colourless.dark #btn-add-timer-task,
html.mode-colourless .dark #btn-add-timer-task {
  background: #27272a !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !important;
}
html.mode-colourless.dark #btn-timer-start,
html.mode-colourless .dark #btn-timer-start {
  background: #ffffff !important;
  color: #000000 !important;
}
html.mode-colourless.dark #btn-timer-pause,
html.mode-colourless .dark #btn-timer-pause {
  background: #a1a1aa !important;
  color: #000000 !important;
}

/* ==========================================================================
   1920s VINTAGE NEWSPAPER EASTER EGG PRANK (10-15s Time Warp)
   ========================================================================== */
html.mode-vintage-newspaper {
  filter: grayscale(100%) contrast(145%) brightness(96%) sepia(24%) !important;
  font-family: "Georgia", "Times New Roman", "Baskerville", serif !important;
  transition: filter 0.5s ease-in-out !important;
}

html.mode-vintage-newspaper body {
  background-color: #f6eedb !important;
  background-image: radial-gradient(#222222 0.7px, transparent 0.7px), radial-gradient(#222222 0.7px, #f6eedb 0.7px) !important;
  background-size: 6px 6px !important;
  color: #111111 !important;
  font-family: "Georgia", "Times New Roman", "Baskerville", serif !important;
}

html.mode-vintage-newspaper * {
  font-family: "Georgia", "Times New Roman", "Baskerville", serif !important;
  letter-spacing: 0.02em !important;
}

html.mode-vintage-newspaper .glass-card,
html.mode-vintage-newspaper div[class*="rounded-"],
html.mode-vintage-newspaper header,
html.mode-vintage-newspaper footer {
  background: #fbf7ee !important;
  border: 2px solid #1a1a1a !important;
  box-shadow: 4px 4px 0 #1a1a1a !important;
  border-radius: 2px !important;
  color: #111111 !important;
  backdrop-filter: none !important;
}

html.mode-vintage-newspaper button,
html.mode-vintage-newspaper input,
html.mode-vintage-newspaper select {
  border: 1.5px solid #1a1a1a !important;
  box-shadow: 2px 2px 0 #1a1a1a !important;
  border-radius: 0px !important;
  background: #f4ecdc !important;
  color: #111111 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

html.mode-vintage-newspaper button:hover {
  background: #111111 !important;
  color: #fbf7ee !important;
}

html.mode-vintage-newspaper h1,
html.mode-vintage-newspaper h2,
html.mode-vintage-newspaper h3,
html.mode-vintage-newspaper h4 {
  font-family: "Times New Roman", "Georgia", serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #111111 !important;
  border-bottom: 1.5px solid #1a1a1a !important;
  padding-bottom: 4px !important;
}

html.mode-vintage-newspaper img:not(#newspaper-masthead-logo) {
  filter: grayscale(100%) contrast(150%) !important;
}

/* Vintage Newspaper Masthead Banner */
#vintage-newspaper-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  background: #f5edd8;
  border-bottom: 3px double #1a1a1a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  color: #111111;
  font-family: "Times New Roman", "Georgia", serif;
  animation: newspaperDrop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes newspaperDrop {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

#vintage-newspaper-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999990;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), inset 0 0 200px rgba(70, 50, 20, 0.3);
}

/* ==========================================================================
   STREAK COMPLETED - CELEBRATORY LED BORDER EFFECTS
   ========================================================================== */

@property --streak-led-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes streakLedRotate {
  0% {
    --streak-led-angle: 0deg;
  }
  100% {
    --streak-led-angle: 360deg;
  }
}

@keyframes streakLedLinear {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 1. Hero Streak Card LED Wrapper */
.streak-led-wrapper {
  position: relative;
  border-radius: 28px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transition: padding 0.5s ease, box-shadow 0.7s ease, filter 0.7s ease;
}

#tab-btn-habits {
  transition: border-color 0.5s ease, box-shadow 0.7s ease !important;
}

.streak-led-wrapper.streak-led-active {
  padding: 4px;
  background: conic-gradient(
    from var(--streak-led-angle, 0deg),
    #ff1e00,
    #ff7700,
    #ffdd00,
    #10b981,
    #00e5ff,
    #b026ff,
    #ff007f,
    #ff1e00
  );
  animation: streakLedRotate 4s linear infinite;
  box-shadow:
    0 0 16px rgba(255, 120, 0, 0.85),
    0 0 35px rgba(255, 60, 0, 0.65),
    0 0 65px rgba(234, 88, 12, 0.45),
    0 0 95px rgba(255, 200, 0, 0.3);
}

@supports not (background: paint(something)) {
  .streak-led-wrapper.streak-led-active {
    background: linear-gradient(135deg, #ff1e00, #ff8800, #ffdd00, #10b981, #00e5ff, #ff007f, #ff1e00);
    background-size: 300% 300%;
    animation: streakLedLinear 4s ease infinite;
  }
}

.streak-led-wrapper.streak-led-active #hero-streak-card {
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.35) !important;
}

/* 2. Streak Tab Navigation Pill LED Border */
#tab-btn-habits.tab-streak-led {
  border: 2px solid #ff9500 !important;
  box-shadow:
    0 0 8px rgba(255, 149, 0, 0.95),
    0 0 20px rgba(255, 80, 0, 0.75),
    0 0 35px rgba(245, 158, 11, 0.5),
    inset 0 0 8px rgba(255, 220, 120, 0.7) !important;
  animation: tabLedPulse 2.4s ease-in-out infinite alternate !important;
  position: relative;
}

#tab-btn-habits.tab-streak-led.active {
  border: 2.5px solid #ffea00 !important;
  box-shadow:
    0 0 12px #ffea00,
    0 0 28px rgba(255, 120, 0, 0.95),
    0 0 55px rgba(255, 40, 0, 0.7),
    inset 0 0 12px rgba(255, 255, 200, 0.85) !important;
}

@keyframes tabLedPulse {
  0% {
    border-color: #ff3b00;
    box-shadow:
      0 0 8px #ff3b00,
      0 0 18px rgba(255, 80, 0, 0.8),
      0 0 30px rgba(255, 40, 0, 0.5),
      inset 0 0 6px rgba(255, 200, 100, 0.6);
  }
  50% {
    border-color: #ffdd00;
    box-shadow:
      0 0 14px #ffdd00,
      0 0 30px rgba(255, 180, 0, 0.9),
      0 0 50px rgba(255, 100, 0, 0.65),
      inset 0 0 10px rgba(255, 240, 150, 0.8);
  }
  100% {
    border-color: #ff7700;
    box-shadow:
      0 0 10px #ff7700,
      0 0 22px rgba(255, 110, 0, 0.85),
      0 0 40px rgba(255, 60, 0, 0.55),
      inset 0 0 8px rgba(255, 210, 120, 0.7);
  }
}

/* 3. Instant LED Power-Up Surge on Completion */
@keyframes ledPowerUpFlash {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  30% {
    filter: brightness(1.6) drop-shadow(0 0 30px rgba(255, 220, 100, 0.9));
    transform: scale(1.015);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

.led-surge-flash {
  animation: ledPowerUpFlash 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* 4. Colourless Mode LED compatibility */
html.mode-colourless .streak-led-wrapper.streak-led-active {
  background: #111111 !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) !important;
  animation: none !important;
}

html.mode-colourless #tab-btn-habits.tab-streak-led {
  border-color: #111111 !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35) !important;
  animation: none !important;
}

/* ==========================================================================
   MEDAL UNLOCKED - CELEBRATORY LED BORDER EFFECTS
   ========================================================================== */

.medal-unlocked {
  transition: border-color 0.5s ease, box-shadow 0.7s ease, transform 0.3s ease !important;
}

#streak-hall-of-fame-card {
  transition: border-color 0.5s ease, box-shadow 0.7s ease !important;
}

/* Medal Card LED Glow */
.medal-unlocked.medal-led-active,
.dark .medal-unlocked.medal-led-active {
  position: relative;
  border: 2.5px solid #ffea00 !important;
  box-shadow:
    0 0 14px #ffdd00,
    0 0 28px rgba(255, 160, 0, 0.95),
    0 0 50px rgba(255, 80, 0, 0.7),
    0 0 80px rgba(234, 88, 12, 0.45),
    inset 0 0 15px rgba(255, 230, 100, 0.55) !important;
  animation: medalLedRotatePulse 2.2s ease-in-out infinite alternate !important;
  transform: translateY(-4px) scale(1.03) !important;
  z-index: 10;
}

@keyframes medalLedRotatePulse {
  0% {
    border-color: #ff3b00;
    box-shadow:
      0 0 10px #ff3b00,
      0 0 22px rgba(255, 80, 0, 0.85),
      0 0 40px rgba(255, 40, 0, 0.55),
      inset 0 0 10px rgba(255, 200, 100, 0.6);
  }
  50% {
    border-color: #ffdd00;
    box-shadow:
      0 0 16px #ffdd00,
      0 0 32px rgba(255, 190, 0, 0.95),
      0 0 55px rgba(255, 120, 0, 0.7),
      inset 0 0 15px rgba(255, 245, 160, 0.8);
  }
  100% {
    border-color: #00e5ff;
    box-shadow:
      0 0 12px #00e5ff,
      0 0 26px rgba(0, 229, 255, 0.85),
      0 0 48px rgba(0, 180, 255, 0.55),
      inset 0 0 12px rgba(180, 250, 255, 0.6);
  }
}

/* Hall of Fame Container LED Border */
#streak-hall-of-fame-card.hall-of-fame-led-active {
  border-color: #f59e0b !important;
  box-shadow:
    0 0 15px rgba(245, 158, 11, 0.8),
    0 0 35px rgba(234, 88, 12, 0.5),
    0 0 70px rgba(251, 191, 36, 0.3) !important;
  animation: hallOfFameLedPulse 2.4s ease-in-out infinite alternate !important;
}

@keyframes hallOfFameLedPulse {
  0% {
    border-color: #ff9500;
    box-shadow: 0 0 12px rgba(255, 149, 0, 0.8), 0 0 30px rgba(234, 88, 12, 0.45);
  }
  50% {
    border-color: #ffdd00;
    box-shadow: 0 0 20px rgba(255, 221, 0, 0.9), 0 0 45px rgba(245, 158, 11, 0.6);
  }
  100% {
    border-color: #ff5500;
    box-shadow: 0 0 14px rgba(255, 85, 0, 0.8), 0 0 32px rgba(220, 38, 38, 0.45);
  }
}

/* Colourless Mode Compatibility */
html.mode-colourless .medal-unlocked.medal-led-active,
html.mode-colourless #streak-hall-of-fame-card.hall-of-fame-led-active,
html.mode-colourless .medal-spotlight-led {
  border-color: #111111 !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important;
  animation: none !important;
}

/* Center Medal Spotlight Showcase LED */
.medal-spotlight-led {
  border: 3px solid #ffea00 !important;
  box-shadow:
    0 0 20px #ffdd00,
    0 0 45px rgba(255, 160, 0, 0.95),
    0 0 85px rgba(255, 80, 0, 0.75),
    0 0 130px rgba(234, 88, 12, 0.5),
    inset 0 0 20px rgba(255, 240, 150, 0.6) !important;
  animation: medalLedRotatePulse 2s ease-in-out infinite alternate !important;
}