:root {
    --bg-1: #eaf4ff;
    --bg-2: #d7e9ff;
    --card: #ffffff;
    --ink: #22222b;
    --muted: #5f6774;
    --accent: #1d4ed8;
    --accent-strong: #1e40af;
    --ok: #157347;
    --warn: #9a5800;
    --border: #bcd4f8;
    --shadow: 0 12px 28px rgba(21, 52, 94, 0.13);
    --radius: 14px;
    --control-play: #1d4ed8;
    --control-pause: #1e40af;
    --control-stop: #1e3a8a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% -20%, rgba(255, 255, 255, 0.75), transparent 45%),
        radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 35%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
    padding: 8px;
}

body[data-team="azul"] {
    --bg-1: #eaf4ff;
    --bg-2: #d7e9ff;
    --accent: #1d4ed8;
    --accent-strong: #1e40af;
    --border: #bcd4f8;
    --control-play: #1d4ed8;
    --control-pause: #1e40af;
    --control-stop: #1e3a8a;
}

body[data-team="verde"] {
    --bg-1: #effbee;
    --bg-2: #daf6d8;
    --accent: #1b8b4b;
    --accent-strong: #146a39;
    --border: #bce8c7;
    --control-play: #1b8b4b;
    --control-pause: #146a39;
    --control-stop: #0f5f32;
}

body[data-team="laranja"] {
    --bg-1: #fff8ec;
    --bg-2: #ffead0;
    --accent: #d9480f;
    --accent-strong: #a93408;
    --border: #f1d4b3;
    --control-play: #d9480f;
    --control-pause: #b3410d;
    --control-stop: #8f2e08;
}

body[data-team="rosa"] {
    --bg-1: #fff0f6;
    --bg-2: #ffe0ee;
    --accent: #d63384;
    --accent-strong: #ad2b6b;
    --border: #f7c4dd;
    --control-play: #d63384;
    --control-pause: #ad2b6b;
    --control-stop: #8b2356;
}

.page {
    width: min(720px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 8px;
}

.toolbar {
    display: grid;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px;
}

.team-select-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}

.team-select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
}

.timer-list {
    display: grid;
    gap: 8px;
}

.timer-card {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px;
    display: grid;
    gap: 6px;
}

.timer-card--main {
    position: sticky;
    top: 8px;
    z-index: 20;
    border-color: #2f3f56;
    box-shadow: 0 14px 30px rgba(20, 34, 54, 0.28);
    background: linear-gradient(180deg, #20334c 0%, #2a4566 100%);
}

.timer-card--main .timer-card__type,
.timer-card--main .timer-card__title {
    color: #edf6ff;
}

.timer-card--main .timer-elapsed {
    border-color: #89c7ff;
    background: #eaf5ff;
    color: #14558a;
}

.timer-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.timer-card__title-wrap {
    min-width: 0;
}

.timer-card__title {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.timer-card__type {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--warn);
    font-weight: 700;
}

.timer-elapsed {
    margin: 0;
    border: 1px solid #8bd8a8;
    background: #eafff0;
    color: var(--ok);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.timer-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 42px 42px;
    gap: 6px;
    align-items: center;
}

.timer-row--down {
    grid-template-columns: 24px minmax(0, 1fr) 42px 42px 42px;
}

.adjust-controls {
    display: grid;
    gap: 4px;
}

.btn-adjust {
    width: 24px;
    height: 17px;
    border: 1px solid #e2b7b7;
    border-radius: 6px;
    background: #fff2f2;
    color: #9f1d1d;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-adjust:hover {
    background: #ffe3e3;
}

.btn-adjust__icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.timer-time {
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, #ffffff 74%);
    padding: 7px 8px;
    background: color-mix(in srgb, var(--accent) 8%, #ffffff 92%);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.timer-time--down {
    border-color: #e8b6b6;
    background: #fff2f2;
    color: #9f1d1d;
}

.timer-card--main .timer-time {
    font-size: 1.6rem;
    padding: 10px 8px;
    border-width: 2px;
    border-color: #89c7ff;
    background: #f0f8ff;
    color: #0f3d66;
}

.timer-time--down[data-state="running"],
.timer-time--down[data-state="paused"],
.timer-time--down[data-state="stopped"] {
    border-color: #e8b6b6;
    background: #fff2f2;
    color: #9f1d1d;
}

.timer-time[data-state="running"] {
    border-color: #77d0be;
    background: #f0fffb;
    color: var(--ok);
}

.timer-time[data-state="paused"] {
    border-color: #f4c27e;
    background: #fff6ea;
    color: #8a4b08;
}

.timer-time[data-state="stopped"] {
    color: var(--ink);
}

.timer-time.timer-time--down,
.timer-time.timer-time--down[data-state="running"],
.timer-time.timer-time--down[data-state="paused"],
.timer-time.timer-time--down[data-state="stopped"] {
    border-color: #e8b6b6;
    background: #fff2f2;
    color: #9f1d1d;
}

.btn {
    border: 0;
    border-radius: 10px;
    width: 42px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-stop {
    background: var(--control-stop);
}

.btn-pause {
    background: var(--control-pause);
}

.btn-play {
    background: var(--control-play);
}

.btn-play:not(:disabled):hover {
    filter: brightness(0.92);
}

.btn__icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    fill: currentColor;
}

.actions {
    display: grid;
    gap: 8px;
    padding: 4px 0 12px;
}

.finish-btn {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px 12px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    background: var(--accent);
    cursor: pointer;
}

.finish-btn:hover {
    background: var(--accent-strong);
}

.share-btn {
    width: 100%;
    border: 0;
    border-radius: 11px;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    background: #6b7280;
    cursor: pointer;
}

.share-btn:hover {
    background: #4b5563;
}

@media (max-width: 420px) {
    body {
        padding: 4px;
    }

    .timer-card,
    .toolbar {
        padding: 6px;
    }

    .timer-row {
        grid-template-columns: minmax(0, 1fr) 38px 38px 38px;
        gap: 4px;
    }

    .timer-row--down {
        grid-template-columns: 22px minmax(0, 1fr) 38px 38px 38px;
    }

    .btn-adjust {
        width: 22px;
        height: 15px;
    }

    .btn {
        width: 38px;
        height: 34px;
    }

    .timer-time {
        font-size: 0.98rem;
    }

    .timer-card--main .timer-time {
        font-size: 1.25rem;
    }

    .timer-card__title {
        font-size: 0.78rem;
    }

    .timer-elapsed {
        font-size: 0.62rem;
        padding: 3px 7px;
    }

    .finish-btn {
        padding: 12px 10px;
        font-size: 0.92rem;
    }
}