/* ================================================================
   00. BANNER INICIAL
   CLOCKALARM.ONLINE - CSS COMPLETO
   Design Superior com Contraste Perfeito
   ================================================================ */

/* ================================================================
   01. RESET E VARIÁVEIS GLOBAIS
   ================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /*
      --dc-radius: 14px;
      --dc-border: 1px solid rgba(0,0,0,0.08);
      --dc-bg: #ffffff;
      --dc-bg-alt: #f8fafc;
      --dc-text: #1e293b;
      --dc-primary: #2563eb;
      --dc-primary-hover: #1d4ed8;
      --dc-focus: 0 0 0 3px rgba(37,99,235,0.35);
      --dc-shadow: 0 4px 18px -4px rgba(0,0,0,0.12);
      --dc-transition: .18s cubic-bezier(.4,0,.2,1);
      --dc-gradient-accent: linear-gradient(90deg,#6366f1,#06b6d4);*/
  --timer-text-dim: #89a1aa;   
  --timer-accent: #0ea5e9;
  --timer-accent-alt: #38bdf8;

  --gradient-primary: linear-gradient(90deg,#06b6d4);
  --surface-color: #fff;
  --radius-lg: 16px;
  /* Cores principais */
  --bg-dark: #0a0a0a;
  --bg-card: #1a1a1a;
  --text-white: #ffffff;
  --text-gray: #b0b0b0;
  --alarm-primary: #00d4ff;
  --alarm-secondary: #0099cc;
  --alarm-accent: #ff6b35;
  --alarm-success: #00ff88;
  --alarm-warning: #ffaa00;
  --alarm-danger: #ff4757;
  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, var(--alarm-primary) 0%, var(--alarm-secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--alarm-accent) 0%, #ff8c42 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  --gradient-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  /* Sombras */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.4);
  /* Transições */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  /* Fonts */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Courier New', 'Monaco', monospace;
}

/* ================================================================
   02. TEMA CLARO
   ================================================================ */
[data-theme="light"] {
  --bg-dark: #ffffff;
  --bg-card: #ffffff;
  --text-white: #1e293b;
  --text-gray: #64748b;
  --alarm-primary: #0ea5e9;
  --alarm-secondary: #38bdf8;
  --alarm-accent: #f97316;
  --alarm-success: #10b981;
  --alarm-warning: #f59e0b;
  --alarm-danger: #ef4444;
  --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  --gradient-accent: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --gradient-dark: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  --gradient-bg: #ffffff;
  --shadow-soft: 0 4px 20px rgba(15, 23, 42, 0.08);
  --shadow-medium: 0 8px 30px rgba(15, 23, 42, 0.12);
  --shadow-strong: 0 12px 40px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);
  --bg-secondary: #ffffff;
  --bg-tertiary: #ffffff;
  --border-light: #cbd5e1;
  --border-medium: #94a3b8;
  --border-blue: #60a5fa;
  --border-blue-strong: #3b82f6;
  --overlay-light: rgba(255, 255, 255, 0.95);
}

/* ================================================================
   03. BASE DO DOCUMENTO
   ================================================================ */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

html { scrollbar-gutter: stable; } /* alternativa compat: html { overflow-y: scroll; } */
.menu-overlay[hidden] { display: none !important; }

body {
  font-family: var(--font-primary);
  background: var(--gradient-bg);
  color: var(--text-white);
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: 80px;
}
 
[data-theme="light"] body{
  background: #fcffff;
}


/* ================================================================
   04. HEADER SUPERIOR
   ================================================================ */
.logo-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.logo-link:hover { text-decoration: underline; }

.alarm-header {
  background: var(--gradient-dark);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--alarm-primary);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hamburger-menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.hamburger-menu span {
  width: 24px;
  height: 3px;
  background: var(--alarm-primary);
  border-radius: 2px;
  transition: var(--transition-fast);
  transform-origin: center;
}

.hamburger-menu:hover {
  background: rgba(0, 212, 255, 0.15);
}

.hamburger-menu:hover span {
  background: var(--text-white);
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.close-menu {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; font-size: 28px;
  overflow: hidden;               /* nada “sangra” para fora */
  contain: paint;                 /* isola a pintura do botão */
  backface-visibility: hidden;
  transform: translateZ(0);       /* estabiliza a animação na GPU */
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--alarm-primary);
  margin: 0;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  width: 24px;
  height: 24px;
  color: var(--alarm-primary);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
  transition: var(--transition-fast);
}

.logo-container:hover .logo-icon {
  transform: rotate(360deg);
  filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.6));
}

.header-center {
  flex: 1;
  text-align: center;
  margin-bottom: 1rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--text-white);
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  backdrop-filter: blur(5px);
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
}

.header-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  border-color: var(--alarm-primary);
  transform: translateY(-1px);
}

.header-btn:active {
  transform: translateY(0);
}

.header-btn svg {
  width: 20px;
  height: 20px;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.header-btn:hover svg {
  transform: scale(1.1);
}

/* Ícones do tema */
.theme-icon {
  transition: opacity var(--transition-fast);
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  display: block;
}

.theme-btn {
  position: relative;
  overflow: hidden;
}

.theme-btn .sun-icon,
.theme-btn .moon-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: opacity var(--transition-fast) !important;
}

/* ================================================================
   05. OVERLAY DE PRIVACIDADE
   ================================================================ */
#privacyOverlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--background-dark, #18181b);
  color: var(--text-white, #fff);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.3s;
}

#privacyOverlay .privacy-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

#privacyOverlay .privacy-logo {
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--alarm-primary, #38bdf8);
  text-shadow: 0 2px 16px #000a;
}

#privacyOverlay .privacy-msg {
  font-size: 1.2rem;
  background: rgba(0,0,0,0.25);
  padding: 1.2rem 2.5rem;
  border-radius: 1.5rem;
  color: #fff;
  box-shadow: 0 2px 16px #0004;
  font-weight: 500;
  text-align: center;
}

/* ================================================================
   06. TEMA LIGHT ESPECÍFICO (COMPONENTES HEADER/RELÓGIO)
   ================================================================ */
[data-theme="light"] .sun-icon {
  opacity: 0;
  pointer-events: none;
}

[data-theme="light"] .clock-display,
[data-theme="light"] .stopwatch-time {
  background: #38bdf8;
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5), inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .moon-icon {
  opacity: 1;
}

[data-theme="light"] .time-input-group {
  border: 1px solid rgba(0, 212, 255, 0.4);
  background-color: #fff;
}

[data-theme="light"] .time-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.35);
}

[data-theme="light"] .volume-slider {
  background: #b1babe;
}

[data-theme="light"] .advanced-settings {
  background: #fff;
  border: 1px solid rgba(0, 212, 255, 0.5);
}

[data-theme="light"] .alarms-list {
  border:1px solid rgba(0, 212, 255, 0.5);
}

[data-theme="light"] .alarm-item {
  background-color:#fff;
}

[data-theme="light"] .clock-container {
  border:1px solid rgba(0, 212, 255, 0.6);
}

[data-theme="light"] .stopwatch-container {
  border:1px solid rgba(0, 212, 255, 0.6);
}

[data-theme="light"] .stopwatch-laps-card {
  background-color: #fff;
  box-shadow: 0 0 18px 4px rgba(14, 165, 233, 0.5),
              0 0 0 2px var(--alarm-primary);
}

[data-theme="light"] #soundControls {
  background-color: #fff;
  border:1px solid rgba(0, 212, 255, 0.5);
}

[data-theme="light"] .sound-select,
.alarm-name-input {
  background-color: #fff;
}

[data-theme="light"] .alarm-name-input:focus {
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.35);
  background-color:#fff;
}

[data-theme="light"] .educational-section {
  border:1px solid rgba(0, 212, 255, 0.6);
}


/* ================================================================
   FOOTER (VERSÃO ELEGANTE + CONTRASTE REFORÇADO + BULLETS LIGHT)
   Consolidado para copiar e colar.
   - Dark como padrão
   - Light com alto contraste
   - Bullets animados (hover/focus) no modo claro
   - Acessibilidade (focus-visible, prefers-reduced-motion, prefers-contrast)
   ================================================================ */

footer {
  /* Tokens DARK */
  --footer-dark-bg-base: #10171d;
  --footer-dark-bg-layer: #121e26;
  --footer-dark-card-bg1: #121e26;
  --footer-dark-card-bg2: #18232c;
  --footer-dark-card-border: rgba(0,212,255,0.32);
  --footer-dark-card-border-hover: rgba(0,212,255,0.55);
  --footer-dark-text-strong: #e9f3f7;
  --footer-dark-text: #c9d9de;
  --footer-dark-text-dim: #9eb0b6;
  --footer-dark-link-hover: #ffffff;
  --footer-dark-divider: rgba(255,255,255,0.09);

  /* Tokens LIGHT */
  --footer-light-bg-base: #f3f9fc;
  --footer-light-bg-layer: #eef5f9;
  --footer-light-card-bg1: #f7fbfd;
  --footer-light-card-bg2: #eef5f9;
  --footer-light-card-border: rgba(14,165,233,0.40);
  --footer-light-card-border-hover: rgba(14,165,233,0.65);
  --footer-light-text-strong: #082533;
  --footer-light-text: #0d4e63;
  --footer-light-text-dim: #4c6d77;
  --footer-light-link-hover: #05202b;
  --footer-light-divider: rgba(14,165,233,0.25);

  --footer-radius: 22px;
  --footer-inner-radius: 14px;
  --footer-transition: .32s cubic-bezier(.4,.8,.25,1);
  position: relative;
  z-index: 5;
}

/* Container principal (Dark padrão) */

#footer-heading{
    text-align: center;
    margin-bottom: 1rem;
}
footer {
  margin-top: 3.5rem;
  padding: 3rem 1rem 1.8rem;
  font-size: 1rem;
  background: linear-gradient(135deg,var(--footer-dark-bg-base),var(--footer-dark-bg-layer) 60%, #152028);
  color: var(--footer-dark-text);
  border-top: 4px solid var(--alarm-primary);
  border-radius: var(--footer-radius) var(--footer-radius) 0 0;
  box-shadow:
    0 -2px 14px -4px rgba(0,0,0,0.55),
    0 -10px 28px -8px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 38% 0%, rgba(0,212,255,0.18), transparent 62%),
    radial-gradient(circle at 82% 14%, rgba(0,153,204,0.15), transparent 68%);
  opacity: .33;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Grid interno */
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
  gap: 2rem clamp(1rem,2.2vw,2.6rem);
  max-width: 1150px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Cards (Dark) */
.footer-section {
  background:
    linear-gradient(145deg,var(--footer-dark-card-bg1),var(--footer-dark-card-bg2)) padding-box,
    linear-gradient(145deg,rgba(0,212,255,0.45),rgba(0,153,204,0.25)) border-box;
  border: 1px solid transparent;
  border-radius: var(--footer-inner-radius);
  padding: 1rem 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  color: var(--footer-dark-text);
  box-shadow:
    0 4px 12px -6px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--footer-transition),
    box-shadow var(--footer-transition),
    border-color var(--footer-transition),
    background-color var(--footer-transition),
    filter var(--footer-transition);
}

.footer-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,0.20),transparent 55%),
    radial-gradient(circle at 78% 82%,rgba(0,212,255,0.12),transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--footer-transition);
}

.footer-section:hover {
  transform: translateY(-6px);
  box-shadow:
    0 10px 26px -10px rgba(0,212,255,0.55),
    0 6px 22px -4px rgba(0,0,0,0.55),
    0 0 0 1px var(--footer-dark-card-border-hover);
  border-color: var(--footer-dark-card-border-hover);
}
.footer-section:hover::after { opacity: .55; }

.footer-section:focus-within {
  outline: 2px solid var(--alarm-primary);
  outline-offset: 3px;
}

/* Títulos */
.footer-section h5 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 .55rem;
  letter-spacing: .5px;
  background: linear-gradient(90deg,var(--alarm-primary),var(--alarm-secondary,#38bdf8));
  -webkit-background-clip: text;
  color: var(--footer-dark-text-strong);
  @supports (-webkit-background-clip:text) or (background-clip:text) {
    color: transparent;
  }
  
}

.footer-section h5::after {
  content:"";
  height: 2px;
  border-radius: 2px;
  width: 42px;
  background: linear-gradient(90deg,var(--alarm-primary),transparent);
  position: absolute;
  bottom: -4px;
  left: 0;
  opacity: .85;
}

/* Listas */
.footer-section ul {
  list-style: none;
  margin: .15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.footer-section ul li {
  display: flex;
  align-items: flex-start;
  line-height: 1.28;
  font-size: .94rem;
  color: var(--footer-dark-text);
  position: relative;
}

.footer-section ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: .45rem .55rem 0 .1rem;
  background: linear-gradient(135deg,var(--alarm-primary),var(--alarm-secondary));
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,212,255,0.25);
  flex-shrink: 0;
  opacity: .75;
  transform: scale(.85);
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.footer-section ul li:hover::before {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.35),0 0 0 1px rgba(255,255,255,0.3) inset;
}

/* Links */
.footer-section ul li a {
  color: var(--footer-dark-text);
  text-decoration: none;
  position: relative;
  padding: .15rem 0;
  flex: 1;
  opacity: .92;
  font-weight: 500;
  transition: color .28s ease, opacity .28s ease, transform .28s ease;
}

.footer-section ul li a::after {
  content:"";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg,var(--alarm-primary),var(--alarm-secondary));
  border-radius: 2px;
  transition: width .35s cubic-bezier(.4,.8,.25,1);
}

.footer-section ul li a:hover {
  color: var(--footer-dark-link-hover);
  opacity: 1;
  transform: translateX(2px);
}
.footer-section ul li a:hover::after { width: 100%; }

.footer-section ul li a:focus-visible {
  outline: 2px solid var(--alarm-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Rodapé inferior */
.footer-bottom {
  text-align: center;
  margin-top: 2.8rem;
  font-size: .95rem;
  letter-spacing: .4px;
  color: var(--footer-dark-text-dim);
  position: relative;
  z-index: 2;
  padding-top: 1.35rem;
}

.footer-bottom::before {
  content:"";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(620px,85%);
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--alarm-primary) 40%, var(--alarm-secondary) 60%,transparent);
  opacity: .55;
}

/* Remove divisores antigos */
.footer-divider { display: none; }

/* =============== LIGHT THEME =============== */
[data-theme="light"] footer {
  background: linear-gradient(135deg,var(--footer-light-bg-base),var(--footer-light-bg-layer) 60%);
  color: var(--footer-light-text);
  box-shadow:
    0 -2px 12px -4px rgba(14,165,233,0.25),
    0 0 0 1px rgba(14,165,233,0.22) inset;
  border-top: 4px solid var(--alarm-primary);
}

[data-theme="light"] footer::before {
  background:
    radial-gradient(circle at 34% 0%, rgba(14,165,233,0.22), transparent 60%),
    radial-gradient(circle at 80% 15%, rgba(56,189,248,0.18), transparent 68%);
  opacity: .55;
  mix-blend-mode: normal;
}

[data-theme="light"] .footer-section {
  background:
    linear-gradient(145deg,var(--footer-light-card-bg1),var(--footer-light-card-bg2)) padding-box,
    linear-gradient(145deg,rgba(14,165,233,0.45),rgba(56,189,248,0.25)) border-box;
  border: 1px solid transparent;
  color: var(--footer-light-text);
  box-shadow:
    0 4px 10px -4px rgba(14,165,233,0.28),
    0 0 0 1px rgba(14,165,233,0.25);
}

[data-theme="light"] .footer-section:hover {
  box-shadow:
    0 10px 20px -6px rgba(14,165,233,0.35),
    0 0 0 1px var(--footer-light-card-border-hover);
  border-color: var(--footer-light-card-border-hover);
}

[data-theme="light"] .footer-section::after {
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,0.6),transparent 55%),
    radial-gradient(circle at 80% 85%,rgba(14,165,233,0.25),transparent 65%);
}

[data-theme="light"] .footer-section h5 {
  background: linear-gradient(90deg,#0ea5e9,#38bdf8);
  -webkit-background-clip: text;
  color: var(--footer-light-text-strong);
  @supports (-webkit-background-clip:text) or (background-clip:text) {
    color: transparent;
  }
}

[data-theme="light"] .footer-section ul li { color: var(--footer-light-text); }
[data-theme="light"] .footer-section ul li a {
  color: var(--footer-light-text);
  opacity: .94;
}
[data-theme="light"] .footer-section ul li a:hover {
  color: var(--footer-light-link-hover);
  opacity: 1;
}

[data-theme="light"] .footer-section ul li::before {
  box-shadow: 0 0 0 2px rgba(14,165,233,0.28);
  opacity: .8;
}

[data-theme="light"] .footer-bottom {
  color: var(--footer-light-text-dim);
}
[data-theme="light"] .footer-bottom::before { opacity: .75; }

[data-theme="light"] footer a:focus-visible,
[data-theme="light"] footer button:focus-visible {
  outline-color: #0ea5e9;
}

/* =============== BULLETS APRIMORADOS (LIGHT) =============== */
[data-theme="light"] .footer-section ul li::before {
  background: linear-gradient(135deg,var(--alarm-primary) 10%, var(--alarm-secondary) 90%);
  opacity: .9;
  box-shadow:
    0 0 0 2px rgba(14,165,233,0.28),
    0 1px 2px rgba(14,165,233,0.25);
  transform: scale(.85);
  transition:
    transform .38s cubic-bezier(.4,.8,.25,1),
    box-shadow .38s cubic-bezier(.4,.8,.25,1),
    filter .38s ease,
    opacity .3s ease;
  filter: saturate(.95) brightness(1);
  position: relative;
}

[data-theme="light"] .footer-section ul li::after {
  content:"";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,0.45) 0%, rgba(14,165,233,0) 70%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.4);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.4,.8,.25,1);
}

[data-theme="light"] .footer-section ul li:hover::before {
  transform: scale(1.12);
  box-shadow:
    0 0 0 3px rgba(14,165,233,0.35),
    0 0 0 1px rgba(255,255,255,0.65) inset,
    0 4px 10px -2px rgba(14,165,233,0.45);
  filter: saturate(1.2) brightness(1.08);
  opacity: 1;
}

@keyframes footerBulletPulseLight {
  0% { transform: translate(-50%,-50%) scale(.55); opacity: 0; }
  40% { opacity: .55; }
  70% { transform: translate(-50%,-50%) scale(1.25); opacity: .25; }
  100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; }
}

[data-theme="light"] .footer-section ul li:hover::after {
  width: 26px;
  height: 26px;
  opacity: .55;
  animation: footerBulletPulseLight 1.2s ease-out forwards;
}

/* Foco no link aciona bullet */
[data-theme="light"] .footer-section ul li a:focus-visible {
  color: var(--alarm-primary);
  outline: 2px solid var(--alarm-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

[data-theme="light"] .footer-section ul li:has(a:focus-visible)::before {
  transform: scale(1.15);
  box-shadow:
    0 0 0 3px rgba(14,165,233,0.45),
    0 0 0 1px rgba(255,255,255,0.75) inset,
    0 4px 10px -2px rgba(14,165,233,0.50);
  filter: saturate(1.25) brightness(1.1);
  opacity: 1;
}
[data-theme="light"] .footer-section ul li:has(a:focus-visible)::after {
  width: 30px;
  height: 30px;
  opacity: .70;
  animation: footerBulletPulseLight 1.35s ease-out forwards;
}

/* Prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .footer-section,
  .footer-section::after,
  .footer-section ul li a,
  .footer-section ul li::before {
    transition: none !important;
    animation: none !important;
  }
  [data-theme="light"] .footer-section ul li::after,
  [data-theme="light"] .footer-section ul li:hover::after,
  [data-theme="light"] .footer-section ul li:has(a:focus-visible)::after {
    animation: none !important;
    transition: none !important;
    opacity: 0 !important;
  }
  [data-theme="light"] .footer-section ul li::before {
    transition: box-shadow .25s ease, transform .25s ease;
  }
}

/* Alto contraste */
@media (prefers-contrast: more) {
  footer {
    box-shadow: 0 0 0 3px var(--alarm-primary);
  }
  .footer-section {
    border: 2px solid var(--alarm-primary);
  }
  .footer-section h5::after {
    background: var(--alarm-primary);
  }
  .footer-section ul li a::after {
    background: var(--alarm-primary);
  }
}

/* Responsividade */
@media (max-width: 880px) {
  footer { padding: 2.8rem 1.2rem 1.6rem; }
  .footer-container { gap: 1.75rem 1.25rem; }
  .footer-section { padding: .95rem .9rem 1.05rem; }
  .footer-section h5 { font-size: 1rem; }
}

@media (max-width: 560px) {
  footer {
    border-radius: 18px 18px 0 0;
    padding: 2.4rem .95rem 1.4rem;
  }
  .footer-container {
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 1.35rem .9rem;
  }
  .footer-bottom {
    margin-top: 2.2rem;
    font-size: .9rem;
  }
}

/* === Footer: Forçar 2x2 entre 498px e 798px, e 1 coluna < 498px === */

/* 2 colunas fixas no intervalo solicitado */
@media (max-width: 798px) and (min-width: 498px) {
  .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* Ajuste opcional de gap (descomente se quiser mais compacto)
    gap: 1.6rem 1.4rem;
    */
  }
}

/* 1 coluna empilhada abaixo de 498px */
@media (max-width: 497px) {
  .footer-container {
    grid-template-columns: 1fr !important;
  }
}

[data-theme="dark"] .moon-icon {
  opacity: 0;
  pointer-events: none;
}

[data-theme="dark"] .sun-icon {
  opacity: 1;
}

[data-theme="light"] .lap-row {
  background: #ffffff;
  border: 1px solid #aeb1b5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .lap-row.fastest .lap-icon {
  color: #16a34a;
}

/* ================================================================
   07. LAPS (VOLTA MAIS LENTA / RÁPIDA LIGHT)
   ================================================================ */
[data-theme="light"] .lap-row.slowest {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #b91c1c;
  font-weight: 600;
}

[data-theme="light"] .lap-row.slowest .lap-icon {
  color: #ef4444;
}

[data-theme="light"] .lap-row.slowest .lap-time {
  color: #b91c1c;
}

[data-theme="light"] .lap-number {
  background-color: #cfe2fc;
  color: var(--alarm-primary);
}

[data-theme="light"] .lap-time {
  color: #1e293b;
}

[data-theme="light"] .lap-total {
  color: #383b40;
}

/* --- Volta mais rápida (fastest) --- */
.lap-row.fastest .lap-number {
  background-color: rgba(29, 220, 132, 0.2);
  color: #1ddc84;
}
.lap-row.fastest .lap-total {
  color: #1ddc84;
  opacity: 0.85;
}
[data-theme="light"] .lap-row.fastest .lap-number {
  background-color: rgba(22, 163, 74, 0.15);
  color: #14532d;
}

[data-theme="light"] .lap-row.fastest .lap-time {
  color: #14532d;
}

[data-theme="light"] .lap-row.fastest .lap-total {
  color: #166534;
}

/* Pill número volta */
.lap-number {
  background-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 3ch;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

/* Total volta */
.lap-total {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  font-weight: 500;
}

/* Volta mais lenta dark */
.lap-row.slowest .lap-number {
  background-color: rgba(250, 60, 60, 0.2);
  color: #fa3c3c;
}
.lap-row.slowest .lap-total {
  color: #fa3c3c;
  opacity: 0.85;
}
[data-theme="light"] .lap-row.slowest .lap-number {
  background-color: rgba(239, 68, 68, 0.15);
  color: #991b1b;
}
[data-theme="light"] .lap-row.slowest .lap-total {
  color: #b91c1c;
}

/* ================================================================
   08. MENU RÁPIDO HEADER
   ================================================================ */
.quickmenu-btn {
  background: none;
  border: none;
  padding: 0.2rem;
  margin-left: 0.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  box-shadow: none;
  transition: outline-color 0.2s;
}
.quickmenu-btn svg {
  width: 24px;
  height: 24px;
}
.quickmenu-dropdown {
  display: none;
  position: absolute;
  top: 48px;
  right: 0.5rem;
  background: var(--header-bg, #23272f);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 0.5rem 0.3rem;
  z-index: 1002;
  min-width: 160px;
  flex-direction: column;
  gap: 0.2rem;
}
.quickmenu-dropdown.active {
  display: flex;
}
.quickmenu-dropdown .header-btn {
  width: 100%;
  justify-content: center;
  margin: 0.1rem 0;
  border-radius: 6px;
  background: none;
  border: none;
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  color: inherit;
  transition: background 0.2s;
  outline: none;
  box-shadow: none;
  transition: background 0.2s, outline-color 0.2s;
}
.quickmenu-btn:focus-visible,
.quickmenu-dropdown .header-btn:focus-visible {
  outline: 2px solid var(--alarm-primary);
  outline-offset: 2px;
  box-shadow: none;
}
.quickmenu-btn:focus,
.quickmenu-dropdown .header-btn:focus {
  outline: none;
}
.quickmenu-dropdown .header-btn:hover {
  background: var(--alarm-primary, #0ea5e9);
  color: #fff;
}

/* ================================================================
   09. MENU LATERAL
   ================================================================ */
.side-menu {
  position: fixed;
  top: 80px;
  left: -350px;
  width: 350px;
  height: calc(100vh - 80px);
  background: var(--gradient-dark);
  z-index: 1000;
  transition: var(--transition-medium);
  overflow-y: auto;
  border-right: 2px solid var(--alarm-primary);
  box-shadow: var(--shadow-strong);
}

.side-menu.active {
  left: 0;
}

.side-menu-header {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 212, 255, 0.05);
}

.side-menu-header h3 {
  color: var(--alarm-primary);
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.close-menu {
  background: none;
  border: none;
  color: var(--text-white);
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: var(--transition-fast);
  line-height: 1;
}

.close-menu:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.side-menu-content {
  padding: 1rem;
}

.menu-section {
  margin-bottom: 2rem;
}

.menu-section h4 {
  color: var(--alarm-primary);
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  font-weight: 600;
  border-left: 4px solid var(--alarm-primary);
}

.menu-item {
  display: block;
  color: var(--text-white);
  text-decoration: none;
  padding: 0.75rem 1rem;
  margin: 0.25rem 0;
  border-radius: 8px;
  transition: var(--transition-fast);
  border-left: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  transition: var(--transition-medium);
}

.menu-item:hover::before {
  left: 100%;
}

.menu-item:hover {
  background: rgba(0, 212, 255, 0.15);
  border-left-color: var(--alarm-primary);
  transform: translateX(5px);
}

.menu-item.active {
  background: var(--gradient-primary);
  color: #000;
  font-weight: 600;
  border-left-color: transparent;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-medium);
  backdrop-filter: blur(5px);
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ================================================================
   10. OCULTAR OPÇÕES (MODAL CRONÔMETRO)
   ================================================================ */
.modal-body .config-section:nth-of-type(2) {
  display: none;
}

/* ================================================================
   11. LAYOUT PRINCIPAL CONTAINERS
   ================================================================ */
.main-container {
  display: block;
  gap: 2rem;
  padding: 2rem;
  min-height: calc(100vh - 80px);
  max-width: 800px;
  margin: 0 auto;
}

.clock-container,
.stopwatch-container {
  background: var(--gradient-dark);
  border-radius: 20px;
  padding: 3rem;
  border: 1px solid rgba(0, 212, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.clock-container::before,
.stopwatch-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-primary);
}

/* ================================================================
   12. DISPLAY RELÓGIO E CRONÔMETRO
   ================================================================ */
.current-datetime {
  text-align: center;
  margin-bottom: 3rem;
}

.current-date {
  color: var(--alarm-primary);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}


.clock-display,
.stopwatch-time {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 20px;
  padding: 2.5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 3px solid var(--alarm-primary);
  box-shadow: var(--shadow-glow), inset 0 0 20px rgba(0, 0, 0, 0.5);
  max-width: 650px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.stopwatch-time {
  background-attachment: fixed;
}

.clock-display::before,
.stopwatch-time::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.time-digits {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hours,
.minutes,
.seconds {
  font-size: 4.5rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow:
    0 0 20px rgba(0, 212, 255, 0.8),
    0 0 40px rgba(0, 212, 255, 0.4),
    2px 2px 4px rgba(0, 0, 0, 0.8);
  font-family: var(--font-mono);
  min-width: 2.5ch;
  text-align: center;
  position: relative;
}

.separator {
  font-size: 3.5rem;
  color: #ffffff;
  font-weight: 300;
  animation: blinkSeparator 1s infinite;
  text-shadow:
    0 0 15px rgba(0, 212, 255, 1),
    0 0 30px rgba(0, 212, 255, 0.5);
}

.period {
  font-size: 1.8rem;
  color: #ffffff;
  font-weight: 600;
  margin-left: 0.5rem;
  text-shadow:
    0 0 10px rgba(0, 212, 255, 0.8),
    2px 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes blinkSeparator {
  0%, 50% {
    opacity: 1;
    color: #ffffff;
    text-shadow:
      0 0 15px rgba(0, 212, 255, 1),
      0 0 30px rgba(0, 212, 255, 0.5);
  }
  51%, 100% {
    opacity: 0.4;
    color: var(--alarm-primary);
    text-shadow:
      0 0 10px rgba(0, 212, 255, 0.6);
  }
}

.stopwatch-time {
  font-family: 'Consolas', 'Roboto Mono', monospace;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  transition: none;
  min-width: 9ch;
  margin-bottom: 1.3rem;
}
/* ================================================================
   13. CONFIGURAÇÃO DO ALARME (PARTE 2/5 CONSOLIDADO)
   ================================================================ */

/* 1) Sinaliza esquema de cores para o controle nativo */
[data-theme="light"] .time-input { color-scheme: light; }
[data-theme="dark"]  .time-input { color-scheme: dark; }

/* 2) Variáveis base (tema claro) no :root */
:root {
  --picker-bg: rgba(0, 0, 0, 0.08);
  --picker-bg-hover: rgba(0, 0, 0, 0.18);
  --picker-icon-filter: none;     /* sem filtro no claro */
  --picker-icon-color: #111;      /* alguns navegadores usam 'color' no glyph */
}

/* 3) Overrides para tema escuro (fundo mais escuro; ícone branco) */
:root[data-theme="dark"],
[data-theme="dark"] {
  --picker-bg: rgba(73, 72, 72, 0.80);   /* ajuste principal (mais escuro) */
  --picker-bg-hover: rgba(28, 28, 28, 0.92);
  --picker-icon-filter: none;            /* não tentar inverter no dark */
  --picker-icon-color: #fff;             /* tentar forçar ícone claro onde suportado */
}

.alarm-setup {
  margin: 3rem 0;
}

.setup-title {
  color: var(--text-white);
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.time-selection {
  margin-bottom: 2rem;
}

.time-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(5px);
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.input-container label {
  color: var(--alarm-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.time-input {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--alarm-primary);
  color: var(--text-white);
  -webkit-text-fill-color: var(--text-white); /* iOS Safari */
  padding: 1.2rem 1.5rem;
  border-radius: 12px;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-mono);
  min-width: 200px;
}

.time-input:focus {
  outline: none;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  border-color: var(--text-white);
  transform: scale(1.05);
}

/* 4) Indicador do seletor (ícone) usando as variáveis do tema */
.time-input::-webkit-calendar-picker-indicator {
  background-color: var(--picker-bg);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;

  /* Vários motores respeitam filter; outros usam a cor do glyph */
  filter: var(--picker-icon-filter);
  -webkit-filter: var(--picker-icon-filter);
  color: var(--picker-icon-color);

  opacity: 0.98;
  transition:
    background-color var(--transition-fast, .15s) ease,
    transform var(--transition-fast, .15s) ease,
    opacity var(--transition-fast, .15s) ease,
    filter var(--transition-fast, .15s) ease;
}

/* 5) Hover/focus no desktop */
@media (hover: hover) and (pointer: fine) {
  .time-input:hover::-webkit-calendar-picker-indicator,
  .time-input:focus-visible::-webkit-calendar-picker-indicator {
    background-color: var(--picker-bg-hover);
    opacity: 1;
    transform: scale(1.06);
    filter: var(--picker-icon-filter);
    -webkit-filter: var(--picker-icon-filter);
    color: var(--picker-icon-color);
    box-shadow: 0 0 0 2px rgba(14,165,233,0.25);
  }
}

.time-input::-moz-focus-inner {
  border: 0;
}

.time-input-modern {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Ajustes WebKit para visibilidade dos dígitos */
.time-input::-webkit-datetime-edit,
.time-input::-webkit-datetime-edit-text,
.time-input::-webkit-datetime-edit-hour-field,
.time-input::-webkit-datetime-edit-minute-field,
.time-input::-webkit-datetime-edit-second-field,
.time-input::-webkit-datetime-edit-ampm-field {
  color: var(--text-white);
  background: transparent;
}
.time-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.time-input::-webkit-date-and-time-value { text-align: center; }
.time-input::-webkit-inner-spin-button { display: none; }

/* Overlay do placeholder fantasma */
.input-shell {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: max-content;
}
.input-shell > .time-input,
.input-shell > .ghost-placeholder {
  grid-area: 1 / 1; /* sobrepostos */
}
.ghost-placeholder {
  color: var(--text-gray, #b0b0b0);
  opacity: .7;
  pointer-events: none;
  z-index: 1;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
/* input por baixo (clicável) */
.time-input { z-index: 0; }

/* Esconde o ghost ao focar ou quando houver valor (required => :valid) */
.time-input:focus + .ghost-placeholder,
.time-input:valid + .ghost-placeholder {
  opacity: 0;
  visibility: hidden;
  transform: scale(.98);
}

/* Desktop: usar o placeholder nativo; esconder o ghost */
@media (hover: hover) and (pointer: fine) {
  .input-shell .ghost-placeholder {
    display: none !important;
  }
}

/* 6) Garantia: se existir botão custom antigo, esconda */
.time-picker-btn { display: none !important; }

/* ================================================================
   PATCH — Ghost placeholder (00:00) no mobile com o mesmo tamanho do input
   Colar no FINAL do seu CSS
   ================================================================ */

/* Use variáveis compartilhadas no wrapper para sincronizar tamanhos */
.input-shell {
  --ti-font-size: 2rem; /* ajuste se quiser maior/menor */
  --ti-font-weight: 600;
  --ti-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
}

/* Garante que o input use as mesmas variáveis (sem alterar seu estilo atual) */
.input-shell > .time-input {
  font-size: var(--ti-font-size) !important;
  font-weight: var(--ti-font-weight) !important;
  font-family: var(--ti-font-family) !important;
}

/* Faz o ghost-placeholder ter exatamente o mesmo tamanho e tipografia do input */
.input-shell > .ghost-placeholder {
  font-size: var(--ti-font-size) !important;
  font-weight: var(--ti-font-weight) !important;
  font-family: var(--ti-font-family) !important;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;

  /* Centraliza e ocupa a mesma área visual do input */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Opcional: dar um pequeno “bump” de tamanho especificamente em telas touch */
@media (hover: none) and (pointer: coarse) {
  .input-shell { --ti-font-size: 2.1rem; } /* aumente/diminua conforme desejar */
}
/* ================================================================
   14. CONFIGURAÇÕES AVANÇADAS
   ================================================================ */
.advanced-settings {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 2rem 0;
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.setting-group {
  margin-bottom: 1.5rem;
  width: 100%;
}

.setting-group:last-child {
  margin-bottom: 0;
}

.setting-group label {
  display: block;
  color: var(--alarm-primary);
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.sound-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.advanced-settings .sound-select {
  flex: 1 1 auto;
  min-width: 0;
}

.sound-select,
.alarm-name-input {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(0, 212, 255, 0.3);
  color: var(--text-white);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  flex: 1;
  transition: var(--transition-fast);
  font-size: 0.95rem;
}

.sound-select:focus,
.alarm-name-input:focus {
  outline: none;
  border-color: var(--alarm-primary);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
  background: rgba(0, 0, 0, 0.6);
}

.sound-select option {
  background: var(--bg-dark);
  color: var(--text-white);
  padding: 0.5rem;
}

.preview-btn {
  background: var(--alarm-primary);
  border: none;
  color: #000;
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  flex: 0 0 auto;
}

.preview-btn:hover,
#addCustomSound:hover {
  background: var(--alarm-primary);
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
  transform: scale(1.08);
}

.preview-btn:active {
  transform: scale(1.05);
  animation: pulse-play 0.3s ease;
}

@keyframes pulse-play {
  0% { transform: scale(1.05); }
  50% { transform: scale(1.15); box-shadow: 0 0 20px rgba(0, 212, 255, 0.8); }
  100% { transform: scale(1.05); }
}

.volume-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.volume-slider {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  outline: none;
  cursor: pointer;
  appearance: none;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--alarm-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 2px 10px rgba(0, 212, 255, 0.3);
}

.volume-slider::-webkit-slider-thumb:hover {
  background: var(--text-white);
  transform: scale(1.2);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--alarm-primary);
  cursor: pointer;
  border: none;
  transition: var(--transition-fast);
}

.volume-value {
  color: var(--alarm-primary);
  font-weight: 600;
  min-width: 45px;
  text-align: center;
  font-family: var(--font-mono);
}

.optional-setting {
  opacity: 0.8;
  transition: var(--transition-fast);
}

.optional-setting:hover {
  opacity: 1;
}

.alarm-name-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Oculta controle específico */
.config-item:has(#defaultVolumeConfig) {
  display: none !important;
}
/* ================================================================
   15. BOTÃO PRINCIPAL (SET ALARM) – COM FIX DO "QUADRADO AZUL"
   ================================================================ */
.set-alarm-btn {
  background: var(--gradient-primary);
  border: none;
  color: #000;
  padding: 1.5rem 3rem;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition:
    box-shadow var(--transition-medium),
    transform var(--transition-medium),
    background 0.3s,
    color 0.3s;

  /* Remove destaque azul em mobile e reseta estilo nativo */
  -webkit-tap-highlight-color: transparent; /* iOS/Android */
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box; /* evita bleed do foco no Safari */
}

.set-alarm-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: var(--transition-medium);
}

.set-alarm-btn:hover::before {
  left: 100%;
}

.set-alarm-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-strong);
}

.set-alarm-btn:active {
  transform: translateY(-1px) scale(1.02);
}

/* Remove borda interna padrão do Firefox */
.set-alarm-btn::-moz-focus-inner {
  border: 0;
}

/* Firefox: remove outline pontilhado legado quando há foco via teclado */
.set-alarm-btn:-moz-focusring {
  outline: none;
}

/* Remove outline padrão e aplica anel de foco acessível apenas quando navegado por teclado */
.set-alarm-btn:focus { outline: none; }
.set-alarm-btn:focus-visible {
  outline: none;
  /* anel de foco visível e consistente, sem “quadrado azul” */
  box-shadow:
    0 0 0 3px rgba(14,165,233,0.35),
    var(--shadow-strong);
}

.btn-icon {
  transition: var(--transition-fast);
}

.set-alarm-btn:hover .btn-icon {
  transform: rotate(360deg);
}

.set-alarm-btn.pulse {
  animation: pulse 0.5s ease;
}

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

.set-alarm-btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.set-alarm-btn.success {
  background: var(--alarm-success);
}

.set-alarm-btn.error {
  background: var(--alarm-danger);
  color: var(--text-white);
}
/* ================================================================
   16. ALARMES ATIVOS
   ================================================================ */
.active-alarms {
  margin-top: 3rem;
}

.alarms-title {
  color: var(--text-white);
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.alarms-list {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid rgba(0, 212, 255, 0.4);
  backdrop-filter: blur(5px);
}

.no-alarms {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  padding: 2rem;
  font-size: 1.1rem;
}

[data-theme="light"] .no-alarms{
  color:var(--alarm-primary);
}

.alarm-limit-indicator {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--alarm-primary);
  backdrop-filter: blur(5px);
}

.alarm-limit-indicator.limit-reached {
  border-left-color: var(--alarm-danger);
  background: rgba(255, 71, 87, 0.1);
}

.alarm-limit-indicator .limit-info {
  color: var(--text-white);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.alarm-limit-indicator .limit-warning {
  color: var(--alarm-warning);
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.9;
}

.alarm-limit-indicator.limit-reached .limit-info {
  color: var(--alarm-danger);
}

.alarm-item {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 212, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: var(--transition-fast);
  backdrop-filter: blur(5px);
}

.alarm-item:last-child {
  margin-bottom: 0;
}

.alarm-item:hover {
  border-color: var(--alarm-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.alarm-time {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--alarm-primary);
}

.alarm-name {
  color: var(--text-white);
  opacity: 0.8;
  font-size: 0.9rem;
}

.alarm-status {
  color: var(--alarm-success);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alarm-countdown {
  margin: 0;
  padding: 1rem 1.5rem;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  min-height: 50px;
  max-width: 230px;
  flex: 1;
  box-sizing: border-box;
  justify-self: center;
  margin: 0 auto;
}

.alarm-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.toggle-alarm,
.delete-alarm {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--text-white);
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 40px;
  max-height: 40px;
}

.toggle-alarm:hover {
  background: var(--alarm-primary);
  color: #000;
  transform: scale(1.05);
  border-color: var(--alarm-primary);
}

.delete-alarm:hover {
  background: var(--alarm-danger);
  color: #000;
  transform: scale(1.05);
  border-color: var(--alarm-danger);
}

.alarm-control-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--text-white);
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  min-height: 35px;
}

.alarm-control-btn:hover {
  background: var(--alarm-primary);
  color: #000;
  transform: scale(1.1);
}

.alarm-control-btn.delete:hover {
  background: var(--alarm-danger);
  color: var(--text-white);
}

.alarm-control-btn.snooze:hover {
  background: var(--alarm-warning);
  color: #000;
}

/* ================================================================
   17. COUNTDOWN E PROGRESS BAR
   ================================================================ */
.countdown-info {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.countdown-icon {
  color: var(--alarm-primary);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.countdown-text {
  font-weight: 600;
  color: var(--text-white);
  font-size: 1rem;
  font-family: var(--font-mono);
  flex-grow: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

.countdown-progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  min-width: 100px;
  max-width: 160px;
  flex-shrink: 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--alarm-success) 0%, var(--alarm-primary) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}

.progress-percentage {
  font-size: 0.9rem;
  color: var(--text-gray);
  font-weight: 600;
  min-width: 40px;
  max-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.alarm-countdown.warning {
  background-color: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #b48b00;
}

.alarm-countdown.critical {
  background-color: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #a72230;
}

[data-theme="light"] .alarm-countdown.warning {
  border: 1px solid rgba(255, 193, 7, 0.6);
}

[data-theme="light"] .alarm-countdown.critical {
  border: 1px solid rgba(220, 53, 69, 0.6);
}

[data-theme="light"] .alarm-countdown {
  border: 1px solid rgba(0, 212, 255, 0.6);
}

.alarm-item.countdown-safe .countdown-text { color: var(--alarm-success); }
.alarm-item.countdown-safe .progress-fill { background: linear-gradient(90deg, var(--alarm-success) 0%, var(--alarm-primary) 100%); }
.alarm-item.countdown-warning .countdown-text { color: var(--alarm-warning); }
.alarm-item.countdown-warning .progress-fill { background: linear-gradient(90deg, var(--alarm-warning) 0%, var(--alarm-accent) 100%); }
.alarm-item.countdown-critical .countdown-text { color: var(--alarm-danger); animation: pulse 1s infinite; }
.alarm-item.countdown-critical .progress-fill { background: linear-gradient(90deg, var(--alarm-danger) 0%, #ff8c42 100%); animation: pulse-bar 1s infinite; }
.alarm-item.countdown-critical .alarm-countdown { border-color: var(--alarm-danger); background: rgba(255, 71, 87, 0.1); }

@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* ================================================================
   18. ANIMAÇÕES E ESTADOS ESPECIAIS
   ================================================================ */
.clock-display.alarm-active { animation: clockGlow 2s infinite; }
.alarm-item.ringing {
  animation: alarmPulse 1s infinite;
  border-color: var(--alarm-danger);
  background: rgba(255, 87, 87, 0.1);
  position: relative;
}
.alarm-item.snoozing {
  animation: snoozePulse 2s infinite;
  border-color: var(--alarm-warning);
  background: rgba(255, 170, 0, 0.1);
  position: relative;
}

.alarm-item.ringing .alarm-info,
.alarm-item.ringing .alarm-countdown,
.alarm-item.ringing .alarm-controls,
.alarm-item.snoozing .alarm-info,
.alarm-item.snoozing .alarm-countdown,
.alarm-item.snoozing .alarm-controls {
  display: none;
}

.alarm-active-controls {
  display: none;
  position: static;
  gap: 10px;
  z-index: 10;
  margin: 0;
  padding: 0;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
  box-sizing: border-box;
}

.alarm-item.ringing .alarm-active-controls { display: flex; }

.alarm-active-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.snooze-btn {
  background: var(--alarm-warning);
  color: white;
  border: 1px solid #cc8800;
}
.snooze-btn:hover {
  background: #ff6600;
  transform: translateY(-1px);
  border: 1px solid #ff6600;
  color: white;
}
.stop-btn {
  background: var(--alarm-danger);
  color: white;
}
.stop-btn:hover {
  background: #cc0000;
  transform: translateY(-1px);
}

.alarm-triggering-status {
  display: none;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  background: var(--alarm-danger);
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  animation: statusPulse 0.8s infinite alternate;
  z-index: 10;
}

.alarm-item.ringing .alarm-triggering-status { display: block; }

.alarm-snooze-interface { display: none; width: 100%; padding: 15px 20px; }
.alarm-item.snoozing .alarm-snooze-interface { display: block; }

.snooze-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.snooze-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.snooze-icon {
  font-size: 20px;
  animation: sleepBounce 2s infinite;
}
.snooze-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alarm-warning);
  margin-bottom: 2px;
}
.snooze-original {
  font-size: 12px;
  color: var(--text-gray);
}
.snooze-countdown {
  display: flex;
  align-items: center;
  gap: 0px;
}
.snooze-time {
  font-size: 16px;
  font-weight: bold;
  color: var(--alarm-warning);
  min-width: 50px;
}
.snooze-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.snooze-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 170, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}
.snooze-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--alarm-warning), #ffc107);
  border-radius: 4px;
  transition: width 1s ease;
}
.snooze-percentage {
  font-size: 12px;
  color: var(--text-gray);
  min-width: 35px;
}

.cancel-snooze-btn {
  padding: 6px 12px;
  background: rgba(255, 87, 87, 0.8);
  border: 1px solid var(--alarm-danger);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(255, 87, 87, 0.3);
}

.cancel-snooze-btn:hover {
  background: #cc0000;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.6);
  border-color: #cc0000;
}

@keyframes clockGlow {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: 0 0 50px rgba(0, 212, 255, 0.6); }
}
@keyframes alarmPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes snoozePulse {
  0%, 100% { border-color: var(--alarm-warning); box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.7); }
  50% { border-color: #ffc107; box-shadow: 0 0 0 10px rgba(255, 170, 0, 0); }
}
@keyframes sleepBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  60% { transform: translateY(-3px); }
}
@keyframes statusPulse {
  from { opacity: 1; transform: translateY(-50%) scale(1); }
  to { opacity: 0.7; transform: translateY(-50%) scale(1.05); }
}

/* ================================================================
   19. MODAIS, TOASTS E ELEMENTOS DE UI
   ================================================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
}
.modal-overlay.active { display: flex; }

.modal-content {
  background: var(--gradient-dark);
  border-radius: 20px;
  border: 2px solid var(--alarm-primary);
  box-shadow: var(--shadow-strong);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--alarm-primary) rgba(255, 255, 255, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.modal-header h3 {
  color: var(--alarm-primary);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: var(--transition-fast);
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--alarm-primary);
}

.config-section { margin-bottom: 2rem; }
.config-section h4 {
  color: var(--alarm-primary);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.config-item { margin-bottom: 1.5rem; }
.config-item label {
  color: var(--text-white);
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}
.config-label {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.config-item select,
.config-item input[type="range"] {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--alarm-primary);
  color: var(--text-white);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
  transition: var(--transition-fast);
}
.config-item select:focus {
  outline: none;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
  border-color: var(--text-white);
}
.config-item select option {
  background: var(--bg-dark);
  color: var(--text-white);
  padding: 0.5rem;
}
.config-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--alarm-primary);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(0, 212, 255, 0.3);
}

/* Oculta item (mostrar voltas) */
.config-item:has(#showLapsConfig) {
  display: none;
}

.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 100px;
  position: relative;
  overflow: hidden;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.btn:not(:disabled):active { transform: translateY(0); }
.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
  border: 1px solid var(--alarm-primary);
}
.btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, #00b8e6 0%, #0088bb 100%);
  box-shadow: 0 6px 25px rgba(0, 212, 255, 0.4);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}
.btn-secondary:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--gradient-dark);
  border: 2px solid var(--alarm-primary);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  color: var(--text-white);
  font-weight: 600;
  z-index: 2000;
  transform: translateX(calc(100% + 2rem));
  transition: transform 0.3s ease;
  box-shadow: var(--shadow-strong);
  opacity: 0;
  visibility: hidden;
}
.toast.show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.toast.success { border-color: var(--alarm-success); }
.toast.warning { border-color: var(--alarm-warning); }
.toast.error { border-color: var(--alarm-danger); }

/* ================================================================
   20. CRONÔMETRO (STOPWATCH)
   ================================================================ */
.stopwatch-panel {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.7rem;
  width: 100%;
  margin-top: 3rem;
}

.stopwatch-btn {
  font-size: 2rem;
  padding: 1.1rem 2.2rem;
  min-height: 56px;
  max-height: 56px;
  height: 56px;
  border-radius: 14px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btnStartPause.stopwatch-btn.btn-primary {
  background: var(--alarm-secondary);
  color: #fff;
}
#btnStartPause.stopwatch-btn.btn-primary:hover:not(:disabled),
#btnStartPause.stopwatch-btn.btn-primary:focus-visible {
  background: #00eafd;
  color: #ffffff;
  transform: translateY(-2px) scale(1.07);
}
#btnLap.stopwatch-btn.btn-accent {
  background: var(--alarm-secondary);
  color: #fff;
}
#btnLap.stopwatch-btn.btn-accent:hover:not(:disabled),
#btnLap.stopwatch-btn.btn-accent:focus-visible {
  background: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px) scale(1.07);
}
#btnStop.stopwatch-btn.btn-secondary {
  background: #ff4757;
  color: #fff;
}
#btnStop.stopwatch-btn.btn-secondary:hover:not(:disabled),
#btnStop.stopwatch-btn.btn-secondary:focus-visible {
  background: #e85873;
  color: #ffffff;
  transform: translateY(-2px) scale(1.07);
}
#btnReset.stopwatch-btn.btn-secondary {
  background: var(--alarm-secondary);
  color: #fff;
}
#btnReset.stopwatch-btn.btn-secondary:hover:not(:disabled),
#btnReset.stopwatch-btn.btn-secondary:focus-visible {
  background: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px) scale(1.07);
}

.stopwatch-btn:disabled {
  opacity: 0.54;
  filter: grayscale(0.4);
  cursor: not-allowed;
  box-shadow: none;
  background: var(--text-gray);
  color: #555 !important;
  transform: none;
}
.stopwatch-btn:focus-visible {
  outline: 2.5px solid var(--alarm-primary);
  outline-offset: 3px;
}
.stopwatch-btn .btn-icon,
.stopwatch-btn span {
  font-size: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#btnStop .btn-icon svg {
  width: 48px !important;
  height: 48px !important;
  display: block;
  margin: 0 auto;
}

#soundControls {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: inherit;
  flex-wrap: wrap;
}

#soundControls label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
  color: var(--alarm-primary);
}

#toggleSounds {
  accent-color: var(--alarm-primary);
  width: 1.2em;
  height: 1.2em;
}

.sound-volume-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#soundVolume {
  width: 120px;
  height: 28px;
  background: transparent;
  border: none;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.5em;
  box-sizing: border-box;
}

#soundVolume::-webkit-slider-runnable-track {
  height: 12px;
  background: rgba(0,212,255,0.12);
  border-radius: 6px;
}
#soundVolume::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--alarm-primary);
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
  transition: box-shadow 0.2s;
  cursor: pointer;
  margin-top: -3px;
}
#soundVolume:hover::-webkit-slider-thumb,
#soundVolume:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.18), 0 2px 8px rgba(0,212,255,0.3);
}
#soundVolume::-moz-range-track {
  height: 12px;
  background: rgba(0,212,255,0.12);
  border-radius: 6px;
}
#soundVolume::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--alarm-primary);
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
  transition: box-shadow 0.2s;
  cursor: pointer;
}
#soundVolume:hover::-moz-range-thumb,
#soundVolume:focus::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.18), 0 2px 8px rgba(0,212,255,0.3);
}

#volumePercent {
  font-weight: bold;
  color: var(--alarm-primary);
  font-size: 1.1rem;
  min-width: 38px;
  text-align: right;
  letter-spacing: 1px;
  margin-left: 0.5em;
  user-select: none;
}

/* ================================================================
   21. VOLTAS DO CRONÔMETRO (LAPS)
   ================================================================ */
.stopwatch-laps-area {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.stopwatch-laps-card {
  background: rgba(20, 20, 20, 0.95);
  border-radius: 20px;
  padding: 2rem 2.2rem;
  max-width: 450px;
  width: 100%;
  box-shadow: 0 0 18px 4px #111, 0 0 0 2px var(--alarm-primary);
  backdrop-filter: blur(8px);
  margin: 0 auto;
}

.stopwatch-no-laps {
  color: #aaa;
  font-size: 1.2rem;
  font-style: italic;
  text-align: center;
  margin-bottom: 1.2rem;
}

#lapsList {
  margin-top: 0.5rem;
  width: 100%;
}

.lap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(40,40,55,0.7);
  border-radius: 14px;
  margin-bottom: 0.65rem;
  padding: 1.1rem 1.4rem;
  font-family: 'Roboto Mono', 'Consolas', monospace;
  font-size: 1.3rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  border: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  min-height: 2.8rem;
  position: relative;
  gap: 1rem;
}

.lap-row.fastest {
  border-color: #1ddc84;
  background: rgba(29,220,132,0.13);
}
.lap-row.slowest {
  border-color: #fa3c3c;
  background: rgba(250,60,60,0.13);
}

.lap-number {
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-size: 0.9rem;
  padding-right: 0.3rem 0.7rem;
  min-width: 3ch;
  text-align: center;
  border-radius: 9999px;
  transition: background-color 0.2s, color 0.2s;
}
.lap-time {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  min-width: 7ch;
  text-align: right;
  letter-spacing: 1px;
}
.lap-total {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  min-width: 7ch;
  text-align: right;
  opacity: 0.8;
  font-weight: 500;
}

.lap-badge {
  font-size: 1.1rem;
  font-weight: bold;
  margin-left: 1rem;
  padding: 0.2rem 0.7rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.09);
  color: #1ddc84;
  box-shadow: 0 1px 6px rgba(29,220,132,0.18);
  letter-spacing: 1px;
}
.lap-row.slowest .lap-badge {
  color: #fa3c3c;
  box-shadow: 0 1px 6px rgba(250,60,60,0.18);
}

#shareLapsBtn {
  display: block;
  width: fit-content;
  margin: 2.5rem auto 0 auto;
  padding: 0.75em 1.5em;
  font-size: 1.1rem;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(90deg, #2979ff 0%, #00c853 100%);
  border: none;
  border-radius: 32px;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  outline: none;
  margin-top: 2.5rem;
}

#shareLapsBtn:hover,
#shareLapsBtn:focus {
  background: linear-gradient(90deg, #1565c0 0%, #009624 100%);
  box-shadow: 0 4px 16px rgba(44, 62, 80, 0.12);
  transform: translateY(-2px) scale(1.03);
}
#shareLapsBtn:active {
  background: linear-gradient(90deg, #2979ff 0%, #00c853 100%);
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07);
  transform: scale(0.98);
}

.laps-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) scale(0.98);
  color: #fff;
  padding: 1em 2em;
  border-radius: 32px;
  font-size: 1.1rem;
  box-shadow: 0 4px 24px rgba(44,62,80,0.21);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.2s;
  z-index: 9999;
}
.laps-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.laps-toast.success {
  background: #058e17;
  color: #fff;
}
.laps-toast.error {
  background: #d32f2f;
  color: #fff;
}

/* ================================================================
   22. NOTIFICAÇÃO PERSONALIZADA
   ================================================================ */
.notification-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -100px);
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s;
  max-width: 90%;
}
.notification-container.show {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}
.notification-container.success { border-left: 5px solid var(--alarm-success); }
.notification-container.error { border-left: 5px solid var(--alarm-danger); }
.notification-icon { font-size: 1.5rem; }
.notification-message { margin: 0; font-weight: 500; }

[data-theme="light"] .notification-container {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--border-medium);
  color: var(--text-black);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ================================================================
   23. CONTADOR DE EVENTOS (COUNTDOWN) – BASE
   ================================================================ */
/* Fireworks overlay */
#fireworks-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Override main-container (nesta página) */
.main-container {
  max-width: 800px;
  margin: 1rem auto;
  padding: 1rem;
}

.form-section {
  background-color: #1a1a2e;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}
.section-title {
  font-size: 1.5rem;
  color: #e4e4e7;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(0, 212, 255, 0.7);
}

/* Itens lista */
.countdown-item {
  background-color: #1a1a2e;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.item-info { text-align: center; }
.item-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ffffff;
}
.item-date {
  font-size: 0.9rem;
  color: #a1a1aa;
}
.item-display {
  display: flex;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.item-display div {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  min-width: 80px;
  font-size: 0.8rem;
  color: #a1a1aa;
}
.item-display span {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
}
.item-controls { text-align: right; }
.btn-delete {
  background: none;
  border: none;
  color: #ff4d4d;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-delete:hover { text-decoration: underline; }

/* ================================================================
   24. COUNTDOWN FORM (FORMULÁRIO / LISTAGEM AVANÇADA)
   ================================================================ */
#countdown-form-container {
  position: relative;
  border-radius: 16px;
  background: var(--gradient-dark);
  /*
  background:
    linear-gradient(90deg,#06b6d4) 0 0 / 100% 2px no-repeat,
    var(--bg-card, #ffffff);*/
  padding: 1rem 2.5rem;
  box-shadow: var(--shadow-medium, 0 4px 18px -4px rgba(0,0,0,.12));
  max-width: 600px;
  margin: 2rem auto;
  transition: all var(--transition-medium, .3s ease);
  border: 1px solid rgba(0, 212, 255, 0.4);
}

[data-theme="dark"] #countdown-form-container {
  /* altura da faixa no topo */
  --dc-top-accent-height: 2px;

  /* mantém o fundo escuro e adiciona a camada do accent no topo */
  background:
    var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
    var(--gradient-dark);
}

.main-title {
  font-family: var(--font-primary);
  color: var(--text-white);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  transition: color var(--transition-medium);
}
[data-theme="light"] .main-title{
  color: var(--alarm-primary); 
}

[data-theme="light"] #countdown-form-container {
  border: 1px solid rgba(0, 212, 255, 0.6);
  --dc-top-accent-height: 2px;
  background:
    var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
    var(--bg-card, #ffffff);
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: var(--shadow-soft, 0 6px 20px -8px rgba(0,0,0,.12));
}



[data-theme="light"] .input-field{
    border: 1px solid rgba(0, 212, 255, 0.4);

}


.input-group { margin-bottom: 1.5rem; }
.input-group label {
  display: block;
  color: var(--text-gray);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  transition: color var(--transition-medium);
}

.input-field {
  width: 100%;
  background-color: var(--bg-dark);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--text-white);
  transition: all var(--transition-fast);
  outline: none;
  border: 1px solid rgba(0, 212, 255, 0.2);
}
.input-field::placeholder {
  color: var(--text-gray);
  opacity: 0.7;
}

#add-countdown-btn {
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1rem;
  background: var(--gradient-primary);
  background-size: 200% auto;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, background-position 0.4s ease;
}
#add-countdown-btn:hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}
#add-countdown-btn:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.preset-events {
  text-align: center;
  margin: 2rem auto;
  padding-top: 2rem;
  max-width: 600px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--transition-medium);
}
.preset-events p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--text-gray);
  font-weight: 500;
}

.btn-preset {
  background: transparent;
  border: 2px solid var(--alarm-secondary);
  color: var(--alarm-secondary);
  padding: 0.5rem 1.25rem;
  margin: 0.25rem 0.5rem;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  transition: all var(--transition-medium);
}
.btn-preset:hover {
  background: var(--alarm-secondary);
  color: var(--bg-dark);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 153, 204, 0.2);
}
.btn-preset:active {
  transform: translateY(-1px) scale(1);
  box-shadow: none;
}

#countdown-list-container {
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.4);
  backdrop-filter: blur(5px);
  margin-top: 2rem;
}

/* Layout avançado (grid) */
.countdown-item {
  display: grid;
  grid-template-columns: 1.5fr 2fr auto;
  align-items: center;
  gap: 1.5rem;
  background: transparent;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 212, 255, 0.4);
  transition: all var(--transition-medium);
}
.countdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.2);
}
.item-title {
  color: var(--text-white);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}
.item-date {
  color: var(--text-gray);
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0;
}

.item-display {
  display: flex;
  gap: 1rem;
  justify-content: center;
  text-align: center;
}
.item-display > div {
  color: var(--text-gray);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.item-display span {
  display: block;
  color: var(--alarm-primary);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  font-family: var(--font-mono);
  text-shadow: none;
}

/* Controles – botões */
.btn-delete {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.btn-delete svg {
  stroke: white;
  transition: all var(--transition-fast);
}
.btn-delete:hover {
  background: rgba(255, 71, 87, 0.1);
  border-color: var(--alarm-danger);
}

/* Estado celebrando */
.countdown-item.celebrating .btn-delete {
  background: rgba(0, 212, 255, 0.15);
  border-color: var(--alarm-primary);
}
.countdown-item.celebrating .btn-delete svg {
  fill: var(--text-white);
  stroke: var(--text-white);
}
.countdown-item.celebrating .btn-delete:hover {
  background: var(--alarm-primary);
  border-color: var(--alarm-primary);
}

/* Controles agrupados */
.item-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1rem;
}
.item-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: #ffffff;
}
[data-theme="light"] .item-controls button{
  color:#000;
}

.item-controls .btn-share:hover {
  background-color: #e67e22;
  border-color: #e67e22;
  color: #ffffff;
  transform: scale(1.05);
}
.item-controls .btn-delete:hover {
  background-color: #c0392b;
  border-color: #c0392b;
  color: #ffffff;
  transform: scale(1.05);
}

.item-controls .btn-delete svg,
.item-controls .btn-delete svg * {
  stroke: currentColor !important;
}

/* Duplicata intencional (redeclara notificação) */
.notification-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -100px);
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s;
  max-width: 90%;
}
.notification-container.show {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}
.notification-container.success { border-left: 5px solid var(--alarm-success); }
.notification-container.error { border-left: 5px solid var(--alarm-danger); }
.notification-icon { font-size: 1.5rem; }
.notification-message { margin: 0; font-weight: 500; }

/* ================================================================
   25. COUNTDOWN ANIMAÇÕES E ESTADOS ESPECIAIS
   ================================================================ */
@keyframes celebration-glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 165, 0, 0.8);
    border-color: rgba(255, 215, 0, 1);
    background-color: rgba(255, 215, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.7);
  }
}

@keyframes countdown-pulse {
  0% { transform: scale(1); color: var(--alarm-primary); }
  50% { transform: scale(1.25); color: #ef4444; }
  100% { transform: scale(1); color: var(--alarm-primary); }
}

.countdown-pulse {
  animation: countdown-pulse 0.6s infinite;
  font-weight: bold;
}

.countdown-item.celebrating {
  animation: celebration-glow 1.5s infinite ease-in-out;
}

/* Tema claro animação alternativa */
@keyframes celebration-glow-light {
  0% {
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.4), 0 0 22px rgba(111, 66, 193, 0.3);
    border-color: rgba(0, 123, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 28px rgba(0, 123, 255, 0.8), 0 0 45px rgba(111, 66, 193, 0.6);
    border-color: rgba(0, 123, 255, 1);
    background-color: rgba(0, 123, 255, 0.08);
  }
  100% {
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.4), 0 0 22px rgba(111, 66, 193, 0.3);
    border-color: rgba(0, 123, 255, 0.6);
  }
}

[data-theme="light"] .countdown-item.celebrating {
  animation-name: celebration-glow-light;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.countdown-highlight {
  font-size: 6rem;
  font-family: var(--font-primary);
  font-weight: bold;
  text-align: center;
  background: var(--gradient-primary);
  color: var(--text-white);
  box-shadow: var(--shadow-glow), var(--shadow-soft);
  border-radius: 1em;
  padding: 0.2em 0.5em;
  animation: pulsate 0.5s infinite alternate;
  margin: 0.5em 0;
  letter-spacing: 0.1em;
  line-height: 1.1;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  z-index: 2;
  border: 2px solid var(--alarm-primary);
}

@keyframes pulsate {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.22); opacity: 0.9; }
}

.countdown-item.show-highlight .item-display {
  display: none !important;
}

.countdown-item.show-highlight {
  box-shadow: 0 0 32px 4px var(--alarm-primary), var(--shadow-medium);
  border: 2px solid var(--alarm-primary);
  background: var(--gradient-dark);
}

.countdown-pulse {
  animation: pulseSmall 0.5s infinite alternate;
}
@keyframes pulseSmall {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.1); opacity: 0.7; }
}

/* ================================================================
   26. WORLD CLOCK (HORA MUNDIAL)
   ================================================================ */
.world-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.world-meta {
  margin-top: 0.75rem;
  text-align: center;
  opacity: 0.95;
}

.world-dst-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--alarm-warning);
  border: 1px solid rgba(255, 193, 7, 0.5);
}

.world-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.world-search {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.results-count {
  opacity: 0.9;
  font-weight: 500;
}

.world-filters {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-chip {
  cursor: pointer;
}

.filter-chip.is-active,
.filter-chip[aria-pressed="true"] {
  background: var(--alarm-primary);
  color: #000;
  border-color: var(--alarm-primary);
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.25);
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.world-empty-state {
  display: none;
  text-align: center;
  opacity: 0.9;
  margin-top: 1rem;
}

.world-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--text, var(--text-white, #e5e7eb));
}

.world-card-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.world-flag { font-size: 1.6rem; line-height: 1; }

.world-card-texts {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.world-city {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-country {
  font-size: 0.9rem;
  opacity: 0.9;
}

.world-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 6ch;
}

.world-time {
  font-family: var(--font-mono, inherit);
  font-weight: 700;
  color: var(--alarm-primary);
  font-size: 1.1rem;
}

.world-offset {
  font-size: 0.85rem;
  opacity: 0.85;
}

.world-card.is-selected,
.world-card[aria-pressed="true"] {
  border-color: var(--alarm-primary);
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.25), inset 0 0 0 1px rgba(14, 165, 233, 0.35);
}

[data-theme="light"] .world-country,
[data-theme="light"] .world-offset {
  color: var(--text-black);
  opacity: 0.75;
}

[data-theme="light"] .world-card.is-selected,
[data-theme="light"] .world-card[aria-pressed="true"] {
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
}

.world-card:focus-visible {
  outline: 2px solid var(--alarm-primary);
  outline-offset: 2px;
}

/* ================================================================
   27. CALCULADORA DE DATAS (WRAPPER INICIAL)
   ================================================================ */
.title-contador-de-dias {
  margin-top: 2rem;
}

.date-calculator-wrapper {
  --dc-top-accent-height: 2px;
  position: relative;
  max-width: 600px;
  margin: 1rem auto;
  padding: 1.5rem 1.75rem 2rem;
  border-radius: 18px;
  background:
    var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
    var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.18);
  box-shadow: var(--shadow-medium);
  font-family: var(--font-primary);
  color: var(--text-white);
  -webkit-font-smoothing: antialiased;
}

.date-calculator-wrapper:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.05), 0 0 28px -6px rgba(0,212,255,0.25);
  opacity: .35;
  mix-blend-mode: screen;
}

/* Tabs */
.dc-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(0,212,255,0.4);
}
.dc-tabs::-webkit-scrollbar { display: none; }

.dc-tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: .9rem 1.2rem;
  font: 600 .95rem/1.1 var(--font-primary);
  color: var(--text-gray);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  transition: color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
  outline: none;
}
.dc-tab:hover {
  color: var(--text-white);
  background: rgba(0,212,255,0.06);
}
.dc-tab.is-active {
  color: var(--text-white);
  background:
    linear-gradient(rgba(0,212,255,0.12), rgba(0,212,255,0.02)) padding-box,
    var(--bg-card);
  box-shadow: inset 0 -1px 0 0 rgba(0,212,255,0.4);
  font-weight: 700;
}
.dc-tab.is-active:after {
  content: "";
  position: absolute;
  height: 3px;
  left: 0; right: 0; bottom: -1px;
  background: var(--gradient-primary);
  border-radius: 2px 2px 0 0;
}

.dc-panel { animation: dcFade .3s ease; }
@keyframes dcFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dc-field-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1rem;
}
.dc-field-group label {
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dc-field-inline {
  display: flex;
  align-items: stretch;
  gap: .65rem;
}

.dc-field-group input[type="date"],
.dc-field-group input[type="number"] {
  flex: 1;
  background: var(--bg-dark);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 10px;
  color: var(--text-white);
  padding: .7rem .85rem;
  font-size: .9rem;
  line-height: 1.2;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  box-shadow: inset 0 0 0 1px rgba(0,212,255,0.05);
}
.dc-field-group input[type="date"]:hover,
.dc-field-group input[type="number"]:hover {
  border-color: rgba(0,212,255,0.45);
}
.dc-field-group input[type="date"]:focus,
.dc-field-group input[type="number"]:focus {
  outline: none;
  border-color: var(--alarm-primary);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.28), inset 0 0 0 1px rgba(0,212,255,0.4);
  background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,153,204,0)) var(--bg-dark);
}

.dc-field-group input[type="number"]::-webkit-outer-spin-button,
.dc-field-group input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.dc-field-group input[type="number"] { -moz-appearance: textfield; }

.dc-grid-4 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin-bottom: .5rem;
}

.dc-mini-btn {
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,153,204,0.05));
  border: 1px solid rgba(0,212,255,0.4);
  color: var(--text-white);
  font-size: .7rem;
  font-weight: 600;
  padding: .55rem .7rem;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.dc-mini-btn:hover {
  background: linear-gradient(135deg, rgba(0,212,255,0.28), rgba(0,153,204,0.08));
  border-color: rgba(0,212,255,0.65);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.35), 0 0 12px -2px rgba(0,212,255,0.4);
}
.dc-mini-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.35);
}

.dc-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 1rem;
  font-size: .85rem;
  color: var(--text-gray);
  user-select: none;
}
.dc-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--alarm-primary);
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(0,212,255,0.4));
  transition: filter var(--transition-fast);
}
.dc-checkbox input[type="checkbox"]:focus {
  outline: none;
  filter: drop-shadow(0 0 6px rgba(0,212,255,0.65));
}
.dc-checkbox label {
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  display: inline;
}

.dc-primary-btn {
  width: 100%;
  border: 1px solid rgba(0,212,255,0.55);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  font-family: var(--font-primary);
  color: var(--text-white);
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(0,212,255,0.25), rgba(0,153,204,0.05)) padding-box,
    var(--gradient-primary) border-box;
  background-blend-mode: normal, lighten;
  box-shadow: 0 4px 18px -4px rgba(0,212,255,0.45), var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), background-position .6s ease;
  background-size: 200% 200%, 100% 100%;
  backdrop-filter: blur(3px);
}
.dc-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px -4px rgba(0,212,255,0.6), var(--shadow-medium);
  background-position: 100% 0, center;
}
.dc-primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 14px -4px rgba(0,212,255,0.6);
}
.dc-primary-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.35), 0 6px 26px -6px rgba(0,212,255,0.55);
}

.dc-result-card {
  margin-top: 1.6rem;
  background:
    linear-gradient(135deg, rgba(0,212,255,0.08), rgba(0,153,204,0.02)) padding-box,
    var(--bg-card);
  border: 1px solid rgba(0,212,255,0.25);
  border-radius: 16px;
  padding: 1.2rem 1.3rem 1.35rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.dc-result-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(0,212,255,0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0,153,204,0.16), transparent 60%);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events: none;
}

.dc-result-title {
  margin: 0 0 .9rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text-white);
}

.dc-result-list {
  margin: 0 0 .85rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
.dc-result-list li {
  font-size: .86rem;
  color: var(--text-gray);
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.dc-result-list li strong {
  color: var(--text-white);
  font-weight: 600;
}

.dc-big-date {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--alarm-primary);
  text-shadow: 0 0 12px rgba(0,212,255,0.35);
  line-height: 1.25;
  word-break: break-word;
}

.dc-note {
  margin: .35rem 0 0;
  font-size: .68rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-gray);
  opacity: .85;
}

/* Dark input color scheme para datas */
[data-theme="dark"] .dc-date,
[data-theme="dark"] #add-base,
[data-theme="dark"] #sub-base{
  color-scheme: dark;
}



/* ================================================================
   28. CALCULADORAS (HORAS & DIAS) - TOOL WRAPPER
   ================================================================ */
.title-calculadora-horas {
  margin-top: 1rem;
}

.tool-wrapper {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  margin-top: 1.5rem;
  padding: 1.25rem 1.25rem 2rem;
  background: var(--gradient-dark);
  border-radius: var(--radius-lg,16px);
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-primary, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
  color: var(--text-white);
}

[data-theme="dark"] .tool-wrapper {
  --dc-top-accent-height: 2px;
  background:
    var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
    var(--gradient-dark);
}

[data-theme="light"] .tool-wrapper {
  --dc-top-accent-height: 2px;
  background:var(--gradient-dark);    
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: var(--shadow-soft);
  color: var(--text-white);
}

/* Dark color-scheme inside inputs */
[data-theme="dark"] .dc-input {
  color-scheme: dark;
}

/* Light theme overrides (generic calc elements) */
[data-theme="light"] body,
[data-theme="light"] .dc-modal,
[data-theme="light"] .dc-result,
[data-theme="light"] .dc-badge,
[data-theme="light"] .history-item,
[data-theme="light"] .dc-detail-line {
  color: #0c0e12;
}

[data-theme="light"] .dc-small,
[data-theme="light"] .dc-hint,
[data-theme="light"] .history-empty,
[data-theme="light"] .history-item-meta {
  color: #38424a;
}

/* Base color forwarding */
.dc-fieldset,
.dc-fieldset legend,
.dc-fieldset label,
.dc-fieldset .dc-label {
  color: var(--color-fg);
}

/* Light specifics */
[data-theme="light"] .dc-fieldset,
[data-theme="light"] .dc-fieldset legend,
[data-theme="light"] .dc-fieldset label,
[data-theme="light"] .dc-fieldset .dc-label {
  color: #0c0e12;
}

[data-theme="light"] .dc-fieldset input,
[data-theme="light"] .dc-fieldset select,
[data-theme="light"] .dc-fieldset textarea {
  color: #0c0e12;
}

[data-theme="light"] .dc-fieldset input::placeholder,
[data-theme="light"] .dc-fieldset textarea::placeholder {
  color: #555b60;
}

[data-theme="light"] .dc-fieldset .dc-hint,
[data-theme="light"] .dc-fieldset .dc-note {
  color: #444d55;
}

/* ================================================================
   29. CAMPOS / GRUPOS / INPUTS
   ================================================================ */
.dc-row-dates {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  margin-bottom: 1rem;
}

.dc-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.dc-field.small { gap: .25rem; }

.dc-label,
.dc-label-sm {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .4px;
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-white);
}

.dc-label-sm {
  font-size: 1rem;
  text-transform: uppercase;
  opacity: .9;
}

.dc-input {
  background: var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: var(--text-white);
  padding: .6rem .7rem;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.dc-input:focus {
  outline: none;
  border-color: var(--alarm-primary);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.35);
}

.dc-inline-link {
  background: none;
  border: none;
  color: var(--alarm-primary);
  font-size: 1rem;
  cursor: pointer;
  padding: .2rem .45rem;
  border-radius: 6px;
  transition: background var(--transition-fast);
}
.dc-inline-link:hover {
  background: rgba(255,255,255,0.08);
}

/* Fieldset visuals */
.dc-fieldset {
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 14px;
  padding: 1rem 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,212,255,0.05) 90%);
  margin-bottom: 1.2rem;
}

.dc-legend {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--alarm-primary);
  text-transform: uppercase;
  padding: 0 .35rem;
}

.dc-options-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.dc-options-col {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 210px;
}

.dc-checkbox {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
}
.dc-checkbox input[type=checkbox] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--alarm-primary);
  cursor: pointer;
}

/* Time inline row */
#time-row.time-inline {
  margin-top: .55rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  background: rgba(0,212,255,0.06);
  padding: .6rem .7rem .7rem;
  border: 1px dashed rgba(0,212,255,0.4);
  border-radius: 10px;
}

.dc-hidden { display: none !important; }

.dc-adjust-group {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  margin-top: .4rem;
}

.dc-mini-hint-group {
  margin-top: .45rem;
  font-size: 1rem;
  color: var(--text-gray);
  letter-spacing: .3px;
}

/* ================================================================
   30. AÇÕES / BOTÕES / RESULTADOS
   ================================================================ */
.dc-actions {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.dc-btn {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.4);
  cursor: pointer;
  padding: .65rem 1rem;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.dc-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.dc-btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-soft); }

.dc-btn-ghost {
  background: var(--gradient-primary, linear-gradient(135deg,#00d4ff,#0099cc));
  box-shadow: 0 4px 14px rgba(0,212,255,0.35);
}

.dc-result {
  margin-top: 1.4rem;
  background: var(--gradient-dark);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 18px;
  padding: 1rem 1rem 1.15rem;
  box-shadow: var(--shadow-medium);
}

.dc-result-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.dc-result-main {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(90deg,var(--alarm-primary),var(--alarm-secondary));
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: -1px;
}
.dc-result-sub {
  font-size: 1rem;
  color: var(--text-gray);
  flex: 1 1 auto;
}

.dc-badges {
  margin-top: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.dc-badge {
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.4);
  color: var(--text-white);
  font-size: 1rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  line-height: 1;
  letter-spacing: .4px;
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}

/* Result actions container */
.dc-result-actions {
  position: relative;
  width: 100%;
  padding: .55rem .65rem;
  margin-top: .85rem;
  border: 1px solid rgba(145, 227, 244, 0.4);
  border-radius: 14px;
  background-color: rgba(0,212,255,0.10);
  -webkit-backdrop-filter: blur(2px);
  margin-top: .9rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}

@media (max-width: 620px) {
  .dc-result-actions {
    padding: .5rem .55rem;
    border-radius: 12px;
  }
}

.dc-btn-chip {
  background: var(--gradient-dark);
  border: 1px solid rgba(21, 172, 202, 0.6);
  color: var(--text-white);
  font-size: 1rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dc-btn-chip:hover:not(:disabled) {
  background: var(--gradient-primary);
}
.dc-btn-chip:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.dc-details-panel {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(0,212,255,0.3);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.dc-detail-line {
  font-size: 1rem;
  color: var(--text-gray);
  position: relative;
  padding-left: .7rem;
  line-height: 1.15;
}
.dc-detail-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45rem;
  width: 4px;
  height: 4px;
  background: var(--alarm-primary);
  border-radius: 50%;
}

.dc-history-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--alarm-primary);
  margin-bottom: .4rem;
}
.dc-history-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 220px;
  overflow-y: auto;
  font-size: 1rem;
  color: var(--text-gray);
  padding-right: .3rem;
}
.dc-history-list::-webkit-scrollbar { width: 6px; }
.dc-history-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.dc-history-list::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.4); border-radius: 3px; }

@media (max-width: 620px) {
  .dc-result-main { font-size: 1.85rem; }
  .dc-options-grid { flex-direction: column; gap: 1rem; }
  #time-row.time-inline { gap: .5rem; }
  .dc-adjust-group { grid-template-columns: 1fr; }
}

/* ================================================================
   31. OVERLAY / MODAL BASE (DATA CALCULATOR)
   ================================================================ */
.dc-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: radial-gradient(circle at 30% 40%, rgba(0,212,255,0.15), rgba(0,0,0,0.85) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 3.5rem 1rem 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium,0.3s) ease;
}

.dc-overlay:not(.dc-hidden) {
  opacity: 1;
  pointer-events: auto;
}

.dc-overlay.dc-hidden {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.dc-modal {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: linear-gradient(135deg, rgba(26,26,26,0.95), rgba(34,34,34,0.9));
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 18px;
  padding: 0;
  box-shadow: var(--shadow-strong,0 12px 40px rgba(0,0,0,0.6)), var(--shadow-glow,0 0 30px rgba(0,212,255,0.35));
  color: var(--text-white,#ffffff);
  font-family: var(--font-primary,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(.92) translateY(12px);
  opacity: 0;
  animation: dcModalEnter .42s cubic-bezier(.3,.8,.25,1) forwards;
}

@keyframes dcModalEnter {
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.dc-modal-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.1rem;
  background: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(0,153,204,0.15));
  border-bottom: 1px solid rgba(0,212,255,0.35);
}

.dc-modal-header h2,
#holiday-modal-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  margin: 0;
  background: linear-gradient(90deg, var(--alarm-primary,#00d4ff), var(--alarm-secondary,#0099cc));
  -webkit-background-clip: text;
  color: transparent;
  line-height: 1.1;
}

/* ================================================================
   32. HOLIDAY MODAL CENTRALIZAÇÃO
   ================================================================ */
#holiday-overlay.dc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem 1rem;
  overflow-y: auto;
  background: radial-gradient(circle at 35% 40%, rgba(0,212,255,0.15), rgba(0,0,0,0.85) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#holiday-overlay.dc-hidden {
  opacity: 0;
  pointer-events: none;
  display: flex !important;
}

#holiday-count-modal {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  max-width: 480px;
  width: min(92vw, 480px);
}

#holiday-count-modal {
  opacity: 0;
  animation: holidayModalFadeIn .45s cubic-bezier(.3,.8,.25,1) forwards;
}
@keyframes holidayModalFadeIn {
  0% { transform: scale(.94) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-height: 600px) {
  #holiday-overlay.dc-overlay {
    align-items: flex-start !important;
    padding-top: 1.25rem;
  }
  #holiday-count-modal {
    width: 100%;
  }
}

/* Light mode holiday modal */
[data-theme="light"] #holiday-count-modal.dc-modal {
  background:
    linear-gradient(155deg,#ffffff 0%, #f5fafe 55%, #eef7fb 100%);
  border: 1px solid rgba(14,165,233,0.60);
  box-shadow:
    0 8px 26px -8px rgba(14,165,233,0.30),
    0 0 0 1px rgba(14,165,233,0.35),
    0 3px 14px -4px rgba(15,23,42,0.18);
  color: #0d2530;
}

[data-theme="light"] #holiday-count-modal.dc-modal::before {
  background:
    linear-gradient(140deg, rgba(255,255,255,0.85), rgba(255,255,255,0.25)),
    radial-gradient(circle at 30% 22%, rgba(14,165,233,0.25), transparent 62%);
  mix-blend-mode: normal;
  opacity: .85;
}

[data-theme="light"] #holiday-count-modal.dc-modal::after {
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%);
  opacity: .85;
}

[data-theme="light"] #holiday-count-modal .dc-modal-header {
  background: linear-gradient(90deg, rgba(14,165,233,0.18), rgba(56,189,248,0.14));
  border-bottom: 1px solid rgba(14,165,233,0.45);
}

[data-theme="light"] #holiday-count-modal .dc-modal-header::after {
  background: linear-gradient(90deg, rgba(14,165,233,0), rgba(14,165,233,0.55), rgba(14,165,233,0));
  opacity: .55;
}

[data-theme="light"] #holiday-count-modal .dc-modal-header h2,
[data-theme="light"] #holiday-modal-title {
  background-color: #0ea5e9;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 2px rgba(14,165,233,0.3));
}

[data-theme="light"] #holiday-count-modal .dc-modal-body {
  color: #183f4d;
}

[data-theme="light"] #holiday-count-modal .dc-small,
[data-theme="light"] #holiday-count-modal .dc-hint {
  color: #356070;
}

[data-theme="light"] #holiday-count-modal .dc-text-input {
  background: #ffffff;
  border: 1px solid rgba(14,165,233,0.55);
  color: #0d2530;
  box-shadow: 0 1px 0 rgba(14,165,233,0.10);
}
[data-theme="light"] #holiday-count-modal .dc-text-input:focus {
  background: #f0fbff;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.30);
}
[data-theme="light"] #holiday-count-modal .dc-text-input::placeholder {
  color: #5b7a85;
}

[data-theme="light"] #holiday-count-modal .dc-close-btn {
  background: rgba(14,165,233,0.14);
  border: 1px solid rgba(14,165,233,0.50);
  color: #0d2530;
}
[data-theme="light"] #holiday-count-modal .dc-close-btn:hover {
  background: linear-gradient(135deg,#0ea5e9,#38bdf8);
  color: #fff;
  border-color: rgba(14,165,233,0.75);
}
[data-theme="light"] #holiday-count-modal .dc-close-btn:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

[data-theme="light"] #holiday-count-modal .dc-btn-primary,
[data-theme="light"] #holiday-count-modal .dc-btn-secondary {
  font-size: .92rem;
  letter-spacing: .45px;
  border-radius: 11px;
  transition: background .28s, transform .28s, box-shadow .28s, border-color .28s;
}

[data-theme="light"] #holiday-count-modal .dc-btn-primary {
  background: linear-gradient(135deg,#0ea5e9,#38bdf8 55%, #0284c7);
  border: 1px solid rgba(14,165,233,0.65);
  color: #ffffff;
  box-shadow: 0 4px 14px -4px rgba(14,165,233,0.55);
}
[data-theme="light"] #holiday-count-modal .dc-btn-primary:hover {
  background: linear-gradient(135deg,#34bdf8,#0ea5e9 55%, #0284c7);
  transform: translateY(-3px);
  box-shadow: 0 6px 22px -6px rgba(14,165,233,0.65);
}
[data-theme="light"] #holiday-count-modal .dc-btn-primary:active {
  transform: translateY(0);
}

[data-theme="light"] #holiday-count-modal .dc-btn-secondary {
  background: linear-gradient(145deg, rgba(14,165,233,0.22), rgba(56,189,248,0.18));
  border: 1px solid rgba(14,165,233,0.55);
  color: #0d2530;
}
[data-theme="light"] #holiday-count-modal .dc-btn-secondary:hover {
  background: linear-gradient(145deg, rgba(14,165,233,0.30), rgba(56,189,248,0.26));
  transform: translateY(-2px);
  box-shadow: 0 4px 14px -4px rgba(14,165,233,0.45);
}
[data-theme="light"] #holiday-count-modal .dc-btn-secondary:active {
  transform: translateY(0);
}

[data-theme="light"] #holiday-count-modal .dc-btn-primary:focus-visible,
[data-theme="light"] #holiday-count-modal .dc-btn-secondary:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

[data-theme="light"] #holiday-count-modal .dc-feedback {
  color: #0b4b5f;
  border-left: 3px solid transparent;
}
[data-theme="light"] #holiday-count-modal .dc-feedback.is-warn {
  color: #b45309;
  border-color: #d97706;
}
[data-theme="light"] #holiday-count-modal .dc-feedback.is-error {
  color: #b91c1c;
  border-color: #dc2626;
}
[data-theme="light"] #holiday-count-modal .dc-feedback.is-success {
  color: #047857;
  border-color: #059669;
}

[data-theme="light"] #holiday-count-modal a:focus-visible,
[data-theme="light"] #holiday-count-modal button:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

[data-theme="light"] #holiday-count-modal,
[data-theme="light"] #holiday-count-modal * {
  text-shadow: none;
}

[data-theme="light"] #holiday-count-modal .dc-modal-body,
[data-theme="light"] #holiday-count-modal label,
[data-theme="light"] #holiday-count-modal p,
[data-theme="light"] #holiday-count-modal span:not(.icon),
[data-theme="light"] #holiday-count-modal strong {
  color: #183f4d;
}

/* ================================================================
   33. BOTÃO FECHAR / MODAL CORPO (COMPARTILHADO)
   ================================================================ */
.dc-close-btn {
  margin-left: auto;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.4);
  color: var(--text-white,#fff);
  width: 34px;
  height: 34px;
  font-size: 1.05rem;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background var(--transition-fast,.2s), transform var(--transition-fast,.2s), box-shadow var(--transition-fast,.2s);
}
.dc-close-btn:hover {
  background: var(--gradient-primary, linear-gradient(135deg,#00d4ff,#0099cc));
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,212,255,0.4);
}
.dc-close-btn:active {
  transform: translateY(0);
}

.dc-modal-body {
  padding: 1.05rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  font-size: 1rem;
  line-height: 1.35;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,0.35) transparent;
}
.dc-modal-body::-webkit-scrollbar {
  width: 8px;
}
.dc-modal-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
.dc-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,212,255,0.55), rgba(0,153,204,0.55));
  border-radius: 6px;
}

.dc-small {
  font-size: 1rem;
  color: var(--text-gray,#b0b0b0);
  margin: 0;
}
.dc-small + .dc-small {
  margin-top: -.4rem;
}

.dc-block-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .4px;
  margin-bottom: .35rem;
  color: var(--text-white,#fff);
  text-transform: uppercase;
  opacity: .9;
}

.dc-text-input {
  width: 100%;
  padding: .65rem .75rem;
  background: var(--bg-card,#1a1a1a);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 10px;
  color: var(--text-white,#fff);
  font-size: 1rem;
  font-family: var(--font-primary,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
  transition: border-color var(--transition-fast,.2s), box-shadow var(--transition-fast,.2s), background var(--transition-fast,.2s);
  outline: none;
  letter-spacing: .3px;
}
.dc-text-input::placeholder {
  color: rgba(255,255,255,0.35);
  font-size: 1rem;
}
.dc-text-input:focus {
  border-color: var(--alarm-primary,#00d4ff);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.35);
  background: #202020;
}

.dc-feedback {
  font-size: 1rem;
  min-height: .9rem;
  letter-spacing: .3px;
  font-weight: 500;
  color: var(--alarm-warning,#ffaa00);
  padding-left: .35rem;
  border-left: 3px solid transparent;
  transition: color .25s, border-color .25s;
  word-break: break-word;
}
.dc-feedback.is-warn {
  color: var(--alarm-warning,#ffaa00);
  border-color: var(--alarm-warning,#ffaa00);
}
.dc-feedback.is-error {
  color: var(--alarm-danger,#ff4757);
  border-color: var(--alarm-danger,#ff4757);
}
.dc-feedback.is-success {
  color: var(--alarm-success,#00ff88);
  border-color: var(--alarm-success,#00ff88);
}

.dc-actions-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.dc-btn-primary,
.dc-btn-secondary {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  padding: .6rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(0, 212, 255, 0.4);
  transition: background var(--transition-fast,.2s), transform var(--transition-fast,.2s), box-shadow var(--transition-fast,.2s);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  position: relative;
  color: #fff;
}

.dc-btn-primary {
  background: var(--gradient-primary, linear-gradient(135deg,#00d4ff,#0099cc));
  box-shadow: 0 4px 14px rgba(0,212,255,0.35);
}
.dc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,212,255,0.45);
}
.dc-btn-primary:active { transform: translateY(0); }

.dc-btn-secondary {
  background: rgba(0,212,255,0.12);
}
.dc-btn-secondary:hover {
  background: rgba(0,212,255,0.22);
  transform: translateY(-2px);
}
.dc-btn-secondary:active {
  transform: translateY(0);
}

.dc-hint {
  font-size: 1rem;
  color: var(--text-gray,#b0b0b0);
  line-height: 1.25;
  letter-spacing: .3px;
  background: rgba(0,212,255,0.08);
  border: 1px dashed rgba(0,212,255,0.35);
  padding: .5rem .6rem;
  border-radius: 10px;
}

.dc-btn-primary:focus-visible,
.dc-btn-secondary:focus-visible,
.dc-close-btn:focus-visible {
  outline: 2px solid var(--alarm-primary,#00d4ff);
  outline-offset: 2px;
}

[data-theme="light"] .dc-overlay {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
}

[data-theme="light"] .dc-modal {
  background: linear-gradient(135deg,#ffffff,#f1f5f9);
  color: var(--text-white,#1e293b);
  box-shadow: var(--shadow-medium,0 8px 30px rgba(15,23,42,0.12));
}

[data-theme="light"] .dc-modal-header {
  background: linear-gradient(90deg, rgba(14,165,233,0.15), rgba(56,189,248,0.15));
  border-bottom: 1px solid rgba(14,165,233,0.35);
}

[data-theme="light"] .dc-close-btn {
  background: rgba(14,165,233,0.12);
  color: var(--text-white,#1e293b);
}
[data-theme="light"] .dc-close-btn:hover {
  background: var(--gradient-primary,linear-gradient(135deg,#0ea5e9,#38bdf8));
  color: #fff;
}

[data-theme="light"] .dc-text-input {
  background: #ffffff;
  color: #1e293b;
}
[data-theme="light"] .dc-text-input:focus {
  background: #f0f9ff;
}

[data-theme="light"] .dc-hint {
  background: rgba(14,165,233,0.1);
  border-color: rgba(14,165,233,0.35);
}

[data-theme="light"] .dc-badge {
  background: rgba(14,165,233,0.08);
  border-color: rgba(14,165,233,0.35);
}

@keyframes dcModalExit {
  to { transform: scale(.92) translateY(12px); opacity: 0; }
}
.dc-modal.closing {
  animation: dcModalExit .3s ease forwards;
}

.dc-modal.is-busy {
  pointer-events: none;
  opacity: .75;
}
.dc-modal.is-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(0,212,255,0.08), rgba(0,212,255,0.02));
  animation: busyShine 1.6s linear infinite;
}
@keyframes busyShine {
  0% { opacity: .2; }
  50% { opacity: .55; }
  100% { opacity: .2; }
}

.history-item {
  position: relative;
  padding: .55rem .9rem .55rem .7rem;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: 1rem;
  line-height: 1.25;
  animation: histEnter .35s ease;
}
@keyframes histEnter {
  from { opacity:0; transform: translateY(4px); }
  to { opacity:1; transform: translateY(0); }
}

.history-item-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.history-del-btn {
  margin-left: auto;
  background: rgba(0,212,255,0.12);
  border: 1px solid rgba(0,212,255,0.4);
  color: var(--text-white,#fff);
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.history-del-btn:hover {
  background: var(--gradient-primary,linear-gradient(135deg,#00d4ff,#0099cc));
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,212,255,0.4);
}
.history-del-btn:active { transform: translateY(0); }
.history-del-btn:focus-visible {
  outline: 2px solid var(--alarm-primary,#00d4ff);
  outline-offset: 2px;
}

.history-item-meta {
  opacity: .8;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: 1rem;
  letter-spacing: .3px;
}

.history-empty {
  font-size: 1rem;
  opacity: .7;
  padding: .4rem .2rem;
}

/* ================================================================
   34. CAMPOS EXTRA / FREE TEXT
   ================================================================ */
#sum-free-text {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font-mono, monospace);
}

/* ================================================================
   35. MODAL BÁSICO (REUTILIZANDO TOKENS)
   ================================================================ */
.dc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
  z-index: 900;
}

.dc-modal {
  position: fixed;
  z-index: 901;
  top: 50%;
  left: 50%;
  width: min(680px, 92vw);
  max-height: 82vh;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 1px solid var(--border-light,#2a2f33);
  border-radius: 20px;
  padding: 1.15rem 1.1rem 1rem;
  box-shadow: var(--shadow-medium), 0 0 0 1px rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  color: var(--text-white);
}

.dc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}

.dc-modal-title {
  font-size: 1.1rem;
  margin: 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 700;
}

.dc-modal-body {
  overflow-y: auto;
  padding-right: .35rem;
  flex: 1;
}

.dc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}

.dc-modal:focus { outline: none; }

@media (max-width: 640px) {
  .dc-modal {
    width: 94vw;
    max-height: 88vh;
    padding: 1rem .9rem;
  }
}

/* ================================================================
   36.SESSÃO EDUCATIVA (NOVA VERSÃO ELEGANTE)
   - Dark como base
   - Light com alto contraste
   - Animação de abrir/fechar suave
   - Acessibilidade: foco visível, contraste, reduced motion
   - Mantém compatibilidade com o HTML e JS existentes
   ================================================================ */

/* Light theme reinforce (date calculator & educ) */

/* Light mode: aplica o mesmo accent no topo + seu fundo do light */
[data-theme="light"] .date-calculator-wrapper {
  --dc-top-accent-height: 2px;
  background:
    var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
    var(--gradient-dark); /* seu fundo desejado no light */
  color: var(--text-white);
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: var(--shadow-soft);
}


[data-theme="light"] .dc-result-card {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.08), rgba(56,189,248,0.03)) padding-box,
    var(--bg-card);
  border-color: rgba(14,165,233,0.25);
}
[data-theme="light"] .dc-big-date {
  text-shadow: none;
}
[data-theme="light"] .educational-toggle,
[data-theme="light"] .educational-content {
  border-color: rgba(14,165,233,0.25);
}

[data-theme="light"] .dc-field-group input[type="date"]:focus,
[data-theme="light"] .dc-field-group input[type="number"]:focus,
[data-theme="light"] .dc-primary-btn:focus,
[data-theme="light"] .educational-toggle:focus {
  box-shadow: 0 0 0 3px rgba(14,165,233,0.35), 0 4px 16px -4px rgba(14,165,233,0.4);
}

/* -------------- TOKENS DA SEÇÃO (escopados para .educational-section) -------------- */
.educational-section {
  --educ-radius-outer: 26px;
  --educ-radius-inner: 18px;
  --educ-border-accent: var(--alarm-primary,#0ea5e9);
  --educ-grad-dark: linear-gradient(135deg,#111a21,#18242d 58%,#1e2c35);
  --educ-card-dark-a: #162129;
  --educ-card-dark-b: #1f2d37;
  --educ-text-strong-dark: #f0f7fa;
  --educ-text-body-dark: #c2d3d9;
  --educ-text-dim-dark: #8ea2aa;

  --educ-grad-light: linear-gradient(135deg,#f5fbfe,#eef6fa 60%,#e7f2f8);
  --educ-card-light-a: #ffffff;
  --educ-card-light-b: #f2f9fc;
  --educ-text-strong-light: #08242f;
  --educ-text-body-light: #0d4c60;
  --educ-text-dim-light: #52707b;

  --educ-shadow-dark:
      0 6px 14px -6px rgba(0,0,0,.55),
      0 10px 32px -10px rgba(0,0,0,.55),
      0 0 0 1px rgba(255,255,255,0.04) inset;
  --educ-shadow-light:
      0 4px 12px -6px rgba(14,165,233,0.28),
      0 10px 28px -12px rgba(14,165,233,0.30),
      0 0 0 1px rgba(14,165,233,0.22) inset;

  --educ-transition: .5s cubic-bezier(.6,.3,.2,1);
  --educ-transition-fast: .25s ease;

  position: relative;
  max-width: var(--educ-max-width, 760px);
  margin: 56px auto 96px;
  padding: 2.25rem clamp(1.4rem,2.6vw,2.6rem) 2.6rem;
  background: var(--educ-grad-dark);
  border: 1px solid rgba(0,212,255,0.30);
  border-radius: var(--educ-radius-outer);
  box-shadow: var(--educ-shadow-dark);
  color: var(--educ-text-body-dark);
  font-family: var(--font-primary, system-ui, sans-serif);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* Glow / Aura */
.educational-section::before {
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 12%, rgba(0,212,255,0.22), transparent 60%),
    radial-gradient(circle at 82% 75%, rgba(0,153,204,0.18), transparent 65%);
  opacity: .28;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity var(--educ-transition-fast);
}
.educational-section:hover::before { opacity: .40; }

/* -------------- TOGGLE PRINCIPAL -------------- */
.educational-toggle {
  --toggle-grad-dark: linear-gradient(135deg,var(--alarm-primary),var(--alarm-secondary));
  --toggle-grad-light: linear-gradient(135deg,var(--alarm-primary),var(--alarm-secondary));
  width: 100%;
  border: 1px solid rgba(0,212,255,0.40);
  background: var(--toggle-grad-dark);
  color: #041a22;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .4px;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 1.2;
  box-shadow:
    0 2px 6px -2px rgba(0,212,255,0.45),
    0 0 0 1px rgba(0,212,255,0.45) inset;
  transition:
    background-position 1s ease,
    transform .55s cubic-bezier(.5,1.4,.4,1),
    box-shadow .55s ease,
    border-color .55s ease,
    color .4s ease;
  background-size: 180% 180%;
  margin: 0 0 1.35rem;
  text-align: left;
}

.educational-toggle > span[id$="ToggleIcon"] {
  font-size: 1.05rem;
  width: 1.1rem;
  display: inline-flex;
  justify-content: center;
  color: inherit;
  transition: transform .6s cubic-bezier(.6,.3,.2,1);
}

.educational-toggle::before,
.educational-toggle::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.educational-toggle::before {
  background:
    radial-gradient(circle at 20% 25%,rgba(255,255,255,0.45),transparent 55%),
    radial-gradient(circle at 85% 70%,rgba(255,255,255,0.25),transparent 60%);
  mix-blend-mode: overlay;
  opacity: .18;
  transition: opacity .6s ease;
}

.educational-toggle::after {
  background:
    linear-gradient(120deg,rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.55) 48%,
      rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  transition: transform 1s cubic-bezier(.55,.1,.15,1);
}

.educational-toggle:hover {
  transform: translateY(-5px);
  background-position: 100% 50%;
  box-shadow:
    0 8px 26px -6px rgba(0,212,255,0.55),
    0 0 0 1px rgba(0,212,255,0.55) inset;
}
.educational-toggle:hover::before { opacity: .33; }
.educational-toggle:hover::after { transform: translateX(120%); }

.educational-toggle:active {
  transform: translateY(-2px) scale(.985);
}

.educational-toggle[aria-expanded="true"] > span[id$="ToggleIcon"] {
  transform: rotate(90deg);
}

.educational-toggle:focus-visible {
  outline: 3px solid rgba(0,212,255,0.60);
  outline-offset: 3px;
}

/* -------------- CONTEÚDO EXPANSÍVEL -------------- */
/* Estrutura: o JS adiciona/ remove hidden no .educational-content (mantemos) */
.educational-content {
  position: relative;
  border: 1px solid rgba(0,212,255,0.32);
  border-radius: var(--educ-radius-inner);
  background:
    linear-gradient(145deg,var(--educ-card-dark-a),var(--educ-card-dark-b)) padding-box,
    linear-gradient(145deg,rgba(0,212,255,0.4),rgba(0,153,204,0.25)) border-box;
  padding: 1.5rem 1.55rem 1.9rem;
  box-shadow:
    0 4px 16px -6px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04);
  color: var(--educ-text-body-dark);
  font-size: 1rem;
  line-height: 1.55;
  overflow: hidden;
  /* Animação de aparição (fade + slide) */
  animation: educFadeIn .55s cubic-bezier(.6,.3,.2,1);
}

/* Wrapper de transição (opcional se quiser animação de altura) */
/* Se quiser animar a altura você pode envolver o conteúdo interno em .educational-content__inner */
.educational-content__inner {
  display: block;
  animation: educInnerFade .65s cubic-bezier(.6,.3,.2,1);
}

@keyframes educFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes educInnerFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtítulos */
.educational-subtitle {
  margin: 1.6rem 0 .7rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--educ-text-strong-dark);
  letter-spacing: .5px;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg,var(--alarm-primary),var(--alarm-secondary));
  -webkit-background-clip: text;
  color: var(--educ-text-strong-dark);
  @supports (-webkit-background-clip:text) or (background-clip:text){
    color: transparent;
  }
}
.educational-subtitle:first-child {
  margin-top: .2rem;
}

.educational-subtitle::after {
  content:"";
  display:block;
  height: 2px;
  width: 60px;
  margin-top: .45rem;
  border-radius: 2px;
  background: linear-gradient(90deg,var(--alarm-primary),transparent);
  opacity: .85;
}

/* Parágrafos */
.educational-content p {
  margin: 0 0 1.05rem;
  font-size: .98rem;
  color: var(--educ-text-body-dark);
  text-align: justify;
}
.educational-content p strong {
  color: var(--educ-text-strong-dark);
  font-weight: 600;
}

/* Listas */
.educational-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: .97rem;
  color: var(--educ-text-body-dark);
}

.educational-list li {
  position: relative;
  line-height: 1.45;
  padding-left: 1.55rem;
}

.educational-list li::before {
  content:"";
  position:absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--alarm-primary),var(--alarm-secondary));
  box-shadow:
    0 0 0 2px rgba(0,212,255,0.28),
    0 1px 3px rgba(0,212,255,0.4);
  transform: translateY(-50%) scale(.9);
  transition:
    transform .45s cubic-bezier(.4,.8,.25,1),
    box-shadow .45s cubic-bezier(.4,.8,.25,1),
    filter .45s ease;
  filter: saturate(.95) brightness(1);
}
.educational-list li:hover::before {
  transform: translateY(-50%) scale(1.15);
  box-shadow:
    0 0 0 4px rgba(0,212,255,0.32),
    0 0 0 1px rgba(255,255,255,0.55) inset,
    0 4px 10px -2px rgba(0,212,255,0.55);
  filter: saturate(1.25) brightness(1.08);
}

.educational-list li strong {
  color: var(--educ-text-strong-dark);
  font-weight: 600;
}

/* -------------- VARIANTE CARD ANTIGA (refinada) -------------- */
.educational-section.educational-section--card {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 3.5rem auto 2.5rem;
}
.educational-toggle.educational-toggle--card {
  background:
    linear-gradient(145deg,rgba(0,212,255,0.16),rgba(0,153,204,0.05)) padding-box,
    linear-gradient(145deg,rgba(0,212,255,0.45),rgba(0,153,204,0.25)) border-box;
  border: 1px solid transparent;
  color: var(--educ-text-strong-dark);
  box-shadow:
    0 4px 12px -6px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05);
  justify-content: flex-start;
  font-size: 1rem;
  margin-bottom: 0;
}
.educational-toggle.educational-toggle--card::before,
.educational-toggle.educational-toggle--card::after {
  display:none;
}
.educational-toggle.educational-toggle--card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 24px -8px rgba(0,212,255,0.55),
    0 0 0 1px rgba(0,212,255,0.5);
}
.educational-content.educational-content--card {
  margin-top: 1rem;
}

/* -------------- ESTADOS FOCUS GLOBAIS DENTRO DA SEÇÃO -------------- */
.educational-section :focus-visible {
  outline: 2px solid var(--alarm-primary,#0ea5e9);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------- LIGHT THEME -------------- */
[data-theme="light"] .educational-section {
  background: var(--educ-grad-light);
  color: var(--educ-text-body-light);
  border-color: rgba(14,165,233,0.35);
 box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 0.3);
}
[data-theme="light"] .educational-section::before {
  background:
    radial-gradient(circle at 28% 10%, rgba(14,165,233,0.28), transparent 60%),
    radial-gradient(circle at 85% 80%, rgba(56,189,248,0.25), transparent 65%);
  opacity: .45;
  mix-blend-mode: normal;
}
[data-theme="light"] .educational-section:hover::before {
  opacity: .65;
}

[data-theme="light"] .educational-toggle {
  background: var(--toggle-grad-light);
  color: #04232d;
  border-color: rgba(14,165,233,0.45);
  box-shadow:
    0 2px 6px -2px rgba(14,165,233,0.35),
    0 4px 18px -4px rgba(14,165,233,0.45),
    0 0 0 1px rgba(14,165,233,0.30) inset;
}
[data-theme="light"] .educational-toggle:hover {
  box-shadow:
    0 8px 22px -6px rgba(14,165,233,0.55),
    0 0 0 1px rgba(14,165,233,0.55) inset;
}

[data-theme="light"] .educational-content {
  background:
    linear-gradient(145deg,var(--educ-card-light-a),var(--educ-card-light-b)) padding-box,
    linear-gradient(145deg,rgba(14,165,233,0.48),rgba(56,189,248,0.25)) border-box;
  border: 1px solid transparent;
  color: var(--educ-text-body-light);
  box-shadow:
    0 4px 12px -4px rgba(14,165,233,0.28),
    0 0 0 1px rgba(14,165,233,0.25);
}
[data-theme="light"] .educational-content p { color: var(--educ-text-body-light); }
[data-theme="light"] .educational-content p strong,
[data-theme="light"] .educational-subtitle,
[data-theme="light"] .educational-list li strong {
  color: var(--educ-text-strong-light);
}
[data-theme="light"] .educational-list { color: var(--educ-text-body-light); }
[data-theme="light"] .educational-list li::before {
  box-shadow:
    0 0 0 2px rgba(14,165,233,0.28),
    0 1px 3px rgba(14,165,233,0.35);
}

[data-theme="light"] .educational-toggle.educational-toggle--card {
  background:
    linear-gradient(145deg,rgba(14,165,233,0.18),rgba(56,189,248,0.06)) padding-box,
    linear-gradient(145deg,rgba(14,165,233,0.45),rgba(56,189,248,0.25)) border-box;
  border: 1px solid transparent;
  color: var(--educ-text-strong-light);
  box-shadow:
    0 4px 12px -6px rgba(14,165,233,0.28),
    0 0 0 1px rgba(14,165,233,0.25);
}
[data-theme="light"] .educational-toggle.educational-toggle--card:hover {
  box-shadow:
    0 10px 22px -8px rgba(14,165,233,0.4),
    0 0 0 1px rgba(14,165,233,0.4);
}
[data-theme="light"] .educational-content.educational-content--card {
  background:
    linear-gradient(145deg,var(--educ-card-light-a),var(--educ-card-light-b)) padding-box,
    linear-gradient(145deg,rgba(14,165,233,0.45),rgba(56,189,248,0.25)) border-box;
  border: 1px solid transparent;
}

/* -------------- ESTADOS ESPECIAIS -------------- */
.educational-toggle:focus-visible {
  box-shadow:
    0 0 0 3px rgba(0,212,255,0.35),
    0 0 0 6px rgba(0,212,255,0.22),
    0 4px 30px -6px rgba(0,212,255,0.55),
    0 0 0 1px rgba(0,212,255,0.6) inset;
}
[data-theme="light"] .educational-toggle:focus-visible {
  box-shadow:
    0 0 0 3px rgba(14,165,233,0.35),
    0 0 0 6px rgba(14,165,233,0.20),
    0 4px 26px -4px rgba(14,165,233,0.55),
    0 0 0 1px rgba(14,165,233,0.55) inset;
  outline: none;
}




/* =========================================================
   TEMPORIZADOR SIMPLES (Versão aprimorada display + efeitos)
   ========================================================= */
.timer-root {
  --timer-font-stack: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --timer-radius-sm: 6px;
  --timer-radius-md: 12px;
  --timer-radius-lg: 22px;
  --timer-transition: .35s cubic-bezier(.4,.8,.25,1);

  /* Dark */
  --timer-bg: #0b1216;
  --timer-surface: linear-gradient(160deg,#132129 0%, #152c34 45%, #1e3d49 100%);
  --timer-surface-alt: linear-gradient(150deg,#17333f,#1f4450);
  --timer-border: rgba(0,212,255,0.28);
  --timer-border-strong: rgba(0,212,255,0.55);
  --timer-text: #cfe2e7;
  --timer-text-dim: #89a1aa;
  --timer-text-strong: #f2fbff;
  --timer-accent: #0ea5e9;
  --timer-accent-alt: #38bdf8;
  --timer-focus-ring: #0ea5e9;
  --timer-danger: #ef4444;
  --timer-glow: 0 0 12px -2px rgba(0,212,255,.65), 0 0 38px -4px rgba(0,212,255,.35);
  font-family: var(--timer-font-stack);
  color: var(--timer-text);
  line-height: 1.4;
}

[data-theme="light"] .timer-root {
  --timer-bg: #f2f9fc;
  --timer-surface: linear-gradient(145deg,#ffffff,#eef6fa 70%);
  --timer-surface-alt: linear-gradient(145deg,#ffffff,#e8f2f7);
  --timer-border: rgba(14,165,233,0.38);
  --timer-border-strong: rgba(14,165,233,0.60);
  --timer-text: #0d4f63;
  --timer-text-dim: #577f8b;
  --timer-text-strong: #052b37;
  --timer-accent: #028ec9;
  --timer-accent-alt: #2cbde9;
  --timer-focus-ring: #0ea5e9;
  --timer-glow: 0 0 10px -2px rgba(14,165,233,.55),0 0 32px -4px rgba(14,165,233,.28);
}









.timer-intro {
  max-width: 800px;
  margin: 0 auto 1.4rem;
  text-align: center;
  padding-top: 1.5rem;
}

.timer-title {
  font-size: clamp(1.9rem,3.6vw,2.6rem);
  margin: 0 0 .5rem;
  font-weight: 600;
  letter-spacing: .5px;
  background: linear-gradient(92deg,var(--timer-accent),var(--timer-accent-alt));
  -webkit-background-clip: text;
  color: var(--timer-text-strong);
  @supports (-webkit-background-clip:text){ color:transparent; }
}

.timer-subtitle {
  margin: 0 auto;
  font-size: .95rem;
  color: var(--timer-text-dim);
  max-width: 620px;
  letter-spacing:.3px;
  text-align: center;
}

.timer-panel {
  max-width: 800px;
  margin: 0 auto 2.1rem;
  background: var(--timer-surface);
  border: 1px solid var(--timer-border);
  border-radius: var(--timer-radius-lg);
  padding: 1.4rem clamp(1rem,2vw,1.6rem) 1.75rem;
  box-shadow:
    0 14px 42px -18px rgba(0,0,0,0.70),
    0 4px 16px -4px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px) saturate(140%);
}

/* Faixa superior decorativa unificada (clock, stopwatch, timer) */
.clock-container::before,
.stopwatch-container::before,
.timer-container::before,
.timer-panel::before,
.timer-display-wrapper.timer--standalone::before { /* extra caso não use container externo */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-primary);
  z-index: 5;
  pointer-events: none;
}

.timer-panel::after {
  top:auto; left:auto;
  bottom:-160px; right:-130px;
  animation-direction: reverse;
  animation-duration: 26s;
}
@keyframes panelGlow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
[data-theme="light"] .timer-panel::before,
[data-theme="light"] .timer-panel::after {
  opacity:.5; mix-blend-mode:normal;
}

.timer-form { display:flex; flex-direction:column; gap:1.35rem; }

.timer-fieldset {
  border: 1px solid var(--timer-border);
  border-radius: var(--timer-radius-md);
  padding: 1rem 1rem 1.05rem;
  margin: 0;
  background: var(--timer-surface-alt);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: border-color var(--timer-transition), background-color var(--timer-transition);
  position:relative;
  overflow:hidden;
}

.timer-fieldset::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,0.05),transparent 40%),
    radial-gradient(circle at 80% 20%,rgba(0,212,255,.10),transparent 55%);
  pointer-events:none;
  opacity:.8;
}

.timer-fieldset:focus-within {
  border-color: var(--timer-border-strong);
}

.timer-legend {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .65px;
  margin: 0;
  padding: 0 .4rem;
  background: linear-gradient(92deg,var(--timer-accent),var(--timer-accent-alt));
  -webkit-background-clip: text;
  color: var(--timer-text-strong);
  @supports (-webkit-background-clip:text){ color:transparent; }
}

.timer-hint {
  font-size: .64rem;
  letter-spacing: .45px;
  opacity: .75;
}

.timer-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(52px,1fr));
  gap: .55rem;
}

.timer-preset-btn {
  border: 1px solid var(--timer-border);
  background: rgba(255,255,255,0.02);
  color: var(--timer-text);
  border-radius: var(--timer-radius-sm);
  padding: .55rem .2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  transition: var(--timer-transition);
  position: relative;
  text-transform: uppercase;
  isolation:isolate;
  overflow:hidden;
}
.timer-preset-btn::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  mix-blend-mode:overlay;
  opacity:.0;
  transition: .45s;
}
.timer-preset-btn:hover::after,
.timer-preset-btn:focus-visible::after {
  opacity:.9;
}
.timer-preset-btn:hover,
.timer-preset-btn:focus-visible {
  border-color: var(--timer-border-strong);
  background: linear-gradient(135deg,var(--timer-accent) 0%,var(--timer-accent-alt) 92%);
  color: #05242e;
  box-shadow: 0 4px 16px -6px rgba(0,212,255,0.55),0 0 0 1px rgba(255,255,255,0.2) inset;
  outline: none;
  transform: translateY(-3px);
}

.timer-time-inputs {
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}
.timer-time-block {
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:90px;
  flex:1 1 90px;
}
.timer-time-block span {
  font-size:.62rem;
  letter-spacing:.55px;
  text-transform:uppercase;
  color:var(--timer-text-dim);
  font-weight:600;
}

.timer-input {
  border:1px solid var(--timer-border);
  background:rgba(255,255,255,0.04);
  color:var(--timer-text);
  font-size:.95rem;
  padding:.6rem .65rem;
  border-radius: var(--timer-radius-sm);
  transition: var(--timer-transition);
  box-shadow:0 1px 2px rgba(0,0,0,0.25) inset;
  backdrop-filter: blur(3px);
}
.timer-input:focus {
  outline:2px solid var(--timer-focus-ring);
  outline-offset:2px;
  border-color:var(--timer-border-strong);
}
[data-theme="light"] .timer-input {
  background:linear-gradient(145deg,#ffffff,#f0f8fb);
}

/* DISPLAY */
.timer-display-wrapper {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  margin-top:.3rem;
  position:relative;
}

.timer-progress-outer {
  position:relative;
  width: clamp(250px, 55vw, 370px);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
  isolation:isolate;
}

.timer-progress-outer::before {
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 70% 70%, rgba(0,212,255,0.22), rgba(0,212,255,0) 65%);
  opacity:.55;
  mix-blend-mode:screen;
  pointer-events:none;
}

.timer-progress-glow {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(from 0deg,
      rgba(0,212,255,.15),
      rgba(0,212,255,.02),
      rgba(0,212,255,.15),
      rgba(0,212,255,.02),
      rgba(0,212,255,.15));
  animation: spinSlow 26s linear infinite;
  filter: blur(22px) saturate(180%);
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
[data-theme="light"] .timer-progress-glow { opacity:.4; }

.timer-progress-ring {
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  z-index:1;
}

.timer-progress-ring-bg {
  fill:none;
  stroke:rgba(255,255,255,0.10);
  stroke-width:10;
  filter: blur(.3px);
}
[data-theme="light"] .timer-progress-ring-bg {
  stroke:rgba(14,165,233,0.22);
}

.timer-progress-ring-fg {
  fill:none;
  stroke-linecap:round;
  stroke-width:10;
  stroke-dasharray:339.292;
  transition:stroke-dashoffset .9s cubic-bezier(.4,.85,.25,1);
  filter: drop-shadow(0 0 10px rgba(0,212,255,.4));
}

.timer-digital {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-variant-numeric: tabular-nums;
  z-index:2;
  padding:.5rem;
}

.timer-digit-group {
  display:flex;
  gap:.3rem;
  align-items:center;
  position:relative;
}

.timer-digit {
  position:relative;
  font-size: clamp(2.2rem,6vw,3.55rem);
  font-weight:600;
  padding:.38rem .4rem .46rem;
  line-height:1;
  background:
    linear-gradient(165deg,#10242d,#173c49 55%,#1f4f5e 100%);
  border:1px solid rgba(0,212,255,0.30);
  border-radius:16px;
  min-width:2.05ch;
  text-align:center;
  letter-spacing:1px;
  color: var(--timer-text-strong);
  box-shadow:
    0 6px 22px -8px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 18px -4px rgba(0,212,255,0.55);
  transition:background .65s, border-color .65s, transform .65s;
  overflow:hidden;
}
.timer-digit::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.25),transparent 65%),
    linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,0) 55%);
  mix-blend-mode:overlay;
  opacity:.9;
  pointer-events:none;
}

.timer-digit.changed {
  animation: digitLift .55s ease;
}
@keyframes digitLift {
  0% { transform:translateY(0); filter:brightness(1); }
  45% { transform:translateY(-9px); filter:brightness(1.35); }
  100% { transform:translateY(0); filter:brightness(1); }
}

.timer-separator {
  font-size: clamp(2.1rem,5.8vw,3.4rem);
  font-weight:600;
  color: var(--timer-accent-alt);
  text-shadow:0 0 14px rgba(0,212,255,0.55);
  line-height:1;
  display:flex;
  align-items:center;
  margin:0 .15rem;
  position:relative;
  animation: glowSep 5s ease-in-out infinite;
}
@keyframes glowSep {
  0%,100% { filter: drop-shadow(0 0 6px rgba(0,212,255,.4)); opacity:.9; }
  50% { filter: drop-shadow(0 0 14px rgba(0,212,255,.75)); opacity:1; }
}

.timer-status {
  font-size:.78rem;
  color:var(--timer-text-dim);
  letter-spacing:.4px;
  min-height:1.1rem;
  text-align:center;
}

.timer-finished .timer-digit {
  animation: finishPulse 1.25s ease-in-out infinite;
}
@keyframes finishPulse {
  0%,100% { filter:brightness(1); box-shadow:
      0 6px 22px -8px rgba(0,0,0,.7),
      0 0 0 1px rgba(255,255,255,0.05) inset,
      0 0 18px -4px rgba(0,212,255,0.55);
  }
  55% { filter:brightness(1.5); box-shadow:
      0 10px 30px -10px rgba(0,0,0,.75),
      0 0 0 1px rgba(255,255,255,0.08) inset,
      0 0 26px -4px rgba(0,212,255,0.85);
  }
}

/* AÇÕES */
.timer-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  justify-content:center;
  margin-top:.4rem;
}

.timer-btn-primary,
.timer-btn-secondary,
.timer-btn-tertiary {
  cursor:pointer;
  font-weight:600;
  letter-spacing:.55px;
  font-size:.82rem;
  padding:.78rem 1.2rem;
  border-radius: var(--timer-radius-md);
  border:1px solid var(--timer-border);
  background: var(--timer-surface-alt);
  color: var(--timer-text);
  position:relative;
  overflow:hidden;
  transition: var(--timer-transition);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  backdrop-filter: blur(4px);
}
.timer-btn-primary {
  background: linear-gradient(135deg,var(--timer-accent),var(--timer-accent-alt));
  color:#072c37;
  border-color: var(--timer-border-strong);
  box-shadow:0 4px 18px -6px rgba(0,212,255,0.55),0 0 0 1px rgba(255,255,255,0.12) inset;
}
.timer-btn-primary:hover,
.timer-btn-primary:focus-visible {
  transform:translateY(-3px);
  box-shadow:0 12px 30px -12px rgba(0,212,255,0.75);
}

.timer-btn-secondary:hover,
.timer-btn-secondary:focus-visible,
.timer-btn-tertiary:hover,
.timer-btn-tertiary:focus-visible {
  border-color: var(--timer-border-strong);
  background: linear-gradient(135deg,var(--timer-accent) 0%,var(--timer-accent-alt) 90%);
  color:#051f27;
  transform:translateY(-3px);
  box-shadow:0 10px 24px -10px rgba(0,212,255,0.6);
}

.timer-btn-secondary[disabled],
.timer-btn-tertiary[disabled] {
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* RESPONSIVO */
@media (max-width:640px){
  .timer-actions {
    gap:.55rem;
  }
  .timer-btn-primary,
  .timer-btn-secondary,
  .timer-btn-tertiary {
    flex:1 1 calc(50% - .55rem);
    min-width:unset;
    padding:.75rem .95rem;
  }
  .timer-progress-outer {
    width: clamp(220px, 74vw, 330px);
  }
  .timer-digit {
    font-size: clamp(2rem,8vw,2.9rem);
  }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce){
  .timer-progress-glow,
  .timer-digit.changed,
  .timer-digit,
  .timer-preset-btn,
  .timer-separator,
  .timer-panel::before,
  .timer-panel::after {
    animation:none !important;
    transition:none !important;
  }
}

/* ================================
   MODO TELA CHEIA SOMENTE DISPLAY
   ================================ */
.timer-root.is-fullscreen,
.timer-root[data-fs="true"] {
  background: radial-gradient(circle at 50% 50%, rgba(0,212,255,0.10), transparent 65%) var(--timer-bg);
}

.timer-root.is-fullscreen .timer-panel,
.timer-root[data-fs="true"] .timer-panel {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.timer-root.is-fullscreen .timer-intro,
.timer-root[data-fs="true"] .timer-intro,
.timer-root.is-fullscreen .timer-fieldset,
.timer-root[data-fs="true"] .timer-fieldset,
/*.timer-root.is-fullscreen .timer-actions,
.timer-root[data-fs="true"] .timer-actions,*/
.timer-root.is-fullscreen #timerStatus,
.timer-root[data-fs="true"] #timerStatus,
.timer-root.is-fullscreen .timer-hint,
.timer-root[data-fs="true"] .timer-hint,
.timer-root.is-fullscreen legend.timer-legend,
.timer-root[data-fs="true"] legend.timer-legend {
  display: none !important;
}

.timer-root.is-fullscreen form.timer-form,
.timer-root[data-fs="true"] form.timer-form {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.timer-root.is-fullscreen .timer-display-wrapper,
.timer-root[data-fs="true"] .timer-display-wrapper {
  flex: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(0.5rem,2vw,1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.8rem,4vh,3rem);
  animation: fsFadeIn .45s ease;
}

@keyframes fsFadeIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

.timer-root.is-fullscreen .timer-progress-outer,
.timer-root[data-fs="true"] .timer-progress-outer {
  width: min(70vmin, 600px);
}

.timer-root.is-fullscreen .timer-digit,
.timer-root[data-fs="true"] .timer-digit {
  font-size: clamp(3.2rem, 11vmin, 6rem);
  padding: .5rem .55rem .65rem;
  border-radius: 20px;
  min-width: 2.2ch;
}

.timer-root.is-fullscreen .timer-separator,
.timer-root[data-fs="true"] .timer-separator {
  font-size: clamp(3.1rem, 10.5vmin, 5.6rem);
  margin: 0 .25rem;
}

.timer-root.is-fullscreen .timer-progress-glow,
.timer-root[data-fs="true"] .timer-progress-glow {
  filter: blur(28px) saturate(200%);
  opacity: .65;
}

.timer-root.is-fullscreen .timer-progress-outer::before,
.timer-root[data-fs="true"] .timer-progress-outer::before {
  inset: 6%;
  filter: blur(2px);
  opacity: .75;
}

.timer-root.is-fullscreen .timer-progress-ring-fg,
.timer-root[data-fs="true"] .timer-progress-ring-fg {
  filter: drop-shadow(0 0 24px rgba(0,212,255,.55));
}

.timer-root.is-fullscreen .timer-digital,
.timer-root[data-fs="true"] .timer-digital {
  gap: clamp(.75rem,2vw,1.2rem);
}

/* Opcional: esconder glow animado se quiser menos distração
.timer-root.is-fullscreen .timer-progress-glow { display:none; } */

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  .timer-root.is-fullscreen .timer-display-wrapper,
  .timer-root[data-fs="true"] .timer-display-wrapper {
    animation: none;
  }
}

#muteAlarmBtn:not([hidden]) {
  animation: fadeInMute .35s ease;
}
@keyframes fadeInMute {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

/* ========= FULLSCREEN MOBILE RESPONSIVO – PATCH ========= */

/* 1. Definir um tamanho base variável do anel e propagar */
.timer-root.is-fullscreen .timer-progress-outer,
.timer-root[data-fs="true"] .timer-progress-outer {
  --ring-size: min(92vw, 70vmin, 600px);
  width: var(--ring-size);
  /* Garantir que a altura acompanhe mesmo em browsers que bugam aspect-ratio em fullscreen mobile */
  height: var(--ring-size);
  aspect-ratio: 1 / 1;
  max-width: 600px;
}

/* 2. Tamanho de fonte dos dígitos baseado em largura disponível
   Fórmula heurística: (largura viewport - margens) / (fator aproximado de caracteres)
   HH:MM:SS = 8 símbolos (6 dígitos + 2 separadores) */
.timer-root.is-fullscreen .timer-digit,
.timer-root[data-fs="true"] .timer-digit {
  /* Reduzimos limite inferior para caber em telas pequenas */
  font-size: clamp(1.6rem, calc((100vw - 2rem) / 8.2), 6rem);
  /* Ajustes para que padding não force overflow */
  padding: .45rem .45rem .55rem;
  min-width: 1.9ch; /* menos rígido que 2.2ch */
}

.timer-root.is-fullscreen .timer-separator,
.timer-root[data-fs="true"] .timer-separator {
  font-size: clamp(1.55rem, calc((100vw - 2rem) / 9), 5.6rem);
  margin: 0 .15rem;
}

/* 3. Gaps menores em largura muito estreita */
@media (max-width: 420px) {
  .timer-root.is-fullscreen .timer-digital,
  .timer-root[data-fs="true"] .timer-digital {
    gap: .35rem;
  }
  .timer-root.is-fullscreen .timer-digit,
  .timer-root[data-fs="true"] .timer-digit {
    font-size: clamp(1.5rem, calc((100vw - 2rem) / 8.6), 4.2rem);
    padding: .4rem .38rem .5rem;
    min-width: 1.75ch;
  }
  .timer-root.is-fullscreen .timer-separator,
  .timer-root[data-fs="true"] .timer-separator {
    font-size: clamp(1.4rem, calc((100vw - 2rem) / 10), 4rem);
  }
}

/* 4. Ultra-estreito (pequenos aparelhos 320–360px) */
@media (max-width: 360px) {
  .timer-root.is-fullscreen .timer-digital,
  .timer-root[data-fs="true"] .timer-digital {
    gap: .25rem;
  }
  .timer-root.is-fullscreen .timer-digit,
  .timer-root[data-fs="true"] .timer-digit {
    font-size: clamp(1.35rem, calc((100vw - 1.5rem) / 8.9), 3.3rem);
    padding: .35rem .34rem .45rem;
    min-width: 1.6ch;
    letter-spacing: .5px;
  }
  .timer-root.is-fullscreen .timer-separator,
  .timer-root[data-fs="true"] .timer-separator {
    margin: 0 .1rem;
  }
}

/* 5. Quando a altura é o limitante (landscape baixo) */
@media (max-height: 480px) and (orientation: landscape) {
  .timer-root.is-fullscreen .timer-progress-outer,
  .timer-root[data-fs="true"] .timer-progress-outer {
    --ring-size: min(80vh, 90vw);
    width: var(--ring-size);
    height: var(--ring-size);
  }
  .timer-root.is-fullscreen .timer-digit,
  .timer-root[data-fs="true"] .timer-digit {
    font-size: clamp(1.2rem, calc((100vh - 2rem) / 5.5), 3.4rem);
  }
}

/* 6. Modo “compact” automático se mesmo assim estourar – usar classe aplicada por JS (ver script) */
.timer-root.is-fullscreen .timer-digital.compact .timer-digit,
.timer-root[data-fs="true"] .timer-digital.compact .timer-digit {
  font-size: clamp(1.1rem, calc((100vw - 1rem) / 9.4), 2.6rem);
  padding: .3rem .3rem .38rem;
  min-width: 1.45ch;
}
.timer-root.is-fullscreen .timer-digital.compact,
.timer-root[data-fs="true"] .timer-digital.compact {
  gap: .2rem;
}

/* 7. Safe areas (iPhone notch etc.) */
.timer-root.is-fullscreen .timer-display-wrapper,
.timer-root[data-fs="true"] .timer-display-wrapper {
  padding-top: calc(env(safe-area-inset-top) + 0.6rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 0.6rem);
  padding-left: calc(env(safe-area-inset-left) + 0.6rem);
  padding-right: calc(env(safe-area-inset-right) + 0.6rem);
}

/* 8. Evitar overflow horizontal forçando shrink onde necessário */
.timer-root.is-fullscreen .timer-digital,
.timer-root[data-fs="true"] .timer-digital {
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: visible;
}

/* 9. Garantir que o anel nunca cubra os dígitos (reafirma layering) */
.timer-root.is-fullscreen .timer-progress-ring,
.timer-root.is-fullscreen .timer-progress-glow,
.timer-root.is-fullscreen .timer-progress-outer::before,
.timer-root[data-fs="true"] .timer-progress-ring,
.timer-root[data-fs="true"] .timer-progress-glow,
.timer-root[data-fs="true"] .timer-progress-outer::before {
  z-index: 0;
}
.timer-root.is-fullscreen .timer-digital,
.timer-root[data-fs="true"] .timer-digital {
  z-index: 2;
  position: absolute;
}

/* 10. Proteção contra zoom forçado do iOS em inputs (não altera header) */
@supports (-webkit-touch-callout: none) {
  .timer-root input {
    font-size: 16px;
  }
}

/* 11. Pequena redução de sombra em telas muito pequenas para não “espalhar” */
@media (max-width: 380px) {
  .timer-root.is-fullscreen .timer-digit,
  .timer-root[data-fs="true"] .timer-digit {
    box-shadow: 0 3px 10px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  }
}


.page-title, .timer-title {
  color: var(--text-white);
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
  letter-spacing: 0.5px;
  text-align: center;
  margin-top: 2rem;
  
}

/* -------------- REDUCED MOTION -------------- */
@media (prefers-reduced-motion: reduce) {
  .educational-toggle,
  .educational-content,
  .educational-content__inner,
  .educational-list li::before {
    transition: none !important;
    animation: none !important;
  }
  .educational-toggle:hover {
    transform: none;
  }
}

/* -------------- ALTO CONTRASTE (preferência do usuário) -------------- */
@media (prefers-contrast: more) {
  .educational-section {
    border: 2px solid var(--educ-border-accent);
  }
  .educational-toggle {
    border: 2px solid var(--educ-border-accent);
  }
  .educational-content {
    border: 2px solid var(--educ-border-accent);
  }
  .educational-subtitle::after {
    background: var(--alarm-primary);
  }
}

/* -------------- RESPONSIVIDADE -------------- */
@media (max-width: 680px) {
  .educational-section {
    padding: 2.1rem 1.25rem 2.15rem;
    border-radius: 22px;
  }
  .educational-toggle {
    font-size: 1rem;
    padding: .95rem 1rem;
  }
  .educational-content {
    padding: 1.3rem 1.2rem 1.55rem;
  }
  .educational-list li {
    padding-left: 1.4rem;
  }
  .educational-list li::before {
    width: 8px;
    height: 8px;
  }
}



/* ================================================================
   TEMPORIZADOR – MODO ESCURO (Consolidado Neon / Anti-Overflow)
   ================================================================ */

/* Painel principal */
:not([data-theme="light"]) .timer-panel,
:not([data-theme="light"]) .timer-container {
  background: var(--gradient-dark);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 20px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Linha superior neon */
:not([data-theme="light"]) .timer-panel::before,
:not([data-theme="light"]) .timer-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-primary);
  z-index: 2;
}

/* Wrapper do display (anel + dígitos) */
:not([data-theme="light"]) .timer-display-wrapper {
  --ring-size: clamp(240px, 56vw, 400px);
  background: rgba(0,0,0,0.9);
  border: 3px solid var(--alarm-primary);
  border-radius: 20px;
  padding: 2.2rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 650px;
  box-shadow: var(--shadow-glow), inset 0 0 20px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  overflow: visible; /* permite glow sem clipping */
}

/* (Removido shimmer: não há ::after nem animação) */

/* Anel */
:not([data-theme="light"]) .timer-progress-outer {
  width: var(--ring-size);
  height: var(--ring-size);
  aspect-ratio: 1/1;
  position: relative;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 22px rgba(0,212,255,0.45));
  overflow: hidden; /* contém os dígitos dentro do círculo */
  z-index: 0;
}

/* Brilho interior sutil */
:not([data-theme="light"]) .timer-progress-outer::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(0,212,255,0.18), transparent 70%);
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Glow animado (mantido, mas se quiser remover basta comentar) */
:not([data-theme="light"]) .timer-progress-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(0,212,255,.25),
    rgba(0,212,255,.02),
    rgba(0,212,255,.25),
    rgba(0,212,255,.02),
    rgba(0,212,255,.25));
  animation: spinSlow 30s linear infinite;
  filter: blur(24px) saturate(190%);
  opacity: .55;
  z-index: 0;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Ring strokes */
:not([data-theme="light"]) .timer-progress-ring-bg {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 10;
}
:not([data-theme="light"]) .timer-progress-ring-fg {
  stroke: var(--alarm-primary);
  stroke-width: 10;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 12px rgba(0,212,255,0.85))
    drop-shadow(0 0 22px rgba(0,153,204,0.6));
  transition: stroke-dashoffset .9s cubic-bezier(.4,.85,.25,1);
}

/* Camada de dígitos (anti-overflow) */
:not([data-theme="light"]) .timer-digital {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--fit-scale,1));
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, calc(var(--ring-size) / 6.4), 4.4rem); /* base adaptativa */
  line-height: 1;
  z-index: 3;
  max-width: calc(var(--ring-size) * 0.90);
}

/* Dígitos – sem background, sem min-width rígida */
:not([data-theme="light"]) .timer-digit {
  background: none;
  border: none;
  padding: .18rem .26rem .30rem;
  font-weight: 700;
  font-size: 1em;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-align: center;
  min-width: 0;
  flex: 0 1 auto;
  text-shadow:
    0 0 20px rgba(0,212,255,0.85),
    0 0 40px rgba(0,212,255,0.45),
    2px 2px 4px rgba(0,0,0,0.8);
  overflow: visible;
  border-radius: 0; /* garante nenhum fundo arredondado apareça */
}

/* Separadores */
:not([data-theme="light"]) .timer-separator {
  font-size: 0.72em;
  font-weight: 300;
  color: #ffffff;
  margin: 0 .12rem;
  animation: timerSepBlink 1s infinite;
  text-shadow:
    0 0 15px rgba(0,212,255,1),
    0 0 30px rgba(0,212,255,0.5);
}
@keyframes timerSepBlink {
  0%,50% { opacity: 1; color: #ffffff; }
  51%,100% { opacity: .45; color: var(--alarm-primary); text-shadow: 0 0 10px rgba(0,212,255,0.65); }
}

/* Estado final pulse */
:not([data-theme="light"]) .timer-finished .timer-digit {
  animation: timerFinishedPulse 1.25s ease-in-out infinite;
}
@keyframes timerFinishedPulse {
  0%,100% { filter: brightness(1); }
  55% {
    filter: brightness(1.5);
    text-shadow:
      0 0 24px rgba(0,212,255,1),
      0 0 52px rgba(0,212,255,0.75),
      2px 2px 6px rgba(0,0,0,0.85);
  }
}

/* Botões */
:not([data-theme="light"]) .timer-btn-primary,
:not([data-theme="light"]) .timer-btn-secondary,
:not([data-theme="light"]) .timer-btn-tertiary {
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(0,212,255,0.35);
  color: #ffffff;
  font-weight: 600;
  font-family: var(--font-primary);
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 14px;
  padding: .9rem 1.4rem;
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.15),
    0 4px 18px -6px rgba(0,212,255,0.45),
    inset 0 0 12px rgba(0,0,0,0.6);
  transition: var(--transition-medium);
  position: relative;
}

:not([data-theme="light"]) .timer-btn-primary {
  background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(0,153,204,0.15));
}

:not([data-theme="light"]) .timer-btn-primary:hover,
:not([data-theme="light"]) .timer-btn-secondary:hover,
:not([data-theme="light"]) .timer-btn-tertiary:hover,
:not([data-theme="light"]) .timer-btn-primary:focus-visible,
:not([data-theme="light"]) .timer-btn-secondary:focus-visible,
:not([data-theme="light"]) .timer-btn-tertiary:focus-visible {
  transform: translateY(-4px);
  border-color: var(--alarm-primary);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.4),
    0 10px 28px -8px rgba(0,212,255,0.65),
    inset 0 0 14px rgba(0,0,0,0.5);
}

:not([data-theme="light"]) .timer-btn-primary:active,
:not([data-theme="light"]) .timer-btn-secondary:active,
:not([data-theme="light"]) .timer-btn-tertiary:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.4),
    0 4px 16px -6px rgba(0,212,255,0.55),
    inset 0 0 18px rgba(0,0,0,0.65);
}

/* Presets */
:not([data-theme="light"]) .timer-preset-btn {
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(0,212,255,0.28);
  color: #cfeff9;
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.12) inset,
    0 2px 10px -4px rgba(0,212,255,0.35);
  transform: none;
  font-family: var(--font-primary);
}
:not([data-theme="light"]) .timer-preset-btn:hover,
:not([data-theme="light"]) .timer-preset-btn:focus-visible {
  background: rgba(0,212,255,0.15);
  border-color: var(--alarm-primary);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.35),
    0 6px 18px -6px rgba(0,212,255,0.55);
}
:not([data-theme="light"]) .timer-preset-btn::after { display: none; }

/* Inputs */
:not([data-theme="light"]) .timer-input {
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(0,212,255,0.28);
  color: var(--text-white);
  font-family: var(--font-mono);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}
:not([data-theme="light"]) .timer-input:focus {
  border-color: var(--alarm-primary);
  outline: 2px solid rgba(0,212,255,0.35);
  outline-offset: 2px;
}

/* Fieldset / legend */
:not([data-theme="light"]) .timer-fieldset {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(0,212,255,0.25);
  backdrop-filter: blur(6px);
}
:not([data-theme="light"]) .timer-legend,
:not([data-theme="light"]) legend.timer-legend {
  color: var(--alarm-primary);
  letter-spacing: .6px;
  text-shadow: 0 0 8px rgba(0,212,255,0.55);
}

/* Status */
:not([data-theme="light"]) #timerStatus,
:not([data-theme="light"]) .timer-status,
:not([data-theme="light"]) .timer-hint {
  color: #7ad7ea;
  text-shadow: 0 0 6px rgba(0,212,255,0.35);
}

/* Ações */
:not([data-theme="light"]) .timer-actions {
  gap: .85rem;
  margin-top: .6rem;
}

/* Fullscreen */
:not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
:not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
  --ring-size: min(65vmin, 560px);
  width: min(90vw, 880px);
  border-radius: 28px;
  padding: clamp(1.4rem,3vw,3rem);
  border: 3px solid var(--alarm-primary);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.35),
    0 0 60px -10px rgba(0,212,255,0.55);
}
@media (max-width: 520px) {
  :not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
  :not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
    --ring-size: clamp(240px, 80vw, 420px);
  }
}
@media (max-width: 380px) {
  :not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
  :not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
    --ring-size: clamp(210px, 82vw, 340px);
  }
}

/* Breakpoints (não fullscreen) */
@media (max-width: 480px) {
  :not([data-theme="light"]) .timer-display-wrapper {
    --ring-size: clamp(210px, 70vw, 340px);
    padding: 1.6rem 1.2rem 1.8rem;
  }
  :not([data-theme="light"]) .timer-digital {
    gap: 0.55rem;
    font-size: clamp(1.3rem, calc(var(--ring-size)/7), 2.9rem);
    max-width: calc(var(--ring-size) * 0.92);
  }
  :not([data-theme="light"]) .timer-separator {
    font-size: 0.68em;
    margin: 0 .1rem;
  }
}
@media (max-width: 360px) {
  :not([data-theme="light"]) .timer-digital {
    gap: 0.40rem;
    font-size: clamp(1.15rem, calc(var(--ring-size)/7.4), 2.4rem);
    max-width: calc(var(--ring-size) * 0.94);
  }
  :not([data-theme="light"]) .timer-separator {
    font-size: 0.64em;
  }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  :not([data-theme="light"]) .timer-progress-glow,
  :not([data-theme="light"]) .timer-digit.changed,
  :not([data-theme="light"]) .timer-finished .timer-digit,
  :not([data-theme="light"]) .timer-separator {
    animation: none !important;
  }
}


/* ================================================================
   PATCH – Centralização e Responsividade do .timer-display-wrapper
   (Modo escuro)
   ================================================================ */

/* 1. Tornar o painel pai um flex container que centraliza o display */
:not([data-theme="light"]) .timer-panel,
:not([data-theme="light"]) .timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* fica natural; o wrapper controla a própria altura */
  gap: 2rem;
}

/* 2. Wrapper: largura passa a ser derivada do anel + padding, e nunca maior que 100% */
:not([data-theme="light"]) .timer-display-wrapper {
  --timer-wrapper-pad: 2.2rem; /* espelho do padding principal (ajustado em breakpoints abaixo) */
  width: min(calc(var(--ring-size) + 2 * var(--timer-wrapper-pad)), 100%);
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  /* Garantir que pequenas discrepâncias de subpixel não “puxem” para um lado */
  transform: translateZ(0);
}

/* 3. Ajustar padding e largura em telas menores (evita desalinhamento por sobra lateral) */
@media (max-width: 600px) {
  :not([data-theme="light"]) .timer-display-wrapper {
    --timer-wrapper-pad: 1.8rem;
    padding: 1.8rem 1.4rem 2rem;
    width: min(calc(var(--ring-size) + 2 * var(--timer-wrapper-pad)), 100%);
  }
}

@media (max-width: 480px) {
  :not([data-theme="light"]) .timer-display-wrapper {
    --timer-wrapper-pad: 1.4rem;
    padding: 1.4rem 1.1rem 1.7rem;
  }
}

@media (max-width: 360px) {
  :not([data-theme="light"]) .timer-display-wrapper {
    --timer-wrapper-pad: 1.1rem;
    padding: 1.1rem .9rem 1.4rem;
  }
}

/* 4. Forçar centralização também quando houver outros elementos acima/abaixo */
:not([data-theme="light"]) .timer-display-wrapper + * {
  align-self: center;
}

/* 5. Fullscreen: centro absoluto usando flex no contêiner raíz do temporizador
   (ajuste se seu wrapper raiz tiver outro nome) */
:not([data-theme="light"]) .is-fullscreen,
:not([data-theme="light"]) [data-fs="true"] {
  /* Se já houver estilos globais, manter apenas as propriedades necessárias */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  box-sizing: border-box;
}

/* 6. No fullscreen, remover possíveis deslocamentos herdados do layout externo */
:not([data-theme="light"]) .is-fullscreen .timer-panel,
:not([data-theme="light"]) [data-fs="true"] .timer-panel,
:not([data-theme="light"]) .is-fullscreen .timer-container,
:not([data-theme="light"]) [data-fs="true"] .timer-container {
  width: 100%;
  max-width: none;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  margin: 0;
}

/* 7. Wrapper em fullscreen: revalida largura baseada na nova --ring-size do fullscreen */
:not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
:not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
  --timer-wrapper-pad: clamp(1.4rem, 2.6vw, 2.6rem);
  width: min(calc(var(--ring-size) + 2 * var(--timer-wrapper-pad)), 100%);
  margin: 0 auto;
  /* centralização vertical já ocorre pelo flex do ancestor */
}

/* 8. Garantir que o anel nunca “salte” lateralmente por subpixel */
:not([data-theme="light"]) .timer-progress-outer {
  margin: 0 auto;
}

/* 9. Pequeno ajuste: impedir que gap exagerado + letter-spacing cause micro overflow
      (ajuda a manter centrado visualmente) */
:not([data-theme="light"]) .timer-digital {
  max-width: calc(var(--ring-size) * 0.92);
}

/* 10. Caso exista alguma margem externa aplicada via JS ou classes anteriores, neutralizar */
:not([data-theme="light"]) .timer-display-wrapper,
:not([data-theme="light"]) .timer-progress-outer {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 11. Se houver rolagem vertical no fullscreen e causar leve offset central,
       forçamos meta correção com scroll-margin (para elementos focados) */
:not([data-theme="light"]) .timer-display-wrapper {
  scroll-margin-top: 4vh;
}

/* ================================================================
   PATCH – Fullscreen Anti-Overflow (Modo Escuro)
   ================================================================ */

/* 1. Variável dedicada para fullscreen (não conflita com --ring-size comum) */
:not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
:not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
  --fs-ring-size: min(65vmin, 560px);
}

/* 2. Ajustes de breakpoints para fullscreen (mobile estreito) */
@media (max-width: 520px) {
  :not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
  :not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
    --fs-ring-size: clamp(240px, 80vw, 420px);
  }
}
@media (max-width: 380px) {
  :not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
  :not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
    --fs-ring-size: clamp(210px, 82vw, 340px);
  }
}

/* 3. Anel usando a nova variável (prioriza fullscreen) */
:not([data-theme="light"]) .is-fullscreen .timer-progress-outer,
:not([data-theme="light"]) [data-fs="true"] .timer-progress-outer {
  width: var(--fs-ring-size) !important;
  height: var(--fs-ring-size) !important;
}

/* 4. Dígitos em fullscreen – base conservadora (fator /7.4) + limite de largura */
:not([data-theme="light"]) .is-fullscreen .timer-digital,
:not([data-theme="light"]) [data-fs="true"] .timer-digital {
  font-size: clamp(1.4rem, calc(var(--fs-ring-size) / 7.4), 4rem) !important;
  max-width: calc(var(--fs-ring-size) * 0.86) !important;
  gap: clamp(0.28rem, calc(var(--fs-ring-size) / 120), 0.6rem);
  --fs-gap: clamp(0.28rem, calc(var(--fs-ring-size) / 120), 0.6rem); /* usado pelo JS para ajuste fino */
  letter-spacing: 0.4px;
  padding: 0;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(var(--fit-scale, 1)) !important;
}

/* 5. Dígitos individuais – remover qualquer rigidez residual */
:not([data-theme="light"]) .is-fullscreen .timer-digit,
:not([data-theme="light"]) [data-fs="true"] .timer-digit {
  min-width: 0 !important;
  padding: .16rem .22rem .24rem;
  font-size: 1em !important;
  letter-spacing: 0.4px;
}

/* 6. Separadores menores em fullscreen */
:not([data-theme="light"]) .is-fullscreen .timer-separator,
:not([data-theme="light"]) [data-fs="true"] .timer-separator {
  font-size: 0.68em !important;
  margin: 0 .1rem !important;
}

/* 7. Modo “apertado” automático (classe aplicada via JS quando escala < 0.82) */
:not([data-theme="light"]) .is-fullscreen .timer-digital.tight,
:not([data-theme="light"]) [data-fs="true"] .timer-digital.tight {
  gap: clamp(0.18rem, calc(var(--fs-ring-size) / 180), 0.38rem);
  --fs-gap: clamp(0.18rem, calc(var(--fs-ring-size) / 180), 0.38rem);
  letter-spacing: 0.25px;
}
:not([data-theme="light"]) .is-fullscreen .timer-digital.tight .timer-digit,
:not([data-theme="light"]) [data-fs="true"] .timer-digital.tight .timer-digit {
  letter-spacing: 0.25px;
  padding: .14rem .18rem .20rem;
}

/* 8. Micro breakpoint extra-fullscreen para telas muito estreitas (ex.: 320px) */
@media (max-width: 340px) {
  :not([data-theme="light"]) .is-fullscreen .timer-digital,
  :not([data-theme="light"]) [data-fs="true"] .timer-digital {
    font-size: clamp(1.15rem, calc(var(--fs-ring-size)/7.8), 2.2rem) !important;
    max-width: calc(var(--fs-ring-size) * 0. Nine); /* fallback: corrigir se for lido errado -> 0.86 padrão já aplica */
  }
}

/* 9. Garantir centralização absoluta priorizando esta regra */
:not([data-theme="light"]) .is-fullscreen .timer-digital,
:not([data-theme="light"]) [data-fs="true"] .timer-digital {
  left: 50% !important;
  top: 50% !important;
}

/* 10. Caso alguma regra anterior imponha overflow:hidden no wrapper que corte brilho, manter visível */
:not([data-theme="light"]) .is-fullscreen .timer-display-wrapper,
:not([data-theme="light"]) [data-fs="true"] .timer-display-wrapper {
  overflow: visible;
}
/*pulsação durante o toque do temporizador*/
/* Remover (ou sobrescrever) animação antiga */
:not([data-theme="light"]) .timer-finished .timer-digit {
  animation: none;
  filter: brightness(1);
  text-shadow:
    0 0 18px rgba(0,212,255,.85),
    0 0 36px rgba(0,212,255,.45),
    2px 2px 4px rgba(0,0,0,.8);
  transition: filter .18s ease, text-shadow .18s ease;
}

:not([data-theme="light"]) .timer-finished .timer-digit.pulse {
  filter: brightness(1.55);
  text-shadow:
    0 0 26px rgba(0,212,255,1),
    0 0 60px rgba(0,212,255,.75),
    2px 2px 6px rgba(0,0,0,.85);
}

/* Opcional: classe para “encerrar” pulso quando sair do estado final */
:not([data-theme="light"]) .timer-finished-end .timer-digit {
  filter: brightness(1);
  text-shadow:
    0 0 14px rgba(0,212,255,.6),
    0 0 28px rgba(0,212,255,.3);
  transition: filter .4s ease, text-shadow .6s ease;
}

/* ================================================================
   PATCH – Fullscreen (Modo CLARO) idêntico ao Modo ESCURO
   Cole APÓS os patches atuais. Se tiver um patch anterior de
   "Fullscreen Claro idêntico ao Escuro", REMOVA-O para evitar conflito.
   ================================================================ */

/* 1) Painéis base (mesmas regras do escuro) */
[data-theme="light"] .timer-panel,
[data-theme="light"] .timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* o wrapper controla a própria altura */
  gap: 2rem;
}

/* 2) Wrapper: largura derivada do anel + padding; nunca > 100% */
[data-theme="light"] .timer-display-wrapper {
  --timer-wrapper-pad: 2.2rem; /* espelho do padding principal */
  width: min(calc(var(--ring-size) + 2 * var(--timer-wrapper-pad)), 100%);
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  transform: translateZ(0); /* evita desalinhamento por subpixel */
}

/* 3) Breakpoints do wrapper (iguais ao escuro) */
@media (max-width: 600px) {
  [data-theme="light"] .timer-display-wrapper {
    --timer-wrapper-pad: 1.8rem;
    padding: 1.8rem 1.4rem 2rem;
    width: min(calc(var(--ring-size) + 2 * var(--timer-wrapper-pad)), 100%);
  }
}
@media (max-width: 480px) {
  [data-theme="light"] .timer-display-wrapper {
    --timer-wrapper-pad: 1.4rem;
    padding: 1.4rem 1.1rem 1.7rem;
  }
}
@media (max-width: 360px) {
  [data-theme="light"] .timer-display-wrapper {
    --timer-wrapper-pad: 1.1rem;
    padding: 1.1rem .9rem 1.4rem;
  }
}

/* 4) Forçar centralização também quando houver elementos acima/abaixo */
[data-theme="light"] .timer-display-wrapper + * {
  align-self: center;
}

/* 5) Fullscreen: contêiner raiz centralizado (par com o escuro) */
[data-theme="light"] .is-fullscreen,
[data-theme="light"] [data-fs="true"] {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  box-sizing: border-box;
}

/* 6) Neutralizar deslocamentos herdados no fullscreen */
[data-theme="light"] .is-fullscreen .timer-panel,
[data-theme="light"] [data-fs="true"] .timer-panel,
[data-theme="light"] .is-fullscreen .timer-container,
[data-theme="light"] [data-fs="true"] .timer-container {
  width: 100%;
  max-width: none;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  margin: 0;
}

/* 7) Wrapper no fullscreen: largura via --ring-size (como no escuro) */
[data-theme="light"] .is-fullscreen .timer-display-wrapper,
[data-theme="light"] [data-fs="true"] .timer-display-wrapper {
  --timer-wrapper-pad: clamp(1.4rem, 2.6vw, 2.6rem);
  width: min(calc(var(--ring-size) + 2 * var(--timer-wrapper-pad)), 100%);
  margin: 0 auto;
  overflow: visible; /* evitar corte de brilhos/efeitos */
}

/* 8) Nunca “saltar” lateralmente por subpixel */
[data-theme="light"] .timer-progress-outer {
  margin: 0 auto;
}

/* 9) Evitar micro overflow dos dígitos */
[data-theme="light"] .timer-digital {
  max-width: calc(var(--ring-size) * 0.92);
}

/* 10) Neutralizar margens externas herdadas */
[data-theme="light"] .timer-display-wrapper,
[data-theme="light"] .timer-progress-outer {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 11) Correção de foco quando houver rolagem em fullscreen */
[data-theme="light"] .timer-display-wrapper {
  scroll-margin-top: 4vh;
}

/* ================================================================
   PATCH – Anti-Overflow (Fullscreen) – Paridade de medidas
   ================================================================ */

/* 12) Variável de tamanho do anel para fullscreen (igual ao escuro) */
[data-theme="light"] .is-fullscreen .timer-display-wrapper,
[data-theme="light"] [data-fs="true"] .timer-display-wrapper {
  --fs-ring-size: min(65vmin, 560px);
}
@media (max-width: 520px) {
  [data-theme="light"] .is-fullscreen .timer-display-wrapper,
  [data-theme="light"] [data-fs="true"] .timer-display-wrapper {
    --fs-ring-size: clamp(240px, 80vw, 420px);
  }
}
@media (max-width: 380px) {
  [data-theme="light"] .is-fullscreen .timer-display-wrapper,
  [data-theme="light"] [data-fs="true"] .timer-display-wrapper {
    --fs-ring-size: clamp(210px, 82vw, 340px);
  }
}

/* 13) Aplicar --fs-ring-size ao anel */
[data-theme="light"] .is-fullscreen .timer-progress-outer,
[data-theme="light"] [data-fs="true"] .timer-progress-outer {
  width: var(--fs-ring-size) !important;
  height: var(--fs-ring-size) !important;
}

/* 14) Dígitos em fullscreen (mesmo cálculo/fatores do escuro) */
[data-theme="light"] .is-fullscreen .timer-digital,
[data-theme="light"] [data-fs="true"] .timer-digital {
  font-size: clamp(1.4rem, calc(var(--fs-ring-size) / 7.4), 4rem) !important;
  max-width: calc(var(--fs-ring-size) * 0.86) !important;
  gap: clamp(0.28rem, calc(var(--fs-ring-size) / 120), 0.6rem);
  --fs-gap: clamp(0.28rem, calc(var(--fs-ring-size) / 120), 0.6rem);
  letter-spacing: 0.4px;
  padding: 0;
  white-space: nowrap;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(var(--fit-scale, 1)) !important;
}

/* 15) Dígitos individuais */
[data-theme="light"] .is-fullscreen .timer-digit,
[data-theme="light"] [data-fs="true"] .timer-digit {
  min-width: 0 !important;
  padding: .16rem .22rem .24rem;
  font-size: 1em !important;
  letter-spacing: 0.4px;
}

/* 16) Separadores menores */
[data-theme="light"] .is-fullscreen .timer-separator,
[data-theme="light"] [data-fs="true"] .timer-separator {
  font-size: 0.68em !important;
  margin: 0 .1rem !important;
}

/* 17) Modo “apertado” automático */
[data-theme="light"] .is-fullscreen .timer-digital.tight,
[data-theme="light"] [data-fs="true"] .timer-digital.tight {
  gap: clamp(0.18rem, calc(var(--fs-ring-size) / 180), 0.38rem);
  --fs-gap: clamp(0.18rem, calc(var(--fs-ring-size) / 180), 0.38rem);
  letter-spacing: 0.25px;
}
[data-theme="light"] .is-fullscreen .timer-digital.tight .timer-digit,
[data-theme="light"] [data-fs="true"] .timer-digital.tight .timer-digit {
  letter-spacing: 0.25px;
  padding: .14rem .18rem .20rem;
}

/* 18) Micro-breakpoint extra (ex.: 320px) */
@media (max-width: 340px) {
  [data-theme="light"] .is-fullscreen .timer-digital,
  [data-theme="light"] [data-fs="true"] .timer-digital {
    font-size: clamp(1.15rem, calc(var(--fs-ring-size) / 7.8), 2.2rem) !important;
    max-width: calc(var(--fs-ring-size) * 0.86) !important;
  }
}






/* ================================================================
   TEMPORIZADOR – MODO CLARO
   Baseado no visual do despertador em tema claro
   ================================================================ */

[data-theme="light"] .timer-panel,
[data-theme="light"] .timer-container {
  background: var(--gradient-dark); /* no tema claro é um gradiente claro */
  border: 1px solid rgba(14,165,233,0.8); /* mix de alarm-primary */
  border-radius: 20px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Linha superior azul */
[data-theme="light"] .timer-panel::before,
[data-theme="light"] .timer-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-primary);
  z-index: 2;
}

/* Wrapper principal (anel + dígitos) */
[data-theme="light"] .timer-display-wrapper {
  --ring-size: clamp(240px, 56vw, 400px);
  background: var(--overlay-light);
  backdrop-filter: blur(6px);
  border: 2px solid var(--border-blue);
  border-radius: 20px;
  padding: 2.1rem;
  box-shadow:
    0 2px 4px rgba(15,23,42,0.08),
    0 6px 18px rgba(15,23,42,0.10),
    inset 0 0 0 1px rgba(14,165,233,0.10);
  max-width: 640px;
  width: min(calc(var(--ring-size) + 4.2rem), 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-sizing: border-box;
  color: var(--text-white);
  font-family: var(--font-primary);
}

/* Anel principal */
[data-theme="light"] .timer-progress-outer {
  width: var(--ring-size);
  height: var(--ring-size);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(14,165,233,0.20));
  z-index: 0;
  margin: 0 auto;
}

/* Brilho interno suave */
[data-theme="light"] .timer-progress-outer::before {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(14,165,233,0.15), transparent 70%);
  opacity: .55;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Glow animado leve (se quiser remover, comente o bloco) */
[data-theme="light"] .timer-progress-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(14,165,233,.22),
    rgba(14,165,233,.03),
    rgba(14,165,233,.22),
    rgba(14,165,233,.03),
    rgba(14,165,233,.22));
  animation: spinLightRing 28s linear infinite;
  filter: blur(18px) saturate(150%);
  opacity: .45;
  z-index: 0;
}
@keyframes spinLightRing { to { transform: rotate(360deg); } }

/* Ring strokes */
[data-theme="light"] .timer-progress-ring-bg {
  stroke: rgba(59,130,246,0.18);
  stroke-width: 10;
}
[data-theme="light"] .timer-progress-ring-fg {
  stroke: var(--alarm-primary);
  stroke-width: 10;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 6px rgba(14,165,233,0.55))
    drop-shadow(0 0 14px rgba(56,189,248,0.35));
  transition: stroke-dashoffset .9s cubic-bezier(.4,.85,.25,1);
}

/* Camada dos dígitos (anti-overflow) */
[data-theme="light"] .timer-digital {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--fit-scale,1));
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.55rem, calc(var(--ring-size) / 6.4), 4.2rem);
  line-height: 1;
  z-index: 3;
  max-width: calc(var(--ring-size) * 0.90);
  color: var(--text-white);
}

/* Dígitos */
[data-theme="light"] .timer-digit {
  background: none;
  border: none;
  padding: .14rem .22rem .24rem;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.45px;
  min-width: 0;
  flex: 0 1 auto;
  text-align: center;
  color: var(--text-white);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 0 10px rgba(14,165,233,0.25);
  transition: none;
}

/* Separadores */
[data-theme="light"] .timer-separator {
  font-size: 0.70em;
  font-weight: 400;
  color: var(--alarm-primary);
  margin: 0 .10rem;
  text-shadow:
    0 0 6px rgba(14,165,233,0.35),
    0 1px 0 rgba(255,255,255,0.5);
  animation: sepBlinkLight 1s infinite;
}
@keyframes sepBlinkLight {
  0%,50% { opacity: 1; }
  51%,100% { opacity: .55; }
}

/* Estado final (pulso sincronizável) */
[data-theme="light"] .timer-finished .timer-digit {
  animation: finishPulseLight 1.1s ease-in-out infinite;
}
@keyframes finishPulseLight {
  0%,100% {
    filter: brightness(1);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.6),
      0 0 14px rgba(14,165,233,0.35);
  }
  50% {
    filter: brightness(1.35);
    text-shadow:
      0 1px 2px rgba(255,255,255,0.9),
      0 0 22px rgba(14,165,233,0.55);
  }
}

/* Botões */
[data-theme="light"] .timer-btn-primary,
[data-theme="light"] .timer-btn-secondary,
[data-theme="light"] .timer-btn-tertiary {
  background: linear-gradient(135deg, rgba(14,165,233,0.16), rgba(59,130,246,0.12));
  border: 1px solid var(--border-blue);
  color: var(--text-white);
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 14px;
  padding: .85rem 1.35rem;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.08),
    0 4px 14px -6px rgba(14,165,233,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.6);
  transition: background var(--transition-medium), transform var(--transition-medium), box-shadow var(--transition-medium);
}
[data-theme="light"] .timer-btn-primary:hover,
[data-theme="light"] .timer-btn-secondary:hover,
[data-theme="light"] .timer-btn-tertiary:hover,
[data-theme="light"] .timer-btn-primary:focus-visible,
[data-theme="light"] .timer-btn-secondary:focus-visible,
[data-theme="light"] .timer-btn-tertiary:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 3px 10px -4px rgba(14,165,233,0.55),
    0 0 0 1px var(--border-blue);
}
[data-theme="light"] .timer-btn-primary:active,
[data-theme="light"] .timer-btn-secondary:active,
[data-theme="light"] .timer-btn-tertiary:active {
  transform: translateY(0);
  box-shadow:
    0 2px 6px -2px rgba(14,165,233,0.45),
    0 0 0 1px var(--border-blue);
}

/* Preset buttons */
[data-theme="light"] .timer-preset-btn {
  background: rgba(255,255,255,0.85);
  border:  1px solid rgba(14,165,233,0.4) ;
  color: var(--text-gray);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.7);
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: .3px;
  transition: var(--transition-fast);
}
[data-theme="light"] .timer-preset-btn:hover,
[data-theme="light"] .timer-preset-btn:focus-visible {
  color: var(--text-white);
  border-color: var(--border-blue-strong);
  background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(59,130,246,0.10));
  box-shadow:
    0 3px 8px -4px rgba(14,165,233,0.4),
    0 0 0 1px var(--border-blue-strong);
}

/* Inputs */
[data-theme="light"] .timer-input {
  background: #ffffff;
  border: 1px solid rgba(14,165,233,0.8);
  color: var(--text-white);
  font-family: var(--font-mono);
  border-radius: 10px;
  padding: .65rem .85rem;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.08);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
[data-theme="light"] .timer-input:focus {
  border-color: var(--border-blue-strong);
  outline: 2px solid rgba(14,165,233,0.35);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px var(--border-blue-strong),
    0 2px 8px -2px rgba(14,165,233,0.35);
}

/* Status / hints */
[data-theme="light"] #timerStatus,
[data-theme="light"] .timer-status,
[data-theme="light"] .timer-hint {
  color: var(--text-gray);
  font-size: .64rem;
  text-shadow: none;
  letter-spacing: .3px;
}

/* Fieldset */
[data-theme="light"] .timer-fieldset {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(14, 165, 233, 0.6);

  border-radius: var(--timer-radius-md);
  padding: 1rem 1rem 1.05rem;
  backdrop-filter: blur(4px);
}
[data-theme="light"] .timer-legend,
[data-theme="light"] legend.timer-legend {
  color: var(--alarm-primary);
  letter-spacing: .55px;
  font-weight: 600;
}

/* Ações */
[data-theme="light"] .timer-actions {
  gap: .75rem;
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Fullscreen */
[data-theme="light"] .is-fullscreen .timer-display-wrapper,
[data-theme="light"] [data-fs="true"] .timer-display-wrapper {
  --ring-size: min(65vmin, 540px);
  width: min(90vw, 860px);
  padding: clamp(1.3rem, 3vw, 2.6rem);
  border-radius: 26px;
  border: 2px solid var(--border-blue-strong);
  box-shadow:
    0 4px 14px rgba(15,23,42,0.12),
    0 0 0 1px rgba(59,130,246,0.55);
}

@media (max-width: 520px) {
  [data-theme="light"] .is-fullscreen .timer-display-wrapper,
  [data-theme="light"] [data-fs="true"] .timer-display-wrapper {
    --ring-size: clamp(240px, 80vw, 420px);
  }
}

@media (max-width: 380px) {
  [data-theme="light"] .is-fullscreen .timer-display-wrapper,
  [data-theme="light"] [data-fs="true"] .timer-display-wrapper {
    --ring-size: clamp(210px, 82vw, 340px);
  }
}

/* Responsividade (não fullscreen) */
@media (max-width: 480px) {
  [data-theme="light"] .timer-display-wrapper {
    --ring-size: clamp(210px, 70vw, 340px);
    padding: 1.6rem 1.15rem 1.8rem;
    width: min(calc(var(--ring-size) + 3.2rem), 100%);
  }
  [data-theme="light"] .timer-digital {
    gap: 0.5rem;
    font-size: clamp(1.25rem, calc(var(--ring-size)/7), 2.8rem);
    max-width: calc(var(--ring-size) * 0.92);
  }
  [data-theme="light"] .timer-separator {
    font-size: 0.66em;
  }
}

@media (max-width: 360px) {
  [data-theme="light"] .timer-digital {
    gap: 0.38rem;
    font-size: clamp(1.05rem, calc(var(--ring-size)/7.4), 2.3rem);
    max-width: calc(var(--ring-size) * 0.94);
  }
  [data-theme="light"] .timer-separator {
    font-size: 0.62em;
  }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .timer-progress-glow,
  [data-theme="light"] .timer-finished .timer-digit,
  [data-theme="light"] .timer-separator {
    animation: none !important;
  }
}

/* Caso utilize o mesmo script AutoFit do modo escuro, ele atuará igualmente
   pois busca .timer-digital e ajusta --fit-scale; sem necessidade de alterações. */
/* ================================================================
   PATCH – Fullscreen Anti-Overflow (MODO CLARO)
   ================================================================ */

/* 1. Variáveis e dimensões dedicadas ao fullscreen (herdando para --ring-size) */
[data-theme="light"] .is-fullscreen .timer-display-wrapper,
[data-theme="light"] [data-fs="true"] .timer-display-wrapper {
  --fs-ring-size: min(65vmin, 540px);
  --ring-size: var(--fs-ring-size); /* força todos os cálculos existentes a usar o novo diâmetro */
  width: min(90vw, 860px);
  /* garantir que overflow visual (glow) não seja cortado */
  overflow: visible;
}

/* Breakpoints adaptando o anel no fullscreen (mantém coerência com seu dark) */
@media (max-width: 520px) {
  [data-theme="light"] .is-fullscreen .timer-display-wrapper,
  [data-theme="light"] [data-fs="true"] .timer-display-wrapper {
    --fs-ring-size: clamp(240px, 80vw, 420px);
  }
}
@media (max-width: 380px) {
  [data-theme="light"] .is-fullscreen .timer-display-wrapper,
  [data-theme="light"] [data-fs="true"] .timer-display-wrapper {
    --fs-ring-size: clamp(210px, 82vw, 340px);
  }
}

/* 2. Anel obrigatoriamente segue o novo tamanho (sobrepõe regras anteriores) */
[data-theme="light"] .is-fullscreen .timer-progress-outer,
[data-theme="light"] [data-fs="true"] .timer-progress-outer {
  width: var(--ring-size) !important;
  height: var(--ring-size) !important;
  margin: 0 auto;
}

/* 3. Dígitos em fullscreen: fator mais conservador e limite de largura */
[data-theme="light"] .is-fullscreen .timer-digital,
[data-theme="light"] [data-fs="true"] .timer-digital {
  font-size: clamp(1.35rem, calc(var(--ring-size) / 7.3), 3.8rem) !important;
  max-width: calc(var(--ring-size) * 0.86) !important;
  gap: clamp(0.28rem, calc(var(--ring-size) / 120), 0.55rem);
  letter-spacing: 0.4px;
  padding: 0;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(var(--fit-scale, 1)) !important;
  left: 50% !important;
  top: 50% !important;
}

/* 4. Dígitos individuais: removendo qualquer rigidez */
[data-theme="light"] .is-fullscreen .timer-digit,
[data-theme="light"] [data-fs="true"] .timer-digit {
  min-width: 0 !important;
  padding: .16rem .22rem .24rem;
  font-size: 1em !important;
  letter-spacing: 0.4px;
}

/* 5. Separadores um pouco menores em fullscreen */
[data-theme="light"] .is-fullscreen .timer-separator,
[data-theme="light"] [data-fs="true"] .timer-separator {
  font-size: 0.68em !important;
  margin: 0 .1rem !important;
}

/* 6. Classe “tight” aplicada via JS quando escala ficaria muito baixa */
[data-theme="light"] .is-fullscreen .timer-digital.tight,
[data-theme="light"] [data-fs="true"] .timer-digital.tight {
  gap: clamp(0.18rem, calc(var(--ring-size) / 180), 0.38rem);
  letter-spacing: 0.25px;
}
[data-theme="light"] .is-fullscreen .timer-digital.tight .timer-digit,
[data-theme="light"] [data-fs="true"] .timer-digital.tight .timer-digit {
  letter-spacing: 0.25px;
  padding: .14rem .18rem .20rem;
}

/* 7. Micro-breakpoint para telas ultra estreitas em fullscreen claro */
@media (max-width: 340px) {
  [data-theme="light"] .is-fullscreen .timer-digital,
  [data-theme="light"] [data-fs="true"] .timer-digital {
    font-size: clamp(1.15rem, calc(var(--ring-size) / 7.7), 2.2rem) !important;
    max-width: calc(var(--ring-size) * 0.88) !important;
  }
}

/* 8. Neutraliza possíveis min-width herdados de outro tema */
[data-theme="light"] .is-fullscreen .timer-digit,
[data-theme="light"] [data-fs="true"] .timer-digit {
  min-width: 0 !important;
  transform: none !important;
}

/* ================================================================
   PATCH – Centralização precisa do anel no fullscreen (light + dark)
   ================================================================ */

/* 1. Fullscreen: transformar o display-wrapper em grid puro centralizador */
:is(.is-fullscreen, [data-fs="true"]) .timer-display-wrapper {
  display: grid !important;
  grid-auto-rows: auto;
  justify-items: center;
  align-content: start; /* evita que tudo fique esmagado se houver outros elementos */
  /* Garante largura baseada no anel + padding, sem sobras assimétricas */
  --_pad-inline: clamp(1.4rem, 2.6vw, 2.6rem);
  padding-left: var(--_pad-inline);
  padding-right: var(--_pad-inline);
  /* Se você quiser que o wrapper não seja mais largo que o anel + padding: */
  width: min(calc(var(--ring-size, var(--fs-ring-size, 0px)) + 2 * var(--_pad-inline)), 100%);
}

/* 2. Caso queira manter a largura maior (ex.: para botões abaixo), 
      mas centralizando o anel mesmo assim, remova a regra de width acima 
      e mantenha somente estas duas linhas: */
/*
:is(.is-fullscreen, [data-fs="true"]) .timer-display-wrapper {
  display: grid !important;
  justify-items: center;
}
*/

/* 3. Anel sempre centrado (grid item) */
:is(.is-fullscreen, [data-fs="true"]) .timer-progress-outer {
  margin: 0 !important; /* grid já centraliza */
  justify-self: center;
  align-self: center;
}

/* 4. Garante que blocos de status / botões abaixo do anel também fiquem centralizados */
:is(.is-fullscreen, [data-fs="true"]) .timer-actions,
:is(.is-fullscreen, [data-fs="true"]) #timerStatus,
:is(.is-fullscreen, [data-fs="true"]) .timer-status {
  justify-self: center;
  text-align: center;
}

/* 5. Ajuste fino: prevenir subpixel shift em algumas escalas high-DPI */
:is(.is-fullscreen, [data-fs="true"]) .timer-progress-outer,
:is(.is-fullscreen, [data-fs="true"]) .timer-digital {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* 6. Se o script de AutoFit alterar escala dos dígitos, manter centralização */
:is(.is-fullscreen, [data-fs="true"]) .timer-digital {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(var(--fit-scale,1)) !important;
}




/* Calculadora de Idade (namespace exclusivo .agecalc-)
   - Sem colisões com suas classes existentes
   - Respeita tokens globais e padrão do “top accent” (2px)
   - Borda externa 1px rgba(0,212,255,0.6); internas/inputs 1px rgba(0,212,255,0.4)
*/

/* Wrapper (card) */
/* =========================
   Card (wrapper) + Top Accent
   ========================= */


/* Base (tema padrão) */
.agecalc-wrapper {
  --dc-top-accent-height: 2px;
  /* cor do filete superior (pode reaproveitar seu token principal) */
  --dc-top-accent-color: var(--alarm-primary, #00d4ff);

  position: relative;
  max-width: 600px;
  margin: 1rem auto;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: 18px;
  border: 1px solid rgba(0, 212, 255, 0.6);
  box-shadow: var(--shadow-medium);
  color: var(--text-white);
  font-family: var(--font-primary);

  /* Fundo padrão (claro/sem tema escuro): gradiente sutil + card */
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 153, 204, 0.02)) padding-box,
    var(--bg-card);
  background-clip: padding-box, border-box;
}

:is([data-theme="dark"], :not([data-theme="light"])) .agecalc-wrapper {
  background:
    /* filete superior (sólido via gradiente) */
    linear-gradient(90deg, var(--dc-top-accent-color), var(--dc-top-accent-color)) top left / 100% var(--dc-top-accent-height) no-repeat,
    /* fundo do painel no tema escuro */
    var(--gradient-dark) padding-box,
    /* base do card atrás */
    var(--bg-card);
  background-clip: padding-box, padding-box, border-box;
  /* A ordem importa: a 1ª camada é a mais acima visualmente */
}

/* Light: use a superfície clara (não var(--gradient-dark)) */
[data-theme="light"] .agecalc-wrapper {
  background: var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat, var(--gradient-dark);    
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: var(--shadow-soft);
  color: var(--text-white);
}

/* =========================
   Pills (Anos, Meses, Dias)
   ========================= */
.agecalc-result-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Pill padrão: borda interna 0.4 conforme seu padrão */
.agecalc-pill {
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 12px;
  padding: 0.8rem;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Conteúdos da pill */
.agecalc-pill-label {
  font-size: 0.8rem;
  line-height: 1.2;
  margin-bottom: 0.2rem;
  color: var(--text-gray);
}
.agecalc-pill-number {
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--text-white);
}

/* Modo escuro (ou ausência de tema claro) */
:is([data-theme="dark"], :not([data-theme="light"])) .agecalc-wrapper .agecalc-pill {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Modo claro: pill mais clara e contrastes de texto visíveis */
[data-theme="light"] .agecalc-wrapper .agecalc-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.80));
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 2px 10px rgba(2, 6, 23, 0.06);
  color: var(--text-black, #0b1220);
}


[data-theme="light"] .agecalc-wrapper .agecalc-pill-label {
  color: var(--text-black, #0b1220);
  opacity: 0.85;
  font-weight: 600;
}
[data-theme="light"] .agecalc-wrapper .agecalc-pill-number {
  color: var(--text-black, #0b1220);
}



/* Hover sutil (opcional) */
@media (hover: hover) {
  :is([data-theme="dark"], :not([data-theme="light"])) .agecalc-wrapper .agecalc-pill:hover {
    border-color: rgba(0, 212, 255, 0.55);
    box-shadow: 0 0 12px -2px rgba(0, 212, 255, 0.35);
    background: rgba(0, 0, 0, 0.6);
  }
  [data-theme="light"] .agecalc-wrapper .agecalc-pill:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86));
    border-color: rgba(0, 212, 255, 0.45);
  }
}
/* Grupos internos */
.agecalc-field-group {
  border: 1px solid rgba(0, 212, 255, 0.4); /* INTERNAS: 0.4 */
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
}
[data-theme="light"] .agecalc-field-group {
  background: #fff;
}

/* Rótulos e linhas internas */
.agecalc-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-white);
}
.agecalc-field-inline {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

/* Inputs */
.agecalc-input {
  flex: 1;
  background: var(--bg-dark);
  color: var(--text-white);
  border: 1px solid rgba(0, 212, 255, 0.4); /* INPUTS: 0.4 */
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.agecalc-input:hover {
  border-color: rgba(0, 212, 255, 0.45);
}
.agecalc-input:focus {
  outline: none;
  border-color: var(--alarm-primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.28), inset 0 0 0 1px rgba(0, 212, 255, 0.35);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(0, 153, 204, 0)) var(--bg-dark);
}
.agecalc-input::placeholder { color: var(--text-gray); opacity: 0.8; }

/* Dark color-scheme para datas */
[data-theme="dark"] .agecalc-input[type="date"] { color-scheme: dark; }

/* Botões pequenos (Hoje) */
.agecalc-mini-btn {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 153, 204, 0.05));
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: var(--text-white);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.agecalc-mini-btn:hover {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.28), rgba(0, 153, 204, 0.08));
  border-color: rgba(0, 212, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.3), 0 0 12px -2px rgba(0, 212, 255, 0.35);
  transform: translateY(-1px);
}

/* Ações */
/* Deixa os botões com o mesmo tamanho e o mesmo background */
.agecalc-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Todos os botões: mesmas dimensões e estilo */
.agecalc-actions .agecalc-btn {
  /* Mesmo tamanho para ambos */
  flex: 1 1 180px;        /* ocupa igualmente a linha e quebra responsivo */
  min-width: 180px;       /* mantém largura mínima igual */
  min-height: 44px;

  /* Visual unificado */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.4);
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;

  /* Transições */
  transition:
    transform var(--transition-fast, .2s),
    box-shadow var(--transition-fast, .2s),
    background var(--transition-fast, .2s),
    border-color var(--transition-fast, .2s);
}

.agecalc-actions .agecalc-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.agecalc-actions .agecalc-btn:active {
  transform: translateY(0);
}

/* Se quiser forçar largura fixa idêntica (em vez de flexível), substitua:
.agecalc-actions .agecalc-btn { flex: 0 0 180px; width: 180px; }
*/

/* Cartão de resultados */
.agecalc-result-card {
  margin-top: 1.1rem;
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 16px;
  padding: 1rem 1rem 1.1rem;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 153, 204, 0.02)) padding-box,
    var(--bg-card);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.agecalc-result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(0, 212, 255, 0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0, 153, 204, 0.16), transparent 60%);
  mix-blend-mode: screen;
  opacity: .45;
  pointer-events: none;
}
.agecalc-result-title {
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: var(--text-white);
}

/* Pills de números */
.agecalc-result-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.agecalc-pill {
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 12px;
  padding: 0.8rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
}
.agecalc-pill .agecalc-pill-label {
  font-size: 0.8rem;
  color: var(--text-gray);
}
.agecalc-pill .agecalc-pill-number {
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text-white);
}

/* Detalhes e próximo aniversário */
.agecalc-details {
  display: grid;
  gap: 0.5rem;
}
.agecalc-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-gray);
}
.agecalc-next {
  margin-top: 0.85rem;
  border-top: 1px solid rgba(0, 212, 255, 0.4);
  padding-top: 0.75rem;
}
.agecalc-next h4 {
  margin: 0 0 0.5rem;
  color: var(--alarm-primary);
}
.agecalc-next ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.agecalc-next li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-gray);
}

/* Feedback */
#agecalc-feedback {
  margin-top: 0.75rem;
  color: var(--text-gray);
}

/* Estados de erro/sucesso (reutiliza suas utilidades existentes) */
.agecalc-input.error-state,
.agecalc-field-group.error-state {
  border-color: var(--alarm-danger) !important;
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.3) !important;
}

/* Responsivo */
@media (max-width: 640px) {
  .agecalc-wrapper {
    padding: 1.1rem 1rem 1.4rem;
    border-radius: 16px;
    max-width: 94vw;
  }
}





/* Escopo exclusivo para evitar conflitos com seu CSS global */
[data-dc="gestational-calculator"] {
  /* Tokens principais */
  --dc-border-outer: 1px solid rgba(0, 212, 255, 0.6);
  --dc-border-inner: 1px solid rgba(0, 212, 255, 0.4);
  --dc-top-accent-height: 2px;

  /* Cores base (derivam do seu tema se existir; caso não, usam fallback) */
  --dc-bg: var(--bg-dark, #0b1115);
  --dc-surface: var(--bg-card, #0e1419);
  --dc-fg: var(--text-white, #eaf6fb);
  --dc-muted: var(--text-gray, #a7c2cf);
  --dc-accent: rgba(0, 212, 255, 0.9);
  --dc-focus: rgba(0, 212, 255, 0.65);

  /* Dimensões */
  --dc-radius-lg: 18px;
  --dc-radius-md: 12px;
  --dc-radius-sm: 10px;
  --dc-pad-lg: 1.25rem;
  --dc-pad-md: 0.9rem;
  --dc-gap: 0.65rem;

  /* Botões */
  --dc-btn-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(0, 153, 204, 0.12));
  --dc-btn-border: var(--dc-border-inner);
  --dc-btn-hover-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.26), rgba(0, 153, 204, 0.18));
  --dc-btn-active-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.36), rgba(0, 153, 204, 0.26));
}

/* Wrapper principal */
[data-dc="gestational-calculator"].gestcalc-wrapper {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  border: var(--dc-border-outer);
  border-radius: var(--dc-radius-lg);
  padding: 0 var(--dc-pad-lg) 1.5rem;
  position: relative;
  overflow: hidden; /* garante clipping caso algo interno extrapole */

  /* Faixa superior embutida (segue o border-radius automaticamente) */
  background:
    linear-gradient(var(--dc-accent), var(--dc-accent)) top / 100% var(--dc-top-accent-height) no-repeat,
    transparent;
}



/* Grupos de campo */
[data-dc="gestational-calculator"] .gestcalc-field-group {
  border: var(--dc-border-inner);
  border-radius: var(--dc-radius-md);
  padding: var(--dc-pad-md) 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 153, 204, 0.02)) padding-box, var(--bg-card);
}

/* Rótulos e textos auxiliares */
[data-dc="gestational-calculator"] .gestcalc-label {
  display: block;
  font-weight: 600;
  color: var(--dc-fg);
  margin-bottom: 0.45rem;
}

[data-dc="gestational-calculator"] .gestcalc-hint,
[data-dc="gestational-calculator"] .gestcalc-muted {
  color: var(--dc-muted);
  font-size: 0.9rem;
}

/* Linha de campos */
[data-dc="gestational-calculator"] .gestcalc-field-inline {
  display: flex;
  gap: var(--dc-gap);
  align-items: center;
  flex-wrap: wrap;
}

/* Inputs nativos */
[data-dc="gestational-calculator"] .gestcalc-input {
  background: var(--dc-bg);
  color: var(--dc-fg);
  border: var(--dc-border-inner);
  border-radius: var(--dc-radius-sm);
  padding: 0.6rem 0.8rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

[data-dc="gestational-calculator"] .gestcalc-input:focus-visible {
  border-color: var(--dc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-focus) 40%, transparent);
}

/* Botões */
[data-dc="gestational-calculator"] .gestcalc-btn,
[data-dc="gestational-calculator"] .gestcalc-mini-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--dc-btn-bg);
  color: var(--dc-fg);
  border: var(--dc-btn-border);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s ease, transform 0.04s ease, border-color 0.15s ease;
}

[data-dc="gestational-calculator"] .gestcalc-btn:hover,
[data-dc="gestational-calculator"] .gestcalc-mini-btn:hover {
  background: var(--dc-btn-hover-bg);
}

[data-dc="gestational-calculator"] .gestcalc-btn:active,
[data-dc="gestational-calculator"] .gestcalc-mini-btn:active {
  background: var(--dc-btn-active-bg);
  transform: translateY(1px);
}

[data-dc="gestational-calculator"] .gestcalc-btn.gestcalc-primary {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.28), rgba(0, 153, 204, 0.2));
  border-color: rgba(0, 212, 255, 0.55);
}

/* Resultados */
[data-dc="gestational-calculator"] .gestcalc-result-card {
  border: var(--dc-border-inner);
  border-radius: 16px;
  background: var(--dc-surface);
  padding: 1rem 1rem 1.1rem;
}

[data-dc="gestational-calculator"] .gestcalc-result-title {
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: var(--dc-fg);
}

[data-dc="gestational-calculator"] .gestcalc-result-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

[data-dc="gestational-calculator"] .gestcalc-pill {
  border: var(--dc-border-inner);
  border-radius: 12px;
  padding: 0.6rem;
  background: transparent;
}

[data-dc="gestational-calculator"] .gestcalc-pill-label {
  font-size: 0.82rem;
  color: var(--dc-muted);
}

[data-dc="gestational-calculator"] .gestcalc-pill-number {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--dc-fg);
}

/* Linhas de detalhe */
[data-dc="gestational-calculator"] .gestcalc-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--dc-muted);
}

[data-dc="gestational-calculator"] .gestcalc-detail-line > strong {
  color: var(--dc-fg);
}

/* Divisor suave dentro do card de resultados */
[data-dc="gestational-calculator"] .gestcalc-note {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: var(--dc-border-inner);
}

/* Ações */
[data-dc="gestational-calculator"] .gestcalc-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Área de feedback */
[data-dc="gestational-calculator"] #gestcalc-feedback {
  margin-top: 0.75rem;
  color: var(--dc-muted);
}

/* Responsividade mínima */
@media (max-width: 420px) {
  [data-dc="gestational-calculator"] .gestcalc-result-main {
    grid-template-columns: 1fr;
  }
}

/* Suporte opcional a data-theme="dark|light" no ancestral */
[data-theme="light"] [data-dc="gestational-calculator"] {
  --dc-bg: var(--bg, #ffffff);
  --dc-surface: var(--bg-card, #f8fbfd);
  --dc-fg: var(--text, #0b1b24);
  --dc-muted: var(--text-muted, #35515d);
}

/* Preferência do SO (sem sobrescrever se data-theme estiver presente) */
@media (prefers-color-scheme: light) {
  :not([data-theme="dark"]) [data-dc="gestational-calculator"] {
    --dc-bg: var(--bg, #ffffff);
    --dc-surface: var(--bg-card, #f8fbfd);
    --dc-fg: var(--text, #0b1b24);
    --dc-muted: var(--text-muted, #35515d);
  }
}

/* Botões da Calculadora Gestacional com o mesmo padrão visual da Calculadora de Idade */
[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn {
  flex: 1 1 180px;
  min-width: 180px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.4);

  /* Reutiliza o token global se existir; senão, aplica um gradiente compatível */
  background: var(
    --gradient-primary,
    linear-gradient(135deg, rgba(0, 212, 255, 0.28), rgba(0, 153, 204, 0.22))
  );

  color: #fff;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;

  transition:
    transform var(--transition-fast, .2s),
    box-shadow var(--transition-fast, .2s),
    background var(--transition-fast, .2s),
    border-color var(--transition-fast, .2s);
}

/* Mantém a mesma aparência para o botão primário, se usado */
[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn.gestcalc-primary {
  background: var(
    --gradient-primary,
    linear-gradient(135deg, rgba(0, 212, 255, 0.28), rgba(0, 153, 204, 0.22))
  );
}

/* Interações (hover/active/focus) no mesmo espírito da calculadora de idade */
[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:hover {
  box-shadow: 0 6px 18px rgba(0, 212, 255, 0.18);
  border-color: rgba(0, 212, 255, 0.55);
}

[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:active {
  transform: translateY(1px);
}

[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 212, 255, 0.35),
    0 6px 18px rgba(0, 212, 255, 0.18);
  border-color: rgba(0, 212, 255, 0.6);
}

/* Aplique este override depois dos CSS existentes da calculadora gestacional */

/* Estado base: prepara a transição e evita jitter */
[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn {
  transform: translateY(0);
  will-change: transform, box-shadow, background, border-color;
  transition:
    transform var(--transition-fast, .2s),
    box-shadow var(--transition-fast, .2s),
    background var(--transition-fast, .2s),
    border-color var(--transition-fast, .2s);
}

/* Pequeno "salto" no hover (mesmo comportamento da calculadora de idade) */
[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.22);
  border-color: rgba(0, 212, 255, 0.55);
}

/* Em active, volta para o plano (cancelando o hover-lift) */
[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.16);
}

/* Foco visível consistente */
[data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 212, 255, 0.35),
    0 8px 20px rgba(0, 212, 255, 0.22);
  border-color: rgba(0, 212, 255, 0.6);
}

/* Acessibilidade: reduz movimento para quem preferir */
@media (prefers-reduced-motion: reduce) {
  [data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn {
    transition: border-color .2s, background .2s, box-shadow .2s;
    transform: none;
  }
  [data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:hover,
  [data-dc="gestational-calculator"] .gestcalc-actions .gestcalc-btn:active {
    transform: none;
  }
}
 /* Se você usa data-theme="light" no ancestral */
[data-theme="light"] [data-dc="gestational-calculator"] .gestcalc-field-group {
  /* Remove o gradiente e força fundo branco */
  background: #fff;
}

/* Se você NÃO usa data-theme, mas quer seguir a preferência do SO */
@media (prefers-color-scheme: light) {
  :not([data-theme="dark"]) [data-dc="gestational-calculator"] .gestcalc-field-group {
    background: #fff;
  }
}

/* Aplique após o CSS principal da calculadora */

/* Wrapper com faixa superior (camada 1) + fundo base (camada 2) */
[data-dc="gestational-calculator"].gestcalc-wrapper {
  /* Camada 1: gradient-primary pintando só a faixa do topo
     Camada 2: gradient-dark como fundo do card */
  background: var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
              var(--gradient-dark, linear-gradient(180deg, #0e1419, #0b1115));

  /* Opcional: controle do clipping das camadas
     - border-box: pinta sob a borda (a faixa “passa” por baixo do border semi-transparente)
     - padding-box: a faixa começa logo abaixo da borda, sem “vazar” para baixo do border */
  background-clip: border-box, border-box; /* troque para padding-box, padding-box se preferir a faixa dentro do padding */

  /* Garante que o raio do wrapper recorte as camadas do background */
  border-radius: var(--dc-radius-lg, 18px);
  overflow: hidden; /* evita que qualquer conteúdo interno ultrapasse o raio */
}


/* ================================================================
   SEMANA DO ANO*/

/* Container (máx 800px) */
.weeks-app {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  font-family: var(--font-primary, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
  color: var(--text-white);
}

/* Card principal com top accent e bordas ciano */
.weeks-card {
  --dc-top-accent-height: 2px;
  position: relative;
  margin-top: 1rem;
  border-radius: 18px;
  padding: 18px;
  background:
    var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
    var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.2);
  box-shadow: var(--shadow-medium);
}
.weeks-card:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.05), 0 0 28px -6px rgba(0,212,255,0.25);
  opacity: .35;
  mix-blend-mode: screen;
}

/* Cabeçalho */
.weeks-header {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.title { margin: 0; font-size: 2rem; text-align: center; margin-top: 1.5rem; color: var(--text-white);}
.subtitle { margin: 6px 0 0; color: var(--text-gray); font-size: 14px; }

/* Formulário (bordas ciano) */
.form {
  background: var(--bg-dark);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}
.field { display: grid; gap: 6px; }

/* Label + botão "Hoje" inspirado no dc-mini-btn */
.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.label { color: var(--text-gray); font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.btn-mini {
  font-size: .7rem;
  font-weight: 600;
  padding: .45rem .6rem;
  border-radius: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,153,204,0.05));
  border: 1px solid rgba(0,212,255,0.4);
  color: var(--text-white);
  transition: background var(--transition-fast, .2s), box-shadow var(--transition-fast, .2s), border-color var(--transition-fast, .2s), transform var(--transition-fast, .2s);
}
.btn-mini:hover {
  background: linear-gradient(135deg, rgba(0,212,255,0.28), rgba(0,153,204,0.08));
  border-color: rgba(0,212,255,0.65);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.3), 0 0 12px -2px rgba(0,212,255,0.35);
  transform: translateY(-1px);
}

/* Inputs inspirados no seu estilo e com borda ciano */
.input {
  background: var(--bg-dark);
  color: var(--text-white);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  padding: .7rem .85rem;
  font-size: .9rem;
  line-height: 1.2;
  transition: border-color var(--transition-fast, .2s), box-shadow var(--transition-fast, .2s), background-color var(--transition-fast, .2s);
  box-shadow: inset 0 0 0 1px rgba(0,212,255,0.05);
}
.input:hover { border-color: rgba(0,212,255,0.45); }
.input:focus {
  outline: none;
  border-color: var(--alarm-primary);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.28), inset 0 0 0 1px rgba(0,212,255,0.35);
  background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,153,204,0)) var(--bg-dark);
}

/* Dark input color scheme para datas */
[data-theme="dark"] .dc-date, 
[data-theme="dark"] .gestcalc-input{ 
  color-scheme: dark; }
        

.hint {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--text-gray);
}

/* Resultado (bordas ciano, sem brilho nas pills) */
.section-title { margin: 0 0 8px; font-size: 16px; }
.result {
  background:
    linear-gradient(135deg, rgba(0,212,255,0.08), rgba(0,153,204,0.02)) padding-box,
    var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.result:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(0,212,255,0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0,153,204,0.16), transparent 60%);
  mix-blend-mode: screen;
  opacity: .45;
  pointer-events: none;
}
.result-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}
.pill {      /* dentro da paleta */
  color: #fff;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  justify-items: center;
  background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 212, 255, 0.25);
    backdrop-filter: blur(6px); 
                          /* sem brilho */
}
.pill--secondary {
   background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 212, 255, 0.25);
    backdrop-filter: blur(6px);                      /* sem brilho */
}
.pill-number { font-size: 28px; font-weight: 800; line-height: 1; }
.pill-label { font-size: 12px; opacity: 0.9; margin-top: 6px; }
.plus { color: var(--timer-text-dim); font-size: 20px; text-align: center; }

.summary { margin: 10px 2px 0; color: var(--text-gray); font-size: 14px; }

/* Ações (centralizadas) */
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  justify-content: center;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 14px; border-radius: 12px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--transition-fast, .2s), background var(--transition-fast, .2s), border-color var(--transition-fast, .2s), box-shadow var(--transition-fast, .2s), opacity var(--transition-fast, .2s);
  min-height: 44px;
  border: 1px solid rgba(0, 212, 255, 0.2); /* borda ciano */
}
.btn:hover { transform: translateY(-2px); }
.btn--fixed { width: 180px; }

/* Botão Zerar: dentro da paleta (warning), sem brilho azul */
.btn-reset-semana {
  background: var(--alarm-primary);
  color: var(--bg-dark);
  box-shadow: var(--shadow-soft);
}
.btn-reset-semana:hover {
    background: var(--alarm-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
    transform: scale(1.08);
}

[data-theme="light"] .btn-reset-semana:hover,
[data-theme="light"] .btn-share-semana:hover {
  color: var(--educ-text-body-light);
}


/* Botão Compartilhar: dentro da paleta (success), sem brilho azul */
.btn-share-semana {
  background: var(--alarm-primary);
  color: var(--bg-dark);
  box-shadow: var(--shadow-soft);
}
.btn-share-semana:hover {
    background: var(--alarm-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
    transform: scale(1.08);
}

/* Ícone do botão compartilhar */
.icon { width: 20px; height: 20px; display: block; }

/* Lembrete: Semana atual (bordas ciano) */
.current-reminder { margin-top: 14px; }
.week-panel {
  background:
    linear-gradient(135deg, rgba(0,212,255,0.08), rgba(0,153,204,0.02)) padding-box,
    var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.week-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(0,212,255,0.18), transparent 55%),
    radial-gradient(circle at 78% 72%, rgba(0,153,204,0.16), transparent 60%);
  mix-blend-mode: screen;
  opacity: .45;
  pointer-events: none;
}

/* Tipografia do bloco semana atual */
.week-heading { margin: 4px 0 0; color: var(--text-gray); font-size: 14px; }
.week-value {
  margin: 0;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.week-info { color: var(--text-white); font-size: 16px; }
.week-left { margin-top: 6px; color: var(--text-white); font-weight: 600; }

/* Utilitários do snippet */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.text-center { text-align: center; }

/* Info / Erro (bordas ciano) */
.info {
  margin-top: 10px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  color: var(--text-white);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
}
.error {
  margin: 6px 0 8px;
  color: var(--alarm-danger);
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
}

/* Acessibilidade utilitária */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Tema claro: bordas ciano já unificadas via variáveis */
[data-theme="light"] .result,
[data-theme="light"] .form,
[data-theme="light"] .week-panel,
[data-theme="light"] .input {
    border: 1px solid rgba(0, 212, 255, 0.4);
}

[data-theme="light"] .weeks-card,
[data-theme="light"] .week-panel {
  border: 1px solid rgba(0, 212, 255, 0.6);
}
/*
[data-theme="light"] .weeks-card{
    background: var(--gradient-dark);
}*/

[data-theme="light"] .weeks-card {
  /* garante a altura do accent no topo */
  --dc-top-accent-height: 2px;
  background:
    var(--gradient-primary) 0 0 / 100% var(--dc-top-accent-height) no-repeat,
    var(--gradient-dark); /* ajuste aqui para o fundo que você usa no modo claro */
  color: var(--text-white);
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: var(--shadow-soft);
}


[data-theme="light"] .result{
    background: #fff;
}

[data-theme="light"] .section-title{
  color: var(--text-gray);

}

@media (max-width: 640px) {
  .date-calculator-wrapper {
    padding: 1.25rem 1.1rem 1.6rem;
    border-radius: 16px;
  }
  .dc-tab {
    padding: .75rem .95rem;
    font-size: 1rem;
  }
  .dc-primary-btn {
    padding: .85rem 1rem;
    font-size: 1rem;
  }
  .dc-result-list {
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
  }
}

/* Escopo apenas na seção educativa da calculadora gestacional */
[data-dc="gestational-edu"] .educational-list {
  /* Garantir uso do marcador nativo */
  list-style: disc;
  padding-left: 1.25rem; /* recuo confortável */
  margin: 0.5rem 0 1rem;
}

/* Espaçamento entre itens */
[data-dc="gestational-edu"] .educational-list li {
  margin: 0.4rem 0;
}

/* Se algum CSS global cria bolinha com ::before, desligamos aqui */
[data-dc="gestational-edu"] .educational-list li::before {
  content: none !important;
}

/* Colorir o marcador nativo (amplamente suportado) */
[data-dc="gestational-edu"] .educational-list li::marker {
  color: var(--alarm-primary, #00d4ff); /* mesma cor azul usada no projeto */
  font-size: 1em; /* mantém tamanho padrão do marcador */
}

   /* ================================================================
   POMODORO TIMER
   ================================================================ */
   
/* Página / Header */
.pmd-page {
  max-width: 600px;
  margin: 32px auto;
  padding: 0 16px;
  color: var(--text-white);
  font-family: var(--font-primary, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif);
}

.pmd-header{
  text-align: center;
}

.pmd-header .pmd-subtitle {
  color: var(--text-gray);
  margin-top: 4px;
  text-align: center;
}

/* Painel principal do timer */
.pmd-timer-panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 24px auto 0;
  border-radius: var(--radius-lg, 16px);
  padding: 20px 20px 16px;
/*  background: var(--timer-surface, linear-gradient(160deg,#132129 0%, #152c34 45%, #1e3d49 100%));*/
  box-shadow: var(--shadow-soft, 0 4px 20px rgba(0,0,0,.3));
  overflow: hidden;
  border: 1px solid #1d4ed8; /* default (focus) */
}

/* Faixa superior 4px */
.pmd-top-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #1d4ed8;
  z-index: 2;
  pointer-events: none;
}

/* Tabs (chips) dos estágios */
.pmd-stage-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.pmd-stage-tab {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  color: var(--text-white);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, transform .14s ease, border-color .18s ease, color .18s ease;
  font-size: 14px;
  letter-spacing: .3px;
}
.pmd-stage-tab:hover { transform: translateY(-1px); }
.pmd-stage-tab.is-active {
  background: rgba(255,255,255,0.08);
  border-color: currentColor;
}

/* Display do tempo */
.pmd-time-display {
  font-family: var(--timer-font-stack, ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif);
  font-variant-numeric: tabular-nums;
  text-align: center;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 1;
  color: var(--text-white);
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}

/* Botões base */
.pmd-btn {
  appearance: none;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 10px 16px;
  font-weight: 500;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pmd-btn:hover { transform: translateY(-1px); }
.pmd-btn:active { transform: translateY(0); }

.pmd-btn--xs {
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 10px;
  /*border: 1px solid rgba(255, 255, 255, 0.25);*/
}

/* Botão primário (COMEÇAR) – sem glow */
.pmd-btn--primary {
  min-width: 200px;
  font-weight: 700;
  box-shadow: none !important;          /* glow removido */
}
.pmd-btn--primary:hover { box-shadow: none !important; }
.pmd-btn--primary:active { box-shadow: none !important; }

.pmd-btn--ghost {
  font-weight: 500;
  background: transparent;
}
.pmd-btn--ghost:hover {
  background: rgba(255,255,255,0.07);
}

.pmd-btn--danger {
  border-color: #ef4444;
  color: #ffb4b4;
}

/* Ações */
.pmd-actions {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 18px 0 10px;
}
.pmd-actions-secondary {
  display: flex;
  gap: 8px;
}
.pmd-actions-secondary .pmd-btn {
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
}

/* Status */
.pmd-status-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--timer-text-dim, #89a1aa);
  margin: 6px 0 2px;
  font-size: 14px;
  letter-spacing: .25px;
}
.pmd-status-dot { opacity: .65; }

/* ===================== ESTÁGIOS ===================== */
/* Focus (Pomodoro) */
.pmd-timer-panel[data-pomo-stage="focus"] { border-color: #1d4ed8; }
.pmd-timer-panel[data-pomo-stage="focus"] .pmd-top-accent { background: #1d4ed8; }
.pmd-timer-panel[data-pomo-stage="focus"] .pmd-btn--primary {
  background: #1d4ed8; border-color: #1d4ed8; color:#fff;
}
.pmd-timer-panel[data-pomo-stage="focus"] .pmd-btn--primary:hover {
  background: #2659e3; border-color:#2659e3;
}
.pmd-timer-panel[data-pomo-stage="focus"] .pmd-btn--primary:active {
  background: #1745b9; border-color:#1745b9;
}
.pmd-timer-panel[data-pomo-stage="focus"] .pmd-btn--ghost {
  color:#1d4ed8; border-color:#1d4ed8;
}
.pmd-timer-panel[data-pomo-stage="focus"] .pmd-btn--ghost:hover {
  background: rgba(29,78,216,0.12);
}
.pmd-timer-panel[data-pomo-stage="focus"] .pmd-stage-tab.is-active {
  color:#1d4ed8; background: rgba(29,78,216,0.18); border-color:#1d4ed8;
}

/* Short break */
.pmd-timer-panel[data-pomo-stage="short"] { border-color: #0ea5e9; }
.pmd-timer-panel[data-pomo-stage="short"] .pmd-top-accent { background: #0ea5e9; }
.pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--primary {
  background:#0ea5e9; border-color:#0ea5e9; color:#fff;
}
.pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--primary:hover {
  background:#17b3f7; border-color:#17b3f7;
}
.pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--primary:active {
  background:#098ac2; border-color:#098ac2;
}
.pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--ghost {
  color:#0ea5e9; border-color:#0ea5e9;
}
.pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--ghost:hover {
  background: rgba(14,165,233,0.15);
}
.pmd-timer-panel[data-pomo-stage="short"] .pmd-stage-tab.is-active {
  color:#0ea5e9; background: rgba(14,165,233,0.20); border-color:#0ea5e9;
}

/* Long break (indigo) */
.pmd-timer-panel[data-pomo-stage="long"] { border-color:#4f46e5; }
.pmd-timer-panel[data-pomo-stage="long"] .pmd-top-accent { background:#4f46e5; }
.pmd-timer-panel[data-pomo-stage="long"] .pmd-btn--primary {
  background:#4f46e5; border-color:#4f46e5; color:#ffffff;
}
.pmd-timer-panel[data-pomo-stage="long"] .pmd-btn--primary:hover {
  background:#5a52e9; border-color:#5a52e9;
}
.pmd-timer-panel[data-pomo-stage="long"] .pmd-btn--primary:active {
  background:#3e3ac0; border-color:#3e3ac0;
}
.pmd-timer-panel[data-pomo-stage="long"] .pmd-btn--ghost {
  color:#4f46e5; border-color:#4f46e5;
}
.pmd-timer-panel[data-pomo-stage="long"] .pmd-btn--ghost:hover {
  background: rgba(79,70,229,0.18);
}
.pmd-timer-panel[data-pomo-stage="long"] .pmd-stage-tab.is-active {
  color:#4f46e5; background: rgba(79,70,229,0.22); border-color:#4f46e5;
}

/* ===================== Tarefas ===================== */
.pmd-tasks {
  margin-top: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pmd-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pmd-tasks-actions { display: flex; gap: 8px; }

.pmd-task-add-tile {
  border: 2px dashed rgba(255,255,255,0.25);
  color: var(--text-gray);
  padding: 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, border-color .18s ease;
}
.pmd-task-add-tile:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.40);
}
.pmd-task-add-tile:focus {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}
.pmd-task-add-plus { font-weight:600; font-size:18px; line-height:1; }

.pmd-task-add-form {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  margin-top: 14px;
  background: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 12px;
  animation: fadeSlideIn .4s ease;
}
.pmd-task-input {
  flex: 1;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,.06);
  color: var(--text-white);
  transition: border-color .18s ease, background .18s ease;
}
.pmd-task-input:focus {
  outline: 2px solid #0ea5e9;
  background: rgba(255,255,255,0.1);
}
.pmd-task-input::placeholder { color: rgba(255,255,255,0.38); }

.pmd-task-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 8px;
}
.pmd-task-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  font-size: 14px;
  border-style: dashed !important;
}
.pmd-task-item:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.24);
  border-style: dashed !important;
}
.pmd-task-item.is-done {
  opacity: .85;
  background: rgba(255,255,255,0.05);
  border-style: dashed !important;
}
.pmd-task-item.is-done .pmd-task-title {
  text-decoration: line-through;
  color: var(--text-gray);
}
.pmd-task-item:focus-within {
  border-style: dashed !important;
}
.pmd-task-chk {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #0ea5e9;
}
.pmd-task-title {
  color: var(--text-white);
  font-size: 14px;
  line-height: 1.3;
  word-break: break-word;
}
.pmd-task-del {
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: var(--text-white);
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease;
  opacity: .7;
}
.pmd-task-del:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}

/* ===================== KPIs ===================== */
.pmd-summary { margin-top: 24px; }
.pmd-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.pmd-kpi {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  padding: 12px;
  background: rgba(255,255,255,0.03);
}
.pmd-kpi-label {
  color: var(--text-gray);
  font-size: 13px;
  letter-spacing: .4px;
}
.pmd-kpi-value {
  font-size: 22px;
  color: var(--text-white);
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: .5px;
}

.pmd-summary-footer {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Feedback */
.pmd-feedback {
  margin-top: 12px;
  min-height: 20px;
  color: var(--text-gray);
  font-size: 14px;
}

/* Acessibilidade utilitária */
.pmd-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

/* ===================== Dark mode: tabs texto branco ===================== */
html[data-theme="dark"] .pmd-stage-tab {
  color: var(--text-white);
}

html[data-theme="dark"] .pmd-timer-panel[data-pomo-stage="focus"] .pmd-stage-tab.is-active {
  color: var(--text-white);
  border-color: #1d4ed8;
  background: rgba(29,78,216,0.18);
}
html[data-theme="dark"] .pmd-timer-panel[data-pomo-stage="short"] .pmd-stage-tab.is-active {
  color: var(--text-white);
  border-color: #0ea5e9;
  background: rgba(14,165,233,0.20);
}
html[data-theme="dark"] .pmd-timer-panel[data-pomo-stage="long"] .pmd-stage-tab.is-active {
  color: var(--text-white);
  border-color: #4f46e5;
  background: rgba(79,70,229,0.22);
}

/* ===================== Responsivo ===================== */
@media (max-width: 720px) {
  .pmd-btn--primary { min-width: 180px; }
  .pmd-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 440px) {
  .pmd-kpis { grid-template-columns: 1fr; }
}

/* Bulk actions abaixo da lista */
.pmd-task-bulk-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 12px;
  background: linear-gradient(175deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  backdrop-filter: blur(2px);
  animation: fadeSlideIn .4s ease;
}

.pmd-task-bulk-actions .pmd-btn {
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
  font-weight: 500;
}

/* Título */
.pmd-tasks-title {
  margin-top: 1rem;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
}

.pmd-task-add-tile:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .pmd-task-bulk-actions { flex-direction: column; }
}
@media (max-width: 460px) {
  .pmd-task-bulk-actions {
    flex-direction: column;
    gap: 8px;
  }
}

/* Estado vazio */
.pmd-tasks-empty {
  margin-top: 14px;
  text-align: center;
  padding: 24px 16px 22px;
  color: var(--text-gray);
  font-size: 14px;
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  line-height: 1.5;
  animation: fadeSlideIn .4s ease;
}
.pmd-tasks-empty strong {
  display: block;
  font-size: 15px;
  color: var(--text-white);
  margin-bottom: 4px;
  font-weight: 600;
}

/* Contadores */
.pmd-task-counters {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--timer-text-dim, #89a1aa);
  animation: fadeSlideIn .4s ease;
}
.pmd-task-counters span {
  background: rgba(255,255,255,0.07);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ===== Toggle principal ===== */
.pmd-task-toggle {
  width: 100%;
  border: 2px dashed rgba(255,255,255,0.22);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  color: var(--text-white);
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .4px;
  position: relative;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
  text-align: left;
}
.pmd-task-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.40);
}
.pmd-task-toggle:active {
  background: rgba(255,255,255,0.12);
}
.pmd-task-toggle:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 3px;
}

.pmd-task-toggle-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transition: transform .35s cubic-bezier(.4,.8,.25,1), background .25s;
}
.pmd-task-toggle:hover .pmd-task-toggle-icon {
  background: rgba(255,255,255,0.20);
}
.pmd-task-toggle[aria-expanded="true"] .pmd-task-toggle-icon {
  transform: rotate(225deg) scale(1.05); /* + vira um X estilizado */
  background: rgba(255,255,255,0.25);
}

.pmd-task-toggle-hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  opacity: .55;
  letter-spacing: .5px;
  transition: opacity .2s;
}
.pmd-task-toggle:hover .pmd-task-toggle-hint {
  opacity: .9;
}

/* ===== Container colapsável ===== */
.pmd-task-collapsible {
  overflow: hidden;
  transition: grid-template-rows .5s ease, opacity .5s ease;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}
.pmd-task-collapsible > * {
  min-height: 0;
}

.pmd-tasks[data-expanded="true"] .pmd-task-collapsible {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Ajustes quando colapsado */
.pmd-tasks--collapsed .pmd-task-toggle {
  border-style: dashed;
}
.pmd-tasks:not(.pmd-tasks--collapsed) .pmd-task-toggle {
  border-style: solid;
}

.pmd-tasks--collapsed .pmd-tasks-title { opacity: .85; }

/* Desabilitar botão “limpar concluídas” sem concluídas */
.pmd-btn[disabled] {
  opacity: .45;
  pointer-events: none;
}

/* Garantir que qualquer elemento com hidden realmente suma */
[hidden],
.pmd-task-counters[hidden],
.pmd-task-bulk-actions[hidden],
#tasks-empty[hidden] {
  display: none !important;
}

/* ===== Modal Overlay ===== */
.pmd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,14,18,0.65);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  z-index: 1200;
  animation: pmdFadeIn .28s ease;
}
.pmd-modal-overlay[hidden] { display: none !important; }

/* Card */
.pmd-modal {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, #18252d, #1f323a 55%, #25414a);
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  animation: pmdModalIn .38s cubic-bezier(.4,.8,.25,1);
  position: relative;
  overflow: hidden;
}

.pmd-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 12%, rgba(0,212,255,0.18), transparent 60%);
  opacity: .65;
}

.pmd-modal-header {
  display: flex;
  align-items: center;
  padding: 16px 18px 10px;
  gap: 12px;
}

.pmd-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: .5px;
  color: var(--text-white);
  flex: 1;
}

.pmd-modal-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--text-white);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s,border-color .18s,transform .18s;
}
.pmd-modal-close:hover { background: rgba(255,255,255,0.16); }
.pmd-modal-close:active { transform: scale(.92); }
.pmd-modal-close:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

.pmd-modal-body {
  padding: 4px 18px 4px;
}
.pmd-modal-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--timer-text, #cfe2e7);
  letter-spacing: .3px;
}

.pmd-modal-actions {
  display: flex;
  gap: 10px;
  padding: 18px;
  padding-top: 10px;
}

.pmd-modal-actions .pmd-btn {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 600;
  background: #1d4ed8; 
}

.pmd-modal-actions .pmd-btn--primary {
  background: #1d4ed8;
  border: 1px solid #1d4ed8;
}
.pmd-modal-actions .pmd-btn--primary:hover {
  background: #2659e3;
  border-color: #2659e3;
}
.pmd-modal-actions .pmd-btn--primary:active {
  background: #1745b9;
  border-color: #1745b9;
}

/* Animações */
@keyframes pmdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pmdModalIn {
  0% { transform: translateY(14px) scale(.96); opacity: 0; }
  60% { transform: translateY(-2px) scale(1.012); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity:1; }
}

/* Foco travado visual (opcional highlight do card ao focar algo interno) */
.pmd-modal:focus-within {
  box-shadow: 0 12px 42px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,255,0.55), 0 0 0 3px rgba(0,212,255,0.25);
}

/* Redução de movimento (opcional) */
@media (prefers-reduced-motion: reduce) {
  .pmd-modal, .pmd-modal-overlay {
    animation: none !important;
  }
}

/* ===== KPIs Realtime ===== */
.pmd-kpi--focus {
  position: relative;
}

.pmd-kpi-value-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pmd-kpi-partial {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--timer-text-dim, #8fb1bd);
  background: rgba(255,255,255,0.07);
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  line-height: 1.2;
  animation: kpiPulse 2s ease-in-out infinite;
}

.pmd-kpi-partial-dot {
  width: 8px;
  height: 8px;
  background: #0ea5e9;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(14,165,233,0.4);
  animation: kpiDotPulse 2s cubic-bezier(.4,.8,.25,1) infinite;
}

@keyframes kpiPulse {
  0%,100% { opacity: .85; }
  50% { opacity: 1; }
}
@keyframes kpiDotPulse {
  0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(14,165,233,0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(14,165,233,0); }
  100% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}

.pmd-kpi-progress {
  margin-top: 6px;
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.pmd-kpi-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#0ea5e9,#38bdf8);
  transition: width .4s cubic-bezier(.4,.8,.25,1);
}

.pmd-kpi-progress-hint {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--timer-text-dim,#89a1aa);
  font-weight: 500;
}

#kpi-focus-today-partial[hidden],
#kpi-focus-progress[hidden],
#kpi-focus-progress-hint[hidden] {
  display: none !important;
}

/* Torna a seção flex em coluna para reordenar elementos */
.pmd-tasks {
  display: flex;
  flex-direction: column;
}

/* Como estão dentro do header, precisamos “soltar” visualmente:
   usamos display: contents para o header não segurar layout lateral */
.pmd-tasks-header {
  display: contents;
}

/* Ajusta título, que agora está sozinho */
.pmd-tasks-title {
  order: 1;
}

/* =========== APPEND: Preferências + Modal Ajuda (incremental) =========== */

/* Bloco de Preferências */
.pmd-preferences {
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.20);
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border-radius: 14px;
  padding: 14px 16px;
  animation: fadeSlideIn .4s ease;
}
.pmd-pref-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-gray);
}
.pmd-pref-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.3;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background .18s ease;
}
.pmd-pref-item:hover {
  background: rgba(255,255,255,0.05);
}
.pmd-pref-item input {
  transform: scale(1.1);
  cursor: pointer;
}

/* Botão de Ajuda no header (opcional ajuste se quiser destacar) */
#help-open.pmd-btn--ghost {
  border: 1px solid rgba(255,255,255,0.25);
}

/* Estilos já existentes para modais devem cobrir o help.
   Apenas garantindo kbd se não estiver definido: */
.pmd-shortcuts {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
}
.pmd-shortcuts kbd {
  background: #0f2a33;
  border: 1px solid #1d4ed8;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  display: inline-block;
  min-width: 1.6ch;
  text-align: center;
}

/* Micro-ajuste do botão dentro do modal de ajuda */
#help-enable-notify {
  margin-top: 4px;
}

/* Acessibilidade foco nos itens de preferências (se rolar Tab) */
.pmd-pref-item:focus-within {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Garantia: se hidden for usado nos novos elementos */
#pmd-help-overlay[hidden] {
  display: none !important;
}

/* Força layout em coluna e a ordem visual desejada dentro do #task-collapsible */
#task-collapsible {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important; /* mantemos gaps controlados pelos próprios filhos */
}

/* Ordem explícita */
#tasks-empty           { order: 20; }
#task-list             { order: 30; }
#task-bulk-actions     { order: 40; }
#task-counters         { order: 50; }

/* Ajuste de espaçamento coerente após a lista e bulk */
#task-bulk-actions { margin-top: 12px; }
#task-counters {
  margin-top: 10px;
}

/* Opcional: dar um respiro visual para não “colar” nos itens da lista */
#task-list { padding-bottom: 4px; }

/* Colapsável com animação usando max-height */
#task-collapsible {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s ease, opacity .35s ease;
  will-change: max-height, opacity;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

/* Quando expandido */
.pmd-tasks[data-expanded="true"] #task-collapsible {
  max-height: 1200px; /* suficiente para caber conteúdo */
  opacity: 1;
}

/* ===== Toggle de Preferências (reutiliza estilos do task-toggle) ===== */
.pmd-preferences-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px; /* ajuste conforme contexto */
}

/* Área colapsável animada (mesmo padrão sugerido para tarefas) */
.pmd-prefs-collapsible {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s ease, opacity .35s ease;
  will-change: max-height, opacity;
}

/* Expandido */
#pmd-preferences-section[data-expanded="true"] #prefs-collapsible {
  max-height: 600px; /* suficiente para o conteúdo */
  opacity: 1;
}

/* Animação interna reutilizando sua keyframe fadeSlideIn */
#pmd-preferences-section[data-expanded="true"] .pmd-preferences {
  animation: fadeSlideIn .38s ease;
}

/* Ícone girar como o de tarefas (opcional). Se não quiser, remova este bloco */
#pmd-preferences-section[data-expanded="true"] .pmd-task-toggle-icon {
  transform: rotate(225deg) scale(1.05);
  background: rgba(255,255,255,0.25);
}

.pmd-preferences .pmd-pref-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-gray);
  margin-bottom: 1.5rem;
}

.pmd-preferences .pmd-pref-item input {
  transform: scale(1.05);
  cursor: pointer;
}

/* ================================================================
   Pomodoro – Light Theme
   ================================================================ */

/* Paleta base (fallbacks caso variáveis não existam) */
:root {
  --pmd-light-bg: #ffffff;
  --pmd-light-bg-alt: #f8fafc;
  --pmd-light-bg-soft: #f1f5f9;
  --pmd-light-border: #d5dbe3;
  --pmd-light-border-strong: #c0c9d4;
  --pmd-light-border-dashed: #94a3b8;
  --pmd-light-text: #0f172a;
  --pmd-light-text-soft: #475569;
  --pmd-light-text-dim: #64748b;
  --pmd-light-text-faint: #94a3b8;
  --pmd-primary-focus: #1d4ed8;
  --pmd-primary-short: #0ea5e9;
  --pmd-primary-long: #4f46e5;
  --pmd-danger: #dc2626;
  --pmd-danger-border: #ef4444;
  --pmd-radius-sm: 6px;
  --pmd-radius-md: 10px;
  --pmd-radius-lg: 14px;
  --pmd-focus-ring: #0ea5e9;
  --pmd-focus-shadow: rgba(14,165,233,0.35);
  --pmd-transition-fast: .18s;
}

/* Página */
[data-theme="light"] .pmd-page {
  color: var(--pmd-light-text);
}

/* Subtítulo */
[data-theme="light"] .pmd-header .pmd-subtitle {
  color: var(--pmd-light-text-dim);
}

/* Painel principal do timer */
[data-theme="light"] .pmd-timer-panel {
  background: var(--pmd-light-bg);
  border: 1px solid var(--pmd-primary-focus);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Acento superior (faixa) */
[data-theme="light"] .pmd-top-accent {
  background: var(--pmd-primary-focus);
}

/* Tabs (chips) estágios */
[data-theme="light"] .pmd-stage-tabs { margin-bottom: 1.5rem; }
[data-theme="light"] .pmd-stage-tab {
  border: 1px solid var(--pmd-blue-light, #93c5fd);
  background: var(--pmd-light-bg);
  color: var(--pmd-light-text);
}
[data-theme="light"] .pmd-stage-tab:hover {
  background: var(--pmd-light-bg-soft);
  transform: translateY(-1px);
}
[data-theme="light"] .pmd-stage-tab.is-active {
  background: var(--pmd-light-bg-soft);
  border-color: currentColor;
  font-weight: 600;
}

/* Display do tempo */
[data-theme="light"] .pmd-time-display {
  color: var(--pmd-light-text);
  text-shadow: none;
}

/* Botões base */
[data-theme="light"] .pmd-btn {
  border-radius: var(--pmd-radius-md);
  color: var(--pmd-light-text);
  background: var(--pmd-light-bg);
  border: 1px solid var(--pmd-light-border);
  box-shadow: none;
  transition: background var(--pmd-transition-fast), border-color var(--pmd-transition-fast), color var(--pmd-transition-fast), transform var(--pmd-transition-fast);
}
[data-theme="light"] .pmd-btn:hover {
  background: var(--pmd-light-bg-soft);
  transform: translateY(-2px);
}
[data-theme="light"] .pmd-btn:active {
  transform: translateY(-1px);
  background: var(--pmd-light-bg-alt);
}

/* Botão primário */
[data-theme="light"] .pmd-btn--primary {
  background: var(--pmd-primary-focus);
  border-color: var(--pmd-primary-focus);
  color: #fff;
  font-weight: 600;
  min-width: 200px;
}
[data-theme="light"] .pmd-btn--primary:hover {
  background: #2659e3;
  border-color: #2659e3;
  transform: translateY(-2px);
}
[data-theme="light"] .pmd-btn--primary:active {
  background: #1745b9;
  border-color: #1745b9;
  transform: translateY(-1px);
}

/* Botão ghost */
[data-theme="light"] .pmd-btn--ghost {
  background: transparent;
  border: 1px solid var(--pmd-light-border);
  color: var(--pmd-light-text);
}
[data-theme="light"] .pmd-btn--ghost:hover {
  background: var(--pmd-light-bg-soft);
}

/* Danger */
[data-theme="light"] .pmd-btn--danger {
  border-color: var(--pmd-danger-border);
  color: var(--pmd-danger);
  background: #fff;
}
[data-theme="light"] .pmd-btn--danger:hover {
  background: #fee2e2;
  border-color: var(--pmd-danger-border);
}

/* Estados desabilitados */
[data-theme="light"] .pmd-btn[disabled] {
  opacity: .55;
  pointer-events: none;
}

/* Linha de status */
[data-theme="light"] .pmd-status-line {
  color: var(--pmd-light-text-dim);
}

/* Estágios – painel e botões primários */
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="focus"] {
  border-color: var(--pmd-primary-focus);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="focus"] .pmd-top-accent {
  background: var(--pmd-primary-focus);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="focus"] .pmd-btn--primary { background: var(--pmd-primary-focus); }

[data-theme="light"] .pmd-timer-panel[data-pomo-stage="short"] {
  border-color: var(--pmd-primary-short);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="short"] .pmd-top-accent {
  background: var(--pmd-primary-short);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--primary {
  background: var(--pmd-primary-short);
  border-color: var(--pmd-primary-short);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--primary:hover {
  background: #17b3f7;
  border-color: #17b3f7;
}

[data-theme="light"] .pmd-timer-panel[data-pomo-stage="long"] {
  border-color: var(--pmd-primary-long);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="long"] .pmd-top-accent {
  background: var(--pmd-primary-long);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="long"] .pmd-btn--primary {
  background: var(--pmd-primary-long);
  border-color: var(--pmd-primary-long);
}
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="long"] .pmd-btn--primary:hover {
  background: #5a52e9;
  border-color: #5a52e9;
}

/* Ghost contextual (estágios) */
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="focus"] .pmd-btn--ghost { color: var(--pmd-primary-focus); border-color: var(--pmd-primary-focus); }
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="short"] .pmd-btn--ghost { color: var(--pmd-primary-short); border-color: var(--pmd-primary-short); }
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="long"]  .pmd-btn--ghost { color: var(--pmd-primary-long);  border-color: var(--pmd-primary-long); }

/* Tabs ativas por estágio */
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="focus"] .pmd-stage-tab.is-active { color: var(--pmd-primary-focus); }
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="short"] .pmd-stage-tab.is-active { color: var(--pmd-primary-short); }
[data-theme="light"] .pmd-timer-panel[data-pomo-stage="long"]  .pmd-stage-tab.is-active { color: var(--pmd-primary-long); }

/* Tarefas – título seção */
[data-theme="light"] .pmd-tasks-title {
  color: var(--pmd-light-text);
}

/* Add Tile */
[data-theme="light"] .pmd-task-add-tile {
  border: 2px dashed var(--pmd-light-border-dashed);
  background: var(--pmd-light-bg);
  color: var(--pmd-light-text-dim);
}
[data-theme="light"] .pmd-task-add-tile:hover {
  background: var(--pmd-light-bg-soft);
  border-color: var(--pmd-light-border-strong);
}
[data-theme="light"] .pmd-task-add-tile:focus-visible {
  outline: 2px solid var(--pmd-focus-ring);
  outline-offset: 2px;
}

/* Form de adicionar tarefa */
[data-theme="light"] .pmd-task-add-form {
  background: var(--pmd-light-bg);
  border: 1px solid var(--pmd-light-border);
  border-radius: var(--pmd-radius-lg);
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Input */
[data-theme="light"] .pmd-task-input {
  background: #fff;
  border: 1px solid var(--pmd-light-border);
  color: var(--pmd-light-text);
  padding: 10px 12px;
  border-radius: var(--pmd-radius-md);
}
[data-theme="light"] .pmd-task-input::placeholder {
  color: var(--pmd-light-text-faint);
}
[data-theme="light"] .pmd-task-input:focus {
  outline: 2px solid var(--pmd-focus-ring);
  background: #fff;
  border-color: var(--pmd-focus-ring);
}

/* Lista de tarefas */
[data-theme="light"] .pmd-task-list {
  gap: 4px;
  padding: 0;
}
[data-theme="light"] .pmd-task-item {
  background: #fff;
  border: 1px solid var(--pmd-light-border);
  border-radius: var(--pmd-radius-md);
  padding: 10px 12px;
  transition: background var(--pmd-transition-fast), border-color var(--pmd-transition-fast);
}
[data-theme="light"] .pmd-task-item:hover {
  background: var(--pmd-light-bg-soft);
  border-color: var(--pmd-light-border-strong);
}
[data-theme="light"] .pmd-task-item.is-done {
  background: #fff;
  opacity: 0.95;
}
[data-theme="light"] .pmd-task-item.is-done .pmd-task-title {
  color: var(--pmd-light-text-faint);
  text-decoration: line-through;
}

/* Checkbox */
[data-theme="light"] .pmd-task-chk {
  accent-color: var(--pmd-primary-short);
}

/* Título da tarefa */
[data-theme="light"] .pmd-task-title {
  color: var(--pmd-light-text);
}

/* Botão delete */
[data-theme="light"] .pmd-task-del {
  background: #fff;
  border: 1px solid var(--pmd-light-border);
  color: var(--pmd-light-text-dim);
}
[data-theme="light"] .pmd-task-del:hover {
  background: var(--pmd-light-bg-soft);
  border-color: var(--pmd-light-border-strong);
  color: var(--pmd-light-text);
}

/* Bulk actions */
[data-theme="light"] .pmd-task-bulk-actions {
  background: var(--pmd-light-bg);
  border: 1px solid var(--pmd-light-border);
  border-radius: var(--pmd-radius-lg);
  padding: 10px;
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Contadores */
[data-theme="light"] .pmd-task-counters {
  color: var(--pmd-light-text-dim);
}
[data-theme="light"] .pmd-task-counters span {
  background:linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 153, 204, 0.05));
  color: var(--pmd-light-text-soft);
}

/* Estado vazio */
[data-theme="light"] .pmd-tasks-empty {
  background: var(--pmd-light-bg);
  border: 2px dashed var(--pmd-light-border);
  color: var(--pmd-light-text-dim);
}
[data-theme="light"] .pmd-tasks-empty strong {
  color: var(--pmd-light-text);
}

/* Toggle principal (Adicionar tarefa / Preferências) */
[data-theme="light"] .pmd-task-toggle {
  background: var(--pmd-light-bg);
  border: 2px dashed var(--pmd-light-border-dashed);
  color: var(--pmd-light-text);
}
[data-theme="light"] .pmd-task-toggle:hover {
  background: var(--pmd-light-bg-soft);
  border-color: var(--pmd-light-border-strong);
}
[data-theme="light"] .pmd-task-toggle:active {
  background: var(--pmd-light-bg-alt);
}
[data-theme="light"] .pmd-task-toggle-icon {
  background: var(--pmd-light-bg-soft);
}
[data-theme="light"] .pmd-task-toggle:hover .pmd-task-toggle-icon {
  background: var(--pmd-light-bg-alt);
}
[data-theme="light"] .pmd-task-toggle[aria-expanded="true"] .pmd-task-toggle-icon {
  background: var(--pmd-light-bg-alt);
}

/* Hints */
[data-theme="light"] .pmd-task-toggle-hint {
  color: var(--pmd-light-text-dim);
  opacity: .7;
}
[data-theme="light"] .pmd-task-toggle:hover .pmd-task-toggle-hint {
  opacity: .95;
}

/* Collapsible */
[data-theme="light"] #task-collapsible {
  opacity: 1; /* comportamento visual consistente */
}

/* KPIs container (grid já definido no dark) */
[data-theme="light"] .pmd-kpis {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  [data-theme="light"] .pmd-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 440px) {
  [data-theme="light"] .pmd-kpis { grid-template-columns: 1fr; }
}

/* KPI Cards */
[data-theme="light"] .pmd-kpi {
  background: #fff;
  border: 1px solid var(--pmd-light-border);
  border-radius: var(--pmd-radius-md);
  padding: 12px;
}
[data-theme="light"] .pmd-kpi-label {
  color: var(--pmd-light-text-dim);
}
[data-theme="light"] .pmd-kpi-value {
  color: var(--pmd-light-text);
}

/* KPI focus variant */
[data-theme="light"] .pmd-kpi--focus {
  border-color: var(--pmd-primary-focus);
}

/* KPI partial chip */
[data-theme="light"] .pmd-kpi-partial {
  background: var(--pmd-light-bg-soft);
  color: var(--pmd-light-text-dim);
}
[data-theme="light"] .pmd-kpi-partial-dot {
  background: var(--pmd-primary-short);
  box-shadow: none;
}

/* KPI progress */
[data-theme="light"] .pmd-kpi-progress {
  background: var(--pmd-light-bg-soft);
}
[data-theme="light"] .pmd-kpi-progress-bar {
  background: var(--pmd-primary-short);
}

/* Preferences bloco */
[data-theme="light"] .pmd-preferences {
  background: var(--pmd-light-bg);
  border: 1px solid var(--pmd-light-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
[data-theme="light"] .pmd-pref-title {
  color: var(--pmd-light-text-dim);
}
[data-theme="light"] .pmd-pref-item:hover {
  background: var(--pmd-light-bg-soft);
}

/* Modal overlay e card */
[data-theme="light"] .pmd-modal-overlay {
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(4px);
}
[data-theme="light"] .pmd-modal {
  background: #ffffff;
  border: 1px solid var(--pmd-light-border-strong);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .pmd-modal::before {
  content: none;
}
[data-theme="light"] .pmd-modal-title {
  color: var(--pmd-light-text);
}
[data-theme="light"] .pmd-modal-message {
  color: var(--pmd-light-text-soft);
}
[data-theme="light"] .pmd-modal-close {
  background: var(--pmd-light-bg-soft);
  border: 1px solid var(--pmd-light-border);
  color: var(--pmd-light-text);
}
[data-theme="light"] .pmd-modal-close:hover {
  background: var(--pmd-light-bg-alt);
}
[data-theme="light"] .pmd-modal-actions .pmd-btn--primary {
  background: var(--pmd-primary-focus);
  border-color: var(--pmd-primary-focus);
  color: #fff;
}

/* Botão ghost no modal (Cancel) */
[data-theme="light"] .pmd-modal-actions .pmd-btn--ghost {
  background: var(--pmd-primary-focus);
  border-color: var(--pmd-light-border);
  color: #fff;
  font-weight: 600;
}
[data-theme="light"] .pmd-modal-actions .pmd-btn--ghost:hover {
  background: var(--pmd-light-bg-soft);
  color: var(--pmd-light-text);
}

/* Outline de foco global (onde houver :focus-visible) */
[data-theme="light"] .pmd-btn:focus-visible,
[data-theme="light"] .pmd-task-toggle:focus-visible,
[data-theme="light"] .pmd-task-input:focus,
[data-theme="light"] .pmd-task-add-tile:focus-visible,
[data-theme="light"] .pmd-modal-close:focus-visible,
[data-theme="light"] .pmd-pref-item:focus-within,
[data-theme="light"] .pmd-stage-tab:focus-visible {
  outline: 2px solid var(--pmd-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .pmd-btn,
  [data-theme="light"] .pmd-task-toggle,
  [data-theme="light"] .pmd-stage-tab {
    transition: none !important;
    transform: none !important;
  }
}

/* ================================================================
   Pomodoro – Light Theme BLUE Overrides
   ================================================================ */

:root {
  --pmd-blue: #1d4ed8;
  --pmd-blue-hover: #2659e3;
  --pmd-blue-active: #1745b9;
  --pmd-blue-soft: #eef3ff;     /* fundo leve */
  --pmd-blue-soft-hover: #e2ecff;
  --pmd-blue-outline: #1d4ed8;
}

/* ================= BORDAS AZUIS (elementos estruturais) ================= */
[data-theme="light"] .pmd-timer-panel {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-stage-tab.is-active {
  border-color: var(--pmd-blue) !important;
  color: var(--pmd-blue) !important;
  background: var(--pmd-blue-soft) !important;
}
[data-theme="light"] .pmd-task-add-tile {
  border-color: var(--pmd-blue);
  color: #1e2d55;
}
[data-theme="light"] .pmd-task-add-tile:hover {
  border-color: var(--pmd-blue-hover);
  background: var(--pmd-blue-soft);
}
[data-theme="light"] .pmd-task-toggle {
  border-color: var(--pmd-blue);
  color: var(--pmd-light-text);
}
[data-theme="light"] .pmd-task-toggle:hover {
  border-color: var(--pmd-blue-hover);
  background: var(--pmd-blue-soft);
}
[data-theme="light"] .pmd-task-toggle:active {
  background: var(--pmd-blue-soft-hover);
  border-color: var(--pmd-blue-active);
}
[data-theme="light"] .pmd-task-toggle[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--pmd-blue-hover);
}
[data-theme="light"] .pmd-task-toggle-icon {
  background: var(--pmd-blue-soft);
}
[data-theme="light"] .pmd-task-toggle:hover .pmd-task-toggle-icon {
  background: var(--pmd-blue-soft-hover);
}
[data-theme="light"] .pmd-task-toggle[aria-expanded="true"] .pmd-task-toggle-icon {
  background: var(--pmd-blue-hover);
  color: #fff;
}
[data-theme="light"] .pmd-task-add-form{
  border: none;
}
[data-theme="dark"] .pmd-task-add-form{
  border: none;
}
[data-theme="light"] .pmd-task-input {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-task-input:focus {
  border-color: var(--pmd-blue-hover);
  outline: 2px solid var(--pmd-blue-hover);
}
[data-theme="light"] .pmd-task-item {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-task-item:hover {
  border-color: var(--pmd-blue-hover);
  background: var(--pmd-blue-soft);
}
[data-theme="light"] .pmd-task-item.is-done {
  border-color: var(--pmd-blue-active);
  opacity: .95;
}
[data-theme="light"] .pmd-task-del {
  border-color: var(--pmd-blue);
  background: #fff;
  color: var(--pmd-blue);
}
[data-theme="light"] .pmd-task-del:hover {
  background: var(--pmd-blue-soft);
  border-color: var(--pmd-blue-hover);
  color: var(--pmd-blue-hover);
}
[data-theme="light"] .pmd-task-bulk-actions {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-task-bulk-actions .pmd-btn {
  border-color: var(--pmd-blue);
  font-weight: 500;
}
[data-theme="light"] .pmd-tasks-empty {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-kpi {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-kpi--focus {
  border-color: var(--pmd-blue-hover);
}
[data-theme="light"] .pmd-kpi-partial {
  background: var(--pmd-blue-soft);
  color: var(--pmd-blue-hover);
}
[data-theme="light"] .pmd-preferences {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-pref-item:hover {
  background: var(--pmd-blue-soft);
}
[data-theme="light"] .pmd-modal {
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-modal-close {
  border-color: var(--pmd-blue);
  background: #fff;
  color: var(--pmd-blue);
}
[data-theme="light"] .pmd-modal-close:hover {
  background: var(--pmd-blue-soft);
  border-color: var(--pmd-blue-hover);
  color: var(--pmd-blue-hover);
}

/* ================= BOTÕES AZUIS CONSISTENTES ================= */
[data-theme="light"] .pmd-btn {
  border-color: var(--pmd-blue);
  color: var(--pmd-blue);
  background: #fff;
}
[data-theme="light"] .pmd-btn:hover {
  background: var(--pmd-blue-soft);
  border-color: var(--pmd-blue-hover);
  color: var(--pmd-blue-hover);
  transform: translateY(-2px);
}
[data-theme="light"] .pmd-btn:active {
  background: var(--pmd-blue-soft-hover);
  border-color: var(--pmd-blue-active);
  color: var(--pmd-blue-active);
  transform: translateY(-1px);
}
[data-theme="light"] .pmd-btn--primary {
  background: var(--pmd-blue);
  border-color: var(--pmd-blue);
  color: #fff;
}
[data-theme="light"] .pmd-btn--primary:hover {
  background: var(--pmd-blue-hover);
  border-color: var(--pmd-blue-hover);
  color: #fff;
}
[data-theme="light"] .pmd-btn--primary:active {
  background: var(--pmd-blue-active);
  border-color: var(--pmd-blue-active);
}
[data-theme="light"] .pmd-btn--ghost {
  background: #fff;
  color: var(--pmd-blue);
  border-color: var(--pmd-blue);
}
[data-theme="light"] .pmd-btn--ghost:hover {
  background: var(--pmd-blue-soft);
  color: var(--pmd-blue-hover);
  border-color: var(--pmd-blue-hover);
}
[data-theme="light"] .pmd-btn--danger {
  border-color: #dc2626;
  color: #dc2626;
  background: #fff;
}
[data-theme="light"] .pmd-btn--danger:hover {
  background: #fee2e2;
  border-color: #b91c1c;
  color: #b91c1c;
}
[data-theme="light"] .pmd-btn[disabled],
[data-theme="light"] .pmd-task-bulk-actions .pmd-btn[disabled] {
  opacity: .45;
  background: #fff;
  border-color: var(--pmd-blue);
  color: var(--pmd-blue);
  transform: none;
}

/* ================= FOCUS ACESSÍVEL ================= */
[data-theme="light"] .pmd-btn:focus-visible,
[data-theme="light"] .pmd-task-toggle:focus-visible,
[data-theme="light"] .pmd-task-input:focus,
[data-theme="light"] .pmd-task-add-tile:focus-visible,
[data-theme="light"] .pmd-modal-close:focus-visible,
[data-theme="light"] .pmd-pref-item:focus-within,
[data-theme="light"] .pmd-stage-tab:focus-visible,
[data-theme="light"] .pmd-task-del:focus-visible,
[data-theme="light"] .pmd-task-item:focus-within {
  outline: 2px solid var(--pmd-blue-hover);
  outline-offset: 2px;
}

/* ================= TRANSIÇÕES SUAVES ================= */
[data-theme="light"] .pmd-btn,
[data-theme="light"] .pmd-task-toggle,
[data-theme="light"] .pmd-task-item,
[data-theme="light"] .pmd-task-input,
[data-theme="light"] .pmd-task-add-tile,
[data-theme="light"] .pmd-kpi,
[data-theme="light"] .pmd-preferences,
[data-theme="light"] .pmd-modal,
[data-theme="light"] .pmd-task-del {
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}

/* ===================================================================
   Pomodoro – Toggle Icon Contrast Fix
   =================================================================== */
:root {
  --pmd-toggle-icon-bg-light: #e2e8f0;
  --pmd-toggle-icon-bg-light-hover: #d5dde6;
  --pmd-toggle-icon-bg-light-active: #c4ced9;
  --pmd-toggle-icon-bg-light-open: #0ea5e9;
  --pmd-toggle-icon-color-light-open: #ffffff;
  --pmd-toggle-icon-bg-dark: rgba(255,255,255,0.22);
  --pmd-toggle-icon-bg-dark-hover: rgba(255,255,255,0.30);
  --pmd-toggle-icon-bg-dark-active: rgba(255,255,255,0.38);
  --pmd-toggle-icon-bg-dark-open: rgba(255,255,255,0.30);
  --pmd-toggle-icon-color-dark-open: #fff;
}
[data-theme="light"] .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-light) !important;
  color: var(--pmd-text-strong, #0f172a);
  transition: background .22s, color .22s, transform .35s cubic-bezier(.4,.8,.25,1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
[data-theme="light"] .pmd-task-toggle:hover .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-light-hover) !important;
}
[data-theme="light"] .pmd-task-toggle:active .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-light-active) !important;
}
[data-theme="light"] .pmd-task-toggle[aria-expanded="true"] .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-light-open) !important;
  color: var(--pmd-toggle-icon-color-light-open);
}
[data-theme="light"] .pmd-task-toggle[aria-expanded="true"]:hover .pmd-task-toggle-icon {
  filter: brightness(1.05);
}
[data-theme="light"] .pmd-task-toggle[aria-expanded="true"]:active .pmd-task-toggle-icon {
  filter: brightness(.92);
}
[data-theme="dark"] .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-dark) !important;
  color: #fff;
  transition: background .22s, transform .35s cubic-bezier(.4,.8,.25,1);
}
[data-theme="dark"] .pmd-task-toggle:hover .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-dark-hover) !important;
}
[data-theme="dark"] .pmd-task-toggle:active .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-dark-active) !important;
}
[data-theme="dark"] .pmd-task-toggle[aria-expanded="true"] .pmd-task-toggle-icon {
  background: var(--pmd-toggle-icon-bg-dark-open) !important;
  color: var(--pmd-toggle-icon-color-dark-open);
}
.pmd-task-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.pmd-task-toggle:focus-visible .pmd-task-toggle-icon {
  outline: 2px solid var(--pmd-focus-ring, #0ea5e9);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pmd-task-toggle-icon {
    transition: background .15s, color .15s;
  }
}

/* ================================================================
   Hover / Active / Focus para .pmd-task-del
   ================================================================ */
:root {
  --pmd-task-del-light-fg: #0ea5e9;
  --pmd-task-del-light-fg-hover: #0369a1;
  --pmd-task-del-light-fg-active: #075985;
  --pmd-task-del-light-bg: #ffffff;
  --pmd-task-del-light-bg-hover: #e2f6ff;
  --pmd-task-del-light-bg-active: #d1effc;
  --pmd-task-del-light-border: currentColor;
  --pmd-task-del-dark-fg: #cfe9f5;
  --pmd-task-del-dark-fg-hover: #ffffff;
  --pmd-task-del-dark-fg-active: #e0f7ff;
  --pmd-task-del-dark-bg: rgba(255,255,255,0.06);
  --pmd-task-del-dark-bg-hover: rgba(255,255,255,0.14);
  --pmd-task-del-dark-bg-active: rgba(255,255,255,0.20);
  --pmd-task-del-dark-border: rgba(255,255,255,0.28);
}
.pmd-task-del {
  position: relative;
  font-weight: 600;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 30px;
  user-select: none;
}
[data-theme="light"] .pmd-task-del {
  background: var(--pmd-task-del-light-bg);
  color: var(--pmd-task-del-light-fg);
  border: 1px solid var(--pmd-task-del-light-border);
}
[data-theme="light"] .pmd-task-del:hover {
  background: var(--pmd-task-del-light-bg-hover);
  color: var(--pmd-task-del-light-fg-hover);
  border-color: var(--pmd-task-del-light-fg-hover);
  transform: translateY(-2px);
}
[data-theme="light"] .pmd-task-del:active {
  background: var(--pmd-task-del-light-bg-active);
  color: var(--pmd-task-del-light-fg-active);
  border-color: var(--pmd-task-del-light-fg-active);
  transform: translateY(-1px);
}
[data-theme="dark"] .pmd-task-del {
  background: var(--pmd-task-del-dark-bg);
  color: var(--pmd-task-del-dark-fg);
  border: 1px solid var(--pmd-task-del-dark-border);
}
[data-theme="dark"] .pmd-task-del:hover {
  background: var(--pmd-task-del-dark-bg-hover);
  color: var(--pmd-task-del-dark-fg-hover);
  border-color: var(--pmd-task-del-dark-fg-hover);
  transform: translateY(-2px);
}
[data-theme="dark"] .pmd-task-del:active {
  background: var(--pmd-task-del-dark-bg-active);
  color: var(--pmd-task-del-dark-fg-active);
  border-color: var(--pmd-task-del-dark-fg-active);
  transform: translateY(-1px);
}
.pmd-task-del:focus-visible {
  outline: 2px solid var(--pmd-focus-ring, #0ea5e9);
  outline-offset: 2px;
}
.pmd-task-del[disabled] {
  opacity: .45;
  pointer-events: none;
  transform: none;
}

/* ===== Preferências: layout aprimorado ===== */
.pmd-pref-fieldset {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 12px 14px 14px;
  margin: 0 0 1.5rem;
}
[data-theme="light"] .pmd-pref-fieldset {
  border: none; 
  background: #ffffff;
}
[data-theme="light"] .pmd-pref-fieldset:hover {
  border-color: rgba(0,0,0,0.24);
}
.pmd-pref-legend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0;
  color: var(--text-gray, #94a3b8);
}
[data-theme="light"] .pmd-pref-legend {
  color: #64748b;
}
.pmd-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
  gap: 10px 14px;
}
.pmd-pref-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3px;
}
.pmd-pref-row input[type=number] {
  border-radius: 8px;
  padding: 8px 8px;
  font-size: 14px;
  line-height: 1.2;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--text-white,#fff);
  transition: border-color .18s, background .18s;
}
.pmd-pref-row input[type=number]:focus {
  outline: 2px solid #0ea5e9;
  background: rgba(255,255,255,0.14);
}
[data-theme="light"] .pmd-pref-row input[type=number] {
  background: #f8fafc;
  border-color: var(--pmd-blue);
  color: #0f172a;
}
[data-theme="light"] .pmd-pref-row input[type=number]:focus {
  background: #ffffff;
  border-color: #0ea5e9;
}
.pmd-pref-hint {
  font-size: 11px;
  margin: 6px 0 0;
  opacity: .7;
  letter-spacing: .4px;
  color: var(--text-gray,#89a1aa);
  margin-bottom: 0.5rem;
}
[data-theme="light"] .pmd-pref-hint {
  color: #64748b;
}
.pmd-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  justify-content: center;
}
#pref-feedback {
  min-height: 18px;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: .3px;
}
@media (max-width: 520px) {
  .pmd-pref-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 380px) {
  .pmd-pref-grid {
    grid-template-columns: 1fr;
  }
}

/* Pomodoro – Patch incremental */
.pmd-modal-actions .pmd-btn { background: transparent; }
[data-theme="light"] .pmd-modal-actions .pmd-btn--ghost {
  background: transparent;
  border-color: var(--pmd-light-border, #d5dbe3);
  color: var(--pmd-light-text, #0f172a);
}
[data-theme="light"] .pmd-modal-actions .pmd-btn--ghost:hover {
  background: var(--pmd-light-bg-soft, #f1f5f9);
  border-color: var(--pmd-light-border-strong, #c0c9d4);
  color: var(--pmd-light-text, #0f172a);
}
[data-theme="dark"] .pmd-modal-actions .pmd-btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.25);
  color: var(--text-white, #fff);
}
[data-theme="dark"] .pmd-modal-actions .pmd-btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.42);
}
[data-theme="light"] #task-collapsible { opacity: 0; }
[data-theme="light"] .pmd-tasks[data-expanded="true"] #task-collapsible { opacity: 1; }
.pmd-stage-tab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.pmd-btn.btn-danger-pomodoro,
.pmd-btn--danger.btn-danger-pomodoro {
  border-color: #ef4444;
  color: #dc2626;
}
.pmd-btn.btn-danger-pomodoro:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}

/* Grid de opções do alarme */
.pmd-alarm-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-top: 8px;
}
@media (min-width: 520px) {
  .pmd-alarm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 820px) {
  .pmd-alarm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pmd-alarm-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  padding: 10px;
  background: #fafafa;
  cursor: pointer;
  width: 100%;
}
.pmd-alarm-option:hover {
  background: #f5f5f5;
  border-color: var(--pmd-blue, #0ea5e9);
  box-shadow: 0 2px 6px -2px rgba(14, 165, 233, 0.25);
  transform: translateY(-1px);
}
.pmd-alarm-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #4f46e5; /* indigo */
  cursor: pointer;
}
.pmd-alarm-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.pmd-alarm-title {
  font-weight: 600;
  font-size: 0.97rem;
}
.pmd-alarm-sub {
  color: #666;
  font-size: 0.85rem;
  word-break: break-all;
}
#pref-alarms-fieldset.is-disabled {
  opacity: .6;
  pointer-events: none;
}

/* Preferências – colapso */
#prefs-collapsible,
.pmd-prefs-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .35s ease, opacity .3s ease;
}
#prefs-collapsible > *,
.pmd-prefs-collapsible > * {
  min-height: 0;
}
#pmd-preferences-section[data-expanded="true"] #prefs-collapsible,
#pmd-preferences-section[data-expanded="true"] .pmd-prefs-collapsible,
#prefs-toggle[aria-expanded="true"] + #prefs-collapsible {
  grid-template-rows: 1fr;
  opacity: 1;
  max-height: none !important;
  overflow: visible !important;
}
#prefs-collapsible[hidden] { display: none !important; }
.pmd-preferences { overflow: visible !important; }

:not([data-theme="light"]) .pmd-alarm-option {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-white);
}
:not([data-theme="light"]) .pmd-alarm-option:hover {
  background: rgba(255,255,255,0.10);
}

.alarm-item {
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    filter var(--transition-fast);
}
.alarm-item:not(.ringing):not(.snoozing):hover {
  background: rgba(0, 212, 255, 0.06);
  border-color: var(--alarm-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.alarm-item:not(.ringing):not(.snoozing):active {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.alarm-item:not(.ringing):not(.snoozing):hover .alarm-time {
  color: var(--alarm-primary);
}
.alarm-item:not(.ringing):not(.snoozing):hover .alarm-name {
  opacity: 1;
}
.alarm-item:focus-within {
  outline: 2px solid var(--alarm-primary);
  outline-offset: 2px;
}
.alarm-item.ringing,
.alarm-item.snoozing {
  cursor: default;
}
.alarm-item.ringing:hover,
.alarm-item.snoozing:hover {
  background: inherit;
  transform: none;
  box-shadow: none;
}
[data-theme="light"] .alarm-item:not(.ringing):not(.snoozing):hover {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.6);
  box-shadow: var(--shadow-soft);
}

.pmd-alarm-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.pmd-preview-btn {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  border: 1px solid;
}
[data-theme="dark"] .pmd-preview-btn {
  background: #000000;
  color: #ffffff;
  border-color: rgba(255,255,255,0.25);
}
[data-theme="dark"] .pmd-preview-btn:hover {
  background: #0b0b0b;
  border-color: rgba(255,255,255,0.42);
  transform: translateY(-1px);
}
[data-theme="dark"] .pmd-preview-btn:active {
  transform: translateY(0);
}
[data-theme="light"] .pmd-preview-btn {
  background: #ffffff;
  color: var(--pmd-light-text, #0f172a);
  border:1px solid var(--pmd-blue-light, #93c5fd);
}
[data-theme="light"] .pmd-preview-btn:hover {
  background: #f8fafc;
  border-color: var(--pmd-blue, #1d4ed8) !important;
  transform: translateY(-1px);
}
[data-theme="light"] .pmd-preview-btn:active {
  background: #eef2f7;
  transform: translateY(0);
}
.pmd-preview-btn:focus-visible {
  outline: 2px solid var(--pmd-focus-ring, #0ea5e9);
  outline-offset: 2px;
}
[data-theme="light"] .pmd-alarm-option {
  border: 1px solid var(--pmd-blue-light, #93c5fd);
}
[data-theme="light"] .pmd-alarm-option:active {
  transform: translateY(0);
}
.pmd-alarm-option:focus-within {
  outline: 2px solid var(--pmd-focus-ring, #0ea5e9);
  outline-offset: 2px;
}
.pmd-tick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.pmd-tick-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  cursor: pointer;
}
.pmd-tick-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pmd-tick-title { font-weight: 600; }
.pmd-tick-sub { font-size: 12px; opacity: .7; }
[data-theme="light"] .pmd-tick-option {
  background: #fafafa;
  border-color: var(--pmd-blue-light, #93c5fd);
}
[data-theme="light"] .pmd-tick-option:hover {
  background: #f1f5f9;
  border-color: var(--pmd-blue, #0ea5e9);
  box-shadow: 0 2px 6px -2px rgba(14, 165, 233, 0.25);
  transform: translateY(-1px);
}
[data-theme="light"] .pmd-tick-option:active { transform: translateY(0); }

@media (prefers-color-scheme: dark) {
  [data-theme="dark"] .pmd-tick-option {
    background: #0b1220;
    border-color: #243244;
  }
  [data-theme="dark"] .pmd-tick-option:hover {
    background: #0f172a;
    border-color: #60a5fa;
    box-shadow: 0 2px 8px -2px rgba(96, 165, 250, 0.25);
    transform: translateY(-1px);
  }
}
.pmd-tick-option:focus-within {
  outline: 2px solid var(--pmd-focus-ring, #0ea5e9);
  outline-offset: 2px;
}
.pmd-tick-option input[type="radio"] {
  accent-color: var(--pmd-blue, #0ea5e9);
}

.pmd-alarm-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:inherit;
  font-size:1.2rem;
  line-height:1;
  padding:.25rem .35rem;
  margin-left:.25rem;
  cursor:pointer;
  border-radius:.35rem;
  transition:background .15s ease, transform .05s ease;
}
.pmd-alarm-btn:hover{ background:rgba(0,0,0,.06); }
.pmd-alarm-btn:active{ transform:scale(.96); }
.pmd-alarm-btn[aria-pressed="true"]{ outline:2px solid currentColor; outline-offset:2px; }
.pmd-alarm-icon{ display:inline-block; width:1.25em; text-align:center; }
.pmd-alarm-btn .pmd-alarm-icon{
  transform-origin:50% 50%;
  transition:transform .12s ease;
  will-change:transform;
}
.pmd-alarm-btn:hover .pmd-alarm-icon,
.pmd-alarm-btn:focus-visible .pmd-alarm-icon{ transform:scale(1.15); }
@media (prefers-reduced-motion: reduce){
  .pmd-alarm-btn .pmd-alarm-icon{ transition:none; }
}
#time-display + #alarm-volume-btn{ margin-left:.5rem; }
#pref-alarms-fieldset{
  --pmd-surface: #ffffff;
  --pmd-surface-2: #fafafa;
  --pmd-border: #e6e8ec;
  --pmd-text: #111827;
  --pmd-subtle: #6b7280;
  --pmd-accent: #4f46e5;
  --pmd-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.05);
}
@media (prefers-color-scheme: dark){
  #pref-alarms-fieldset{
    --pmd-surface: #0f1115;
    --pmd-surface-2: #0b0d11;
    --pmd-border: #22262b;
    --pmd-text: #e5e7eb;
    --pmd-subtle: #9ca3af;
    --pmd-accent: #8b5cf6;
    --pmd-shadow: 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.35);
  }
}
[data-theme="dark"] #pref-alarms-fieldset{
  --pmd-surface: #0f1115;
  --pmd-surface-2: #0b0d11;
  --pmd-border: #22262b;
  --pmd-text: #e5e7eb;
  --pmd-subtle: #9ca3af;
  --pmd-accent: #8b5cf6;
  --pmd-shadow: 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.35);
}
.pmd-alarm-volume-row{
  display:grid;
  grid-template-columns: minmax(10ch, 1fr) minmax(180px, 2fr) auto auto;
  grid-template-areas: "label slider val actions";
  gap:.9rem .9rem;
  align-items:center;
  margin:.9rem 0 1.1rem;
  padding: .9rem 1rem;
  background-color: var(--pmd-surface, #ffffff);
  border:1px solid var(--pmd-border);
  border-radius: 12px;
  box-shadow: var(--pmd-shadow);
  color: var(--pmd-text);
}
.pmd-alarm-volume-label{ grid-area: label; color:var(--pmd-text); font-weight:500; }
#pref-alarm-volume{ grid-area: slider; }
.pmd-alarm-volume-val{ grid-area: val; color:var(--pmd-subtle); }
.pmd-alarm-test-actions{ grid-area: actions; }
#pref-alarm-volume{
  width:100%;
  min-inline-size:0;
}
.pmd-alarm-test-actions{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
  flex-wrap:wrap;
}
#pref-alarm-volume:focus-visible,
.pmd-alarm-test-actions .pmd-btn:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--pmd-accent) 88%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}
#pref-alarm-volume{
  appearance:none;
  height: 6px;
  background: linear-gradient(180deg, #e5e7eb, #e5e7eb);
  border-radius: 999px;
}
@media (prefers-color-scheme: dark){
  #pref-alarm-volume{ background: linear-gradient(180deg, #2b3137, #2b3137); }
}
#pref-alarm-volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px;
  background: var(--pmd-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  cursor:pointer;
  transition: transform .12s ease;
}
#pref-alarm-volume:active::-webkit-slider-thumb{ transform: scale(1.05); }
#pref-alarm-volume::-moz-range-thumb{
  width:18px; height:18px;
  background: var(--pmd-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  cursor:pointer;
  transition: transform .12s ease;
}
#pref-alarm-volume:active::-moz-range-thumb{ transform: scale(1.05); }
.pmd-alarm-volume-val{
  min-width:3.5ch;
  text-align:right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px){
  .pmd-alarm-volume-row{
    grid-template-columns: minmax(9ch, 1fr) minmax(140px, 2fr) auto auto;
  }
}
@media (max-width: 640px){
  .pmd-alarm-volume-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label val"
      "slider slider"
      "actions actions";
    row-gap:.6rem;
  }
  .pmd-alarm-test-actions{ justify-content:flex-end; }
}
@media (max-width: 420px){
  .pmd-alarm-volume-row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "val"
      "slider"
      "actions";
  }
  .pmd-alarm-volume-val{ justify-self:start; }
  .pmd-alarm-test-actions{ justify-content:flex-start; }
}
#pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn{
  background-color: transparent;
  border: 1px solid var(--pmd-border);
  color: var(--pmd-text);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn:hover{
  background-color: rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  #pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn{
    background-color: transparent;
    border: 1px solid var(--pmd-border);
    color: var(--pmd-text);
  }
  #pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn:hover{
    background-color: rgba(255,255,255,.08);
  }
}
[data-theme="dark"] #pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn{
  background-color: transparent;
  border: 1px solid var(--pmd-border);
  color: var(--pmd-text);
}
[data-theme="dark"] #pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn:hover{
  background-color: rgba(255,255,255,.08);
}
#pref-alarms-fieldset.is-disabled .pmd-alarm-volume-row{
  opacity:.7;
  filter:saturate(.9);
}
#pref-alarms-fieldset.is-disabled .pmd-alarm-volume-row input[type="range"],
#pref-alarms-fieldset.is-disabled .pmd-alarm-test-actions .pmd-btn{
  opacity:.6;
  pointer-events:none;
}
#pref-alarms-fieldset .pmd-alarm-volume-row{
  background: #ffffff;
  box-shadow: none;
}
[data-theme="light"] #pref-alarms-fieldset .pmd-alarm-volume-row{
  background: #ffffff;
  box-shadow: none;
}
:root:not([data-theme="dark"]) #pref-alarms-fieldset .pmd-alarm-volume-row{
  background: #ffffff;
  box-shadow: none;
}
@media (prefers-color-scheme: dark){
  #pref-alarms-fieldset .pmd-alarm-volume-row{
    background: #0b1220;
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.35);
  }
}
[data-theme="dark"] #pref-alarms-fieldset .pmd-alarm-volume-row{
  background: #0b1220;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.35);
}
#pref-alarms-fieldset{
  --pmd-bg: #ffffff;
  --pmd-border: #e5e7eb;
  --pmd-text: #0f172a;
  --pmd-subtle: #475569;
  --pmd-accent: #2563eb;
  --pmd-track-rail: #e5e7eb;
  --pmd-track-fill: #3b82f6;
  --pmd-btn-hover: rgba(15,23,42,.06);
}
[data-theme="dark"] #pref-alarms-fieldset{
  --pmd-bg: #0f1115;
  --pmd-border: #2a2f36;
  --pmd-text: #e5e7eb;
  --pmd-subtle: #9ca3af;
  --pmd-accent: #60a5fa;
  --pmd-track-rail: #2b3137;
  --pmd-track-fill: #60a5fa;
  --pmd-btn-hover: rgba(255,255,255,.08);
}
.pmd-alarm-volume-row{
  background-color: var(--pmd-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.15)!important; 
  border-radius: 12px;
  box-shadow: none !important;
  color: var(--pmd-text) !important;
}
[data-theme="light"] .pmd-alarm-volume-row{
     border: 1px solid var(--pmd-blue-light, #93c5fd) !important; 
}
#pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn{
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--pmd-text) !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn:hover{
  background: var(--pmd-btn-hover) !important;
}
#pref-alarm-volume{
  --_p: 80%;
  width:100%;
  min-inline-size:0;
  appearance:none;
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
#pref-alarm-volume::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background: linear-gradient(to right,
    var(--pmd-track-fill) 0%,
    var(--pmd-track-fill) var(--_p),
    var(--pmd-track-rail) var(--_p),
    var(--pmd-track-rail) 100%);
}
#pref-alarm-volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px;
  margin-top:-5px;
  background: #fff;
  border: 2px solid var(--pmd-accent);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
[data-theme="dark"] #pref-alarm-volume::-webkit-slider-thumb{ background:#0f1115; }
#pref-alarm-volume:active::-webkit-slider-thumb{ transform: scale(1.05); }
#pref-alarm-volume::-moz-range-track{
  height:8px;
  border-radius:999px;
  background: var(--pmd-track-rail);
}
#pref-alarm-volume::-moz-range-progress{
  height:8px;
  border-radius:999px;
  background: var(--pmd-track-fill);
}
#pref-alarm-volume::-moz-range-thumb{
  width:18px; height:18px;
  background:#fff;
  border: 2px solid var(--pmd-accent);
  border-radius:50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
[data-theme="dark"] #pref-alarm-volume::-moz-range-thumb{ background:#0f1115; }
#pref-alarm-volume:active::-moz-range-thumb{ transform: scale(1.05); }
#pref-alarm-volume:focus-visible,
#pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--pmd-accent) 85%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}
:root:not([data-theme="dark"]) #pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn{
  border: 1px solid var(--pmd-blue-light, #93c5fd) !important;
}
[data-theme="light"] #pref-alarms-fieldset .pmd-alarm-test-actions .pmd-btn{
  border: 1px solid var(--pmd-blue-light, #93c5fd) !important;
}
.pmd-pref-actions{
  --pref-btn-w: 128px;
}
#pref-save,
#pref-reset{
  inline-size: var(--pref-btn-w);
  justify-content: center;
}
[data-theme="dark"] .pmd-pref-actions .pmd-btn,
[data-theme="black"] .pmd-pref-actions .pmd-btn{
  color: var(--pmd-text, #e5e7eb);
  border-color: var(--pmd-border, #2a2f36);
  background: transparent;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
[data-theme="dark"] .pmd-pref-actions .pmd-btn:hover,
[data-theme="black"] .pmd-pref-actions .pmd-btn:hover{
  background: rgba(255,255,255,.08);
  border-color: color-mix(in oklab, var(--pmd-border, #2a2f36) 80%, #fff 20%);
}
[data-theme="dark"] .pmd-pref-actions .pmd-btn.pmd-btn--primary,
[data-theme="black"] .pmd-pref-actions .pmd-btn.pmd-btn--primary{
  background: var(--pmd-accent, #60a5fa);
  border-color: color-mix(in oklab, var(--pmd-accent, #60a5fa) 80%, #000 20%);
  color: #0b1220;
}
[data-theme="dark"] .pmd-pref-actions .pmd-btn.pmd-btn--primary:hover,
[data-theme="black"] .pmd-pref-actions .pmd-btn.pmd-btn--primary:hover{
  box-shadow: 0 0 0 9999px rgba(255,255,255,.08) inset;
  border-color: color-mix(in oklab, var(--pmd-accent, #60a5fa) 70%, #fff 30%);
}

.pmd-pref-actions{
  display:flex;
  align-items:center;
  gap: .75rem;
}
.pmd-btn--link{
  background: transparent;
  border: none;
  color: var(--pmd-accent, #2563eb);
  padding: .25rem .25rem;
  font-weight: 500;
  cursor: pointer;
}
.pmd-btn--link:hover{
  background: var(--pmd-btn-hover, rgba(15,23,42,.06));
  border-radius: 8px;
}
#pref-reset.pmd-btn--link::before{
  content: "↺";
  margin-inline-end: .35rem;
  opacity: .9;
}
.pmd-pref-actions--split{
  justify-content: space-between;
}
.pmd-pref-actions--split .pmd-pref-actions__left{
  display:flex; align-items:center; gap:.5rem;
}
.pmd-pref-actions--split .pmd-pref-actions__right{
  display:flex; align-items:center; gap:.5rem;
}
.pmd-pref-actions--split #pref-save,
.pmd-pref-actions--split #pref-apply-now{
  min-inline-size: 160px;
  justify-content: center;
}
@media (max-width: 560px){
  .pmd-pref-actions--split{
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .pmd-pref-actions--split .pmd-pref-actions__right{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .pmd-pref-actions--split .pmd-pref-actions__left{
    align-self: flex-start;
  }
}
.pmd-pref-actions .pmd-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  padding: .5rem .9rem;
  white-space: normal;
  text-align: center;
}
@media (min-width: 481px) and (max-width: 768px){
  .pmd-pref-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
  #pref-save{
    grid-column: 1 / -1;
    min-inline-size: auto;
  }
  #pref-apply-now, #pref-reset{
    min-inline-size: 0;
  }
}
@media (max-width: 480px){
  .pmd-pref-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .pmd-pref-actions .pmd-btn{
    width: 100%;
    min-inline-size: 0;
  }
}
@media (max-width: 640px){
  .pmd-pref-actions.pmd-pref-actions--sticky{
    position: sticky;
    bottom: 0;
    padding: .75rem;
    margin-inline: -1rem;
    background: var(--pmd-bg, #ffffff);
    border-top: 1px solid var(--pmd-border, #e5e7eb);
    z-index: 10;
  }
  [data-theme="dark"] .pmd-pref-actions.pmd-pref-actions--sticky,
  [data-theme="black"] .pmd-pref-actions.pmd-pref-actions--sticky{
    background: var(--pmd-bg, #0f1115);
    border-top-color: var(--pmd-border, #2a2f36);
  }
}
@media (min-width: 769px){
  #pref-save, #pref-reset{
    min-inline-size: 140px;
  }
}
@media (max-width: 640px){
  .pmd-pref-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    width: 100%;
  }
  #pref-save,
  #pref-reset{
    width: 100%;
    min-inline-size: 0;
    justify-content: center;
  }
  #pref-apply-now{
    grid-column: 1 / -1;
    width: 100%;
    min-inline-size: 0;
    justify-content: center;
  }
  .pmd-pref-actions .pmd-btn{
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: .55rem .9rem;
  }
}
@media (min-width: 641px){
  .pmd-pref-actions{
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
  }
}
@media (max-width: 640px){
  .pmd-pref-actions{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: .6rem;
    width: 100%;
    justify-items: stretch;
    align-items: stretch;
  }
  #pref-save{ grid-column: 1; grid-row: 1; }
  #pref-reset{ grid-column: 2; grid-row: 1; }
  #pref-apply-now{ grid-column: 1 / -1; grid-row: 2; }
  #pref-save,
  #pref-reset,
  #pref-apply-now{
    width: 100% !important;
    inline-size: 100% !important;
    max-width: none !important;
    min-inline-size: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box;
  }
  .pmd-pref-actions .pmd-btn{
    display: flex;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: .55rem .9rem;
  }
  #pref-save,
  #pref-reset{
    inline-size: auto !important;
  }
}

#timer-panel:fullscreen,
#timer-panel.pmd-fs{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 4vh 5vw;
  background: var(--pmd-bg, #0f1115);
  z-index: 9999;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 2rem;
  align-content: center;
  justify-items: center;
  box-sizing: border-box;
}
.pmd-fs-active{ overflow: hidden; }
#timer-panel:fullscreen .pmd-time-display,
#timer-panel.pmd-fs .pmd-time-display{
  font-size: clamp(56px, 16vw, 220px);
}
:root[data-theme="light"] #timer-panel:fullscreen,
:root[data-theme="light"] #timer-panel.pmd-fs{
  background: var(--pmd-bg, #ffffff);
}
#timer-panel:fullscreen #time-display,
#timer-panel.pmd-fs #time-display{
  place-self: center;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  max-width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  font-size: clamp(96px, 14vw, 260px);
}
@media (max-width: 640px){
  #timer-panel:fullscreen #time-display,
  #timer-panel.pmd-fs #time-display{
    font-size: clamp(112px, 26vw, 280px);
  }
}
@media (min-width: 641px) and (max-width: 1023px){
  #timer-panel:fullscreen #time-display,
  #timer-panel.pmd-fs #time-display{
    font-size: clamp(120px, 18vw, 300px);
  }
}
@media (min-width: 1024px){
  #timer-panel:fullscreen #time-display,
  #timer-panel.pmd-fs #time-display{
    font-size: clamp(140px, 12vw, 320px);
  }
}
#timer-panel:fullscreen #time-display .pmd-btn,
#timer-panel.pmd-fs #time-display .pmd-btn,
#timer-panel:fullscreen #time-display button,
#timer-panel.pmd-fs #time-display button{
  line-height: 1.1;
  white-space: nowrap;
  min-height: 44px;
  min-width: 44px;
  padding: .7rem 1.1rem;
  font-size: clamp(16px, 2.2vw, 22px);
}
@media (min-width: 1024px){
  #timer-panel:fullscreen #time-display .pmd-btn,
  #timer-panel.pmd-fs #time-display .pmd-btn,
  #timer-panel:fullscreen #time-display button,
  #timer-panel.pmd-fs #time-display button{
    min-height: 50px;
    min-width: 50px;
    padding: .9rem 1.4rem;
    font-size: clamp(18px, 1.6vw, 26px);
  }
}
#timer-panel:fullscreen .pmd-stage-tabs,
#timer-panel.pmd-fs .pmd-stage-tabs{
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 1024px){
  #timer-panel:fullscreen .pmd-stage-tabs,
  #timer-panel.pmd-fs .pmd-stage-tabs{
    gap: 1.2rem;
  }
  #timer-panel:fullscreen .pmd-stage-tab,
  #timer-panel.pmd-fs .pmd-stage-tab{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 1.3vw, 22px);
    padding: 0.85rem 1.35rem;
    min-height: 52px;
    min-width: 52px;
    border-radius: 12px;
    line-height: 1.1;
  }
  #timer-panel:fullscreen .pmd-stage-tab.is-active,
  #timer-panel.pmd-fs .pmd-stage-tab.is-active{
    font-weight: 600;
  }
}
@media (min-width: 1440px){
  #timer-panel:fullscreen .pmd-stage-tab,
  #timer-panel.pmd-fs .pmd-stage-tab{
    padding: 1rem 1.6rem;
    min-height: 56px;
    min-width: 56px;
    font-size: clamp(18px, 1.1vw, 24px);
  }
}
.pmd-alarm-btn .pmd-alarm-icon{
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  transition: color .18s ease, fill .18s ease, stroke .18s ease, opacity .18s ease, transform .18s ease;
}
:root[data-theme="light"] .pmd-alarm-btn{ 
  color: #0f172a;
}
:root[data-theme="dark"] .pmd-alarm-btn{ 
  color: #f3f4f6;
}
:root[data-theme="light"] .pmd-alarm-btn:hover{ color: #0b1220; }
:root[data-theme="dark"]  .pmd-alarm-btn:hover{ color: #ffffff;  }
#alarm-volume-btn[aria-pressed="true"] .spk-waves{ opacity: 0; }
#alarm-volume-btn[aria-pressed="true"] .spk-slash{ opacity: 1; }
#alarm-volume-btn[aria-pressed="true"] .spk-body{ opacity: .7; }
#alarm-volume-btn[aria-pressed="false"] .spk-waves{ opacity: 1; }
#alarm-volume-btn[aria-pressed="false"] .spk-slash{ opacity: 0; }
.pmd-alarm-btn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 8px;
}
#timer-panel:fullscreen #alarm-volume-btn .pmd-alarm-icon,
#timer-panel.pmd-fs     #alarm-volume-btn .pmd-alarm-icon{
  width: clamp(22px, 2.2vw, 36px);
  height: clamp(22px, 2.2vw, 36px);
}
.pmd-alarm-btn::before,
.pmd-alarm-btn::after{
  content: none !important;
  background: none !important;
}
#alarm-volume-btn{
  color: inherit;
}
#kpi-ends-at{
  margin-top: .25rem;
  font-size: .9rem;
  opacity: .85;
  display: flex;
  align-items: baseline;
  gap: .35rem;
}
#kpi-ends-at .kpi-ends-time{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
:root[data-theme="light"] #kpi-ends-at{ color: #0f172a; }
:root[data-theme="dark"]  #kpi-ends-at{ color: #e5e7eb; }
#timer-panel:fullscreen #kpi-ends-at,
#timer-panel.pmd-fs     #kpi-ends-at{
  font-size: 1rem;
}
.pmd-kpi{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  row-gap: .2rem;
  column-gap: 1rem;
  align-items: end;
}
.pmd-kpi .pmd-kpi-label{
  grid-column: 1 / -1;
}
.pmd-kpi .pmd-kpi-value{
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
#kpi-ends-at{
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-top: 0;
  white-space: nowrap;
}
:root[data-theme="light"] #kpi-ends-at{ color: var(--pmd-light-text-dim);}

.pmd-tick-volume{
  margin-top: .75rem;
  display: grid;
  gap: .5rem .75rem;
  align-items: center;
}
@media (min-width: 480px){
  .pmd-tick-volume{
    grid-template-columns: minmax(120px, 0.4fr) 1fr auto;
  }
  .pmd-tick-vol-label{ grid-column: 1; }
  .pmd-tick-vol-ctrl { grid-column: 2 / span 2; }
}
@media (max-width: 479.98px){
  .pmd-tick-vol-label{ grid-column: 1 / -1; }
  .pmd-tick-vol-ctrl { grid-column: 1 / -1; }
}
.pmd-tick-vol-label{
  font-size: .95rem;
  opacity: .9;
  line-height: 1.2;
  user-select: none;
  white-space: nowrap;
}
.pmd-tick-vol-ctrl{
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.pmd-tick-vol-val{
  width: 3.5ch;
  text-align: right;
  opacity: .85;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}
#pref-tick-volume{
  --tick-accent: var(--pmd-accent, #2563eb);
  --tick-track-h: 8px;
  --tick-thumb-sz: 16px;
  --tick-track-bg: color-mix(in oklab, currentColor 14%, transparent);
  --tick-fill-bg: var(--tick-accent);
  --tick-focus-ring: color-mix(in oklab, var(--tick-accent) 30%, transparent);
}
#pref-tick-volume{
  appearance: none;
  width: 100%;
  height: var(--tick-track-h);
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--tick-fill-bg) var(--_p, 50%), transparent var(--_p, 50%)),
    var(--tick-track-bg);
  outline: none;
  transition: background-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
#pref-tick-volume:hover{
  filter: brightness(1.02);
}
#pref-tick-volume:active{
  filter: brightness(0.98);
}
@media (prefers-reduced-motion: reduce){
  #pref-tick-volume{ transition: none; }
}
#pref-tick-volume:focus-visible{
  box-shadow: 0 0 0 3px var(--tick-focus-ring);
}
#pref-tick-volume::-webkit-slider-runnable-track{
  height: var(--tick-track-h);
  background: transparent;
  border-radius: 999px;
}
#pref-tick-volume::-webkit-slider-thumb{
  appearance: none;
  width: var(--tick-thumb-sz);
  height: var(--tick-thumb-sz);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tick-accent);
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 0 0 2px color-mix(in oklab, var(--tick-accent) 18%, transparent);
  margin-top: calc((var(--tick-track-h) - var(--tick-thumb-sz)) / 2);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#pref-tick-volume:hover::-webkit-slider-thumb{
  transform: scale(1.04);
}
#pref-tick-volume:active::-webkit-slider-thumb{
  transform: scale(0.98);
}
#pref-tick-volume:focus-visible::-webkit-slider-thumb{
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 0 0 4px var(--tick-focus-ring);
}
#pref-tick-volume::-moz-range-track{
  height: var(--tick-track-h);
  background:
    linear-gradient(to right, var(--tick-fill-bg) var(--_p, 50%), transparent var(--_p, 50%)),
    var(--tick-track-bg);
  border: 0;
  border-radius: 999px;
}
#pref-tick-volume::-moz-range-thumb{
  width: var(--tick-thumb-sz);
  height: var(--tick-thumb-sz);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tick-accent);
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 0 0 2px color-mix(in oklab, var(--tick-accent) 18%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#pref-tick-volume:hover::-moz-range-thumb{ transform: scale(1.04); }
#pref-tick-volume:active::-moz-range-thumb{ transform: scale(0.98); }
#pref-tick-volume:focus-visible::-moz-range-thumb{
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 0 0 4px var(--tick-focus-ring);
}
:root[data-theme="dark"] #pref-tick-volume{
  --tick-track-bg: color-mix(in oklab, currentColor 22%, transparent);
  --tick-accent: var(--pmd-accent, #60a5fa);
}
.pmd-pref-fieldset[aria-hidden="true"] #pref-tick-volume{
  opacity: .6;
  pointer-events: none;
}
.pmd-tick-volume{
  --_surface-bg: var(--pmd-tick-surface-bg, #f8fafc);
  --_surface-bd: var(--pmd-tick-surface-bd, #e2e8f0);
  background: var(--_surface-bg);
  border: 1px solid var(--_surface-bd);
  border-radius: 12px;
  padding: .9rem 1rem;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pmd-tick-volume:focus-within{
  border-color: color-mix(in oklab, var(--pmd-accent, #2563eb) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pmd-accent, #2563eb) 22%, transparent);
}
.pmd-tick-volume:hover{
  border-color: color-mix(in oklab, var(--_surface-bd) 60%, var(--pmd-accent, #2563eb) 40%);
}
[data-theme="light"] .pmd-tick-volume{
  border-color: var(--pmd-blue-light, #93c5fd);
}
:root[data-theme="dark"] .pmd-tick-volume{
  --_surface-bg: rgba(255,255,255,.04);
  --_surface-bd: rgba(255,255,255,.14);
}
.pmd-tick-volume.pmd-tick-volume--compact{
  padding: .65rem .8rem;
  border-radius: 10px;
}
#pmd-toast-root{
  position: fixed;
  inset: auto 0 0 auto;
  display: grid;
  gap: .5rem;
  padding: 1rem;
  z-index: 2147483647;
  pointer-events: none;
}
@media (min-width: 480px){
  #pmd-toast-root{ padding: 1rem 1.25rem; }
}
.pmd-toast{
  --_bg: color-mix(in oklab, var(--pmd-surface, #ffffff) 85%, transparent);
  --_bd: color-mix(in oklab, currentColor 18%, transparent);
  --_fg: var(--pmd-foreground, #0f172a);
  --_accent: var(--pmd-accent, #2563eb);
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem .9rem;
  align-items: center;
  min-width: min(92vw, 380px);
  max-width: min(92vw, 420px);
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--_bd);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,0)) padding-box,
    var(--_bg);
  color: var(--_fg);
  backdrop-filter: blur(8px) saturate(110%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.08);
  animation: pmd-toast-in .22s ease-out both;
}
:root[data-theme="dark"] .pmd-toast{
  --_bg: color-mix(in oklab, #0b1020 70%, transparent);
  --_bd: color-mix(in oklab, #d1d5db 20%, transparent);
  --_fg: #e5e7eb;
}
.pmd-toast-icon{
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.pmd-toast-body{
  min-width: 0;
}
.pmd-toast-title{
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.15;
  margin: 0 0 .15rem 0;
}
.pmd-toast-msg{
  font-size: .93rem;
  opacity: .92;
  line-height: 1.25;
  word-break: break-word;
}
.pmd-toast-actions{
  display: inline-flex;
  gap: .4rem;
  margin-top: .45rem;
}
.pmd-toast-btn{
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--_accent) 35%, transparent);
  background: color-mix(in oklab, var(--_accent) 8%, transparent);
  color: var(--_accent);
  font-weight: 600;
  padding: .28rem .6rem;
  border-radius: 8px;
  font-size: .86rem;
  cursor: pointer;
}
.pmd-toast-btn:hover{
  background: color-mix(in oklab, var(--_accent) 14%, transparent);
}
.pmd-toast-close{
  margin-left: .25rem;
  width: 30px; height: 30px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.pmd-toast-close:hover{
  background: color-mix(in oklab, currentColor 10%, transparent);
}
.pmd-toast-progress{
  grid-column: 1 / -1;
  height: 3px;
  background: color-mix(in oklab, currentColor 18%, transparent);
  border-radius: 99px;
  overflow: hidden;
}
.pmd-toast-progress > span{
  display: block;
  height: 100%;
  width: var(--_p, 0%);
  background: var(--_accent);
  transition: width .15s linear;
}
.pmd-toast[data-type="success"]{ --_accent: #16a34a; }
.pmd-toast[data-type="info"]   { --_accent: var(--pmd-accent, #2563eb); }
.pmd-toast[data-type="warn"]   { --_accent: #d97706; }
.pmd-toast[data-type="error"]  { --_accent: #dc2626; }
@keyframes pmd-toast-in{
  from{ transform: translateY(8px) scale(.98); opacity: 0; }
  to  { transform: translateY(0)   scale(1);    opacity: 1; }
}
@keyframes pmd-toast-out{
  to{ transform: translateY(6px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .pmd-toast{ animation: none; }
}
.pmd-tick-volume{
  display: grid;
  gap: .6rem 1rem;
}
@media (min-width: 480px){
  .pmd-tick-volume{
    grid-template-columns: max-content 1fr;
    align-items: center;
  }
  .pmd-tick-vol-label{ grid-column: 1; }
  .pmd-tick-vol-ctrl { grid-column: 2; }
}
@media (max-width: 479.98px){
  .pmd-tick-volume{
    grid-template-columns: 1fr;
  }
}
.pmd-tick-vol-ctrl{
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.pmd-tick-vol-ctrl input[type="range"]{
  flex: 1 1 auto;
  width: 100%;
  min-width: 140px;
}
.pmd-tick-vol-val{
  flex: 0 0 auto;
  width: 3.5ch;
  text-align: right;
  white-space: nowrap;
}

/* ================================================================
   38. SCROLLBAR / ESTADOS / ACESSIBILIDADE
   ================================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--alarm-primary); border-radius: 4px; transition: background 0.2s; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--alarm-primary);
  outline-offset: 2px;
}

.error-state {
  border-color: var(--alarm-danger) !important;
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.3) !important;
}
.success-state {
  border-color: var(--alarm-success) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3) !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --alarm-primary: #00ffff;
    --text-white: #ffffff;
    --bg-dark: #000000;
  }
}

/* ================================================================
   39. RESPONSIVIDADE (BREAKPOINTS)
   ================================================================ */
@media (max-width: 900px) {
  .world-container {
    max-width: 100%;
  }
}

@media (max-width: 800px) {
  .footer-container { flex-direction: column; align-items: center; gap: 1.5rem; }
  .footer-section { min-width: 0; width: 100%; text-align: center; }

  .countdown-item {
    gap: 1rem;
    padding: 1rem;
  }
  .item-title {
    font-size: 1rem;
  }
  .item-display span {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .logo-container, .logo-text, .logo-icon, .privacy-btn {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body { padding-top: 70px; }
  .logo-container, .logo-text, .logo-icon, .privacy-btn { display: none !important; }
  .alarm-header { padding: 0.75rem 1rem; }
  .side-menu { top: 70px; height: calc(100vh - 70px); width: 280px; left: -280px; }
  .main-container { padding: 1rem; gap: 1rem; min-height: calc(100vh - 70px); }
  .alarms-list{ padding: 1rem 0.5rem; }
  .alarm-time{ font-weight: 400; color:var(--alarm-primary); }
  .clock-container, .stopwatch-container { padding: 2rem 1rem; }
  .page-title { font-size: 2rem; }
  .hours, .minutes, .seconds { font-size: 3rem; }
  .separator { font-size: 2.5rem; }
  .period { font-size: 1.4rem; }
  .time-input-group { flex-direction: column; gap: 1rem; padding: 1.5rem; }
  .time-input { font-size: 2rem; min-width: 180px; padding: 1.2rem 1.5rem; }
  .header-right { gap: 0.25rem; }
  .header-btn { padding: 0.5rem; min-width: 40px; min-height: 40px; }
  .stopwatch-panel { gap: 0.8rem; }
  .stopwatch-btn {
    flex: 1 1 0;
    padding: 1rem 1.2rem;
    font-size: 1.8rem;
    min-width: 50px;
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 700px) {
  .footer-section:hover,
  .footer-section:focus-within {
    transform: none !important;
    box-shadow: 0 4px 12px -6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) !important;
    border-color: var(--footer-dark-card-border-hover);
    filter: none !important;
  }
  .footer-section:hover::after { opacity: 0 !important; }

  .footer-section ul li:hover::before,
  .footer-section ul li:active::before,
  .footer-section ul li a:hover,
  .footer-section ul li a:active {
    transform: none !important;
    opacity: .92 !important;
    box-shadow: 0 0 0 2px rgba(0,212,255,0.25) !important;
    color: var(--footer-dark-text) !important;
  }
  .footer-section ul li a:hover::after,
  .footer-section ul li a:active::after {
    width: 0 !important;
  }

  .footer-section ul li a:focus-visible {
    outline: 2px solid var(--alarm-primary);
    outline-offset: 3px;
    border-radius: 4px;
    color: var(--alarm-primary);
  }

  /* Para light theme */
  [data-theme="light"] .footer-section:hover,
  [data-theme="light"] .footer-section:focus-within {
    box-shadow:
      0 4px 10px -4px rgba(14,165,233,0.28),
      0 0 0 1px rgba(14,165,233,0.25) !important;
    border-color: var(--footer-light-card-border-hover);
    filter: none !important;
  }
  [data-theme="light"] .footer-section:hover::after { opacity: 0 !important; }
  [data-theme="light"] .footer-section ul li:hover::before,
  [data-theme="light"] .footer-section ul li:active::before {
    transform: none !important;
    box-shadow: 0 0 0 2px rgba(14,165,233,0.28) !important;
    filter: none !important;
    opacity: .9 !important;
  }
  [data-theme="light"] .footer-section ul li a:hover,
  [data-theme="light"] .footer-section ul li a:active {
    color: var(--footer-light-text) !important;
    opacity: .94 !important;
    transform: none !important;
  }
  [data-theme="light"] .footer-section ul li a:hover::after,
  [data-theme="light"] .footer-section ul li a:active::after {
    width: 0 !important;
  }

   .footer-section {
    border-radius: 22px !important;
  }

  /* Links arredondados ao focar */
  .footer-section ul li a:focus-visible,
  .footer-section ul li a:active {
    border-radius: 8px !important;
    outline-offset: 2px !important;
  }

  /* Bullets mais redondos */
  .footer-section ul li::before {
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px rgba(0,212,255,0.18) !important;
  }

  /* Underline animado mais suave */
  .footer-section ul li a::after {
    border-radius: 4px !important;
    height: 3px !important;
  }

}

/* ===== BREAKPOINT INTERMEDIÁRIO: 601px a 700px ===== */
@media (min-width: 601px) and (max-width: 700px) {

  .countdown-item {
    /* Se no desktop você usa grid com múltiplas colunas, aqui simplificamos */
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: 1.5rem;
    padding: 1.8rem 1.2rem;
    max-width: 620px;
    margin: 0 auto;
  }

  .countdown-item.finished {
    /* Mantém consistência em estado final */
    opacity: 0.96;
  }

  .countdown-item .item-info {
    width: 100%;
    text-align: center;
    padding: 0 0.5rem;
  }

  .countdown-item .item-info .item-title {
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    line-height: 1.25;
    margin-bottom: 0.35rem;
  }

  .countdown-item .item-info .item-date {
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    opacity: 0.85;
  }

  .countdown-item .item-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.15rem;
    width: 100%;
  }

  .countdown-item .item-display > div {
    min-width: 66px;
    text-align: center;
  }

  .countdown-item .item-display span {
    font-size: clamp(42px, 7vw, 54px);
    font-weight: 600;
    display: block;
    padding: 0 6px;
  }

  /* Destaque dos segundos finais */
  .countdown-item.show-highlight .countdown-highlight {
    font-size: clamp(3.5rem, 10vw, 4.2rem);
    font-weight: 700;
    letter-spacing: 1px;
  }

  .countdown-item .item-controls {
    display: flex;
    flex-direction: row;
    gap: 1.75rem;
    justify-content: center;
    width: 100%;
  }

  .countdown-item .item-controls button {
    transform: scale(.95);
  }

  .countdown-item .item-controls button:active {
    transform: scale(.9);
  }

  /* Ajuste do botão de parar celebração (quando vira stop) */
  .countdown-item.celebrating .item-controls .btn-delete svg {
    fill: currentColor;
    stroke: none;
  }

  /* Se quiser evitar que o container geral estique demais */
  #countdown-list {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Ajusta possíveis margens externas globais */
  #countdown-list-container {
    max-width: 100%;
    margin: 0 auto;
  }
}


@media (max-width: 600px) {
  .quickmenu-dropdown { right: 0.2rem; top: 44px; min-width: 140px; }
  #privacyBtn { display: none !important; }
  .alarm-label-main, .alarm-label-sub { display: block; text-align: center; width: 100%; }
  .alarm-label-sub { font-size: 0.98em; color: var(--alarm-primary, #0ea5e9); margin-top: 2px; }

  .stopwatch-laps-card { padding: 1.2rem 0.5rem; max-width: 98vw; }
  .lap-row { font-size: 1.05rem; padding: 0.7rem 0.5rem; gap: 0.5rem; }
  .lap-badge { font-size: 0.95rem; padding: 0.2rem 0.4rem; margin-left: 0.5rem; }

  .countdown-item {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
  }
  .item-info {
    width: 100%;
    text-align: center;
  }
  .item-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 0.75rem 1rem;
  }
  .item-display span {
    font-size: 56px;
    padding: 0 5.6px;
  }
  .item-display > div {
    min-width: 60px;
  }
  .item-controls {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: 1.5rem;
  }
  .world-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
  }
  .world-time { font-size: 1rem; }
  .world-flag { font-size: 1.4rem; }

  /*ajuste para o relogio despertador para mobile*/
  .clock-container,
  .main-container {
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .time-input-group {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 0.5rem;
    max-width: 100vw;
    width: 100%;
    box-sizing: border-box;
  }

  .input-container.time-input-modern {
    max-width: 95vw;
    width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .time-input {
    max-width: 200px !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 2rem;
    font-weight: 600;
    padding: 0.7rem 0.5rem;
    box-sizing: border-box;
    margin: 0 auto;
    display: block;
  }

  label[for="alarmTime"] {
    font-size: 0.95rem;
    text-align: center;
    white-space: normal;
    padding-bottom: 0.3rem;
  }

  .clock-container {
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    left: 50%;
    right: 0;
    margin-left: -50vw;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }
  body {
    overflow-x: hidden;
  }

  .stopwatch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-digits {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.stopwatch-time {
  display: inline-block; /* ou remova esta linha */
  margin: 0;
  padding:1.5rem
  /* remova paddings/margens laterais desnecessários */
}

 .side-menu {
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-right: 2px solid var(--alarm-primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Suaviza scroll no iOS */
  }
  .side-menu.active {
    left: 0;
  }

  /* Evita o encolhimento do input no mobile quando está "00:00" (sem valor) */
@media (max-width: 600px) {
  /* Faz o shell expandir (em vez de max-content) */
  .input-shell {
    width: 100% !important;
  }
  /* O input ocupa a largura do shell, mas com um mínimo em caracteres */
  .input-shell > .time-input {
    width: 100% !important;
    min-width: 12ch !important; /* garante espaço p/ "00:00" + folga */
  }
}
}
 

@media (max-width: 480px) {
  .logo-container, .logo-text, .logo-icon, #quickMenuBtn, #quickMenuDropdown, #privacyBtn {
    display: none !important;
  }
  #configBtn, #themeBtn, #languageBtn { display: inline-flex !important; }
  .header-center { width: 100%; justify-content: center; }
  .page-title { font-size: 2rem; text-align: center; margin: 0.2rem 0; }
  .title-contador-de-dias { margin-top: 1.5rem; }

  #soundControls {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .sound-volume-wrapper {
    width: 100%;
    justify-content: space-between;
  }
  #soundVolume { flex: 1; }

  .alarm-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "info controls"
      "countdown countdown";
    gap: 0.8rem;
    padding: 1rem;
    align-items: center;
  }
  .alarm-item > .alarm-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .alarm-info .alarm-time,
  .alarm-info .alarm-name,
  .alarm-info .alarm-sound {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .alarm-info .alarm-time {
    font-size: 1.2rem;
  }
  .alarm-item > .alarm-controls {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
  }
  .alarm-item > .alarm-countdown {
    grid-area: countdown;
    width: 100%;
    margin: 0;
    padding: 0.5rem;
  }
  .alarm-item.ringing {
    display: grid;
    grid-template-areas:
      "ringing-controls ringing-controls"
      "ringing-controls ringing-controls";
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .alarm-item.ringing .alarm-active-controls {
    grid-area: ringing-controls;
    display: flex !important;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    justify-content: center;
  }
  .alarm-item.ringing .alarm-active-btn {
    flex: 1 1 0;
    max-width: 150px;
  }
  .cancel-snooze-btn {
    margin-left: 1rem;
  }
  .clock-display { padding: 1.5rem; }
  .hours, .minutes, .seconds { font-size: 2.5rem; }
  .separator { font-size: 2rem; }
  .period { font-size: 1.2rem; }
  .set-alarm-btn { padding: 1rem 2rem; font-size: 1.1rem; }
  .alarms-list { padding: 1rem 0.5rem; }
  .stopwatch-panel { gap: 0.5rem; }
  .stopwatch-btn { padding: 0.8rem 0.8rem; font-size: 1.6rem; }
  #btnLap .btn-icon, #btnStop .btn-icon { transform: scale(0.85); }
  .section-title { text-align: center; }
}

@media (max-width: 416px) {
  .stopwatch-time {
    font-size: 3.5rem !important;
    padding: 0.5rem !important;
  }
  .hours,
  .minutes,
  .seconds {
    font-size: 3.5rem !important;
    min-width: 1.5ch !important;
    padding: 0 0.1em !important;
  }
  .separator {
    font-size: 1.2rem !important;
  }
}

/* ================================================================
   Estilos para a Seção "Ferramentas Relacionadas" (Versão Elegante)
   ================================================================ */

.educational-related {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.related-title {
  margin: 0 0 1rem 0;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .3px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.related-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.related-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.related-links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.related-links a:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Adiciona um ícone genérico de link. Você pode trocar por SVGs se preferir. */
.related-links a::before {
  content: '→';
  opacity: 0.7;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.related-links a:hover::before {
  transform: translateX(2px);
}


/* ================================================================
   Tema Claro (Light Mode)
   ================================================================ */

[data-theme="light"] .educational-related {
  border-color: var(--pmd-blue-light, #93c5fd);
  background: linear-gradient(170deg, var(--pmd-light-bg, #ffffff), var(--pmd-light-bg-soft, #f1f5f9));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .related-title {
  color: var(--pmd-light-text-soft, #475569);
}

[data-theme="light"] .related-links a {
  background: var(--pmd-light-bg, #ffffff);
  color: var(--pmd-blue, #1d4ed8);
  border-color: var(--pmd-blue-light, #93c5fd); /* CORREÇÃO: Borda azul também nos links */
}

[data-theme="light"] .related-links a:hover {
  background: var(--pmd-light-bg, #ffffff);
  border-color: var(--pmd-blue-hover, #2659e3);
  color: var(--pmd-blue-hover, #2659e3);
}


/* ================================================================
   Tema Escuro (Dark Mode)
   ================================================================ */

[data-theme="dark"] .educational-related {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .related-title {
  color: var(--text-gray, #94a3b8);
}

[data-theme="dark"] .related-links a {
  background: rgba(255, 255, 255, 0.06);
  color: #c3daff; /* Azul mais vibrante para contraste */
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .related-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #c3daff;
  color: #ffffff;
}

/* === Form controls coerentes com o tema === */

/* Diga ao navegador para renderizar controles nativos em claro/escuro */
:is(html, body)[data-theme="light"] { color-scheme: light; }
:is(html, body)[data-theme="dark"]  { color-scheme: dark; }

/* Radios e checkboxes no modo claro: fundo branco, borda suave e marca na cor da marca */
:is(html, body)[data-theme="light"] input[type="radio"],
:is(html, body)[data-theme="light"] input[type="checkbox"]{
  /* cor da marca (ponto do radio / check) em navegadores modernos */
  accent-color: #0f3460; /* ajuste se tiver uma var(--brand) */
  /* garantir fundo e borda em engines que respeitam bg/border */
  background-color: #fff;
  border: 1px solid #cbd5e1; /* slate-300 */
  /* reset defensivo caso algum reset global tenha aplicado filtros */
  filter: none;
}

/* Opcional: foco visível em modo claro */
:is(html, body)[data-theme="light"] input[type="radio"]:focus,
:is(html, body)[data-theme="light"] input[type="checkbox"]:focus{
  outline: 2px solid #2563eb; /* azul de foco */
  outline-offset: 2px;
}

/* Caso você pinte os "radios" da lista de alarmes com CSS próprio via pseudo-elemento,
   disponibilize variáveis para usar nas suas regras existentes (não quebra nada se não usar): */
:is(html, body)[data-theme="light"] .pmd-alarm-option{
  --pmd-radio-bg: #ffffff;
  --pmd-radio-border: #cbd5e1;
  --pmd-radio-dot: #0f3460;
}
:is(html, body)[data-theme="dark"] .pmd-alarm-option{
  --pmd-radio-bg: #0b1220;     /* exemplo para escuro, ajuste às suas cores */
  --pmd-radio-border: #263043;
  --pmd-radio-dot: #7aa2ff;
}

/* Se, no seu CSS, os "bullets" são desenhados com ::before em label,
   aplique as variáveis acima nessas regras, por exemplo:
   .pmd-alarm-option .pmd-alarm-labels::before { background: var(--pmd-radio-bg); border-color: var(--pmd-radio-border); }
   .pmd-alarm-option[aria-checked="true"] .pmd-alarm-labels::before { box-shadow: inset 0 0 0 6px var(--pmd-radio-dot); }
*/
div.modal-body div.config-section:nth-of-type(3) div.config-item:nth-of-type(2) {
    display: none !important;
}