:root {
      --primary: #1e88e5;
      --secondary: #ffb300;
      --bg: #f5f7fa;
      --card: #ffffff;
      --text: #333333;
      --accent: #f06292;
    }
    
/* Theme Toggle */
:root[data-theme="dark"] {
  --bg: #222;
  --card: #333;
  --text: #eee;
  --primary: #90caf9;
  --secondary: #ffcc80;
}
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      background: var(--bg);
      color: var(--text);
      position: relative;
      min-height: 100vh;
    }
    header {
      background: var(--primary);
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
    }
    header h1 {
      font-size: 1.5rem;
      font-weight: 600;
    }
    header h1 img{
        vertical-align:middle;
        display:inline-block;
        padding:10px;
    }
    .ad-slot {
      display: inline-block;
    }
    main {
      max-width: 900px;
      margin: 2rem auto;
      padding: 0 1rem;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    .analog-clock { position: relative; width: 180px; height: 180px; margin: 0 auto; border: 4px solid var(--text); border-radius: 50%; }
    .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; background: var(--text); }
    .hour-hand { width: 6px; height: 45px; border-radius: 3px; }
    .minute-hand { width: 4px; height: 65px; border-radius: 2px; }
    .second-hand { width: 2px; height: 85px; background: var(--accent); border-radius: 1px; }
    .center-dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: var(--text); border-radius: 50%; transform: translate(-50%, -50%); }
 
    section {
      background: var(--card);
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      padding: 1.5rem;
    }
    h2 {
      color: var(--primary);
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
    }
    .flex { display: flex; align-items: center; }
    .center { justify-content: center; }
    button, select, input { font-family: inherit; }
    button {
      background: var(--secondary);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 0.75rem 1.25rem;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s;
    }
    button:hover { background: var(--accent); }
    input, select {
      padding: 0.5rem 1rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 1rem;
    }
    .clock-display {
      font-family: monospace;
      font-size: 2rem;
      text-align: center;
      margin: 1rem 0;
    }
    /* Surprise Watch Styles */
    #surprise-watch {
      width: 130px;
      height: 130px;
      margin: 1rem auto;
      background: var(--primary);
      color: #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 130px;
      font-size: 1.5rem;
      transition: transform 0.5s, box-shadow 0.5s;
    }
    /* Pomodoro Timer */
    #pomodoro-display{font-size:2.5rem;text-align:center;}
    .pom-controls{display:flex;justify-content:center;gap:1rem;margin-top:1rem;}
    /* Astronomical */
    #astro-output{font-size:1rem;text-align:center;line-height:1.4;}
    /* Multi-TZ Scheduler */
    #tz-list{list-style:none;margin:1rem 0;padding:0;}
    #tz-list li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #eee;}
    #tz-slider{width:100%;margin-top:1rem;}
    /* Pulse animation */
    @keyframes pulse {
      0%,100% { transform: scale(1); opacity: 1; }
      50%    { transform: scale(1.15); opacity: 0.7; }
    }
    .pulse {
      animation: pulse 1.5s infinite;
      box-shadow: 0 0 20px var(--accent), 0 0 10px var(--secondary);
    }
    /* Surprise message */
    #surprise-message {
      font-size: 2rem;
      font-weight: 900;
      text-align: center;
      margin-top: 1.5rem;
      color: var(--accent);
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.5s ease;
    }
    #surprise-message.visible {
      opacity: 1;
      transform: scale(1.2);
      animation: flashText 1s ease-in-out 2;
    }
    @keyframes flashText {
      0%,100% { color: var(--accent); transform: scale(1.2); }
      25%     { color: var(--primary); transform: scale(1.4); }
      50%     { color: var(--secondary); transform: scale(1.6); }
      75%     { color: #fff; transform: scale(1.3); }
    }
    /* Extra surprise animations */
    @keyframes explode { 0%{transform:scale(1);opacity:1}100%{transform:scale(3) rotate(720deg);opacity:0} }
    @keyframes rainbow { 0%{background:var(--primary)}25%{background:var(--secondary)}50%{background:var(--accent)}75%{background:#43a047}100%{background:var(--primary)} }
    @keyframes rotate-surprise {0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
    @keyframes bounce-surprise {0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
    @keyframes shake-surprise {
      0%,100%{transform:translateX(0)}20%,80%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}
    }
    .shake   { animation: shake-surprise 0.8s ease-in-out; }
    .spin    { animation: rotate-surprise 1s ease-in-out; }
    .pulse   { /* reused pulse */ }
    .explode { animation: explode 0.6s forwards; }
    .rainbow { animation: rainbow 2s infinite; }
    .rotate  { animation: rotate-surprise 1s ease-in-out; }
    .bounce  { animation: bounce-surprise 1s ease-in-out; }
    /* Emoji rain */
    @keyframes emoji-fall { 0%{transform:translateY(0);opacity:1}100%{transform:translateY(100vh) rotate(360deg);opacity:0} }
    /* Confetti canvas */
    canvas#confetti-canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      pointer-events: none;
      z-index: 999;
    }
    /* Fun Corner */
#fun-section { padding: 2rem 1rem; }
.fun-grid {
  display: grid;
  gap: 1.5rem;
}
@media(min-width:600px){ .fun-grid { grid-template-columns: repeat(3,1fr); } }
.fun-card {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 1rem;
  text-align: center;
}
.fun-card h3 { margin-bottom: 0.75rem; color: var(--primary); }
.fun-card p { margin-bottom: 1rem; }
/* Make all our flex button containers wrap on small screens */
@media (max-width: 600px) {
  /* Countdown Timer Buttons */
  .timer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .timer-buttons button {
    flex: 1 1 45%;
    min-width: 0;
    margin-bottom: 0.5rem;
  }

  /* Pomodoro Controls */
  .pom-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .pom-controls button {
    flex: 1 1 45%;
    min-width: 0;
    margin-bottom: 0.5rem;
  }

  /* Fun Corner Buttons */
  .fun-card button {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  /* Cookie Consent Banner */
  #cookie-consent-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.75rem;
  }
  #cookie-consent-banner div[style*="display:flex"] {
    justify-content: center;
  }
  #cookie-consent-banner button {
    flex: 1 1 auto;
    margin: 0;
  }
}