:root {
    --warn: #f59e0b;
    --danger: #f97316;
    --success: #a78bfa;
    --accent-start: #6366f1;
    --accent-end: #8b5cf6;
    --ring-circumference: 314.16;
}

.app-header { background: var(--bg-dark, #121213) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.light-mode .app-header { background: var(--bg-light, #fff) !important; }
.timer-app { width: min(640px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }

.dashboard-bar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; }
.set-counter-widget, .set-time-badge, .session-badge { min-height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; line-height: 1; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.set-counter-widget { padding: 0 4px; background: var(--surface-dark); border: 1px solid var(--border-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.set-btn { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.set-btn:hover, .set-info:hover { background: color-mix(in srgb, var(--accent-start) 15%, transparent); color: var(--accent-start); }
.set-info { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; }
.set-label { font-size: .68rem; letter-spacing: .08em; color: var(--muted-dark); text-transform: uppercase; }
.set-number { min-width: 1ch; color: var(--accent-end); font-size: .95rem; font-weight: 800; text-align: center; }
.set-total-slash { color: var(--muted-dark); opacity: .5; }.set-total { color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.set-time-badge, .session-badge { min-width: 0; gap: 6px; padding: 0 12px; border: 1px solid var(--border-dark); background: var(--surface-dark); color: var(--muted-dark); white-space: nowrap; }
.session-badge { cursor: pointer; font: inherit; }.set-time-badge.active-set { border-color: color-mix(in srgb, var(--accent-start) 45%, var(--border-dark)); background: color-mix(in srgb, var(--accent-start) 12%, var(--surface-dark)); color: var(--accent-start); }.session-badge.active { border-color: color-mix(in srgb, var(--success) 50%, var(--border-dark)); background: color-mix(in srgb, var(--success) 12%, var(--surface-dark)); color: var(--success); }

.timer-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px 20px; border: 1px solid var(--border-dark); border-radius: 28px; background: var(--surface-dark); box-shadow: var(--shadow-dark); }
.ring-container { position: relative; width: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%; cursor: pointer; user-select: none; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }.ring-container:hover { transform: scale(1.02); }.ring-container:active { transform: scale(.98); }
.ring-container:focus-visible, button:focus-visible, .set-info:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } circle { fill: none; stroke-width: 7; transition: stroke .3s ease, stroke-dashoffset .15s linear; }.ring-bg { stroke: color-mix(in srgb, var(--text-dark) 10%, transparent); }.ring-fill { transition: fill .3s ease; }.ring-progress { stroke: url(#ringGrad); stroke-dasharray: 314.16; stroke-linecap: round; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); }.ring-progress.pulse { animation: pulse-ring 1s infinite ease-in-out; }
@keyframes pulse-ring { 50% { stroke-width: 10; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--danger) 80%, transparent)); } }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center; }.state-badge { margin-bottom: 2px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.state-badge.resting { background: color-mix(in srgb, var(--accent-end) 20%, transparent); color: var(--accent-end); }.state-badge.paused, .state-badge.low-time { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }.state-badge.done { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
#timeDisplay { color: inherit; font-size: clamp(3.2rem, 13vw, 4.8rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, .2); }.low-time-text { color: var(--warn) !important; text-shadow: 0 0 12px rgba(245, 158, 11, .25) !important; }#stateLabel { color: var(--muted-dark); font-size: clamp(.72rem, 2.5vw, .88rem); font-weight: 600; letter-spacing: .08em; }#actionLabel { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent); font-size: clamp(.8rem, 2.8vw, .95rem); font-weight: 700; }
.quick-adjust-bar { display: flex; justify-content: center; gap: 12px; width: 100%; }.quick-adj-btn { min-width: 92px; min-height: 40px; padding: 6px 16px; border: 1px solid var(--border-dark); border-radius: 999px; background: var(--surface-strong-dark); color: inherit; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; }.quick-adj-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong-dark)); color: var(--accent); }

.primary-controls { display: grid; grid-template-columns: 1fr auto; gap: 12px; }.primary-btn { min-height: 54px; border: 0; border-radius: 18px; background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-start) 32%, transparent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 1.05rem; font-weight: 700; }.primary-btn.pause-btn { background: linear-gradient(135deg, #d97706, #b45309); }.secondary-btn { width: 90px; min-height: 54px; border: 1px solid var(--border-dark); border-radius: 18px; background: var(--surface-dark); color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: .82rem; font-weight: 700; }.secondary-btn:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-dark)); color: var(--danger); }

.timer-controls { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--border-dark); border-radius: 24px; background: var(--surface-dark); box-shadow: var(--shadow-dark); transition: opacity .2s ease; }.timer-controls.is-muted { opacity: .62; }.settings-group { display: flex; flex-direction: column; gap: 8px; }.controls-header { color: var(--muted-dark); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.target-sets-pills, .presets-pills { display: flex; align-items: center; gap: 8px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 1px 1px 5px; scrollbar-width: none; }.target-sets-pills::-webkit-scrollbar, .presets-pills::-webkit-scrollbar { display: none; }.set-pill, .preset-pill { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--border-dark); border-radius: 12px; background: var(--surface-strong-dark); color: inherit; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700; white-space: nowrap; }.set-pill { min-width: 68px; }.preset-pill { min-width: 64px; }.set-pill:hover, .preset-pill:hover, .stepper-btn:hover { border-color: var(--accent); color: var(--accent); }.set-pill.active, .preset-pill.active { border-color: transparent; background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-start) 30%, transparent); color: #fff; }.category-tag { flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent-start) 25%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--accent-start) 14%, var(--surface-strong-dark)); color: var(--accent-start); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }.interval-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.stepper-btn { min-height: 40px; border: 1px solid var(--border-dark); border-radius: 12px; background: var(--surface-strong-dark); color: inherit; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700; }.stepper-btn.main-step { background: color-mix(in srgb, var(--accent-start) 12%, var(--surface-strong-dark)); }
.sound-toast { position: fixed; z-index: 2000; bottom: 24px; left: 50%; display: flex; align-items: center; justify-content: center; gap: 10px; width: min(580px, 94vw); padding: 12px 20px; border: 1px solid var(--border-dark); border-radius: 16px; background: rgba(18, 18, 22, .94); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); color: #fff; font-size: .86rem; font-weight: 600; text-align: center; transform: translateX(-50%); transition: opacity .3s ease, transform .3s ease; }.sound-toast.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
body.light-mode .timer-stage, body.light-mode .timer-controls, body.light-mode .set-counter-widget, body.light-mode .set-time-badge, body.light-mode .session-badge, body.light-mode .secondary-btn { background: var(--surface-light); border-color: var(--border-light); box-shadow: var(--shadow-light); }body.light-mode .set-pill, body.light-mode .preset-pill, body.light-mode .stepper-btn, body.light-mode .quick-adj-btn { background: var(--surface-strong-light); border-color: var(--border-light); }body.light-mode .set-label, body.light-mode .set-total, body.light-mode .set-total-slash, body.light-mode .controls-header, body.light-mode #stateLabel { color: var(--muted-light); }body.light-mode .ring-bg { stroke: color-mix(in srgb, var(--text-light) 12%, transparent); }body.light-mode #timeDisplay { text-shadow: none; }
@media (max-width: 600px) { .timer-app { gap: 12px; }.dashboard-bar { gap: 6px; justify-content: flex-start; }.set-counter-widget { flex: 0 0 auto; }.set-btn { width: 30px; }.set-info { min-width: 76px; }.set-time-badge { flex: 1 1 auto; overflow: hidden; padding: 0 8px; text-overflow: ellipsis; }.set-time-badge span { overflow: hidden; text-overflow: ellipsis; }.session-badge { flex: 0 0 38px; width: 38px; padding: 0; }.session-badge span { display: none; }.timer-stage { padding: 18px 12px 16px; border-radius: 22px; }.ring-container { width: min(82vw, 290px); }.primary-btn, .secondary-btn { min-height: 50px; }.secondary-btn { width: 80px; }.interval-stepper { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

.set-info { border: 0; background: transparent; color: inherit; font: inherit; }
.scroll-hint { color: var(--muted-dark); font-size: .72rem; }
body.light-mode .scroll-hint { color: var(--muted-light); }