.stopwatch-shell {
    max-width: 1180px;
}

.stopwatch-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at top left, rgba(255, 99, 71, 0.16), transparent 34%),
        radial-gradient(circle at right center, rgba(255, 193, 7, 0.12), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--bs-body-bg) 92%, #fff7ef) 0%, color-mix(in srgb, var(--bs-body-bg) 96%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 82%, transparent);
    box-shadow: 0 1rem 2.75rem rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] .stopwatch-hero {
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.18), transparent 34%),
        radial-gradient(circle at right center, rgba(250, 204, 21, 0.13), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--bs-body-bg) 96%, #111827) 0%, color-mix(in srgb, var(--bs-body-bg) 90%, #1f2937) 100%);
    box-shadow: 0 1rem 2.75rem rgba(0, 0, 0, 0.26);
}

.stopwatch-eyebrow,
.display-kicker,
.panel-kicker {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    font-weight: 700;
}

.stopwatch-hero-note {
    min-width: min(260px, 100%);
    max-width: 320px;
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--bs-card-bg, #fff) 88%, rgba(255, 255, 255, 0.45));
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 80%, transparent);
}

.stopwatch-hero-note__label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--bs-secondary-color);
}

.stopwatch-hero-note__text {
    font-size: 0.95rem;
    line-height: 1.6;
}

.stopwatch-card {
    padding: 1.5rem;
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bs-card-bg, #fff) 98%, transparent) 0%, color-mix(in srgb, var(--bs-card-bg, #fff) 94%, #fff5f0) 100%);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 84%, transparent);
    box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] .stopwatch-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bs-card-bg, #111827) 96%, #1f2937) 0%, color-mix(in srgb, var(--bs-card-bg, #111827) 90%, #0f172a) 100%);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.24);
}

.mode-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.mode-switcher__btn {
    border: 0;
    border-radius: 1rem;
    padding: 0.85rem 0.75rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--bs-secondary-bg) 72%, transparent);
    color: var(--bs-body-color);
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.mode-switcher__btn:hover,
.mode-switcher__btn:focus-visible {
    transform: translateY(-1px);
    outline: none;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

.mode-switcher__btn.active {
    background: linear-gradient(135deg, #ff7a59 0%, #ffb347 100%);
    color: #1f2937;
}

.mode-panel {
    padding: 1rem 1.05rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--bs-secondary-bg) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 74%, transparent);
}

.panel-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    letter-spacing: 0.04em;
}

.preset-grid,
.control-grid {
    display: grid;
    gap: 0.75rem;
}

.preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-grid--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shortcut-card {
    padding: 1rem 1.05rem;
    border-radius: 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    background: color-mix(in srgb, var(--bs-secondary-bg) 42%, transparent);
}

.shortcut-list {
    display: grid;
    gap: 0.65rem;
    font-size: 0.95rem;
}

.shortcut-list kbd {
    min-width: 3.4rem;
    display: inline-block;
    text-align: center;
    font-family: 'JetBrains Mono', 'IBM Plex Mono', 'SFMono-Regular', monospace;
}

.display-title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 800;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--bs-secondary-bg) 74%, transparent);
    color: var(--bs-body-color);
}

.status-chip[data-tone="running"] {
    background: color-mix(in srgb, var(--bs-success) 18%, transparent);
    color: var(--bs-success-text-emphasis, #146c43);
}

.status-chip[data-tone="paused"] {
    background: color-mix(in srgb, var(--bs-warning) 22%, transparent);
    color: var(--bs-warning-text-emphasis, #664d03);
}

.status-chip[data-tone="overtime"] {
    background: color-mix(in srgb, var(--bs-danger) 18%, transparent);
    color: var(--bs-danger-text-emphasis, #842029);
}

.timer-display-wrap {
    padding: 1.5rem 0 1rem;
}

.timer-display {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', 'SFMono-Regular', monospace;
    font-size: clamp(3rem, 9vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.timer-subtext {
    margin-top: 0.9rem;
    font-size: 1rem;
}

.progress-shell {
    padding: 0.95rem 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--bs-secondary-bg) 62%, transparent);
}

.stopwatch-progress {
    height: 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-border-color) 30%, transparent);
}

.stopwatch-progress .progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7a59 0%, #ffc857 100%);
    transition: width 0.12s linear;
}

.metric-card {
    height: 100%;
    padding: 1rem 1rem 0.95rem;
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--bs-card-bg, #fff) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 72%, transparent);
}

.metric-card__label,
.metric-card__detail {
    color: var(--bs-secondary-color);
}

.metric-card__label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.metric-card__value {
    margin-top: 0.55rem;
    font-size: clamp(1.55rem, 4.5vw, 2.25rem);
    line-height: 1.05;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.metric-card__detail {
    margin-top: 0.45rem;
    font-size: 0.9rem;
}

.history-list {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.history-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    border-radius: 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--bs-border-color) 72%, transparent);
    background: color-mix(in srgb, var(--bs-secondary-bg) 48%, transparent);
    padding: 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem 1.05rem;
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    background: color-mix(in srgb, var(--bs-card-bg, #fff) 92%, transparent);
}

.history-item.is-best {
    border-color: color-mix(in srgb, var(--bs-success) 42%, transparent);
    background: color-mix(in srgb, var(--bs-success) 8%, var(--bs-card-bg, #fff));
}

.history-item__title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-item__meta,
.history-item__detail {
    color: var(--bs-secondary-color);
    font-size: 0.92rem;
}

.history-item__value {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', 'SFMono-Regular', monospace;
    font-weight: 800;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.best-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--bs-success) 16%, transparent);
    color: var(--bs-success-text-emphasis, #146c43);
}

@media (max-width: 991px) {
    .stopwatch-hero {
        flex-direction: column;
    }

    .stopwatch-hero-note {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .stopwatch-card,
    .stopwatch-hero {
        padding: 1.15rem;
    }

    .mode-switcher,
    .control-grid,
    .control-grid--secondary,
    .preset-grid {
        grid-template-columns: 1fr;
    }

    .history-item {
        grid-template-columns: 1fr;
    }

    .timer-display {
        font-size: clamp(2.6rem, 15vw, 4rem);
    }
}