/* ─── Timer Section Base ─── */
.timer-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 0.8s, color 0.8s;
}

/* ─── UI Controls ─── */
#ui {
  position: absolute; bottom: 20px; right: 20px; z-index: 1000;
  display: flex; gap: 10px; align-items: center;
}
.ui-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s; position: relative;
}
.ui-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.ui-btn svg { width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-btn:hover svg { stroke: rgba(255,255,255,0.6); }
.ui-btn.muted svg .waves { opacity: 0; }
.ui-btn.muted .mute-slash { display: block; }
.mute-slash { display: none; }

.share-toast {
  position: absolute; bottom: 42px; right: 50%; transform: translateX(50%);
  background: rgba(15,15,20,0.95); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  padding: 5px 12px; font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap;
}
.ui-btn.toast-show .share-toast { opacity: 1; }

#menu {
  position: absolute; bottom: 42px; right: 0;
  background: rgba(15,15,20,0.95); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 6px 0; min-width: 170px;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: all 0.2s ease;
}
#menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.menu-item {
  padding: 9px 18px; font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 300; letter-spacing: 1px;
  color: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 8px;
}
.menu-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
.menu-item.active { color: rgba(255,255,255,0.65); }
.menu-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); opacity: 0; }
.menu-item.active .menu-dot { opacity: 1; }

/* ─── Timer Presets Menu ─── */
#timer-menu {
  position: absolute; bottom: 42px; right: 0;
  background: rgba(15,15,20,0.95); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 6px 0; min-width: 210px;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: all 0.2s ease;
}
#timer-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.preset-item {
  padding: 9px 18px; font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 300; letter-spacing: 1px;
  color: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 8px;
}
.preset-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
.preset-item.active { color: rgba(255,255,255,0.65); }
.preset-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); opacity: 0; }
.preset-item.active .preset-dot { opacity: 1; }
.preset-times { margin-left: auto; font-size: 10px; color: rgba(255,255,255,0.2); letter-spacing: 0; }
.preset-sep {
  height: 1px; margin: 4px 14px;
  background: rgba(255,255,255,0.06);
}
#custom-fields {
  padding: 6px 18px 8px; display: none;
  font-family: 'Inter', sans-serif; flex-direction: column; gap: 6px;
}
#custom-fields.visible { display: flex; }
.custom-row {
  display: flex; align-items: center; gap: 8px;
}
.custom-row label {
  font-size: 10px; font-weight: 300; letter-spacing: 1px;
  color: rgba(255,255,255,0.3); width: 42px;
}
.custom-row input {
  width: 48px; padding: 4px 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: rgba(255,255,255,0.7);
  font-family: 'Inter', sans-serif; font-size: 11px;
  text-align: center; outline: none;
}
.custom-row input:focus { border-color: rgba(255,255,255,0.25); }
.custom-row .unit { font-size: 10px; color: rgba(255,255,255,0.2); }
#apply-custom {
  margin-top: 2px; padding: 6px 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: rgba(255,255,255,0.5);
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 300;
  letter-spacing: 1px; cursor: pointer; transition: all 0.2s;
  align-self: flex-end;
}
#apply-custom:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }

/* ─── Breathing Orb ─── */
.timer-section[data-theme="breathing-orb"] { font-family: 'Inter', sans-serif; background: #0a0a0f; color: #e8e4df; }
.timer-section[data-theme="breathing-orb"] .bg-orb {
  position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.3;
  animation: bo-drift 20s ease-in-out infinite alternate;
}
.timer-section[data-theme="breathing-orb"] .bg-orb:nth-child(1) { width: 600px; height: 600px; background: radial-gradient(circle,#4a2c6a,#1a0a2e); top: -200px; left: -100px; animation-duration: 25s; }
.timer-section[data-theme="breathing-orb"] .bg-orb:nth-child(2) { width: 500px; height: 500px; background: radial-gradient(circle,#2c4a6a,#0a1a2e); bottom: -200px; right: -100px; animation-duration: 30s; animation-delay: -5s; }
.timer-section[data-theme="breathing-orb"] .bg-orb:nth-child(3) { width: 400px; height: 400px; background: radial-gradient(circle,#6a4a2c,#2e1a0a); top: 50%; left: 50%; transform: translate(-50%,-50%); animation-duration: 22s; animation-delay: -10s; }
@keyframes bo-drift { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-40px) scale(1.05)} 66%{transform:translate(-20px,30px) scale(0.95)} 100%{transform:translate(40px,20px) scale(1.02)} }
.timer-section[data-theme="breathing-orb"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.timer-section[data-theme="breathing-orb"] .timer-ring { position: relative; width: 280px; height: 280px; }
.timer-section[data-theme="breathing-orb"] .timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-section[data-theme="breathing-orb"] .ring-bg { fill: none; stroke: rgba(255,255,255,0.04); stroke-width: 2; }
.timer-section[data-theme="breathing-orb"] .ring-fg { fill: none; stroke: url(#bo-grad); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer-section[data-theme="breathing-orb"] .timer-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.timer-section[data-theme="breathing-orb"] .time { font-size: 48px; font-weight: 200; letter-spacing: 4px; }
.timer-section[data-theme="breathing-orb"] .phase { font-size: 11px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; color: rgba(232,228,223,0.35); margin-top: 8px; }
.timer-section[data-theme="breathing-orb"] .breathing-ring {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.02); top: 50%; left: 50%;
  transform: translate(-50%,-50%); animation: bo-breathe 8s ease-in-out infinite;
}
@keyframes bo-breathe { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.3} 50%{transform:translate(-50%,-50%) scale(1.08);opacity:0.6} }
.timer-section[data-theme="breathing-orb"] .controls { display: flex; gap: 24px; }
.timer-section[data-theme="breathing-orb"] .btn {
  background: none; border: 1px solid rgba(255,255,255,0.08); color: rgba(232,228,223,0.5);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 4px;
  text-transform: uppercase; padding: 12px 32px; border-radius: 100px; cursor: pointer; transition: all 0.5s;
}
.timer-section[data-theme="breathing-orb"] .btn:hover { border-color: rgba(255,255,255,0.15); color: rgba(232,228,223,0.8); }
.timer-section[data-theme="breathing-orb"] .dots { display: flex; gap: 8px; }
.timer-section[data-theme="breathing-orb"] .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background 0.5s; }
.timer-section[data-theme="breathing-orb"] .dot.done { background: rgba(255,255,255,0.4); }

/* ─── Aurora ─── */
.timer-section[data-theme="aurora"] { font-family: 'Space Grotesk', sans-serif; background: #050510; color: #ddd8d0; }
.timer-section[data-theme="aurora"] canvas.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; }
.timer-section[data-theme="aurora"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.timer-section[data-theme="aurora"] .mode-row { display: flex; gap: 24px; }
.timer-section[data-theme="aurora"] .mode-btn {
  background: none; border: none; color: rgba(255,255,255,0.15);
  font-family: inherit; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; padding: 4px 0; transition: color 0.4s; border-bottom: 1px solid transparent;
}
.timer-section[data-theme="aurora"] .mode-btn.active { color: rgba(255,255,255,0.45); border-bottom-color: rgba(255,255,255,0.1); }
.timer-section[data-theme="aurora"] .timer-wrap { position: relative; width: 260px; height: 260px; }
.timer-section[data-theme="aurora"] .outer-glow {
  position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(circle,rgba(100,200,180,0.03),transparent 70%);
  animation: au-glow 6s ease-in-out infinite;
}
@keyframes au-glow { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.06);opacity:1} }
.timer-section[data-theme="aurora"] .timer-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-section[data-theme="aurora"] .track { fill: none; stroke: rgba(255,255,255,0.03); stroke-width: 1.5; }
.timer-section[data-theme="aurora"] .ring-fg { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke: rgba(130,210,190,0.6); transition: stroke-dashoffset 1s linear, stroke 0.8s; }
.timer-section[data-theme="aurora"] .ring-fg.rest { stroke: rgba(190,160,220,0.6); }
.timer-section[data-theme="aurora"] .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-section[data-theme="aurora"] .time { font-size: 44px; font-weight: 300; letter-spacing: 6px; color: rgba(255,255,255,0.85); }
.timer-section[data-theme="aurora"] .phase { font-size: 10px; font-weight: 400; letter-spacing: 8px; text-transform: uppercase; color: rgba(255,255,255,0.2); margin-top: 6px; }
.timer-section[data-theme="aurora"] .controls { display: flex; gap: 20px; }
.timer-section[data-theme="aurora"] .btn {
  background: rgba(255,255,255,0.02); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.4);
  font-family: inherit; font-size: 12px; font-weight: 300; letter-spacing: 3px;
  text-transform: lowercase; padding: 10px 28px; border-radius: 8px; cursor: pointer; transition: all 0.4s;
}
.timer-section[data-theme="aurora"] .btn:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.65); }
.timer-section[data-theme="aurora"] .dots { display: flex; gap: 12px; }
.timer-section[data-theme="aurora"] .dot { width: 16px; height: 1px; background: rgba(255,255,255,0.07); transition: all 0.6s; }
.timer-section[data-theme="aurora"] .dot.done { background: rgba(130,210,190,0.4); width: 20px; }

/* ─── Zen Particles ─── */
.timer-section[data-theme="zen"] { font-family: 'Cormorant Garamond', serif; background: #0c0b0a; color: #c8c0b4; }
.timer-section[data-theme="zen"] canvas.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timer-section[data-theme="zen"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.timer-section[data-theme="zen"] .timer-area { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.timer-section[data-theme="zen"] .time { font-size: 80px; font-weight: 300; letter-spacing: 8px; color: rgba(200,192,180,0.9); line-height: 1; }
.timer-section[data-theme="zen"] .progress-line { width: 200px; height: 1px; background: rgba(255,255,255,0.05); position: relative; overflow: hidden; }
.timer-section[data-theme="zen"] .bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(200,192,180,0.3); transform-origin: left; transition: transform 1s linear; }
.timer-section[data-theme="zen"] .phase { font-size: 14px; font-weight: 300; letter-spacing: 12px; text-transform: lowercase; color: rgba(200,192,180,0.2); }
.timer-section[data-theme="zen"] .controls { display: flex; gap: 32px; }
.timer-section[data-theme="zen"] .btn {
  background: none; border: none; color: rgba(200,192,180,0.25);
  font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 300;
  letter-spacing: 4px; cursor: pointer; padding: 8px 0; transition: color 0.6s; position: relative;
}
.timer-section[data-theme="zen"] .btn::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: rgba(200,192,180,0.2); transition: all 0.4s; transform: translateX(-50%); }
.timer-section[data-theme="zen"] .btn:hover { color: rgba(200,192,180,0.6); }
.timer-section[data-theme="zen"] .btn:hover::after { width: 100%; }
.timer-section[data-theme="zen"] .dots { display: flex; gap: 16px; }
.timer-section[data-theme="zen"] .dot { width: 2px; height: 12px; background: rgba(200,192,180,0.06); transition: all 0.8s; }
.timer-section[data-theme="zen"] .dot.done { background: rgba(200,192,180,0.25); height: 16px; }
.timer-section[data-theme="zen"] .quote { position: absolute; bottom: 48px; font-size: 13px; font-weight: 300; font-style: italic; color: rgba(200,192,180,0.08); letter-spacing: 1px; z-index: 1; }

/* ─── Deep Ocean ─── */
.timer-section[data-theme="ocean"] { font-family: 'DM Sans', sans-serif; background: #040812; color: #b8c8d8; }
.timer-section[data-theme="ocean"] .ocean-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timer-section[data-theme="ocean"] .caustic {
  position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
  background:
    radial-gradient(ellipse 80px 120px at 20% 30%, rgba(60,130,180,0.04), transparent),
    radial-gradient(ellipse 100px 80px at 60% 50%, rgba(60,160,160,0.03), transparent),
    radial-gradient(ellipse 60px 140px at 80% 20%, rgba(80,120,180,0.04), transparent),
    radial-gradient(ellipse 120px 60px at 40% 70%, rgba(60,140,170,0.03), transparent),
    radial-gradient(ellipse 90px 100px at 70% 80%, rgba(70,130,160,0.03), transparent);
  animation: oc-caustics 15s ease-in-out infinite alternate;
}
.timer-section[data-theme="ocean"] .caustic:nth-child(2) { animation-delay: -7s; animation-duration: 18s; opacity: 0.8; transform: rotate(45deg); }
.timer-section[data-theme="ocean"] .caustic:nth-child(3) { animation-delay: -12s; animation-duration: 22s; opacity: 0.6; transform: rotate(-30deg); }
@keyframes oc-caustics { 0%{transform:translate(0,0) rotate(0) scale(1)} 25%{transform:translate(40px,-30px) rotate(5deg) scale(1.02)} 50%{transform:translate(-20px,40px) rotate(-3deg) scale(0.98)} 75%{transform:translate(30px,20px) rotate(4deg) scale(1.01)} 100%{transform:translate(-40px,-20px) rotate(-5deg) scale(1)} }
.timer-section[data-theme="ocean"] .light-ray {
  position: absolute; width: 2px; height: 100vh;
  background: linear-gradient(to bottom, rgba(100,180,220,0.03), transparent 80%);
  top: 0; animation: oc-ray 12s ease-in-out infinite alternate;
}
@keyframes oc-ray { 0%{transform:rotate(-2deg) translateX(0)} 100%{transform:rotate(2deg) translateX(30px)} }
.timer-section[data-theme="ocean"] .bubble {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(100,180,220,0.04);
  animation: oc-rise linear infinite;
}
@keyframes oc-rise { 0%{transform:translateY(0) translateX(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-100vh) translateX(30px);opacity:0} }
.timer-section[data-theme="ocean"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.timer-section[data-theme="ocean"] .ring-container { position: relative; width: 300px; height: 300px; }
.timer-section[data-theme="ocean"] .ring-container svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 20px rgba(60,140,180,0.08)); }
.timer-section[data-theme="ocean"] .ring-bg { fill: none; stroke: rgba(100,160,200,0.04); stroke-width: 3; }
.timer-section[data-theme="ocean"] .ring-fg { fill: none; stroke: rgba(100,180,220,0.35); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.6s; }
.timer-section[data-theme="ocean"] .ring-fg.rest { stroke: rgba(120,180,160,0.35); }
.timer-section[data-theme="ocean"] .tick-marks { position: absolute; inset: 0; }
.timer-section[data-theme="ocean"] .tick-marks span { position: absolute; width: 1px; height: 6px; background: rgba(100,160,200,0.08); top: 8px; left: 50%; transform-origin: 0 142px; }
.timer-section[data-theme="ocean"] .inner-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.timer-section[data-theme="ocean"] .time { font-size: 52px; font-weight: 200; letter-spacing: 4px; color: rgba(184,200,216,0.9); }
.timer-section[data-theme="ocean"] .phase { font-size: 10px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; color: rgba(184,200,216,0.2); }
.timer-section[data-theme="ocean"] .session-info { font-size: 10px; font-weight: 300; letter-spacing: 3px; color: rgba(184,200,216,0.12); margin-top: 8px; }
.timer-section[data-theme="ocean"] .controls { display: flex; gap: 2px; }
.timer-section[data-theme="ocean"] .btn {
  background: rgba(100,160,200,0.03); border: 1px solid rgba(100,160,200,0.06);
  color: rgba(184,200,216,0.35); font-family: inherit; font-size: 11px; font-weight: 300;
  letter-spacing: 3px; padding: 12px 28px; cursor: pointer; transition: all 0.4s;
}
.timer-section[data-theme="ocean"] .btn:first-child { border-radius: 6px 0 0 6px; }
.timer-section[data-theme="ocean"] .btn:last-child { border-radius: 0 6px 6px 0; }
.timer-section[data-theme="ocean"] .btn:hover { background: rgba(100,160,200,0.06); color: rgba(184,200,216,0.6); }

/* ─── Cosmic Dust ─── */
.timer-section[data-theme="cosmic"] { font-family: 'Outfit', sans-serif; background: #08060d; color: #d4ccc4; }
.timer-section[data-theme="cosmic"] canvas.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timer-section[data-theme="cosmic"] .nebula {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  filter: blur(150px); opacity: 0.12; animation: cd-neb 30s ease-in-out infinite alternate;
}
.timer-section[data-theme="cosmic"] .nebula:nth-child(2) { background: #3a1856; top: 10%; left: 20%; }
.timer-section[data-theme="cosmic"] .nebula:nth-child(3) { background: #1a3456; bottom: 10%; right: 15%; animation-delay: -15s; animation-duration: 35s; }
@keyframes cd-neb { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(50px,-30px) scale(1.1)} 100%{transform:translate(-30px,40px) scale(0.95)} }
.timer-section[data-theme="cosmic"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.timer-section[data-theme="cosmic"] .arc-timer { position: relative; width: 320px; height: 320px; }
.timer-section[data-theme="cosmic"] .arc-timer svg { width: 100%; height: 100%; }
.timer-section[data-theme="cosmic"] .arc-bg { fill: none; stroke: rgba(255,255,255,0.02); stroke-width: 1; }
.timer-section[data-theme="cosmic"] .arc-fg { fill: none; stroke-width: 1.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer-section[data-theme="cosmic"] .arc-outer { stroke: rgba(180,140,220,0.3); }
.timer-section[data-theme="cosmic"] .arc-inner { stroke: rgba(140,180,220,0.2); stroke-dasharray: 5 8; }
.timer-section[data-theme="cosmic"] .center-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-section[data-theme="cosmic"] .mode-label { font-size: 9px; font-weight: 300; letter-spacing: 8px; text-transform: uppercase; color: rgba(212,204,196,0.2); margin-bottom: 12px; }
.timer-section[data-theme="cosmic"] .timer-num { font-size: 56px; font-weight: 200; letter-spacing: 6px; color: rgba(212,204,196,0.85); font-variant-numeric: tabular-nums; }
.timer-section[data-theme="cosmic"] .timer-seconds { font-size: 18px; font-weight: 200; color: rgba(212,204,196,0.2); letter-spacing: 2px; margin-top: -4px; }
.timer-section[data-theme="cosmic"] .controls-row { display: flex; align-items: center; gap: 16px; }
.timer-section[data-theme="cosmic"] .play-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.4s;
}
.timer-section[data-theme="cosmic"] .play-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.timer-section[data-theme="cosmic"] .play-btn svg { width: 16px; height: 16px; fill: rgba(212,204,196,0.5); }
.timer-section[data-theme="cosmic"] .small-btn {
  background: none; border: none; color: rgba(212,204,196,0.15);
  font-family: inherit; font-size: 10px; font-weight: 300; letter-spacing: 3px;
  cursor: pointer; padding: 8px 12px; transition: color 0.3s;
}
.timer-section[data-theme="cosmic"] .small-btn:hover { color: rgba(212,204,196,0.4); }
.timer-section[data-theme="cosmic"] .cycle-indicator { display: flex; gap: 6px; align-items: center; }
.timer-section[data-theme="cosmic"] .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(212,204,196,0.08); transition: all 0.6s; }
.timer-section[data-theme="cosmic"] .dot.done { background: rgba(180,140,220,0.3); }
.timer-section[data-theme="cosmic"] .dot.active { background: rgba(180,140,220,0.4); box-shadow: 0 0 6px rgba(180,140,220,0.2); }
.timer-section[data-theme="cosmic"] .cycle-sep { width: 12px; height: 1px; background: rgba(212,204,196,0.04); }

/* ─── Silk Threads ─── */
.timer-section[data-theme="silk"] { font-family: 'Inter', sans-serif; background: #09090c; color: #ccc6bc; cursor: none; }
.timer-section[data-theme="silk"] canvas.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timer-section[data-theme="silk"] .cursor-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(200,180,220,0.25); pointer-events: none; z-index: 100;
  transform: translate(-50%,-50%); transition: opacity 0.3s;
}
.timer-section[data-theme="silk"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.timer-section[data-theme="silk"] .timer-ring { position: relative; width: 270px; height: 270px; }
.timer-section[data-theme="silk"] .timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-section[data-theme="silk"] .ring-bg { fill: none; stroke: rgba(255,255,255,0.02); stroke-width: 1; }
.timer-section[data-theme="silk"] .ring-fg { fill: none; stroke: rgba(200,180,220,0.3); stroke-width: 1.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.6s; }
.timer-section[data-theme="silk"] .ring-fg.rest { stroke: rgba(180,200,190,0.3); }
.timer-section[data-theme="silk"] .info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-section[data-theme="silk"] .time { font-size: 46px; font-weight: 200; letter-spacing: 5px; color: rgba(204,198,188,0.85); }
.timer-section[data-theme="silk"] .phase { font-size: 10px; font-weight: 300; letter-spacing: 7px; text-transform: uppercase; color: rgba(204,198,188,0.2); margin-top: 6px; }
.timer-section[data-theme="silk"] .controls { display: flex; gap: 20px; }
.timer-section[data-theme="silk"] .btn {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
  color: rgba(204,198,188,0.3); font-family: inherit; font-size: 11px; font-weight: 300;
  letter-spacing: 3px; padding: 10px 26px; border-radius: 100px; cursor: none; transition: all 0.4s;
}
.timer-section[data-theme="silk"] .btn:hover { background: rgba(255,255,255,0.04); color: rgba(204,198,188,0.6); }
.timer-section[data-theme="silk"] .dots { display: flex; gap: 10px; }
.timer-section[data-theme="silk"] .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.07); transition: all 0.6s; }
.timer-section[data-theme="silk"] .dot.done { background: rgba(200,180,220,0.35); }
.timer-section[data-theme="silk"] .hint { position: absolute; bottom: 40px; font-size: 10px; font-weight: 300; letter-spacing: 4px; color: rgba(204,198,188,0.06); z-index: 1; }

/* ─── Magnetic Field ─── */
.timer-section[data-theme="magnetic"] { font-family: 'Space Grotesk', sans-serif; background: #07070a; color: #c0bdb6; }
.timer-section[data-theme="magnetic"] canvas.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timer-section[data-theme="magnetic"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.timer-section[data-theme="magnetic"] .timer-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.timer-section[data-theme="magnetic"] .phase { font-size: 9px; font-weight: 400; letter-spacing: 8px; text-transform: uppercase; color: rgba(192,189,182,0.18); }
.timer-section[data-theme="magnetic"] .time { font-size: 72px; font-weight: 300; letter-spacing: 8px; color: rgba(192,189,182,0.85); font-variant-numeric: tabular-nums; }
.timer-section[data-theme="magnetic"] .bar-track { width: 240px; height: 2px; background: rgba(255,255,255,0.03); border-radius: 1px; overflow: hidden; }
.timer-section[data-theme="magnetic"] .bar-fill { height: 100%; background: rgba(140,170,200,0.3); border-radius: 1px; transition: width 1s linear, background 0.6s; width: 0%; }
.timer-section[data-theme="magnetic"] .bar-fill.rest { background: rgba(170,200,140,0.3); }
.timer-section[data-theme="magnetic"] .controls { display: flex; gap: 24px; }
.timer-section[data-theme="magnetic"] .btn {
  background: none; border: 1px solid rgba(255,255,255,0.04);
  color: rgba(192,189,182,0.25); font-family: inherit; font-size: 11px; font-weight: 300;
  letter-spacing: 3px; padding: 10px 24px; border-radius: 6px; cursor: pointer; transition: all 0.4s;
}
.timer-section[data-theme="magnetic"] .btn:hover { border-color: rgba(255,255,255,0.08); color: rgba(192,189,182,0.5); }
.timer-section[data-theme="magnetic"] .dots { display: flex; gap: 8px; }
.timer-section[data-theme="magnetic"] .dot { width: 20px; height: 2px; background: rgba(255,255,255,0.04); border-radius: 1px; transition: background 0.6s; }
.timer-section[data-theme="magnetic"] .dot.done { background: rgba(140,170,200,0.3); }
.timer-section[data-theme="magnetic"] .hint { position: absolute; bottom: 36px; font-size: 9px; letter-spacing: 4px; color: rgba(192,189,182,0.06); z-index: 1; }

/* ─── Ripple Pond ─── */
.timer-section[data-theme="ripple"] { font-family: 'Cormorant Garamond', serif; background: #080a0c; color: #bcc4c8; }
.timer-section[data-theme="ripple"] canvas.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timer-section[data-theme="ripple"] .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.timer-section[data-theme="ripple"] .timer-wrap { position: relative; width: 280px; height: 280px; }
.timer-section[data-theme="ripple"] .timer-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-section[data-theme="ripple"] .ring-bg { fill: none; stroke: rgba(255,255,255,0.02); stroke-width: 1; }
.timer-section[data-theme="ripple"] .ring-fg { fill: none; stroke: rgba(130,160,180,0.3); stroke-width: 1.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.6s; }
.timer-section[data-theme="ripple"] .ring-fg.rest { stroke: rgba(160,180,150,0.3); }
.timer-section[data-theme="ripple"] .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-section[data-theme="ripple"] .time { font-size: 54px; font-weight: 300; letter-spacing: 4px; color: rgba(188,196,200,0.85); }
.timer-section[data-theme="ripple"] .phase { font-size: 13px; font-weight: 300; letter-spacing: 10px; text-transform: lowercase; color: rgba(188,196,200,0.15); margin-top: 4px; }
.timer-section[data-theme="ripple"] .controls { display: flex; gap: 28px; }
.timer-section[data-theme="ripple"] .btn {
  background: none; border: none; color: rgba(188,196,200,0.2);
  font-family: inherit; font-size: 15px; font-weight: 300; letter-spacing: 4px;
  cursor: pointer; padding: 8px 4px; transition: color 0.5s; position: relative;
}
.timer-section[data-theme="ripple"] .btn::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: rgba(188,196,200,0.15); transition: all 0.4s; transform: translateX(-50%); }
.timer-section[data-theme="ripple"] .btn:hover { color: rgba(188,196,200,0.5); }
.timer-section[data-theme="ripple"] .btn:hover::after { width: 100%; }
.timer-section[data-theme="ripple"] .dots { display: flex; gap: 12px; }
.timer-section[data-theme="ripple"] .dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); transition: all 0.6s; }
.timer-section[data-theme="ripple"] .dot.done { background: rgba(130,160,180,0.25); border-color: rgba(130,160,180,0.15); }
.timer-section[data-theme="ripple"] .hint { position: absolute; bottom: 36px; font-size: 11px; font-weight: 300; letter-spacing: 3px; color: rgba(188,196,200,0.06); z-index: 1; }