:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #e0e7ff;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-muted: #f8fafc;
    --background: #f1f5f9;
    --border: #e2e8f0;
    --border-dark: #cbd5e1;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 16px rgba(15,23,42,0.08);
    --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
    --shadow-soft: var(--shadow-md);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ring-circumference: 753.98;
    --faq-bg: var(--surface);
    --faq-border: var(--border);
    --faq-question-text: var(--text-main);
    --faq-answer-text: var(--text-muted);
    --faq-hover-bg: var(--surface-muted);
    --faq-open-accent: var(--primary);
    --faq-card-shadow: var(--shadow-soft);
    --faq-section-margin-top: 0;
}

.timer-with-alerts-page { padding: 2rem 0 4rem; }

/* ── Layout ── */
.timer-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: start;
}

/* ── Cards ── */
.timer-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    padding: 1.75rem;
    animation: fadeInUp 0.45s ease-out both;
}
.timer-card:nth-child(2) { animation-delay: 0.06s; }

.card-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.card-icon { width: 16px; height: 16px; color: var(--primary); }

/* ── SVG Ring ── */
.timer-display { text-align: center; }

.ring-container {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto 1.5rem;
}

.ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.ring-track {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 9;
}

.ring-progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 754;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.4s ease;
    filter: drop-shadow(0 0 6px rgba(99,102,241,0.35));
}
.ring-progress.warning {
    stroke: var(--warning);
    filter: drop-shadow(0 0 6px rgba(245,158,11,0.45));
    animation: ringPulse 1.4s ease-in-out infinite;
}
.ring-progress.danger {
    stroke: var(--danger);
    filter: drop-shadow(0 0 8px rgba(239,68,68,0.55));
    animation: ringPulse 0.7s ease-in-out infinite;
}

.ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.timer-time {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: color 0.3s;
}
.timer-time.danger-text { color: var(--danger); }
.timer-time.warning-text { color: var(--warning); }

.timer-label-display {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    margin-top: 0.25rem;
    transition: var(--transition);
}
.status-badge.running { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.status-badge.paused  { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.status-badge.finished { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.status-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.status-badge.running .status-dot { animation: blink 1s infinite; }

/* ── Controls ── */
.timer-controls {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin: 1.25rem 0 1rem;
    flex-wrap: wrap;
}

.btn-timer {
    padding: 0.65rem 1.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 100px;
    justify-content: center;
    white-space: nowrap;
}
.btn-timer:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.btn-start {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16,185,129,0.28);
}
.btn-start:not(:disabled):hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16,185,129,0.38);
}
.btn-pause {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245,158,11,0.28);
}
.btn-pause:not(:disabled):hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245,158,11,0.38);
}
.btn-reset {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 12px rgba(239,68,68,0.22);
}
.btn-reset:not(:disabled):hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239,68,68,0.32);
}

/* ── Linear Progress Bar ── */
.progress-container { margin: 0 0 0.875rem; }
.progress-bar {
    height: 5px;
    background: var(--border);
    border-radius: 9999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #818cf8);
    border-radius: 9999px;
    transition: width 1s linear, background 0.4s;
    width: 100%;
}
.progress-fill.warning { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.progress-fill.danger  { background: linear-gradient(90deg, var(--danger), #f87171); }

/* Copy button */
.copy-button {
    width: 100%;
    height: 38px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted) !important;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: var(--transition);
}
.copy-button:hover { background: var(--border); }
.copy-button.copied { background: var(--success); border-color: var(--success); color: #fff !important; }

/* ── Settings Divider ── */
.settings-divider {
    height: 1px;
    background: var(--border);
    margin: 1.1rem 0;
}

/* ── Time Input Row ── */
.time-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 1.1rem;
}
.time-input-group { display: flex; flex-direction: column; gap: 0.3rem; }
.time-input-group label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}
.time-input-group input {
    width: 100%;
    padding: 0.5rem 0.25rem;
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-main);
    transition: var(--transition);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.time-input-group input::-webkit-inner-spin-button,
.time-input-group input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.time-input-group input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* ── Sound Grid ── */
.sound-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.sound-option { position: relative; }
.sound-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sound-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    user-select: none;
}
.sound-icon { font-size: 1.1rem; line-height: 1; }
.sound-option input:checked + .sound-label {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}
.sound-label:hover { border-color: #a5b4fc; background: #f5f3ff; color: var(--primary); }

/* ── Volume Row ── */
.volume-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.1rem;
}
.volume-icon { color: var(--text-muted); flex-shrink: 0; width: 16px; height: 16px; }
.volume-slider {
    flex: 1;
    height: 4px;
    cursor: pointer;
    accent-color: var(--primary);
}
.volume-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-main);
    width: 2.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Label Input ── */
.form-group-modern { margin-bottom: 1.1rem; }
.form-label-modern {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.input-modern {
    width: 100%;
    padding: 0.575rem 0.875rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-main);
    transition: var(--transition);
}
.input-modern:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* ── Toggle Rows ── */
.toggles-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.toggle-row-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.toggle-row-label svg { color: var(--text-muted); width: 14px; height: 14px; flex-shrink: 0; }

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 38px;
    height: 21px;
    cursor: pointer;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    border-radius: 9999px;
    transition: background 0.2s;
}
.toggle-track::after {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(17px); }

/* ── Settings Actions ── */
.settings-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.625rem;
}
.btn-set {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.28);
}
.btn-set:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99,102,241,0.38);
}
.btn-test {
    background: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text-muted);
    min-width: auto;
    padding: 0.65rem 1rem;
}
.btn-test:hover { background: var(--border); color: var(--text-main); }

/* ── Presets ── */
.presets-card { margin-bottom: 1.5rem; animation-delay: 0.12s; }
.presets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.preset-btn {
    padding: 0.45rem 1rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 9999px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.3;
}
.preset-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.preset-btn small { font-size: 0.65rem; font-weight: 500; opacity: 0.7; }
.preset-btn.pomodoro { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }
.preset-btn.pomodoro:hover { background: #fee2e2; border-color: var(--danger); }

/* ── Info & FAQ ── */
.info-section {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    padding: 2rem;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.45s ease-out 0.18s both;
}
.twa-prose { font-size: 1rem; line-height: 1.75; color: var(--text-muted); }
.twa-prose p { margin-bottom: 1.25rem; }
.twa-prose p:last-child { margin-bottom: 0; }
.twa-lead { font-size: 1.2rem; font-weight: 600; color: var(--text-main); margin-bottom: 1rem !important; }
.twa-h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-main); margin: 2rem 0 1rem; line-height: 1.3; }
.twa-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.twa-prose a:hover { color: var(--primary-dark); }
.twa-infographic { margin: 1.75rem 0 2rem; padding: 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.twa-infographic-title { font-size: 1.05rem; font-weight: 700; color: var(--text-main); text-align: center; margin: 0 0 1.25rem; }
.twa-infographic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.twa-infographic-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 1.1rem 0.85rem; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border-left: 4px solid var(--border); font-size: 0.8125rem; color: var(--text-muted); line-height: 1.45; }
.twa-infographic-card strong { font-size: 0.9rem; color: var(--text-main); }
.twa-infographic-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0.15rem; }
.twa-card-ring { border-left-color: var(--primary); }
.twa-card-sound { border-left-color: var(--success); }
.twa-card-notif { border-left-color: #3b82f6; }
.twa-card-vibe { border-left-color: var(--warning); }
.bmc-time .faq-section { margin-top: 0; animation: fadeInUp 0.45s ease-out 0.24s both; }

/* ── Keyframes ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
@keyframes ringPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}
@keyframes finishedFlash {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50%       { filter: drop-shadow(0 0 12px rgba(239,68,68,0.7)); }
}
.ring-progress.finished {
    stroke: var(--danger);
    animation: finishedFlash 0.5s ease-in-out 6;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .timer-layout { grid-template-columns: 1fr; gap: 1rem; }
    .ring-container { width: 210px; height: 210px; }
    .timer-time { font-size: 2.4rem; }
    .timer-controls { gap: 0.5rem; }
    .btn-timer { min-width: auto; padding: 0.6rem 1.1rem; font-size: 0.875rem; }
    .sound-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
    .timer-with-alerts-page { padding: 1rem 0 2rem; }
    .timer-card { padding: 1.25rem; }
    .ring-container { width: 175px; height: 175px; }
    .timer-time { font-size: 2rem; }
    .sound-grid { grid-template-columns: repeat(2, 1fr); }
    .settings-actions { grid-template-columns: 1fr; }
    .btn-test { min-width: auto; }
}