:root {
    /* warm paper canvas */
    --paper:    #f5f1e8;
    --paper-2:  #efe9dc;
    --cream:    #fbf8f0;
    /* ink + accents */
    --ink:      #423a24;
    --ink-soft: rgba(66, 58, 36, 0.72);
    --ink-faint:rgba(66, 58, 36, 0.5);
    --line:     rgba(66, 58, 36, 0.14);
    --sage:     #9db0a0;
    --sage-2:   #b7c4b6;
    --terra:    #c98a73;
    --terra-2:  #d8a48c;
    /* gold */
    --gold-a:   #b58d3c;
    --gold-b:   #e6cd82;
    --gold-c:   #8a6b23;
    --dial: min(340px, 84vw, 44vh);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    font-family: 'Jost', -apple-system, 'Segoe UI', sans-serif;
}

html, body { height: 100%; }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(140% 120% at 50% -10%, #faf6ee 0%, var(--paper) 52%, var(--paper-2) 100%);
    color: var(--ink);
    overflow: hidden;
}

/* subtle paper grain */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

#app {
    width: 100%;
    max-width: 440px;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    overscroll-behavior: none;
}

/* keyboard focus ring (only for keyboard users, not touch/mouse) */
:focus-visible {
    outline: 2px solid var(--gold-a);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- Elegant scrollbars (everywhere) ---------- */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 141, 60, 0.45) transparent;
}
/* WebKit / Blink (Safari, Chrome, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(230, 205, 130, 0.75), rgba(181, 141, 60, 0.55));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-clip: padding-box;
    transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold-b), var(--gold-a));
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Views ---------- */
.view {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: max(20px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
}
.view.active { display: flex; }

/* ---------- Welcome / choose-a-timer ---------- */
.welcome-view { justify-content: center; }
.welcome-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 6vh, 54px);
}
.welcome-brand { text-align: center; }
.welcome-logo {
    width: clamp(74px, 22vw, 96px);
    height: clamp(74px, 22vw, 96px);
    margin: 0 auto clamp(14px, 2.4vh, 20px);
    border-radius: 24px;
    background: url('icon-192.png') center / cover no-repeat;
    box-shadow: 0 14px 32px rgba(66, 58, 36, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.welcome-title {
    margin: 0;
    font-size: clamp(30px, 9vw, 40px);
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--ink);
}
.welcome-tagline {
    margin: 9px 0 0;
    font-size: 12px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.welcome-cards {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.8vh, 15px);
}
.welcome-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: clamp(15px, 2.2vh, 18px) 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--cream);
    box-shadow: 0 6px 18px rgba(66, 58, 36, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.welcome-card:hover { border-color: rgba(181, 141, 60, 0.5); box-shadow: 0 12px 28px rgba(66, 58, 36, 0.12); }
.welcome-card:active { transform: scale(0.985); }
.wc-icon {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: linear-gradient(155deg, var(--gold-b), var(--gold-a));
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 5px 12px rgba(181, 141, 60, 0.28);
}
.wc-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: var(--wc-mask) center / 26px no-repeat;
    mask: var(--wc-mask) center / 26px no-repeat;
}
.wc-med  { --wc-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'); }
.wc-pomo { --wc-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7.5 12 12 15 13.8"/></svg>'); }
.wc-tb   { --wc-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 6h10M10 12h10M10 18h10"/><path d="M3.3 6l1.3 1.3L7.4 4.6"/><path d="M3.3 12l1.3 1.3L7.4 10.6"/><path d="M3.3 18l1.3 1.3L7.4 16.6"/></svg>'); }
.wc-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wc-name { font-size: 18px; font-weight: 500; letter-spacing: 0.3px; color: var(--ink); }
.wc-desc { margin-top: 3px; font-size: 12px; color: var(--ink-soft); }
.wc-go {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: var(--ink-faint);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>') center / contain no-repeat;
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-height: 40px;
    margin-top: 4px;
}
.title {
    flex: 1;
    text-align: center;
    font-size: clamp(12px, 3.4vw, 14px);
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ink);
}
.title-toggle {
    flex: 0 1 auto;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px 7px 14px;
    border-radius: 999px;
    background: rgba(181, 141, 60, 0.12);
    border: 1px solid rgba(181, 141, 60, 0.38);
    cursor: pointer;
    font: inherit;
    font-size: clamp(12px, 3.4vw, 14px);
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ink);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.title-toggle:hover { background: rgba(181, 141, 60, 0.2); border-color: rgba(181, 141, 60, 0.55); }
.title-toggle:active { transform: scale(0.97); }
.title-caret {
    font-size: 0.72em;
    letter-spacing: 0;
    line-height: 1;
    color: var(--cream);
    background: var(--gold-c);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.nav-btn {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 4px;
    min-width: 66px;
    text-align: left;
    transition: color 0.2s ease, transform 0.15s ease;
}
.header .nav-btn:last-of-type { text-align: right; }
.nav-btn:hover { color: var(--ink); }
.nav-btn:active { color: var(--gold-c); transform: scale(0.96); }

/* ---------- Timer visual ---------- */
.timer-container {
    flex: 0 0 auto;
    width: var(--dial);
    height: var(--dial);
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.timer-face {
    position: relative;
    z-index: 2;
    width: 79%;
    height: 79%;
    background: radial-gradient(120% 120% at 50% 0%, var(--cream) 0%, #f2ede1 100%);
    border: 1px solid rgba(181, 141, 60, 0.28);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 22px 50px rgba(66, 58, 36, 0.14),
        inset 0 1px 3px rgba(255, 255, 255, 0.9);
}

.preset-name {
    font-size: calc(var(--dial) * 0.045);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4%;
    z-index: 5;
}

.time-text {
    font-size: calc(var(--dial) * 0.16);
    font-weight: 400;
    letter-spacing: 0.02em;
    z-index: 5;
    line-height: 1;
    max-width: 100%;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    background: linear-gradient(150deg, #5a4f2e 0%, #423a24 55%, #6b5a2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ink);
    cursor: pointer;
}
#time-text:active { opacity: 0.7; }
/* keep long clocks (H:MM:SS / HH:MM:SS) inside the disc */
.time-text.t-long  { font-size: calc(var(--dial) * 0.118); letter-spacing: 0; }
.time-text.t-xlong { font-size: calc(var(--dial) * 0.103); letter-spacing: 0; }

.hint {
    margin-top: 4%;
    font-size: calc(var(--dial) * 0.04);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    z-index: 5;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
}

/* progress ring overlay — concentric with the whole dial */
.timer-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    height: 92%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}
.guide {
    fill: none;
    stroke: rgba(181, 141, 60, 0.32);
    stroke-width: 1;
}
.progress-arc {
    fill: none;
    stroke: url(#goldGradient);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 628.3;
    stroke-dashoffset: 628.3;
    filter: drop-shadow(0 3px 5px rgba(66, 58, 36, 0.28));
    transition: none;
}
.progress-knob {
    fill: var(--cream);
    stroke: url(#goldGradient);
    stroke-width: 4;
    r: 8.5;
    filter: drop-shadow(0 2px 4px rgba(66, 58, 36, 0.4));
}

/* ---------- Controls ---------- */
.controls {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: clamp(28px, 11vw, 48px);
    padding: clamp(12px, 3vh, 26px) 0 clamp(4px, 2vh, 16px);
}
.control-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    transition: transform 0.15s ease, opacity 0.2s ease;
}
.control-item:active { transform: scale(0.92); }

.icon-circle {
    width: clamp(50px, 15vw, 60px);
    height: clamp(50px, 15vw, 60px);
    border: 1.5px solid rgba(181, 141, 60, 0.75);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: var(--gold-c);
    background: rgba(251, 248, 240, 0.5);
    box-shadow: 0 3px 10px rgba(66, 58, 36, 0.07), inset 0 1px 1px rgba(255,255,255,0.7);
}
/* the primary (start/pause) control is gold-filled */
#btn-start .icon-circle,
#pomo-start .icon-circle,
#tb-start .icon-circle {
    background: linear-gradient(160deg, rgba(230,205,130,0.35), rgba(181,141,60,0.14));
}
.control-item span {
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.icon-cancel { width: 24px; height: 1.6px; background: currentColor; border-radius: 2px; transform: rotate(45deg); }
.icon-play {
    width: 0; height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 4px;
}
.icon-pause { display: none; gap: 5px; }
.icon-pause::before, .icon-pause::after {
    content: '';
    width: 3px; height: 16px;
    background: currentColor;
    border-radius: 2px;
}
#app.running #btn-start .icon-play { display: none; }
#app.running #btn-start .icon-pause { display: flex; }
#app.running #pomo-start .icon-play { display: none; }
#app.running #pomo-start .icon-pause { display: flex; }
#app.running #tb-start .icon-play { display: none; }
#app.running #tb-start .icon-pause { display: flex; }

.icon-reset {
    width: 21px; height: 21px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>') center / contain no-repeat;
}

/* ---------- Panels (setup / presets / sounds) ---------- */
.panel {
    width: 100%;
    max-width: 400px;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 22px;
    min-height: 0;
}

.setup-form { display: flex; flex-direction: column; gap: 16px; }
.setup-form label {
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: -6px;
}
.setup-form input {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    padding: 15px 18px;
    font-size: 19px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.setup-form input:focus {
    border-color: var(--gold-a);
    box-shadow: 0 0 0 3px rgba(181, 141, 60, 0.12);
}
.setup-form input::placeholder { color: var(--ink-faint); }

.edit-only { display: none; }
#view-setup.editing .edit-only { display: block; }

/* minutes / seconds unit toggle */
.unit-toggle {
    display: flex;
    gap: 6px;
    background: rgba(66, 58, 36, 0.06);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 5px;
}
.unit-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 11px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.unit-btn.active {
    background: linear-gradient(160deg, rgba(230,205,130,0.5), rgba(181,141,60,0.24));
    color: var(--gold-c);
    box-shadow: 0 3px 10px rgba(181, 141, 60, 0.14), inset 0 1px 1px rgba(255,255,255,0.7);
}

.btn-primary {
    margin-top: 24px;
    background: linear-gradient(160deg, #4c4327, var(--ink));
    color: var(--cream);
    border: none;
    padding: 16px 28px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(66, 58, 36, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(66, 58, 36, 0.24); }
.btn-primary:active { transform: scale(0.98); opacity: 0.92; }

.btn-secondary {
    margin-top: 12px;
    background: rgba(251, 248, 240, 0.6);
    color: var(--ink);
    border: 1px solid rgba(181, 141, 60, 0.45);
    padding: 15px 28px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn-secondary:hover { background: rgba(230, 205, 130, 0.18); box-shadow: 0 6px 16px rgba(181, 141, 60, 0.12); }
.btn-secondary:active { transform: scale(0.98); }

/* "Save as Preset" only appears when setting a fresh time, not when editing a preset */
.new-only { display: block; }
#view-setup.editing .new-only { display: none; }

.scroll-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    min-height: 0;
}

.preset-item, .sound-item {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 17px 19px;
    margin-bottom: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(66, 58, 36, 0.05);
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.preset-item:active, .sound-item:active { transform: scale(0.99); }

.preset-item .p-body { flex: 1; min-width: 0; }
.p-name { font-size: 17px; font-weight: 400; margin-bottom: 4px; letter-spacing: 0.4px; }
.p-sub { font-size: 10px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); }
.p-actions { display: flex; gap: 8px; flex-shrink: 0; }
.p-btn {
    background: rgba(251, 248, 240, 0.6);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.p-btn[data-act="edit"]:hover { border-color: var(--sage); color: var(--ink); }
.p-btn:active { transform: scale(0.94); }
.p-btn[data-act="edit"]:active { background: rgba(157, 176, 160, 0.22); color: var(--ink); }
.p-btn.danger { border-color: rgba(201, 138, 115, 0.5); color: var(--terra); }
.p-btn.danger:hover { border-color: var(--terra); }
.p-btn.danger:active { background: rgba(201, 138, 115, 0.14); }

.sound-item .s-name { font-size: 17px; font-weight: 400; letter-spacing: 0.4px; }
.sound-item .s-sub { font-size: 10px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }
.sound-item .s-check {
    font-size: 17px;
    color: var(--gold-c);
    opacity: 0;
    flex-shrink: 0;
}
.sound-item.selected {
    border-color: rgba(181, 141, 60, 0.5);
    background: linear-gradient(135deg, rgba(230, 205, 130, 0.22), rgba(157, 176, 160, 0.16));
    box-shadow: 0 4px 16px rgba(181, 141, 60, 0.12);
}
.sound-item.selected .s-check { opacity: 1; }

/* ---------- Completion ---------- */
.completion-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    text-align: center;
}
.completion-content h2 {
    font-weight: 500;
    font-size: clamp(22px, 7vw, 30px);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--ink);
}
.check-mark {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 1px solid rgba(181, 141, 60, 0.6);
    background: radial-gradient(circle at 50% 40%, rgba(230,205,130,0.3), rgba(157,176,160,0.16));
    position: relative;
    box-shadow: 0 12px 30px rgba(66, 58, 36, 0.12);
    animation: pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.check-mark::after {
    content: '';
    position: absolute;
    left: 38px; top: 30px;
    width: 18px; height: 36px;
    border: solid var(--gold-c);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
@keyframes pop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* ---------- Pomodoro ---------- */
/* distinct identity: a flat card with mode pills + a horizontal progress bar,
   NOT the meditation circular dial. same palette. */
.pomo-stage {
    flex: 1;
    width: 100%;
    max-width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
}

/* mode pills */
.pomo-modes {
    display: flex;
    gap: 8px;
    background: rgba(66, 58, 36, 0.06);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px;
}
.pomo-pill {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.pomo-pill.active {
    background: linear-gradient(160deg, rgba(230,205,130,0.5), rgba(181,141,60,0.24));
    color: var(--gold-c);
    box-shadow: 0 3px 10px rgba(181, 141, 60, 0.14), inset 0 1px 1px rgba(255,255,255,0.7);
}

/* the big card */
.pomo-card {
    width: 100%;
    background: radial-gradient(120% 120% at 50% 0%, var(--cream) 0%, #f2ede1 100%);
    border: 1px solid rgba(181, 141, 60, 0.28);
    border-radius: 32px;
    padding: 40px 32px 34px;
    text-align: center;
    box-shadow:
        0 6px 18px rgba(66, 58, 36, 0.07),
        inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
.pomo-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 14px;
}
.pomo-clock {
    font-size: clamp(58px, 20vw, 96px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    background: linear-gradient(150deg, #5a4f2e 0%, #423a24 55%, #6b5a2a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ink);
}
.pomo-clock.t-long  { font-size: clamp(46px, 15vw, 74px); }
.pomo-clock.t-xlong { font-size: clamp(40px, 13vw, 64px); }

/* horizontal progress bar */
.pomo-bar {
    margin-top: 26px;
    width: 100%;
    height: 8px;
    background: rgba(66, 58, 36, 0.10);
    border-radius: 999px;
    overflow: hidden;
}
.pomo-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-c), var(--gold-b), var(--gold-a));
    box-shadow: 0 1px 4px rgba(181, 141, 60, 0.35);
}

.pomo-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}
.pomo-dots .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(181, 141, 60, 0.6);
    background: transparent;
    transition: background 0.2s ease;
}
.pomo-dots .dot.filled {
    background: linear-gradient(160deg, var(--gold-b), var(--gold-a));
    border-color: var(--gold-a);
}
.icon-skip {
    width: 21px; height: 21px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" stroke="black" stroke-width="1.4" stroke-linejoin="round"><polygon points="5 4 15 12 5 20"/><rect x="17" y="4" width="2.6" height="16" rx="1.3" stroke="none"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" stroke="black" stroke-width="1.4" stroke-linejoin="round"><polygon points="5 4 15 12 5 20"/><rect x="17" y="4" width="2.6" height="16" rx="1.3" stroke="none"/></svg>') center / contain no-repeat;
}
.pomo-stats {
    margin-top: 18px;
    padding: 18px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 18px;
    text-align: center;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.6;
}
.pomo-stats strong { color: var(--gold-c); font-weight: 500; }
.pomo-sounds-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 22px 0 10px;
}

/* ---------- Timebox ---------- */
/* card stays fixed; only the task list scrolls */
.tb-stage {
    justify-content: flex-start;
    overflow: hidden;
    gap: clamp(10px, 1.6vh, 16px);
    padding-top: clamp(12px, 2vh, 26px);
}
.tb-stage #tb-card { flex: 0 0 auto; width: 100%; }
.tb-stage .tb-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 2px 2px 4px;
}
/* compact card: viewport-aware sizing so it fits every phone and leaves room for 4 tasks */
#tb-card { padding: clamp(14px, 2.4vh, 22px) 24px clamp(13px, 2vh, 20px); }
#tb-card .pomo-clock { font-size: clamp(34px, min(12vw, 8vh), 60px); }
#tb-card .pomo-clock.t-long  { font-size: clamp(28px, min(9.5vw, 6.5vh), 48px); }
#tb-card .pomo-clock.t-xlong { font-size: clamp(24px, min(8vw, 5.5vh), 42px); }
#tb-card .pomo-bar { margin-top: clamp(10px, 1.6vh, 16px); }
.tb-task-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: clamp(6px, 1vh, 10px);
}
.tb-task-row .pomo-label { margin-bottom: 0; }
.tb-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.tb-badge.hard { color: var(--terra); background: rgba(201, 138, 115, 0.14); border: 1px solid rgba(201, 138, 115, 0.4); }
.tb-badge.soft { color: #5f7a63; background: rgba(157, 176, 160, 0.18); border: 1px solid rgba(157, 176, 160, 0.5); }
.tb-count {
    margin-top: clamp(8px, 1.4vh, 14px);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* soft overtime prompt inside the card */
.tb-overtime { display: none; margin-top: 22px; }
#tb-card.overtime .tb-overtime { display: block; }
.tb-overtime-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--terra);
    margin-bottom: 12px;
}
.tb-overtime-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tb-ext {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.6px;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 15px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.tb-ext:active { transform: scale(0.95); }
.tb-ext:hover { border-color: rgba(181, 141, 60, 0.5); }
.tb-ext-done {
    color: var(--cream);
    background: linear-gradient(160deg, var(--gold-b), var(--gold-a));
    border-color: var(--gold-a);
}

/* main-view task list (single source of truth for .tb-list) */
.tb-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 1.1vh, 9px);
}
.tb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(9px, 1.5vh, 12px) 15px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(66, 58, 36, 0.05);
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tb-item:active { transform: scale(0.99); }
.tb-item.active { border-color: rgba(181, 141, 60, 0.55); box-shadow: 0 4px 16px rgba(181, 141, 60, 0.14); }
.tb-check {
    width: 22px; height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.6px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tb-item.done .tb-check {
    background: var(--gold-a);
    border-color: var(--gold-a);
    color: #fff;
}
.tb-item-body { flex: 1; min-width: 0; }
.tb-item-edit {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background-color: var(--gold-a);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>') center / 18px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>') center / 18px no-repeat;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
    display: none;
}
.tb-item.active .tb-item-edit { display: block; }
.tb-item-edit:hover { opacity: 1; }
.tb-item-edit:active { transform: scale(0.88); }
.tb-item-name {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-item.done .tb-item-name { text-decoration: line-through; color: var(--ink-faint); }
.tb-item-meta {
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 3px;
}
.tb-empty {
    width: 100%;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
    letter-spacing: 0.4px;
    padding: 6px 0;
}

/* task editor */
.tb-mode-hint {
    font-size: 11px;
    letter-spacing: 0.4px;
    color: var(--ink-soft);
    margin-top: -6px;
}
.tb-editlist { margin-top: 6px; }
.tb-edit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(66, 58, 36, 0.05);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.tb-edit-item.dragging {
    position: relative;
    z-index: 5;
    opacity: 0.96;
    border-color: rgba(181, 141, 60, 0.55);
    box-shadow: 0 14px 30px rgba(66, 58, 36, 0.22);
}
/* freeze the scroll container while a card is being dragged */
.scroll-list.tb-noscroll { overflow: hidden !important; touch-action: none; }
.tb-list, .scroll-list { overscroll-behavior: contain; }
.tb-edit-item.editing {
    border-color: rgba(181, 141, 60, 0.55);
    background: linear-gradient(135deg, rgba(230, 205, 130, 0.16), rgba(157, 176, 160, 0.12));
    box-shadow: 0 4px 16px rgba(181, 141, 60, 0.14);
}
.tb-grip {
    flex: 0 0 auto;
    width: 24px;
    height: 26px;
    cursor: grab;
    touch-action: none;
    background: var(--ink-faint);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><circle cx="9" cy="6" r="1.7"/><circle cx="15" cy="6" r="1.7"/><circle cx="9" cy="12" r="1.7"/><circle cx="15" cy="12" r="1.7"/><circle cx="9" cy="18" r="1.7"/><circle cx="15" cy="18" r="1.7"/></svg>') center / 20px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><circle cx="9" cy="6" r="1.7"/><circle cx="15" cy="6" r="1.7"/><circle cx="9" cy="12" r="1.7"/><circle cx="15" cy="12" r="1.7"/><circle cx="9" cy="18" r="1.7"/><circle cx="15" cy="18" r="1.7"/></svg>') center / 20px no-repeat;
}
.tb-grip:active { cursor: grabbing; }
.tb-edit-item .tb-item-body { flex: 1; min-width: 0; }
.tb-edit-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.tb-edit-btn {
    background: rgba(251, 248, 240, 0.6);
    border: 1px solid rgba(181, 141, 60, 0.5);
    color: var(--gold-c);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}
.tb-edit-btn:hover { background: rgba(230, 205, 130, 0.18); }
.tb-edit-btn:active { transform: scale(0.94); background: rgba(230, 205, 130, 0.24); }
.tb-del {
    background: rgba(251, 248, 240, 0.6);
    border: 1px solid rgba(201, 138, 115, 0.5);
    color: var(--terra);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 12px;
    padding: 9px 14px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.15s ease, background 0.2s ease;
}
.tb-del:active { transform: scale(0.94); background: rgba(201, 138, 115, 0.14); }

/* ---------- Mode chooser cards ---------- */
.modal-compact {
    max-width: 260px;
    padding: 20px 18px;
}
.modal-compact .modal-title { margin-bottom: 16px; }
.choose-card {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.choose-card:last-child { margin-bottom: 0; }
.choose-card:hover { border-color: rgba(181, 141, 60, 0.55); background: rgba(230, 205, 130, 0.14); }
.choose-card:active { transform: scale(0.97); }

/* ---------- Modal (custom prompt / confirm / alert) ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: rgba(66, 58, 36, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; }
.modal {
    width: 100%;
    max-width: 360px;
    background: radial-gradient(120% 100% at 50% 0%, var(--cream) 0%, var(--paper) 100%);
    border: 1px solid rgba(181, 141, 60, 0.35);
    border-radius: 26px;
    padding: 26px 24px 22px;
    box-shadow: 0 24px 60px rgba(66, 58, 36, 0.30);
    animation: modal-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modal-pop {
    0%   { transform: scale(0.92) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-c);
    text-align: center;
    margin-bottom: 10px;
}
.modal-message {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    text-align: center;
    margin-bottom: 18px;
}
.modal-input {
    width: 100%;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    padding: 14px 16px;
    font-size: 18px;
    outline: none;
    margin-bottom: 22px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal-input:focus {
    border-color: var(--gold-a);
    box-shadow: 0 0 0 3px rgba(181, 141, 60, 0.14);
}
.modal-input.hidden { display: none; }
.modal-actions { display: flex; gap: 12px; }
.modal-btn {
    flex: 1;
    padding: 14px 18px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.modal-btn:active { transform: scale(0.97); }
.modal-cancel {
    background: rgba(251, 248, 240, 0.7);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}
.modal-cancel:hover { color: var(--ink); border-color: var(--ink-faint); }
.modal-cancel.hidden { display: none; }
.modal-ok {
    background: linear-gradient(160deg, #4c4327, var(--ink));
    border: none;
    color: var(--cream);
    box-shadow: 0 8px 18px rgba(66, 58, 36, 0.20);
}
.modal-ok:hover { box-shadow: 0 10px 24px rgba(66, 58, 36, 0.26); }
.modal-ok.danger {
    background: linear-gradient(160deg, var(--terra-2), var(--terra));
    box-shadow: 0 8px 18px rgba(201, 138, 115, 0.28);
}

/* ---------- Short screens ---------- */
@media (max-height: 700px) {
    :root { --dial: min(310px, 78vw, 40vh); }
    .controls { padding-top: 10px; }
    .panel { padding-top: 16px; }
    .pomo-stage { gap: 16px; }
    .pomo-card { padding: 28px 26px 24px; }
    .pomo-clock { font-size: clamp(48px, 16vw, 78px); }
    #tb-card { padding: 14px 22px 13px; }
}
@media (max-height: 560px) {
    :root { --dial: min(250px, 60vw, 46vh); }
    .pomo-stage { gap: 12px; }
    .pomo-card { padding: 20px 22px 18px; border-radius: 24px; }
    .pomo-clock { font-size: clamp(40px, 13vw, 60px); }
    .pomo-bar { margin-top: 16px; }
    .pomo-dots { margin-top: 14px; }
    #tb-card { padding: 12px 20px 12px; border-radius: 24px; }
    #tb-card .pomo-bar { margin-top: 10px; }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 400px) {
    .panel { padding-left: 18px; padding-right: 18px; }
    #tb-card { padding-left: 18px; padding-right: 18px; }
    .tb-item { padding-left: 13px; padding-right: 13px; gap: 10px; }
    .tb-item-name { font-size: 14.5px; }
    .controls { gap: 10px; }
}
@media (max-width: 340px) {
    .panel { padding-left: 14px; padding-right: 14px; }
    .tb-item { padding-left: 11px; padding-right: 11px; }
    .tb-item-name { font-size: 14px; }
    .tb-badge { font-size: 9px; }
}