body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background: var(--panel-bg); border-bottom: 2px solid var(--gold); }
.logo { font-size: 1.5em; font-weight: bold; color: var(--gold); text-decoration: none; }
.btn-home { background: transparent; border: 1px solid var(--gold); color: var(--gold); padding: 8px 15px; border-radius: 20px; cursor: pointer; text-decoration: none; transition: 0.3s; }
.btn-home:hover { background: var(--gold); color: #fff; }
.container { max-width: 500px; margin: 60px auto; padding: 0 20px; text-align: center; }
h1 { color: var(--gold); font-size: 2.5em; margin-bottom: 10px; }
.section-desc { color: #aaa; margin-bottom: 40px; line-height: 1.6;}
.timer-display { font-size: 6em; font-weight: bold; color: #fff; margin: 30px 0; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(192, 159, 107, 0.3); }
.controls { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
.btn-control { background: var(--gold); color: #fff; border: none; padding: 12px 25px; font-size: 1.1em; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.3s; min-width: 120px; }
.btn-control:hover { background: var(--gold-hover); }
.btn-secondary { background: rgba(255,255,255,0.1); color: #fff; }
.btn-secondary:hover { background: rgba(255,255,255,0.2); }
.modes { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.btn-mode { background: transparent; border: 1px solid #333; color: #ccc; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: 0.3s; }
.btn-mode.active { background: rgba(192, 159, 107, 0.2); border-color: var(--gold); color: var(--gold); }
/* Scoped to this tool; shared tool styles remain untouched. */
body { color: var(--text-color); }
.container { margin: 40px auto; }
.timer-display { color: var(--text-color); text-shadow: none; }
.modes { flex-wrap: wrap; }
.btn-mode { color: var(--text-color); min-height: 44px; border-color: #84765f; }
.btn-mode.active { color: #604818; background: #f1e5cc; border-color: #806332; }
.btn-control { color: #fff; background: #6b5127; min-height: 48px; }
.btn-control:hover { background: #543e1d; }
.btn-secondary { color: var(--text-color); background: #e7dfd1; }
.btn-secondary:hover { background: #d8cbb6; }
.timer-note { color: var(--muted); line-height: 1.8; font-size: .95rem; }
#timerStatus { min-height: 3em; line-height: 1.7; }
#storageStatus:empty { display: none; }
button:focus-visible, a:focus-visible { outline: 3px solid #12646a; outline-offset: 4px; }
@media (max-width: 520px) {
    header { padding: 16px; flex-wrap: wrap; gap: 14px; }
    .logo { font-size: 1.15rem; }
    .container { margin: 30px auto; padding: 0 16px; }
    h1 { font-size: 2rem; }
    .timer-display { font-size: clamp(3.5rem, 20vw, 6rem); }
    .controls { flex-wrap: wrap; }
    .btn-control { flex: 1; }
}
/* Preserve enlarged text: wrap between complete minute/second groups if needed. */
.timer-display { white-space:normal; line-height:1.25; }
.timer-display span { display:inline-block; }