:root {
    color-scheme: light;
    --bg-page: #f8fbff;
    --bg-page-soft: #eef5ff;
    --bg-surface: rgba(255, 255, 255, 0.78);
    --bg-surface-strong: #ffffff;
    --bg-surface-muted: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    --border-soft: rgba(148, 163, 184, 0.28);
    --border-strong: rgba(148, 163, 184, 0.42);
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #dbeafe;
    --accent-contrast: #ffffff;
    --success: #10b981;
    --success-soft: #d1fae5;
    --warning: #f59e0b;
    --warning-soft: #fef3c7;
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --footer-bg: #0b1727;
    --footer-text: #f8fafc;
    --footer-muted: #cbd5e1;
    --footer-heading: #93c5fd;
    --footer-link-hover: #93c5fd;
    --footer-border: rgba(148, 163, 184, 0.22);
    --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08);
    --ink: var(--text-primary);
    --muted: var(--text-secondary);
    --soft: var(--bg-surface);
    --line: var(--border-soft);
    --panel: var(--bg-surface);
    --shadow: var(--shadow-soft);
    --blue: var(--accent);
    --green: var(--success);
    --amber: var(--warning);
    --page-vw: 100vw;
    --page-vh: 100svh;
    --u: min(1vw, 1svh);
    --header-h: 7.2svh;
    --edge-x: 3.4vw;
    --hero-inline: 91vw;
    --hero-gap: 6vw;
    --clock-size: min(36vw, 62svh);
    --hero-time-size: min(9.2vw, 16svh);
    --hero-title-size: calc(var(--u) * 4.2);
    --body-copy-size: calc(var(--u) * 3.6);
    --control-size: calc(var(--u) * 5.3);
    --section-title-size: calc(var(--u) * 4.3);
    --card-min: min(100%, max(18vw, 34svh));
    --card-pad: calc(var(--u) * 2.5);
    --card-title-size: calc(var(--u) * 2.15);
    --card-time-size: calc(var(--u) * 5);
    --small-copy-size: calc(var(--u) * 1.85);
    --modal-width: min(92vw, 62svh);
    --radius-sm: calc(var(--u) * 1.1);
    --font-ui: "Inter", system-ui, sans-serif;
    --bs-font-sans-serif: var(--font-ui);
    --bs-body-font-family: var(--font-ui);
    --type-hero-title: 4rem;
    --type-hero-subtitle: 1.25rem;
    --type-h1: 3rem;
    --type-h2: 2.25rem;
    --type-h3: 1.75rem;
    --type-h4: 1.375rem;
    --type-body: 1rem;
    --type-small: 0.875rem;
    --type-caption: 0.75rem;
    --type-time-xl: 6rem;
    --type-time-lg: 4.5rem;
    --type-time-card: 2rem;
    --type-city-name: 1.125rem;
    --type-timezone: 0.8125rem;
}

.shared-city-hero {
    position: relative;
    min-height: clamp(226px, 17vw, 240px);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

.shared-city-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: clamp(226px, 17vw, 240px);
    max-width: min(100%, 42rem);
    padding: clamp(22px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shared-city-hero-copy-reserve-right {
    padding-right: clamp(210px, 25vw, 360px);
}

.shared-city-hero-actions {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 960px) {
    .shared-city-hero,
    .shared-city-hero-copy {
        min-height: 300px;
    }

    .shared-city-hero-copy {
        max-width: none;
        padding: 84px 18px 18px;
        justify-content: end;
    }
}

/* Clock Split page */
.clock-split-page {
    --clock-split-focus: #c04d59;
    --clock-split-short-break: #2d7d5d;
    --clock-split-long-break: #755fca;
    --clock-split-custom: #2b6ccd;
    min-height: var(--page-vh);
    color: var(--text-primary);
    background: var(--bg-page);
    overflow-x: clip;
}

.clock-split-page .site-header {
    position: sticky;
}

.clock-split-shell {
    width: min(100%, 1440px);
    min-height: calc(100dvh - var(--header-h, 72px));
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 2rem);
    display: grid;
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.clock-split-intro,
.clock-split-grid,
.clock-split-feature-strip {
    min-width: 0;
}

.clock-split-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.clock-split-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.3vw, 1rem);
}

.clock-split-button svg,
.clock-split-icon-button svg,
.clock-split-round-button svg,
.clock-split-tip-card svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.clock-split-intro h1 {
    color: var(--text-primary);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
}

.clock-split-intro p {
    margin-top: 0.28rem;
    color: var(--text-secondary);
    font-size: clamp(0.92rem, 1vw, 1.05rem);
    line-height: 1.35;
}

.clock-split-intro-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.clock-split-button {
    min-height: 2.55rem;
    padding: 0 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1;
}

.clock-split-button.primary {
    border-color: color-mix(in srgb, var(--accent) 80%, transparent);
    color: var(--accent-contrast);
    background: var(--accent);
}

.clock-split-button.secondary {
    color: var(--text-primary);
}

.clock-split-button.ghost {
    background: var(--bg-surface);
    box-shadow: none;
}

.clock-split-button.compact {
    min-height: 2.2rem;
    padding-inline: 0.8rem;
}

.clock-split-button.full {
    width: 100%;
}

.clock-split-grid {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(280px, 320px);
    gap: clamp(1rem, 1.6vw, 1.5rem);
    align-items: stretch;
}

.clock-split-stack {
    min-width: 0;
    display: grid;
    gap: clamp(0.85rem, 1.25vw, 1rem);
    align-content: start;
}

.clock-split-card {
    min-width: 0;
    border: 1px solid var(--border-soft);
    border-radius: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

.clock-split-stack .clock-split-card {
    padding: clamp(0.9rem, 1.35vw, 1.1rem);
}

.clock-split-card h2 {
    color: var(--text-primary);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.2;
    font-weight: 700;
}

.clock-split-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.clock-split-link-button,
.clock-split-link-row {
    border: 0;
    color: var(--accent);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 650;
}

.clock-split-link-row {
    width: 100%;
    min-height: 2.35rem;
    margin-top: 0.75rem;
    padding: 0;
    border-top: 1px solid var(--border-soft);
    text-align: left;
}

.clock-split-field {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.42rem;
}

.clock-split-field label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 650;
}

.clock-split-field label span {
    color: var(--text-muted);
    font-weight: 500;
}

.clock-split-field input,
.clock-split-field select,
.clock-split-duration-input {
    width: 100%;
    min-height: 2.55rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.58rem;
    color: var(--text-primary);
    background: var(--bg-surface);
}

.clock-split-field input,
.clock-split-field select {
    padding: 0 0.75rem;
}

.clock-split-duration-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.clock-split-duration-input input {
    min-height: 2.45rem;
    border: 0;
    background: transparent;
}

.clock-split-duration-input span {
    padding-inline: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.clock-split-add-card .clock-split-button {
    margin-top: 1rem;
}

.clock-split-block-list,
.clock-split-summary-list,
.clock-split-upcoming-list,
.clock-split-preset-list {
    padding: 0;
    margin: 0.85rem 0 0;
    display: grid;
    gap: 0.55rem;
    list-style: none;
}

.clock-split-block-row {
    min-width: 0;
    min-height: 3.15rem;
    padding: 0.52rem;
    border: 1px solid color-mix(in srgb, var(--block-color) 20%, transparent);
    border-radius: 0.74rem;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: 0.55rem;
    align-items: center;
    background: color-mix(in srgb, var(--block-color) 10%, var(--bg-surface-strong));
}

.clock-split-block-row.is-active {
    border-color: color-mix(in srgb, var(--block-color) 52%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--block-color) 22%, transparent);
}

.clock-split-drag {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

.clock-split-block-dot,
.clock-split-mini-icon,
.clock-split-preset-icon {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--block-color) 52%, transparent);
    display: inline-grid;
    place-items: center;
    color: var(--block-ink, var(--block-color));
    background: color-mix(in srgb, var(--block-color) 10%, transparent);
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--block-color) 10%, transparent);
}

.clock-split-block-dot svg,
.clock-split-mini-icon svg,
.clock-split-preset-icon svg,
.clock-split-timeline-item > span svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.clock-split-block-copy {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.clock-split-preset-copy {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.clock-split-block-copy strong,
.clock-split-summary-list strong,
.clock-split-upcoming-list strong,
.clock-split-preset-list strong {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.clock-split-block-copy small,
.clock-split-summary-list small,
.clock-split-upcoming-list small,
.clock-split-preset-list small {
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.2;
}

.clock-split-block-copy input {
    width: 5.6rem;
    min-height: 1.8rem;
    padding: 0 0.45rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.45rem;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    font-size: 0.78rem;
}

.clock-split-preset-name-input {
    width: 100%;
    min-height: 2rem;
    padding: 0 0.55rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.45rem;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    font-size: 0.8rem;
}

.clock-split-icon-button,
.clock-split-round-button {
    width: 2.05rem;
    height: 2.05rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.55rem;
    display: inline-grid;
    place-items: center;
    color: var(--text-secondary);
    background: var(--bg-surface);
}

.clock-split-icon-button svg {
    width: 0.98rem;
    height: 0.98rem;
}

.clock-split-icon-button.danger {
    color: var(--danger);
}

.clock-split-card-footer {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.clock-split-card-footer strong {
    color: var(--text-primary);
}

.clock-split-tip-card h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warning);
}

.clock-split-tip-card p {
    margin-top: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.clock-split-visual-card {
    padding: clamp(0.9rem, 1.4vw, 1.2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: clamp(0.8rem, 1.3vw, 1rem);
}

.clock-split-visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.clock-split-segmented {
    min-width: 15rem;
    padding: 0.18rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.6rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--bg-surface);
}

.clock-split-segmented button {
    min-height: 2.1rem;
    border: 0;
    border-radius: 0.45rem;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 650;
}

.clock-split-segmented button.active {
    color: var(--accent-contrast);
    background: var(--accent);
}

.clock-split-clock-wrap {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    align-self: center;
}

.clock-split-clock {
    position: relative;
    width: clamp(240px, 42vw, 520px);
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--bg-surface-strong) 92%, transparent) 0 44%, color-mix(in srgb, var(--bg-surface) 88%, transparent) 64%, color-mix(in srgb, var(--accent) 10%, var(--bg-surface)) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
        0 0 4rem color-mix(in srgb, var(--accent) 10%, transparent),
        inset 0 0 0 1px var(--border-soft),
        inset 0 0 0 0.75rem color-mix(in srgb, var(--bg-surface) 70%, transparent),
        var(--shadow-card);
}

.clock-split-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.clock-split-ring-track,
.clock-split-ring-segment,
.clock-split-active-progress {
    fill: none;
    stroke-width: 8;
}

.clock-split-ring-track {
    stroke: color-mix(in srgb, var(--text-muted) 18%, transparent);
}

.clock-split-ring-segment {
    stroke-linecap: round;
    transition: stroke-width 180ms ease, filter 180ms ease;
}

.clock-split-active-progress {
    stroke-linecap: round;
    stroke-width: 13;
    opacity: 0.92;
    filter: drop-shadow(0 0 0.48rem color-mix(in srgb, var(--block-color) 42%, transparent));
    transition: stroke-dasharray 260ms linear, stroke-dashoffset 260ms linear, opacity 180ms ease;
}

.clock-split-clock:not(.is-running) .clock-split-active-progress {
    opacity: 0.55;
}

.clock-split-ring-segment.active {
    stroke-width: 11;
    filter: drop-shadow(0 0 0.28rem color-mix(in srgb, var(--block-color) 34%, transparent));
}

.clock-split-boundary-dot,
.clock-split-progress-dot {
    stroke: var(--bg-surface-strong);
    stroke-width: 2;
}

.clock-split-progress-dot {
    fill: var(--block-color);
    transition: cx 260ms linear, cy 260ms linear, r 180ms ease, filter 180ms ease;
}

.clock-split-clock.is-running .clock-split-progress-dot {
    r: 7;
    filter: drop-shadow(0 0 0.42rem color-mix(in srgb, var(--block-color) 48%, transparent));
}

.clock-split-minute-ticks {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    pointer-events: none;
}

.clock-split-minute-ticks span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 0.38rem;
    border-radius: 999px;
    transform: translateX(-50%) rotate(var(--tick-rotation));
    transform-origin: 50% calc((clamp(240px, 42vw, 520px) * 0.42));
    background: color-mix(in srgb, var(--text-primary) 34%, transparent);
}

.clock-split-minute-ticks span.major {
    width: 2px;
    height: 0.72rem;
    background: color-mix(in srgb, var(--text-primary) 64%, transparent);
}

.clock-split-hourmarks {
    position: absolute;
    inset: 10.5%;
    pointer-events: none;
}

.clock-split-hourmarks span {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--text-primary);
    font-size: clamp(0.82rem, 1.3vw, 1rem);
    font-weight: 650;
}

.clock-split-clock-center {
    position: relative;
    z-index: 2;
    width: 62%;
    display: grid;
    place-items: center;
    gap: 0.48rem;
    text-align: center;
}

.clock-split-clock-center > span {
    color: var(--text-primary);
    font-size: clamp(0.86rem, 1.2vw, 1rem);
    font-weight: 650;
}

.clock-split-clock-center > strong {
    color: var(--text-primary);
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 0.95;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
}

.clock-split-clock-center > strong.is-ticking {
    animation: clockSplitTimerTick 260ms ease-out;
}

@keyframes clockSplitTimerTick {
    0% {
        transform: translateY(0) scale(1);
    }

    45% {
        transform: translateY(-0.04em) scale(1.018);
        text-shadow: 0 0 1.15rem color-mix(in srgb, var(--block-color) 42%, transparent);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.clock-split-clock-center > small {
    padding: 0.24rem 0.62rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-surface);
    font-size: 0.78rem;
}

.clock-split-play-button {
    width: clamp(3.3rem, 5vw, 4.2rem);
    height: clamp(3.3rem, 5vw, 4.2rem);
    border: 0;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--clock-split-focus) 84%, #fff), var(--clock-split-focus));
    box-shadow: 0 0.85rem 2rem color-mix(in srgb, var(--clock-split-focus) 20%, transparent);
}

.clock-split-play-button svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.clock-split-callout {
    position: absolute;
    z-index: 3;
    max-width: 9.5rem;
    padding: 0.58rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--block-color) 28%, transparent);
    border-radius: 0.7rem;
    color: var(--block-ink, var(--block-color));
    background: color-mix(in srgb, var(--block-color) 8%, var(--bg-surface-strong));
    box-shadow: var(--shadow-card);
    font-size: 0.78rem;
    line-height: 1.25;
}

.clock-split-callout strong,
.clock-split-callout span {
    display: block;
}

.clock-split-callout.left {
    left: 2%;
    top: 44%;
}

.clock-split-callout.right {
    right: 2%;
}

.clock-split-callout.right.top {
    top: 24%;
}

.clock-split-callout.right.bottom {
    bottom: 35%;
}

.clock-split-timeline {
    min-height: clamp(17rem, 40vw, 31rem);
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    background: var(--bg-surface);
}

.clock-split-timeline-item {
    flex: var(--block-span) 1 4rem;
    min-width: 4rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--block-color) 34%, transparent);
    border-radius: 0.8rem;
    display: grid;
    align-content: end;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--block-color) 14%, var(--bg-surface-strong));
}

.clock-split-timeline-item.is-active {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--block-color) 34%, transparent);
}

.clock-split-timeline-item span {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--block-ink, var(--block-color));
    background: color-mix(in srgb, var(--block-color) 10%, transparent);
}

.clock-split-timeline-item > span {
    width: 2rem;
    height: 2rem;
}

.clock-split-timeline-item strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.clock-split-timeline-item small {
    color: var(--text-secondary);
}

.clock-split-live-status {
    min-height: 1.2rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.clock-split-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 2vw, 2.5rem);
}

.clock-split-round-button {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.75rem;
}

.clock-split-cycle-control {
    min-height: 2.55rem;
    padding: 0.24rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.7rem;
    display: inline-grid;
    grid-template-columns: auto 2rem 2rem 2rem auto;
    align-items: center;
    gap: 0.15rem;
    color: var(--text-secondary);
    background: var(--bg-surface);
    font-size: 0.86rem;
}

.clock-split-cycle-control span {
    padding-inline: 0.5rem;
}

.clock-split-cycle-control button {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.45rem;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
}

.clock-split-cycle-control strong {
    text-align: center;
    color: var(--text-primary);
}

.clock-split-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.clock-split-stats section {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.75rem;
    background: var(--bg-surface);
}

.clock-split-stats span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.clock-split-stats strong {
    display: block;
    margin-top: 0.24rem;
    color: var(--text-primary);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.clock-split-summary-list li,
.clock-split-upcoming-list li,
.clock-split-preset-list li {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.clock-split-preset-list li {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}

.clock-split-empty-row {
    grid-template-columns: minmax(0, 1fr) !important;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.clock-split-summary-list b,
.clock-split-upcoming-list b {
    color: var(--block-ink, var(--block-color));
    font-size: 0.82rem;
    font-weight: 750;
    white-space: nowrap;
}

.clock-split-mini-icon,
.clock-split-preset-icon {
    width: 2rem;
    height: 2rem;
}

.clock-split-preset-icon {
    border-color: color-mix(in srgb, var(--block-color) 52%, transparent);
    color: var(--block-ink, var(--block-color));
    background: color-mix(in srgb, var(--block-color) 10%, transparent);
}

.clock-split-mini-icon.cycle {
    color: var(--text-secondary);
    background: var(--bg-surface);
    border-color: var(--border-soft);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 750;
}

.clock-split-feature-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.3vw, 1rem);
}

.clock-split-feature-strip article {
    min-width: 0;
    padding: clamp(0.95rem, 1.35vw, 1.1rem);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

.clock-split-feature-strip h2 {
    color: var(--text-primary);
    font-size: 1rem;
}

.clock-split-feature-strip p {
    margin-top: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.45;
}

:root[data-theme="dark"] .clock-split-page {
    background: var(--bg-page-gradient);
}

:root[data-theme="dark"] .clock-split-card,
:root[data-theme="dark"] .clock-split-feature-strip article,
:root[data-theme="dark"] .clock-split-button {
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .clock-split-button.primary {
    border-color: color-mix(in srgb, var(--accent) 80%, transparent);
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .clock-split-field input,
:root[data-theme="dark"] .clock-split-field select,
:root[data-theme="dark"] .clock-split-duration-input,
:root[data-theme="dark"] .clock-split-segmented,
:root[data-theme="dark"] .clock-split-stats section,
:root[data-theme="dark"] .clock-split-cycle-control,
:root[data-theme="dark"] .clock-split-round-button,
:root[data-theme="dark"] .clock-split-icon-button,
:root[data-theme="dark"] .clock-split-timeline {
    background: var(--bg-surface-strong);
}

@media (max-width: 1100px) {
    .clock-split-grid {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    }

    .clock-split-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .clock-split-shell {
        padding: clamp(0.75rem, 4vw, 1.5rem);
    }

    .clock-split-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .clock-split-intro-actions {
        width: 100%;
    }

    .clock-split-intro-actions .clock-split-button {
        flex: 1 1 0;
    }

    .clock-split-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .clock-split-visual-card {
        order: 1;
    }

    .clock-split-right {
        order: 2;
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .clock-split-left {
        order: 3;
    }

    .clock-split-clock {
        width: clamp(240px, 72vw, 520px);
    }

    .clock-split-feature-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .clock-split-page .site-header {
        position: relative;
    }

    .clock-split-title-row {
        align-items: flex-start;
    }

    .clock-split-intro h1 {
        font-size: clamp(1.8rem, 9vw, 2.25rem);
    }

    .clock-split-intro-actions .clock-split-button {
        padding-inline: 0.65rem;
        font-size: 0.78rem;
    }

    .clock-split-visual-head {
        align-items: stretch;
        flex-direction: column;
    }

    .clock-split-segmented {
        width: 100%;
        min-width: 0;
    }

    .clock-split-button.compact {
        width: 100%;
    }

    .clock-split-callout {
        display: none;
    }

    .clock-split-clock {
        width: clamp(240px, 82vw, 340px);
    }

    .clock-split-minute-ticks span {
        transform-origin: 50% calc((clamp(240px, 82vw, 340px) * 0.42));
    }

    .clock-split-hourmarks span {
        font-size: 0.78rem;
    }

    .clock-split-clock-center {
        width: 64%;
        gap: 0.34rem;
    }

    .clock-split-clock-center > strong {
        font-size: clamp(2.8rem, 13vw, 4.1rem);
    }

    .clock-split-play-button {
        width: 3.2rem;
        height: 3.2rem;
    }

    .clock-split-controls {
        gap: 0.55rem;
        justify-content: space-between;
    }

    .clock-split-cycle-control {
        grid-template-columns: auto 1.9rem 1.6rem 1.9rem;
    }

    .clock-split-cycle-control span:last-child {
        display: none;
    }

    .clock-split-stats,
    .clock-split-feature-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .clock-split-block-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        gap: 0.45rem;
    }

    .clock-split-timeline {
        min-height: auto;
        flex-direction: column;
    }

    .clock-split-timeline-item {
        min-height: 4.5rem;
    }

    .clock-split-button.primary.full {
        min-height: 2.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clock-split-ring-segment,
    .clock-split-active-progress,
    .clock-split-progress-dot {
        transition: none;
    }

    .clock-split-clock-center > strong.is-ticking {
        animation: none;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-page: #07111f;
    --bg-page-gradient:
        radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.18), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(125, 211, 252, 0.10), transparent 24%),
        linear-gradient(180deg, #07111f 0%, #0b1628 48%, #0e1b31 100%);
    --bg-page-soft: #0d1829;
    --bg-surface: #101c2f;
    --bg-surface-strong: #132238;
    --bg-surface-soft: #0d1829;
    --bg-surface-muted: #17263d;
    --bg-elevated: #17263d;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #06111f;
    --border-soft: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.28);
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-soft: rgba(96, 165, 250, 0.14);
    --accent-contrast: #06111f;
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.14);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.14);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --footer-bg: #06111f;
    --footer-text: #f8fafc;
    --footer-muted: #cbd5e1;
    --footer-heading: #93c5fd;
    --footer-link-hover: #bfdbfe;
    --footer-border: rgba(148, 163, 184, 0.24);
    --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.34);
    --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.28);
}

@supports (height: 100dvh) {
    :root {
        --page-vw: 100dvw;
        --page-vh: 100dvh;
        --u: min(1dvw, 1dvh);
    }
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: var(--page-vh);
    overflow-x: clip;
    scroll-behavior: smooth;
    font-family: var(--font-ui);
}

body {
    width: 100%;
    min-height: var(--page-vh);
    overflow-x: clip;
    margin: 0;
    color: var(--ink);
    background: var(--bg-page);
    font-family: var(--font-ui);
    letter-spacing: 0;
}

button,
input,
select,
textarea,
optgroup {
    font: inherit;
    letter-spacing: 0;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

h1 {
    font-size: var(--type-h1);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
}

h2 {
    font-size: var(--type-h2);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
}

h3 {
    font-size: var(--type-h3);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: 0;
}

h4 {
    font-size: var(--type-h4);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
}

p {
    font-size: var(--type-body);
    line-height: 1.6;
    font-weight: 400;
}

.hero-title {
    font-size: var(--type-hero-title);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0;
}

.hero-subtitle {
    font-size: var(--type-hero-subtitle);
    line-height: 1.6;
    font-weight: 400;
}

.small-text {
    font-size: var(--type-small);
    line-height: 1.5;
}

.caption {
    font-size: var(--type-caption);
    line-height: 1.4;
    letter-spacing: 0;
}

.time-display-xl {
    font-size: var(--type-time-xl);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}

.time-display-lg {
    font-size: var(--type-time-lg);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}

.time-card-time {
    font-size: var(--type-time-card);
    line-height: 1.1;
    font-weight: 600;
}

.city-name {
    font-size: var(--type-city-name);
    line-height: 1.3;
    font-weight: 600;
}

.timezone-label {
    font-size: var(--type-timezone);
    line-height: 1.3;
    font-weight: 500;
}

@media (max-width: 768px) {
    :root {
        --type-hero-title: 2.625rem;
        --type-h1: 2.25rem;
        --type-h2: 1.75rem;
        --type-h3: 1.375rem;
        --type-body: 0.9375rem;
        --type-time-xl: 3.5rem;
        --type-time-lg: 3rem;
        --type-time-card: 1.625rem;
    }
}

h1:focus {
    outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.world-time-page {
    min-height: var(--page-vh);
    width: 100%;
    overflow-x: clip;
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: var(--page-vh);
    padding: var(--header-h) var(--edge-x) 4svh;
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(247, 250, 253, 0.72) 0%, rgba(239, 244, 249, 0.5) 43%, rgba(59, 79, 101, 0.36) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(13, 30, 49, 0.3)),
        url("/images/hero-misty-lake.png");
    background-position: center;
    background-size: cover;
}

.hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 28%;
    z-index: -1;
    content: "";
    background: linear-gradient(180deg, rgba(237, 244, 249, 0), rgba(20, 36, 53, 0.45));
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    min-height: var(--header-h);
    padding: 0 var(--edge-x);
    display: grid;
    grid-template-columns: minmax(22vw, 1fr) auto minmax(11vw, 1fr);
    align-items: center;
    gap: calc(var(--u) * 2);
    border-bottom: 1px solid rgba(93, 112, 137, 0.2);
    background: rgba(244, 248, 252, 0.75);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 1.15);
    color: #334155;
    font-size: calc(var(--u) * 2.65);
    font-weight: 500;
    white-space: nowrap;
}

.brand-mark {
    width: calc(var(--u) * 5.1);
    height: calc(var(--u) * 3.35);
    flex: 0 0 auto;
    color: #f2a531;
}

.brand-mark svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.brand-sun-disk {
    fill: currentColor;
    stroke: none;
}

.brand-sun-arc,
.brand-horizon-line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-sun-arc {
    stroke-width: 3.1;
}

.brand-horizon-line {
    stroke-width: 2.4;
}

.brand-horizon-mid {
    opacity: 0.86;
}

.brand-horizon-low {
    opacity: 0.62;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 7.1);
}

.nav-tab {
    min-height: calc(var(--u) * 4.2);
    padding: 0 calc(var(--u) * 0.5);
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #253043;
    background: transparent;
    font-size: calc(var(--u) * 2.05);
    font-weight: 350;
    white-space: nowrap;
}

.nav-tab.active {
    color: #101827;
}

.nav-tab:not(.active) {
    color: rgba(37, 48, 67, 0.82);
}

.nav-tab:hover {
    color: var(--blue);
}

.icon-button {
    width: var(--control-size);
    height: var(--control-size);
    border: 1px solid rgba(91, 110, 133, 0.13);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #40516a;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 5.2) rgba(34, 48, 70, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.icon-button:hover {
    color: var(--blue);
    transform: translateY(-1px);
    box-shadow: 0 calc(var(--u) * 3.2) calc(var(--u) * 6.8) rgba(34, 48, 70, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.header-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 1.5);
}

.fullscreen-button svg {
    width: calc(var(--u) * 2.1);
    height: calc(var(--u) * 2.1);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.world-clock-fullscreen-button {
    position: absolute;
    top: calc(var(--header-h) + clamp(0.85rem, 2svh, 1.3rem));
    right: var(--edge-x);
    z-index: 6;
    width: clamp(2.6rem, min(3.8vw, 5.8svh), 3.4rem);
    height: clamp(2.6rem, min(3.8vw, 5.8svh), 3.4rem);
    color: #10213c;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(1.12);
}

.world-clock-fullscreen-button svg {
    width: clamp(1.15rem, min(1.5vw, 2.2svh), 1.4rem);
    height: clamp(1.15rem, min(1.5vw, 2.2svh), 1.4rem);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.world-clock-fullscreen-button .exit-fullscreen-icon {
    display: none;
}

.add-city-button {
    justify-self: end;
    font-size: calc(var(--u) * 3);
    line-height: 1;
}

.hero-layout {
    width: min(100%, var(--hero-inline));
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--clock-size);
    align-items: center;
    gap: var(--hero-gap);
}

.hero-copy {
    min-width: 0;
    padding-left: calc(var(--u) * 0.6);
}

.location-line {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    margin-bottom: calc(var(--u) * 4.7);
    color: #101827;
}

.location-line svg {
    width: calc(var(--u) * 3.7);
    height: calc(var(--u) * 3.7);
    flex: 0 0 auto;
    fill: none;
    stroke: #526074;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.location-line h1 {
    min-width: 0;
    color: #111827;
    font-size: var(--hero-title-size);
    font-weight: 620;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.digital-time {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: calc(var(--u) * 2);
    color: #070d1c;
    white-space: nowrap;
}

.time-digits {
    font-size: var(--hero-time-size);
    font-weight: 780;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
}

.time-meridiem {
    font-size: calc(var(--hero-time-size) * 0.35);
    font-weight: 500;
    line-height: 1;
}

.hero-date {
    margin-top: calc(var(--u) * 5.5);
    color: #435066;
    font-size: var(--body-copy-size);
    font-weight: 460;
    line-height: 1.25;
}

.hero-meta {
    margin-top: calc(var(--u) * 4);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 1.6);
}

.world-clock-hero .hero-meta {
    gap: calc(var(--u) * 1.35);
}

.hero-meta span,
.offset-pill {
    display: inline-flex;
    min-height: calc(var(--u) * 5.3);
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--u) * 2.6);
    border: 1px solid rgba(88, 105, 126, 0.12);
    border-radius: 999px;
    color: #4b586e;
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-size: calc(var(--u) * 2.05);
    font-weight: 530;
}

.world-clock-hero .hero-meta span {
    max-width: 100%;
    white-space: nowrap;
    min-height: calc(var(--u) * 4.7);
    padding: 0 calc(var(--u) * 2.35);
    border-color: rgba(37, 99, 235, 0.16);
    color: #1f4f8f;
    background: rgba(255, 255, 255, 0.64);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 calc(var(--u) * 1.5) calc(var(--u) * 4.2) rgba(30, 64, 175, 0.08);
    backdrop-filter: blur(12px);
}

.clock-wrap {
    justify-self: center;
    width: min(100%, var(--clock-size));
    aspect-ratio: 1;
}

.analog-clock {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1) 38%, rgba(185, 199, 216, 0.28) 100%);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(23, 36, 52, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 calc(var(--u) * -7.2) calc(var(--u) * 14.4) rgba(47, 65, 85, 0.16);
    backdrop-filter: blur(12px);
}

.clock-tick {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    transform: rotate(var(--tick-rotation));
}

.clock-tick::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: calc(var(--clock-size) * 0.017);
    content: "";
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}

.clock-tick.major::before {
    width: calc(var(--clock-size) * 0.009);
    height: calc(var(--clock-size) * 0.052);
    background: rgba(255, 255, 255, 0.92);
}

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 2;
    border-radius: 999px;
    transform-origin: 50% 100%;
}

.clock-hand.hour {
    width: calc(var(--clock-size) * 0.02);
    height: 27%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 16px rgba(30, 42, 58, 0.12);
}

.clock-hand.minute {
    width: calc(var(--clock-size) * 0.02);
    height: 40%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 18px rgba(30, 42, 58, 0.12);
}

.clock-hand.second {
    width: calc(var(--clock-size) * 0.007);
    height: 44%;
    background: var(--blue);
    box-shadow: 0 0 14px rgba(11, 125, 240, 0.26);
}

.clock-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: calc(var(--clock-size) * 0.052);
    height: calc(var(--clock-size) * 0.052);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #f8fbff;
    box-shadow: 0 0 0 calc(var(--clock-size) * 0.01) rgba(255, 255, 255, 0.34), 0 calc(var(--u) * 1.4) calc(var(--u) * 3.6) rgba(20, 35, 52, 0.16);
}

.explore-link {
    justify-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 2);
    color: rgba(255, 255, 255, 0.94);
    font-size: calc(var(--u) * 2.4);
    font-weight: 460;
    text-shadow: 0 2px 8px rgba(8, 18, 29, 0.28);
}

.explore-icon {
    width: calc(var(--u) * 6.7);
    height: calc(var(--u) * 6.7);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 calc(var(--u) * 2.4) calc(var(--u) * 5.2) rgba(18, 32, 48, 0.16);
    backdrop-filter: blur(10px);
}

.explore-icon svg {
    width: calc(var(--u) * 3.4);
    height: calc(var(--u) * 3.4);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.7;
}

.zones-section {
    position: relative;
    padding: 6svh var(--edge-x) 7svh;
    background:
        radial-gradient(circle at top left, rgba(216, 230, 238, 0.85), transparent 32vw),
        linear-gradient(180deg, #f6f8fb 0%, #e8eef4 100%);
}

.section-head {
    width: min(100%, var(--hero-inline));
    margin: 0 auto 3svh;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: calc(var(--u) * 2.7);
}

.eyebrow {
    margin-bottom: calc(var(--u) * 0.8);
    color: var(--blue);
    font-size: calc(var(--u) * 1.55);
    font-weight: 750;
    line-height: 1.1;
    text-transform: uppercase;
}

.section-head h2,
.city-picker h2 {
    color: #111827;
    font-size: var(--section-title-size);
    font-weight: 690;
    line-height: 1.1;
}

.secondary-button {
    min-height: calc(var(--u) * 6.1);
    padding: 0 calc(var(--u) * 2.4);
    border: 1px solid rgba(85, 103, 124, 0.18);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 1.1);
    color: #253043;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4.8) rgba(40, 58, 80, 0.1);
    font-size: calc(var(--u) * 2);
    font-weight: 650;
}

.secondary-button:hover {
    color: var(--blue);
    border-color: rgba(11, 125, 240, 0.28);
}

.city-grid {
    width: min(100%, var(--hero-inline));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
    gap: calc(var(--u) * 2.2);
}

.city-card {
    position: relative;
    min-width: 0;
    min-height: max(22svh, calc(var(--u) * 29));
    border: 1px solid rgba(77, 93, 113, 0.16);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 calc(var(--u) * 3.4) calc(var(--u) * 8.8) rgba(40, 58, 80, 0.11);
}

.city-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--u) * 0.6);
    content: "";
    background: var(--city-accent);
}

.city-card.selected {
    border-color: rgba(11, 125, 240, 0.42);
    box-shadow: 0 20px 52px rgba(11, 125, 240, 0.18);
}

.city-select {
    width: 100%;
    min-height: max(22svh, calc(var(--u) * 29));
    padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) * 1.05) calc(var(--card-pad) * 1.2);
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    color: inherit;
    background: transparent;
    transition: background 160ms ease;
}

.city-select:hover {
    background: color-mix(in srgb, var(--city-accent) 8%, rgba(255, 255, 255, 0.46));
}

.city-topline {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--u) * 1.5);
}

.city-topline span:first-child {
    min-width: 0;
}

.city-topline strong {
    display: block;
    color: #172033;
    font-size: var(--card-title-size);
    font-weight: 720;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.city-topline small {
    display: block;
    margin-top: calc(var(--u) * 0.55);
    color: #637086;
    font-size: var(--small-copy-size);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.city-card .offset-pill {
    min-height: calc(var(--u) * 4.1);
    padding: 0 calc(var(--u) * 1.4);
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--city-accent) 26%, rgba(88, 105, 126, 0.14));
    color: color-mix(in srgb, var(--city-accent) 68%, #334155);
    background: color-mix(in srgb, var(--city-accent) 10%, rgba(237, 243, 248, 0.88));
    font-size: calc(var(--u) * 1.45);
}

.city-time {
    margin-top: calc(var(--u) * 3.4);
    display: flex;
    align-items: baseline;
    gap: calc(var(--u) * 1);
    color: #0a1020;
    font-variant-numeric: tabular-nums;
}

.city-time span {
    font-size: var(--card-time-size);
    font-weight: 760;
    line-height: 1;
}

.city-time small {
    color: #4d596d;
    font-size: calc(var(--u) * 2.1);
    font-weight: 620;
}

.city-date {
    margin-top: calc(var(--u) * 1.9);
    color: #536073;
    font-size: calc(var(--u) * 1.95);
}

.city-difference {
    margin-top: auto;
    color: var(--city-accent);
    font-size: calc(var(--u) * 1.8);
    font-weight: 720;
}

.city-remove {
    position: absolute;
    right: calc(var(--u) * 1.25);
    bottom: calc(var(--u) * 1.25);
    width: calc(var(--u) * 4.4);
    height: calc(var(--u) * 4.4);
    border: 1px solid rgba(94, 111, 132, 0.18);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #607089;
    background: rgba(244, 248, 252, 0.84);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3.2) rgba(15, 23, 42, 0.08);
    transition:
        border-color 160ms ease,
        color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.city-remove:hover:not(:disabled) {
    border-color: rgba(220, 76, 76, 0.42);
    color: #fff;
    background: #dc4c4c;
    transform: translateY(-1px);
}

.city-remove:disabled {
    opacity: 0.32;
}

.modal-layer {
    position: fixed;
    inset: 0;
    z-index: 20;
    padding: calc(var(--u) * 2.2);
    display: grid;
    place-items: center;
    background: rgba(17, 29, 43, 0.38);
    backdrop-filter: blur(9px);
}

.city-picker {
    width: min(100%, var(--modal-width));
    max-height: min(82svh, calc(var(--page-vh) - calc(var(--u) * 4.4)));
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(249, 252, 255, 0.95);
    box-shadow: var(--shadow);
}

.picker-head {
    padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2.1);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--u) * 2.2);
}

.close-button {
    width: calc(var(--u) * 5.8);
    height: calc(var(--u) * 5.8);
    flex: 0 0 auto;
    font-size: calc(var(--u) * 2.2);
    text-transform: uppercase;
}

.search-box {
    position: relative;
    margin: 0 calc(var(--u) * 3) calc(var(--u) * 2.1);
    display: block;
}

.search-box svg {
    position: absolute;
    left: calc(var(--u) * 2.2);
    top: 50%;
    width: calc(var(--u) * 2.35);
    height: calc(var(--u) * 2.35);
    transform: translateY(-50%);
    fill: none;
    stroke: #6a778c;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    pointer-events: none;
}

.search-box input {
    width: 100%;
    min-height: calc(var(--u) * 6.6);
    padding: 0 calc(var(--u) * 2.2) 0 calc(var(--u) * 6.2);
    border: 1px solid rgba(91, 108, 130, 0.2);
    border-radius: 999px;
    color: #111827;
    background: #fff;
    font-size: calc(var(--u) * 2.1);
}

.search-box input::placeholder {
    color: #7a8698;
}

.picker-list {
    padding: 0 calc(var(--u) * 3) calc(var(--u) * 3);
    display: grid;
    gap: calc(var(--u) * 1.3);
    overflow: auto;
}

.picker-option {
    min-height: calc(var(--u) * 9.3);
    padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
    border: 1px solid rgba(91, 108, 130, 0.14);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--u) * 2.2);
    color: #172033;
    background: rgba(255, 255, 255, 0.78);
    text-align: left;
}

.picker-option:hover {
    border-color: rgba(11, 125, 240, 0.32);
    background: #fff;
}

.picker-option strong,
.picker-option small {
    display: block;
    overflow-wrap: anywhere;
}

.picker-option strong {
    font-size: calc(var(--u) * 2.1);
    line-height: 1.2;
}

.picker-option small {
    margin-top: calc(var(--u) * 0.5);
    color: #657287;
    font-size: var(--small-copy-size);
}

.picker-option > span:last-child {
    flex: 0 0 auto;
    color: var(--blue);
    font-size: calc(var(--u) * 1.8);
    font-weight: 720;
}

.empty-state {
    padding: calc(var(--u) * 3) 0;
    color: #617086;
    font-size: calc(var(--u) * 2);
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.blazor-error-boundary {
    padding: calc(var(--u) * 2);
    color: white;
    background: #b32121;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.timer-hero {
    position: relative;
    isolation: isolate;
    min-height: var(--page-vh);
    padding: calc(var(--header-h) + 5svh) var(--edge-x) 6svh;
    display: grid;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(247, 250, 253, 0.76) 0%, rgba(239, 244, 249, 0.54) 44%, rgba(54, 75, 97, 0.38) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(13, 30, 49, 0.32)),
        url("/images/hero-misty-lake.png");
    background-position: center;
    background-size: cover;
}

.timer-hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    z-index: -1;
    content: "";
    background: linear-gradient(180deg, rgba(237, 244, 249, 0), rgba(20, 36, 53, 0.38));
}

.timer-shell {
    width: min(100%, var(--hero-inline));
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, min(48vw, 78svh));
    align-items: center;
    justify-content: center;
}

.timer-console {
    min-width: 0;
    padding: calc(var(--u) * 3.2);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-sm);
    display: grid;
    gap: calc(var(--u) * 2.2);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.timer-dial {
    position: relative;
    width: min(28vw, 48svh);
    aspect-ratio: 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.timer-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(var(--blue) var(--timer-progress), rgba(255, 255, 255, 0.46) 0deg),
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.42), rgba(175, 191, 209, 0.26) 72%);
    box-shadow:
        0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(23, 36, 52, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.timer-ring::before {
    position: absolute;
    inset: 6%;
    content: "";
    border-radius: inherit;
    background: rgba(248, 251, 255, 0.82);
    box-shadow: inset 0 calc(var(--u) * -2.4) calc(var(--u) * 6) rgba(62, 79, 99, 0.1);
}

.timer-display {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    gap: calc(var(--u) * 1.2);
    color: #07101f;
    text-align: center;
}

.timer-display strong {
    font-size: min(5.3vw, 9.4svh);
    font-weight: 780;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
}

.timer-status {
    color: #536073;
    font-size: calc(var(--u) * 2.15);
    font-weight: 700;
    text-transform: uppercase;
}

.duration-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--u) * 1.4);
}

.duration-stepper {
    min-width: 0;
    padding: calc(var(--u) * 1.4);
    border: 1px solid rgba(88, 105, 126, 0.14);
    border-radius: var(--radius-sm);
    display: grid;
    grid-template-columns: calc(var(--u) * 4.4) 1fr calc(var(--u) * 4.4);
    align-items: center;
    gap: calc(var(--u) * 0.9);
    background: rgba(255, 255, 255, 0.64);
}

.duration-stepper button {
    width: calc(var(--u) * 4.4);
    height: calc(var(--u) * 4.4);
    border: 1px solid rgba(91, 110, 133, 0.14);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #40516a;
    background: rgba(255, 255, 255, 0.88);
    font-weight: 760;
    line-height: 1;
}

.duration-stepper button:hover:not(:disabled) {
    color: var(--blue);
}

.duration-stepper output {
    min-width: 0;
    color: #07101f;
    font-size: calc(var(--u) * 3.9);
    font-weight: 770;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.duration-stepper span {
    grid-column: 1 / -1;
    color: #5e6b7f;
    font-size: calc(var(--u) * 1.55);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.timer-presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u) * 1.1);
}

.timer-presets button,
.timer-action {
    min-height: calc(var(--u) * 5.5);
    border: 1px solid rgba(85, 103, 124, 0.16);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #253043;
    background: rgba(255, 255, 255, 0.78);
    font-size: calc(var(--u) * 1.9);
    font-weight: 720;
}

.timer-presets button {
    padding: 0 calc(var(--u) * 2.3);
}

.timer-presets button:hover:not(:disabled),
.timer-action:hover:not(:disabled) {
    color: var(--blue);
    border-color: rgba(11, 125, 240, 0.3);
}

.timer-actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: calc(var(--u) * 1.4);
}

.timer-action {
    min-height: calc(var(--u) * 6.5);
}

.timer-action.primary {
    color: #fff;
    border-color: rgba(11, 125, 240, 0.2);
    background: var(--blue);
    box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 5.4) rgba(11, 125, 240, 0.22);
}

.timer-action.primary:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(11, 125, 240, 0.28);
    background: #0873df;
}

.duration-stepper button:disabled,
.timer-presets button:disabled,
.timer-action:disabled {
    opacity: 0.5;
}

@media (max-width: 1180px) {
    :root {
        --hero-gap: 4.6vw;
        --clock-size: min(34vw, 58svh);
        --hero-time-size: min(8.4vw, 14.5svh);
        --hero-title-size: calc(var(--u) * 3.9);
        --body-copy-size: calc(var(--u) * 3.2);
        --control-size: calc(var(--u) * 5.05);
        --card-min: min(100%, max(24vw, 30svh));
    }

    .hero-layout {
        grid-template-columns: minmax(0, 1fr) var(--clock-size);
    }

    .timer-shell {
        grid-template-columns: minmax(0, min(52vw, 74svh));
    }

    .timer-dial {
        width: min(31vw, 46svh);
    }
}

@media (max-width: 920px) {
    :root {
        --header-h: 10svh;
        --edge-x: 3.6vw;
        --hero-inline: 93vw;
        --hero-gap: 4.2svh;
        --clock-size: min(54vw, 34svh);
        --hero-time-size: min(13.6vw, 8.8svh);
        --hero-title-size: min(5.4vw, 3.6svh);
        --body-copy-size: min(3.8vw, 2.7svh);
        --control-size: min(5.1vw, 4.1svh);
        --section-title-size: min(5.2vw, 3.6svh);
        --card-min: min(100%, max(34vw, 24svh));
        --card-pad: min(2.8vw, 2svh);
        --card-title-size: min(2.9vw, 2.05svh);
        --card-time-size: min(6.1vw, 4.4svh);
        --small-copy-size: min(2.3vw, 1.6svh);
        --modal-width: min(92vw, 68svh);
    }

    .site-header {
        min-height: var(--header-h);
        padding: 0 var(--edge-x);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        column-gap: calc(var(--u) * 2.2);
        row-gap: calc(var(--u) * 0.8);
    }

    .brand {
        flex: 1 1 auto;
        font-size: min(2.75vw, 1.9svh);
    }

    .top-nav {
        flex: 1 0 100%;
        order: 3;
        width: 100%;
        justify-content: center;
        gap: calc(var(--u) * 3.1);
        padding-bottom: calc(var(--u) * 0.9);
        overflow-x: auto;
    }

    .header-actions {
        position: fixed;
        top: calc(var(--u) * 1.8);
        right: var(--edge-x);
        z-index: 30;
    }

    .nav-tab {
        font-size: min(2.55vw, 1.8svh);
    }

    .hero {
        padding: var(--header-h) var(--edge-x) 3svh;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: var(--hero-gap);
        align-content: center;
        justify-items: center;
        text-align: center;
    }

    .hero-copy {
        width: fit-content;
        max-width: 100%;
        padding-left: 0;
        justify-self: center;
    }

    .location-line,
    .digital-time,
    .hero-meta {
        justify-content: center;
    }

    .location-line h1 {
        text-align: center;
    }

    .clock-wrap {
        width: min(100%, var(--clock-size));
    }

    .location-line {
        margin-bottom: calc(var(--u) * 2.9);
    }

    .hero-date {
        margin-top: calc(var(--u) * 3.3);
    }

    .timer-hero {
        padding: calc(var(--header-h) + 3.5svh) var(--edge-x) 5svh;
    }

    .timer-shell {
        grid-template-columns: minmax(0, min(100%, 72vw));
        justify-items: center;
        text-align: center;
    }

    .timer-console {
        width: 100%;
    }

    .timer-dial {
        width: min(50vw, 30svh);
    }

    .timer-display strong {
        font-size: min(9vw, 5.8svh);
    }
}

@media (max-width: 640px) {
    :root {
        --header-h: 10.7svh;
        --edge-x: 4.2vw;
        --hero-inline: 92vw;
        --hero-gap: 3.3svh;
        --clock-size: min(68vw, 28svh);
        --hero-time-size: min(16.5vw, 7.2svh);
        --hero-title-size: min(6vw, 3.2svh);
        --body-copy-size: min(4.7vw, 2.55svh);
        --control-size: min(8.4vw, 3.8svh);
        --section-title-size: min(7vw, 3.6svh);
        --card-min: min(100%, 92vw);
        --card-pad: min(4vw, 2svh);
        --card-title-size: min(4.2vw, 2.3svh);
        --card-time-size: min(8.6vw, 4.7svh);
        --small-copy-size: min(3.2vw, 1.75svh);
        --modal-width: 92vw;
    }

    .site-header {
        min-height: var(--header-h);
        row-gap: calc(var(--u) * 0.75);
    }

    .brand {
        gap: calc(var(--u) * 1);
        font-size: min(3.45vw, 2svh);
    }

    .brand-mark {
        width: min(7.1vw, 4.15svh);
        height: min(4.65vw, 2.75svh);
    }

    .header-actions {
        top: calc(var(--u) * 1.55);
        right: var(--edge-x);
    }

    .top-nav {
        justify-content: flex-start;
        gap: calc(var(--u) * 2.25);
        padding-bottom: calc(var(--u) * 0.85);
    }

    .hero {
        min-height: var(--page-vh);
        padding: var(--header-h) var(--edge-x) 2.7svh;
        background-position: 45% center;
    }

    .digital-time {
        gap: calc(var(--u) * 1.45);
    }

    .explore-link {
        gap: calc(var(--u) * 1.5);
    }

    .zones-section {
        padding: 4.8svh var(--edge-x) 5.8svh;
    }

    .section-head {
        align-items: stretch;
        flex-direction: column;
        gap: calc(var(--u) * 2);
    }

    .secondary-button {
        align-self: flex-start;
    }

    .timer-hero {
        padding: calc(var(--header-h) + 2.8svh) var(--edge-x) 4.5svh;
        background-position: 45% center;
    }

    .timer-shell {
        grid-template-columns: minmax(0, 100%);
    }

    .timer-console {
        width: 100%;
        padding: min(5vw, 2.6svh);
        gap: min(4vw, 2.2svh);
    }

    .timer-dial {
        width: min(70vw, 28svh);
    }

    .timer-display strong {
        font-size: min(13vw, 5.9svh);
    }

    .timer-status {
        font-size: min(3.3vw, 1.65svh);
    }

    .duration-grid {
        gap: min(2.4vw, 1.2svh);
    }

    .duration-stepper {
        padding: min(2.6vw, 1.2svh);
        grid-template-columns: 1fr 1fr;
        gap: min(1.5vw, 0.8svh);
    }

    .duration-stepper button {
        width: min(8vw, 3.4svh);
        height: min(8vw, 3.4svh);
    }

    .duration-stepper button:first-of-type {
        grid-column: 1;
        grid-row: 3;
        justify-self: end;
    }

    .duration-stepper button:last-of-type {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
    }

    .duration-stepper output {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: min(7vw, 3.6svh);
    }

    .duration-stepper span {
        grid-row: 2;
        font-size: min(2.5vw, 1.25svh);
    }

    .timer-presets {
        gap: min(2vw, 1svh);
    }

    .timer-presets button,
    .timer-action {
        min-height: min(9vw, 4svh);
        font-size: min(3.3vw, 1.65svh);
    }

    .timer-actions {
        gap: min(2.4vw, 1.2svh);
    }
}

@media (max-width: 390px) {
    :root {
        --hero-time-size: min(15.3vw, 6.8svh);
        --body-copy-size: min(4.5vw, 2.45svh);
        --card-time-size: min(8vw, 4.5svh);
    }

    .top-nav {
        gap: calc(var(--u) * 1.9);
    }

    .nav-tab {
        font-size: min(3.8vw, 1.9svh);
    }
}

.brand {
    color: #0f172a;
    font-weight: 500;
}

.brand-mark {
    padding: 0;
    border-radius: 0;
    color: #f2a531;
    background: transparent;
    box-shadow: none;
}

.brand-mark svg {
    stroke: currentColor;
}

.nav-tab {
    position: relative;
    font-weight: 350;
}

.nav-tab.active::after {
    position: absolute;
    left: 50%;
    bottom: calc(var(--u) * -1.35);
    width: 100%;
    height: max(2px, calc(var(--u) * 0.42));
    content: "";
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    background: #2d91f3;
}

.header-tool-button,
.header-profile-button {
    width: calc(var(--u) * 4.8);
    height: calc(var(--u) * 4.8);
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #1f2c3e;
    background: transparent;
}

.header-profile-button {
    border: 1px solid rgba(61, 82, 108, 0.14);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.2) rgba(35, 53, 75, 0.08);
}

.header-tool-button svg,
.header-profile-button svg {
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.6);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.timer-page {
    --timer-panel-width: min(58vw, 76svh);
    --timer-dial-size: min(36vw, 48svh);
    --timer-blue: #2f8df2;
}

.timer-page .site-header {
    min-height: 8svh;
    background: rgba(251, 253, 255, 0.84);
    backdrop-filter: blur(20px);
    border-bottom-color: rgba(77, 101, 130, 0.14);
}

.timer-page .top-nav {
    gap: min(7vw, 9svh);
}

.timer-hero {
    padding: calc(8svh + 3.9svh) var(--edge-x) 3.2svh;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(239, 247, 255, 0.46) 48%, rgba(224, 241, 255, 0.44) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(224, 237, 248, 0.36)),
        url("/images/hero-misty-lake.png");
    background-position: center 48%;
}

.timer-hero::after {
    height: 36%;
    background: linear-gradient(180deg, rgba(238, 247, 255, 0), rgba(238, 247, 255, 0.46));
}

.timer-shell {
    width: min(100%, var(--hero-inline));
    grid-template-columns: minmax(0, var(--timer-panel-width));
}

.timer-console {
    width: 100%;
    min-height: auto;
    padding: min(2.55vw, 3.7svh) min(2.7vw, 4.1svh);
    border-color: rgba(255, 255, 255, 0.7);
    border-radius: min(1.1vw, 2svh);
    gap: min(1.25vw, 1.78svh);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 250, 255, 0.62)),
        rgba(255, 255, 255, 0.62);
    box-shadow: 0 min(2.8vw, 5svh) min(7vw, 12svh) rgba(76, 102, 128, 0.18);
    backdrop-filter: blur(18px);
}

.timer-dial {
    width: min(var(--timer-dial-size), 44svh);
    margin-top: calc(var(--u) * -0.4);
}

.timer-ring {
    background:
        conic-gradient(from -1deg, var(--timer-blue) var(--timer-progress), rgba(230, 240, 249, 0.72) 0deg),
        radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(229, 240, 250, 0.32));
    box-shadow: inset 0 0 0 min(1.25vw, 2.2svh) rgba(255, 255, 255, 0.42), 0 min(1vw, 1.8svh) min(4vw, 7svh) rgba(78, 105, 132, 0.12);
}

.timer-ring::before {
    inset: 8.5%;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.88) 62%, rgba(232, 240, 249, 0.5));
    box-shadow: inset 0 0 0 min(1vw, 1.9svh) rgba(255, 255, 255, 0.52);
}

.timer-ring::after {
    position: absolute;
    inset: 13.6%;
    content: "";
    border-radius: 50%;
    border: 1px solid rgba(210, 225, 239, 0.58);
}

.timer-dial::after {
    position: absolute;
    left: 50%;
    bottom: 5.5%;
    z-index: 4;
    width: min(1.8vw, 2.9svh);
    height: min(1.8vw, 2.9svh);
    content: "";
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--timer-blue) 0 26%, #fff 29% 63%, rgba(86, 162, 246, 0.95) 66% 100%);
    box-shadow: 0 0 0 min(0.3vw, 0.48svh) rgba(255, 255, 255, 0.86), 0 min(0.28vw, 0.5svh) min(1.1vw, 1.8svh) rgba(47, 141, 242, 0.24);
}

.timer-axis {
    position: absolute;
    top: 8%;
    left: 50%;
    z-index: 2;
    width: 1px;
    height: 14%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(203, 220, 236, 0), rgba(196, 216, 235, 0.82));
}

.timer-axis span {
    position: absolute;
    left: 50%;
    bottom: calc(var(--u) * -1.25);
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 6);
    transform: translateX(-50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--timer-blue);
    background: rgba(237, 246, 255, 0.9);
}

.timer-axis svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.timer-display {
    gap: min(1.55vw, 2.35svh);
    transform: translateY(min(0.85vw, 1.35svh));
}

.timer-display strong {
    color: #071124;
    font-size: min(5.85vw, 6svh);
    letter-spacing: 0;
}

.timer-status {
    color: #69778d;
    font-size: min(1.05vw, 1.9svh);
    font-weight: 820;
    letter-spacing: 0;
    transform: translateY(min(0.35vw, 0.55svh));
}

.timer-duration-pill {
    min-height: min(3.2vw, 5.2svh);
    padding: 0 min(1.55vw, 2.7svh);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: min(0.65vw, 1.1svh);
    color: var(--timer-blue);
    background: rgba(229, 242, 255, 0.92);
    font-size: min(1.1vw, 1.9svh);
    font-weight: 820;
}

.timer-duration-pill svg {
    width: min(1.35vw, 2.3svh);
    height: min(1.35vw, 2.3svh);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.duration-grid {
    gap: min(1.7vw, 2.2svh);
}

.duration-stepper {
    min-height: min(7.2vw, 9.2svh);
    padding: min(1.1vw, 1.8svh);
    border-color: rgba(132, 154, 180, 0.16);
    border-radius: min(0.75vw, 1.4svh);
    grid-template-columns: min(3.1vw, 5svh) 1fr min(3.1vw, 5svh);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 min(1vw, 1.8svh) min(2.6vw, 4.8svh) rgba(74, 101, 130, 0.08);
}

.duration-stepper button {
    width: min(3.1vw, 5svh);
    height: min(3.1vw, 5svh);
    color: #17253a;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 min(0.45vw, 0.85svh) min(1.3vw, 2.4svh) rgba(52, 73, 100, 0.08);
    font-size: min(1.2vw, 2svh);
}

.duration-stepper output {
    font-size: min(2.5vw, 4.2svh);
    font-weight: 820;
}

.duration-stepper span {
    color: #68768b;
    font-size: min(0.9vw, 1.55svh);
    font-weight: 820;
}

.timer-presets {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: min(1.1vw, 1.8svh);
}

.timer-presets button {
    min-height: min(3.7vw, 5.8svh);
    padding: 0 min(0.8vw, 1.3svh);
    color: #17253a;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 min(0.55vw, 1svh) min(1.5vw, 2.6svh) rgba(62, 85, 112, 0.08);
    font-size: min(1.05vw, 1.8svh);
}

.timer-presets button.selected {
    color: var(--timer-blue);
    border-color: rgba(47, 141, 242, 0.92);
    background: rgba(255, 255, 255, 0.76);
}

.timer-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: min(1.4vw, 2.1svh);
}

.timer-action {
    min-height: min(4.5vw, 6.8svh);
    gap: min(0.8vw, 1.2svh);
    color: #17253a;
    background: rgba(255, 255, 255, 0.9);
    font-size: min(1.25vw, 2.1svh);
    font-weight: 830;
}

.timer-action svg {
    width: min(1.55vw, 2.7svh);
    height: min(1.55vw, 2.7svh);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.timer-action.primary svg {
    fill: currentColor;
    stroke: none;
}

.timer-action.primary {
    color: #fff;
    background: linear-gradient(135deg, #2795ff, #1f80ed);
    box-shadow: 0 min(0.9vw, 1.6svh) min(2.4vw, 4.2svh) rgba(39, 145, 242, 0.28);
}

.timer-settings {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.96fr);
    gap: min(4.6vw, 6svh);
    align-items: center;
}

.timer-audio-card,
.repeat-control {
    min-height: min(4.6vw, 6.8svh);
    border: 1px solid rgba(132, 154, 180, 0.14);
    border-radius: min(0.85vw, 1.55svh);
    display: flex;
    align-items: center;
    color: #1b2a40;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 min(0.65vw, 1.2svh) min(1.8vw, 3.2svh) rgba(62, 85, 112, 0.08);
}

.timer-audio-card {
    padding: 0 min(1.65vw, 2.8svh);
    gap: min(1.35vw, 2.3svh);
}

.sound-control,
.volume-control,
.repeat-control,
.sound-preview-button {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: min(0.9vw, 1.45svh);
}

.sound-control {
    flex: 1 1 auto;
}

.volume-control {
    flex: 1.05 1 auto;
}

.sound-control svg,
.volume-control svg,
.repeat-control svg,
.sound-preview-button svg {
    width: min(1.45vw, 2.45svh);
    height: min(1.45vw, 2.45svh);
    flex: 0 0 auto;
    color: var(--timer-blue);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.sound-preview-button {
    width: min(2.85vw, 4.55svh);
    height: min(2.85vw, 4.55svh);
    border: 1px solid rgba(119, 143, 170, 0.13);
    border-radius: 50%;
    justify-content: center;
    color: var(--timer-blue);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 min(0.42vw, 0.65svh) min(0.95vw, 1.45svh) rgba(61, 84, 112, 0.07);
}

.sound-preview-button svg {
    fill: currentColor;
    stroke: none;
}

.sound-control select {
    min-width: 0;
    width: 100%;
    border: 0;
    color: #24344d;
    background: transparent;
    font-size: min(1.05vw, 1.8svh);
    font-weight: 650;
    outline: 0;
}

.volume-control input[type="range"] {
    width: 100%;
    accent-color: var(--timer-blue);
}

.repeat-control {
    justify-content: center;
    padding: 0 min(1.3vw, 2.3svh);
    font-size: min(1.05vw, 1.8svh);
    font-weight: 700;
}

.repeat-control input {
    width: min(2.6vw, 4.4svh);
    height: min(1.45vw, 2.4svh);
    margin: 0;
    flex: 0 0 auto;
    appearance: none;
    border-radius: 999px;
    background: #a9b6c8;
    box-shadow: inset 0 0 0 1px rgba(75, 96, 122, 0.08);
}

.repeat-control input::before {
    display: block;
    width: min(1.2vw, 2svh);
    height: min(1.2vw, 2svh);
    margin: min(0.12vw, 0.2svh);
    content: "";
    border-radius: 50%;
    background: #fff;
    transition: transform 160ms ease;
}

.repeat-control input:checked {
    background: var(--timer-blue);
}

.repeat-control input:checked::before {
    transform: translateX(min(1.12vw, 1.9svh));
}

@media (max-width: 920px) {
    .timer-page {
        --timer-panel-width: min(92vw, 68svh);
        --timer-dial-size: min(58vw, 30svh);
    }

    .timer-page .site-header {
        min-height: var(--header-h);
    }

    .timer-page .top-nav {
        gap: calc(var(--u) * 3.2);
    }

    .header-tool-button,
    .header-profile-button {
        width: var(--control-size);
        height: var(--control-size);
    }

    .timer-hero {
        padding: calc(var(--header-h) + 2.8svh) var(--edge-x) 3svh;
    }

    .timer-shell {
        grid-template-columns: minmax(0, var(--timer-panel-width));
    }

    .timer-console {
        min-height: auto;
        padding: min(4vw, 2.7svh);
        gap: min(3vw, 1.75svh);
    }

    .timer-display strong {
        font-size: min(11vw, 5.8svh);
    }

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

    .timer-settings {
        grid-template-columns: 1fr;
        gap: min(2.8vw, 1.8svh);
    }

    .sound-control select,
    .repeat-control,
    .timer-presets button,
    .timer-action {
        font-size: min(3.4vw, 1.75svh);
    }
}

@media (max-width: 640px) {
    .timer-page {
        --timer-dial-size: min(58vw, 24svh);
    }

    .timer-hero {
        overflow-x: hidden;
    }

    .timer-shell {
        width: 78vw;
        max-width: 100%;
        justify-self: center;
    }

    .timer-console {
        max-width: 100%;
        overflow: hidden;
        border-radius: min(2.2vw, 1.3svh);
        padding: min(3vw, 1.55svh);
        gap: min(2.1vw, 1.1svh);
    }

    .timer-display {
        gap: min(2vw, 1.1svh);
    }

    .timer-display strong {
        font-size: min(10.5vw, 4.8svh);
    }

    .timer-axis {
        display: none;
    }

    .timer-dial::after {
        display: none;
    }

    .timer-duration-pill {
        min-height: min(7vw, 3.1svh);
        font-size: min(3vw, 1.45svh);
    }

    .duration-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: min(1.4vw, 0.7svh);
    }

    .duration-stepper {
        min-width: 0;
        min-height: min(21vw, 8.8svh);
        padding: min(1.6vw, 0.75svh);
        grid-template-columns: 1fr 1fr;
        gap: min(1vw, 0.5svh);
    }

    .duration-stepper button {
        width: min(6.6vw, 2.8svh);
        height: min(6.6vw, 2.8svh);
        font-size: min(3vw, 1.45svh);
    }

    .duration-stepper output {
        font-size: min(5.2vw, 2.55svh);
    }

    .duration-stepper span {
        font-size: min(1.9vw, 0.95svh);
    }

    .timer-presets {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: min(1.5vw, 0.8svh);
    }

    .timer-presets button {
        min-height: min(7.5vw, 3.4svh);
        font-size: min(3.2vw, 1.55svh);
    }

    .timer-actions {
        width: 100%;
        grid-template-columns: 1fr;
        gap: min(1.6vw, 0.8svh);
    }

    .timer-action {
        min-height: min(9.2vw, 4svh);
    }

    .timer-audio-card {
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        padding: min(3.5vw, 1.8svh);
    }

    .timer-settings {
        width: 100%;
    }

    .repeat-control {
        min-width: 0;
        min-height: min(9.2vw, 4svh);
    }
}

/* Timer mockup alignment pass. Kept last so it wins over the shared responsive rules above. */
.timer-page {
    --timer-panel-width: min(58vw, 74svh);
    --timer-dial-size: min(36vw, 45.5svh);
    --timer-blue: #2d91f7;
    --timer-ink: #071225;
}

.timer-page .brand-mark {
    color: #f2a531;
    background: transparent;
}

.timer-page .site-header {
    min-height: 7.9svh;
    background: rgba(250, 253, 255, 0.9);
    box-shadow: 0 1px 0 rgba(55, 78, 105, 0.08);
}

.timer-page .nav-link.active::after {
    height: max(3px, 0.32svh);
    background: var(--timer-blue);
}

.timer-hero {
    min-height: var(--page-vh);
    padding-top: 11.9svh;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 250, 255, 0.62) 47%, rgba(231, 244, 255, 0.56) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(223, 239, 251, 0.34)),
        url("/images/hero-misty-lake.png");
    background-size: cover;
    background-position: center 52%;
}

.timer-console {
    padding: min(2.45vw, 3.45svh) min(2.6vw, 3.95svh);
    border-color: rgba(255, 255, 255, 0.78);
    border-radius: min(1vw, 1.75svh);
    gap: min(1.18vw, 1.55svh);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 250, 255, 0.58)),
        rgba(246, 251, 255, 0.66);
    box-shadow:
        0 min(2vw, 3.2svh) min(5.2vw, 8.4svh) rgba(71, 98, 124, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.timer-dial {
    width: var(--timer-dial-size);
    margin-top: -0.25svh;
}

.timer-ring {
    background:
        conic-gradient(from -1deg, var(--timer-blue) var(--timer-progress), rgba(234, 243, 251, 0.6) 0deg),
        radial-gradient(circle, rgba(255, 255, 255, 0.84), rgba(232, 242, 251, 0.28));
    box-shadow:
        inset 0 0 0 min(0.75vw, 1.25svh) rgba(255, 255, 255, 0.38),
        0 min(0.8vw, 1.35svh) min(3vw, 5svh) rgba(79, 106, 134, 0.09);
}

.timer-ring::before {
    inset: min(1.72vw, 2.75svh);
    background:
        radial-gradient(circle at 50% 46%, #ffffff, #f9fcff 58%, #eef6fd);
    box-shadow:
        inset 0 0 0 min(0.48vw, 0.78svh) rgba(255, 255, 255, 0.58),
        inset 0 0 min(4vw, 6svh) rgba(220, 234, 247, 0.34);
}

.timer-ring::after {
    inset: min(3.55vw, 5.75svh);
    border-color: rgba(210, 226, 240, 0.55);
}

.timer-dial::after {
    bottom: 4.9%;
    width: min(1.65vw, 2.55svh);
    height: min(1.65vw, 2.55svh);
}

.timer-axis {
    top: 8.7%;
    height: 15.4%;
    background: linear-gradient(180deg, rgba(198, 216, 234, 0), rgba(198, 216, 234, 0.72));
}

.timer-axis span {
    bottom: calc(var(--u) * -1.55);
    width: calc(var(--u) * 5.35);
    height: calc(var(--u) * 5.35);
    box-shadow: 0 min(0.5vw, 0.8svh) min(1.3vw, 2svh) rgba(67, 103, 137, 0.06);
}

.timer-display {
    gap: min(1.45vw, 2.05svh);
    transform: translateY(min(1.3vw, 1.95svh));
}

.timer-status {
    color: #66758b;
    font-size: min(0.95vw, 1.55svh);
    transform: translateY(min(0.25vw, 0.4svh));
}

.timer-display strong {
    font-size: min(5.5vw, 7.35svh);
    line-height: 0.95;
    color: var(--timer-ink);
    text-shadow: 0 min(0.25vw, 0.35svh) min(0.7vw, 1.1svh) rgba(4, 17, 36, 0.08);
}

.timer-duration-pill {
    min-height: min(2.9vw, 4.45svh);
    padding-inline: min(1.35vw, 2.18svh);
    font-size: min(0.95vw, 1.58svh);
}

.duration-grid {
    gap: min(1.62vw, 2.08svh);
}

.duration-stepper {
    min-height: min(6.95vw, 8.85svh);
    border-radius: min(0.64vw, 1.02svh);
    background: rgba(255, 255, 255, 0.7);
}

.duration-stepper output {
    font-size: min(2.32vw, 3.65svh);
    line-height: 1;
    color: var(--timer-ink);
}

.duration-stepper span {
    margin-top: min(0.32vw, 0.48svh);
}

.timer-presets {
    gap: min(1vw, 1.55svh);
}

.timer-presets button {
    min-height: min(3.55vw, 5.25svh);
    font-size: min(0.98vw, 1.62svh);
}

.timer-actions {
    gap: min(1.24vw, 1.82svh);
}

.timer-action {
    min-height: min(4.25vw, 6.35svh);
    border-radius: 999px;
    font-size: min(1.13vw, 1.82svh);
}

.timer-audio-card,
.repeat-control {
    min-height: min(4.35vw, 6.35svh);
    border-radius: min(0.72vw, 1.18svh);
    background: rgba(255, 255, 255, 0.75);
}

.timer-settings {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: min(4.15vw, 5.35svh);
}

@media (max-width: 920px) {
    .timer-page {
        --timer-panel-width: min(91vw, 72svh);
        --timer-dial-size: min(64vw, 34svh);
    }

    .timer-hero {
        padding-top: calc(var(--header-h) + 2.7svh);
    }

    .timer-console {
        gap: min(2.2vw, 1.55svh);
        padding: min(3.6vw, 2.8svh);
    }

    .timer-display strong {
        font-size: min(10vw, 5.8svh);
    }

    .timer-status {
        font-size: min(2.4vw, 1.45svh);
    }

    .timer-duration-pill {
        font-size: min(2.65vw, 1.5svh);
    }
}

@media (max-width: 640px) {
    .timer-page {
        --timer-panel-width: 88vw;
        --timer-dial-size: min(67vw, 27svh);
    }

    .timer-page .site-header {
        min-height: 7.2svh;
    }

    .timer-hero {
        padding-top: 9.2svh;
    }

    .timer-shell {
        width: var(--timer-panel-width);
    }

    .timer-console {
        padding: min(4vw, 2svh);
        gap: min(3vw, 1.35svh);
    }

    .timer-display {
        transform: translateY(0);
    }

    .timer-display strong {
        font-size: min(12vw, 4.9svh);
    }

    .duration-grid,
    .timer-actions,
    .timer-settings {
        grid-template-columns: 1fr;
    }

    .duration-stepper {
        grid-template-columns: min(9vw, 4svh) 1fr min(9vw, 4svh);
        grid-template-rows: auto auto;
        min-height: min(19vw, 8svh);
        padding: min(2.6vw, 1.25svh);
    }

    .duration-stepper button:first-of-type {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }

    .duration-stepper button:last-of-type {
        grid-column: 3;
        grid-row: 1;
        justify-self: center;
    }

    .duration-stepper output {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-size: min(6.2vw, 3svh);
    }

    .duration-stepper span {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: min(2.4vw, 1.15svh);
    }

    .timer-presets button {
        min-height: min(8.2vw, 3.8svh);
        font-size: min(3.15vw, 1.5svh);
    }

    .timer-action {
        min-height: min(10.2vw, 4.8svh);
        font-size: min(3.3vw, 1.58svh);
    }
}

/* Timer detail pass: closer match to the supplied frosted alpine mockup. */
.timer-page {
    --timer-panel-width: min(57.9vw, 73.7svh);
    --timer-dial-size: min(36.1vw, 45.2svh);
    --timer-blue: #2f92f5;
    --timer-blue-deep: #1f82ee;
    --timer-control-shadow: 0 min(0.72vw, 1.12svh) min(1.9vw, 3.1svh) rgba(58, 83, 112, 0.075);
}

.timer-page .site-header {
    min-height: 7.75svh;
    padding-inline: min(2.45vw, 4svh);
    grid-template-columns: minmax(22vw, 1fr) auto minmax(12vw, 1fr);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 255, 0.86));
    backdrop-filter: blur(22px) saturate(1.12);
}

.timer-page .brand {
    gap: min(0.8vw, 1.4svh);
    color: #0b1528;
    font-size: min(1.85vw, 2.95svh);
    font-weight: 500;
}

.timer-page .brand-mark {
    width: min(4.6vw, 7.1svh);
    height: min(3.05vw, 4.7svh);
    color: #f2a531;
    background: transparent;
    filter: drop-shadow(0 min(0.45vw, 0.75svh) min(0.9vw, 1.45svh) rgba(47, 146, 245, 0.2));
}

.timer-page .brand-mark svg {
    stroke-width: 1.7;
}

.timer-page .top-nav {
    gap: min(5.85vw, 8.8svh);
    height: 100%;
}

.timer-page .nav-tab {
    position: relative;
    min-height: 7.75svh;
    padding-inline: min(0.42vw, 0.72svh);
    color: #1b2638;
    font-size: min(1.35vw, 2.18svh);
    font-weight: 350;
}

.timer-page .nav-tab.active {
    color: #0b1528;
    font-weight: 400;
}

.timer-page .nav-tab.active::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(5.9vw, 9svh);
    height: max(3px, 0.35svh);
    content: "";
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    background: var(--timer-blue);
}

.timer-page .header-tool-button,
.timer-page .header-profile-button {
    width: clamp(2rem, min(3.15vw, 5svh), 3.25rem);
    height: clamp(2rem, min(3.15vw, 5svh), 3.25rem);
    color: #1e2b3e;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 min(0.55vw, 0.9svh) min(1.2vw, 1.9svh) rgba(47, 67, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.timer-page .header-tool-button {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.timer-page .header-tool-button svg,
.timer-page .header-profile-button svg {
    width: min(1.5vw, 2.4svh);
    height: min(1.5vw, 2.4svh);
    stroke-width: 1.85;
}

.timer-hero {
    padding-top: 11.58svh;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 252, 255, 0.72) 47%, rgba(233, 246, 255, 0.58) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(225, 240, 251, 0.28)),
        url("/images/hero-misty-lake.png");
    background-position: center 50%;
    filter: saturate(1.08);
}

.timer-console {
    position: relative;
    overflow: hidden;
    padding: min(2.35vw, 3.34svh) min(2.55vw, 3.78svh);
    gap: min(1.08vw, 1.48svh);
    border: 1px solid rgba(255, 255, 255, 0.82);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(247, 251, 255, 0.38)),
        rgba(242, 249, 255, 0.42);
    box-shadow:
        0 min(2.2vw, 3.55svh) min(5.5vw, 8.7svh) rgba(66, 95, 126, 0.14),
        0 min(0.2vw, 0.35svh) min(0.7vw, 1.05svh) rgba(255, 255, 255, 0.75) inset,
        inset 0 0 min(6vw, 9svh) rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(22px) saturate(1.16);
}

.timer-console::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(217, 235, 249, 0.07), rgba(255, 255, 255, 0.13));
}

.timer-dial {
    margin-top: -0.45svh;
}

.timer-dial::after {
    display: none;
}

.timer-ring {
    background:
        conic-gradient(from -1deg, var(--timer-blue) var(--timer-progress), rgba(231, 241, 250, 0.64) 0deg),
        radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(232, 242, 251, 0.3));
    box-shadow:
        0 0 0 min(0.72vw, 1.12svh) rgba(247, 251, 255, 0.48),
        0 0 0 min(1.58vw, 2.52svh) rgba(236, 245, 253, 0.38),
        0 min(0.9vw, 1.45svh) min(3vw, 4.8svh) rgba(79, 106, 134, 0.09);
}

.timer-ring::before {
    inset: min(1.28vw, 2.05svh);
    background:
        radial-gradient(circle at 50% 45%, #ffffff, #fbfdff 58%, #eef6fd 100%);
}

.timer-ring::after {
    inset: min(3.02vw, 4.82svh);
    border-color: rgba(205, 223, 238, 0.62);
    box-shadow: inset 0 0 min(2.5vw, 4svh) rgba(221, 235, 247, 0.18);
}

.timer-ring-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: min(1.65vw, 2.55svh);
    height: min(1.65vw, 2.55svh);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--timer-blue) 0 22%, #fff 25% 61%, rgba(91, 167, 247, 0.95) 65% 100%);
    box-shadow: 0 0 0 min(0.26vw, 0.42svh) rgba(255, 255, 255, 0.86), 0 min(0.28vw, 0.5svh) min(1.1vw, 1.8svh) rgba(47, 141, 242, 0.24);
    transform:
        translate(-50%, -50%)
        rotate(var(--timer-progress))
        translateY(calc(var(--timer-dial-size) * -0.43));
    transform-origin: center;
    transition: transform 180ms linear;
}

.timer-axis {
    top: 8.9%;
    height: 15.1%;
}

.timer-axis span {
    width: min(3.35vw, 5.15svh);
    height: min(3.35vw, 5.15svh);
    background:
        radial-gradient(circle at 45% 35%, #ffffff, rgba(234, 246, 255, 0.96));
}

.timer-dial::after {
    bottom: 4.75%;
    background:
        radial-gradient(circle, var(--timer-blue) 0 22%, #fff 25% 61%, rgba(91, 167, 247, 0.95) 65% 100%);
}

.timer-display strong {
    font-size: min(5.42vw, 7.18svh);
    font-weight: 860;
    text-shadow: 0 min(0.35vw, 0.55svh) min(0.9vw, 1.35svh) rgba(4, 17, 36, 0.09);
}

.timer-status {
    color: #67768d;
    font-size: min(0.9vw, 1.46svh);
    font-weight: 860;
}

.timer-duration-pill {
    min-height: min(2.72vw, 4.2svh);
    color: var(--timer-blue);
    background: rgba(229, 243, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.duration-stepper,
.timer-presets button,
.timer-action,
.timer-audio-card,
.repeat-control,
.sound-preview-button {
    border: 1px solid rgba(119, 143, 170, 0.13);
    box-shadow: var(--timer-control-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.duration-stepper {
    min-height: min(6.82vw, 8.58svh);
    padding: min(1.02vw, 1.58svh);
    background: rgba(255, 255, 255, 0.76);
}

.duration-stepper button {
    border-color: rgba(125, 148, 174, 0.14);
    color: #102035;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 min(0.42vw, 0.65svh) min(0.95vw, 1.45svh) rgba(61, 84, 112, 0.07);
}

.duration-stepper output {
    font-weight: 880;
}

.duration-stepper span {
    color: #68778e;
    font-weight: 830;
}

.timer-presets button {
    background: rgba(255, 255, 255, 0.9);
    font-weight: 770;
}

.timer-presets button.selected {
    border-color: var(--timer-blue);
    box-shadow: inset 0 0 0 1px rgba(47, 146, 245, 0.2), var(--timer-control-shadow);
}

.timer-action.primary {
    background: linear-gradient(135deg, #2f98ff 0%, var(--timer-blue-deep) 100%);
    box-shadow: 0 min(1vw, 1.55svh) min(2.2vw, 3.45svh) rgba(47, 146, 245, 0.24);
}

.timer-audio-card {
    flex-wrap: nowrap;
    background: rgba(255, 255, 255, 0.78);
}

.repeat-control {
    background: rgba(255, 255, 255, 0.82);
}

.volume-control input[type="range"] {
    height: min(0.42vw, 0.68svh);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--timer-blue) 0 var(--volume-level, 100%), rgba(31, 42, 58, 0.74) var(--volume-level, 100%) 100%);
    appearance: none;
}

.volume-control input[type="range"]::-webkit-slider-runnable-track {
    height: min(0.42vw, 0.68svh);
    border-radius: 999px;
    background: transparent;
}

.volume-control input[type="range"]::-webkit-slider-thumb {
    width: min(1.08vw, 1.72svh);
    height: min(1.08vw, 1.72svh);
    margin-top: calc(min(0.42vw, 0.68svh) * -0.72);
    border: 0;
    border-radius: 50%;
    background: var(--timer-blue);
    appearance: none;
    box-shadow: 0 min(0.2vw, 0.34svh) min(0.5vw, 0.8svh) rgba(47, 146, 245, 0.24);
}

.volume-control input[type="range"]::-moz-range-track {
    height: min(0.42vw, 0.68svh);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--timer-blue) 0 var(--volume-level, 100%), rgba(31, 42, 58, 0.74) var(--volume-level, 100%) 100%);
}

.volume-control input[type="range"]::-moz-range-thumb {
    width: min(1.08vw, 1.72svh);
    height: min(1.08vw, 1.72svh);
    border: 0;
    border-radius: 50%;
    background: var(--timer-blue);
}

@media (max-width: 920px) {
    .timer-page .site-header {
        grid-template-columns: 1fr;
        gap: min(1.2vw, 0.9svh);
        padding-block: min(1vw, 0.8svh);
    }

    .timer-page .brand,
    .timer-page .header-actions {
        position: absolute;
        top: min(1.2vw, 0.92svh);
    }

    .timer-page .brand {
        left: min(3vw, 2.2svh);
        font-size: min(3.2vw, 1.85svh);
    }

    .timer-page .brand-mark {
        width: min(7.4vw, 4.35svh);
        height: min(4.85vw, 2.85svh);
    }

    .timer-page .header-actions {
        right: min(3vw, 2.2svh);
    }

    .timer-page .header-tool-button,
    .timer-page .header-profile-button {
        width: 2rem;
        height: 2rem;
    }

    .timer-page .header-tool-button svg,
    .timer-page .header-profile-button svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    .timer-page .top-nav {
        width: 100%;
        justify-content: center;
        gap: min(4.8vw, 2.8svh);
        padding-top: min(4vw, 2.5svh);
    }

    .timer-page .nav-tab {
        min-height: min(7.2vw, 4.4svh);
        font-size: min(3.15vw, 1.8svh);
    }

    .timer-page .nav-tab.active::after {
        width: min(12vw, 6svh);
    }
}

@media (max-width: 640px) {
    .timer-page {
        --timer-panel-width: 88vw;
        --timer-dial-size: min(59vw, 22.8svh);
    }

    .timer-hero {
        padding-top: 9.65svh;
    }

    .timer-console {
        min-height: auto;
        padding: min(3.4vw, 1.45svh);
        gap: min(2.15vw, 0.88svh);
    }

    .timer-display strong {
        font-size: min(10.8vw, 4.22svh);
    }

    .timer-status {
        font-size: min(2.35vw, 1.05svh);
    }

    .timer-duration-pill {
        min-height: min(5.6vw, 2.35svh);
        font-size: min(2.55vw, 1.12svh);
    }

    .duration-grid {
        gap: min(1.3vw, 0.56svh);
    }

    .duration-stepper {
        min-height: min(15.2vw, 6.15svh);
        padding: min(1.7vw, 0.72svh);
    }

    .duration-stepper button {
        width: min(7vw, 2.95svh);
        height: min(7vw, 2.95svh);
    }

    .duration-stepper output {
        font-size: min(5.5vw, 2.3svh);
    }

    .timer-presets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: min(1.2vw, 0.5svh);
    }

    .timer-presets button {
        min-height: min(6.8vw, 2.85svh);
        font-size: min(2.65vw, 1.12svh);
    }

    .timer-actions {
        gap: min(1.2vw, 0.5svh);
    }

    .timer-action {
        min-height: min(8vw, 3.34svh);
        font-size: min(2.85vw, 1.2svh);
    }

    .timer-action svg {
        width: 0.95rem;
        height: 0.95rem;
    }

    .sound-control svg,
    .volume-control svg,
    .repeat-control svg,
    .sound-preview-button svg,
    .timer-duration-pill svg {
        width: 0.92rem;
        height: 0.92rem;
    }

    .timer-settings {
        gap: min(1.6vw, 0.65svh);
    }

    .timer-audio-card {
        min-height: min(15vw, 6.15svh);
        gap: min(2vw, 0.8svh);
        padding: min(2.2vw, 0.95svh);
    }

    .sound-preview-button {
        width: min(7vw, 2.9svh);
        height: min(7vw, 2.9svh);
    }

    .repeat-control {
        min-height: min(7.8vw, 3.25svh);
    }
}

/* Shared header contract: same structure and sizing on every page. */
.world-time-page .site-header {
    min-height: 7.75svh;
    padding-inline: min(2.45vw, 4svh);
    grid-template-columns: minmax(22vw, 1fr) auto minmax(10vw, 1fr);
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 255, 0.86));
    backdrop-filter: blur(22px) saturate(1.12);
    border-bottom-color: rgba(62, 84, 112, 0.12);
    box-shadow: 0 1px 0 rgba(55, 78, 105, 0.08);
}

.world-time-page .brand {
    gap: calc(var(--u) * 1.15);
    color: #334155;
    font-size: calc(var(--u) * 2.65);
    font-weight: 500;
}

.world-time-page .brand-mark {
    width: calc(var(--u) * 5.1);
    height: calc(var(--u) * 3.35);
    color: #f2a531;
    background: transparent;
    filter: none;
}

.world-time-page .brand-mark svg {
    stroke-width: 1.7;
}

.world-time-page .top-nav {
    height: 100%;
    gap: min(5.85vw, 8.8svh);
}

.world-time-page .nav-tab {
    position: relative;
    min-height: 7.75svh;
    padding-inline: min(0.42vw, 0.72svh);
    color: #1b2638;
    font-size: min(1.35vw, 2.18svh);
    font-weight: 350;
}

.world-time-page .nav-tab.active {
    color: #0b1528;
    font-weight: 400;
}

.world-time-page .nav-tab.active::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(5.9vw, 9svh);
    height: max(3px, 0.35svh);
    content: "";
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    background: #2f92f5;
}

.world-time-page .header-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: min(1vw, 1.45svh);
}

.world-time-page .header-tool-button,
.world-time-page .header-profile-button {
    width: clamp(2rem, min(3.15vw, 5svh), 3.25rem);
    height: clamp(2rem, min(3.15vw, 5svh), 3.25rem);
    border: 1px solid rgba(105, 129, 158, 0.16);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #1e2b3e;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 min(0.55vw, 0.9svh) min(1.2vw, 1.9svh) rgba(47, 67, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.world-time-page .header-tool-button svg,
.world-time-page .header-profile-button svg,
.world-time-page .add-city-button svg,
.world-time-page .fullscreen-button svg {
    width: min(1.5vw, 2.4svh);
    height: min(1.5vw, 2.4svh);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.85;
}

.world-time-page .add-city-button {
    color: #2f92f5;
}

.world-time-page .header-text-button {
    min-height: clamp(2.2rem, min(3.15vw, 5svh), 3.2rem);
    padding: 0 clamp(0.9rem, min(1.55vw, 2.4svh), 1.4rem);
    border: 1px solid rgba(105, 129, 158, 0.12);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--blue);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 min(0.55vw, 0.9svh) min(1.2vw, 1.9svh) rgba(47, 67, 93, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: clamp(0.78rem, min(1.1vw, 1.72svh), 1rem);
    font-weight: 780;
    white-space: nowrap;
}

.world-time-page .header-text-button:hover {
    border-color: rgba(11, 125, 240, 0.25);
    background: #fff;
}

.world-time-page .header-text-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
}

.alarms-page {
    --alarm-accent: var(--blue);
    --alarm-accent-rgb: 11, 125, 240;
    --alarm-ink: #081226;
    --alarm-muted: #6b7485;
    --alarm-line: rgba(96, 112, 135, 0.14);
    min-height: var(--page-vh);
    background:
        radial-gradient(circle at 14% 8%, rgba(230, 236, 255, 0.9), transparent 28vw),
        radial-gradient(circle at 85% 12%, rgba(230, 247, 255, 0.7), transparent 32vw),
        linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
}

.alarms-shell {
    position: relative;
    min-height: var(--page-vh);
    padding: calc(7.75svh + 3.3rem) min(3.5vw, 3.2rem) 3.4rem;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 252, 255, 0.72) 47%, rgba(233, 246, 255, 0.58) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(225, 240, 251, 0.28)),
        url("/images/hero-misty-lake.png");
    background-size: cover;
    background-position: center 50%;
}

@media (min-width: 981px) and (max-height: 760px) {
    .alarms-shell {
        padding-top: calc(7.75svh + 2.75rem);
        padding-bottom: 2.25rem;
    }
}

.alarms-content {
    width: min(100%, 73rem);
    margin: 0 auto;
}

.alarm-editor-panel {
    width: min(100%, 73rem);
    margin: 0 auto 1.1rem;
    padding: clamp(0.85rem, 1.25vw, 1.1rem);
    border: 1px solid rgba(var(--alarm-accent-rgb), 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 1.2rem 3.4rem rgba(58, 73, 98, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.alarm-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.alarm-editor-head > div {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    min-width: 0;
}

.alarm-editor-head span {
    color: var(--alarm-accent);
    font-size: 0.72rem;
    font-weight: 830;
    text-transform: uppercase;
}

.alarm-editor-head h1 {
    margin: 0;
    color: var(--alarm-ink);
    font-size: clamp(1.05rem, 1.45vw, 1.22rem);
    font-weight: 840;
    line-height: 1.12;
}

.alarm-editor-close {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(96, 112, 135, 0.12);
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #5d6879;
    background: rgba(255, 255, 255, 0.88);
}

.alarm-editor-close:hover {
    color: var(--alarm-accent);
}

.alarm-editor-close svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.alarm-editor-form {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(27rem, 1fr) minmax(16rem, auto);
    grid-template-areas:
        "note quick active"
        "time repeat actions";
    align-items: start;
    column-gap: clamp(1rem, 2vw, 1.6rem);
    row-gap: 0.58rem;
}

.alarm-editor-form > label:not(.alarm-editor-active) {
    display: grid;
    gap: 0.38rem;
}

.alarm-note-field {
    grid-area: note;
}

.alarm-time-field {
    grid-area: time;
}

.alarm-quick-add {
    grid-area: quick;
    min-width: 0;
    display: grid;
    gap: 0.28rem;
}

.alarm-quick-add > span,
.alarm-list-quick-add > span {
    color: #667287;
    font-size: 0.78rem;
    font-weight: 770;
}

.alarm-quick-add > div,
.alarm-list-quick-add > div {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.alarm-quick-add > div::-webkit-scrollbar,
.alarm-list-quick-add > div::-webkit-scrollbar {
    display: none;
}

.alarm-quick-add button,
.alarm-list-quick-add button {
    min-height: 2.08rem;
    padding: 0 0.68rem;
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 999px;
    color: #3c485d;
    background: rgba(255, 255, 255, 0.74);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.alarm-quick-add button:hover,
.alarm-list-quick-add button:hover {
    border-color: rgba(var(--alarm-accent-rgb), 0.28);
    color: var(--alarm-accent);
    background: rgba(var(--alarm-accent-rgb), 0.08);
}

.alarm-editor-form > label > span:first-child {
    color: #667287;
    font-size: 0.78rem;
    font-weight: 770;
}

.alarm-repeat-field {
    grid-area: repeat;
    min-width: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.28rem;
}

.alarm-repeat-field legend {
    padding: 0;
    float: none;
    color: #667287;
    font-size: 0.78rem;
    font-weight: 770;
}

.alarm-day-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(4.7rem, 1fr));
    gap: 0.38rem;
}

.alarm-day-chip {
    min-height: 2.1rem;
    padding: 0 0.62rem;
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: #3c485d;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 780;
    white-space: nowrap;
}

.alarm-day-chip input {
    width: 0.88rem;
    height: 0.88rem;
    margin: 0;
    accent-color: var(--alarm-accent);
}

.alarm-day-chip.selected {
    border-color: rgba(var(--alarm-accent-rgb), 0.3);
    color: #075da9;
    background: rgba(226, 241, 255, 0.94);
}

.alarm-editor-form input[type="text"],
.alarm-editor-form input[type="time"],
.alarm-editor-form select {
    width: 100%;
    min-height: 2.45rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(96, 112, 135, 0.16);
    border-radius: 8px;
    color: var(--alarm-ink);
    background: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-weight: 720;
}

.alarm-time-control {
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr) 2.45rem;
    align-items: center;
    gap: 0.42rem;
}

.alarm-time-adjust {
    width: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
    border: 1px solid rgba(var(--alarm-accent-rgb), 0.16);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--alarm-accent);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.alarm-time-adjust:hover {
    border-color: rgba(var(--alarm-accent-rgb), 0.32);
    background: rgba(var(--alarm-accent-rgb), 0.08);
}

.alarm-time-adjust svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.35;
}

.alarm-editor-active {
    grid-area: active;
    justify-self: end;
    min-height: 2.45rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #263247;
    background: rgba(255, 255, 255, 0.72);
    font-weight: 760;
    white-space: nowrap;
}

.alarm-editor-active input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--alarm-accent);
}

.alarm-editor-actions {
    grid-area: actions;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.alarm-editor-save,
.alarm-editor-cancel {
    min-height: 2.45rem;
    padding: 0 1rem;
    border-radius: 8px;
    font-weight: 820;
    white-space: nowrap;
}

.alarm-editor-save {
    border: 1px solid rgba(var(--alarm-accent-rgb), 0.28);
    color: #fff;
    background: var(--alarm-accent);
    box-shadow: 0 0.65rem 1.4rem rgba(var(--alarm-accent-rgb), 0.18);
}

.alarm-editor-cancel {
    border: 1px solid rgba(96, 112, 135, 0.14);
    color: #425066;
    background: rgba(255, 255, 255, 0.8);
}

.alarm-filters {
    width: min(100%, 35rem);
    margin: 0 auto 1.7rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
}

.alarm-filter {
    position: relative;
    min-height: 2.75rem;
    border: 0;
    border-radius: 0;
    color: #596376;
    background: transparent;
    font-size: clamp(0.86rem, 1.2vw, 1rem);
    font-weight: 760;
}

.alarm-filter.active {
    color: #0b1528;
}

.alarm-filter.active::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(8.7rem, 84%);
    height: 3px;
    content: "";
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--alarm-accent);
}

.alarm-carousel-bar {
    min-height: 2.45rem;
    margin: -0.45rem 0 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.alarm-carousel-bar > span {
    flex: 1 1 auto;
    min-width: 0;
    color: #758093;
    font-size: 0.78rem;
    font-weight: 770;
    white-space: nowrap;
}

.alarm-carousel-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.alarm-carousel-tools {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.alarm-carousel-button {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--alarm-accent);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 0.4rem 1rem rgba(58, 73, 98, 0.08);
}

.alarm-carousel-button:hover:not(:disabled) {
    border-color: rgba(var(--alarm-accent-rgb), 0.32);
    background: #fff;
}

.alarm-carousel-button:disabled {
    color: #b3bbc8;
    opacity: 0.6;
}

.alarm-carousel-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.35;
}

.alarm-add-button {
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: 0 0.82rem;
    border: 1px solid rgba(105, 129, 158, 0.14);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    color: var(--alarm-accent);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 0.4rem 1rem rgba(58, 73, 98, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.alarm-add-button:hover {
    border-color: rgba(var(--alarm-accent-rgb), 0.32);
    background: #fff;
}

.alarm-add-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.35;
}

.alarm-ringing-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--alarm-accent-rgb), 0.24);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1rem 2.4rem rgba(var(--alarm-accent-rgb), 0.14);
    color: var(--alarm-ink);
}

.alarm-ringing-icon {
    display: inline-grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background: rgba(var(--alarm-accent-rgb), 0.12);
    color: var(--alarm-accent);
}

.alarm-ringing-icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alarm-ringing-banner span {
    display: block;
    color: var(--alarm-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.alarm-ringing-banner strong {
    display: block;
    color: var(--alarm-ink);
    font-size: 1.08rem;
    line-height: 1.2;
}

.alarm-ringing-note {
    display: block;
    margin: 0.08rem 0 0.1rem;
    color: #31415f;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.2;
}

.alarm-ringing-banner button {
    min-width: 6rem;
    border: 1px solid rgba(var(--alarm-accent-rgb), 0.28);
    border-radius: 0.6rem;
    padding: 0.7rem 1rem;
    background: var(--alarm-accent);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0.65rem 1.4rem rgba(var(--alarm-accent-rgb), 0.18);
}

.global-alarm-layer {
    position: fixed;
    right: clamp(0.75rem, 2.2vw, 1.25rem);
    bottom: clamp(0.75rem, 2.2vw, 1.25rem);
    z-index: 120;
    width: min(25rem, calc(100vw - 1.5rem));
    padding: 0.85rem;
    border: 1px solid rgba(245, 112, 59, 0.26);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1.4rem 3rem rgba(25, 35, 55, 0.2);
    color: #17223a;
}

.global-alarm-header,
.global-alarm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.global-alarm-header {
    margin-bottom: 0.65rem;
}

.global-alarm-header span {
    color: #f5703b;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.global-alarm-list {
    display: grid;
    gap: 0.5rem;
    max-height: min(16rem, 48svh);
    overflow: auto;
}

.global-alarm-item {
    padding: 0.65rem;
    border-radius: 0.7rem;
    background: rgba(245, 112, 59, 0.08);
}

.global-alarm-item strong,
.global-alarm-item span {
    display: block;
}

.global-alarm-item strong {
    font-size: 0.95rem;
    line-height: 1.15;
}

.global-alarm-item span {
    color: #53637a;
    font-size: 0.78rem;
    font-weight: 750;
}

.global-alarm-layer button {
    min-width: 4.7rem;
    border: 1px solid rgba(245, 112, 59, 0.24);
    border-radius: 0.58rem;
    padding: 0.55rem 0.75rem;
    background: #f5703b;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 850;
}

.global-alarm-header button {
    background: #17223a;
    border-color: rgba(23, 34, 58, 0.22);
}

@media (max-width: 520px) {
    .global-alarm-layer {
        right: 0.65rem;
        bottom: 0.65rem;
        left: 0.65rem;
        width: auto;
    }
}

/* Time converter */
.converter-page {
    --converter-ink: #17223a;
    --converter-muted: #66738c;
    --converter-blue: var(--blue);
    --converter-u: var(--u);
    min-height: var(--page-vh);
}

.converter-shell {
    position: relative;
    min-height: var(--page-vh);
    padding: calc(var(--header-h) + clamp(0.7rem, 2svh, 1.2rem)) clamp(0.85rem, 4vw, 2rem) clamp(1rem, 3svh, 2.2rem);
    display: grid;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 252, 255, 0.72) 47%, rgba(233, 246, 255, 0.58) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(225, 240, 251, 0.28)),
        url("/images/hero-misty-lake.png");
    background-size: cover;
    background-position: center 50%;
}

.converter-shell::before,
.converter-shell::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
    z-index: -1;
}

.converter-shell::before {
    display: none;
}

.converter-shell::after {
    display: none;
}

.converter-stage {
    width: min(100%, clamp(24rem, 52vw, 45rem));
    min-height: min(76svh, 43rem);
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        "title"
        "card"
        "inputs"
        "output";
    grid-template-rows:
        auto
        auto
        minmax(3.6rem, auto)
        minmax(8rem, 1fr);
    gap: clamp(0.55rem, 1.9svh, 1rem);
}

.converter-title {
    grid-area: title;
    text-align: center;
    color: var(--converter-ink);
}

.converter-title h1 {
    font-size: clamp(1.18rem, min(4.2vw, 3.4svh), 1.8rem);
    font-weight: 860;
    line-height: 1.08;
}

.converter-title p {
    margin-top: clamp(0.18rem, 0.9svh, 0.45rem);
    color: var(--converter-muted);
    font-size: clamp(0.78rem, min(2.5vw, 1.8svh), 0.92rem);
    font-weight: 560;
}

.converter-card,
.converted-time-card,
.converter-inputs > label {
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow:
        0 1.4rem 3.6rem rgba(42, 65, 91, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
}

.converter-card {
    grid-area: card;
    position: relative;
    z-index: 20;
    padding: clamp(0.68rem, 2svh, 1rem);
    display: grid;
    align-content: center;
    gap: clamp(1.05rem, 3.4svh, 1.75rem);
}

.converter-card:has(.converter-zone-picker.open) {
    z-index: 80;
}

.converter-zone {
    display: grid;
    gap: 0.42rem;
}

.converter-zone > span:first-child {
    color: var(--converter-muted);
    font-size: var(--type-caption);
    line-height: 1.4;
    font-weight: 820;
    text-transform: uppercase;
}

.converter-select-wrap {
    width: 100%;
    min-height: clamp(3.15rem, 8svh, 4rem);
    padding: 0 clamp(0.78rem, 2vw, 1rem);
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(0.75rem, 1.8vw, 1rem);
    background: rgba(255, 255, 255, 0.68);
    color: var(--converter-ink);
    text-align: left;
}

.zone-badge {
    width: clamp(1.65rem, 3.1svh, 1.95rem);
    height: clamp(1.65rem, 3.1svh, 1.95rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--converter-blue);
    font-size: 0.62rem;
    font-weight: 860;
    letter-spacing: 0;
}

.converter-card > .converter-zone:first-child .converter-select-wrap > .zone-badge {
    background: #e3394c;
}

.zone-main {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.zone-main strong {
    overflow: hidden;
    color: var(--converter-ink);
    font-size: var(--type-city-name);
    line-height: 1.3;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-main small {
    overflow: hidden;
    color: var(--converter-muted);
    font-size: var(--type-timezone);
    line-height: 1.3;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-caret {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    transition: transform 160ms ease;
}

.converter-zone-picker {
    position: relative;
    min-width: 0;
}

.converter-zone-picker.open {
    z-index: 12;
}

.converter-zone-picker.open .zone-caret {
    transform: rotate(180deg);
}

.zone-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 90;
    max-height: min(26rem, 52svh);
    padding: 0.75rem;
    border: 1px solid rgba(96, 112, 135, 0.16);
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    overflow: auto;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1rem 3rem rgba(42, 65, 91, 0.18);
    backdrop-filter: blur(18px);
}

.zone-search {
    min-height: 2.55rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(245, 249, 253, 0.9);
}

.zone-search svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #708099;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
}

.zone-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    color: var(--converter-ink);
    background: transparent;
    font-size: var(--type-small);
    line-height: 1.5;
    font-weight: 500;
    outline: none;
}

.zone-menu-section {
    display: grid;
    gap: 0.45rem;
}

.zone-menu-section > span {
    color: var(--converter-muted);
    font-size: var(--type-caption);
    line-height: 1.4;
    font-weight: 820;
    text-transform: uppercase;
}

.zone-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.zone-option-list {
    display: grid;
    gap: 0.4rem;
}

.zone-option {
    min-width: 0;
    min-height: 2.65rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(96, 112, 135, 0.12);
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    color: var(--converter-ink);
    background: rgba(255, 255, 255, 0.7);
    text-align: left;
}

.zone-option:hover,
.zone-option.selected {
    border-color: rgba(11, 125, 240, 0.26);
    background: rgba(11, 125, 240, 0.08);
}

.zone-option span:last-child {
    min-width: 0;
    display: grid;
}

.zone-option strong,
.zone-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-option strong {
    font-size: var(--type-small);
    line-height: 1.5;
    font-weight: 600;
}

.zone-option small {
    color: var(--converter-muted);
    font-size: var(--type-timezone);
    line-height: 1.3;
    font-weight: 500;
}

.zone-empty {
    margin: 0;
    padding: 0.85rem;
    color: var(--converter-muted);
    font-size: var(--type-small);
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
}

.zone-offset {
    color: var(--converter-muted);
    font-size: var(--type-timezone);
    line-height: 1.3;
    font-weight: 500;
    white-space: nowrap;
}

.converter-swap {
    position: absolute;
    top: 55.5%;
    left: 50%;
    width: clamp(2.15rem, 5.6svh, 2.65rem);
    height: clamp(2.15rem, 5.6svh, 2.65rem);
    margin: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--converter-blue);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0.8rem 2rem rgba(42, 65, 91, 0.16);
    transform: translate(-50%, -50%);
    z-index: 3;
}

.converter-swap svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.converter-inputs {
    grid-area: inputs;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(0.55rem, 1.9svh, 1rem);
}

.converter-inputs > label {
    min-height: clamp(2.75rem, 7svh, 3.45rem);
    padding: 0 clamp(0.65rem, 1.8vw, 0.9rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.converter-inputs svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #708099;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.converter-inputs input,
.converter-inputs select {
    min-width: 0;
    border: 0;
    color: var(--converter-ink);
    background: transparent;
    font-weight: 740;
    outline: none;
}

.converter-time input {
    flex: 1 1 auto;
}

.converter-time select {
    width: 4.6rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(96, 112, 135, 0.18);
}

.converted-time-card {
    grid-area: output;
    position: relative;
    z-index: 1;
    min-height: clamp(5.35rem, 16svh, 7.2rem);
    padding: clamp(0.8rem, 2.3svh, 1.1rem) 1rem;
    display: grid;
    align-content: center;
    place-items: center;
    text-align: center;
    color: var(--converter-ink);
}

.converted-time-card > span {
    color: var(--converter-muted);
    font-size: 0.86rem;
    font-weight: 760;
}

.converted-time-card strong {
    color: #14306d;
    font-size: clamp(2rem, min(8vw, 7.5svh), 3.3rem);
    font-weight: 870;
    line-height: 1;
}

.converted-time-card small {
    font-size: 0.42em;
    font-weight: 840;
}

.converted-time-card p {
    color: #223047;
    font-size: 0.9rem;
    font-weight: 690;
}

.alarm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

.alarm-list-quick-add {
    width: min(100%, 53rem);
    margin: 1.15rem auto 0;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(96, 112, 135, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 1rem 2.5rem rgba(58, 73, 98, 0.08);
}

.alarm-list-quick-add > span {
    flex: 0 0 auto;
    color: var(--alarm-ink);
    font-weight: 820;
}

.alarm-list-quick-add > div {
    justify-content: flex-end;
}

.alarm-pin-tip {
    width: min(100%, 53rem);
    margin: 0.8rem auto 0;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(var(--alarm-accent-rgb), 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #31415f;
    background: rgba(var(--alarm-accent-rgb), 0.07);
}

.alarm-pin-tip-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    color: var(--alarm-accent);
}

.alarm-pin-tip-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alarm-pin-tip p {
    flex: 1 1 auto;
    font-size: 0.84rem;
    line-height: 1.45;
}

.alarm-pin-tip strong {
    color: var(--alarm-ink);
    font-weight: 820;
}

.alarm-pin-tip button {
    min-height: 2rem;
    padding: 0.35rem 0.72rem;
    border: 1px solid rgba(var(--alarm-accent-rgb), 0.22);
    border-radius: 6px;
    flex: 0 0 auto;
    color: var(--alarm-accent);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 780;
}

.alarm-pin-tip button:hover {
    border-color: rgba(var(--alarm-accent-rgb), 0.4);
    background: #fff;
}

.alarm-card {
    position: relative;
    min-height: clamp(13.2rem, 25vw, 15.5rem);
    padding: clamp(1.25rem, 2.1vw, 1.7rem);
    border: 1px solid var(--alarm-line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    color: var(--alarm-ink);
    background: rgba(255, 255, 255, 0.74);
    box-shadow:
        0 1.4rem 3.6rem rgba(58, 73, 98, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.alarm-card.selected {
    border-color: rgba(var(--alarm-accent-rgb), 0.72);
    box-shadow:
        0 1.4rem 3.8rem rgba(var(--alarm-accent-rgb), 0.12),
        inset 0 0 0 1px rgba(var(--alarm-accent-rgb), 0.24);
}

.alarm-card.ringing {
    border-color: rgba(var(--alarm-accent-rgb), 0.78);
    box-shadow:
        0 1.4rem 3.8rem rgba(var(--alarm-accent-rgb), 0.14),
        inset 0 0 0 1px rgba(var(--alarm-accent-rgb), 0.28);
}

.alarm-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.alarm-bell {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    color: var(--alarm-accent);
}

.alarm-bell svg,
.alarm-edit-button svg,
.alarm-delete-button svg,
.alarm-menu-button svg,
.next-alarm-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alarm-bell svg {
    stroke-width: 1.9;
}

.alarm-menu-button {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #687489;
    background: transparent;
}

.alarm-menu-button:hover {
    color: var(--alarm-accent);
    background: rgba(var(--alarm-accent-rgb), 0.08);
}

.alarm-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.alarm-edit-button,
.alarm-delete-button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(96, 112, 135, 0.12);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #687489;
    background: rgba(255, 255, 255, 0.62);
}

.alarm-edit-button:hover {
    color: var(--alarm-accent);
    border-color: rgba(var(--alarm-accent-rgb), 0.26);
    background: rgba(255, 255, 255, 0.95);
}

.alarm-delete-button:hover {
    color: #d84b4b;
    border-color: rgba(216, 75, 75, 0.3);
    background: rgba(255, 255, 255, 0.96);
}

.alarm-edit-button svg,
.alarm-delete-button svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.1;
}

.alarm-menu-button svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 3.3;
}

.alarm-note {
    margin-top: auto;
    max-width: calc(100% - 3.5rem);
    color: #31415f;
    font-size: clamp(0.78rem, 1vw, 0.9rem);
    font-weight: 820;
    line-height: 1.22;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.alarm-time {
    margin-top: 0.45rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.alarm-time strong {
    font-size: clamp(2.25rem, 4vw, 3.12rem);
    font-weight: 860;
    line-height: 1;
}

.alarm-time span {
    font-size: clamp(0.88rem, 1.2vw, 1rem);
    font-weight: 850;
    line-height: 1;
}

.alarm-repeat {
    margin-top: 0.9rem;
    color: var(--alarm-muted);
    font-size: clamp(0.78rem, 1vw, 0.92rem);
    font-weight: 650;
}

.alarm-switch {
    position: absolute;
    right: clamp(1.15rem, 2vw, 1.55rem);
    bottom: clamp(1.15rem, 2vw, 1.55rem);
    width: 2.35rem;
    height: 1.28rem;
}

.alarm-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.alarm-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #c9cfd9;
    box-shadow: inset 0 1px 2px rgba(23, 37, 58, 0.12);
    transition: background-color 160ms ease;
}

.alarm-switch span::after {
    position: absolute;
    top: 0.16rem;
    left: 0.17rem;
    width: 0.96rem;
    height: 0.96rem;
    content: "";
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.12rem 0.32rem rgba(42, 55, 78, 0.18);
    transition: transform 160ms ease;
}

.alarm-switch input:checked + span {
    background: var(--alarm-accent);
}

.alarm-switch input:checked + span::after {
    transform: translateX(1.05rem);
}

.next-alarm-card {
    width: min(100%, 53rem);
    min-height: 5.6rem;
    margin: 1rem auto 0;
    padding: 1rem 1.7rem;
    border: 1px solid rgba(96, 112, 135, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        0 1.2rem 3.4rem rgba(58, 73, 98, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.next-alarm-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--alarm-accent);
}

.next-alarm-icon svg {
    width: 1.9rem;
    height: 1.9rem;
    stroke-width: 1.85;
}

.next-alarm-card span {
    display: block;
    color: #7a8495;
    font-size: 0.78rem;
    font-weight: 700;
}

.next-alarm-card strong {
    display: block;
    margin-top: 0.18rem;
    color: #142035;
    font-size: clamp(0.98rem, 1.3vw, 1.12rem);
    font-weight: 830;
}

.alarm-empty-state {
    min-height: 8rem;
    border: 1px dashed rgba(96, 112, 135, 0.24);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #687489;
    background: rgba(255, 255, 255, 0.54);
    font-weight: 720;
}

@media (max-width: 920px) {
    .world-time-page .header-text-button {
        min-height: 2rem;
        padding-inline: 0.75rem;
        font-size: 0.78rem;
    }

    .world-time-page .header-text-button svg {
        width: 0.9rem;
        height: 0.9rem;
    }

    .alarms-shell {
        padding-top: calc(7.75svh + 2.4rem);
    }

    .alarm-editor-form {
        grid-template-columns: minmax(13rem, 0.85fr) minmax(0, 1.15fr);
        grid-template-areas:
            "time active"
            "quick quick"
            "repeat repeat"
            "actions actions";
    }

    .alarm-day-options {
        grid-template-columns: repeat(4, minmax(4.4rem, 1fr));
    }

    .alarm-editor-active {
        justify-self: end;
    }

    .alarm-editor-actions {
        justify-content: end;
    }

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

    .alarm-card {
        min-height: 13rem;
    }
}

@media (max-width: 920px) {
    .world-time-page .site-header {
        min-height: 7.7svh;
        grid-template-columns: 1fr;
        gap: min(1.2vw, 0.9svh);
        padding-block: min(1vw, 0.8svh);
    }

    .world-time-page .brand,
    .world-time-page .header-actions {
        position: absolute;
        top: min(1.2vw, 0.92svh);
    }

    .world-time-page .brand {
        left: min(3vw, 2.2svh);
        font-size: min(3.2vw, 1.85svh);
        font-weight: 400;
    }

    .world-time-page .brand-mark {
        width: min(7.4vw, 4.35svh);
        height: min(4.85vw, 2.85svh);
    }

    .world-time-page .header-actions {
        right: min(3vw, 2.2svh);
        gap: 0.55rem;
    }

    .world-time-page .header-tool-button,
    .world-time-page .header-profile-button {
        width: 2rem;
        height: 2rem;
    }

    .world-time-page .header-tool-button svg,
    .world-time-page .header-profile-button svg,
    .world-time-page .add-city-button svg,
    .world-time-page .fullscreen-button svg {
        width: 1.05rem;
        height: 1.05rem;
    }

    .world-time-page .top-nav {
        width: 100%;
        justify-content: center;
        gap: min(4.8vw, 2.8svh);
        padding-top: min(4vw, 2.5svh);
    }

    .world-time-page .nav-tab {
        min-height: min(7.2vw, 4.4svh);
        font-size: min(3.15vw, 1.8svh);
    }

    .world-time-page .nav-tab.active::after {
        width: min(12vw, 6svh);
    }
}

@media (max-width: 430px) {
    .world-time-page .brand {
        font-size: min(3.5vw, 1.62svh);
    }

    .world-time-page .brand-mark {
        width: min(7vw, 3.75svh);
        height: min(4.55vw, 2.45svh);
    }

    .world-time-page .header-tool-button,
    .world-time-page .header-profile-button {
        width: 1.75rem;
        height: 1.75rem;
    }

    .world-time-page .header-actions {
        gap: 0.42rem;
    }

    .world-time-page .top-nav {
        gap: min(4vw, 2.2svh);
    }
}

@media (min-width: 760px) and (max-height: 680px) {
    .converter-shell {
        padding: calc(var(--header-h) + clamp(0.35rem, 1svh, 0.75rem)) clamp(0.9rem, 3vw, 1.5rem) clamp(0.7rem, 2svh, 1.2rem);
    }

    .converter-stage {
        width: min(94vw, 62rem);
        min-height: auto;
        grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "title output"
            "card output"
            "inputs output";
        align-items: stretch;
        gap: clamp(0.5rem, 1.5svh, 0.85rem);
    }

    .converter-title {
        align-self: end;
        text-align: left;
    }

    .converter-title h1 {
        font-size: clamp(1.05rem, 3svh, 1.35rem);
    }

    .converter-title p {
        margin-top: 0.16rem;
        font-size: clamp(0.72rem, 1.7svh, 0.82rem);
    }

    .converter-card {
        padding: clamp(0.58rem, 1.6svh, 0.82rem);
        gap: clamp(0.38rem, 1.2svh, 0.55rem);
    }

    .converter-select-wrap {
        min-height: clamp(2.35rem, 7.2svh, 2.85rem);
    }

    .converter-inputs > label {
        min-height: clamp(2.35rem, 7.2svh, 2.9rem);
    }

    .converted-time-card {
        min-height: 0;
        align-content: center;
    }

    .converted-time-card strong {
        font-size: clamp(1.9rem, 8svh, 3rem);
    }
}

@media (max-height: 560px) {
    .converter-title p {
        display: none;
    }

    .converter-card,
    .converted-time-card,
    .converter-inputs > label {
        box-shadow:
            0 0.7rem 1.8rem rgba(42, 65, 91, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }
}

/* Mobile header polish: two-row app bar with segmented navigation. */
@media (max-width: 640px) {
    .world-time-page .site-header {
        min-height: clamp(4.65rem, 9.2svh, 5.15rem);
        padding: 0 clamp(0.7rem, 3vw, 1rem);
        display: block;
    }

    .world-time-page .brand {
        position: absolute;
        top: 0.58rem;
        left: clamp(0.7rem, 3vw, 1rem);
        gap: 0.42rem;
        font-size: clamp(0.78rem, 3.35vw, 0.92rem);
        font-weight: 400;
        max-width: calc(100vw - 7.6rem);
    }

    .world-time-page .brand-mark {
        width: 1.7rem;
        height: 1.12rem;
    }

    .world-time-page .header-actions {
        position: absolute;
        top: 0.45rem;
        right: clamp(0.7rem, 3vw, 1rem);
        gap: 0.45rem;
    }

    .world-time-page .header-tool-button,
    .world-time-page .header-profile-button,
    .world-time-page .header-text-button {
        width: 1.92rem;
        height: 1.92rem;
        background: rgba(255, 255, 255, 0.88);
    }

    .world-time-page .header-tool-button svg,
    .world-time-page .header-profile-button svg,
    .world-time-page .add-city-button svg,
    .world-time-page .fullscreen-button svg {
        width: 1rem;
        height: 1rem;
    }

    .world-time-page .top-nav {
        position: absolute;
        left: clamp(0.7rem, 3vw, 1rem);
        right: clamp(0.7rem, 3vw, 1rem);
        bottom: 0.48rem;
        width: auto;
        height: 2rem;
        padding: 0.16rem;
        border: 1px solid rgba(109, 132, 158, 0.12);
        border-radius: 999px;
        display: grid;
        grid-template-columns: 0.95fr 0.64fr 0.9fr 0.74fr 1.28fr;
        gap: 0.1rem;
        background: rgba(238, 246, 252, 0.68);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(14px);
    }

    .world-time-page .nav-tab {
        min-width: 0;
        min-height: 100%;
        padding: 0 0.16rem;
        border-radius: 999px;
        font-size: clamp(0.68rem, 2.16vw, 0.76rem);
        font-weight: 400;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .world-time-page .nav-tab.active {
        color: #071225;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 0.25rem 0.7rem rgba(39, 80, 125, 0.1);
    }

    .world-time-page .nav-tab.active::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .converter-shell {
        padding: calc(clamp(4.65rem, 9.2svh, 5.15rem) + clamp(0.45rem, 1.6svh, 1rem)) clamp(0.78rem, 4vw, 1.25rem) clamp(0.8rem, 2.6svh, 1.6rem);
        align-items: start;
    }

    .converter-stage {
        width: min(100%, 92vw);
        min-height: auto;
        grid-template-rows: none;
        gap: clamp(0.45rem, 1.55svh, 0.75rem);
    }

    .converter-title h1 {
        font-size: clamp(1.05rem, min(5.8vw, 3.1svh), 1.28rem);
    }

    .converter-title p {
        margin-top: clamp(0.16rem, 0.7svh, 0.3rem);
        font-size: clamp(0.72rem, min(3.2vw, 1.8svh), 0.82rem);
    }

    .converter-card {
        padding: clamp(0.58rem, 1.7svh, 0.78rem);
        gap: clamp(0.42rem, 1.3svh, 0.62rem);
    }

    .converter-select-wrap {
        min-height: clamp(2.55rem, 7svh, 3rem);
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: clamp(0.45rem, 2.4vw, 0.62rem);
    }

    .zone-offset {
        grid-column: 2;
        grid-row: 2;
        margin-top: -0.25rem;
        font-size: 0.68rem;
    }

    .zone-caret {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .zone-menu {
        max-height: min(24rem, 58svh);
        padding: 0.65rem;
    }

    .zone-option-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .converter-swap {
        width: clamp(2rem, 5.8svh, 2.35rem);
        height: clamp(2rem, 5.8svh, 2.35rem);
        margin-block: clamp(-0.22rem, -0.55svh, -0.14rem);
    }

    .converter-inputs {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(0.45rem, 1.6svh, 0.75rem);
    }

    .converter-inputs > label {
        min-height: clamp(2.65rem, 7svh, 3.15rem);
    }

    .converted-time-card {
        min-height: clamp(5.15rem, 15svh, 6.4rem);
        padding: clamp(0.68rem, 2svh, 0.9rem);
    }

    .alarms-shell {
        padding: calc(clamp(4.65rem, 9.2svh, 5.15rem) + 1.15rem) clamp(0.9rem, 4vw, 1.25rem) 2rem;
    }

    .world-time-page .header-text-button {
        width: auto;
        min-width: 2.15rem;
        padding-inline: 0.55rem;
        gap: 0.25rem;
        font-size: 0;
    }

    .world-time-page .header-text-button span {
        display: none;
    }

    .world-time-page .header-text-button svg {
        width: 1rem;
        height: 1rem;
    }

    .alarm-filters {
        margin-bottom: 1rem;
    }

    .alarm-editor-panel {
        margin-bottom: 0.85rem;
        padding: 0.75rem;
    }

    .alarm-editor-head {
        margin-bottom: 0.55rem;
    }

    .alarm-editor-head > div {
        flex-wrap: wrap;
        row-gap: 0.1rem;
    }

    .alarm-editor-head h1 {
        font-size: 1.05rem;
    }

    .alarm-editor-form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "note"
            "time"
            "quick"
            "repeat"
            "active"
            "actions";
        gap: 0.55rem;
    }

    .alarm-quick-add > div,
    .alarm-list-quick-add > div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .alarm-quick-add button,
    .alarm-list-quick-add button {
        width: 100%;
        padding-inline: 0.55rem;
    }

    .alarm-list-quick-add {
        margin-top: 0.85rem;
        padding: 0.78rem;
        display: grid;
        gap: 0.55rem;
    }

    .alarm-list-quick-add > div {
        justify-content: initial;
    }

    .alarm-pin-tip {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .alarm-pin-tip p {
        width: calc(100% - 2.15rem);
    }

    .alarm-pin-tip button {
        margin-left: 2.15rem;
    }

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

    .alarm-day-chip {
        justify-content: center;
    }

    .alarm-editor-active {
        justify-self: stretch;
        justify-content: center;
    }

    .alarm-editor-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alarm-editor-save,
    .alarm-editor-cancel {
        width: 100%;
        padding-inline: 0.75rem;
    }

    .alarm-filter {
        min-height: 2.35rem;
        font-size: clamp(0.76rem, 3vw, 0.86rem);
    }

    .alarm-carousel-bar {
        margin: -0.25rem 0 0.75rem;
        gap: 0.65rem;
    }

    .alarm-carousel-tools {
        gap: 0.45rem;
    }

    .alarm-carousel-button {
        width: 2rem;
        height: 2rem;
    }

    .alarm-add-button {
        min-height: 2rem;
        padding-inline: 0.65rem;
        font-size: 0.78rem;
    }

    .alarm-add-button svg {
        width: 0.92rem;
        height: 0.92rem;
    }

    .alarm-grid {
        gap: 0.85rem;
    }

    .alarm-card {
        min-height: 10.9rem;
        padding: 1rem;
    }

    .alarm-bell {
        width: 1.35rem;
        height: 1.35rem;
    }

    .alarm-menu-button {
        width: 1.7rem;
        height: 1.7rem;
    }

    .alarm-card-actions {
        gap: 0.35rem;
    }

    .alarm-edit-button,
    .alarm-delete-button {
        width: 1.8rem;
        height: 1.8rem;
        min-height: 1.8rem;
        padding: 0;
    }

    .alarm-edit-button svg,
    .alarm-delete-button svg {
        width: 0.9rem;
        height: 0.9rem;
    }

    .alarm-time strong {
        font-size: clamp(1.95rem, 9vw, 2.55rem);
    }

    .alarm-time span {
        font-size: 0.75rem;
    }

    .alarm-note {
        max-width: calc(100% - 2.8rem);
        font-size: 0.76rem;
    }

    .alarm-repeat {
        margin-top: 0.55rem;
        padding-right: 2.6rem;
        font-size: 0.72rem;
    }

    .alarm-switch {
        right: 0.95rem;
        bottom: 0.95rem;
    }

    .next-alarm-card {
        min-height: 4.6rem;
        margin-top: 1rem;
        padding: 0.85rem 1rem;
    }
}

@media (max-width: 430px) {
    .alarm-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .alarm-card {
        min-height: 9.7rem;
    }
}

/* /timer viewport-fit pass: keep timer app inside one browser viewport. */
.timer-page {
    --timer-panel-width: min(57vw, 74svh);
    --timer-dial-size: min(34vw, 39svh);
    height: var(--page-vh);
    min-height: var(--page-vh);
    overflow: hidden;
}

.timer-page .timer-hero {
    height: var(--page-vh);
    min-height: var(--page-vh);
    overflow: hidden;
    padding-top: 9.35svh;
    padding-bottom: 1.2svh;
}

.timer-page .timer-shell {
    align-items: start;
}

.timer-page .timer-console {
    max-height: calc(var(--page-vh) - 10.55svh);
    padding: min(2vw, 2.8svh) min(2.35vw, 3.35svh);
    gap: min(0.88vw, 1.16svh);
}

.timer-page .timer-dial {
    width: var(--timer-dial-size);
}

/* Prevent time digits from overflowing the dial circle.
   Inner usable width ~82% of dial (ring::before inset:8.5% each side = 17% total).
   "00:25:00" is 8 chars; font-size * ~4.8ch-width-ratio must stay under 0.82 * dial. */
.timer-page .timer-dial .timer-display {
    gap: min(0.9vw, 1.3svh);
    transform: translateY(min(0.6vw, 0.85svh));
}

.timer-page .timer-dial .timer-display strong {
    font-size: clamp(1.4rem, min(4.2vw, 5.2svh), 3.8rem);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

.timer-page .timer-dial .timer-status {
    font-size: min(0.88vw, 1.4svh);
}

.timer-page .timer-dial .timer-duration-pill {
    min-height: min(2.6vw, 4svh);
    padding: 0 min(1.2vw, 2svh);
    font-size: min(0.9vw, 1.55svh);
}

.timer-page .duration-stepper {
    min-height: min(6vw, 7.55svh);
}

.timer-page .timer-presets button {
    min-height: min(3.1vw, 4.65svh);
}

.timer-page .timer-action {
    min-height: min(3.75vw, 5.55svh);
}

.timer-page .timer-audio-card,
.timer-page .repeat-control {
    min-height: min(3.85vw, 5.65svh);
}

@media (max-width: 920px) {
    .timer-page {
        --timer-panel-width: min(91vw, 72svh);
        --timer-dial-size: min(58vw, 28svh);
    }

    .timer-page .timer-hero {
        padding-top: 8.4svh;
        padding-bottom: 1svh;
    }

    .timer-page .timer-console {
        max-height: calc(var(--page-vh) - 9.4svh);
    }
}

@media (max-width: 640px) {
    .timer-page {
        --timer-panel-width: 88vw;
        --timer-dial-size: min(58vw, 21svh);
    }

    .timer-page .timer-hero {
        padding-top: clamp(5.1rem, 9.7svh, 5.6rem);
        padding-bottom: 0.8svh;
    }

    .timer-page .timer-console {
        max-height: calc(var(--page-vh) - clamp(5.9rem, 10.5svh, 6.4rem));
        padding: min(3vw, 1.25svh);
        gap: min(1.8vw, 0.72svh);
    }

    .timer-page .duration-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: min(1.15vw, 0.5svh);
    }

    .timer-page .duration-stepper {
        min-height: min(18vw, 7.35svh);
        padding: min(1.45vw, 0.62svh);
        grid-template-columns: min(5.6vw, 2.35svh) 1fr min(5.6vw, 2.35svh);
        grid-template-rows: auto auto;
        gap: min(0.8vw, 0.35svh);
    }

    .timer-page .duration-stepper button {
        width: min(5.6vw, 2.35svh);
        height: min(5.6vw, 2.35svh);
        font-size: min(2.3vw, 1svh);
    }

    .timer-page .duration-stepper button:first-of-type {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .timer-page .duration-stepper button:last-of-type {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .timer-page .duration-stepper output {
        grid-column: 2;
        grid-row: 1;
        font-size: min(5vw, 2.05svh);
    }

    .timer-page .duration-stepper span {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0;
        font-size: min(1.85vw, 0.82svh);
    }

    .timer-page .timer-presets button {
        min-height: min(6.2vw, 2.58svh);
    }

    .timer-page .timer-action {
        min-height: min(7.25vw, 3.02svh);
    }

    .timer-page .timer-audio-card {
        min-height: min(13.2vw, 5.38svh);
    }

    .timer-page .repeat-control {
        min-height: min(7vw, 2.92svh);
    }

    .timer-page .timer-dial .timer-display {
        gap: min(1.8vw, 0.72svh);
        transform: translateY(min(0.5vw, 0.5svh));
    }

    .timer-page .timer-dial .timer-display strong {
        font-size: clamp(1.4rem, min(8.5vw, 4.5svh, calc(var(--timer-dial-size) * 0.25)), 3rem);
    }

    .timer-page .timer-dial .timer-status {
        font-size: min(2.6vw, 1.18svh);
    }

    .timer-page .timer-dial .timer-duration-pill {
        min-height: min(5.5vw, 2.3svh);
        padding: 0 min(2.6vw, 1.05svh);
        font-size: min(2.8vw, 1.2svh);
    }
}

.stopwatch-page .timer-console {
    width: min(100%, var(--timer-panel-width));
}

.stopwatch-page .timer-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stopwatch-page .timer-display strong {
    font-size: min(4.8vw, 6.6svh);
}

.stopwatch-laps {
    min-height: min(13vw, 17svh);
    max-height: min(16vw, 21svh);
    padding: min(1.1vw, 1.55svh);
    border: 1px solid rgba(119, 143, 170, 0.13);
    border-radius: var(--radius-sm);
    overflow: auto;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--timer-control-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.stopwatch-laps-head,
.stopwatch-lap-row {
    display: grid;
    grid-template-columns: 0.6fr 1fr 1fr;
    gap: min(1vw, 1.4svh);
    align-items: center;
    color: #172033;
    font-size: min(0.95vw, 1.5svh);
    font-variant-numeric: tabular-nums;
}

.stopwatch-laps-head {
    color: #67768d;
    font-weight: 840;
}

.stopwatch-lap-row {
    min-height: min(2.35vw, 3.55svh);
    border-top: 1px solid rgba(119, 143, 170, 0.13);
    font-weight: 740;
}

.stopwatch-laps p {
    padding: min(2vw, 3svh) 0;
    color: #67768d;
    font-size: min(0.95vw, 1.5svh);
    font-weight: 760;
    text-align: center;
}

/* Time converter comparison module */
.converter-page {
    --converter-card-border: rgba(96, 112, 135, 0.15);
    --converter-card-bg: rgba(255, 255, 255, 0.78);
    --converter-soft-blue: rgba(11, 125, 240, 0.1);
    --converter-deep-blue: #155ec7;
}

.converter-shell {
    align-items: start;
    width: 100%;
    min-height: var(--page-vh);
    overflow-x: clip;
    padding: calc(var(--header-h) + clamp(0.28rem, 0.75svh, 0.55rem)) clamp(0.9rem, 2.2vw, 1.6rem) clamp(0.55rem, 1.2svh, 0.85rem);
}

.converter-stage {
    width: min(96vw, 88rem);
    width: min(96dvw, 88rem);
    min-height: calc(var(--page-vh) - var(--header-h) - clamp(3rem, 5svh, 3.8rem));
    grid-template-areas:
        "hero"
        "workbench"
        "info";
    grid-template-rows: clamp(7.15rem, 16svh, 9.4rem) minmax(0, 1fr) clamp(2.85rem, 5.2svh, 3.45rem);
    gap: clamp(0.62rem, 1vw, 0.9rem);
}

.converter-hero {
    grid-area: hero;
    display: grid;
    grid-template-columns: minmax(22rem, 0.9fr) minmax(34rem, 1fr);
    gap: clamp(1rem, 3.2vw, 4rem);
    align-items: center;
}

.converter-title {
    grid-area: auto;
    text-align: left;
}

.converter-title h1 {
    font-size: clamp(2.45rem, 3.6vw, var(--type-h1));
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.1;
}

.converter-title p {
    max-width: 34rem;
    font-size: clamp(0.95rem, 1.1vw, var(--type-body));
    line-height: 1.6;
    font-weight: 400;
}

.converter-hero-panel,
.converter-card,
.time-scale-card,
.converter-info-strip,
.converter-field-control,
.converter-readout,
.converter-relation-card {
    border: 1px solid var(--converter-card-border);
    border-radius: 8px;
    background: var(--converter-card-bg);
    box-shadow:
        0 1.2rem 3.1rem rgba(42, 65, 91, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
}

.converter-hero-panel {
    min-height: clamp(6.15rem, 13.8svh, 7.35rem);
    padding: clamp(0.78rem, 1.35vw, 1rem) clamp(1rem, 1.8vw, 1.35rem);
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(0.65rem, 1.5vw, 1.2rem);
    align-items: center;
    min-width: 0;
}

.hero-city-time {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.hero-city-time-end {
    text-align: right;
}

.hero-city-time span {
    color: var(--converter-ink);
    font-size: clamp(0.95rem, 2.8cqw, var(--type-city-name));
    line-height: 1.3;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-city-time strong {
    display: flex;
    align-items: baseline;
    gap: clamp(0.32rem, 0.9cqw, 0.55rem);
    color: #1552bc;
    font-size: clamp(1.75rem, 6.7cqw, 3rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
}

.hero-city-time-end strong {
    justify-content: flex-end;
}

.hero-city-time small,
.hero-difference small {
    color: var(--converter-muted);
    font-size: clamp(0.78rem, 2.2cqw, var(--type-small));
    line-height: 1.5;
    font-weight: 500;
}

.hero-difference {
    display: grid;
    place-items: center;
    gap: 0.35rem;
    color: #1c2d4a;
    font-size: clamp(0.78rem, 2.1cqw, var(--type-small));
    font-weight: 700;
    text-align: center;
    min-width: 4.25rem;
}

.hero-swap,
.control-swap {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

.hero-swap {
    width: 2.35rem;
    height: 2.35rem;
    box-shadow: 0 0.55rem 1.35rem rgba(42, 65, 91, 0.11);
}

.converter-workbench {
    grid-area: workbench;
    display: grid;
    grid-template-columns: clamp(18.6rem, 22vw, 20.6rem) minmax(0, 1fr);
    gap: clamp(1rem, 1.55vw, 1.35rem);
    align-items: stretch;
    min-height: 0;
}

.converter-control-card {
    grid-area: auto;
    align-content: start;
    gap: clamp(0.58rem, 1.05svh, 0.78rem);
    padding: clamp(0.9rem, 1.25vw, 1.15rem);
    z-index: 30;
    min-height: 100%;
}

.converter-control-section {
    display: grid;
    gap: clamp(0.48rem, 0.9svh, 0.68rem);
    min-width: 0;
}

.converter-control-section:first-child .zone-badge {
    background: #e3394c;
}

.converter-control-card .converter-zone > span:first-child {
    display: block;
}

.converter-control-card .converter-select-wrap {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: clamp(4.25rem, 8.2svh, 4.85rem);
    padding: clamp(0.62rem, 1svh, 0.75rem) clamp(0.75rem, 1vw, 0.95rem);
    background: rgba(255, 255, 255, 0.68);
}

.converter-control-card .zone-offset {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--type-timezone);
    line-height: 1.3;
    font-weight: 500;
}

.converter-control-card .zone-caret {
    grid-column: 3;
    grid-row: 1;
}

.converter-mini-inputs,
.converter-readout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.46rem, 0.85svh, 0.62rem);
}

.converter-field {
    display: grid;
    gap: 0.25rem;
}

.converter-field > span:first-child,
.converter-readout span {
    color: var(--converter-muted);
    font-size: var(--type-caption);
    line-height: 1.4;
    font-weight: 820;
    text-transform: uppercase;
}

.converter-field-control {
    min-height: clamp(2.7rem, 5.2svh, 3.15rem);
    padding: 0 0.68rem;
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
}

.converter-field-control {
    gap: 0.42rem;
}

.converter-field-control svg,
.converter-relation-card svg,
.converter-info-strip svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #61718b;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.converter-field-control input,
.converter-field-control select {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--converter-ink);
    font: inherit;
    font-weight: 760;
    outline: none;
}

.converter-field-control input {
    flex: 1 1 0;
}

.converter-time-control select {
    flex: 0 0 3.25rem;
    width: 3.25rem;
    padding-left: 0.42rem;
    border-left: 1px solid rgba(96, 112, 135, 0.18);
}

.control-swap {
    justify-self: center;
    width: 2.1rem;
    height: 2.1rem;
    margin: -0.18rem 0;
    box-shadow: 0 0.55rem 1.35rem rgba(42, 65, 91, 0.12);
}

.converter-readout {
    min-height: clamp(2.7rem, 5.2svh, 3.15rem);
    padding: 0.52rem 0.68rem;
    display: grid;
    gap: 0.12rem;
}

.converter-readout strong {
    color: #1d2b45;
    font-size: var(--type-small);
    line-height: 1.35;
    font-weight: 650;
}

.converter-relation-card {
    padding: clamp(0.72rem, 1.15svh, 0.9rem) 0.78rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    color: #24406c;
    background: rgba(238, 246, 255, 0.72);
    font-size: var(--type-small);
    line-height: 1.5;
    font-weight: 600;
}

.time-scale-card {
    min-width: 0;
    min-height: auto;
    padding: clamp(1rem, 1.45vw, 1.35rem);
    align-self: start;
    display: grid;
    grid-template-rows: auto auto;
    gap: clamp(0.65rem, 1svh, 0.85rem);
    align-content: start;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 32%),
        radial-gradient(ellipse at 50% 18%, rgba(64, 132, 205, 0.08), transparent 40%),
        radial-gradient(ellipse at 52% 86%, rgba(64, 132, 205, 0.055), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 254, 0.9));
    box-shadow:
        0 1.4rem 3.2rem rgba(42, 65, 91, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.timeline-row-header time {
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(96, 112, 135, 0.16);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.46rem;
    color: #40536f;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 0.45rem 0.95rem rgba(38, 59, 91, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    font-size: var(--type-timezone);
    line-height: 1.3;
    font-weight: 600;
    white-space: nowrap;
}

.timeline-row-header time::before {
    content: "";
    flex: 0 0 auto;
    width: 0.92rem;
    height: 0.92rem;
    background: currentColor;
    opacity: 0.72;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.summary-badge {
    width: fit-content;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    color: #155ec7;
    background: rgba(11, 125, 240, 0.1);
    font-size: var(--type-caption);
    line-height: 1.4;
    font-weight: 820;
    text-transform: uppercase;
}

.summary-badge.next-day {
    color: #7b4b00;
    background: rgba(255, 178, 64, 0.16);
}

.summary-badge.previous-day {
    color: #6b3baa;
    background: rgba(117, 83, 205, 0.13);
}

.timeline-scroll {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0 0 1.45rem;
    display: grid;
    align-content: start;
}

.timeline-comparison {
    --marker-left: 50%;
    --timeline-marker-top: clamp(5.45rem, 10.55svh, 6.2rem);
    --timeline-marker-bottom: 0.7rem;
    position: relative;
    min-width: 100%;
    min-height: auto;
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 0;
    padding: 0;
}

.timeline-row {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: clamp(0.42rem, 0.75svh, 0.62rem);
    padding: clamp(0.15rem, 0.35svh, 0.28rem) 0 clamp(1rem, 1.85svh, 1.2rem);
    border-bottom: 1px solid rgba(96, 112, 135, 0.16);
}

.timeline-row:last-child {
    border-bottom: 0;
    padding-top: clamp(1rem, 2.2svh, 1.3rem);
    padding-bottom: 0.2rem;
}

.timeline-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.8rem, 1.6vw, 1.35rem);
    min-height: 2.5rem;
}

.timeline-city {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.56rem;
    color: var(--converter-ink);
}

.timeline-city::before {
    content: "";
    align-self: center;
    width: 0.68rem;
    height: 0.68rem;
    flex: 0 0 0.68rem;
    border-radius: 999px;
    background: #0b73f6;
    box-shadow:
        0 0 0 0.18rem rgba(11, 115, 246, 0.08),
        0 0.4rem 0.7rem rgba(11, 115, 246, 0.2);
}

.timeline-city strong {
    font-size: var(--type-city-name);
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

.timeline-city small {
    color: var(--converter-muted);
    font-size: var(--type-timezone);
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

.timeline-labels {
    position: relative;
    height: clamp(2.1rem, 4.6svh, 2.55rem);
    margin: 0 0.25rem;
}

.timeline-label {
    position: absolute;
    top: 0;
    display: grid;
    color: #1c2d47;
    font-size: var(--type-small);
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    transform: translateX(-50%);
}

.timeline-label small {
    margin-top: 0.08rem;
    font-size: var(--type-caption);
    line-height: 1.4;
    font-weight: 500;
}

.timeline-label:first-child {
    text-align: left;
    transform: translateX(0);
}

.timeline-label:last-child {
    text-align: right;
    transform: translateX(-100%);
}

.timeline-track {
    --timeline-day-start: 25%;
    --timeline-day-end: 75%;
    --timeline-sun-center: 50%;
    --timeline-night: #446fa5;
    --timeline-dawn: #d7e4f2;
    --timeline-day: #f7f3eb;
    --timeline-moon-cutout: var(--timeline-night);
    --timeline-moon-edge: rgba(255, 255, 255, 0.22);
    --timeline-dawn-halo: rgba(255, 206, 151, 0.62);
    --timeline-dawn-halo-soft: rgba(255, 211, 164, 0.18);
    --timeline-day-glow: rgba(255, 250, 239, 0.34);
    --timeline-star-bright: rgba(255, 255, 255, 0.9);
    --timeline-star-soft: rgba(255, 255, 255, 0.58);
    --timeline-star-warm: rgba(255, 232, 190, 0.44);
    --timeline-star-haze: rgba(206, 229, 247, 0.2);
    --timeline-top-sheen: rgba(255, 255, 255, 0.24);
    --timeline-bottom-shade: rgba(22, 41, 71, 0.08);
    --timeline-side-vignette: rgba(9, 24, 51, 0.14);
    --timeline-inner-line: rgba(255, 255, 255, 0.24);
    position: relative;
    height: clamp(5.15rem, 11.8svh, 6.65rem);
    border: 1px solid rgba(76, 102, 136, 0.24);
    border-radius: 10px;
    overflow: visible;
    isolation: isolate;
    background-clip: padding-box;
    background-color: #edf5fa;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 -1px 0 rgba(43, 67, 102, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 0.7rem 1.55rem rgba(38, 59, 91, 0.11);
}

.timeline-track::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: 9px;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse at var(--timeline-day-start) 104%, var(--timeline-dawn-halo) 0 7%, var(--timeline-dawn-halo-soft) 22%, transparent 42%),
        radial-gradient(ellipse at var(--timeline-day-end) 104%, var(--timeline-dawn-halo) 0 7%, var(--timeline-dawn-halo-soft) 22%, transparent 42%),
        radial-gradient(ellipse at var(--timeline-sun-center) 52%, var(--timeline-day-glow) 0, transparent 34%),
        radial-gradient(circle at 6% 20%, var(--timeline-star-bright) 0 0.95px, transparent 1.75px),
        radial-gradient(circle at 9% 52%, var(--timeline-star-soft) 0 0.72px, transparent 1.38px),
        radial-gradient(circle at 14% 31%, var(--timeline-star-warm) 0 0.68px, transparent 1.35px),
        radial-gradient(circle at 19% 70%, var(--timeline-star-soft) 0 0.72px, transparent 1.42px),
        radial-gradient(circle at 24% 18%, var(--timeline-star-soft) 0 0.72px, transparent 1.35px),
        radial-gradient(circle at 31% 72%, var(--timeline-star-bright) 0 0.86px, transparent 1.55px),
        radial-gradient(circle at 38% 34%, var(--timeline-star-soft) 0 0.66px, transparent 1.28px),
        radial-gradient(circle at 45% 62%, var(--timeline-star-soft) 0 0.72px, transparent 1.35px),
        radial-gradient(circle at 53% 23%, var(--timeline-star-bright) 0 0.78px, transparent 1.48px),
        radial-gradient(circle at 61% 66%, var(--timeline-star-soft) 0 0.68px, transparent 1.3px),
        radial-gradient(circle at 69% 36%, var(--timeline-star-warm) 0 0.68px, transparent 1.32px),
        radial-gradient(circle at 76% 74%, var(--timeline-star-soft) 0 0.72px, transparent 1.42px),
        radial-gradient(circle at 82% 19%, var(--timeline-star-bright) 0 0.92px, transparent 1.7px),
        radial-gradient(circle at 88% 57%, var(--timeline-star-soft) 0 0.74px, transparent 1.42px),
        radial-gradient(circle at 94% 29%, var(--timeline-star-bright) 0 0.86px, transparent 1.58px),
        radial-gradient(circle at 97% 72%, var(--timeline-star-soft) 0 0.64px, transparent 1.24px),
        radial-gradient(ellipse at 50% 50%, var(--timeline-star-haze) 0, transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 48%, rgba(255, 255, 255, 0.02));
    background-repeat: no-repeat;
}

.timeline-track::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: 9px;
    pointer-events: none;
    background:
        linear-gradient(180deg, var(--timeline-top-sheen), rgba(255, 255, 255, 0.04) 20%, transparent 48%, rgba(255, 255, 255, 0.02) 72%, var(--timeline-bottom-shade)),
        linear-gradient(90deg, var(--timeline-side-vignette), transparent 12%, transparent 88%, var(--timeline-side-vignette));
    box-shadow: inset 0 0 0 1px var(--timeline-inner-line);
}

.timeline-range {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
}

.timeline-minor-ticks {
    position: absolute;
    top: -0.75rem;
    left: 0;
    right: 0;
    z-index: 3;
    height: 0.75rem;
    pointer-events: none;
}

.timeline-minor-ticks span {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 0.32rem;
    background: rgba(96, 112, 135, 0.28);
    transform: translateX(-50%);
}

.timeline-minor-ticks span.major {
    height: 0.62rem;
    background: rgba(96, 112, 135, 0.42);
}

.timeline-icon {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: block;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.timeline-sun {
    width: clamp(1.2rem, 1.06rem + 0.32vw, 1.44rem);
    height: clamp(1.2rem, 1.06rem + 0.32vw, 1.44rem);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 34%, #fff8db 0 18%, #ffd76d 22%, #ffbe45 63%, #ff9f2e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 204, 0.74),
        0 0 0 0.16rem rgba(255, 196, 84, 0.22),
        0 0 0 0.42rem rgba(255, 196, 84, 0.1),
        0 0 1.35rem rgba(255, 176, 64, 0.56);
}

.timeline-sun::before {
    content: "";
    position: absolute;
    inset: -0.54rem;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #ffad24 0deg 5deg, transparent 5deg 28deg);
    filter: drop-shadow(0 0 0.28rem rgba(255, 172, 47, 0.28));
    mask: radial-gradient(circle, transparent 0 50%, #000 51% 60%, transparent 61%);
}

.timeline-sun::after {
    content: "";
    position: absolute;
    inset: 0.18rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.05) 42%, transparent 58%);
}

.timeline-moon {
    width: clamp(1.15rem, 1.01rem + 0.3vw, 1.36rem);
    height: clamp(1.15rem, 1.01rem + 0.3vw, 1.36rem);
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 32% 30%, #fffef8 0 28%, #eef5ff 58%, #c7d9ef 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.34),
        0 0.4rem 0.95rem rgba(21, 43, 74, 0.22),
        0 0 1rem rgba(198, 221, 255, 0.16);
}

.timeline-moon::before {
    content: "";
    position: absolute;
    inset: 0.13rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 42%, transparent 60%);
}

.timeline-moon::after {
    content: "";
    position: absolute;
    top: -0.04rem;
    right: -0.4rem;
    width: clamp(1.15rem, 1.01rem + 0.3vw, 1.36rem);
    height: clamp(1.15rem, 1.01rem + 0.3vw, 1.36rem);
    border-radius: 50%;
    background: var(--timeline-moon-cutout);
    box-shadow: inset 0 0 0 1px var(--timeline-moon-edge);
}

.timeline-marker {
    position: absolute;
    top: var(--timeline-marker-top);
    bottom: var(--timeline-marker-bottom);
    left: var(--marker-left);
    z-index: 10;
    width: 0;
    pointer-events: none;
}

.timeline-marker::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(21, 107, 232, 0.2), #176eea 10%, #176eea 90%, rgba(21, 107, 232, 0.2));
    box-shadow:
        0 0 0 1px rgba(23, 110, 234, 0.1),
        0 0.8rem 2.4rem rgba(23, 110, 234, 0.16);
    transform: translateX(-50%);
}

.timeline-marker::after {
    content: none;
}

.timeline-marker-pill {
    position: absolute;
    left: 50%;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    isolation: isolate;
    color: #fff;
    background: linear-gradient(180deg, #2b83f6, #1267df);
    box-shadow:
        0 0.72rem 1.45rem rgba(23, 110, 234, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-size: var(--type-timezone);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}

.timeline-marker-pill::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: -1;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 2px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.timeline-marker-pill-top {
    top: -2rem;
}

.timeline-marker-pill-top::after {
    bottom: -0.22rem;
}

.timeline-marker-pill-bottom {
    bottom: -2rem;
}

.timeline-marker-pill-bottom::after {
    top: -0.22rem;
}

.timeline-marker-handle {
    position: absolute;
    top: calc(50% - 0.95rem);
    left: -0.95rem;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(23, 110, 234, 0.28);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #176eea;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 0.62rem 1.4rem rgba(23, 110, 234, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    cursor: ew-resize;
}

.timeline-marker-handle::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #176eea;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.96),
        0 0 0 3px rgba(23, 110, 234, 0.1);
}

.timeline-marker-handle svg {
    display: none;
}

.timeline-marker-range {
    position: absolute;
    top: var(--timeline-marker-top);
    bottom: var(--timeline-marker-bottom);
    left: 0;
    z-index: 9;
    width: 100%;
    opacity: 0;
    cursor: ew-resize;
}

.timeline-scale-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    align-items: center;
    color: #66748a;
    font-size: var(--type-caption);
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
}

.timeline-scale-footer span {
    height: 1px;
    background: rgba(96, 112, 135, 0.2);
}

.converter-info-strip {
    grid-area: info;
    min-height: 100%;
    padding: 0.45rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #24406c;
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 400;
    background: rgba(244, 249, 255, 0.78);
}

.converter-info-strip a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #155ec7;
    font-weight: 600;
}

.converter-info-strip a svg {
    width: 0.82rem;
    height: 0.82rem;
    stroke: currentColor;
}

@media (min-width: 981px) and (max-height: 900px) {
    .converter-shell {
        padding: calc(max(var(--header-h), 4.25rem) + clamp(0.16rem, 0.45svh, 0.35rem)) clamp(0.85rem, 2vw, 1.45rem) clamp(0.35rem, 0.9svh, 0.65rem);
    }

    .converter-stage {
        min-height: calc(var(--page-vh) - max(var(--header-h), 4.25rem) - clamp(0.8rem, 2svh, 1.15rem));
        grid-template-rows: clamp(6.9rem, 13svh, 7.5rem) minmax(0, 1fr) clamp(2.35rem, 5svh, 2.85rem);
        gap: clamp(0.42rem, 1svh, 0.7rem);
    }

    .converter-title h1 {
        font-size: clamp(2.15rem, 3.2vw, 2.65rem);
    }

    .converter-title p {
        font-size: 0.9375rem;
        line-height: 1.45;
    }

    .converter-hero-panel {
        min-height: clamp(5.3rem, 11.6svh, 6.3rem);
        padding: clamp(0.62rem, 1.15vw, 0.82rem) clamp(0.85rem, 1.55vw, 1.1rem);
        gap: clamp(0.42rem, 1vw, 0.8rem);
    }

    .hero-city-time {
        gap: 0.18rem;
    }

    .hero-city-time strong {
        font-size: clamp(1.65rem, 6cqw, 2.55rem);
    }

    .hero-city-time small,
    .hero-difference small {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .hero-swap {
        width: 2.05rem;
        height: 2.05rem;
    }

    .converter-workbench {
        grid-template-columns: clamp(22rem, 28vw, 23.5rem) minmax(0, 1fr);
        gap: clamp(0.75rem, 1.2vw, 1rem);
        min-height: 0;
    }

    .converter-control-card {
        min-height: 0;
        height: 100%;
        gap: clamp(0.34rem, 0.7svh, 0.48rem);
        padding: clamp(0.58rem, 0.95vw, 0.78rem);
    }

    .converter-control-section {
        gap: clamp(0.32rem, 0.65svh, 0.46rem);
    }

    .converter-control-card .converter-select-wrap {
        min-height: clamp(3.25rem, 7.3svh, 3.85rem);
        padding: clamp(0.42rem, 0.76svh, 0.58rem) clamp(0.62rem, 0.95vw, 0.78rem);
    }

    .converter-control-card .zone-badge {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0.68rem;
    }

    .converter-control-card .zone-main strong {
        font-size: 0.98rem;
    }

    .converter-control-card .zone-main small,
    .converter-control-card .zone-offset {
        font-size: 0.75rem;
    }

    .converter-mini-inputs,
    .converter-readout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.36rem;
    }

    .converter-mini-inputs {
        grid-template-columns: minmax(0, 1fr);
    }

    .converter-field {
        gap: 0.18rem;
    }

    .converter-field-control {
        min-height: clamp(2.25rem, 5.3svh, 2.6rem);
        padding: 0 0.52rem;
    }

    .converter-field-control input,
    .converter-field-control select {
        font-size: 0.875rem;
    }

    .converter-time-control select {
        flex-basis: 2.75rem;
        width: 2.75rem;
        padding-left: 0.32rem;
    }

    .control-swap {
        width: 1.85rem;
        height: 1.85rem;
        margin: -0.18rem 0;
    }

    .converter-readout {
        min-height: clamp(2.25rem, 5.3svh, 2.6rem);
        padding: 0.42rem 0.52rem;
    }

    .converter-readout strong {
        font-size: 0.8125rem;
        line-height: 1.25;
    }

    .converter-relation-card {
        min-height: clamp(2.55rem, 6svh, 3rem);
        padding: 0.48rem 0.58rem;
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .time-scale-card {
        min-height: 0;
        height: 100%;
        padding: clamp(0.62rem, 1vw, 0.88rem);
        gap: clamp(0.42rem, 0.8svh, 0.62rem);
    }

    .timeline-row {
        gap: clamp(0.28rem, 0.58svh, 0.42rem);
        padding: 0 0 clamp(0.65rem, 1.35svh, 0.9rem);
    }

    .timeline-row:last-child {
        padding-top: clamp(0.65rem, 1.55svh, 1rem);
    }

    .timeline-labels {
        height: clamp(1.7rem, 3.8svh, 2.05rem);
    }

    .timeline-track {
        height: clamp(4rem, 10.8svh, 5.05rem);
    }

    .timeline-comparison {
        --timeline-marker-top: clamp(4.55rem, 10svh, 5.7rem);
        --timeline-marker-bottom: 0.62rem;
    }

    .timeline-scale-footer {
        font-size: 0.6875rem;
    }

    .converter-info-strip {
        min-height: 0;
        padding-block: 0.32rem;
        font-size: 0.875rem;
        line-height: 1.35;
    }
}

@media (max-width: 980px) {
    .converter-stage {
        width: min(100%, 58rem);
        min-height: auto;
        grid-template-rows: auto auto auto;
    }

    .converter-hero,
    .converter-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .converter-title {
        text-align: center;
    }

    .converter-title p {
        margin-inline: auto;
    }

    .converter-control-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .converter-mini-inputs,
    .converter-readout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .time-scale-card {
        min-height: clamp(30rem, 58svh, 38rem);
    }

    .timeline-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .timeline-comparison {
        min-width: 42rem;
    }
}

@media (min-width: 641px) and (max-width: 820px) {
    .converter-shell {
        padding-top: calc(9.6rem + clamp(0.5rem, 1.2svh, 0.9rem));
    }
}

@media (max-width: 640px) {
    .converter-shell {
        padding: calc(clamp(4.65rem, 9.2svh, 5.15rem) + clamp(0.7rem, 2svh, 1.2rem)) clamp(0.78rem, 4vw, 1.25rem) 1.2rem;
    }

    .converter-stage {
        width: 100%;
        gap: 0.85rem;
    }

    .converter-hero {
        gap: 0.85rem;
    }

    .converter-title h1 {
        font-size: clamp(1.65rem, 9vw, 2.25rem);
    }

    .converter-hero-panel {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
    }

    .hero-city-time-end {
        text-align: left;
    }

    .hero-city-time-end strong {
        justify-content: flex-start;
    }

    .hero-difference {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .hero-difference small {
        grid-column: 2;
    }

    .converter-mini-inputs,
    .converter-readout-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .converter-control-card .converter-select-wrap {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 4rem;
    }

    .converter-control-card .zone-offset {
        grid-column: 2;
        grid-row: 2;
    }

    .converter-control-card .zone-caret {
        grid-column: 3;
    }

    .converter-page .converter-hero-panel,
    .converter-page .converter-card,
    .converter-page .time-scale-card,
    .converter-page .converter-info-strip,
    .converter-page .converter-field-control,
    .converter-page .converter-readout,
    .converter-page .converter-relation-card {
        backdrop-filter: none;
    }

    .converter-page .converter-zone-picker.open {
        z-index: 1200;
    }

    .converter-page .zone-menu {
        position: fixed;
        top: auto;
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
        left: max(1rem, env(safe-area-inset-left));
        z-index: 1200;
        max-height: min(32rem, calc(100dvh - 8rem));
        padding: 0.85rem;
    }

    .time-scale-card {
        padding: 0.85rem;
        min-height: 31rem;
    }

    .timeline-comparison {
        width: max(100%, 38rem);
        min-width: 38rem;
        --timeline-marker-top: 5.75rem;
        --timeline-marker-bottom: 0.7rem;
    }

    .timeline-track {
        height: 4.75rem;
    }

    .converter-info-strip {
        flex-wrap: wrap;
        justify-content: flex-start;
        font-size: 0.82rem;
    }
}

@media (max-width: 640px) {
    .stopwatch-page {
        --timer-panel-width: min(92vw, 27rem);
        --timer-dial-size: min(72vw, 20rem);
    }

    .stopwatch-page .timer-shell {
        width: var(--timer-panel-width);
    }

    .stopwatch-page .timer-console {
        max-height: none;
        padding: clamp(0.9rem, 4vw, 1.1rem);
        gap: clamp(0.62rem, 2.7vw, 0.9rem);
    }

    .stopwatch-page .stopwatch-dial {
        width: var(--timer-dial-size);
        margin-inline: auto;
    }

    .stopwatch-page .timer-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .stopwatch-page .timer-display strong {
        font-size: clamp(2.05rem, 10.8vw, 3rem);
    }

    .stopwatch-page .timer-status {
        font-size: clamp(0.58rem, 2.2vw, 0.78rem);
    }

    .stopwatch-page .timer-duration-pill {
        min-height: 1.55rem;
        font-size: clamp(0.64rem, 2.4vw, 0.8rem);
    }

    .stopwatch-page .timer-action {
        min-height: 2.35rem;
        font-size: 0.78rem;
    }

    .stopwatch-laps {
        min-height: 5.25rem;
        max-height: 9rem;
        padding: 0.72rem;
    }

    .stopwatch-laps-head,
    .stopwatch-lap-row,
    .stopwatch-laps p {
        font-size: 0.72rem;
    }
}

:fullscreen .site-header,
:-webkit-full-screen .site-header {
    display: none;
}

:fullscreen .hero,
:-webkit-full-screen .hero {
    padding-top: 0;
}

:fullscreen .timer-hero,
:-webkit-full-screen .timer-hero {
    padding-top: 3svh;
}

.timer-hero:fullscreen,
.timer-hero:-webkit-full-screen {
    --timer-panel-width: min(92vw, 78svh, 42rem);
    --timer-dial-size: min(34vw, 36svh, 20rem);
    display: grid;
    place-items: center;
    height: 100vh;
    min-height: 100vh;
    padding: clamp(0.8rem, 2svh, 1.4rem);
    overflow: hidden;
    background-position: center;
}

.timer-hero:fullscreen .site-header,
.timer-hero:-webkit-full-screen .site-header,
.timer-hero:fullscreen .tool-seo-header,
.timer-hero:-webkit-full-screen .tool-seo-header {
    display: none;
}

.timer-hero:fullscreen .timer-shell,
.timer-hero:-webkit-full-screen .timer-shell {
    width: var(--timer-panel-width);
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.timer-hero:fullscreen .timer-console,
.timer-hero:-webkit-full-screen .timer-console {
    max-height: calc(100vh - clamp(1.6rem, 4svh, 2.8rem));
    padding: min(2vw, 2.4svh);
    gap: min(0.9vw, 1.05svh);
}

.timer-hero:fullscreen .timer-dial,
.timer-hero:-webkit-full-screen .timer-dial {
    width: var(--timer-dial-size);
}

.world-clock-hero:fullscreen,
.world-clock-hero:-webkit-full-screen {
    --clock-size: min(33vw, 50svh);
    --hero-time-size: min(8.6vw, 15svh);
    min-height: 100vh;
    padding: 0;
    grid-template-rows: 1fr;
    background-position: center;
}

.world-clock-hero:fullscreen .site-header,
.world-clock-hero:-webkit-full-screen .site-header,
.world-clock-hero:fullscreen .explore-link,
.world-clock-hero:-webkit-full-screen .explore-link,
.world-clock-hero:fullscreen .clock-seo-label,
.world-clock-hero:-webkit-full-screen .clock-seo-label {
    display: none;
}

.world-clock-hero:fullscreen .hero-layout,
.world-clock-hero:-webkit-full-screen .hero-layout {
    width: min(92vw, 148svh);
    grid-template-columns: minmax(0, 1fr) var(--clock-size);
    gap: min(6vw, 10svh);
    margin: auto;
}

.world-clock-hero:fullscreen .hero-copy,
.world-clock-hero:-webkit-full-screen .hero-copy {
    padding-left: 0;
}

.world-clock-hero:fullscreen .location-line,
.world-clock-hero:-webkit-full-screen .location-line {
    margin-bottom: min(3svh, 2rem);
}

.world-clock-hero:fullscreen .hero-date,
.world-clock-hero:-webkit-full-screen .hero-date {
    margin-top: min(3svh, 2rem);
}

.world-clock-hero:fullscreen .world-clock-fullscreen-button,
.world-clock-hero:-webkit-full-screen .world-clock-fullscreen-button,
.timer-hero:fullscreen .timer-fullscreen-button,
.timer-hero:-webkit-full-screen .timer-fullscreen-button {
    top: clamp(1rem, 2.3svh, 1.6rem);
    right: clamp(1rem, 2.2vw, 1.8rem);
    color: #0b1528;
    background: rgba(255, 255, 255, 0.86);
}

.world-clock-hero:fullscreen .world-clock-fullscreen-button .enter-fullscreen-icon,
.world-clock-hero:-webkit-full-screen .world-clock-fullscreen-button .enter-fullscreen-icon,
.timer-hero:fullscreen .timer-fullscreen-button .enter-fullscreen-icon,
.timer-hero:-webkit-full-screen .timer-fullscreen-button .enter-fullscreen-icon {
    display: none;
}

.world-clock-hero:fullscreen .world-clock-fullscreen-button .exit-fullscreen-icon,
.world-clock-hero:-webkit-full-screen .world-clock-fullscreen-button .exit-fullscreen-icon,
.timer-hero:fullscreen .timer-fullscreen-button .exit-fullscreen-icon,
.timer-hero:-webkit-full-screen .timer-fullscreen-button .exit-fullscreen-icon {
    display: block;
}

@media (max-width: 920px) {
    .world-clock-hero:fullscreen,
    .world-clock-hero:-webkit-full-screen {
        --clock-size: min(58vw, 34svh);
        --hero-time-size: min(16vw, 9.5svh);
    }

    .world-clock-fullscreen-button {
        top: calc(var(--header-h) + clamp(0.65rem, 1.6svh, 1rem));
        right: var(--edge-x);
    }

    .world-clock-hero:fullscreen .hero-layout,
    .world-clock-hero:-webkit-full-screen .hero-layout {
        width: min(92vw, 68svh);
        grid-template-columns: 1fr;
        gap: min(4svh, 2rem);
        text-align: center;
    }

    .world-clock-hero:fullscreen .location-line,
    .world-clock-hero:fullscreen .digital-time,
    .world-clock-hero:fullscreen .hero-meta,
    .world-clock-hero:-webkit-full-screen .location-line,
    .world-clock-hero:-webkit-full-screen .digital-time,
    .world-clock-hero:-webkit-full-screen .hero-meta {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Time converter v2 comparison canvas */
.converter2-page {
    --converter2-ink: #17223a;
    --converter2-muted: #66738c;
    --converter2-blue: #176eea;
    --converter2-line: rgba(96, 112, 135, 0.16);
    --converter2-card: rgba(255, 255, 255, 0.78);
}

.converter2-shell {
    min-height: var(--page-vh);
    padding: calc(var(--header-h) + clamp(0.8rem, 2.2svh, 1.35rem)) clamp(1rem, 2.8vw, 2.25rem) clamp(1rem, 2svh, 1.6rem);
    overflow-x: clip;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(247, 252, 255, 0.72) 47%, rgba(235, 247, 255, 0.58) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(225, 240, 251, 0.28)),
        url("/images/hero-misty-lake.png");
    background-size: cover;
    background-position: center 48%;
}

.converter2-stage {
    width: min(100%, 92rem);
    min-height: calc(var(--page-vh) - var(--header-h) - clamp(1.55rem, 3.3svh, 2.45rem));
    max-height: calc(var(--page-vh) - var(--header-h) - clamp(1.55rem, 3.3svh, 2.45rem));
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(0.68rem, 1.15svh, 0.95rem);
}

.converter2-title {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1.5rem;
}

.converter2-title h1 {
    color: var(--converter2-ink);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
}

.converter2-title p {
    margin-top: 0.42rem;
    color: var(--converter2-muted);
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.45;
}

.converter2-swap-top,
.converter2-add-quick {
    border: 1px solid var(--converter2-line);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #254064;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.7rem 1.8rem rgba(42, 65, 91, 0.08);
    font-size: 0.875rem;
    font-weight: 600;
}

.converter2-swap-top {
    min-height: 2.35rem;
    padding: 0 0.9rem;
    margin-top: 1.3rem;
}

.converter2-swap-top svg,
.converter2-add-quick svg,
.converter2-info-strip svg,
.converter2-result-card svg,
.converter2-quick-row svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.converter2-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17.5rem, 21vw, 20.5rem);
    gap: clamp(0.82rem, 1.25vw, 1.12rem);
    align-items: stretch;
}

.converter2-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: max-content minmax(0, 1fr) max-content;
    gap: clamp(0.58rem, 0.95svh, 0.82rem);
}

.converter2-selector-card,
.converter2-visual-card,
.converter2-info-strip,
.converter2-result-card,
.converter2-quick-card {
    border: 1px solid var(--converter2-line);
    border-radius: 8px;
    background: var(--converter2-card);
    box-shadow:
        0 1.25rem 3.1rem rgba(42, 65, 91, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
}

.converter2-selector-card {
    position: relative;
    align-self: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(0.78rem, 1.15vw, 1rem);
    align-items: end;
    padding: clamp(0.72rem, 0.92vw, 0.88rem);
}

.converter2-city-select {
    min-width: 0;
    display: grid;
    gap: 0.42rem;
    color: #1c2d47;
    font-weight: 650;
}

.converter2-select-shell {
    position: relative;
    width: 100%;
    min-height: clamp(3.25rem, 5.35svh, 3.72rem);
    border: 1px solid var(--converter2-line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.78rem;
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
}

.converter2-flag,
.converter2-globe {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #1d7ff0, #1552bc);
    font-size: 0.72rem;
    font-weight: 800;
}

.converter2-select-copy {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.converter2-select-copy strong {
    min-width: 0;
    overflow: hidden;
    color: #17223a;
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.converter2-select-copy small {
    color: var(--converter2-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.converter2-picker {
    position: relative;
}

.converter2-picker-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.42rem);
    z-index: 40;
    border: 1px solid rgba(96, 112, 135, 0.18);
    border-radius: 8px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1.2rem 2.6rem rgba(42, 65, 91, 0.16);
    backdrop-filter: blur(16px);
}

.converter2-picker-search {
    width: 100%;
    min-height: 2.35rem;
    border: 1px solid var(--converter2-line);
    border-radius: 8px;
    padding: 0 0.75rem;
    color: #17223a;
    background: rgba(247, 251, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 600;
    outline: none;
}

.converter2-picker-search:focus {
    border-color: rgba(23, 110, 234, 0.48);
    box-shadow: 0 0 0 3px rgba(23, 110, 234, 0.12);
}

.converter2-picker-list {
    max-height: min(18rem, 42svh);
    margin-top: 0.45rem;
    display: grid;
    gap: 0.28rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.converter2-picker-option {
    width: 100%;
    min-height: 3.15rem;
    border: 1px solid transparent;
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.55rem;
    color: #17223a;
    background: transparent;
    text-align: left;
}

.converter2-picker-option:hover,
.converter2-picker-option.is-selected {
    border-color: rgba(23, 110, 234, 0.18);
    background: rgba(23, 110, 234, 0.08);
}

.converter2-picker-option span:last-child {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.converter2-picker-option strong {
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.converter2-picker-option small {
    overflow: hidden;
    color: var(--converter2-muted);
    font-size: 0.74rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.converter2-select-shell > svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: #233650;
    stroke-width: 2;
}

.converter2-swap-orb {
    width: 2.85rem;
    height: 2.85rem;
    border: 1px solid var(--converter2-line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--converter2-blue);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.8rem 1.8rem rgba(42, 65, 91, 0.11);
    transform: translateY(-0.45rem);
}

.converter2-swap-orb svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.converter2-input-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.converter2-input-row label {
    display: grid;
    gap: 0.35rem;
    color: var(--converter2-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.converter2-input-row input {
    min-height: 2.28rem;
    border: 1px solid var(--converter2-line);
    border-radius: 8px;
    padding: 0 0.8rem;
    color: #17223a;
    background: rgba(255, 255, 255, 0.72);
    font-weight: 650;
}

.converter2-visual-card {
    position: relative;
    min-height: 0;
    padding: clamp(0.72rem, 0.95vw, 0.92rem);
    display: grid;
    grid-template-columns: clamp(4rem, 6.2vw, 5.1rem) minmax(28rem, 1fr) clamp(4rem, 6.2vw, 5.1rem);
    gap: clamp(0.72rem, 1.15vw, 1.08rem);
    align-items: center;
    overflow: hidden;
}

.converter2-day-rail {
    height: min(100%, 24rem);
    min-height: 18rem;
    border: 1px solid rgba(96, 112, 135, 0.14);
    border-radius: 8px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto auto;
    place-items: center;
    padding: 1rem 0.35rem;
    color: #22406f;
    background: rgba(247, 251, 255, 0.62);
}

.converter2-day-rail i {
    width: 100%;
    border-top: 1px dashed rgba(96, 112, 135, 0.26);
}

.converter2-day-rail strong {
    margin-top: 0.45rem;
    font-size: 0.85rem;
    font-weight: 650;
}

.converter2-day-rail small {
    color: #145bd1;
    font-size: 0.86rem;
    font-weight: 700;
}

.converter2-compare-grid {
    --source-y: 44%;
    --target-y: 44%;
    position: relative;
    min-height: clamp(21rem, 51svh, 28rem);
    display: grid;
    grid-template-columns: 7.8rem 1fr 7.8rem;
    grid-template-rows: 3.15rem minmax(0, 1fr);
}

.converter2-city-head {
    display: grid;
    place-items: center;
    color: #155ec7;
    text-align: center;
}

.converter2-city-head-from {
    grid-column: 1 / 2;
}

.converter2-city-head-to {
    grid-column: 3 / 4;
}

.converter2-city-head strong {
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    font-weight: 700;
}

.converter2-city-head span {
    font-size: 0.78rem;
    font-weight: 700;
}

.converter2-time-axis,
.converter2-time-column,
.converter2-day-bands,
.converter2-range-layer {
    grid-row: 2;
}

.converter2-axis-left,
.converter2-time-column-left {
    grid-column: 1;
}

.converter2-axis-right,
.converter2-time-column-right {
    grid-column: 3;
}

.converter2-time-axis {
    position: relative;
}

.converter2-axis-label {
    position: absolute;
    right: 1.25rem;
    color: #60718e;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    font-weight: 500;
    transform: translateY(-50%);
    white-space: nowrap;
}

.converter2-axis-label:first-child {
    transform: translateY(0);
}

.converter2-axis-label:last-child {
    transform: translateY(-100%);
}

.converter2-axis-right .converter2-axis-label {
    right: auto;
    left: 1.25rem;
}

.converter2-time-column {
    position: relative;
    width: 2px;
    justify-self: end;
    background: linear-gradient(#87a2c8, #87a2c8);
}

.converter2-time-column-right {
    justify-self: start;
}

.converter2-dot {
    position: absolute;
    left: 50%;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: #6f84a5;
    transform: translate(-50%, -50%);
}

.converter2-time-column-left .converter2-dot-active {
    top: var(--source-y);
}

.converter2-time-column-right .converter2-dot-active {
    top: var(--target-y);
}

.converter2-dot-active {
    width: 0.82rem;
    height: 0.82rem;
    border: 3px solid var(--converter2-blue);
    background: #fff;
    z-index: 6;
}

.converter2-day-bands {
    grid-column: 2;
    position: relative;
    border: 1px solid rgba(23, 110, 234, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.5)),
        linear-gradient(180deg, rgba(48, 84, 134, 0.1) 0 18%, rgba(255, 255, 255, 0.44) 18% 42%, rgba(255, 251, 244, 0.62) 42% 70%, rgba(231, 243, 255, 0.7) 70% 86%, rgba(48, 84, 134, 0.08) 86% 100%);
}

.converter2-day-bands::before,
.converter2-day-bands::after {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed rgba(96, 112, 135, 0.22);
    content: "";
}

.converter2-day-bands::before {
    top: 25%;
}

.converter2-day-bands::after {
    top: 75%;
}

.converter2-period {
    position: absolute;
    left: 0;
    right: 0;
    display: grid;
    place-items: center;
    color: #66738c;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 750;
}

.converter2-night {
    top: 4%;
}

.converter2-morning {
    top: 24%;
}

.converter2-afternoon {
    top: 55%;
}

.converter2-evening {
    top: 76%;
}

.converter2-night-bottom {
    top: 91%;
}

.converter2-sun,
.converter2-moon,
.converter2-horizon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
}

.converter2-sun {
    border-radius: 50%;
    background: #ffc247;
    box-shadow: 0 0 0 0.28rem rgba(255, 194, 71, 0.16);
}

.converter2-moon {
    border-radius: 50%;
    background: #f7fbff;
    box-shadow: inset -0.42rem 0 0 #456a9e;
}

.converter2-horizon {
    border-bottom: 2px solid #7991b1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 100%, #ffbd4a 0 28%, transparent 30%);
}

.converter2-range-layer {
    grid-column: 1 / 4;
    position: relative;
    z-index: 8;
    overflow: hidden;
}

.converter2-range-layer input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ns-resize;
    transform: rotate(90deg);
}

.converter2-link-line {
    position: absolute;
    left: 7.8rem;
    right: 7.8rem;
    top: calc(3.15rem + var(--source-y));
    z-index: 7;
    height: 2px;
    background: var(--converter2-blue);
}

.converter2-pill,
.converter2-offset-pill {
    position: absolute;
    top: 50%;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--converter2-blue);
    box-shadow: 0 0.65rem 1.4rem rgba(23, 110, 234, 0.2);
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
}

.converter2-pill {
    min-height: 2rem;
    padding: 0 0.68rem;
    font-size: 0.95rem;
}

.converter2-pill-left {
    left: 0;
    transform: translate(-100%, -50%);
}

.converter2-pill-right {
    right: 0;
    transform: translate(100%, -50%);
}

.converter2-offset-pill {
    left: 50%;
    min-height: 1.9rem;
    padding: 0 0.65rem;
    font-size: 0.9rem;
    transform: translate(-50%, -50%);
}

.converter2-note {
    position: absolute;
    left: 50%;
    bottom: 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #24406c;
    font-size: 0.88rem;
    line-height: 1.4;
    transform: translateX(-50%);
    white-space: nowrap;
}

.converter2-note svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: #7b8da7;
}

.converter2-info-strip {
    align-self: end;
    min-height: clamp(3.35rem, 5.8svh, 4rem);
    padding: 0.55rem 0.85rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}

.converter2-info-strip strong {
    color: #17223a;
    font-size: 0.95rem;
}

.converter2-info-strip p {
    color: #52617a;
    font-size: 0.86rem;
    line-height: 1.35;
}

.converter2-info-strip a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #155ec7;
    font-size: 0.88rem;
    font-weight: 650;
}

.converter2-sidebar {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(0.68rem, 1svh, 0.92rem);
    overflow: hidden;
}

.converter2-result-card,
.converter2-quick-card {
    padding: clamp(0.82rem, 1.05vw, 1.05rem);
}

.converter2-quick-card {
    min-height: 0;
    overflow: auto;
}

.converter2-card-title {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    color: #17223a;
    font-weight: 700;
}

.converter2-card-title > span {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #155ec7;
    background: rgba(23, 110, 234, 0.12);
}

.converter2-result-block {
    margin-top: 0.66rem;
    display: grid;
    gap: 0.28rem;
}

.converter2-result-block span,
.converter2-result-block small {
    color: var(--converter2-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 500;
}

.converter2-result-block strong {
    color: #155ec7;
    font-size: clamp(1.85rem, 2.55vw, 2.35rem);
    font-weight: 650;
    line-height: 1;
}

.converter2-result-divider {
    margin: 0.48rem 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
}

.converter2-result-divider::before,
.converter2-result-divider::after {
    height: 1px;
    background: rgba(96, 112, 135, 0.14);
    content: "";
}

.converter2-result-divider span {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--converter2-line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--converter2-blue);
    background: rgba(255, 255, 255, 0.86);
}

.converter2-relation-chip {
    width: fit-content;
    margin-top: 0.62rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(23, 110, 234, 0.16);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #155ec7;
    background: rgba(23, 110, 234, 0.1);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
}

.converter2-result-tools {
    margin-top: 0.64rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
}

.converter2-result-tools label {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
    color: var(--converter2-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.converter2-result-tools input {
    width: 100%;
    min-height: 2.02rem;
    border: 1px solid var(--converter2-line);
    border-radius: 8px;
    padding: 0 0.55rem;
    color: #17223a;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 650;
}

.converter2-quick-card h2 {
    color: #17223a;
    font-size: 1rem;
    font-weight: 750;
}

.converter2-quick-row {
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.52rem;
    border: 1px solid var(--converter2-line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.6rem;
    align-items: center;
    color: #60718e;
    background: rgba(255, 255, 255, 0.66);
    text-align: left;
}

.converter2-quick-row > svg {
    margin-left: 0.72rem;
    color: #60718e;
}

.converter2-quick-row span {
    min-width: 0;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.converter2-quick-row strong {
    display: grid;
    color: #17223a;
    font-size: 0.82rem;
    font-weight: 750;
    text-align: right;
}

.converter2-quick-row small {
    color: #60718e;
    font-size: 0.66rem;
    font-weight: 600;
}

.converter2-quick-row i {
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.72rem;
    border-top: 2px solid #8a9ab3;
    border-right: 2px solid #8a9ab3;
    transform: rotate(45deg);
}

.converter2-add-quick {
    width: 100%;
    min-height: 2.7rem;
    margin-top: 0.85rem;
    border-color: transparent;
    color: #155ec7;
    background: transparent;
    box-shadow: none;
}

.converter2-add-quick span {
    font-size: 1.25rem;
    line-height: 1;
}

@media (min-width: 981px) and (max-height: 860px) {
    .converter2-shell {
        padding-top: calc(var(--header-h) + 0.65rem);
        padding-bottom: 0.65rem;
    }

    .converter2-stage {
        min-height: calc(var(--page-vh) - var(--header-h) - 1.3rem);
        max-height: calc(var(--page-vh) - var(--header-h) - 1.3rem);
        gap: 0.7rem;
    }

    .converter2-title h1 {
        font-size: clamp(1.8rem, 2.7vw, 2.45rem);
    }

    .converter2-title p {
        margin-top: 0.35rem;
    }

    .converter2-selector-card,
    .converter2-result-card,
    .converter2-quick-card {
        padding: 0.68rem;
    }

    .converter2-compare-grid {
        min-height: clamp(18rem, 43svh, 23.5rem);
    }

    .converter2-day-rail {
        min-height: 18rem;
    }

    .converter2-result-block {
        margin-top: 0.6rem;
    }

    .converter2-result-divider {
        margin-top: 0.45rem;
    }

    .converter2-result-tools {
        margin-top: 0.58rem;
    }

    .converter2-result-tools input {
        min-height: 1.95rem;
    }

    .converter2-quick-row {
        min-height: 2.2rem;
        margin-top: 0.38rem;
    }

    .converter2-add-quick {
        min-height: 2.1rem;
        margin-top: 0.45rem;
    }
}

@media (min-width: 1101px) {
    .converter2-page,
    .converter2-shell {
        height: var(--page-vh);
        overflow-y: hidden;
    }
}

@media (max-width: 1100px) {
    .converter2-stage {
        max-height: none;
    }

    .converter2-layout {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 820px) {
    .converter2-title {
        display: grid;
    }

    .converter2-swap-top {
        margin-top: 0;
        justify-self: start;
    }

    .converter2-selector-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .converter2-swap-orb {
        justify-self: center;
        transform: none;
    }

    .converter2-visual-card {
        grid-template-columns: minmax(38rem, 1fr);
        overflow-x: auto;
        align-items: stretch;
    }

    .converter2-day-rail {
        display: none;
    }

    .converter2-note {
        grid-column: 1;
        position: static;
        transform: none;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .converter2-shell {
        padding: calc(clamp(4.65rem, 9.2svh, 5.15rem) + 0.85rem) clamp(0.78rem, 4vw, 1rem) 1rem;
    }

    .converter2-stage {
        gap: 0.72rem;
    }

    .converter2-title h1 {
        font-size: clamp(1.8rem, 9vw, 2.25rem);
    }

    .converter2-selector-card {
        gap: 0.5rem;
        padding: 0.72rem;
    }

    .converter2-city-select {
        gap: 0.25rem;
    }

    .converter2-city-select > span:first-child {
        font-size: 0.7rem;
    }

    .converter2-select-shell {
        min-height: 3.18rem;
        gap: 0.58rem;
        padding: 0.42rem 0.58rem;
    }

    .converter2-flag,
    .converter2-globe {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0.65rem;
    }

    .converter2-select-copy strong {
        font-size: 0.92rem;
    }

    .converter2-select-copy small {
        font-size: 0.72rem;
    }

    .converter2-swap-orb {
        width: 2.2rem;
        height: 2.2rem;
    }

    .converter2-visual-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 25rem;
        padding: 0.75rem;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .converter2-compare-grid {
        width: 100%;
        min-width: 0;
        min-height: 22.8rem;
        grid-template-columns: 4.65rem minmax(0, 1fr) 4.65rem;
        grid-template-rows: 2.65rem minmax(0, 1fr);
    }

    .converter2-city-head strong {
        font-size: 0.9rem;
    }

    .converter2-city-head span {
        font-size: 0.66rem;
    }

    .converter2-axis-label {
        right: 0.62rem;
        font-size: 0.68rem;
    }

    .converter2-axis-right .converter2-axis-label {
        left: 0.62rem;
    }

    .converter2-period {
        font-size: 0.62rem;
    }

    .converter2-sun,
    .converter2-moon,
    .converter2-horizon {
        width: 0.95rem;
        height: 0.95rem;
    }

    .converter2-link-line {
        left: 4.65rem;
        right: 4.65rem;
        top: calc(2.65rem + var(--source-y));
    }

    .converter2-pill {
        min-height: 1.55rem;
        padding-inline: 0.45rem;
        font-size: 0.72rem;
    }

    .converter2-offset-pill {
        min-height: 1.45rem;
        padding-inline: 0.42rem;
        font-size: 0.72rem;
    }

    .converter2-pill-left {
        transform: translate(0, -125%);
    }

    .converter2-pill-right {
        transform: translate(0, 25%);
    }

    .converter2-note {
        justify-self: start;
        font-size: 0.76rem;
    }

    .converter2-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .converter2-info-strip {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: auto;
        padding: 0.72rem;
    }

    .converter2-info-strip a {
        grid-column: 2;
    }

    .converter2-result-block strong {
        font-size: 1.78rem;
    }

    .converter2-result-card,
    .converter2-quick-card {
        padding: 0.82rem;
    }

    .converter2-result-tools input {
        min-height: 2rem;
        font-size: 0.74rem;
    }

    .converter2-result-block {
        margin-top: 0.72rem;
    }

    .converter2-result-divider {
        margin-top: 0.58rem;
    }

    .converter2-relation-chip {
        margin-top: 0.72rem;
    }

    .converter2-quick-card {
        max-height: 17rem;
        overflow-y: auto;
    }

    .converter2-quick-row {
        min-height: 2.4rem;
        margin-top: 0.45rem;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .converter2-quick-row i {
        display: none;
    }

    .converter2-quick-row strong {
        font-size: 0.76rem;
    }
}

/* Landing page redesign */
.landing-root {
    position: relative;
    width: 100%;
    min-height: var(--page-vh);
    overflow-x: clip;
    background: #eef6fd;
}

.landing-main {
    position: relative;
    min-height: var(--page-vh);
    padding: calc(var(--header-h) + 2rem) clamp(1.25rem, 3.5vw, 3.75rem) 2.5rem;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(244, 249, 255, 0.92) 0%, rgba(235, 244, 253, 0.68) 42%, rgba(207, 226, 244, 0.48) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(241, 247, 253, 0.72) 72%, rgba(238, 246, 253, 0.98) 100%),
        url("/images/hero-misty-lake.png");
    background-position: center top;
    background-size: cover;
}

.landing-main::before {
    position: absolute;
    inset: var(--header-h) 0 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(238, 246, 253, 0.56) 70%, rgba(238, 246, 253, 0.98) 100%);
}

.landing-main > * {
    position: relative;
    z-index: 1;
}

.landing-hero {
    width: 100%;
    z-index: 2;
    padding-bottom: 1.75rem;
}

.landing-hero-inner {
    width: min(100%, 110rem);
    min-height: 39rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(20rem, 0.82fr) minmax(42rem, 1.42fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.75rem);
}

.landing-hero-copy {
    min-width: 0;
}

.landing-pill {
    width: fit-content;
    max-width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #102040;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0.75rem 2rem rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(16px);
    font-size: 0.9375rem;
    font-weight: 500;
}

.landing-pill svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #2563eb;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.landing-hero-title {
    max-width: 42rem;
    margin-top: 1.75rem;
    color: #0f172a;
    font-family: var(--font-ui);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
}

.landing-hero-title span {
    color: #2563eb;
}

.landing-hero-subtitle {
    max-width: 36rem;
    margin-top: 1.5rem;
    color: #19365f;
    font-size: 1.125rem;
    line-height: 1.65;
    font-weight: 450;
}

.landing-cta-row {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.landing-cta {
    min-height: 3.5rem;
    padding: 0 1.4rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-size: 1rem;
    font-weight: 650;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.landing-cta svg {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.landing-cta:hover {
    transform: translateY(-2px);
}

.landing-cta-primary {
    color: #fff;
    border: 1px solid rgba(37, 99, 235, 0.7);
    background: linear-gradient(135deg, #2563eb, #1473ff);
    box-shadow: 0 1rem 2.1rem rgba(37, 99, 235, 0.25);
}

.landing-cta-primary:hover {
    color: #fff;
    box-shadow: 0 1.25rem 2.5rem rgba(37, 99, 235, 0.32);
}

.landing-cta-secondary {
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.8rem 1.8rem rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

.landing-cta-secondary:hover {
    color: #0f172a;
    border-color: rgba(37, 99, 235, 0.34);
    box-shadow: 0 1rem 2.1rem rgba(15, 23, 42, 0.11);
}

.clock-preview-card {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: clamp(1.25rem, 2.4vw, 2.25rem);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1.5rem 4.75rem rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(22px);
}

.clock-preview-header {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(17rem, 23rem) auto;
    align-items: center;
    gap: 1rem;
}

.clock-preview-location {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.clock-preview-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 700;
}

.clock-preview-label span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.12);
}

.clock-preview-city {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    color: #075fe8;
    font-size: 1.0625rem;
    font-weight: 650;
}

.clock-preview-city svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.clock-preview-search {
    position: relative;
    min-width: 0;
    display: block;
}

.clock-preview-search input {
    width: 100%;
    min-height: 3rem;
    padding: 0 3rem 0 1rem;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 0.9rem;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    outline: none;
}

.clock-preview-search input::placeholder {
    color: #53658f;
    opacity: 1;
}

.clock-preview-search svg {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1.2rem;
    height: 1.2rem;
    transform: translateY(-50%);
    fill: none;
    stroke: #294268;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    pointer-events: none;
}

.clock-preview-add {
    min-height: 3rem;
    padding: 0 1.15rem;
    border: 1px solid rgba(37, 99, 235, 0.48);
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: #075fe8;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    font-weight: 650;
    white-space: nowrap;
    transition: background 160ms ease, transform 160ms ease;
}

.clock-preview-add:hover {
    color: #075fe8;
    background: rgba(239, 246, 255, 0.88);
    transform: translateY(-1px);
}

.clock-preview-add svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.clock-preview-time-row {
    margin-top: 2.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10.75rem;
    align-items: center;
    gap: 2rem;
}

.clock-preview-time-copy {
    min-width: 0;
}

.clock-preview-time {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    color: #071431;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.clock-preview-time span {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: 0;
}

.clock-preview-time small {
    color: #075fe8;
    font-size: 1.5rem;
    font-weight: 650;
}

.clock-preview-date-line {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 650;
}

.clock-preview-offset,
.city-mini-offset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    color: #102040;
    background: rgba(226, 232, 240, 0.72);
    font-size: 0.8125rem;
    font-weight: 650;
}

.clock-preview-zone {
    margin-top: 0.65rem;
    color: #41557a;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.preview-analog-clock {
    position: relative;
    width: 10.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 55%, rgba(238, 245, 253, 0.92) 100%);
    box-shadow: 0 1.1rem 2.2rem rgba(15, 23, 42, 0.14), inset 0 0 0 0.6rem rgba(255, 255, 255, 0.52);
}

.preview-clock-tick {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    transform: rotate(var(--tick-rotation));
}

.preview-clock-tick::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 0.42rem;
    content: "";
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.34);
}

.preview-clock-tick.is-major::before {
    width: 2px;
    height: 0.62rem;
    background: rgba(15, 23, 42, 0.74);
}

.preview-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 2;
    border-radius: 999px;
    transform-origin: 50% 100%;
}

.preview-clock-hour {
    width: 0.3rem;
    height: 30%;
    background: #0f172a;
}

.preview-clock-minute {
    width: 0.22rem;
    height: 40%;
    background: #0f172a;
}

.preview-clock-second {
    width: 0.12rem;
    height: 45%;
    background: #2563eb;
    box-shadow: 0 0 0.8rem rgba(37, 99, 235, 0.28);
}

.preview-clock-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 0.7rem;
    height: 0.7rem;
    transform: translate(-50%, -50%);
    border: 2px solid #0f172a;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.92);
}

.city-mini-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.city-mini-card {
    position: relative;
    --city-image: url("/images/city-london.png");
    --city-image-position: center bottom;
    --city-image-size: cover;
    min-height: 13.25rem;
    padding: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 1.5rem;
    overflow: hidden;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 48%, rgba(255, 255, 255, 0.18) 100%),
        linear-gradient(0deg, rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0)),
        var(--city-image) var(--city-image-position) / var(--city-image-size) no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.city-mini-card-new-york {
    --city-image: url("/images/city-new-york.png");
}

.city-mini-card-london {
    --city-image: url("/images/city-london.png");
    --city-image-position: center top;
    --city-image-size: 103% auto;
}

.city-mini-card-tokyo {
    --city-image: url("/images/city-tokyo.png");
}

.city-mini-card-sydney {
    --city-image: url("/images/city-sydney.png");
}

.city-mini-select {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 1.1rem;
    border: 0;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-align: left;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
}

.city-mini-select:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: -5px;
}

.city-mini-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.city-mini-name {
    display: block;
    color: #0f172a;
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.2;
}

.city-mini-country {
    display: block;
    color: #365176;
    font-size: 0.875rem;
    line-height: 1.35;
}

.city-mini-weather {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
}

.city-mini-weather svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.city-mini-weather-sun {
    color: #f59e0b;
}

.city-mini-weather-cloud {
    color: #2563eb;
}

.city-mini-weather-moon {
    color: #1d4ed8;
}

.city-mini-time {
    position: relative;
    z-index: 1;
    margin-top: 1.65rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #071431;
    font-variant-numeric: tabular-nums;
}

.city-mini-time span {
    font-size: 2rem;
    font-weight: 750;
    line-height: 1;
}

.city-mini-time small {
    color: #075fe8;
    font-size: 0.9375rem;
    font-weight: 650;
}

.city-mini-date {
    position: relative;
    z-index: 1;
    margin-top: 0.9rem;
    font-weight: 650;
}

.city-mini-offset {
    position: relative;
    margin-top: auto;
    align-self: flex-start;
    z-index: 1;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
}

.clock-preview-footer {
    position: relative;
    z-index: 3;
    min-height: 2rem;
    margin-top: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock-preview-dots {
    display: inline-flex;
    gap: 0.85rem;
}

.clock-preview-dots button {
    position: relative;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.clock-preview-dots button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
    background: rgba(148, 163, 184, 0.55);
    transition: background 160ms ease, transform 160ms ease;
}

.clock-preview-dots .is-active::before {
    background: #2563eb;
}

.clock-preview-dots button:hover::before,
.clock-preview-dots button:focus-visible::before {
    background: #2563eb;
    transform: translate(-50%, -50%) scale(1.15);
}

.clock-preview-arrows {
    position: absolute;
    right: 0;
    display: inline-flex;
    gap: 1.25rem;
    z-index: 1;
}

.clock-preview-arrows button {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #41557a;
    background: transparent;
    cursor: pointer;
}

.clock-preview-arrows button:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

.clock-preview-arrows button:disabled {
    cursor: default;
    opacity: 0.45;
}

.clock-preview-arrows button:disabled:hover {
    color: #41557a;
    background: transparent;
}

.clock-preview-arrows svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.tool-preview-section {
    width: min(100%, 110rem);
    margin: 0 auto;
}

.tool-preview-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 1.5rem;
}

.tool-preview-card {
    min-width: 0;
    min-height: 19.25rem;
    padding: 1.45rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1rem 2.6rem rgba(15, 23, 42, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
}

.tool-preview-card-head {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.tool-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1473ff);
    box-shadow: 0 0.85rem 1.5rem rgba(37, 99, 235, 0.22);
}

.tool-card-icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.tool-preview-card h2 {
    color: #0f172a;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.tool-preview-card p {
    margin-top: 0.45rem;
    color: #334765;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
}

.tool-preview-body {
    flex: 0 0 auto;
    min-height: 0;
    display: block;
}

.tool-preview-body > * {
    width: 100%;
}

.tool-preview-link {
    margin-top: auto;
    padding-top: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    color: #075de8;
    font-size: 0.875rem;
    font-weight: 700;
}

.tool-preview-link:hover {
    color: #0347b7;
}

.mini-panel {
    min-height: 10.2rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.mini-tool-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #53627d;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.mini-tool-status strong {
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.mini-panel.is-running .mini-tool-status strong {
    color: #fff;
    background: #2563eb;
}

.mini-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #334765;
    font-size: 0.8125rem;
    font-weight: 700;
}

.mini-select-row svg,
.mini-converter-fields svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.mini-timer-time,
.mini-stopwatch-time {
    color: #071431;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.mini-timer-time {
    margin-top: 0.7rem;
    text-align: center;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.mini-timer-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.mini-quick-button {
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #19365f;
    background: #eef3f8;
    font-size: 0.8125rem;
    font-weight: 700;
}

.mini-quick-button:hover {
    color: #075de8;
    background: #e4eefb;
}

.mini-play-button {
    width: 2.55rem;
    height: 2.55rem;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1473ff);
    box-shadow: 0 0.75rem 1.4rem rgba(37, 99, 235, 0.25);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.mini-panel.is-running .mini-play-button {
    background: linear-gradient(135deg, #0f4bd8, #0b7df0);
    box-shadow: 0 0.75rem 1.4rem rgba(37, 99, 235, 0.32);
}

.mini-play-button:hover {
    color: #fff;
    transform: translateY(-1px);
}

.mini-play-button svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.mini-stopwatch-panel {
    position: relative;
}

.mini-stopwatch-time {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.mini-lap-list {
    list-style: none;
    margin-top: 1rem;
    margin-bottom: 0;
    padding-top: 0.85rem;
    padding-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    display: grid;
    gap: 0.55rem;
}

.mini-lap-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #334765;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mini-stopwatch-actions {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.mini-reset-button,
.mini-converter-fields button {
    border: 1px solid rgba(148, 163, 184, 0.28);
    display: grid;
    place-items: center;
    color: #41557a;
    background: rgba(255, 255, 255, 0.8);
}

.mini-reset-button {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
}

.mini-reset-button svg,
.mini-converter-fields button svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.mini-alarm-panel {
    display: grid;
    gap: 0;
}

.mini-alarm-row {
    min-height: 3.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mini-alarm-row + .mini-alarm-row {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.mini-alarm-row span {
    color: #071431;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mini-alarm-row small {
    color: #41557a;
    font-size: 0.875rem;
    font-weight: 700;
}

.mini-alarm-row p {
    margin: 0.2rem 0 0;
    color: #52627d;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.mini-toggle {
    position: relative;
    width: 2.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 160ms ease;
}

.mini-toggle::after {
    position: absolute;
    top: 0.18rem;
    left: 0.18rem;
    width: 0.98rem;
    height: 0.98rem;
    border-radius: 50%;
    content: "";
    background: #fff;
    box-shadow: 0 0.2rem 0.45rem rgba(15, 23, 42, 0.18);
    transition: transform 160ms ease;
}

.mini-toggle.is-on {
    background: #2563eb;
}

.mini-toggle.is-on::after {
    transform: translateX(1rem);
}

.mini-add-alarm-button {
    min-height: 2.2rem;
    margin-top: 0.65rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #075de8;
    background: rgba(255, 255, 255, 0.76);
    font-size: 0.875rem;
    font-weight: 700;
}

.mini-add-alarm-button:hover,
.mini-add-alarm-button.is-confirmed {
    color: #fff;
    background: #2563eb;
}

.mini-converter-fields {
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.64);
}

.mini-converter-fields div {
    min-height: 2.45rem;
    padding: 0 2.55rem 0 0.85rem;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    color: #334765;
}

.mini-converter-fields div + div {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.mini-converter-fields span {
    color: #52627d;
    font-size: 0.8125rem;
    font-weight: 700;
}

.mini-converter-fields strong {
    min-width: 0;
    overflow: hidden;
    color: #102040;
    font-size: 0.8125rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-converter-fields button {
    position: absolute;
    top: 50%;
    right: -1rem;
    width: 2.35rem;
    height: 2.35rem;
    transform: translateY(-50%);
    border-radius: 50%;
}

.mini-converter-result {
    margin-top: 1.15rem;
    min-height: 2.45rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    color: #071431;
    font-variant-numeric: tabular-nums;
}

.mini-converter-time {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.mini-converter-time:last-child {
    text-align: right;
}

.mini-converter-time strong {
    min-width: 0;
    color: #071431;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: anywhere;
}

.mini-converter-time small {
    color: #52627d;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
}

.mini-converter-arrow {
    color: #2563eb;
    font-size: 1.4rem;
    font-weight: 700;
}

.mini-converter-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
}

.mini-convert-button {
    min-height: 2.1rem;
    padding: 0 1rem;
    border: 1px solid rgba(37, 99, 235, 0.24);
    border-radius: 0.55rem;
    color: #075de8;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
    font-weight: 700;
}

.mini-convert-button:hover,
.mini-converter-panel.is-converted .mini-convert-button {
    color: #fff;
    background: #2563eb;
}

@media (max-width: 74rem) {
    .landing-main {
        padding-top: calc(var(--header-h) + 1.75rem);
    }

    .landing-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .landing-hero-copy {
        max-width: 46rem;
    }

    .clock-preview-header {
        grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 1fr) auto;
    }

    .city-mini-grid,
    .tool-preview-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 48rem) {
    .landing-main {
        padding: calc(var(--header-h) + 1.25rem) 1rem 1.5rem;
    }

    .landing-hero {
        padding-bottom: 1rem;
    }

    .landing-hero-inner {
        gap: 1.5rem;
    }

    .landing-pill {
        min-height: 2.5rem;
        font-size: 0.875rem;
    }

    .landing-hero-title {
        margin-top: 1.25rem;
        font-size: 2.625rem;
        line-height: 1.1;
    }

    .landing-hero-subtitle {
        margin-top: 1rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    .landing-cta-row {
        margin-top: 1.5rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-cta {
        min-height: 3.2rem;
        width: 100%;
    }

    .clock-preview-card {
        padding: 1rem;
        border-radius: 1.5rem;
    }

    .clock-preview-header {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .clock-preview-search input,
    .clock-preview-add {
        min-height: 2.8rem;
    }

    .clock-preview-time-row {
        margin-top: 1.5rem;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .clock-preview-time {
        white-space: normal;
    }

    .clock-preview-time span {
        font-size: 2.75rem;
    }

    .clock-preview-time small {
        font-size: 1.125rem;
    }

    .preview-analog-clock {
        width: 8.5rem;
        justify-self: center;
    }

    .city-mini-grid,
    .tool-preview-section {
        grid-template-columns: minmax(0, 1fr);
    }

    .city-mini-card {
        min-height: 12.5rem;
    }

    .city-mini-select {
        padding: 1.1rem;
    }

    .clock-preview-arrows {
        display: none;
    }

    .tool-preview-card {
        min-height: 0;
        padding: 1.1rem;
    }

    .mini-converter-fields button {
        right: 0.6rem;
    }

    .mini-converter-result {
        gap: 0.8rem;
    }

    .mini-converter-time strong,
    .mini-converter-arrow {
        font-size: 1.25rem;
    }

    .mini-converter-time small {
        font-size: 0.75rem;
    }

}

/* Landing viewport fit pass */
@media (min-width: 74.001rem) {
    .landing-root {
        height: var(--page-vh);
        min-height: var(--page-vh);
        overflow: hidden;
    }

    .landing-main {
        height: var(--page-vh);
        min-height: 0;
        padding: calc(var(--header-h) + 2.2svh) 3.55vw 2svh;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 2.1svh;
        overflow: hidden;
    }

    .landing-hero {
        min-height: 0;
        padding-bottom: 0;
        display: grid;
    }

    .landing-hero-inner {
        width: min(92.8vw, 110rem);
        height: 100%;
        min-height: 0;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.42fr);
        gap: 3vw;
    }

    .landing-pill {
        min-height: 4.5svh;
        padding: 0 1.05vw;
        gap: 0.65vw;
        font-size: min(1.55svh, 0.9375rem);
    }

    .landing-pill svg {
        width: 1.9svh;
        height: 1.9svh;
    }

    .landing-hero-title {
        max-width: 42vw;
        margin-top: 2.6svh;
        font-size: min(6.25svh, 4rem);
        line-height: 1.07;
    }

    .landing-hero-subtitle {
        max-width: 35vw;
        margin-top: 2.15svh;
        font-size: min(1.9svh, 1.125rem);
        line-height: 1.58;
    }

    .landing-cta-row {
        margin-top: 3svh;
        gap: 1.6vw;
    }

    .landing-cta {
        min-height: 5.7svh;
        padding: 0 1.45vw;
        border-radius: 1.45svh;
        gap: 0.65vw;
        font-size: min(1.65svh, 1rem);
    }

    .landing-cta svg {
        width: 2.05svh;
        height: 2.05svh;
    }

    .clock-preview-card {
        padding: min(1.75vw, 2.35svh);
        border-radius: min(2vw, 3.4svh);
    }

    .clock-preview-header {
        grid-template-columns: minmax(12vw, 1fr) minmax(17vw, 23vw) auto;
        gap: 1vw;
    }

    .clock-preview-location {
        gap: 0.45svh;
    }

    .clock-preview-label {
        gap: 0.45vw;
        font-size: min(1.35svh, 0.8125rem);
    }

    .clock-preview-label span {
        width: 0.8svh;
        height: 0.8svh;
        box-shadow: 0 0 0 0.35svh rgba(37, 99, 235, 0.12);
    }

    .clock-preview-city {
        gap: 0.4vw;
        font-size: min(1.75svh, 1.0625rem);
    }

    .clock-preview-city svg {
        width: 1.55svh;
        height: 1.55svh;
    }

    .clock-preview-search input,
    .clock-preview-add {
        min-height: 5svh;
        border-radius: 1.45svh;
        font-size: min(1.55svh, 0.9375rem);
    }

    .clock-preview-search input {
        padding: 0 3.1vw 0 1vw;
    }

    .clock-preview-search svg {
        right: 1vw;
        width: 2svh;
        height: 2svh;
    }

    .clock-preview-add {
        padding: 0 1.15vw;
        gap: 0.55vw;
    }

    .clock-preview-add svg {
        width: 1.85svh;
        height: 1.85svh;
    }

    .clock-preview-time-row {
        margin-top: 3.2svh;
        grid-template-columns: minmax(0, 1fr) min(16.5svh, 10.75rem);
        gap: 2.3vw;
    }

    .clock-preview-time {
        gap: 0.7vw;
    }

    .clock-preview-time span {
        font-size: min(7.45svh, 4.5rem);
    }

    .clock-preview-time small {
        font-size: min(2.45svh, 1.5rem);
    }

    .clock-preview-date-line {
        margin-top: 1.65svh;
        gap: 0.7vw;
        font-size: min(1.65svh, 1rem);
    }

    .clock-preview-offset,
    .city-mini-offset {
        min-height: 2.85svh;
        padding: 0 0.7vw;
        font-size: min(1.32svh, 0.8125rem);
    }

    .clock-preview-zone {
        margin-top: 0.9svh;
        font-size: min(1.55svh, 0.9375rem);
    }

    .preview-analog-clock {
        width: min(16.5svh, 10.75rem);
    }

    .preview-clock-tick::before {
        height: 0.7svh;
    }

    .preview-clock-tick.is-major::before {
        height: 1svh;
    }

    .preview-clock-hour {
        width: 0.46svh;
    }

    .preview-clock-minute {
        width: 0.34svh;
    }

    .preview-clock-second {
        width: 0.18svh;
    }

    .preview-clock-pin {
        width: 1.1svh;
        height: 1.1svh;
    }

    .city-mini-grid {
        margin-top: 2.65svh;
        gap: 0.9vw;
    }

    .city-mini-card {
        height: min(17.2svh, 13.25rem);
        min-height: 0;
        padding: 1.55svh 1vw;
        border-radius: 2.25svh;
    }

    .city-mini-select {
        padding: 1.55svh 1vw;
    }

    .city-mini-name {
        font-size: min(1.85svh, 1.125rem);
    }

    .city-mini-country {
        font-size: min(1.42svh, 0.875rem);
    }

    .city-mini-weather {
        width: 2.85svh;
        height: 2.85svh;
    }

    .city-mini-time {
        margin-top: 2.15svh;
        gap: 0.35vw;
    }

    .city-mini-time span {
        font-size: min(3.25svh, 2rem);
    }

    .city-mini-time small {
        font-size: min(1.55svh, 0.9375rem);
    }

    .city-mini-date {
        margin-top: 1.2svh;
    }

    .clock-preview-footer {
        min-height: 3svh;
        margin-top: 1.4svh;
    }

    .clock-preview-dots {
        gap: 0.8vw;
    }

    .clock-preview-dots button {
        width: clamp(1.1rem, 2.4svh, 1.35rem);
        height: clamp(1.1rem, 2.4svh, 1.35rem);
    }

    .clock-preview-dots button::before {
        width: clamp(0.5rem, 0.9svh, 0.58rem);
        height: clamp(0.5rem, 0.9svh, 0.58rem);
    }

    .clock-preview-arrows {
        gap: 1.15vw;
    }

    .clock-preview-arrows button {
        width: 3.2svh;
        height: 3.2svh;
    }

    .clock-preview-arrows svg {
        width: 1.9svh;
        height: 1.9svh;
    }

    .tool-preview-section {
        width: min(92.8vw, 110rem);
        height: auto;
        min-height: 0;
        gap: 1.45vw;
        align-items: stretch;
    }

    .tool-preview-card {
        height: auto;
        min-height: 18rem;
        padding: clamp(1.1rem, 1.65svh, 1.35rem) clamp(1rem, 1.25vw, 1.35rem);
        border-radius: 2.25svh;
        gap: clamp(0.8rem, 1.25svh, 1rem);
    }

    .tool-preview-card-head {
        grid-template-columns: clamp(2.75rem, 4.8svh, 3rem) minmax(0, 1fr);
        gap: clamp(0.75rem, 0.9vw, 1rem);
    }

    .tool-card-icon {
        width: clamp(2.75rem, 4.8svh, 3rem);
        height: clamp(2.75rem, 4.8svh, 3rem);
        border-radius: 1.35svh;
    }

    .tool-card-icon svg {
        width: clamp(1.25rem, 2.3svh, 1.45rem);
        height: clamp(1.25rem, 2.3svh, 1.45rem);
    }

    .tool-preview-card h2 {
        font-size: clamp(1.05rem, 1.85svh, 1.125rem);
    }

    .tool-preview-card p {
        margin-top: clamp(0.3rem, 0.55svh, 0.45rem);
        font-size: clamp(0.82rem, 1.43svh, 0.9rem);
        line-height: 1.38;
    }

    .mini-panel {
        min-height: 0;
        height: auto;
        padding: clamp(0.8rem, 1.15svh, 0.95rem) clamp(0.75rem, 0.85vw, 0.95rem);
        border-radius: 1.6svh;
    }

    .mini-select-row,
    .mini-quick-button,
    .mini-lap-list li,
    .mini-alarm-row p,
    .mini-converter-fields span,
    .mini-converter-fields strong,
    .mini-converter-time small {
        font-size: clamp(0.76rem, 1.35svh, 0.84rem);
    }

    .mini-tool-status {
        font-size: clamp(0.72rem, 1.18svh, 0.78rem);
    }

    .mini-tool-status strong {
        padding: clamp(0.13rem, 0.18svh, 0.18rem) clamp(0.38rem, 0.5vw, 0.48rem);
        font-size: clamp(0.64rem, 1.05svh, 0.7rem);
    }

    .mini-select-row svg,
    .mini-converter-fields svg {
        width: clamp(0.75rem, 1.35svh, 0.85rem);
        height: clamp(0.75rem, 1.35svh, 0.85rem);
    }

    .mini-timer-time {
        margin-top: clamp(0.45rem, 0.9svh, 0.7rem);
        font-size: clamp(2.05rem, 3.7svh, 2.35rem);
    }

    .mini-timer-actions {
        margin-top: clamp(0.75rem, 1.25svh, 1rem);
        gap: clamp(0.45rem, 0.55vw, 0.6rem);
    }

    .mini-quick-button {
        min-height: clamp(2rem, 3.1svh, 2.2rem);
        padding: 0 clamp(0.62rem, 0.7vw, 0.78rem);
        border-radius: 0.85svh;
    }

    .mini-play-button {
        width: clamp(2.45rem, 4.2svh, 2.7rem);
        height: clamp(2.45rem, 4.2svh, 2.7rem);
    }

    .mini-play-button svg {
        width: clamp(1rem, 1.8svh, 1.15rem);
        height: clamp(1rem, 1.8svh, 1.15rem);
    }

    .mini-stopwatch-time {
        font-size: clamp(1.55rem, 2.85svh, 1.8rem);
    }

    .mini-lap-list {
        margin-top: clamp(0.7rem, 1.35svh, 1rem);
        padding-top: clamp(0.6rem, 1.05svh, 0.85rem);
        gap: clamp(0.38rem, 0.65svh, 0.55rem);
    }

    .mini-stopwatch-actions {
        right: 0.85vw;
        bottom: 1svh;
        gap: 0.65vw;
    }

    .mini-reset-button {
        width: clamp(2.2rem, 3.75svh, 2.4rem);
        height: clamp(2.2rem, 3.75svh, 2.4rem);
    }

    .mini-reset-button svg,
    .mini-converter-fields button svg {
        width: clamp(1rem, 1.75svh, 1.12rem);
        height: clamp(1rem, 1.75svh, 1.12rem);
    }

    .mini-alarm-row {
        min-height: clamp(2.4rem, 4.25svh, 3rem);
    }

    .mini-alarm-row span {
        font-size: clamp(1.35rem, 2.45svh, 1.55rem);
    }

    .mini-alarm-row small {
        font-size: clamp(0.78rem, 1.42svh, 0.9rem);
    }

    .mini-toggle {
        width: 3.85svh;
        height: 2.15svh;
    }

    .mini-toggle::after {
        top: 0.28svh;
        left: 0.28svh;
        width: 1.55svh;
        height: 1.55svh;
    }

    .mini-toggle.is-on::after {
        transform: translateX(1.65svh);
    }

    .mini-add-alarm-button {
        min-height: clamp(1.8rem, 2.7svh, 2.05rem);
        margin-top: clamp(0.3rem, 0.5svh, 0.5rem);
        border-radius: 0.9svh;
        font-size: clamp(0.78rem, 1.32svh, 0.84rem);
    }

    .mini-converter-fields {
        border-radius: 1.15svh;
    }

    .mini-converter-fields div {
        min-height: clamp(2.1rem, 2.8svh, 2.45rem);
        padding: 0 clamp(0.75rem, 2.4vw, 2.4rem) 0 clamp(0.7rem, 0.75vw, 0.85rem);
        grid-template-columns: clamp(2.7rem, 2.9vw, 3.2rem) minmax(0, 1fr) auto;
        gap: clamp(0.42rem, 0.45vw, 0.65rem);
    }

    .mini-converter-fields button {
        right: -0.85vw;
        width: clamp(2.2rem, 3.75svh, 2.4rem);
        height: clamp(2.2rem, 3.75svh, 2.4rem);
    }

    .mini-converter-result {
        margin-top: clamp(0.55rem, 0.8svh, 0.8rem);
        min-height: clamp(2.1rem, 3.05svh, 2.45rem);
        gap: clamp(0.6rem, 0.85vw, 0.85rem);
    }

    .mini-converter-time {
        gap: 0.25svh;
    }

    .mini-converter-time strong,
    .mini-converter-arrow {
        font-size: clamp(1.18rem, 2.05svh, 1.32rem);
    }

    .mini-converter-actions {
        margin-top: 0.4svh;
    }

    .mini-convert-button {
        min-height: 2.35svh;
        padding: 0 0.85vw;
        border-radius: 0.75svh;
        font-size: min(1.18svh, 0.75rem);
    }

    .tool-preview-link {
        gap: clamp(0.45rem, 0.55vw, 0.65rem);
        font-size: clamp(0.8rem, 1.35svh, 0.88rem);
    }
}

@media (max-width: 74rem) {
    .landing-root {
        height: auto;
        min-height: var(--page-vh);
        overflow-x: clip;
        overflow-y: visible;
    }

    .landing-main {
        height: auto;
        min-height: var(--page-vh);
        overflow: visible;
    }
}

/* Use the landing-page nav header treatment across tool pages. */
.world-time-page .site-header {
    min-height: var(--header-h);
    padding: 0 var(--edge-x);
    display: grid;
    grid-template-columns: minmax(22vw, 1fr) auto minmax(11vw, 1fr);
    align-items: center;
    gap: calc(var(--u) * 2);
    border-bottom: 1px solid rgba(93, 112, 137, 0.2);
    background: rgba(244, 248, 252, 0.75);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.world-time-page .brand {
    gap: calc(var(--u) * 1.15);
    color: #334155;
    font-size: calc(var(--u) * 2.65);
    font-weight: 500;
}

.world-time-page .brand-mark {
    width: calc(var(--u) * 5.1);
    height: calc(var(--u) * 3.35);
    color: #f2a531;
    background: transparent;
    filter: none;
}

.world-time-page .brand-mark svg {
    stroke-width: 1.7;
}

.world-time-page .top-nav {
    height: auto;
    gap: calc(var(--u) * 7.1);
}

.world-time-page .nav-tab {
    position: static;
    min-height: calc(var(--u) * 4.2);
    padding: 0 calc(var(--u) * 0.5);
    color: #253043;
    font-size: calc(var(--u) * 2.05);
    font-weight: 350;
}

.world-time-page .nav-tab.active {
    color: #101827;
    font-weight: 350;
}

.world-time-page .nav-tab:not(.active) {
    color: rgba(37, 48, 67, 0.82);
}

.world-time-page .nav-tab:hover {
    color: var(--blue);
}

.world-time-page .nav-tab.active::after {
    display: none;
}

.world-time-page .header-actions {
    position: static;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 1.5);
}

@media (max-width: 920px) {
    .world-time-page .site-header {
        min-height: var(--header-h);
        padding: 0 var(--edge-x);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        column-gap: calc(var(--u) * 2.2);
        row-gap: calc(var(--u) * 0.8);
    }

    .world-time-page .brand {
        flex: 1 1 auto;
        font-size: min(2.75vw, 1.9svh);
    }

    .world-time-page .top-nav {
        flex: 1 0 100%;
        order: 3;
        width: 100%;
        justify-content: center;
        gap: calc(var(--u) * 3.1);
        padding-bottom: calc(var(--u) * 0.9);
        overflow-x: auto;
    }

    .world-time-page .header-actions {
        position: fixed;
        top: calc(var(--u) * 1.8);
        right: var(--edge-x);
        z-index: 30;
    }

    .world-time-page .nav-tab {
        font-size: min(2.55vw, 1.8svh);
    }
}

@media (max-width: 640px) {
    .world-time-page .site-header {
        min-height: var(--header-h);
        row-gap: calc(var(--u) * 0.75);
    }

    .world-time-page .brand {
        gap: calc(var(--u) * 1);
        font-size: min(3.45vw, 2svh);
    }

    .world-time-page .brand-mark {
        width: min(7.1vw, 4.15svh);
        height: min(4.65vw, 2.75svh);
    }

    .world-time-page .header-actions {
        top: calc(var(--u) * 1.55);
        right: var(--edge-x);
    }

    .world-time-page .top-nav {
        justify-content: flex-start;
        gap: calc(var(--u) * 2.25);
        padding-bottom: calc(var(--u) * 0.85);
    }
}

/* Unified top navigation with timezone selector. */
.site-header,
.world-time-page .site-header {
    min-height: 4.25rem;
    padding: 0 clamp(1.25rem, 3vw, 2.25rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.25rem);
    border-bottom: 1px solid rgba(91, 110, 133, 0.16);
    background: rgba(249, 252, 255, 0.88);
    backdrop-filter: blur(18px) saturate(1.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.brand,
.world-time-page .brand {
    gap: 0.65rem;
    color: #152033;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 700;
    text-decoration: none;
}

.brand-mark,
.world-time-page .brand-mark {
    width: 2.45rem;
    height: 1.65rem;
}

.top-nav,
.world-time-page .top-nav {
    min-width: 0;
    height: 100%;
    justify-content: center;
    gap: clamp(0.85rem, 2.35vw, 2.65rem);
    overflow: visible;
    scrollbar-width: none;
}

.top-nav::-webkit-scrollbar,
.world-time-page .top-nav::-webkit-scrollbar {
    display: none;
}

.nav-tab,
.world-time-page .nav-tab {
    position: relative;
    min-height: 4.25rem;
    padding: 0 0.1rem;
    flex: 0 0 auto;
    color: #344154;
    font-size: clamp(0.82rem, 0.88vw, 0.96rem);
    font-weight: 600;
    text-decoration: none;
}

.nav-tab.active,
.world-time-page .nav-tab.active {
    color: #0b7df0;
    font-weight: 700;
}

.nav-tab.active::after,
.world-time-page .nav-tab.active::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.72rem;
    width: auto;
    height: 0.14rem;
    content: "";
    transform: none;
    border-radius: 999px;
    background: #0b7df0;
    display: block;
}

.nav-menu,
.world-time-page .nav-menu {
    position: relative;
    min-height: 4.25rem;
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
}

.nav-menu-trigger,
.world-time-page .nav-menu-trigger {
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.nav-menu-trigger svg,
.world-time-page .nav-menu-trigger svg {
    width: 0.78rem;
    height: 0.78rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 160ms ease;
}

.nav-menu.is-open .nav-menu-trigger svg,
.world-time-page .nav-menu.is-open .nav-menu-trigger svg {
    transform: rotate(180deg);
}

.nav-menu-panel,
.world-time-page .nav-menu-panel {
    position: absolute;
    top: calc(100% - 0.55rem);
    left: 50%;
    z-index: 70;
    min-width: 12rem;
    padding: 0.45rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.85rem;
    display: none;
    transform: translateX(-50%);
    background: var(--bg-surface-strong);
    box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, 0.14), 0 0.25rem 0.7rem rgba(15, 23, 42, 0.08);
}

.nav-menu.is-open .nav-menu-panel,
.world-time-page .nav-menu.is-open .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel,
.world-time-page .nav-menu:focus-within .nav-menu-panel {
    display: grid;
    gap: 0.25rem;
}

.nav-menu-link,
.world-time-page .nav-menu-link {
    min-height: 2.25rem;
    padding: 0 0.72rem;
    border-radius: 0.62rem;
    display: inline-flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu-link:hover,
.nav-menu-link:focus-visible,
.nav-menu-link.active,
.world-time-page .nav-menu-link:hover,
.world-time-page .nav-menu-link:focus-visible,
.world-time-page .nav-menu-link.active {
    color: var(--accent);
    background: var(--accent-soft);
}

.nav-label-short {
    display: none;
}

.header-actions,
.world-time-page .header-actions {
    position: static;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.header-timezone-picker,
.world-time-page .header-timezone-picker {
    position: relative;
    min-width: clamp(9.6rem, 13.2vw, 11.6rem);
    min-height: 2.35rem;
    padding: 0.34rem 1.75rem 0.34rem 0.58rem;
    border: 1px solid rgba(105, 129, 158, 0.18);
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #16243a;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0.45rem 1rem rgba(47, 67, 93, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.header-timezone-picker:focus-within,
.world-time-page .header-timezone-picker:focus-within {
    border-color: rgba(11, 125, 240, 0.42);
    box-shadow: 0 0 0 0.2rem rgba(11, 125, 240, 0.12), 0 0.75rem 1.8rem rgba(47, 67, 93, 0.08);
}

.header-timezone-icon,
.world-time-page .header-timezone-icon {
    width: 1.12rem;
    height: 1.12rem;
    display: inline-flex;
    flex: 0 0 auto;
    color: #64748b;
}

.header-timezone-icon svg,
.header-timezone-chevron svg,
.world-time-page .header-timezone-icon svg,
.world-time-page .header-timezone-chevron svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.header-timezone-copy,
.world-time-page .header-timezone-copy {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
}

.header-timezone-copy span,
.world-time-page .header-timezone-copy span {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1;
}

.header-timezone-copy strong,
.world-time-page .header-timezone-copy strong {
    max-width: 8.2rem;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.74rem;
    font-weight: 760;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-timezone-summary,
.world-time-page .header-timezone-summary {
    width: 100%;
    min-height: 2.35rem;
    padding: 0;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.header-timezone-summary:focus-visible,
.world-time-page .header-timezone-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0.18rem;
    border-radius: 0.35rem;
}

.header-timezone-chevron,
.world-time-page .header-timezone-chevron {
    position: absolute;
    right: 0.58rem;
    width: 0.72rem;
    height: 0.72rem;
    color: #64748b;
    pointer-events: none;
}

.header-timezone-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 80;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: 0 1.2rem 3rem rgba(15, 23, 42, 0.18), 0 0.25rem 0.6rem rgba(15, 23, 42, 0.08);
    animation: timezone-menu-in 160ms ease-out both;
}

@keyframes timezone-menu-in {
    from {
        opacity: 0;
        transform: translateY(-0.35rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.header-timezone-menu-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0.15rem 0.75rem;
}

.header-timezone-menu-head > div {
    display: grid;
    gap: 0.18rem;
}

.header-timezone-menu-eyebrow {
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.header-timezone-menu-head strong {
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.2;
}

.header-timezone-menu-count {
    min-width: 1.65rem;
    min-height: 1.65rem;
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 0.68rem;
    font-weight: 750;
}

.header-timezone-search {
    min-height: 2.55rem;
    padding: 0 0.65rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    background: var(--bg-surface-muted);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.header-timezone-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

.header-timezone-search > svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.header-timezone-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font-size: 0.78rem;
}

.header-timezone-search input::placeholder {
    color: var(--text-muted);
}

.header-timezone-search-clear {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--text-muted);
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
}

.header-timezone-search-clear:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.header-timezone-results {
    max-height: 17rem;
    margin-top: 0.7rem;
    display: grid;
    gap: 0.25rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.header-timezone-option {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.46rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    color: var(--text-primary);
    background: transparent;
    text-align: left;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.header-timezone-option > span {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.header-timezone-option strong,
.header-timezone-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-timezone-option strong {
    font-size: 0.78rem;
    font-weight: 650;
}

.header-timezone-option small {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.header-timezone-option svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.header-timezone-option:hover,
.header-timezone-option:focus-visible,
.header-timezone-option.is-selected {
    border-color: var(--border-soft);
    background: var(--accent-soft);
}

.header-timezone-option:hover {
    transform: translateX(0.12rem);
}

.header-timezone-menu-empty {
    padding: 1rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: center;
}

.header-timezone-menu-hint {
    margin-top: 0.7rem;
    padding: 0.55rem 0.2rem 0.05rem;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: 0.64rem;
    text-align: center;
}

.header-timezone-menu-hint kbd {
    padding: 0.12rem 0.25rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.28rem;
    color: var(--text-secondary);
    background: var(--bg-surface-muted);
    font: inherit;
    font-weight: 700;
}

.header-actions .header-tool-button,
.world-time-page .header-actions .header-tool-button {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
}

.header-actions .header-text-button,
.world-time-page .header-actions .header-text-button {
    min-height: 2.35rem;
    padding-inline: 0.78rem;
    border-radius: 0.65rem;
    font-size: 0.78rem;
}

.header-actions .header-tool-button svg,
.header-actions .header-text-button svg,
.world-time-page .header-actions .header-tool-button svg,
.world-time-page .header-actions .header-text-button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.mobile-menu-button {
    display: none;
}

.mobile-nav-drawer {
    display: none;
}

@media (max-width: 1180px) {
    .site-header,
    .world-time-page .site-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.85rem;
    }

    .brand > span:last-child,
    .world-time-page .brand > span:last-child {
        display: none;
    }

    .top-nav,
    .world-time-page .top-nav {
        justify-content: flex-start;
        gap: 1.25rem;
    }
}

@media (max-width: 820px) {
    .site-header,
    .world-time-page .site-header {
        min-height: 6.5rem;
        grid-template-columns: auto 1fr;
        row-gap: 0.2rem;
    }

    .top-nav,
    .world-time-page .top-nav {
        grid-column: 1 / -1;
        order: 3;
        min-height: 2.4rem;
    }

    .nav-tab,
    .world-time-page .nav-tab {
        min-height: 2.4rem;
    }

    .nav-tab.active::after,
    .world-time-page .nav-tab.active::after {
        bottom: 0.1rem;
    }

    .header-timezone-picker,
    .world-time-page .header-timezone-picker {
        min-width: min(13rem, 58vw);
        min-height: 2.75rem;
    }
}

@media (max-width: 520px) {
    :root {
        --header-h: 4.35rem;
    }

    .site-header,
    .world-time-page .site-header {
        min-height: auto;
        padding: 0.55rem 1rem 0.62rem;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "nav nav";
        align-items: center;
        gap: 0.45rem 0.75rem;
    }

    .brand,
    .world-time-page .brand {
        grid-area: brand;
        min-width: 0;
        min-height: 2.75rem;
        gap: 0.55rem;
        font-size: 1.05rem;
    }

    .brand > span:last-child,
    .world-time-page .brand > span:last-child {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand-mark,
    .world-time-page .brand-mark {
        width: 2.2rem;
        height: 1.5rem;
    }

    .header-actions,
    .world-time-page .header-actions {
        grid-area: actions;
        gap: 0.45rem;
    }

    .header-actions .header-tool-button,
    .world-time-page .header-actions .header-tool-button,
    .mobile-menu-button {
        width: 2.9rem;
        height: 2.9rem;
        border: 1px solid rgba(91, 110, 133, 0.2);
        border-radius: 0.8rem;
        display: inline-grid;
        place-items: center;
        color: #22324a;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 0.55rem 1.2rem rgba(31, 45, 65, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }

    .header-actions .header-tool-button svg,
    .world-time-page .header-actions .header-tool-button svg,
    .mobile-menu-button svg {
        width: 1.2rem;
        height: 1.2rem;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .header-timezone-picker,
    .world-time-page .header-timezone-picker {
        min-width: 2.9rem;
        width: 2.9rem;
        height: 2.9rem;
        min-height: 2.9rem;
        padding-inline: 0.68rem;
        border-radius: 0.8rem;
        border-color: rgba(91, 110, 133, 0.2);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 0.55rem 1.2rem rgba(31, 45, 65, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }

    .header-timezone-summary,
    .world-time-page .header-timezone-summary {
        width: 100%;
        height: 100%;
        justify-content: center;
        padding: 0;
    }

    .header-timezone-icon,
    .world-time-page .header-timezone-icon {
        color: #475569;
    }

    .header-timezone-icon svg,
    .world-time-page .header-timezone-icon svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    .header-timezone-copy,
    .header-timezone-chevron,
    .world-time-page .header-timezone-copy,
    .world-time-page .header-timezone-chevron {
        display: none;
    }

    .top-nav,
    .world-time-page .top-nav {
        grid-area: nav;
        width: min(88vw, 360px);
        min-height: 0;
        padding: 1.15rem;
        border: 1px solid rgba(105, 129, 158, 0.16);
        border-radius: 0 1.15rem 1.15rem 0;
        display: none;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        align-content: start;
        gap: 0.65rem;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.42), 0.9rem 0 2.2rem rgba(31, 45, 65, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
    }

    .top-nav.is-open,
    .world-time-page .top-nav.is-open {
        display: grid;
        position: fixed;
        left: 0;
        right: auto;
        top: 0;
        bottom: 0;
        z-index: 1000;
        height: 100dvh !important;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
    }

    .mobile-nav-pane-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        margin-bottom: 0.35rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid rgba(105, 129, 158, 0.14);
    }

    .mobile-nav-pane-copy {
        display: grid;
        gap: 0.06rem;
    }

    .mobile-nav-pane-copy span {
        color: #6b7b92;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mobile-nav-pane-copy strong {
        color: #152033;
        font-size: 0.98rem;
        font-weight: 750;
    }

    .mobile-nav-close {
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(105, 129, 158, 0.16);
        border-radius: 0.78rem;
        display: inline-grid;
        place-items: center;
        color: #22324a;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .mobile-nav-close svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .nav-tab,
    .nav-menu-trigger,
    .world-time-page .nav-tab {
        width: 100%;
        max-width: none;
        min-height: 3.4rem;
        padding: 0 1rem;
        border-radius: 0.85rem;
        justify-content: flex-start;
        color: #344154;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(105, 129, 158, 0.12);
        font-size: 0.94rem;
        font-weight: 700;
        overflow: visible;
        text-overflow: clip;
    }

    .nav-menu,
    .world-time-page .nav-menu {
        width: 100%;
        min-height: auto;
        padding: 0;
        display: grid;
        align-items: stretch;
        gap: 0.45rem;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .nav-menu-trigger,
    .world-time-page .nav-menu-trigger {
        width: 100%;
        justify-content: space-between;
        padding-inline: 0.9rem;
    }

    .nav-menu-panel,
    .world-time-page .nav-menu-panel {
        position: static;
        min-width: 0;
        margin: 0 0 0.2rem 0.85rem;
        padding: 0.15rem 0 0.15rem 0.65rem;
        border: 0;
        border-left: 2px solid rgba(105, 129, 158, 0.18);
        border-radius: 0;
        transform: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.38rem;
        background: transparent;
        box-shadow: none;
    }

    .nav-menu-link,
    .world-time-page .nav-menu-link {
        min-height: 2.9rem;
        padding-inline: 0.9rem;
        border-radius: 0.8rem;
        justify-content: flex-start;
        color: #536176;
        font-size: 0.9rem;
        font-weight: 650;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(105, 129, 158, 0.12);
    }

    .nav-label-full {
        display: none;
    }

    .nav-label-short {
        display: inline;
    }

    .nav-tab.active,
    .world-time-page .nav-tab.active {
        color: #075de8;
        background: rgba(11, 125, 240, 0.1);
        box-shadow: inset 0 0 0 1px rgba(11, 125, 240, 0.16);
    }

    .nav-tab.active::after,
    .world-time-page .nav-tab.active::after {
        display: none;
    }

    .timer-page .brand,
    .timer-page .header-actions {
        position: static;
        top: auto;
        right: auto;
        left: auto;
    }

    .timer-page .top-nav {
        padding-top: 0.5rem;
        justify-content: stretch;
        gap: 0.42rem;
    }

    .timer-page .timer-hero {
        padding-top: calc(var(--header-h) + 0.9rem);
    }

    .mobile-nav-drawer {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1000;
        width: min(88vw, 360px);
        height: 100dvh;
        padding: 1.15rem;
        border: 1px solid rgba(105, 129, 158, 0.16);
        border-left: 0;
        border-radius: 0 1.15rem 1.15rem 0;
        display: grid;
        align-content: start;
        gap: 0.65rem;
        overflow-y: auto;
        color: #152033;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.42), 0.9rem 0 2.2rem rgba(31, 45, 65, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
    }

    .mobile-nav-pane-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        margin-bottom: 0.35rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid rgba(105, 129, 158, 0.14);
    }

    .mobile-nav-pane-copy {
        display: grid;
        gap: 0.06rem;
    }

    .mobile-nav-pane-copy span {
        color: #6b7b92;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mobile-nav-pane-copy strong {
        color: #152033;
        font-size: 0.98rem;
        font-weight: 750;
    }

    .mobile-nav-close {
        width: 2.35rem;
        height: 2.35rem;
        border: 1px solid rgba(105, 129, 158, 0.16);
        border-radius: 0.78rem;
        display: inline-grid;
        place-items: center;
        color: #22324a;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .mobile-nav-close svg,
    .mobile-nav-trigger svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .mobile-nav-link,
    .mobile-nav-sublink {
        min-height: 3.4rem;
        padding: 0 1rem;
        border: 0;
        border-radius: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #344154;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(105, 129, 158, 0.12);
        font-size: 0.94rem;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-nav-link.active,
    .mobile-nav-sublink.active {
        color: #075de8;
        background: rgba(11, 125, 240, 0.1);
        box-shadow: inset 0 0 0 1px rgba(11, 125, 240, 0.16);
    }

    .mobile-nav-section {
        display: grid;
        gap: 0.45rem;
    }

    .mobile-nav-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .mobile-nav-trigger svg {
        transition: transform 160ms ease;
    }

    .mobile-nav-section.is-open .mobile-nav-trigger svg {
        transform: rotate(180deg);
    }

    .mobile-nav-submenu {
        margin: 0 0 0.2rem 0.85rem;
        padding: 0.15rem 0 0.15rem 0.65rem;
        border-left: 2px solid rgba(105, 129, 158, 0.18);
        display: none;
        gap: 0.38rem;
    }

    .mobile-nav-section.is-open .mobile-nav-submenu {
        display: grid;
    }

    .mobile-nav-sublink {
        min-height: 2.9rem;
        color: #536176;
        font-size: 0.9rem;
        font-weight: 650;
    }
}

@media (max-width: 360px) {
    .site-header,
    .world-time-page .site-header {
        min-height: var(--header-h);
    }

    .top-nav,
    .world-time-page .top-nav {
        overflow-y: auto;
    }

    .nav-tab,
    .world-time-page .nav-tab {
        min-width: 0;
        white-space: nowrap;
    }

    .timer-page .timer-hero {
        padding-top: calc(var(--header-h) + 0.75rem);
    }

    .timer-page .tool-seo-header h1 {
        font-size: clamp(1.55rem, 7.8vw, 1.8rem);
        line-height: 1.05;
    }
}

@media (min-width: 74.001rem) and (max-height: 820px) {
    .landing-main {
        padding: calc(var(--header-h) + 1.35svh) 2.9vw 1.35svh;
        grid-template-rows: minmax(0, 1fr) minmax(0, 32.5svh);
        gap: 1.35svh;
    }

    .landing-hero-inner {
        width: min(94.2vw, 110rem);
        gap: 2.25vw;
    }

    .landing-pill {
        min-height: 3.7svh;
        padding-inline: 0.85vw;
        font-size: min(1.45svh, 0.86rem);
    }

    .landing-pill svg {
        width: 1.65svh;
        height: 1.65svh;
    }

    .landing-hero-title {
        max-width: 39vw;
        margin-top: 1.65svh;
        font-size: min(5.55svh, 3.25rem);
    }

    .landing-hero-subtitle {
        max-width: 33vw;
        margin-top: 1.1svh;
        font-size: min(1.62svh, 0.98rem);
        line-height: 1.42;
    }

    .landing-cta-row {
        margin-top: 1.85svh;
        gap: 1.25vw;
    }

    .landing-cta {
        min-height: 4.7svh;
        padding-inline: 1.15vw;
        border-radius: 1.15svh;
        font-size: min(1.55svh, 0.92rem);
    }

    .landing-cta svg {
        width: 1.78svh;
        height: 1.78svh;
    }

    .clock-preview-card {
        padding: 1.35svh 1vw;
        border-radius: 2.55svh;
    }

    .clock-preview-header {
        gap: 0.8vw;
    }

    .clock-preview-location {
        gap: 0.25svh;
    }

    .clock-preview-label {
        font-size: min(1.25svh, 0.75rem);
    }

    .clock-preview-city {
        font-size: min(1.55svh, 0.95rem);
    }

    .clock-preview-search input,
    .clock-preview-add {
        min-height: 4.2svh;
        border-radius: 1.15svh;
        font-size: min(1.35svh, 0.82rem);
    }

    .clock-preview-time-row {
        margin-top: 1.75svh;
        grid-template-columns: minmax(0, 1fr) 13.2svh;
        gap: 1.6vw;
    }

    .clock-preview-time span {
        font-size: min(6.35svh, 3.9rem);
    }

    .clock-preview-time small {
        font-size: min(2.05svh, 1.2rem);
    }

    .clock-preview-date-line {
        margin-top: 1.05svh;
        font-size: min(1.42svh, 0.86rem);
    }

    .clock-preview-offset,
    .city-mini-offset {
        min-height: 2.35svh;
        font-size: min(1.16svh, 0.72rem);
    }

    .clock-preview-zone {
        margin-top: 0.45svh;
        font-size: min(1.32svh, 0.8rem);
    }

    .preview-analog-clock {
        width: 13.2svh;
    }

    .city-mini-grid {
        margin-top: 1.55svh;
        gap: 0.75vw;
    }

    .city-mini-card {
        height: 14.8svh;
        padding: 1.15svh 0.8vw;
        border-radius: 1.8svh;
    }

    .city-mini-select {
        padding: 1.15svh 0.8vw;
    }

    .city-mini-name {
        font-size: min(1.55svh, 0.95rem);
    }

    .city-mini-country {
        font-size: min(1.2svh, 0.72rem);
    }

    .city-mini-weather {
        width: 2.35svh;
        height: 2.35svh;
    }

    .city-mini-time {
        margin-top: 1.25svh;
    }

    .city-mini-time span {
        font-size: min(2.65svh, 1.6rem);
    }

    .city-mini-time small {
        font-size: min(1.25svh, 0.78rem);
    }

    .city-mini-date {
        margin-top: 0.65svh;
    }

    .clock-preview-footer {
        min-height: 2.2svh;
        margin-top: 0.7svh;
    }

    .tool-preview-section {
        width: min(94.2vw, 110rem);
    }

    .tool-preview-card {
        height: 100%;
        min-height: 0;
        padding: clamp(0.85rem, 1.15svh, 1rem) clamp(0.8rem, 1vw, 1rem);
        border-radius: 1.8svh;
        gap: clamp(0.55rem, 0.85svh, 0.75rem);
        overflow: hidden;
    }

    .tool-preview-card-head {
        grid-template-columns: 4.2svh minmax(0, 1fr);
        gap: 0.7vw;
    }

    .tool-card-icon {
        width: 4.2svh;
        height: 4.2svh;
        border-radius: 1.1svh;
    }

    .tool-card-icon svg {
        width: 2svh;
        height: 2svh;
    }

    .tool-preview-card h2 {
        font-size: clamp(1rem, 1.65svh, 1.08rem);
    }

    .tool-preview-card p {
        margin-top: clamp(0.22rem, 0.35svh, 0.35rem);
        font-size: clamp(0.78rem, 1.26svh, 0.84rem);
        line-height: 1.32;
    }

    .mini-panel {
        height: auto;
        padding: clamp(0.68rem, 1svh, 0.82rem) clamp(0.65rem, 0.75vw, 0.85rem);
        border-radius: 1.4svh;
        overflow: hidden;
    }

    .mini-select-row,
    .mini-quick-button,
    .mini-lap-list li,
    .mini-alarm-row p,
    .mini-converter-fields span,
    .mini-converter-fields strong,
    .mini-converter-time small {
        font-size: clamp(0.72rem, 1.22svh, 0.78rem);
    }

    .mini-tool-status {
        font-size: clamp(0.66rem, 1.05svh, 0.72rem);
    }

    .mini-tool-status strong {
        padding: 0.14svh 0.42vw;
        font-size: clamp(0.62rem, 0.95svh, 0.66rem);
    }

    .mini-timer-time {
        margin-top: 0.65svh;
        font-size: clamp(1.9rem, 3.55svh, 2.15rem);
    }

    .mini-timer-actions {
        margin-top: 0.95svh;
        gap: 0.45vw;
    }

    .mini-quick-button {
        min-height: clamp(1.82rem, 2.75svh, 2rem);
        padding-inline: clamp(0.5rem, 0.55vw, 0.65rem);
    }

    .mini-play-button {
        width: clamp(2.25rem, 3.8svh, 2.5rem);
        height: clamp(2.25rem, 3.8svh, 2.5rem);
    }

    .mini-play-button svg {
        width: 1.55svh;
        height: 1.55svh;
    }

    .mini-stopwatch-panel {
        padding-right: 5.4svh;
    }

    .mini-stopwatch-time {
        font-size: clamp(1.42rem, 2.65svh, 1.65rem);
    }

    .mini-lap-list {
        margin-top: 1svh;
        padding-top: 0.8svh;
        gap: 0.5svh;
    }

    .mini-stopwatch-actions {
        right: 0.65vw;
        bottom: 0.8svh;
        gap: 0.45vw;
    }

    .mini-reset-button {
        width: 3.45svh;
        height: 3.45svh;
    }

    .mini-alarm-row {
        min-height: 4.25svh;
    }

    .mini-alarm-row span {
        font-size: clamp(1.2rem, 2.25svh, 1.4rem);
    }

    .mini-alarm-row small {
        font-size: clamp(0.68rem, 1.18svh, 0.76rem);
    }

    .mini-toggle {
        width: 3.55svh;
        height: 1.95svh;
    }

    .mini-toggle::after {
        top: 0.24svh;
        left: 0.24svh;
        width: 1.45svh;
        height: 1.45svh;
    }

    .mini-toggle.is-on::after {
        transform: translateX(1.55svh);
    }

    .mini-add-alarm-button {
        min-height: clamp(1.6rem, 2.45svh, 1.8rem);
        margin-top: 0.4svh;
        border-radius: 0.75svh;
        font-size: clamp(0.68rem, 1.12svh, 0.74rem);
    }

    .mini-converter-fields div {
        min-height: 2.85svh;
        padding: 0 2.15vw 0 0.65vw;
    }

    .mini-converter-fields button {
        width: 3.4svh;
        height: 3.4svh;
    }

    .mini-converter-result {
        margin-top: 0.45svh;
        min-height: 3svh;
    }

    .mini-converter-time {
        gap: 0.18svh;
    }

    .mini-converter-time strong,
    .mini-converter-arrow {
        font-size: clamp(1.05rem, 1.85svh, 1.18rem);
    }

    .mini-converter-actions {
        margin-top: 0.35svh;
    }

    .mini-convert-button {
        min-height: 2.25svh;
        padding: 0 0.75vw;
        border-radius: 0.65svh;
        font-size: min(1.05svh, 0.68rem);
    }

    .tool-preview-link {
        font-size: clamp(0.7rem, 1.16svh, 0.76rem);
    }
}

@media (min-width: 74.001rem) and (min-height: 600px) and (max-height: 820px) {
    .landing-pill {
        min-height: 4.25svh;
        font-size: min(1.52svh, 0.9rem);
    }

    .landing-pill svg {
        width: 1.78svh;
        height: 1.78svh;
    }

    .landing-hero-title {
        max-width: 41vw;
        margin-top: 2.15svh;
        font-size: min(6.05svh, 3.8rem);
    }

    .landing-hero-subtitle {
        max-width: 34.5vw;
        margin-top: 1.65svh;
        font-size: min(1.8svh, 1.06rem);
        line-height: 1.5;
    }

    .landing-cta-row {
        margin-top: 2.4svh;
        gap: 1.4vw;
    }

    .landing-cta {
        min-height: 5.25svh;
        border-radius: 1.32svh;
        font-size: min(1.62svh, 0.96rem);
    }

    .landing-cta svg {
        width: 1.95svh;
        height: 1.95svh;
    }

    .clock-preview-card {
        padding: clamp(0.95rem, 1.85svh, 1.35rem) clamp(1rem, 1.25vw, 1.5rem);
        border-radius: min(1.75vw, 2.9svh);
    }

    .clock-preview-header {
        gap: clamp(0.75rem, 0.9vw, 1rem);
    }

    .clock-preview-location {
        gap: 0.35svh;
    }

    .clock-preview-label {
        font-size: min(1.32svh, 0.8rem);
    }

    .clock-preview-city {
        font-size: min(1.68svh, 1rem);
    }

    .clock-preview-search input,
    .clock-preview-add {
        min-height: clamp(2.2rem, 4.65svh, 2.8rem);
        border-radius: 1.32svh;
        font-size: min(1.48svh, 0.9rem);
    }

    .clock-preview-time-row {
        margin-top: clamp(0.95rem, 2.2svh, 1.4rem);
        grid-template-columns: minmax(0, 1fr) min(15.2svh, 10.2rem);
        gap: 2vw;
    }

    .clock-preview-time span {
        font-size: min(7.05svh, 4.25rem);
    }

    .clock-preview-time small {
        font-size: min(2.25svh, 1.35rem);
    }

    .clock-preview-date-line {
        margin-top: 1.25svh;
        font-size: min(1.55svh, 0.94rem);
    }

    .clock-preview-offset,
    .city-mini-offset {
        min-height: 2.55svh;
        font-size: min(1.24svh, 0.76rem);
    }

    .clock-preview-zone {
        margin-top: 0.65svh;
        font-size: min(1.45svh, 0.88rem);
    }

    .preview-analog-clock {
        width: min(15.2svh, 10.2rem);
    }

    .city-mini-grid {
        margin-top: 1.95svh;
        gap: 0.82vw;
    }

    .city-mini-card {
        height: min(19svh, 13.25rem);
        padding: 1.3svh 0.9vw;
        border-radius: 2svh;
    }

    .city-mini-select {
        padding: 1.3svh 0.9vw;
    }

    .city-mini-name {
        font-size: min(1.72svh, 1.05rem);
    }

    .city-mini-country {
        font-size: min(1.32svh, 0.82rem);
    }

    .city-mini-weather {
        width: 2.6svh;
        height: 2.6svh;
    }

    .city-mini-time {
        margin-top: 1.1svh;
    }

    .city-mini-time span {
        font-size: min(3svh, 1.85rem);
    }

    .city-mini-time small {
        font-size: min(1.42svh, 0.87rem);
    }

    .city-mini-date {
        margin-top: 0.5svh;
        font-size: min(1.2svh, 0.76rem);
    }

    .clock-preview-footer {
        min-height: 2.6svh;
        margin-top: 1svh;
    }
}

/* Keep the landing mini-card UTC badge compact so it does not compete with the date. */
.landing-root .city-mini-offset {
    min-height: clamp(1rem, 2.1svh, 1.35rem);
    margin-top: clamp(0.25rem, 0.55svh, 0.45rem);
    padding: 0 clamp(0.45rem, 0.55vw, 0.58rem);
    font-size: clamp(0.68rem, 1.14svh, 0.74rem);
    line-height: 1;
}

/* Tool card alignment polish */
.mini-stopwatch-panel,
.mini-alarm-panel {
    justify-content: flex-start;
    gap: 0.42rem;
}

.mini-stopwatch-main {
    margin-top: 0.1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
}

.mini-stopwatch-time {
    min-width: 0;
    font-size: clamp(1.5rem, 2.7svh, 1.72rem);
    font-weight: 700;
    line-height: 1;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.mini-stopwatch-actions {
    position: static;
    right: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.mini-stopwatch-actions .mini-play-button {
    width: 2.2rem;
    height: 2.2rem;
    margin-left: 0;
}

.mini-stopwatch-actions .mini-reset-button {
    width: 2rem;
    height: 2rem;
}

.mini-stopwatch-actions .mini-play-button svg,
.mini-stopwatch-actions .mini-reset-button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.mini-lap-list {
    margin-top: 0;
    padding-top: 0.55rem;
    gap: 0.38rem;
}

.mini-lap-list li {
    display: grid;
    grid-template-columns: auto minmax(5.6rem, auto);
    align-items: center;
    gap: 0.65rem;
    font-size: clamp(0.78rem, 1.28svh, 0.84rem);
    line-height: 1.15;
}

.mini-lap-list li span:last-child {
    justify-self: end;
    color: #243b63;
}

.mini-alarm-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

.mini-alarm-row {
    min-height: 2.05rem;
    padding: 0.12rem 0.15rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}

.mini-alarm-row > div {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.mini-alarm-row > div > span {
    color: #071431;
    font-size: clamp(1.32rem, 2.45svh, 1.5rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.mini-alarm-row > div > span small {
    margin-left: 0.18rem;
    color: #41557a;
    font-size: clamp(0.72rem, 1.18svh, 0.8rem);
    font-weight: 700;
}

.mini-alarm-row p {
    margin: 0;
    color: #52627d;
    font-size: clamp(0.76rem, 1.18svh, 0.84rem);
    font-weight: 700;
    line-height: 1.1;
}

.mini-toggle {
    width: 2.1rem;
    height: 1.18rem;
}

.mini-toggle::after {
    top: 0.15rem;
    left: 0.15rem;
    width: 0.88rem;
    height: 0.88rem;
}

.mini-toggle.is-on::after {
    transform: translateX(0.92rem);
}

.mini-add-alarm-button {
    min-height: 1.65rem;
    margin-top: 0.35rem;
    border-radius: 0.5rem;
    font-size: clamp(0.78rem, 1.2svh, 0.84rem);
    line-height: 1;
}

/* Read-only converter preview */
.mini-converter-fields div {
    padding-right: 0.85rem;
    grid-template-columns: 3.2rem minmax(0, 1fr);
}

/* SEO content and focused utility pages */
.tool-seo-header {
    width: min(100%, 48rem);
    margin: 0 auto clamp(1rem, 2.2vw, 1.8rem);
    color: #0a1730;
    text-align: center;
}

.tool-seo-header h1 {
    margin: 0;
    color: #07101f;
    font-size: clamp(2.05rem, 4vw, 4.4rem);
    font-weight: 760;
    line-height: 0.98;
}

.tool-seo-header p:not(.eyebrow) {
    width: min(100%, 42rem);
    margin: 0.85rem auto 0;
    color: #29405f;
    font-size: clamp(0.98rem, 1.25vw, 1.15rem);
    font-weight: 500;
    line-height: 1.55;
}

.timer-page.seo-enabled {
    height: auto;
    min-height: var(--page-vh);
    overflow-x: hidden;
    overflow-y: visible;
}

.timer-page.seo-enabled .timer-hero {
    height: auto;
    min-height: var(--page-vh);
    overflow: visible;
}

.timer-page.seo-enabled .timer-shell {
    grid-template-columns: minmax(0, var(--timer-panel-width));
    align-content: center;
    gap: clamp(0.9rem, 2vw, 1.4rem);
}

.timer-page.seo-enabled .timer-console {
    max-height: none;
}

.seo-content {
    padding: clamp(2.5rem, 6vw, 5.5rem) var(--edge-x);
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.6rem);
    background: linear-gradient(180deg, #f6f8fb 0%, #e8eef4 100%);
}

.seo-panel {
    width: min(100%, var(--hero-inline));
    margin: 0 auto;
    padding: clamp(1.1rem, 2.4vw, 2rem);
    border: 1px solid rgba(80, 101, 127, 0.14);
    border-radius: var(--radius-sm);
    display: grid;
    gap: clamp(0.9rem, 2vw, 1.4rem);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 48px rgba(40, 58, 80, 0.1);
    backdrop-filter: blur(12px);
}

.seo-panel h2 {
    margin: 0;
    color: #0a1730;
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
    font-weight: 720;
    line-height: 1.1;
}

.seo-panel p {
    max-width: 62rem;
    margin: 0;
    color: #3b4f6e;
    font-size: 0.98rem;
    line-height: 1.65;
}

.seo-link-grid,
.seo-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.seo-link-grid a,
.seo-link-row a {
    min-height: 2.55rem;
    padding: 0.68rem 0.95rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #075ce6;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    font-weight: 680;
    text-decoration: none;
}

.seo-link-grid a:hover,
.seo-link-row a:hover {
    border-color: rgba(37, 99, 235, 0.32);
    background: rgba(232, 241, 255, 0.84);
}

.seo-faq details {
    border-top: 1px solid rgba(80, 101, 127, 0.14);
    padding: 1rem 0 0;
}

.seo-faq details:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.seo-faq summary {
    cursor: pointer;
    color: #0a1730;
    font-weight: 720;
}

.seo-faq details p {
    margin-top: 0.55rem;
}

.clock-seo-label {
    margin: 0 0 0.35rem;
    color: #176eea;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.alarm-seo-header {
    margin-bottom: clamp(1rem, 2.5vw, 1.7rem);
}

.alarm-editor-head h2 {
    color: #07101f;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 760;
    line-height: 1;
}

.blog-page {
    min-height: var(--page-vh);
}

.blog-page .seo-content {
    padding-top: clamp(1.8rem, 4vw, 3.25rem);
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.blog-hero {
    position: relative;
    min-height: clamp(24rem, 52vh, 36rem);
    padding: calc(var(--header-h) + clamp(1.4rem, 3vw, 2.5rem)) var(--edge-x) clamp(2rem, 5vw, 3.5rem);
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 247, 255, 0.68) 48%, rgba(221, 238, 255, 0.62) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(225, 238, 249, 0.34)),
        url("/images/hero-misty-lake.png");
    background-position: center 46%;
    background-size: cover;
}

.blog-hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 34%;
    content: "";
    background: linear-gradient(180deg, rgba(238, 247, 255, 0), rgba(238, 247, 255, 0.56));
}

.blog-hero-inner {
    position: relative;
    z-index: 1;
    width: min(100%, var(--hero-inline));
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.blog-hero-header {
    width: min(100%, 54rem);
}

.blog-page > .blog-hero:not(.blog-post-hero) {
    min-height: clamp(19rem, 38vh, 24rem);
    padding-bottom: clamp(1.1rem, 2.8vw, 1.75rem);
}

.blog-page > .blog-hero:not(.blog-post-hero) .blog-hero-inner {
    min-height: 100%;
    align-content: center;
}

.blog-page > .blog-hero:not(.blog-post-hero) .blog-hero-header {
    margin-bottom: 0;
}

.blog-page .seo-panel {
    gap: clamp(0.95rem, 2vw, 1.3rem);
}

.blog-index-head {
    display: grid;
    gap: 1.2rem;
}

.blog-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.blog-filter-group::-webkit-scrollbar {
    display: none;
}

.blog-filter-button {
    min-height: 2.6rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(105, 129, 158, 0.18);
    border-radius: 999px;
    color: #334765;
    background: rgba(255, 255, 255, 0.86);
    font-size: 0.88rem;
    font-weight: 700;
}

.blog-filter-button:hover {
    border-color: rgba(37, 99, 235, 0.28);
    color: #075ce6;
}

.blog-filter-button.active {
    border-color: transparent;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1473ff);
    box-shadow: 0 0.85rem 1.5rem rgba(37, 99, 235, 0.18);
}

.blog-preview-grid {
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-card {
    position: relative;
    min-height: 20rem;
    gap: 1rem;
    overflow: hidden;
}

.blog-card-stripe {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.35rem;
    background: linear-gradient(90deg, var(--accent), #1473ff);
}

.blog-card.remote-work .blog-card-stripe {
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
}

.blog-card.fitness .blog-card-stripe {
    background: linear-gradient(90deg, var(--success), #22c55e);
}

.blog-card.markets .blog-card-stripe {
    background: linear-gradient(90deg, #f59e0b, #2563eb);
}

.blog-card-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.blog-card-emoji {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    display: inline-grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(37, 99, 235, 0.12);
}

.blog-card.remote-work .blog-card-emoji {
    background: rgba(124, 58, 237, 0.12);
}

.blog-card.fitness .blog-card-emoji {
    background: rgba(16, 185, 129, 0.14);
}

.blog-card.markets .blog-card-emoji {
    color: #7c4a03;
    background: rgba(245, 158, 11, 0.16);
}

.blog-card-head-copy {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}

.blog-card-head-copy time,
.blog-card-footer span,
.blog-post-meta {
    color: #5d718d;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.4;
}

.blog-category-pill {
    width: fit-content;
    min-height: 1.95rem;
    padding: 0.35rem 0.72rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #075ce6;
    background: rgba(219, 234, 254, 0.72);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.blog-category-pill.remote-work {
    border-color: rgba(124, 58, 237, 0.16);
    color: #6d28d9;
    background: rgba(237, 233, 254, 0.82);
}

.blog-category-pill.fitness {
    border-color: rgba(16, 185, 129, 0.16);
    color: #047857;
    background: rgba(209, 250, 229, 0.82);
}

.blog-category-pill.markets {
    border-color: rgba(245, 158, 11, 0.2);
    color: #9a5b05;
    background: rgba(254, 243, 199, 0.86);
}

.blog-card-copy {
    display: grid;
    gap: 0.75rem;
}

.blog-card-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.22rem;
    font-weight: 720;
    line-height: 1.25;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: #075ce6;
}

.blog-card-description {
    margin: 0 !important;
    color: #3b4f6e !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

.blog-card-footer {
    margin-top: auto;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.blog-card-footer a,
.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #075ce6;
    font-size: 0.88rem;
    font-weight: 750;
}

.blog-card-footer a:hover,
.blog-back-link:hover {
    color: #0347b7;
}

.blog-post-hero {
    min-height: clamp(28rem, 60vh, 42rem);
}

.blog-back-link {
    width: fit-content;
    min-height: 2.3rem;
}

.blog-post-header {
    width: min(100%, 50rem);
}

.blog-post-header > p {
    max-width: 42rem;
    margin-inline: auto;
}

.blog-post-emoji {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem;
    border-radius: 1.4rem;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 1rem 2.2rem rgba(37, 99, 235, 0.12);
}

.blog-post-header .blog-category-pill {
    margin: 0 auto 1rem;
}

.blog-post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1rem;
}

.blog-article-panel {
    gap: 1.6rem;
}

.blog-article-body {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
}

.blog-article-body h2,
.blog-article-body h3 {
    margin: 0;
    color: #0a1730;
}

.blog-article-body h2 {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 760;
    line-height: 1.12;
}

.blog-article-body h3 {
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    font-weight: 740;
    line-height: 1.2;
}

.blog-article-body p {
    max-width: none;
    color: #334765;
    font-size: 1rem;
    line-height: 1.75;
}

.blog-article-image {
    margin: 0.2rem 0 0.45rem;
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94));
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.blog-article-image img {
    display: block;
    width: 100%;
    height: auto;
}

.blog-article-body strong {
    color: #0f172a;
    font-weight: 780;
}

.blog-article-body a {
    color: #075ce6;
    font-weight: 720;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.blog-article-body a:hover {
    color: #0347b7;
}

.blog-cta-banner {
    padding: clamp(1.15rem, 2vw, 1.8rem);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 1.25rem;
    display: grid;
    gap: 0.7rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(232, 241, 255, 0.88)),
        rgba(255, 255, 255, 0.82);
}

.blog-cta-kicker {
    color: #176eea;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.blog-cta-banner h2 {
    margin: 0;
}

.blog-cta-button {
    width: fit-content;
    min-height: 2.8rem;
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1473ff);
    box-shadow: 0 0.95rem 1.8rem rgba(37, 99, 235, 0.2);
    font-size: 0.92rem;
    font-weight: 760;
}

.blog-cta-button:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1d4ed8, #0f62ff);
}

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

@media (max-width: 920px) {
    .blog-hero {
        min-height: clamp(22rem, 48vh, 30rem);
    }

    .blog-page > .blog-hero:not(.blog-post-hero) {
        min-height: clamp(17rem, 32vh, 21rem);
        padding-bottom: 1.2rem;
    }

    .blog-page .seo-content {
        padding-top: 2rem;
    }

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

@media (max-width: 620px) {
    .blog-page .seo-content {
        gap: 0.85rem;
        padding: 1.2rem 0.85rem 1.75rem;
    }

    .blog-page .seo-panel {
        width: min(100%, 100%);
        padding: 1rem 0.95rem;
        border-radius: 1rem;
        gap: 0.9rem;
    }

    .blog-hero,
    .blog-post-hero {
        min-height: auto;
        padding: calc(var(--header-h) + 0.95rem) 0.85rem 1.35rem;
        background-position: 54% center;
    }

    .blog-hero::after {
        height: 24%;
    }

    .blog-hero-inner {
        width: min(100%, 100%);
        gap: 0.75rem;
    }

    .blog-page > .blog-hero:not(.blog-post-hero) {
        padding-bottom: 1rem;
    }

    .blog-hero-header,
    .blog-post-header,
    .blog-index-head {
        text-align: left;
    }

    .blog-hero-header {
        width: 100%;
    }

    .blog-hero-header .eyebrow,
    .blog-post-header .eyebrow {
        margin-bottom: 0.45rem;
    }

    .blog-hero-header h1,
    .blog-post-header h1 {
        font-size: clamp(1.85rem, 8vw, 2.35rem);
        line-height: 1.02;
        text-wrap: balance;
    }

    .blog-hero-header p:not(.eyebrow),
    .blog-post-header p:not(.eyebrow) {
        width: 100%;
        margin-top: 0.72rem;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .blog-back-link {
        min-height: 2rem;
        font-size: 0.82rem;
    }

    .blog-post-header .blog-category-pill,
    .blog-post-emoji {
        margin-left: 0;
        margin-right: 0;
    }

    .blog-post-emoji {
        width: 3.6rem;
        height: 3.6rem;
        margin-bottom: 0.75rem;
        border-radius: 1rem;
        font-size: 1.85rem;
    }

    .blog-post-meta {
        margin-top: 0.72rem;
        gap: 0.4rem;
        font-size: 0.78rem;
    }

    .blog-post-meta {
        justify-content: flex-start;
    }

    .blog-filter-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -0.1rem;
        padding-inline: 0.1rem;
        padding-bottom: 0.1rem;
        gap: 0.5rem;
        scrollbar-width: none;
    }

    .blog-filter-button {
        min-height: 2.35rem;
        padding: 0.58rem 0.86rem;
        flex: 0 0 auto;
        font-size: 0.8rem;
    }

    .blog-preview-grid,
    .blog-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-card {
        min-height: auto;
        padding: 1rem;
        gap: 0.8rem;
        border-radius: 1.1rem;
    }

    .blog-card-head {
        gap: 0.72rem;
    }

    .blog-card-emoji {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 0.78rem;
        font-size: 1.25rem;
    }

    .blog-category-pill {
        min-height: 1.72rem;
        padding: 0.28rem 0.58rem;
        font-size: 0.66rem;
    }

    .blog-card-head-copy time,
    .blog-card-footer span {
        font-size: 0.76rem;
    }

    .blog-card-title {
        font-size: 1.02rem;
        line-height: 1.24;
    }

    .blog-card-description {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    .blog-card-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
        padding-top: 0.5rem;
    }

    .blog-card-footer a {
        font-size: 0.82rem;
    }

    .blog-article-panel {
        gap: 1rem;
    }

    .blog-article-body {
        gap: 0.85rem;
    }

    .blog-article-body h2 {
        font-size: 1.24rem;
        line-height: 1.16;
    }

    .blog-article-body h3 {
        font-size: 1rem;
        line-height: 1.22;
    }

    .blog-article-body p {
        font-size: 0.95rem;
        line-height: 1.68;
    }

    .blog-cta-banner {
        padding: 1rem 0.95rem;
        border-radius: 1rem;
        gap: 0.55rem;
    }

    .blog-cta-kicker {
        font-size: 0.72rem !important;
    }

    .blog-cta-banner h2 {
        font-size: 1.12rem;
        line-height: 1.2;
    }

    .blog-cta-button {
        width: 100%;
        min-height: 2.55rem;
        justify-content: center;
        padding: 0.72rem 0.95rem;
        border-radius: 0.82rem;
        font-size: 0.84rem;
    }

    .blog-related-grid .blog-card {
        min-height: auto;
    }
}

@media (max-width: 420px) {
    .blog-page .seo-content {
        padding-inline: 0.7rem;
    }

    .blog-hero,
    .blog-post-hero {
        padding-inline: 0.7rem;
        padding-bottom: 1.15rem;
    }

    .blog-page .seo-panel {
        padding: 0.92rem 0.82rem;
    }

    .blog-hero-header h1,
    .blog-post-header h1 {
        font-size: clamp(1.65rem, 8.6vw, 2rem);
    }

    .blog-hero-header p:not(.eyebrow),
    .blog-post-header p:not(.eyebrow),
    .blog-article-body p {
        font-size: 0.92rem;
    }

    .blog-card {
        padding: 0.9rem;
    }
}

:root[data-theme="dark"] .blog-hero {
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, 0.82) 0%, rgba(13, 27, 48, 0.68) 46%, rgba(22, 51, 90, 0.62) 100%),
        linear-gradient(180deg, rgba(7, 17, 31, 0.38), rgba(7, 17, 31, 0.72)),
        url("/images/hero-misty-lake.png");
}

:root[data-theme="dark"] .blog-hero::after {
    background: linear-gradient(180deg, rgba(7, 17, 31, 0), rgba(7, 17, 31, 0.6));
}

:root[data-theme="dark"] .blog-filter-button {
    border-color: var(--border-soft);
    color: var(--text-secondary);
    background: var(--bg-elevated);
    box-shadow: none;
}

:root[data-theme="dark"] .blog-filter-button:hover,
:root[data-theme="dark"] .blog-filter-button.active {
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .blog-card-emoji,
:root[data-theme="dark"] .blog-post-emoji {
    background: rgba(96, 165, 250, 0.14);
    box-shadow: none;
}

:root[data-theme="dark"] .blog-card.markets .blog-card-emoji {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.14);
}

:root[data-theme="dark"] .blog-category-pill {
    border-color: var(--border-soft);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .blog-category-pill.remote-work {
    border-color: rgba(167, 139, 250, 0.24);
    color: #c4b5fd;
    background: rgba(109, 40, 217, 0.18);
}

:root[data-theme="dark"] .blog-category-pill.fitness {
    border-color: rgba(52, 211, 153, 0.22);
    color: #86efac;
    background: rgba(5, 150, 105, 0.2);
}

:root[data-theme="dark"] .blog-category-pill.markets {
    border-color: rgba(251, 191, 36, 0.24);
    color: #fcd34d;
    background: rgba(146, 64, 14, 0.22);
}

:root[data-theme="dark"] .blog-card-title,
:root[data-theme="dark"] .blog-article-body h2,
:root[data-theme="dark"] .blog-article-body h3,
:root[data-theme="dark"] .blog-article-body strong {
    color: var(--text-primary);
}

:root[data-theme="dark"] .blog-card-head-copy time,
:root[data-theme="dark"] .blog-card-description,
:root[data-theme="dark"] .blog-card-footer span,
:root[data-theme="dark"] .blog-post-meta,
:root[data-theme="dark"] .blog-article-body p {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .blog-card-footer {
    border-top-color: var(--border-soft);
}

:root[data-theme="dark"] .blog-card-footer a,
:root[data-theme="dark"] .blog-back-link {
    color: var(--accent);
}

:root[data-theme="dark"] .blog-card-title a,
:root[data-theme="dark"] .blog-article-body a {
    color: var(--accent);
}

:root[data-theme="dark"] .blog-cta-banner {
    border-color: var(--border-soft);
    background: linear-gradient(135deg, rgba(15, 31, 53, 0.96), rgba(13, 24, 42, 0.94));
}

:root[data-theme="dark"] .blog-cta-kicker {
    color: var(--accent-hover) !important;
}

.forex-page {
    min-height: var(--page-vh);
    background:
        linear-gradient(90deg, rgba(247, 250, 253, 0.76) 0%, rgba(239, 244, 249, 0.54) 44%, rgba(54, 75, 97, 0.38) 100%),
        url("/images/hero-misty-lake.png");
    background-position: center;
    background-size: cover;
}

.forex-hero {
    min-height: var(--page-vh);
    padding: calc(var(--header-h) + 5svh) var(--edge-x) 6svh;
}

.forex-shell {
    width: min(100%, var(--hero-inline));
    margin: 0 auto;
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.6rem);
}

.forex-session-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.4vw, 1.1rem);
}

.forex-session-card {
    min-width: 0;
    min-height: 13rem;
    padding: clamp(1rem, 1.8vw, 1.45rem);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-sm);
    display: grid;
    align-content: space-between;
    gap: 0.9rem;
    color: #0a1730;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.forex-session-card h2 {
    margin: 0.2rem 0 0;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 760;
}

.forex-session-card p,
.forex-session-card small {
    margin: 0;
    color: #536073;
    font-weight: 620;
}

.forex-session-card time {
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    font-weight: 760;
    font-variant-numeric: tabular-nums;
}

.forex-session-card > span {
    width: fit-content;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    color: #4f617a;
    background: rgba(82, 99, 124, 0.12);
    font-size: 0.82rem;
    font-weight: 760;
}

.forex-session-card.is-open > span {
    color: #075ce6;
    background: rgba(37, 99, 235, 0.13);
}

.forex-status-dot {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    display: inline-block;
    background: #aeb9c8;
}

.forex-session-card.is-open .forex-status-dot {
    background: #176eea;
    box-shadow: 0 0 0 0.32rem rgba(37, 99, 235, 0.12);
}

.forex-overlap-panel {
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.forex-overlap-panel span {
    color: #536073;
    font-size: 0.82rem;
    font-weight: 760;
    text-transform: uppercase;
}

.forex-overlap-panel strong {
    display: block;
    margin-top: 0.2rem;
    color: #07101f;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.forex-overlap-panel p {
    max-width: 34rem;
    margin: 0;
    color: #29405f;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .forex-session-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .forex-overlap-panel {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .tool-seo-header {
        text-align: left;
    }

    .timer-page .tool-seo-header {
        justify-items: center;
        text-align: center;
    }

    .timer-page .tool-seo-header p:not(.eyebrow) {
        margin-inline: auto;
    }

    .timer-page.seo-enabled .timer-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .forex-session-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.forex-page {
    min-height: var(--page-vh);
    color: #0f172a;
    background:
        radial-gradient(circle at 88% 0%, rgba(219, 234, 254, 0.9), transparent 32rem),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 58%, #f8fbff 100%);
}

.forex-body {
    min-height: var(--page-vh);
    padding: calc(var(--header-h) + clamp(0.9rem, 2vw, 1.55rem)) clamp(1rem, 2.7vw, 2.5rem) clamp(2.25rem, 5vw, 4rem);
}

.forex-workspace {
    width: min(100%, 1440px);
    margin: 0 auto;
    display: grid;
    gap: 0.8rem;
}

.forex-top-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 0.82fr) minmax(28rem, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
}

.forex-title-block {
    padding-top: clamp(0.15rem, 1.2vw, 0.7rem);
}

.forex-title-block h1 {
    margin: 0;
    color: #07101f;
    font-size: clamp(2.05rem, 4vw, 3rem);
    line-height: 0.98;
    letter-spacing: 0;
    font-weight: 760;
}

.forex-title-block p {
    max-width: 44rem;
    margin: 0.62rem 0 0;
    color: #475569;
    font-size: clamp(0.92rem, 1.1vw, 1rem);
    line-height: 1.45;
    font-weight: 560;
}

.forex-info-pill {
    width: fit-content;
    max-width: 100%;
    margin-top: 0.75rem;
    padding: 0.46rem 0.7rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #2563eb;
    background: rgba(219, 234, 254, 0.78);
    font-size: 0.84rem;
    font-weight: 640;
}

.forex-info-pill.is-closed {
    color: #b45309;
    background: rgba(254, 243, 199, 0.88);
}

.forex-info-pill svg,
.forex-alert-list svg,
.forex-upnext-list > li > svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forex-time-zone-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.2rem, 10.1rem);
    gap: 0.72rem;
    align-items: stretch;
}

.forex-local-time-card,
.forex-control-stack > *,
.forex-market-card,
.forex-timeline-card,
.forex-summary-card,
.forex-sidebar-card,
.forex-faq-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

.forex-local-time-card {
    min-height: 8.05rem;
    padding: clamp(0.8rem, 1.25vw, 0.95rem);
    border-radius: 1.05rem;
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(7.5rem, 10.5rem);
    gap: 0.5rem;
    overflow: hidden;
}

.forex-card-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 720;
}

.forex-card-kicker strong {
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    color: #059669;
    background: rgba(16, 185, 129, 0.13);
    font-size: 0.76rem;
    font-weight: 760;
}

.forex-live-time {
    margin-top: 0.32rem;
    display: flex;
    align-items: baseline;
    gap: 0.62rem;
    color: #07101f;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.forex-live-time span {
    font-size: clamp(2.25rem, 3.75vw, 3.05rem);
    line-height: 0.95;
    font-weight: 760;
}

.forex-live-time small {
    color: #2563eb;
    font-size: clamp(1rem, 1.55vw, 1.25rem);
    font-weight: 740;
}

.forex-local-time-card time,
.forex-local-time-card p {
    display: block;
    margin: 0.34rem 0 0;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 610;
}

.forex-local-time-card p {
    margin-top: 0.28rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    color: #475569;
}

.forex-local-time-card p span {
    margin-left: 0;
    padding: 0.18rem 0.44rem;
    border-radius: 999px;
    color: #0f172a;
    background: #e2e8f0;
    font-size: 0.74rem;
    font-weight: 720;
}

.forex-map-dots {
    position: relative;
    min-height: 5.1rem;
    border-radius: 1rem;
    opacity: 0.92;
    background:
        radial-gradient(circle, rgba(147, 197, 253, 0.72) 1px, transparent 1.8px) 0 0 / 10px 10px;
    mask-image:
        radial-gradient(ellipse at 32% 45%, #000 0 23%, transparent 24%),
        radial-gradient(ellipse at 56% 35%, #000 0 18%, transparent 19%),
        radial-gradient(ellipse at 70% 54%, #000 0 20%, transparent 21%),
        radial-gradient(ellipse at 83% 70%, #000 0 10%, transparent 11%);
    -webkit-mask-image:
        radial-gradient(ellipse at 32% 45%, #000 0 23%, transparent 24%),
        radial-gradient(ellipse at 56% 35%, #000 0 18%, transparent 19%),
        radial-gradient(ellipse at 70% 54%, #000 0 20%, transparent 21%),
        radial-gradient(ellipse at 83% 70%, #000 0 10%, transparent 11%);
}

.forex-map-dots span {
    position: absolute;
    left: 58%;
    top: 47%;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50% 50% 50% 0;
    background: #2563eb;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 0.35rem rgba(37, 99, 235, 0.12);
}

.forex-map-dots span::after {
    content: "";
    position: absolute;
    inset: 0.28rem;
    border-radius: 50%;
    background: #fff;
}

.forex-control-stack {
    display: grid;
    align-content: start;
    justify-items: stretch;
    gap: 0.55rem;
}

.forex-segmented {
    min-height: 2.12rem;
    max-height: 2.12rem;
    padding: 0.2rem;
    border-radius: 0.72rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.18rem;
}

.forex-segmented button {
    border: 0;
    border-radius: 0.58rem;
    color: #475569;
    background: transparent;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.forex-segmented button.active {
    color: #2563eb;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px #2563eb, 0 8px 18px rgba(37, 99, 235, 0.12);
}

.forex-alert-manager-button {
    min-height: 2.12rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 0.72rem;
    padding: 0 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 780;
    cursor: pointer;
    box-shadow: 0 0.45rem 1rem rgba(37, 99, 235, 0.08);
}

.forex-alert-manager-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.forex-alert-manager-button strong {
    min-width: 1.25rem;
    min-height: 1.25rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: #2563eb;
    font-size: 0.68rem;
}

.forex-alert-modal-layer {
    z-index: 85;
}

.forex-alert-modal {
    width: min(100%, 42rem);
    max-height: min(84svh, 44rem);
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 1rem;
    display: grid;
    overflow: hidden;
    background: rgba(248, 252, 255, 0.98);
    box-shadow: 0 1.8rem 4rem rgba(15, 23, 42, 0.18);
}

.forex-alert-modal-head {
    padding: 1rem 1.05rem 0.8rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.forex-alert-modal-head h2,
.forex-alert-modal-body h3 {
    margin: 0;
    color: #0f172a;
}

.forex-alert-modal-head h2 {
    font-size: 1.05rem;
    font-weight: 800;
}

.forex-alert-modal-close {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 0.7rem;
    display: inline-grid;
    place-items: center;
    color: #334155;
    background: #fff;
}

.forex-alert-modal-close svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.forex-alert-modal-body {
    padding: 1rem 1.05rem 1.1rem;
    display: grid;
    gap: 1rem;
    overflow: auto;
}

.forex-alert-modal-body h3 {
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    font-weight: 780;
    text-transform: uppercase;
    color: #475569;
}

.forex-alert-empty {
    margin: 0;
    padding: 0.85rem;
    border-radius: 0.72rem;
    color: #64748b;
    background: rgba(226, 232, 240, 0.5);
    font-size: 0.82rem;
    font-weight: 650;
}

.forex-alert-modal-list {
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
    list-style: none;
}

.forex-alert-modal-list li {
    padding: 0.72rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.78rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
}

.forex-alert-modal-list strong,
.forex-alert-modal-list span,
.forex-alert-modal-options span,
.forex-alert-modal-options small {
    display: block;
}

.forex-alert-modal-list strong,
.forex-alert-modal-options span {
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 780;
}

.forex-alert-modal-list span,
.forex-alert-modal-options small {
    margin-top: 0.18rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 640;
}

.forex-alert-modal-list button,
.forex-alert-modal-options button {
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 0.64rem;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 760;
    cursor: pointer;
}

.forex-alert-modal-list button {
    min-height: 2rem;
    padding: 0 0.72rem;
    color: #dc2626;
    background: rgba(254, 242, 242, 0.9);
}

.forex-alert-modal-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.forex-alert-modal-options button {
    min-height: 4.35rem;
    padding: 0.72rem;
    text-align: left;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.07);
}

.forex-market-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.forex-market-card {
    --session-color: #2563eb;
    min-height: 7.65rem;
    padding: 0.68rem 0.72rem;
    border-radius: 0.9rem;
    display: grid;
    gap: 0.34rem;
    position: relative;
    overflow: hidden;
}

.forex-market-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.18rem;
    background: var(--session-color);
    opacity: 0.72;
}

.forex-session-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
    padding-right: 3.35rem;
}

.forex-session-icon,
.forex-row-icon,
.forex-upnext-icon {
    color: var(--session-color);
}

.forex-session-icon {
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forex-session-icon svg,
.forex-row-icon svg,
.forex-upnext-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forex-session-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.1;
    font-weight: 760;
}

.forex-session-head p {
    margin: 0.16rem 0 0;
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.25;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forex-session-badge {
    position: absolute;
    top: 0.64rem;
    right: 0.66rem;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    color: #475569;
    background: #eef2f7;
    font-size: 0.68rem;
    font-weight: 760;
}

.forex-market-card.is-open .forex-session-badge {
    color: #059669;
    background: rgba(16, 185, 129, 0.14);
}

.forex-session-countdown span {
    display: block;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 620;
}

.forex-session-countdown strong {
    display: block;
    margin-top: 0.1rem;
    color: #0f172a;
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1;
    font-weight: 760;
}

.forex-session-hours {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.12rem;
    color: #334155;
    font-size: 0.7rem;
    font-weight: 650;
}

.forex-session-hours small {
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.15;
}

.forex-progress-track {
    height: 0.18rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.forex-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--session-color);
}

.forex-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(14.5rem, 0.8fr);
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.forex-main-column,
.forex-sidebar {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.forex-timeline-card,
.forex-summary-card,
.forex-sidebar-card,
.forex-faq-card {
    border-radius: 1.1rem;
    padding: clamp(0.9rem, 1.25vw, 1.05rem);
    min-width: 0;
}

.forex-timeline-card {
    overflow: hidden;
}

.forex-card-header {
    margin-bottom: 0.58rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.forex-card-header h2,
.forex-sidebar-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 760;
}

.forex-card-header span,
.forex-sidebar-card > p {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 620;
}

.forex-timeline-legend {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 640;
}

.forex-timeline-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.forex-timeline-legend i,
.forex-overlap-list i {
    display: inline-block;
    border-radius: 999px;
}

.legend-overlap {
    width: 1.15rem;
    height: 0.75rem;
    background: rgba(96, 165, 250, 0.28);
}

.legend-current {
    width: 0.34rem;
    height: 1.05rem;
    background: #2563eb;
}

.forex-timeline-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding: 1.15rem 0 0.3rem;
}

.forex-timeline-board {
    min-width: 860px;
}

.forex-axis-row,
.forex-timeline-content {
    display: grid;
    grid-template-columns: 6.8rem minmax(0, 1fr);
    gap: 0.82rem;
}

.forex-axis-row > span,
.forex-row-labels {
    position: sticky;
    left: 0;
    z-index: 7;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 78%, rgba(255, 255, 255, 0));
}

.forex-axis {
    position: relative;
    height: 0.98rem;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 650;
}

.forex-axis span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.forex-axis span:first-child {
    transform: none;
}

.forex-axis span:last-child {
    transform: translateX(-100%);
}

.forex-row-labels {
    display: grid;
    gap: 0.34rem;
    padding-right: 0.35rem;
}

.forex-row-labels > div,
.forex-track-row {
    min-height: 2.18rem;
}

.forex-row-labels > div {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #2563eb;
}

.forex-row-labels strong {
    color: var(--session-color, #2563eb);
    font-size: 0.8rem;
    font-weight: 760;
}

.forex-row-icon {
    --session-color: currentColor;
    width: 1.3rem;
    height: 1.3rem;
    display: inline-flex;
}

.forex-track-stack {
    position: relative;
    display: grid;
    gap: 0.34rem;
}

.forex-track-row {
    position: relative;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
    background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.22) 1px, transparent 1px);
    background-size: calc(100% / 8) 100%;
}

.forex-current-marker {
    position: absolute;
    top: -0.18rem;
    bottom: 0.2rem;
    left: var(--forex-current-left);
    z-index: 5;
    width: 0;
    border-left: 2px solid #2563eb;
    pointer-events: none;
}

.forex-current-marker::after {
    content: "";
    position: absolute;
    top: 0.98rem;
    left: -0.31rem;
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.16);
}

.forex-current-marker strong {
    position: absolute;
    top: -1.42rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    padding: 0.24rem 0.42rem;
    border-radius: 0.32rem;
    color: #fff;
    background: #2563eb;
    font-size: 0.68rem;
    font-weight: 760;
    white-space: nowrap;
}

.forex-session-bar,
.forex-overlap-window {
    position: absolute;
    top: 0.42rem;
    height: 1.24rem;
    border-radius: 0.38rem;
}

.forex-overlap-window {
    z-index: 1;
    background: rgba(96, 165, 250, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.forex-session-bar {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 720;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.forex-session-bar.sydney {
    background: rgba(20, 184, 166, 0.34);
}

.forex-session-bar.tokyo {
    background: rgba(139, 92, 246, 0.42);
}

.forex-session-bar.london {
    background: rgba(59, 130, 246, 0.34);
}

.forex-session-bar.new-york {
    background: rgba(249, 115, 22, 0.42);
}

.forex-overlap-list {
    padding: 0;
    margin-top: 0.58rem;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    list-style: none;
}

.forex-overlap-list > li {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    color: #475569;
    font-size: 0.78rem;
}

.forex-overlap-list span {
    display: flex;
    gap: 0.22rem;
}

.forex-overlap-list i {
    width: 0.64rem;
    height: 0.64rem;
}

.forex-overlap-list strong {
    color: #334155;
    font-weight: 760;
}

.forex-overlap-list small {
    color: #64748b;
    font-weight: 600;
}

.forex-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.forex-summary-grid section {
    min-height: 5.6rem;
    padding: 0.82rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.72);
}

.forex-summary-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.forex-summary-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.58rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
}

.forex-summary-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forex-summary-icon.current {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
}

.forex-summary-icon.current svg circle:first-child {
    stroke: #8b5cf6;
}

.forex-summary-icon.current svg circle:last-child {
    stroke: #2563eb;
}

.forex-summary-icon.next {
    color: #f97316;
    background: rgba(249, 115, 22, 0.1);
}

.forex-summary-icon.next svg circle:first-child {
    stroke: #2563eb;
}

.forex-summary-icon.next svg circle:last-child {
    stroke: #f97316;
}

.forex-summary-icon.activity {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.forex-summary-icon.week {
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
}

.forex-summary-label h3 {
    margin: 0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1.2;
}

.forex-summary-grid .forex-summary-icon.current {
    color: #2563eb;
}

.forex-summary-grid .forex-summary-icon.next {
    color: #f97316;
}

.forex-summary-grid .forex-summary-icon.activity {
    color: #10b981;
}

.forex-summary-grid .forex-summary-icon.week {
    color: #64748b;
}

.forex-summary-grid strong {
    display: block;
    margin-top: 0.36rem;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 760;
}

.forex-summary-grid p,
.forex-summary-grid small {
    display: block;
    margin: 0.26rem 0 0;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 620;
}

.forex-summary-grid small {
    color: #64748b;
}

.forex-sidebar-card {
    display: grid;
    gap: 0.82rem;
}

.forex-upnext-list,
.forex-alert-list {
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.7rem;
    list-style: none;
}

.forex-upnext-list li {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.forex-upnext-icon {
    --session-color: #2563eb;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--session-color);
    background: rgba(37, 99, 235, 0.1);
}

.forex-upnext-icon.london {
    --session-color: #3b82f6;
}

.forex-upnext-icon.new-york {
    --session-color: #f97316;
    background: rgba(249, 115, 22, 0.1);
}

.forex-upnext-icon.overlap {
    --session-color: #2563eb;
    color: #2563eb;
}

.forex-upnext-icon.overlap svg circle:first-child {
    stroke: #3b82f6;
}

.forex-upnext-icon.overlap svg circle:last-child {
    stroke: #f97316;
}

.forex-upnext-list strong,
.forex-alert-list span {
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 760;
}

.forex-upnext-list p,
.forex-upnext-list small {
    margin: 0.16rem 0 0;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 620;
}

.forex-upnext-list small {
    color: #64748b;
}

.forex-upnext-list > li > svg {
    color: #64748b;
}

.forex-sidebar-link {
    padding: 0.68rem 0.8rem;
    border-radius: 0.62rem;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    font-size: 0.8rem;
    font-weight: 760;
    text-align: center;
    text-decoration: none;
}

.forex-alert-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.forex-alert-list svg {
    color: #64748b;
}

.forex-alert-list button {
    min-width: 4.35rem;
    min-height: 2rem;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 0.6rem;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 760;
    cursor: pointer;
}

.forex-alert-note {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
}

.forex-disclaimer {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 560;
}

.forex-faq-card {
    margin-top: 0.25rem;
}

.forex-faq-list {
    display: grid;
    gap: 0.75rem;
}

.forex-faq-list details {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.74);
}

.forex-faq-list summary {
    color: #0f172a;
    font-weight: 760;
    cursor: pointer;
}

.forex-faq-list p {
    margin: 0.65rem 0 0;
    color: #475569;
    line-height: 1.6;
}

.forex-toast {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 80;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 0.8rem;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    font-weight: 720;
}

.forex-scroll-top-button {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(4.6rem, 8vw, 5.4rem);
    z-index: 70;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(37, 99, 235, 0.24);
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24);
}

.forex-scroll-top-button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.forex-scroll-top-button svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .forex-top-grid,
    .forex-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

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

@media (max-width: 780px) {
    .forex-body {
        padding-inline: 1rem;
    }

    .forex-time-zone-panel,
    .forex-local-time-card,
    .forex-sidebar,
    .forex-overlap-list {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .forex-alert-modal-options {
        grid-template-columns: 1fr;
    }

    .forex-market-grid,
    .forex-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .forex-card-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .forex-body {
        padding-top: calc(var(--header-h) + 1rem);
    }

    .forex-title-block h1 {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

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

    .forex-session-hours {
        align-items: flex-start;
        flex-direction: column;
    }

    .forex-alert-modal-list li {
        grid-template-columns: 1fr;
    }

    .forex-scroll-top-button {
        right: 1rem;
        bottom: 4.25rem;
        width: 2.55rem;
        height: 2.55rem;
    }
}

/* Forex-only typography balance: keep numbers prominent, soften labels/body. */
.forex-page .forex-title-block h1,
.forex-page .forex-live-time span {
    font-weight: 700;
}

.forex-page .forex-session-countdown strong,
.forex-page .forex-card-header h2,
.forex-page .forex-sidebar-card h2,
.forex-page .forex-summary-grid strong,
.forex-page .forex-upnext-list strong,
.forex-page .forex-faq-list summary {
    font-weight: 650;
}

.forex-page .forex-card-kicker,
.forex-page .forex-card-kicker strong,
.forex-page .forex-live-time small,
.forex-page .forex-session-head h2,
.forex-page .forex-session-badge,
.forex-page .forex-session-bar,
.forex-page .forex-overlap-list strong,
.forex-page .forex-sidebar-link,
.forex-page .forex-alert-list button,
.forex-page .forex-alert-list span,
.forex-page .forex-toast {
    font-weight: 600;
}

.forex-page .forex-title-block p,
.forex-page .forex-info-pill,
.forex-page .forex-local-time-card time,
.forex-page .forex-local-time-card p,
.forex-page .forex-local-time-card p span,
.forex-page .forex-segmented button,
.forex-page .forex-session-head p,
.forex-page .forex-session-countdown span,
.forex-page .forex-session-hours,
.forex-page .forex-session-hours small,
.forex-page .forex-card-header span,
.forex-page .forex-sidebar-card > p,
.forex-page .forex-timeline-legend,
.forex-page .forex-axis,
.forex-page .forex-overlap-list small,
.forex-page .forex-summary-label h3,
.forex-page .forex-summary-grid p,
.forex-page .forex-summary-grid small,
.forex-page .forex-upnext-list p,
.forex-page .forex-upnext-list small,
.forex-page .forex-alert-note,
.forex-page .forex-disclaimer,
.forex-page .forex-faq-list p {
    font-weight: 500;
}

/* Landing-only typography normalization for Firefox and Chromium. */
.landing-root .landing-pill,
.landing-root .landing-hero-subtitle,
.landing-root .landing-cta,
.landing-root .clock-preview-label,
.landing-root .clock-preview-city,
.landing-root .clock-preview-add,
.landing-root .clock-preview-date-line,
.landing-root .clock-preview-offset,
.landing-root .clock-preview-zone,
.landing-root .city-mini-name,
.landing-root .city-mini-country,
.landing-root .city-mini-time small,
.landing-root .city-mini-date,
.landing-root .city-mini-offset,
.landing-root .tool-preview-card h2,
.landing-root .tool-preview-card p,
.landing-root .tool-preview-link,
.landing-root .mini-tool-status,
.landing-root .mini-tool-status strong,
.landing-root .mini-select-row,
.landing-root .mini-quick-button,
.landing-root .mini-lap-list li,
.landing-root .mini-alarm-row > div > span small,
.landing-root .mini-alarm-row p,
.landing-root .mini-add-alarm-button,
.landing-root .mini-converter-fields span,
.landing-root .mini-converter-fields strong,
.landing-root .mini-converter-time small,
.landing-root .mini-convert-button {
    font-weight: 700;
}

.landing-root .clock-preview-time small {
    font-weight: 700;
}

.landing-root .clock-preview-time span,
.landing-root .city-mini-time span {
    font-weight: 800;
}

.landing-root .mini-timer-time,
.landing-root .mini-stopwatch-time,
.landing-root .mini-alarm-row > div > span,
.landing-root .mini-converter-time strong,
.landing-root .mini-converter-arrow {
    font-weight: 700;
}

/* Keep timer fullscreen centered after later SEO layout rules. */
.timer-page.seo-enabled .timer-hero:fullscreen,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen {
    --timer-panel-width: min(92vw, 78svh, 42rem);
    --timer-dial-size: min(34vw, 36svh, 20rem);
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    padding: clamp(0.8rem, 2svh, 1.4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-position: center;
}

.timer-page.seo-enabled .timer-hero:fullscreen .site-header,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .site-header,
.timer-page.seo-enabled .timer-hero:fullscreen .tool-seo-header,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .tool-seo-header {
    display: none;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-shell,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-shell {
    width: var(--timer-panel-width);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-console,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-console {
    width: 100%;
    max-width: var(--timer-panel-width);
    max-height: calc(100vh - clamp(1.6rem, 4svh, 2.8rem));
    margin: 0 auto;
    padding: min(2vw, 2.4svh);
    gap: min(0.9vw, 1.05svh);
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-dial,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-dial {
    width: var(--timer-dial-size);
}

/* Theme system: final layer wins over legacy hardcoded colors. */
.theme-toggle-button {
    position: relative;
}

.theme-toggle-button .theme-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.theme-toggle-button .theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-button .theme-icon-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-button .theme-icon-moon {
    display: block;
}

time,
.time-digits,
.digital-time,
.city-time,
.clock-preview-time,
.city-mini-time,
.mini-timer-time,
.mini-stopwatch-time,
.mini-alarm-row > div > span,
.mini-converter-time,
.timer-display strong,
.timer-duration-pill,
.duration-stepper output,
.stopwatch-lap-row,
.alarm-time,
.next-alarm-card,
.hero-city-time,
.converter-readout,
.timeline-marker-pill,
.forex-live-time,
.forex-session-countdown strong,
.forex-session-hours,
.forex-axis,
.forex-current-marker strong,
.forex-summary-grid strong,
.global-alarm-item span {
    font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] body {
    color: var(--text-primary);
    background: var(--bg-page-gradient);
}

:root[data-theme="dark"] .world-time-page,
:root[data-theme="dark"] .landing-root,
:root[data-theme="dark"] .timer-page,
:root[data-theme="dark"] .stopwatch-page,
:root[data-theme="dark"] .alarms-page,
:root[data-theme="dark"] .converter-page,
:root[data-theme="dark"] .converter2-page,
:root[data-theme="dark"] .forex-page {
    color: var(--text-primary);
    background: var(--bg-page-gradient);
}

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .world-time-page .site-header,
:root[data-theme="dark"] .timer-page .site-header {
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-secondary);
    background: rgba(7, 17, 31, 0.86);
    box-shadow: none;
}

:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .world-time-page .brand,
:root[data-theme="dark"] .timer-page .brand,
:root[data-theme="dark"] .nav-tab,
:root[data-theme="dark"] .world-time-page .nav-tab,
:root[data-theme="dark"] .timer-page .nav-tab {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .world-time-page .brand-mark,
:root[data-theme="dark"] .timer-page .brand-mark {
    color: var(--warning);
}

:root[data-theme="dark"] .nav-tab.active,
:root[data-theme="dark"] .world-time-page .nav-tab.active,
:root[data-theme="dark"] .timer-page .nav-tab.active,
:root[data-theme="dark"] .nav-tab:hover,
:root[data-theme="dark"] .world-time-page .nav-tab:hover {
    color: var(--accent);
}

:root[data-theme="dark"] .nav-tab.active::after,
:root[data-theme="dark"] .world-time-page .nav-tab.active::after {
    background: var(--accent);
}

:root[data-theme="dark"] .header-timezone-picker,
:root[data-theme="dark"] .world-time-page .header-timezone-picker,
:root[data-theme="dark"] .header-actions .header-tool-button,
:root[data-theme="dark"] .world-time-page .header-actions .header-tool-button,
:root[data-theme="dark"] .header-actions .header-text-button,
:root[data-theme="dark"] .world-time-page .header-actions .header-text-button,
:root[data-theme="dark"] .mobile-menu-button,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .secondary-button {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-elevated);
    box-shadow: none;
}

:root[data-theme="dark"] .header-timezone-copy span,
:root[data-theme="dark"] .header-timezone-icon,
:root[data-theme="dark"] .header-timezone-chevron,
:root[data-theme="dark"] .hero-date,
:root[data-theme="dark"] .hero-meta span,
:root[data-theme="dark"] .offset-pill,
:root[data-theme="dark"] .city-date,
:root[data-theme="dark"] .city-topline small {
    color: var(--text-muted);
}

:root[data-theme="dark"] .header-timezone-copy strong,
:root[data-theme="dark"] .location-line h1,
:root[data-theme="dark"] .section-head h2,
:root[data-theme="dark"] .city-picker h2,
:root[data-theme="dark"] .city-topline strong,
:root[data-theme="dark"] .city-time,
:root[data-theme="dark"] .tool-seo-header h1,
:root[data-theme="dark"] .seo-panel h2 {
    color: var(--text-primary);
}

@media (max-width: 720px) {
    :root[data-theme="dark"] .top-nav,
    :root[data-theme="dark"] .world-time-page .top-nav {
        border-color: color-mix(in srgb, var(--border-soft) 92%, transparent);
        background: color-mix(in srgb, var(--bg-elevated) 92%, #07111f);
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.52), 0.9rem 0 2.2rem rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    :root[data-theme="dark"] .nav-tab,
    :root[data-theme="dark"] .nav-menu-trigger,
    :root[data-theme="dark"] .world-time-page .nav-tab {
        color: var(--text-secondary);
        background: color-mix(in srgb, var(--bg-surface) 84%, #0b1628);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-soft) 78%, transparent);
    }

    :root[data-theme="dark"] .mobile-nav-pane-head {
        border-bottom-color: color-mix(in srgb, var(--border-soft) 68%, transparent);
    }

    :root[data-theme="dark"] .mobile-nav-pane-copy span {
        color: var(--text-muted);
    }

    :root[data-theme="dark"] .mobile-nav-pane-copy strong {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .mobile-nav-close {
        border-color: color-mix(in srgb, var(--border-soft) 72%, transparent);
        color: var(--text-primary);
        background: color-mix(in srgb, var(--bg-elevated) 88%, #0f1b2d);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-soft) 48%, transparent);
    }

    :root[data-theme="dark"] .mobile-nav-drawer {
        border-color: color-mix(in srgb, var(--border-soft) 92%, transparent);
        color: var(--text-primary);
        background: color-mix(in srgb, var(--bg-elevated) 92%, #07111f);
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.52), 0.9rem 0 2.2rem rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    :root[data-theme="dark"] .mobile-nav-link,
    :root[data-theme="dark"] .mobile-nav-sublink {
        color: var(--text-secondary);
        background: color-mix(in srgb, var(--bg-surface) 84%, #0b1628);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-soft) 78%, transparent);
    }

    :root[data-theme="dark"] .mobile-nav-link.active,
    :root[data-theme="dark"] .mobile-nav-sublink.active,
    :root[data-theme="dark"] .mobile-nav-link:hover,
    :root[data-theme="dark"] .mobile-nav-sublink:hover {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface));
    }

    :root[data-theme="dark"] .mobile-nav-submenu {
        border-left-color: color-mix(in srgb, var(--border-soft) 78%, transparent);
    }

    :root[data-theme="dark"] .nav-tab.active,
    :root[data-theme="dark"] .world-time-page .nav-tab.active,
    :root[data-theme="dark"] .nav-menu-trigger.active {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface));
    }

    :root[data-theme="dark"] .nav-menu-panel,
    :root[data-theme="dark"] .world-time-page .nav-menu-panel {
        border-left-color: color-mix(in srgb, var(--border-soft) 78%, transparent);
        background: transparent;
        box-shadow: none;
    }

    :root[data-theme="dark"] .nav-menu-link,
    :root[data-theme="dark"] .world-time-page .nav-menu-link {
        color: var(--text-secondary);
        background: color-mix(in srgb, var(--bg-elevated) 88%, #0f1b2d);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-soft) 72%, transparent);
    }

    :root[data-theme="dark"] .nav-menu-link.active,
    :root[data-theme="dark"] .nav-menu-link:hover,
    :root[data-theme="dark"] .nav-menu-link:focus-visible {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
    }
}

:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .world-clock-hero,
:root[data-theme="dark"] .timer-hero {
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, 0.76) 0%, rgba(13, 27, 48, 0.62) 44%, rgba(22, 51, 90, 0.56) 100%),
        linear-gradient(180deg, rgba(7, 17, 31, 0.38), rgba(7, 17, 31, 0.7)),
        url("/images/hero-misty-lake.png");
}

:root[data-theme="dark"] .zones-section,
:root[data-theme="dark"] .seo-content,
:root[data-theme="dark"] .timer-page.seo-enabled {
    background: var(--bg-page-gradient);
}

:root[data-theme="dark"] .city-card,
:root[data-theme="dark"] .city-picker,
:root[data-theme="dark"] .seo-panel,
:root[data-theme="dark"] .tool-preview-card,
:root[data-theme="dark"] .clock-preview-card,
:root[data-theme="dark"] .city-mini-card,
:root[data-theme="dark"] .mini-panel,
:root[data-theme="dark"] .timer-console,
:root[data-theme="dark"] .duration-stepper,
:root[data-theme="dark"] .timer-audio-card,
:root[data-theme="dark"] .repeat-control,
:root[data-theme="dark"] .stopwatch-laps,
:root[data-theme="dark"] .alarm-editor-panel,
:root[data-theme="dark"] .alarm-card,
:root[data-theme="dark"] .next-alarm-card,
:root[data-theme="dark"] .converter-hero-panel,
:root[data-theme="dark"] .converter-card,
:root[data-theme="dark"] .time-scale-card,
:root[data-theme="dark"] .converter-info-strip,
:root[data-theme="dark"] .converter-readout,
:root[data-theme="dark"] .converter-relation-card,
:root[data-theme="dark"] .converter2-selector-card,
:root[data-theme="dark"] .converter2-visual-card,
:root[data-theme="dark"] .converter2-info-strip,
:root[data-theme="dark"] .converter2-result-card,
:root[data-theme="dark"] .converter2-quick-card,
:root[data-theme="dark"] .forex-local-time-card,
:root[data-theme="dark"] .forex-control-stack > *,
:root[data-theme="dark"] .forex-market-card,
:root[data-theme="dark"] .forex-timeline-card,
:root[data-theme="dark"] .forex-summary-card,
:root[data-theme="dark"] .forex-sidebar-card,
:root[data-theme="dark"] .forex-faq-card,
:root[data-theme="dark"] .forex-summary-grid section,
:root[data-theme="dark"] .forex-faq-list details {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
}

:root[data-theme="dark"] .tool-seo-header p:not(.eyebrow),
:root[data-theme="dark"] .seo-panel p,
:root[data-theme="dark"] .landing-hero-subtitle,
:root[data-theme="dark"] .tool-preview-card p,
:root[data-theme="dark"] .clock-preview-zone,
:root[data-theme="dark"] .city-mini-country,
:root[data-theme="dark"] .city-mini-date,
:root[data-theme="dark"] .timer-status,
:root[data-theme="dark"] .duration-stepper span,
:root[data-theme="dark"] .stopwatch-laps p,
:root[data-theme="dark"] .alarm-note,
:root[data-theme="dark"] .alarm-repeat,
:root[data-theme="dark"] .converter-title p,
:root[data-theme="dark"] .converter-field > span:first-child,
:root[data-theme="dark"] .converter-readout span,
:root[data-theme="dark"] .converter-info-strip p,
:root[data-theme="dark"] .converter2-title p,
:root[data-theme="dark"] .converter2-result-block span,
:root[data-theme="dark"] .converter2-result-block small,
:root[data-theme="dark"] .forex-title-block p,
:root[data-theme="dark"] .forex-session-head p,
:root[data-theme="dark"] .forex-session-countdown span,
:root[data-theme="dark"] .forex-session-hours,
:root[data-theme="dark"] .forex-session-hours small,
:root[data-theme="dark"] .forex-card-header span,
:root[data-theme="dark"] .forex-sidebar-card > p,
:root[data-theme="dark"] .forex-timeline-legend,
:root[data-theme="dark"] .forex-axis,
:root[data-theme="dark"] .forex-overlap-list,
:root[data-theme="dark"] .forex-summary-label h3,
:root[data-theme="dark"] .forex-summary-grid p,
:root[data-theme="dark"] .forex-summary-grid small,
:root[data-theme="dark"] .forex-upnext-list p,
:root[data-theme="dark"] .forex-upnext-list small,
:root[data-theme="dark"] .forex-alert-note,
:root[data-theme="dark"] .forex-disclaimer,
:root[data-theme="dark"] .forex-faq-list p {
    color: var(--text-muted);
}

:root[data-theme="dark"] .landing-root .tool-preview-card p,
:root[data-theme="dark"] .landing-root .mini-tool-status,
:root[data-theme="dark"] .landing-root .mini-tool-status strong,
:root[data-theme="dark"] .landing-root .mini-select-row,
:root[data-theme="dark"] .landing-root .mini-lap-list li,
:root[data-theme="dark"] .landing-root .mini-alarm-row p,
:root[data-theme="dark"] .landing-root .mini-converter-fields span,
:root[data-theme="dark"] .landing-root .mini-converter-time small,
:root[data-theme="dark"] .landing-root .clock-preview-label,
:root[data-theme="dark"] .landing-root .clock-preview-label span,
:root[data-theme="dark"] .landing-root .clock-preview-date-line,
:root[data-theme="dark"] .landing-root .clock-preview-zone,
:root[data-theme="dark"] .landing-root .city-mini-country,
:root[data-theme="dark"] .landing-root .city-mini-date,
:root[data-theme="dark"] .landing-root .city-mini-time small {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .landing-root .clock-preview-city,
:root[data-theme="dark"] .landing-root .clock-preview-time span,
:root[data-theme="dark"] .landing-root .city-mini-name,
:root[data-theme="dark"] .landing-root .city-mini-time span {
    color: var(--text-primary);
}

:root[data-theme="dark"] .landing-root .clock-preview-time small,
:root[data-theme="dark"] .landing-root .city-mini-offset,
:root[data-theme="dark"] .landing-root .mini-converter-arrow,
:root[data-theme="dark"] .landing-root .mini-add-alarm-button {
    color: var(--accent);
}

:root[data-theme="dark"] .landing-root .tool-preview-card,
:root[data-theme="dark"] .landing-root .clock-preview-card,
:root[data-theme="dark"] .landing-root .city-mini-card,
:root[data-theme="dark"] .landing-root .mini-panel {
    border-color: var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .landing-root .mini-add-alarm-button,
:root[data-theme="dark"] .landing-root .mini-converter-fields {
    border-color: var(--border-soft);
    background: var(--bg-elevated);
}

:root[data-theme="dark"] .landing-root .mini-add-alarm-button:hover,
:root[data-theme="dark"] .landing-root .mini-add-alarm-button.is-confirmed {
    border-color: var(--accent);
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .landing-root .mini-converter-fields div {
    color: var(--text-primary);
}

:root[data-theme="dark"] .location-line,
:root[data-theme="dark"] .tool-seo-header,
:root[data-theme="dark"] .converter-title {
    color: var(--text-primary);
}

:root[data-theme="dark"] .landing-root .mini-reset-button {
    border-color: var(--border-soft);
    color: var(--text-secondary);
    background: var(--bg-elevated);
    box-shadow: none;
}

:root[data-theme="dark"] .landing-root .mini-reset-button:hover {
    border-color: var(--border-strong);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .landing-root .mini-lap-list li span,
:root[data-theme="dark"] .landing-root .mini-converter-result,
:root[data-theme="dark"] .landing-root .mini-converter-time,
:root[data-theme="dark"] .landing-root .mini-converter-time strong {
    color: var(--text-primary);
}

:root[data-theme="dark"] .landing-root .mini-converter-fields div + div {
    border-top-color: var(--border-soft);
}

:root[data-theme="dark"] .landing-root .mini-converter-fields strong {
    color: var(--text-primary);
}

:root[data-theme="dark"] .landing-root .mini-lap-list {
    border-top-color: var(--border-soft);
}

:root[data-theme="dark"] .landing-main,
:root[data-theme="dark"] .alarms-shell,
:root[data-theme="dark"] .converter-shell,
:root[data-theme="dark"] .converter2-shell,
:root[data-theme="dark"] .forex-body {
    background: var(--bg-page-gradient);
}

:root[data-theme="dark"] .landing-main::before {
    background:
        linear-gradient(180deg, rgba(7, 17, 31, 0) 0%, rgba(7, 17, 31, 0.24) 62%, rgba(7, 17, 31, 0.62) 100%);
}

:root[data-theme="dark"] .landing-root .landing-hero-subtitle {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .landing-hero-title,
:root[data-theme="dark"] .clock-preview-city,
:root[data-theme="dark"] .clock-preview-time,
:root[data-theme="dark"] .city-mini-name,
:root[data-theme="dark"] .tool-preview-card h2,
:root[data-theme="dark"] .mini-timer-time,
:root[data-theme="dark"] .mini-stopwatch-time,
:root[data-theme="dark"] .mini-alarm-row > div > span,
:root[data-theme="dark"] .mini-converter-time strong,
:root[data-theme="dark"] .timer-display strong,
:root[data-theme="dark"] .duration-stepper output,
:root[data-theme="dark"] .alarm-time,
:root[data-theme="dark"] .alarm-time strong,
:root[data-theme="dark"] .converter-title h1,
:root[data-theme="dark"] .hero-city-time strong,
:root[data-theme="dark"] .converter-readout strong,
:root[data-theme="dark"] .converter2-title h1,
:root[data-theme="dark"] .converter2-result-block strong,
:root[data-theme="dark"] .forex-title-block h1,
:root[data-theme="dark"] .forex-live-time span,
:root[data-theme="dark"] .forex-session-head h2,
:root[data-theme="dark"] .forex-session-countdown strong,
:root[data-theme="dark"] .forex-card-header h2,
:root[data-theme="dark"] .forex-sidebar-card h2,
:root[data-theme="dark"] .forex-summary-grid strong,
:root[data-theme="dark"] .forex-upnext-list strong,
:root[data-theme="dark"] .forex-alert-list span,
:root[data-theme="dark"] .forex-faq-list summary {
    color: var(--text-primary);
}

:root[data-theme="dark"] .landing-pill,
:root[data-theme="dark"] .hero-meta span,
:root[data-theme="dark"] .offset-pill,
:root[data-theme="dark"] .timer-duration-pill,
:root[data-theme="dark"] .forex-info-pill,
:root[data-theme="dark"] .forex-session-badge,
:root[data-theme="dark"] .seo-link-grid a,
:root[data-theme="dark"] .seo-link-row a {
    border-color: var(--border-soft);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .landing-cta-primary,
:root[data-theme="dark"] .mini-play-button,
:root[data-theme="dark"] .mini-convert-button,
:root[data-theme="dark"] .timer-action.primary,
:root[data-theme="dark"] .alarm-editor-save,
:root[data-theme="dark"] .converter-swap,
:root[data-theme="dark"] .converter2-swap-top,
:root[data-theme="dark"] .converter2-add-quick,
:root[data-theme="dark"] .forex-alert-manager-button,
:root[data-theme="dark"] .forex-sidebar-link {
    border-color: transparent;
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .landing-cta-primary:hover,
:root[data-theme="dark"] .mini-play-button:hover,
:root[data-theme="dark"] .mini-convert-button:hover,
:root[data-theme="dark"] .timer-action.primary:hover:not(:disabled),
:root[data-theme="dark"] .alarm-editor-save:hover,
:root[data-theme="dark"] .forex-sidebar-link:hover {
    color: var(--accent-contrast);
    background: var(--accent-hover);
}

:root[data-theme="dark"] .landing-cta-secondary,
:root[data-theme="dark"] .timer-presets button,
:root[data-theme="dark"] .timer-action,
:root[data-theme="dark"] .duration-stepper button,
:root[data-theme="dark"] .sound-preview-button,
:root[data-theme="dark"] .alarm-carousel-button,
:root[data-theme="dark"] .alarm-filter,
:root[data-theme="dark"] .alarm-quick-add button,
:root[data-theme="dark"] .alarm-list-quick-add button,
:root[data-theme="dark"] .alarm-editor-cancel,
:root[data-theme="dark"] .alarm-time-adjust,
:root[data-theme="dark"] .alarm-editor-close,
:root[data-theme="dark"] .alarm-editor-active,
:root[data-theme="dark"] .alarm-day-chip,
:root[data-theme="dark"] .alarm-edit-button,
:root[data-theme="dark"] .alarm-delete-button,
:root[data-theme="dark"] .converter-select-wrap,
:root[data-theme="dark"] .converter-field-control,
:root[data-theme="dark"] .converter2-select-shell,
:root[data-theme="dark"] .converter2-quick-row,
:root[data-theme="dark"] .forex-segmented button,
:root[data-theme="dark"] .forex-alert-list button,
:root[data-theme="dark"] .forex-alert-modal-options button {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-surface-muted);
    box-shadow: none;
}

:root[data-theme="dark"] .timer-presets button.selected,
:root[data-theme="dark"] .alarm-filter.active,
:root[data-theme="dark"] .forex-segmented button.active,
:root[data-theme="dark"] .converter2-picker-option.is-selected,
:root[data-theme="dark"] .converter2-picker-option:hover {
    color: var(--accent);
    border-color: var(--border-strong);
    background: var(--accent-soft);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .clock-preview-search input,
:root[data-theme="dark"] .converter-field-control input,
:root[data-theme="dark"] .converter-field-control select,
:root[data-theme="dark"] .converter-inputs input,
:root[data-theme="dark"] .converter-inputs select,
:root[data-theme="dark"] .alarm-editor-form input[type="text"],
:root[data-theme="dark"] .alarm-editor-form input[type="time"],
:root[data-theme="dark"] .alarm-editor-form select,
:root[data-theme="dark"] .converter2-picker-search,
:root[data-theme="dark"] .converter2-input-row input,
:root[data-theme="dark"] .converter2-result-tools input {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-surface-strong);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] .clock-preview-search input::placeholder {
    color: var(--text-muted);
}

:root[data-theme="dark"] .alarm-switch span,
:root[data-theme="dark"] .mini-toggle,
:root[data-theme="dark"] .repeat-control input,
:root[data-theme="dark"] .forex-progress-track,
:root[data-theme="dark"] .timeline-track,
:root[data-theme="dark"] .forex-track-row {
    border-color: var(--border-soft);
    background-color: var(--bg-surface-muted);
}

:root[data-theme="dark"] .alarm-switch input:checked + span,
:root[data-theme="dark"] .mini-toggle.is-on,
:root[data-theme="dark"] .repeat-control input:checked,
:root[data-theme="dark"] .forex-progress-track span {
    background: var(--accent);
}

:root[data-theme="dark"] .forex-market-card.is-open .forex-session-badge,
:root[data-theme="dark"] .forex-info-pill:not(.is-closed) {
    color: var(--success);
    background: var(--success-soft);
    border-color: rgba(52, 211, 153, 0.26);
}

:root[data-theme="dark"] .alarm-ringing-banner,
:root[data-theme="dark"] .global-alarm-layer {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .alarm-ringing-icon {
    color: var(--warning);
    background: var(--warning-soft);
}

:root[data-theme="dark"] .alarm-ringing-banner span,
:root[data-theme="dark"] .global-alarm-header span {
    color: var(--warning);
}

:root[data-theme="dark"] .alarm-ringing-banner strong,
:root[data-theme="dark"] .alarm-ringing-note,
:root[data-theme="dark"] .global-alarm-item strong {
    color: var(--text-primary);
}

:root[data-theme="dark"] .global-alarm-item {
    border: 1px solid var(--border-soft);
    background: var(--bg-elevated);
}

:root[data-theme="dark"] .global-alarm-item span {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .alarm-ringing-banner button,
:root[data-theme="dark"] .global-alarm-layer button {
    border-color: rgba(248, 113, 113, 0.34);
    color: var(--text-inverse);
    background: var(--danger);
    box-shadow: none;
}

:root[data-theme="dark"] .global-alarm-header button {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-elevated);
}

:root[data-theme="dark"] .alarm-delete-button:hover,
:root[data-theme="dark"] .city-remove:hover:not(:disabled) {
    color: var(--text-inverse);
    background: var(--danger);
}

:root[data-theme="dark"] .modal-layer,
:root[data-theme="dark"] .forex-alert-modal-layer {
    background: rgba(3, 7, 18, 0.68);
}

:root[data-theme="dark"] .forex-alert-modal,
:root[data-theme="dark"] .zone-menu,
:root[data-theme="dark"] .converter2-picker-menu {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.96);
    box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .converter-page .zone-menu {
    color-scheme: dark;
    border-color: color-mix(in srgb, var(--border-strong) 88%, transparent);
    background: color-mix(in srgb, var(--bg-surface-strong) 96%, #07111f);
    box-shadow: 0 1.35rem 3.25rem rgba(0, 0, 0, 0.42);
    scrollbar-color: var(--border-strong) transparent;
}

:root[data-theme="dark"] .converter-page .zone-search {
    border-color: var(--border-soft);
    background: var(--bg-elevated);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

:root[data-theme="dark"] .converter-page .zone-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

:root[data-theme="dark"] .converter-page .zone-search svg {
    stroke: var(--text-muted);
}

:root[data-theme="dark"] .converter-page .zone-search input {
    border: 0;
    color: var(--text-primary);
    background: transparent;
    box-shadow: none;
}

:root[data-theme="dark"] .converter-page .zone-search input::placeholder {
    color: var(--text-muted);
}

:root[data-theme="dark"] .converter-page .zone-menu-section > span {
    color: var(--text-muted);
}

:root[data-theme="dark"] .converter-page .zone-option {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-surface-muted);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

:root[data-theme="dark"] .converter-page .zone-option strong {
    color: var(--text-primary);
}

:root[data-theme="dark"] .converter-page .zone-option small,
:root[data-theme="dark"] .converter-page .zone-empty {
    color: var(--text-muted);
}

:root[data-theme="dark"] .converter-page .zone-option:hover,
:root[data-theme="dark"] .converter-page .zone-option:focus-visible {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 11%, var(--bg-surface-muted));
    outline: none;
}

:root[data-theme="dark"] .converter-page .zone-option.selected {
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 19%, var(--bg-surface-strong));
    box-shadow: inset 3px 0 0 var(--accent);
}

:root[data-theme="dark"] .converter-page .zone-option.selected strong {
    color: var(--accent-hover);
}

:root[data-theme="dark"] .forex-alert-modal-head {
    border-bottom-color: var(--border-soft);
}

:root[data-theme="dark"] .forex-alert-modal-head h2,
:root[data-theme="dark"] .forex-alert-modal-body h3,
:root[data-theme="dark"] .forex-alert-modal-list strong,
:root[data-theme="dark"] .forex-alert-modal-options span {
    color: var(--text-primary);
}

:root[data-theme="dark"] .forex-alert-modal-body h3,
:root[data-theme="dark"] .forex-alert-modal-list span,
:root[data-theme="dark"] .forex-alert-modal-options small {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .forex-alert-empty,
:root[data-theme="dark"] .forex-alert-modal-list li {
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    background: var(--bg-elevated);
}

:root[data-theme="dark"] .forex-alert-modal-list button {
    border-color: rgba(248, 113, 113, 0.32);
    color: var(--danger);
    background: var(--danger-soft);
}

:root[data-theme="dark"] .forex-alert-modal-close {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-elevated);
}

:root[data-theme="dark"] .forex-axis-row > span,
:root[data-theme="dark"] .forex-row-labels {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.96) 78%, rgba(15, 23, 42, 0));
}

:root[data-theme="dark"] .forex-current-marker,
:root[data-theme="dark"] .forex-current-marker strong,
:root[data-theme="dark"] .legend-current {
    border-color: var(--accent);
    background: var(--accent);
}

:root[data-theme="dark"] .forex-current-marker::after {
    border-color: var(--bg-page-soft);
    background: var(--accent);
}

:root[data-theme="dark"] .forex-session-bar {
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .timeline-marker-pill,
:root[data-theme="dark"] .forex-toast {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

/* Dark mode re-vet repairs: page-specific contrast fixes over legacy hardcoded colors. */
:root[data-theme="dark"] .digital-time,
:root[data-theme="dark"] .time-digits,
:root[data-theme="dark"] .time-meridiem,
:root[data-theme="dark"] .landing-root .city-mini-time,
:root[data-theme="dark"] .landing-root .city-mini-time span,
:root[data-theme="dark"] .landing-root .clock-preview-time,
:root[data-theme="dark"] .landing-root .clock-preview-time span,
:root[data-theme="dark"] .city-time,
:root[data-theme="dark"] .city-time span,
:root[data-theme="dark"] .city-time small,
:root[data-theme="dark"] .city-topline strong,
:root[data-theme="dark"] .city-topline small {
    color: var(--text-primary);
}

:root[data-theme="dark"] .landing-root .city-mini-time small,
:root[data-theme="dark"] .landing-root .clock-preview-time small,
:root[data-theme="dark"] .hero-date,
:root[data-theme="dark"] .clock-seo-label {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .landing-root .city-mini-offset,
:root[data-theme="dark"] .landing-root .clock-preview-offset {
    border-color: var(--border-soft);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .landing-root .mini-quick-button,
:root[data-theme="dark"] .landing-root .clock-preview-add {
    border-color: transparent;
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .landing-root .mini-quick-button:hover,
:root[data-theme="dark"] .landing-root .clock-preview-add:hover {
    color: var(--accent-contrast);
    background: var(--accent-hover);
}

:root[data-theme="dark"] .seo-faq summary,
:root[data-theme="dark"] .seo-panel summary,
:root[data-theme="dark"] details summary {
    color: var(--text-primary);
}

:root[data-theme="dark"] .seo-faq details {
    border-color: var(--border-soft);
}

:root[data-theme="dark"] .alarm-list-quick-add > span,
:root[data-theme="dark"] .alarm-quick-add > span,
:root[data-theme="dark"] .alarm-empty-state,
:root[data-theme="dark"] .alarm-pin-tip strong,
:root[data-theme="dark"] .next-alarm-card strong,
:root[data-theme="dark"] .next-alarm-card span {
    color: var(--text-primary);
}

:root[data-theme="dark"] .alarm-pin-tip {
    border-color: rgba(96, 165, 250, 0.28);
    color: var(--text-secondary);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .alarm-pin-tip button {
    border-color: var(--border-soft);
    color: var(--accent-hover);
    background: var(--bg-elevated);
}

:root[data-theme="dark"] .alarm-pin-tip button:hover {
    border-color: var(--border-strong);
    color: var(--accent);
    background: var(--bg-surface-muted);
}

:root[data-theme="dark"] .alarm-empty-state {
    border-color: var(--border-soft);
    color: var(--text-secondary);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .alarm-time span,
:root[data-theme="dark"] .alarm-note,
:root[data-theme="dark"] .alarm-repeat {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .converter-zone > span:first-child,
:root[data-theme="dark"] .zone-main strong,
:root[data-theme="dark"] .zone-offset,
:root[data-theme="dark"] .hero-city-time,
:root[data-theme="dark"] .hero-city-time span,
:root[data-theme="dark"] .hero-city-time strong,
:root[data-theme="dark"] .converter-readout,
:root[data-theme="dark"] .converter-readout strong,
:root[data-theme="dark"] .timeline-label,
:root[data-theme="dark"] .timeline-row-header,
:root[data-theme="dark"] .timeline-city,
:root[data-theme="dark"] .timeline-city strong,
:root[data-theme="dark"] .timeline-row-header time,
:root[data-theme="dark"] .timeline-marker-pill,
:root[data-theme="dark"] .timeline-scale-footer span {
    color: var(--text-primary);
}

:root[data-theme="dark"] .timeline-row-header time {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 27, 46, 0.94);
    box-shadow:
        0 0.45rem 0.95rem rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .timeline-row-header time::before {
    opacity: 0.86;
}

:root[data-theme="dark"] .timeline-city::before {
    background: var(--accent);
    box-shadow:
        0 0 0 0.18rem color-mix(in srgb, var(--accent) 12%, transparent),
        0 0.42rem 0.8rem color-mix(in srgb, var(--accent) 28%, transparent);
}

:root[data-theme="dark"] .zone-main small,
:root[data-theme="dark"] .hero-city-time small,
:root[data-theme="dark"] .hero-difference,
:root[data-theme="dark"] .hero-difference small,
:root[data-theme="dark"] .timeline-label small,
:root[data-theme="dark"] .timeline-city small {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .timeline-track {
    --timeline-night: #0a2344;
    --timeline-dawn: #55769f;
    --timeline-day: #8faecc;
    --timeline-moon-cutout: color-mix(in srgb, var(--timeline-night) 92%, #0d1d37);
    --timeline-moon-edge: rgba(148, 183, 226, 0.22);
    --timeline-dawn-halo: rgba(255, 212, 166, 0.32);
    --timeline-dawn-halo-soft: rgba(255, 214, 164, 0.1);
    --timeline-day-glow: rgba(198, 223, 255, 0.2);
    --timeline-star-bright: rgba(255, 255, 255, 0.9);
    --timeline-star-soft: rgba(197, 223, 255, 0.58);
    --timeline-star-warm: rgba(255, 228, 186, 0.5);
    --timeline-star-haze: rgba(140, 190, 255, 0.2);
    --timeline-top-sheen: rgba(255, 255, 255, 0.09);
    --timeline-bottom-shade: rgba(0, 0, 0, 0.18);
    --timeline-side-vignette: rgba(3, 8, 20, 0.26);
    --timeline-inner-line: rgba(158, 191, 231, 0.1);
    border-color: rgba(111, 143, 186, 0.22);
    background-color: rgba(7, 19, 37, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(136, 171, 220, 0.07),
        0 1rem 2.25rem rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .time-scale-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 35%),
        radial-gradient(ellipse at 50% 18%, rgba(47, 111, 214, 0.15), transparent 38%),
        radial-gradient(ellipse at 50% 86%, rgba(56, 125, 199, 0.08), transparent 46%),
        linear-gradient(180deg, rgba(7, 18, 36, 0.96), rgba(7, 16, 31, 0.94));
    box-shadow:
        0 1.65rem 3.6rem rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .timeline-minor-ticks span {
    background: rgba(148, 163, 184, 0.34);
}

:root[data-theme="dark"] .timeline-minor-ticks span.major {
    background: rgba(148, 163, 184, 0.54);
}

:root[data-theme="dark"] .timeline-marker::before {
    background: linear-gradient(180deg, transparent, var(--accent) 7%, var(--accent) 93%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
        0 0.85rem 2.1rem color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-theme="dark"] .timeline-marker-pill {
    color: #fff;
    background: linear-gradient(180deg, #2f8cff, #1268df);
    box-shadow:
        0 0.72rem 1.45rem rgba(23, 110, 234, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 0 0 1px rgba(190, 220, 255, 0.18);
}

:root[data-theme="dark"] .timeline-marker-handle {
    border-color: rgba(96, 165, 250, 0.48);
    color: var(--accent);
    background:
        radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.18), transparent 48%),
        var(--bg-surface-strong);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12),
        0 0.55rem 1.35rem rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .timeline-marker-handle::before {
    background: var(--accent);
    box-shadow:
        inset 0 0 0 2px var(--bg-surface-strong),
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-theme="dark"] .forex-card-kicker,
:root[data-theme="dark"] .forex-card-kicker span,
:root[data-theme="dark"] .forex-live-time,
:root[data-theme="dark"] .forex-live-time span,
:root[data-theme="dark"] .forex-local-time-card time,
:root[data-theme="dark"] .forex-local-time-card p,
:root[data-theme="dark"] .forex-overlap-list strong,
:root[data-theme="dark"] .forex-summary-grid strong {
    color: var(--text-primary);
}

:root[data-theme="dark"] .forex-live-time small,
:root[data-theme="dark"] .forex-local-time-card p span {
    border-color: var(--border-soft);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .forex-overlap-list small,
:root[data-theme="dark"] .forex-summary-grid p,
:root[data-theme="dark"] .forex-summary-grid small {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .forex-local-time-card {
    background: var(--bg-surface-strong);
}

:root[data-theme="dark"] .timer-dial .timer-display,
:root[data-theme="dark"] .timer-dial .timer-display strong {
    color: var(--text-inverse);
}

:root[data-theme="dark"] .timer-dial .timer-status,
:root[data-theme="dark"] .timer-dial .timer-duration-pill {
    color: var(--accent);
}

:root[data-theme="dark"] .stopwatch-lap-row {
    color: var(--text-primary);
}

:root[data-theme="dark"] .stopwatch-laps-head,
:root[data-theme="dark"] .stopwatch-laps p {
    color: var(--text-secondary);
}

/* Focused dark polish: solid midnight surfaces over legacy glass styles. */
:root[data-theme="dark"] .landing-main,
:root[data-theme="dark"] .zones-section,
:root[data-theme="dark"] .seo-content,
:root[data-theme="dark"] .alarms-shell,
:root[data-theme="dark"] .converter-shell,
:root[data-theme="dark"] .converter2-shell,
:root[data-theme="dark"] .forex-body {
    background: var(--bg-page-gradient);
}

:root[data-theme="dark"] .city-card,
:root[data-theme="dark"] .city-picker,
:root[data-theme="dark"] .seo-panel,
:root[data-theme="dark"] .tool-preview-card,
:root[data-theme="dark"] .city-mini-card,
:root[data-theme="dark"] .mini-panel,
:root[data-theme="dark"] .timer-console,
:root[data-theme="dark"] .duration-stepper,
:root[data-theme="dark"] .timer-audio-card,
:root[data-theme="dark"] .repeat-control,
:root[data-theme="dark"] .stopwatch-laps,
:root[data-theme="dark"] .alarm-editor-panel,
:root[data-theme="dark"] .alarm-card,
:root[data-theme="dark"] .alarm-list-quick-add,
:root[data-theme="dark"] .next-alarm-card,
:root[data-theme="dark"] .converter-card,
:root[data-theme="dark"] .time-scale-card,
:root[data-theme="dark"] .converter-info-strip,
:root[data-theme="dark"] .converter-readout,
:root[data-theme="dark"] .converter-relation-card,
:root[data-theme="dark"] .forex-control-stack > *,
:root[data-theme="dark"] .forex-market-card,
:root[data-theme="dark"] .forex-timeline-card,
:root[data-theme="dark"] .forex-summary-card,
:root[data-theme="dark"] .forex-sidebar-card,
:root[data-theme="dark"] .forex-faq-card,
:root[data-theme="dark"] .forex-summary-grid section,
:root[data-theme="dark"] .forex-faq-list details {
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
}

:root[data-theme="dark"] .forex-alert-manager-button {
    border-color: rgba(96, 165, 250, 0.38);
    color: var(--accent-hover);
    background: var(--accent-soft);
    box-shadow: none;
}

:root[data-theme="dark"] .forex-alert-manager-button:hover {
    border-color: transparent;
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .forex-alert-manager-button strong {
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .clock-preview-card,
:root[data-theme="dark"] .converter-hero-panel,
:root[data-theme="dark"] .forex-local-time-card {
    border: 1px solid var(--border-soft);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .timer-dial,
:root[data-theme="dark"] .stopwatch-dial {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .stopwatch-page {
    --timer-dial-size: clamp(16rem, min(30vw, 35svh), 23rem);
}

:root[data-theme="dark"] .stopwatch-page .stopwatch-dial {
    width: min(var(--timer-dial-size), 100%);
    margin-top: 0;
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-ring {
    background:
        conic-gradient(from -1deg, var(--accent) var(--timer-progress), rgba(96, 165, 250, 0.18) 0deg),
        radial-gradient(circle at 50% 44%, rgba(96, 165, 250, 0.18), rgba(15, 23, 42, 0.84) 64%, rgba(7, 17, 31, 0.96) 100%);
    box-shadow:
        0 0 0 min(0.72vw, 1.12svh) rgba(148, 163, 184, 0.16),
        0 0 0 min(1.58vw, 2.52svh) rgba(15, 23, 42, 0.72),
        0 18px 48px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px var(--border-soft);
}

:root[data-theme="dark"] .stopwatch-page .timer-ring {
    background:
        conic-gradient(from -1deg, var(--accent) var(--timer-progress), rgba(96, 165, 250, 0.18) 0deg),
        radial-gradient(circle at 50% 44%, rgba(96, 165, 250, 0.16), rgba(15, 23, 42, 0.84) 64%, rgba(7, 17, 31, 0.96) 100%);
    box-shadow:
        0 0 0 min(0.72vw, 1.12svh) rgba(148, 163, 184, 0.16),
        0 0 0 min(1.58vw, 2.52svh) rgba(15, 23, 42, 0.72),
        0 18px 48px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px var(--border-soft);
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-ring::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(23, 38, 61, 0.98), rgba(13, 24, 41, 0.98) 66%, rgba(7, 17, 31, 0.98));
    box-shadow:
        inset 0 0 0 min(1vw, 1.9svh) rgba(96, 165, 250, 0.10),
        inset 0 -18px 36px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .stopwatch-page .timer-ring::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(23, 38, 61, 0.98), rgba(13, 24, 41, 0.98) 66%, rgba(7, 17, 31, 0.98));
    box-shadow:
        inset 0 0 0 min(1vw, 1.9svh) rgba(96, 165, 250, 0.10),
        inset 0 -18px 36px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-ring::after {
    border-color: var(--border-soft);
    box-shadow: inset 0 0 32px rgba(96, 165, 250, 0.08);
}

:root[data-theme="dark"] .stopwatch-page .timer-ring::after {
    border-color: var(--border-soft);
    box-shadow: inset 0 0 32px rgba(96, 165, 250, 0.08);
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-ring-handle {
    background:
        radial-gradient(circle, var(--accent) 0 22%, var(--bg-surface-strong) 25% 61%, var(--accent-hover) 65% 100%);
    box-shadow:
        0 0 0 min(0.26vw, 0.42svh) rgba(15, 23, 42, 0.92),
        0 0 20px rgba(96, 165, 250, 0.34);
}

:root[data-theme="dark"] .stopwatch-page .timer-ring-handle {
    background:
        radial-gradient(circle, var(--accent) 0 22%, var(--bg-surface-strong) 25% 61%, var(--accent-hover) 65% 100%);
    box-shadow:
        0 0 0 min(0.26vw, 0.42svh) rgba(15, 23, 42, 0.92),
        0 0 20px rgba(96, 165, 250, 0.34);
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-axis {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.38));
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-axis span {
    border: 1px solid var(--border-soft);
    color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-dial .timer-display,
:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-dial .timer-display strong {
    color: var(--text-primary);
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .stopwatch-page .timer-dial .timer-display,
:root[data-theme="dark"] .stopwatch-page .timer-dial .timer-display strong {
    color: var(--text-primary);
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-dial .timer-status {
    color: var(--accent-hover);
}

:root[data-theme="dark"] .stopwatch-page .timer-dial .timer-status {
    color: var(--accent-hover);
}

:root[data-theme="dark"] .timer-page:not(.stopwatch-page) .timer-dial .timer-duration-pill {
    border: 1px solid var(--border-soft);
    color: var(--accent-hover);
    background: var(--accent-soft);
    box-shadow: none;
}

:root[data-theme="dark"] .stopwatch-page .timer-dial .timer-duration-pill {
    border: 1px solid var(--border-soft);
    color: var(--accent-hover);
    background: var(--accent-soft);
    box-shadow: none;
}

:root[data-theme="dark"] .timer-presets button,
:root[data-theme="dark"] .timer-action,
:root[data-theme="dark"] .duration-stepper button,
:root[data-theme="dark"] .sound-preview-button,
:root[data-theme="dark"] .alarm-filter,
:root[data-theme="dark"] .alarm-quick-add button,
:root[data-theme="dark"] .alarm-list-quick-add button,
:root[data-theme="dark"] .alarm-editor-cancel,
:root[data-theme="dark"] .converter-select-wrap,
:root[data-theme="dark"] .converter-field-control,
:root[data-theme="dark"] .converter2-select-shell,
:root[data-theme="dark"] .converter2-quick-row,
:root[data-theme="dark"] .forex-segmented button,
:root[data-theme="dark"] .forex-alert-list button,
:root[data-theme="dark"] .forex-alert-modal-options button {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-elevated);
    box-shadow: none;
}

:root[data-theme="dark"] .alarm-carousel-button {
    color: var(--accent);
}

:root[data-theme="dark"] .alarm-carousel-button:hover:not(:disabled) {
    border-color: rgba(96, 165, 250, 0.38);
    color: var(--accent-hover);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .alarm-carousel-button:disabled {
    color: var(--text-muted);
    background: var(--bg-surface-muted);
    opacity: 0.55;
}

:root[data-theme="dark"] .alarm-add-button {
    border-color: var(--border-soft);
    color: var(--accent-hover);
    background: var(--bg-elevated);
    box-shadow: none;
}

:root[data-theme="dark"] .alarm-add-button:hover {
    border-color: rgba(96, 165, 250, 0.38);
    color: var(--accent-contrast);
    background: var(--accent);
}

:root[data-theme="dark"] .alarm-editor-head h2,
:root[data-theme="dark"] .alarm-editor-active,
:root[data-theme="dark"] .alarm-day-chip span {
    color: var(--text-primary);
}

:root[data-theme="dark"] .alarm-editor-head span,
:root[data-theme="dark"] .alarm-time-adjust,
:root[data-theme="dark"] .alarm-editor-close:hover {
    color: var(--accent);
}

:root[data-theme="dark"] .alarm-editor-form > label > span:first-child,
:root[data-theme="dark"] .alarm-repeat-field legend,
:root[data-theme="dark"] .alarm-quick-add > span,
:root[data-theme="dark"] .alarm-list-quick-add > span {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .alarm-editor-close {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .alarm-edit-button,
:root[data-theme="dark"] .alarm-delete-button {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .alarm-edit-button:hover {
    border-color: rgba(96, 165, 250, 0.38);
    color: var(--accent-hover);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .alarm-delete-button:hover {
    border-color: rgba(248, 113, 113, 0.36);
    color: var(--danger);
    background: var(--danger-soft);
}

:root[data-theme="dark"] .alarm-time-adjust:hover,
:root[data-theme="dark"] .alarm-editor-close:hover,
:root[data-theme="dark"] .alarm-quick-add button:hover,
:root[data-theme="dark"] .alarm-list-quick-add button:hover {
    border-color: var(--border-strong);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .alarm-day-chip.selected {
    border-color: rgba(96, 165, 250, 0.38);
    color: var(--accent-hover);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .alarm-day-chip.selected span {
    color: var(--accent-hover);
}

:root[data-theme="dark"] .landing-pill,
:root[data-theme="dark"] .hero-meta span,
:root[data-theme="dark"] .offset-pill,
:root[data-theme="dark"] .timer-duration-pill,
:root[data-theme="dark"] .forex-info-pill,
:root[data-theme="dark"] .forex-session-badge,
:root[data-theme="dark"] .seo-link-grid a,
:root[data-theme="dark"] .seo-link-row a,
:root[data-theme="dark"] .landing-root .city-mini-offset,
:root[data-theme="dark"] .landing-root .clock-preview-offset,
:root[data-theme="dark"] .forex-live-time small,
:root[data-theme="dark"] .forex-local-time-card p span {
    border-color: var(--border-soft);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .world-clock-hero .hero-meta span {
    border-color: rgba(125, 211, 252, 0.22);
    color: #d8ebff;
    background: rgba(15, 35, 61, 0.66);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 calc(var(--u) * 1.6) calc(var(--u) * 5) rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] .city-card {
    background:
        linear-gradient(135deg, rgba(15, 31, 53, 0.98), rgba(12, 24, 42, 0.98));
}

:root[data-theme="dark"] .city-card.selected {
    border-color: color-mix(in srgb, var(--city-accent) 45%, var(--border-soft));
    box-shadow:
        0 calc(var(--u) * 2.8) calc(var(--u) * 7.2) rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px color-mix(in srgb, var(--city-accent) 14%, transparent);
}

:root[data-theme="dark"] .city-select:hover,
:root[data-theme="dark"] .city-card.selected .city-select {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--city-accent) 15%, rgba(15, 31, 53, 0.72)),
            rgba(15, 23, 42, 0.38));
}

:root[data-theme="dark"] .city-card .offset-pill {
    border-color: color-mix(in srgb, var(--city-accent) 36%, transparent);
    color: color-mix(in srgb, var(--city-accent) 76%, #e5efff);
    background: color-mix(in srgb, var(--city-accent) 14%, rgba(15, 23, 42, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .city-remove {
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.76);
    box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3.6) rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .city-remove:hover:not(:disabled) {
    border-color: rgba(248, 113, 113, 0.38);
    color: var(--danger);
    background: var(--danger-soft);
}

:root[data-theme="dark"] .converter2-page {
    --converter2-ink: var(--text-primary);
    --converter2-muted: var(--text-secondary);
    --converter2-blue: var(--accent);
    --converter2-line: var(--border-soft);
    --converter2-card: var(--bg-surface);
}

:root[data-theme="dark"] .converter2-title,
:root[data-theme="dark"] .converter2-city-select,
:root[data-theme="dark"] .converter2-picker,
:root[data-theme="dark"] .converter2-select-copy strong,
:root[data-theme="dark"] .converter2-card-title,
:root[data-theme="dark"] .converter2-quick-card h2,
:root[data-theme="dark"] .converter2-quick-row strong,
:root[data-theme="dark"] .converter2-info-strip strong,
:root[data-theme="dark"] .converter2-note {
    color: var(--text-primary);
}

:root[data-theme="dark"] .converter2-title p,
:root[data-theme="dark"] .converter2-select-copy small,
:root[data-theme="dark"] .converter2-picker-option small,
:root[data-theme="dark"] .converter2-result-block span,
:root[data-theme="dark"] .converter2-result-block small,
:root[data-theme="dark"] .converter2-quick-row span,
:root[data-theme="dark"] .converter2-quick-row small,
:root[data-theme="dark"] .converter2-info-strip p,
:root[data-theme="dark"] .converter2-result-tools label,
:root[data-theme="dark"] .converter2-axis-label,
:root[data-theme="dark"] .converter2-period {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .converter2-select-shell,
:root[data-theme="dark"] .converter2-picker-menu,
:root[data-theme="dark"] .converter2-picker-search,
:root[data-theme="dark"] .converter2-input-row input,
:root[data-theme="dark"] .converter2-result-tools input,
:root[data-theme="dark"] .converter2-swap-orb,
:root[data-theme="dark"] .converter2-day-rail,
:root[data-theme="dark"] .converter2-quick-row {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-elevated);
    box-shadow: none;
}

:root[data-theme="dark"] .converter2-select-shell > svg,
:root[data-theme="dark"] .converter2-note svg {
    stroke: var(--text-secondary);
}

:root[data-theme="dark"] .converter2-picker-option {
    color: var(--text-primary);
}

:root[data-theme="dark"] .converter2-picker-option:hover,
:root[data-theme="dark"] .converter2-picker-option.is-selected {
    border-color: rgba(96, 165, 250, 0.32);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .converter2-day-rail strong {
    color: var(--text-primary);
}

:root[data-theme="dark"] .converter2-day-rail small,
:root[data-theme="dark"] .converter2-city-head,
:root[data-theme="dark"] .converter2-info-strip a,
:root[data-theme="dark"] .converter2-result-block strong {
    color: var(--accent);
}

:root[data-theme="dark"] .converter2-day-rail i,
:root[data-theme="dark"] .converter2-result-divider::before,
:root[data-theme="dark"] .converter2-result-divider::after {
    border-color: var(--border-soft);
    background: var(--border-soft);
}

:root[data-theme="dark"] .converter2-day-bands {
    border-color: var(--border-soft);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.28)),
        linear-gradient(180deg, rgba(35, 65, 106, 0.82) 0 18%, rgba(64, 95, 132, 0.64) 18% 42%, rgba(94, 111, 130, 0.5) 42% 70%, rgba(64, 95, 132, 0.62) 70% 86%, rgba(35, 65, 106, 0.82) 86% 100%);
}

:root[data-theme="dark"] .converter2-day-bands::before,
:root[data-theme="dark"] .converter2-day-bands::after {
    border-top-color: rgba(148, 163, 184, 0.24);
}

:root[data-theme="dark"] .converter2-time-column {
    background: linear-gradient(var(--border-strong), var(--border-strong));
}

:root[data-theme="dark"] .converter2-dot {
    background: var(--text-muted);
}

:root[data-theme="dark"] .converter2-dot-active {
    border-color: var(--accent);
    background: var(--bg-surface-strong);
}

:root[data-theme="dark"] .converter2-moon {
    background: #dbeafe;
    box-shadow: inset -0.42rem 0 0 #334155;
}

:root[data-theme="dark"] .converter2-sun {
    background: var(--warning);
    box-shadow: 0 0 0 0.28rem var(--warning-soft);
}

:root[data-theme="dark"] .converter2-result-divider span,
:root[data-theme="dark"] .converter2-card-title > span {
    border-color: var(--border-soft);
    color: var(--accent);
    background: var(--accent-soft);
}

:root[data-theme="dark"] .landing-root .landing-pill {
    border-color: rgba(96, 165, 250, 0.38);
    color: var(--accent-hover);
    background: rgba(96, 165, 250, 0.13);
    box-shadow: none;
    backdrop-filter: none;
}

:root[data-theme="dark"] .landing-root .landing-pill svg {
    stroke: var(--accent);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .clock-preview-search input,
:root[data-theme="dark"] .converter-field-control input,
:root[data-theme="dark"] .converter-field-control select,
:root[data-theme="dark"] .converter-inputs input,
:root[data-theme="dark"] .converter-inputs select,
:root[data-theme="dark"] .alarm-editor-form input[type="text"],
:root[data-theme="dark"] .alarm-editor-form input[type="time"],
:root[data-theme="dark"] .alarm-editor-form select {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: none;
}

.forex-active-windows-section {
    scroll-margin-top: calc(var(--header-h) + 1rem);
    min-width: 0;
    padding: clamp(0.85rem, 1.6vw, 1.2rem);
    border: 1px solid var(--border-soft);
    border-radius: 1.15rem;
    display: grid;
    gap: clamp(0.85rem, 1.45vw, 1.08rem);
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.forex-active-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.forex-active-title-block {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.9rem;
}

.forex-active-title-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.8rem;
    display: inline-grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
}

.forex-active-title-icon svg,
.forex-active-panel-title svg,
.forex-active-footer svg,
.forex-active-card-icon svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.forex-active-title-block h2 {
    color: var(--text-primary);
    font-size: clamp(1.4rem, 2.25vw, 2rem);
    line-height: 1.08;
    font-weight: 700;
}

.forex-active-title-block p {
    max-width: 39rem;
    margin-top: 0.34rem;
    color: var(--text-secondary);
    font-size: clamp(0.86rem, 0.95vw, 0.94rem);
    line-height: 1.38;
    font-weight: 500;
}

.forex-active-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.forex-active-control-group {
    min-height: 2.35rem;
    padding: 0.2rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.65rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(4.6rem, 1fr));
    background: var(--bg-surface);
}

.forex-active-control-group button {
    min-width: 0;
    border: 0;
    border-radius: 0.48rem;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.forex-active-control-group button.active {
    color: var(--accent-contrast);
    background: var(--accent);
    box-shadow: 0 0.55rem 1rem rgba(37, 99, 235, 0.18);
}

.forex-active-control-divider {
    width: 1px;
    height: 1.65rem;
    background: var(--border-strong);
}

.forex-active-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.forex-active-window-card,
.forex-active-panel {
    min-width: 0;
    border: 1px solid var(--border-soft);
    border-radius: 1.15rem;
    background: var(--bg-elevated, #f8fbff);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.forex-active-window-card {
    min-height: 7.25rem;
    padding: 0.85rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.82rem;
    align-items: center;
}

.forex-active-card-icon {
    width: 3rem;
    height: 3rem;
    border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--tone);
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--tone) 24%, transparent), transparent 42%),
        color-mix(in srgb, var(--tone) 12%, transparent);
    box-shadow: inset 0 0 0 0.24rem color-mix(in srgb, var(--tone) 8%, transparent);
}

.forex-active-card-icon svg {
    width: 1.45rem;
    height: 1.45rem;
    stroke-width: 2.1;
}

.tone-green {
    --tone: var(--success);
}

.tone-blue {
    --tone: var(--accent);
}

.tone-purple {
    --tone: #a855f7;
}

.forex-active-card-label {
    display: block;
    color: var(--tone);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.forex-active-card-copy h3 {
    margin-top: 0.2rem;
    color: var(--text-primary);
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    line-height: 1.18;
    font-weight: 700;
}

.forex-active-card-copy p {
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 500;
}

.forex-active-card-copy small {
    display: block;
    margin-top: 0.28rem;
    color: var(--tone);
    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 650;
}

.forex-active-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.forex-active-left-stack {
    min-width: 0;
    display: grid;
    gap: 0.85rem;
}

.forex-active-panel {
    padding: 0.85rem;
}

.forex-active-panel-heading {
    margin-bottom: 0.62rem;
}

.forex-active-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.forex-active-panel-title svg {
    width: 1.05rem;
    height: 1.05rem;
}

.forex-active-panel-heading small {
    display: block;
    margin-top: 0.28rem;
    padding-left: 1.6rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 500;
}

.forex-active-hour-list,
.forex-active-alert-list {
    padding: 0;
    margin: 0;
    display: grid;
    list-style: none;
}

.forex-active-hour-list {
    border: 1px solid var(--border-soft);
    border-radius: 0.85rem;
    overflow: hidden;
}

.forex-active-hour-row {
    position: relative;
    box-sizing: border-box;
    min-height: 3rem;
    padding: 0.65rem 0.9rem 0.65rem 1.15rem;
    border-bottom: 1px solid var(--border-soft);
    display: grid;
    grid-template-columns: 9.8rem 4.35rem minmax(7.5rem, 1fr) auto;
    column-gap: clamp(1rem, 2vw, 1.35rem);
    row-gap: 0.45rem;
    align-items: center;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-surface-strong) 76%, transparent);
}

.forex-active-hour-row:last-child {
    border-bottom: 0;
}

.forex-active-hour-row::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    content: "";
    background: var(--row-accent, var(--accent));
}

.accent-sydney,
.accent-tokyo {
    --row-accent: var(--accent);
}

.accent-london {
    --row-accent: var(--success);
}

.accent-new-york {
    --row-accent: var(--warning);
}

.accent-quiet {
    --row-accent: #94a3b8;
}

.forex-active-time,
.forex-active-window-label {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

.forex-active-row-sessions {
    position: relative;
    width: 4.35rem;
    height: 0.72rem;
    min-width: 0;
    display: inline-block;
    align-items: center;
    justify-self: center;
}

.forex-session-dot {
    --session-color: var(--accent);
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    transform: translateX(-50%);
    background: var(--session-color);
    box-shadow: 0 0 0 0.17rem color-mix(in srgb, var(--session-color) 18%, transparent);
}

.forex-active-row-sessions.dot-count-2 .forex-session-dot:first-of-type {
    left: calc(50% - 0.55rem);
}

.forex-active-row-sessions.dot-count-2 .forex-session-dot:last-of-type {
    left: calc(50% + 0.55rem);
}

.forex-session-dot.sydney {
    --session-color: #3b82f6;
}

.forex-session-dot.tokyo {
    --session-color: #d85cb8;
}

.forex-session-dot.london {
    --session-color: #84cc16;
}

.forex-session-dot.new-york {
    --session-color: #f97316;
}

.forex-session-dot.quiet {
    --session-color: #94a3b8;
}

.forex-activity-badge {
    justify-self: end;
    width: max-content;
    max-width: 100%;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.activity-high {
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
}

.activity-highest {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.15);
}

.activity-medium {
    color: #a16207;
    background: rgba(245, 158, 11, 0.16);
}

.activity-low {
    color: #475569;
    background: rgba(148, 163, 184, 0.18);
}

.forex-active-legend {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.4rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
}

.forex-active-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.forex-active-legend .forex-session-dot {
    width: 0.62rem;
    height: 0.62rem;
}

.forex-active-alert-card {
    min-height: 0;
}

.forex-active-alert-list {
    gap: 0.5rem;
}

.forex-active-alert-row {
    min-width: 0;
    min-height: 3.35rem;
    padding: 0.58rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.85rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.62rem;
    align-items: center;
    background: color-mix(in srgb, var(--bg-surface-strong) 78%, transparent);
}

.forex-active-alert-icon {
    --alert-color: var(--accent);
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--alert-color);
    background: color-mix(in srgb, var(--alert-color) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alert-color) 24%, transparent);
}

.forex-active-alert-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.forex-active-alert-row.london .forex-active-alert-icon {
    --alert-color: #84cc16;
}

.forex-active-alert-row.new-york .forex-active-alert-icon {
    --alert-color: #f97316;
}

.forex-active-alert-row.london-new-york .forex-active-alert-icon {
    --alert-color: #22c55e;
}

.forex-active-alert-row.sydney-tokyo .forex-active-alert-icon {
    --alert-color: #3b82f6;
}

.forex-active-alert-row span:not(.forex-active-alert-icon) {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
}

.forex-active-alert-row button {
    min-height: 2rem;
    padding: 0 0.72rem;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius: 0.58rem;
    color: var(--accent);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.forex-active-alert-row button:hover {
    color: var(--accent-contrast);
    background: var(--accent);
}

.forex-active-helper {
    margin-top: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.forex-session-schedule-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

.forex-session-schedule-table th,
.forex-session-schedule-table td {
    padding: 0.5rem 0.7rem;
    text-align: left;
    font-size: 0.82rem;
    line-height: 1.25;
}

.forex-session-schedule-table th {
    color: var(--text-secondary);
    font-weight: 650;
}

.forex-session-schedule-table td {
    border-top: 1px solid var(--border-soft);
    color: var(--text-primary);
    font-weight: 550;
}

.forex-session-schedule-table td:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 650;
}

.forex-schedule-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-weight: 650;
}

.forex-schedule-status i {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 999px;
    background: currentColor;
}

.forex-schedule-status.is-open {
    color: var(--success);
}

.forex-schedule-status.is-closed {
    color: var(--text-muted);
}

.forex-active-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 500;
}

.forex-active-footer span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.forex-active-footer svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.forex-active-footer strong {
    flex: 0 0 auto;
    color: var(--accent);
    font-weight: 600;
}

:root[data-theme="dark"] .forex-active-windows-section {
    background: #0d1829;
}

:root[data-theme="dark"] .forex-active-window-card,
:root[data-theme="dark"] .forex-active-panel,
:root[data-theme="dark"] .forex-active-control-group {
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .forex-active-hour-row,
:root[data-theme="dark"] .forex-active-alert-row {
    background: var(--bg-surface-strong);
}

:root[data-theme="dark"] .forex-active-title-block p,
:root[data-theme="dark"] .forex-active-panel-heading small,
:root[data-theme="dark"] .forex-active-legend,
:root[data-theme="dark"] .forex-active-helper,
:root[data-theme="dark"] .forex-active-footer,
:root[data-theme="dark"] .forex-session-schedule-table th {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .activity-high {
    color: #86efac;
}

:root[data-theme="dark"] .activity-highest {
    color: #7dd3fc;
}

:root[data-theme="dark"] .activity-medium {
    color: #fbbf24;
}

:root[data-theme="dark"] .activity-low {
    color: #cbd5e1;
}

@media (max-width: 980px) {
    .forex-active-header,
    .forex-active-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .forex-active-controls {
        align-self: flex-start;
    }

    .forex-active-summary-grid,
    .forex-active-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .forex-active-windows-section {
        padding: 0.85rem;
        border-radius: 1.05rem;
    }

    .forex-active-title-block {
        grid-template-columns: minmax(0, 1fr);
    }

    .forex-active-controls {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .forex-active-control-group {
        flex: 1 1 9.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .forex-active-control-divider {
        display: none;
    }

    .forex-active-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .forex-active-window-card {
        min-height: auto;
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.9rem;
    }

    .forex-active-hour-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
        align-items: start;
    }

    .forex-active-row-sessions {
        justify-self: start;
    }

    .forex-activity-badge {
        justify-self: start;
    }

    .forex-active-alert-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .forex-active-alert-row button {
        grid-column: 2;
        justify-self: start;
    }

    .forex-session-schedule-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .forex-session-schedule-table,
    .forex-session-schedule-table tbody,
    .forex-session-schedule-table tr,
    .forex-session-schedule-table td {
        display: block;
        width: 100%;
    }

    .forex-session-schedule-table tr {
        padding: 0.72rem;
        border-top: 1px solid var(--border-soft);
    }

    .forex-session-schedule-table tr:first-child {
        border-top: 0;
    }

    .forex-session-schedule-table td {
        padding: 0.32rem 0;
        border-top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .forex-session-schedule-table td::before {
        content: attr(data-label);
        color: var(--text-secondary);
        font-size: 0.74rem;
        font-weight: 650;
    }

    .forex-session-schedule-table td:first-child {
        justify-content: flex-start;
    }

    .forex-session-schedule-table td:first-child::before {
        display: none;
    }
}

/* =========================================================
   TIMER DIAL OVERFLOW FIX — Final layer, highest specificity.
   Placed at end-of-file so it beats all earlier cascading
   rules for .timer-display strong across all theme variants.
   ========================================================= */

/* Desktop: dial is min(34vw, 39svh).
   Inner ring (::before inset:8.5%) = ~83% of dial.
   "00:25:00" at tabular-nums ≈ 8ch wide.
   Safe font-size: dial_width * 0.83 / (8 * 0.6ch) ≈ dial * 0.17
   We use a comfortable 4vw / 5svh cap. */
.timer-page.seo-enabled .timer-dial .timer-display strong,
.timer-page:not(.seo-enabled) .timer-dial .timer-display strong {
    font-size: clamp(1.35rem, min(4vw, 5svh), 3.5rem) !important;
}

.timer-page.seo-enabled .timer-dial .timer-display,
.timer-page:not(.seo-enabled) .timer-dial .timer-display {
    gap: min(0.9vw, 1.3svh);
    transform: translateY(min(0.6vw, 0.85svh));
}

.timer-page.seo-enabled .timer-dial .timer-status,
.timer-page:not(.seo-enabled) .timer-dial .timer-status {
    font-size: min(0.9vw, 1.45svh);
}

.timer-page.seo-enabled .timer-dial .timer-duration-pill,
.timer-page:not(.seo-enabled) .timer-dial .timer-duration-pill {
    min-height: min(2.5vw, 3.9svh);
    padding: 0 min(1.1vw, 1.9svh);
    font-size: min(0.88vw, 1.5svh);
}

/* Mobile ≤920px: dial shrinks to min(58vw, 28svh) */
@media (max-width: 920px) {
    .timer-page.seo-enabled .timer-dial .timer-display strong,
    .timer-page:not(.seo-enabled) .timer-dial .timer-display strong {
        font-size: clamp(1.2rem, min(7vw, 4.8svh), 3rem) !important;
    }
}

/* Mobile ≤640px: dial shrinks further to min(58vw, 21svh) */
@media (max-width: 640px) {
    .timer-page.seo-enabled .timer-dial .timer-display strong,
    .timer-page:not(.seo-enabled) .timer-dial .timer-display strong {
        font-size: clamp(1rem, min(8vw, 3.8svh), 2.4rem) !important;
    }

    .timer-page.seo-enabled .timer-dial .timer-display,
    .timer-page:not(.seo-enabled) .timer-dial .timer-display {
        gap: min(1.5vw, 0.65svh);
        transform: translateY(min(0.5vw, 0.5svh));
    }

    .timer-page.seo-enabled .timer-dial .timer-status,
    .timer-page:not(.seo-enabled) .timer-dial .timer-status {
        font-size: min(2.5vw, 1.1svh);
    }

    .timer-page.seo-enabled .timer-dial .timer-duration-pill,
    .timer-page:not(.seo-enabled) .timer-dial .timer-duration-pill {
        min-height: min(5.2vw, 2.2svh);
        padding: 0 min(2.4vw, 1svh);
        font-size: min(2.6vw, 1.1svh);
    }
}

/* =========================================================
   TIMER DIAL → DURATION GRID SPACING FIX
   Adds breathing room between the circle and the +/- steppers.
   ========================================================= */
.timer-page.seo-enabled .timer-dial,
.timer-page:not(.seo-enabled) .timer-dial {
    margin-bottom: min(1.4vw, 1.8svh);
}

.timer-page.seo-enabled .duration-grid,
.timer-page:not(.seo-enabled) .duration-grid {
    margin-top: min(0.5vw, 0.65svh);
}

@media (max-width: 920px) {
    .timer-page.seo-enabled .timer-dial,
    .timer-page:not(.seo-enabled) .timer-dial {
        margin-bottom: min(2vw, 1.4svh);
    }
}

@media (max-width: 640px) {
    .timer-page.seo-enabled .timer-dial,
    .timer-page:not(.seo-enabled) .timer-dial {
        margin-bottom: min(2.5vw, 1.1svh);
    }

    .timer-page.seo-enabled .duration-grid,
    .timer-page:not(.seo-enabled) .duration-grid {
        margin-top: 0;
    }
}

/* =========================================================
   TIMER DIAL CORNER GLOW FIX
   The timer-ring's spread box-shadows bleed into the transparent
   square corners of the .timer-dial container. clip-path:circle()
   clips everything to a circle shape (unlike overflow:hidden which
   clips to a rectangle). 54% gives a small buffer so the ring
   handle dot at the very top edge is not clipped.
   ========================================================= */
.timer-page.seo-enabled .timer-dial,
.timer-page:not(.seo-enabled) .timer-dial,
.stopwatch-page .stopwatch-dial {
    clip-path: circle(54% at 50% 50%);
}

/* =========================================================
   STOPWATCH DIAL — SAME TREATMENTS AS TIMER PAGE
   Mirrors all dial fixes: font-size cap, corner glow clip,
   display spacing, and dial→actions margin.
   ========================================================= */

/* Font size: stopwatch shows "mm:ss.ff" (8 chars) or "h:mm:ss.ff" (10 chars).
   Use a slightly smaller cap than timer to accommodate the wider format. */
.stopwatch-page .stopwatch-dial .timer-display strong {
    font-size: clamp(1.1rem, min(3.6vw, 4.6svh), 3.2rem) !important;
}

.stopwatch-page .stopwatch-dial .timer-display {
    gap: min(0.9vw, 1.3svh);
    transform: translateY(min(0.6vw, 0.85svh));
}

.stopwatch-page .stopwatch-dial .timer-status {
    font-size: min(0.88vw, 1.4svh);
}

.stopwatch-page .stopwatch-dial .timer-duration-pill {
    min-height: min(2.5vw, 3.9svh);
    padding: 0 min(1.1vw, 1.9svh);
    font-size: min(0.88vw, 1.5svh);
}

/* Space between dial and action buttons */
.stopwatch-page .stopwatch-dial {
    margin-bottom: min(1.4vw, 1.8svh);
}

/* Mobile ≤920px */
@media (max-width: 920px) {
    .stopwatch-page .stopwatch-dial .timer-display strong {
        font-size: clamp(1.1rem, min(6.5vw, 4.4svh), 2.8rem) !important;
    }

    .stopwatch-page .stopwatch-dial {
        margin-bottom: min(2vw, 1.4svh);
    }
}

/* Mobile ≤640px */
@media (max-width: 640px) {
    .stopwatch-page .stopwatch-dial .timer-display strong {
        font-size: clamp(1rem, min(7.5vw, 3.6svh), 2.2rem) !important;
    }

    .stopwatch-page .stopwatch-dial .timer-display {
        gap: min(1.5vw, 0.65svh);
        transform: translateY(min(0.5vw, 0.5svh));
    }

    .stopwatch-page .stopwatch-dial .timer-status {
        font-size: min(2.5vw, 1.1svh);
    }

    .stopwatch-page .stopwatch-dial .timer-duration-pill {
        min-height: min(5.2vw, 2.2svh);
        padding: 0 min(2.4vw, 1svh);
        font-size: min(2.6vw, 1.1svh);
    }

    .stopwatch-page .stopwatch-dial {
        margin-bottom: min(2.5vw, 1.1svh);
    }
}

/* =========================================================
   STOPWATCH DIAL SIZE — Match timer page exactly
   Dark theme previously capped dial at 23rem (clamp limit),
   making it smaller than the timer's min(34vw, 39svh).
   Override to use the same sizing formula as the timer.
   ========================================================= */
:root[data-theme="dark"] .stopwatch-page {
    --timer-dial-size: min(34vw, 39svh);
}

:root[data-theme="dark"] .stopwatch-page .stopwatch-dial {
    width: var(--timer-dial-size);
}

@media (max-width: 920px) {
    :root[data-theme="dark"] .stopwatch-page {
        --timer-dial-size: min(58vw, 28svh);
    }
}

@media (max-width: 640px) {
    :root[data-theme="dark"] .stopwatch-page {
        --timer-dial-size: min(58vw, 21svh);
    }
}

/* =========================================================
   ALARMS TOOL-PREVIEW-CARD — More breathing room
   The alarm rows were very tightly packed. Increase row
   min-height, padding, and gap between rows.
   ========================================================= */
.landing-root .mini-alarm-panel {
    gap: 0.25rem;
}

.landing-root .mini-alarm-row {
    min-height: 2.8rem;
    padding: 0.42rem 0.5rem;
    border-radius: 0.65rem;
}

.landing-root .mini-alarm-row + .mini-alarm-row {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.landing-root .mini-add-alarm-button {
    margin-top: 0.65rem;
    min-height: 2rem;
}

:root[data-theme="dark"] .landing-root .mini-alarm-row + .mini-alarm-row {
    border-top-color: rgba(148, 163, 184, 0.08);
}

/* Keep the landing tool previews inside their cards on common 1080p displays
   where browser chrome and display scaling leave a shorter CSS viewport. */
@media (min-width: 74.001rem) and (max-height: 820px) {
    .landing-root .tool-preview-card {
        padding-block: clamp(0.6rem, 1.35svh, 0.75rem);
        gap: clamp(0.42rem, 0.85svh, 0.55rem);
    }

    .landing-root .tool-preview-card p {
        font-weight: 600;
    }

    .landing-root .mini-panel {
        padding-block: clamp(0.5rem, 0.9svh, 0.65rem);
    }

    .landing-root .mini-stopwatch-panel {
        padding-inline: clamp(0.65rem, 0.75vw, 0.85rem);
    }

    .landing-root .mini-alarm-panel {
        padding-block: clamp(0.35rem, 0.65svh, 0.5rem);
        gap: 0.1rem;
    }

    .landing-root .mini-alarm-row {
        min-height: 2rem;
        padding: 0.08rem 0.3rem;
        border-radius: 0.5rem;
    }

    .landing-root .mini-alarm-row > div {
        gap: 0.08rem;
    }

    .landing-root .mini-alarm-row > div > span {
        font-size: clamp(1rem, 2.1svh, 1.18rem);
    }

    .landing-root .mini-alarm-row p,
    .landing-root .mini-add-alarm-button {
        font-size: clamp(0.68rem, 1.05svh, 0.74rem);
    }

    .landing-root .mini-alarm-row p {
        line-height: 1;
    }

    .landing-root .mini-add-alarm-button {
        min-height: 1.55rem;
        margin-top: 0.12rem;
    }
}

/* Countdown to Date */
.countdown-page {
    --countdown-primary: var(--accent);
    --countdown-secondary: color-mix(in srgb, var(--accent-hover) 72%, var(--accent) 28%);
    --countdown-accent: var(--accent);
    --countdown-danger: #ef4444;
    --countdown-success: #22c55e;
    --countdown-warning: #f59e0b;
    min-height: var(--page-vh);
    color: var(--text-primary);
    background: var(--bg-page);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

.countdown-page *,
.countdown-page *::before,
.countdown-page *::after {
    box-sizing: border-box;
}

.countdown-theme-animation {
    position: fixed;
    inset: var(--header-h, 4.5rem) 0 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    contain: layout style paint;
}

.countdown-theme-sprite {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size, 1rem);
    height: var(--size, 1rem);
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--event-color, var(--countdown-primary)) 82%, #fff);
    font-size: var(--size, 1rem);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.24);
    animation: countdown-theme-travel var(--duration, 18s) linear var(--delay, 0s) infinite;
}

.countdown-theme-sprite > span {
    display: block;
    transform-origin: center;
    animation: countdown-theme-wiggle 1.9s ease-in-out infinite;
}

.countdown-theme-sprite.launch {
    z-index: 2;
    animation-duration: var(--duration, 8s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    text-shadow:
        0 0.35rem 0.8rem rgba(15, 23, 42, 0.22),
        0 0 0.5rem color-mix(in srgb, var(--event-color, var(--countdown-primary)) 24%, transparent);
}

.countdown-theme-sprite.launch > span {
    animation-duration: 0.82s;
    animation-iteration-count: 10;
    animation-fill-mode: both;
}

.countdown-theme-sprite.motion-fall {
    animation-name: countdown-theme-travel;
    animation-timing-function: ease-in-out;
}

.countdown-theme-sprite.motion-rise {
    animation-name: countdown-theme-travel;
    animation-timing-function: ease-out;
}

.countdown-theme-sprite.motion-swoop {
    animation-name: countdown-theme-swoop;
    animation-timing-function: ease-in-out;
}

.countdown-theme-sprite.motion-creep {
    animation-name: countdown-theme-creep;
    animation-timing-function: linear;
}

.countdown-theme-sprite.motion-hop {
    animation-name: countdown-theme-creep;
    animation-timing-function: linear;
}

.countdown-theme-sprite.motion-hop > span {
    animation: countdown-theme-hop 0.74s ease-in-out infinite;
}

.countdown-theme-sprite.motion-pulse {
    animation-name: countdown-theme-pulse;
    animation-timing-function: ease-in-out;
}

.countdown-theme-sprite.launch.motion-fall,
.countdown-theme-sprite.launch.motion-rise,
.countdown-theme-sprite.launch.motion-hop {
    animation-name: countdown-theme-launch-travel;
}

.countdown-theme-sprite.launch.motion-swoop {
    animation-name: countdown-theme-launch-swoop;
}

.countdown-theme-sprite.launch.motion-creep {
    animation-name: countdown-theme-launch-creep;
}

.countdown-theme-sprite.launch.motion-pulse {
    animation-name: countdown-theme-launch-pulse;
}

.countdown-theme-animation.theme-halloween .sprite-spider {
    text-shadow: 0 0.45rem 0.55rem rgba(2, 6, 23, 0.28);
}

.countdown-theme-animation.theme-halloween .sprite-spider > span {
    animation: countdown-theme-crawl-step 0.52s steps(2, end) infinite;
}

.countdown-theme-animation.theme-halloween .sprite-bat {
    color: #1f2937;
    text-shadow: 0 0.5rem 0.7rem rgba(2, 6, 23, 0.32);
}

.countdown-theme-animation.theme-halloween .sprite-glow,
.countdown-theme-animation.theme-fireworks .sprite-spark,
.countdown-theme-animation.theme-christmas .sprite-glow {
    color: #fde68a;
    text-shadow:
        0 0 0.6rem rgba(253, 224, 71, 0.72),
        0 0.4rem 1.1rem rgba(15, 23, 42, 0.22);
}

.countdown-theme-animation.theme-fireworks .sprite-spark {
    color: #f8fafc;
    text-shadow: 0 0 0.75rem rgba(129, 140, 248, 0.74);
}

.countdown-theme-animation.theme-lunarnewyear .sprite-lantern,
.countdown-theme-animation.theme-lunarnewyear .sprite-ribbon {
    color: #dc2626;
    text-shadow: 0 0.5rem 0.9rem rgba(127, 29, 29, 0.24);
}

.countdown-theme-animation .sprite-petal {
    color: #fb7185;
}

.countdown-theme-animation.theme-easter .sprite-egg {
    text-shadow: 0 0.45rem 0.7rem rgba(34, 197, 94, 0.18);
}

.countdown-theme-animation.theme-christmas .sprite-snow {
    color: #eff6ff;
    text-shadow:
        0 0 0.7rem rgba(147, 197, 253, 0.64),
        0 0.35rem 0.85rem rgba(15, 23, 42, 0.18);
}

.countdown-theme-animation.theme-christmas .sprite-gift,
.countdown-theme-animation.theme-valentines .sprite-heart,
.countdown-theme-animation.theme-anniversary .sprite-heart {
    color: #e11d48;
}

.countdown-theme-animation.theme-thanksgiving .sprite-leaf {
    text-shadow: 0 0.45rem 0.8rem rgba(124, 45, 18, 0.18);
}

.countdown-theme-animation.theme-blackfriday .sprite-sale,
.countdown-theme-animation.theme-blackfriday .sprite-bag {
    color: #facc15;
    text-shadow: 0 0.45rem 0.85rem rgba(15, 23, 42, 0.24);
}

.countdown-theme-animation.theme-election .sprite-star,
.countdown-theme-animation.theme-graduation .sprite-star {
    color: #2563eb;
}

.countdown-theme-animation.theme-birthday .sprite-balloon,
.countdown-theme-animation.theme-baby .sprite-balloon {
    color: #8b5cf6;
    text-shadow:
        0 0.35rem 0.8rem rgba(139, 92, 246, 0.26),
        0 0.6rem 1.1rem rgba(15, 23, 42, 0.16);
}

.countdown-theme-animation.theme-baby .sprite-balloon {
    color: #38bdf8;
}

.countdown-theme-animation.theme-birthday .sprite-confetti,
.countdown-theme-animation.theme-baby .sprite-confetti {
    color: #f59e0b;
}

.countdown-theme-animation.theme-graduation .sprite-cap {
    color: #111827;
}

.countdown-theme-animation.theme-paris .sprite-plane {
    color: #2563eb;
}

.countdown-theme-sprite.launch.motion-hop > span {
    animation: countdown-theme-hop 0.74s ease-in-out 10 both;
}

.countdown-theme-animation.theme-halloween .countdown-theme-sprite.launch.sprite-spider > span {
    animation: countdown-theme-crawl-step 0.52s steps(2, end) 18 both;
}

@media (max-width: 640px) {
    .countdown-theme-sprite.launch:nth-of-type(n+9) {
        display: none;
    }
}

@keyframes countdown-theme-travel {
    0% {
        opacity: 0;
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(0.82);
    }

    10%, 86% {
        opacity: var(--sprite-opacity, 0.64);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) rotate(calc(var(--rotate, 0deg) + 42deg)) scale(1);
    }
}

@keyframes countdown-theme-launch-travel {
    0% {
        opacity: var(--sprite-opacity, 0.8);
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(1.08);
    }

    62% {
        opacity: var(--sprite-opacity, 0.8);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) rotate(calc(var(--rotate, 0deg) + 56deg)) scale(0.9);
    }
}

@keyframes countdown-theme-swoop {
    0% {
        opacity: 0;
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(0.86);
    }

    12%, 78% {
        opacity: var(--sprite-opacity, 0.58);
    }

    50% {
        transform: translate3d(50vw, 8vh, 0) rotate(calc(var(--rotate, 0deg) + 8deg)) scale(1.06);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) rotate(calc(var(--rotate, 0deg) - 12deg)) scale(0.92);
    }
}

@keyframes countdown-theme-launch-swoop {
    0% {
        opacity: var(--sprite-opacity, 0.72);
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(1.04);
    }

    48% {
        opacity: var(--sprite-opacity, 0.72);
        transform: translate3d(50vw, 8vh, 0) rotate(calc(var(--rotate, 0deg) + 12deg)) scale(1.12);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) rotate(calc(var(--rotate, 0deg) - 18deg)) scale(0.88);
    }
}

@keyframes countdown-theme-creep {
    0% {
        opacity: 0;
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(0.9);
    }

    8%, 90% {
        opacity: var(--sprite-opacity, 0.72);
    }

    48% {
        transform: translate3d(50vw, calc(var(--start-y) - 5vh), 0) rotate(calc(var(--rotate, 0deg) + 6deg)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) rotate(calc(var(--rotate, 0deg) - 4deg)) scale(0.96);
    }
}

@keyframes countdown-theme-launch-creep {
    0% {
        opacity: var(--sprite-opacity, 0.76);
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(1.04);
    }

    52% {
        opacity: var(--sprite-opacity, 0.76);
        transform: translate3d(50vw, calc(var(--start-y) - 5vh), 0) rotate(calc(var(--rotate, 0deg) + 8deg)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) rotate(calc(var(--rotate, 0deg) - 8deg)) scale(0.92);
    }
}

@keyframes countdown-theme-pulse {
    0%, 100% {
        opacity: 0;
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(0.66);
    }

    45%, 58% {
        opacity: var(--sprite-opacity, 0.5);
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(calc(var(--rotate, 0deg) + 18deg)) scale(1.35);
    }
}

@keyframes countdown-theme-launch-pulse {
    0% {
        opacity: var(--sprite-opacity, 0.5);
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate, 0deg)) scale(1);
    }

    34% {
        opacity: var(--sprite-opacity, 0.5);
        transform: translate3d(var(--start-x), var(--start-y), 0) rotate(calc(var(--rotate, 0deg) + 18deg)) scale(1.45);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) rotate(calc(var(--rotate, 0deg) + 28deg)) scale(0.72);
    }
}

@keyframes countdown-theme-wiggle {
    0%, 100% {
        transform: translateX(-0.2rem) rotate(-5deg);
    }

    50% {
        transform: translateX(0.2rem) rotate(5deg);
    }
}

@keyframes countdown-theme-crawl-step {
    0%, 100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-0.16rem) rotate(4deg);
    }
}

@keyframes countdown-theme-hop {
    0%, 100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(-1.1rem) rotate(8deg);
    }
}

.countdown-shell {
    width: min(100%, 100dvw);
    max-width: 1440px;
    min-height: calc(100dvh - var(--header-h, 72px));
    margin: 0 auto;
    padding: clamp(4.75rem, 8vw, 6rem) clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
    overflow-x: hidden;
    box-sizing: border-box;
}

.countdown-heading {
    width: 100%;
    max-width: none;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: clamp(0.85rem, 2vw, 1.5rem);
    text-align: left;
}

.countdown-heading-copy {
    min-width: 0;
}

.countdown-heading h1 {
    font-size: clamp(2.05rem, 4vw, 3rem);
    font-weight: 700;
}

.countdown-heading p:not(.eyebrow) {
    margin-left: 0;
    margin-right: 0;
}

.countdown-layout {
    display: grid;
    grid-template-columns: minmax(0, clamp(210px, 19vw, 270px)) minmax(0, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

.countdown-main,
.countdown-sidebar {
    min-width: 0;
    box-sizing: border-box;
}

.countdown-main {
    display: grid;
    gap: clamp(1rem, 1.6vw, 1.5rem);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.countdown-panel,
.countdown-hero-card,
.countdown-popular,
.countdown-editor-sheet {
    border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--bg-surface-strong) 88%, transparent);
    box-shadow: var(--shadow-card);
}

.countdown-panel,
.countdown-popular {
    border-radius: clamp(1rem, 1.8vw, 1.5rem);
}

.countdown-panel {
    padding: clamp(0.9rem, 1.5vw, 1.15rem);
    display: grid;
    gap: 1rem;
}

.countdown-panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
}

.countdown-panel-icon,
.countdown-event-thumb,
.countdown-editor-icon {
    display: inline-grid;
    place-items: center;
}

.countdown-panel-icon {
    width: clamp(2rem, 2.8vw, 2.6rem);
    height: clamp(2rem, 2.8vw, 2.6rem);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--countdown-primary) 14%, transparent);
}

.countdown-panel h2,
.countdown-popular h2,
.countdown-editor-sheet h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.2;
    font-weight: 760;
}

.countdown-panel p,
.countdown-panel small,
.countdown-idea-copy small,
.countdown-form-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.45;
}

.countdown-event-list {
    display: grid;
    gap: 0.55rem;
}

.countdown-event-row {
    width: 100%;
    min-height: 4.1rem;
    padding: 0.55rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.75rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}

.countdown-event-row:hover,
.countdown-event-row:focus-visible {
    border-color: color-mix(in srgb, var(--countdown-primary) 40%, transparent);
    background: color-mix(in srgb, var(--countdown-primary) 7%, var(--bg-surface-strong));
    transform: translateX(2px);
}

.countdown-event-row.active {
    border-color: color-mix(in srgb, var(--countdown-primary) 62%, transparent);
    background: color-mix(in srgb, var(--countdown-primary) 12%, var(--bg-surface-strong));
    box-shadow: inset 3px 0 0 var(--countdown-primary);
}

.countdown-event-row strong,
.countdown-idea-copy strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.countdown-event-row svg,
.countdown-primary-button svg,
.countdown-secondary-button svg,
.countdown-heart svg,
.countdown-fullscreen svg,
.countdown-meta svg,
.countdown-editor-close svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.countdown-event-thumb {
    --event-color: var(--countdown-primary);
    width: clamp(2.4rem, 3.5vw, 3rem);
    height: clamp(2.4rem, 3.5vw, 3rem);
    border: 1px solid color-mix(in srgb, var(--event-color) 34%, transparent);
    border-radius: 0.7rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--event-color) 52%, transparent), transparent 48%),
        color-mix(in srgb, var(--event-color) 12%, var(--bg-surface-strong));
}

.countdown-event-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.countdown-event-thumb.fireworks { --event-color: #6366f1; }
.countdown-event-thumb.christmas { --event-color: #22c55e; }
.countdown-event-thumb.valentines { --event-color: #ef4444; }
.countdown-event-thumb.halloween { --event-color: #f59e0b; }
.countdown-event-thumb.thanksgiving { --event-color: #f97316; }
.countdown-event-thumb.election { --event-color: #2563eb; }
.countdown-event-thumb.birthday { --event-color: #8b5cf6; }

.countdown-idea-box {
    padding: 0.95rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    background:
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--countdown-secondary) 26%, transparent), transparent 34%),
        color-mix(in srgb, var(--countdown-primary) 8%, var(--bg-surface-strong));
}

.countdown-idea-box h3 {
    margin: 0 0 0.35rem;
    color: var(--text-primary);
    font-size: 0.96rem;
}

.countdown-idea-box > span {
    font-size: 2.6rem;
}

.countdown-idea-box .countdown-primary-button {
    grid-column: 1 / -1;
    width: max-content;
}

.countdown-hero-card {
    --event-color: var(--countdown-primary);
    --countdown-hero-image: none;
    --countdown-fullscreen-image: none;
    --countdown-fullscreen-position: center;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: clamp(26rem, 44vw, 36rem);
    border-radius: clamp(1rem, 1.8vw, 1.6rem);
    overflow: hidden;
    color: #fff;
    transition: box-shadow 0.3s ease;
    background-color: #07111f;
    background-repeat: no-repeat;
    background-image:
        var(--countdown-hero-image),
        radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--event-color) 38%, transparent), transparent 26%),
        linear-gradient(125deg, rgba(3, 8, 22, 0.96), rgba(15, 23, 42, 0.8) 42%, rgba(30, 41, 89, 0.52)),
        linear-gradient(135deg, #07111f, #172554 46%, #4c1d95);
    background-position: center;
    background-size: cover;
}

.countdown-hero-card::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 84% 30%, rgba(255, 206, 115, 0.32) 0 3%, transparent 3.2%),
        radial-gradient(circle at 60% 18%, rgba(248, 113, 113, 0.25) 0 2.5%, transparent 2.7%),
        linear-gradient(180deg, transparent 0 58%, rgba(7, 17, 31, 0.72) 100%);
    opacity: 0.9;
    transition: opacity 0.4s ease;
}

.countdown-hero-card.theme-paris::before,
.countdown-hero-card.theme-fireworks::before,
.countdown-hero-card.theme-lunarnewyear::before,
.countdown-hero-card.theme-easter::before,
.countdown-hero-card.theme-christmas::before,
.countdown-hero-card.theme-valentines::before,
.countdown-hero-card.theme-halloween::before,
.countdown-hero-card.theme-thanksgiving::before,
.countdown-hero-card.theme-blackfriday::before,
.countdown-hero-card.theme-election::before,
.countdown-hero-card.theme-birthday::before,
.countdown-hero-card.theme-graduation::before,
.countdown-hero-card.theme-anniversary::before,
.countdown-hero-card.theme-baby::before,
.countdown-hero-card.theme-custom::before {
    background:
        radial-gradient(circle at 78% 17%, rgba(255, 196, 97, 0.28) 0 4%, transparent 4.3%),
        linear-gradient(180deg, rgba(7, 11, 31, 0.35) 0%, rgba(7, 17, 31, 0.72) 100%);
    opacity: 1;
}

.countdown-hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: inherit;
    padding: clamp(1.1rem, 2vw, 2rem);
    display: grid;
    align-content: space-between;
    gap: clamp(0.75rem, 1.4vw, 1.2rem);
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.9), rgba(239, 246, 255, 0.7) 46%, rgba(248, 250, 252, 0.22));
    box-sizing: border-box;
    overflow: hidden;
}

.countdown-hero-body {
    min-width: 0;
    display: grid;
    align-content: end;
    gap: clamp(0.9rem, 1.7vw, 1.35rem);
}

.countdown-hero-top,
.countdown-watchers,
.countdown-hero-actions,
.countdown-meta span,
.countdown-section-head {
    display: flex;
    align-items: center;
}

.countdown-hero-top,
.countdown-section-head {
    justify-content: space-between;
    gap: 1rem;
}

.countdown-hero-top {
    flex-wrap: wrap;
    min-width: 0;
}

.countdown-badge {
    min-height: 1.75rem;
    padding: 0 0.72rem;
    border-radius: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 32%, rgba(255, 255, 255, 0.16));
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 74%, rgba(15, 23, 42, 0.24)),
            color-mix(in srgb, var(--countdown-primary) 78%, rgba(30, 41, 59, 0.22))
        );
    box-shadow:
        0 0.45rem 1.1rem color-mix(in srgb, var(--countdown-primary) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.countdown-badge.trending {
    border-color: rgba(251, 146, 60, 0.5);
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.96), rgba(124, 45, 18, 0.94));
    box-shadow:
        0 0.55rem 1.4rem rgba(249, 115, 22, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-theme="light"] .countdown-badge {
    border-color: color-mix(in srgb, var(--countdown-primary) 34%, rgba(37, 99, 235, 0.18));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 78%, rgba(255, 255, 255, 0.14)),
            color-mix(in srgb, var(--countdown-primary) 74%, rgba(148, 163, 184, 0.12))
        );
    box-shadow:
        0 0.5rem 1rem color-mix(in srgb, var(--countdown-primary) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.countdown-watchers {
    gap: 0.6rem;
    color: #0f172a;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.countdown-watchers-avatars {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 28%, rgba(255, 255, 255, 0.2));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 18%, rgba(255, 255, 255, 0.82)),
            color-mix(in srgb, var(--countdown-primary) 14%, rgba(248, 250, 252, 0.72))
        );
    box-shadow:
        0 0.45rem 1rem color-mix(in srgb, var(--countdown-primary) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 0.88rem;
    letter-spacing: -0.04em;
}

.countdown-watcher-avatar {
    width: 1.05rem;
    height: 1.05rem;
    margin-left: -0.28rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.95), rgba(59, 130, 246, 0.9));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.countdown-watcher-avatar:first-child {
    margin-left: 0;
}

.countdown-watcher-avatar:nth-child(2) {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(14, 165, 233, 0.92));
}

.countdown-watcher-avatar:nth-child(3) {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.95), rgba(139, 92, 246, 0.92));
}

.countdown-watcher-avatar:nth-child(4) {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.95), rgba(59, 130, 246, 0.92));
}

.countdown-watchers-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 28%, rgba(255, 255, 255, 0.2));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 18%, rgba(255, 255, 255, 0.84)),
            color-mix(in srgb, var(--countdown-primary) 14%, rgba(248, 250, 252, 0.72))
        );
    box-shadow:
        0 0.45rem 1rem color-mix(in srgb, var(--countdown-primary) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 0.82rem;
    min-width: 0;
    max-width: 100%;
}

.countdown-watchers-pill small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.countdown-favorites-pill,
.countdown-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.countdown-favorites-pill svg,
.countdown-card-pill svg {
    width: 0.92rem;
    height: 0.92rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.countdown-card-pill {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 3;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--event-color, var(--countdown-primary)) 32%, rgba(255, 255, 255, 0.22));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color, var(--countdown-secondary)) 34%, rgba(15, 23, 42, 0.78)),
            color-mix(in srgb, var(--event-color, var(--countdown-primary)) 26%, rgba(2, 6, 23, 0.82))
        );
    box-shadow:
        0 0.45rem 1rem color-mix(in srgb, var(--event-color, var(--countdown-primary)) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.countdown-card-pill small {
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.countdown-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: countdown-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes countdown-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.7); }
}

.countdown-heart,
.countdown-fullscreen {
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 28%, rgba(255, 255, 255, 0.2));
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #0f172a;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 18%, rgba(255, 255, 255, 0.86)),
            color-mix(in srgb, var(--countdown-primary) 14%, rgba(248, 250, 252, 0.74))
        );
    box-shadow:
        0 0.45rem 1rem color-mix(in srgb, var(--countdown-primary) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.countdown-heart.active,
.countdown-heart:hover {
    color: #fff1f2;
    border-color: color-mix(in srgb, var(--countdown-danger) 52%, rgba(255, 255, 255, 0.2));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-danger) 74%, rgba(127, 29, 29, 0.18)),
            color-mix(in srgb, #be123c 72%, rgba(136, 19, 55, 0.22))
        );
    box-shadow:
        0 0.55rem 1.2rem color-mix(in srgb, var(--countdown-danger) 20%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.countdown-fullscreen:hover {
    color: color-mix(in srgb, var(--countdown-primary) 70%, #0f172a);
    border-color: color-mix(in srgb, var(--countdown-primary) 42%, rgba(255, 255, 255, 0.2));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 26%, rgba(255, 255, 255, 0.86)),
            color-mix(in srgb, var(--countdown-primary) 22%, rgba(248, 250, 252, 0.76))
        );
    box-shadow:
        0 0.55rem 1.2rem color-mix(in srgb, var(--countdown-primary) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.countdown-fullscreen .exit-fullscreen-icon {
    display: none;
}

.countdown-hero-card:fullscreen,
.countdown-hero-card:-webkit-full-screen {
    width: 100vw;
    max-width: none;
    min-height: 100dvh;
    border-radius: 0;
    background-image:
        linear-gradient(180deg, rgba(2, 6, 23, 0.14), rgba(2, 6, 23, 0.78)),
        var(--countdown-fullscreen-image),
        linear-gradient(135deg, #020617, #0f172a 54%, #1d4ed8);
    background-position: center, var(--countdown-fullscreen-position), center;
    background-size: auto, cover, cover;
}

.countdown-hero-card:fullscreen .countdown-hero-overlay,
.countdown-hero-card:-webkit-full-screen .countdown-hero-overlay {
    min-height: 100dvh;
    padding: clamp(1.2rem, 2.8vw, 2.4rem);
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: stretch;
    gap: clamp(1.2rem, 3vh, 2.2rem);
    background:
        linear-gradient(90deg, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.38) 50%, rgba(2, 6, 23, 0.18));
}

.countdown-hero-card:fullscreen::before,
.countdown-hero-card:-webkit-full-screen::before {
    opacity: 0.18;
}

.countdown-hero-card:fullscreen .countdown-hero-top,
.countdown-hero-card:-webkit-full-screen .countdown-hero-top,
.countdown-hero-card:fullscreen .countdown-hero-body,
.countdown-hero-card:-webkit-full-screen .countdown-hero-body {
    width: min(100%, 72rem);
    max-width: 72rem;
    margin-inline: auto;
}

.countdown-hero-card:fullscreen .countdown-hero-body,
.countdown-hero-card:-webkit-full-screen .countdown-hero-body {
    min-height: 100%;
    padding-block: clamp(0.75rem, 4vh, 2.5rem);
    align-content: center;
    justify-items: start;
    gap: clamp(1rem, 2vw, 1.8rem);
}

.countdown-hero-card:fullscreen .countdown-hero-copy,
.countdown-hero-card:-webkit-full-screen .countdown-hero-copy {
    width: min(100%, 50rem);
    max-width: 50rem;
    margin: 0;
}

.countdown-hero-card:fullscreen .countdown-time-grid,
.countdown-hero-card:-webkit-full-screen .countdown-time-grid {
    width: fit-content;
    max-width: min(100%, 56rem);
    margin: 0;
    padding: clamp(0.5rem, 0.9vw, 0.8rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(1.15rem, 1.8vw, 1.6rem);
    justify-self: start;
    background: rgba(2, 6, 23, 0.18);
    box-shadow: 0 1rem 2.5rem rgba(2, 6, 23, 0.22);
    backdrop-filter: blur(14px);
}

@media (min-width: 961px) {
    .countdown-hero-card:fullscreen .countdown-time-grid,
    .countdown-hero-card:-webkit-full-screen .countdown-time-grid {
        width: fit-content;
        max-width: min(100%, 54rem);
        grid-template-columns:
            minmax(8.5rem, 10.5rem) auto
            minmax(8.5rem, 10.5rem) auto
            minmax(8.5rem, 10.5rem) auto
            minmax(8.5rem, 10.5rem);
        justify-content: start;
        justify-self: start;
        gap: clamp(0.55rem, 1vw, 0.9rem);
    }

    .countdown-hero-card:fullscreen .countdown-block,
    .countdown-hero-card:-webkit-full-screen .countdown-block {
        min-width: clamp(8.5rem, 10vw, 10.5rem);
    }
}

.countdown-hero-card:fullscreen .countdown-hero-top,
.countdown-hero-card:-webkit-full-screen .countdown-hero-top {
    justify-content: space-between;
    align-items: flex-start;
}

.countdown-hero-card:fullscreen .countdown-watchers,
.countdown-hero-card:-webkit-full-screen .countdown-watchers {
    justify-content: flex-end;
}

.countdown-hero-card:fullscreen .countdown-watchers > :not(.countdown-fullscreen),
.countdown-hero-card:-webkit-full-screen .countdown-watchers > :not(.countdown-fullscreen) {
    display: none !important;
}

.countdown-hero-card:fullscreen .countdown-hero-actions,
.countdown-hero-card:-webkit-full-screen .countdown-hero-actions {
    display: none !important;
}

.countdown-hero-card:fullscreen .countdown-watchers,
.countdown-hero-card:-webkit-full-screen .countdown-watchers,
.countdown-hero-card:fullscreen .countdown-hero-copy h2,
.countdown-hero-card:-webkit-full-screen .countdown-hero-copy h2 {
    color: #fff;
}

.countdown-hero-card:fullscreen .countdown-hero-copy p,
.countdown-hero-card:-webkit-full-screen .countdown-hero-copy p,
.countdown-hero-card:fullscreen .countdown-meta span,
.countdown-hero-card:-webkit-full-screen .countdown-meta span {
    color: rgba(255, 255, 255, 0.88);
}

.countdown-hero-card:fullscreen .countdown-watchers-avatars,
.countdown-hero-card:-webkit-full-screen .countdown-watchers-avatars,
.countdown-hero-card:fullscreen .countdown-watchers-pill,
.countdown-hero-card:-webkit-full-screen .countdown-watchers-pill {
    background: rgba(15, 23, 42, 0.44);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.countdown-hero-card:fullscreen .countdown-block,
.countdown-hero-card:-webkit-full-screen .countdown-block {
    border-color: color-mix(in srgb, var(--event-color) 48%, rgba(255, 255, 255, 0.18));
    background: rgba(15, 23, 42, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.8rem 2.4rem rgba(2, 6, 23, 0.28);
    backdrop-filter: blur(18px);
}

.countdown-hero-card:fullscreen .countdown-block strong,
.countdown-hero-card:-webkit-full-screen .countdown-block strong {
    color: #fff;
}

.countdown-hero-card:fullscreen .countdown-block span,
.countdown-hero-card:-webkit-full-screen .countdown-block span {
    color: rgba(255, 255, 255, 0.74);
}

.countdown-hero-card:fullscreen .countdown-fullscreen,
.countdown-hero-card:-webkit-full-screen .countdown-fullscreen {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(15, 23, 42, 0.5);
}

.countdown-hero-card:fullscreen .countdown-fullscreen .enter-fullscreen-icon,
.countdown-hero-card:-webkit-full-screen .countdown-fullscreen .enter-fullscreen-icon {
    display: none;
}

.countdown-hero-card:fullscreen .countdown-fullscreen .exit-fullscreen-icon,
.countdown-hero-card:-webkit-full-screen .countdown-fullscreen .exit-fullscreen-icon {
    display: block;
}

.countdown-heart.small {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2.2rem;
    height: 2.2rem;
    z-index: 3;
}

.countdown-hero-copy {
    width: min(100%, 42rem);
    min-width: 0;
}

.countdown-hero-copy h2 {
    margin: 0;
    color: #07101f;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 800;
    line-height: 1.02;
}

.countdown-hero-copy p {
    margin: 0.65rem 0 0;
    color: #172033;
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
}

.countdown-meta {
    margin-top: clamp(0.6rem, 1.2vw, 1.2rem);
    display: grid;
    gap: 0.55rem;
}

.countdown-meta span {
    gap: 0.55rem;
    color: #25324a;
    font-size: clamp(0.82rem, 1vw, 0.95rem);
}

.countdown-time-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    box-sizing: border-box;
}

.countdown-block {
    min-width: 0;
    min-height: clamp(5.35rem, 7.4vw, 6.55rem);
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--event-color) 34%, rgba(15, 23, 42, 0.14));
    border-radius: clamp(0.85rem, 1.4vw, 1.1rem);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 4px 16px rgba(37, 99, 235, 0.14);
    backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.countdown-seconds strong {
    animation: countdown-tick 1s steps(1, end) infinite;
}

@keyframes countdown-tick {
    0% { opacity: 1; transform: translateY(0); }
    49% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.55; transform: translateY(-4px); }
    51% { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); }
}

.countdown-block strong {
    color: #07101f;
    font-size: clamp(1.85rem, 4.3vw, 3.05rem);
    line-height: 0.95;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
    transition: transform 0.1s ease;
}

.countdown-block span {
    color: #42526c;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

.countdown-time-grid i {
    color: color-mix(in srgb, var(--event-color) 62%, #1e293b);
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-style: normal;
    font-weight: 800;
    text-align: center;
    line-height: 1;
    animation: countdown-colon-blink 1s ease-in-out infinite;
}

@keyframes countdown-colon-blink {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0.3; }
    100% { opacity: 1; }
}

.countdown-live-message {
    grid-column: 1 / -1;
    margin: 0.35rem 0 0;
    color: #fff;
}

.countdown-hero-actions {
    flex-wrap: wrap;
    gap: clamp(0.5rem, 1vw, 0.85rem);
}

.countdown-primary-button,
.countdown-secondary-button {
    min-height: 2.8rem;
    padding: 0 1rem;
    border-radius: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.countdown-primary-button {
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 76%, transparent);
    color: var(--accent-contrast);
    background: linear-gradient(135deg, var(--countdown-primary), var(--countdown-secondary));
    box-shadow: 0 0.5rem 1.4rem color-mix(in srgb, var(--countdown-primary) 24%, transparent);
}

.countdown-primary-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--countdown-secondary), var(--countdown-primary));
    box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--countdown-primary) 32%, transparent);
}

.countdown-primary-button:active {
    transform: translateY(0);
    box-shadow: 0 0.3rem 0.8rem color-mix(in srgb, var(--countdown-primary) 20%, transparent);
}

.countdown-secondary-button {
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 22%, var(--border-soft));
    color: var(--accent-hover);
    background: color-mix(in srgb, var(--countdown-primary) 10%, var(--bg-surface-strong));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

.countdown-secondary-button:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--countdown-primary) 16%, var(--bg-surface-strong));
}

.countdown-secondary-button:active {
    transform: translateY(0);
}

.countdown-secondary-button.danger {
    color: var(--countdown-danger);
    border-color: color-mix(in srgb, var(--countdown-danger) 32%, var(--border-soft));
    background: color-mix(in srgb, var(--countdown-danger) 8%, var(--bg-surface-strong));
}

.countdown-secondary-button.coming-soon {
    opacity: 0.72;
    cursor: default;
}

.countdown-soon-pill {
    padding: 0.12rem 0.4rem;
    border-radius: 0.3rem;
    color: #fff7d6;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-warning) 62%, rgba(120, 53, 15, 0.22)),
            color-mix(in srgb, #facc15 56%, rgba(133, 77, 14, 0.18))
        );
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1px solid color-mix(in srgb, var(--countdown-warning) 42%, rgba(255, 255, 255, 0.16));
    box-shadow:
        0 0.3rem 0.7rem color-mix(in srgb, var(--countdown-warning) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.countdown-secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.countdown-primary-button.full {
    width: 100%;
}

.countdown-popular {
    padding: clamp(1rem, 1.7vw, 1.35rem);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.countdown-section-head {
    margin-bottom: clamp(0.75rem, 1.2vw, 1.15rem);
}

.countdown-section-tools {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.countdown-carousel-button {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 22%, var(--border-soft));
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--countdown-primary) 8%, var(--bg-surface-strong));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

.countdown-carousel-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--countdown-primary) 42%, var(--border-soft));
    background: color-mix(in srgb, var(--countdown-primary) 14%, var(--bg-surface-strong));
}

.countdown-carousel-button:disabled {
    opacity: 0.46;
    color: var(--text-muted);
    cursor: default;
}

.countdown-carousel-button svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.countdown-idea-carousel {
    overflow: hidden;
}

.countdown-idea-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 15.5rem);
    gap: 1rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.15rem;
}

.countdown-idea-row::-webkit-scrollbar {
    display: none;
}

.countdown-idea-card {
    --event-color: var(--countdown-primary);
    position: relative;
    min-width: 0;
    width: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 0.9rem;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    scroll-snap-align: start;
}

.countdown-idea-link {
    position: relative;
    z-index: 1;
    display: block;
    color: inherit;
    text-decoration: none;
}

.countdown-idea-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--event-color) 24%, rgba(0,0,0,0.28));
    border-color: color-mix(in srgb, var(--event-color) 48%, transparent);
}

.countdown-idea-card.traffic-priority {
    border-color: color-mix(in srgb, #f97316 58%, var(--border-soft));
    box-shadow:
        0 0 0 1px color-mix(in srgb, #f97316 20%, transparent),
        0 0.8rem 2rem rgba(249, 115, 22, 0.16);
}

.countdown-idea-image {
    min-height: clamp(6rem, 10vw, 9rem);
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    background-color: #0f172a;
    background-image:
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--event-color) 45%, transparent), transparent 38%),
        linear-gradient(135deg, color-mix(in srgb, var(--event-color) 36%, #0f172a), #020617);
    position: relative;
    overflow: hidden;
}

.countdown-idea-image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.countdown-traffic-pill {
    position: absolute;
    left: 0.7rem;
    bottom: 0.65rem;
    z-index: 2;
    padding: 0.28rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: #fff7ed;
    background: rgba(124, 45, 18, 0.88);
    box-shadow: 0 0.45rem 1rem rgba(67, 20, 7, 0.32);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    backdrop-filter: blur(8px);
}

.countdown-idea-copy {
    padding: clamp(0.55rem, 1vw, 0.9rem);
    display: grid;
    gap: 0.35rem;
}

.countdown-idea-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.countdown-idea-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.countdown-days-badge {
    padding: 0.34rem 0.58rem;
    border-radius: 0.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--countdown-primary), var(--countdown-secondary));
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.countdown-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    padding: clamp(1rem, 4vw, 2rem);
    display: grid;
    place-items: center;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(16px);
}

.countdown-editor-sheet {
    position: relative;
    width: min(100%, 34rem);
    max-height: min(92dvh, 56rem);
    padding: clamp(1.2rem, 3vw, 2rem);
    border-radius: clamp(1rem, 1.8vw, 1.5rem);
    display: grid;
    gap: 1rem;
    overflow-y: auto;
}

.countdown-editor-sheet h2 {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.countdown-editor-icon {
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--countdown-primary), var(--countdown-secondary));
    box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--countdown-secondary) 28%, transparent);
}

.countdown-editor-icon svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.countdown-editor-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--text-primary);
    background: var(--bg-surface);
}

.countdown-form,
.countdown-form label {
    display: grid;
    gap: 0.5rem;
}

.countdown-form {
    gap: 0.9rem;
}

.countdown-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.countdown-form label > span,
.countdown-chip-field legend,
.countdown-color-field legend {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.countdown-form input,
.countdown-form select,
.countdown-form textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.7rem;
    color: var(--text-primary);
    background: var(--bg-surface);
}

.countdown-form textarea {
    min-height: 6rem;
    padding-top: 0.85rem;
    resize: vertical;
}

.countdown-chip-field,
.countdown-color-field {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    display: grid;
    gap: 0.55rem;
}

.countdown-chip-field div,
.countdown-color-field div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.countdown-chip-field label {
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    color: var(--text-primary);
    background: var(--bg-surface);
}

.countdown-chip-field label.selected {
    border-color: color-mix(in srgb, var(--countdown-primary) 70%, transparent);
    color: var(--accent);
    background: color-mix(in srgb, var(--countdown-primary) 12%, var(--bg-surface-strong));
}

.countdown-chip-field input,
.countdown-color-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.countdown-color-field label {
    --swatch: var(--countdown-primary);
    width: 2.85rem;
    height: 2.85rem;
    border: 2px solid transparent;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--swatch);
}

.countdown-color-field label.selected {
    border-color: #fff;
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--swatch) 44%, transparent);
}

.countdown-toast {
    position: fixed;
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    z-index: 1300;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--countdown-primary) 42%, transparent);
    border-radius: 0.75rem;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .countdown-page {
    background: var(--bg-page-gradient);
}

:root[data-theme="light"] .countdown-hero-overlay {
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.08), rgba(2, 6, 23, 0.18) 58%, rgba(2, 6, 23, 0.48)),
        linear-gradient(90deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.82) 28%, rgba(2, 6, 23, 0.58) 50%, rgba(2, 6, 23, 0.14) 76%, rgba(2, 6, 23, 0.04) 100%);
}

:root[data-theme="light"] .countdown-hero-card {
    border-color: rgba(15, 23, 42, 0.22);
    box-shadow:
        0 1.35rem 3rem rgba(15, 23, 42, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.42);
}

:root[data-theme="light"] .countdown-hero-card::before {
    background:
        radial-gradient(circle at 78% 17%, rgba(255, 196, 97, 0.2) 0 4%, transparent 4.3%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.02) 0%, rgba(2, 6, 23, 0.36) 100%);
    opacity: 1;
}

:root[data-theme="light"] .countdown-hero-copy h2 {
    color: #fff;
    text-shadow: 0 0.2rem 1.4rem rgba(2, 6, 23, 0.34);
}

:root[data-theme="light"] .countdown-hero-copy p {
    color: rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .countdown-meta span {
    color: rgba(255, 255, 255, 0.78);
}

:root[data-theme="light"] .countdown-time-grid {
    width: min(100%, 52rem);
    justify-self: start;
}

:root[data-theme="light"] .countdown-block {
    border-color: color-mix(in srgb, var(--event-color) 52%, rgba(255, 255, 255, 0.2));
    background: rgba(7, 12, 28, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0.8rem 2rem rgba(2, 6, 23, 0.22);
    backdrop-filter: blur(16px);
}

:root[data-theme="light"] .countdown-block strong {
    color: #fff;
}

:root[data-theme="light"] .countdown-block span {
    color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] .countdown-time-grid i {
    color: color-mix(in srgb, var(--event-color) 78%, #fff);
}

:root[data-theme="light"] .countdown-watchers {
    color: rgba(255, 255, 255, 0.88);
}

:root[data-theme="light"] .countdown-watchers-avatars,
:root[data-theme="light"] .countdown-watchers-pill {
    border-color: color-mix(in srgb, var(--event-color) 32%, rgba(255, 255, 255, 0.16));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color) 16%, rgba(15, 23, 42, 0.8)),
            rgba(2, 6, 23, 0.7)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.45rem 1.2rem rgba(2, 6, 23, 0.18);
    backdrop-filter: blur(14px);
}

:root[data-theme="light"] .countdown-watcher-avatar {
    border-color: rgba(15, 23, 42, 0.78);
}

:root[data-theme="light"] .countdown-card-pill {
    color: #eff6ff;
    border-color: color-mix(in srgb, var(--event-color, var(--countdown-primary)) 36%, rgba(255, 255, 255, 0.22));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color, var(--countdown-secondary)) 42%, rgba(30, 41, 59, 0.78)),
            color-mix(in srgb, var(--event-color, var(--countdown-primary)) 28%, rgba(15, 23, 42, 0.84))
        );
}

:root[data-theme="light"] .countdown-heart,
:root[data-theme="light"] .countdown-fullscreen {
    color: #fff;
    border-color: color-mix(in srgb, var(--event-color) 32%, rgba(255, 255, 255, 0.16));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color) 16%, rgba(15, 23, 42, 0.82)),
            rgba(2, 6, 23, 0.72)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.45rem 1.2rem rgba(2, 6, 23, 0.2);
    backdrop-filter: blur(14px);
}

:root[data-theme="light"] .countdown-heart.active,
:root[data-theme="light"] .countdown-heart:hover {
    color: #fff1f2;
    border-color: rgba(251, 113, 133, 0.56);
    background: linear-gradient(135deg, rgba(190, 24, 93, 0.94), rgba(136, 19, 55, 0.92));
    box-shadow:
        0 0.55rem 1.3rem rgba(190, 24, 93, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root[data-theme="light"] .countdown-fullscreen:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--event-color) 58%, rgba(255, 255, 255, 0.22));
    background: color-mix(in srgb, var(--event-color) 18%, rgba(7, 12, 28, 0.84));
}

:root[data-theme="light"] .countdown-badge {
    border-color: color-mix(in srgb, var(--event-color) 58%, rgba(255, 255, 255, 0.18));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color) 74%, #7c2d12),
            color-mix(in srgb, var(--event-color) 50%, #431407)
        );
    box-shadow:
        0 0.55rem 1.4rem color-mix(in srgb, var(--event-color) 24%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

:root[data-theme="light"] .countdown-badge.trending {
    border-color: rgba(251, 146, 60, 0.58);
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.98), rgba(124, 45, 18, 0.96));
    box-shadow:
        0 0.55rem 1.4rem rgba(249, 115, 22, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-theme="light"] .countdown-hero-card .countdown-primary-button {
    border-color: color-mix(in srgb, var(--event-color) 76%, rgba(255, 255, 255, 0.22));
    color: #fff;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color) 82%, #c2410c),
            color-mix(in srgb, var(--event-color) 58%, #7c2d12)
        );
    box-shadow:
        0 0.65rem 1.6rem color-mix(in srgb, var(--event-color) 24%, rgba(2, 6, 23, 0.22)),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

:root[data-theme="light"] .countdown-hero-card .countdown-primary-button:hover {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color) 92%, #ea580c),
            color-mix(in srgb, var(--event-color) 68%, #9a3412)
        );
}

:root[data-theme="light"] .countdown-hero-card .countdown-secondary-button {
    border-color: color-mix(in srgb, var(--event-color) 34%, rgba(255, 255, 255, 0.16));
    color: rgba(255, 255, 255, 0.92);
    background: rgba(7, 12, 28, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

:root[data-theme="light"] .countdown-hero-card .countdown-secondary-button:hover {
    border-color: color-mix(in srgb, var(--event-color) 58%, rgba(255, 255, 255, 0.2));
    color: #fff;
    background: color-mix(in srgb, var(--event-color) 14%, rgba(7, 12, 28, 0.84));
}

:root[data-theme="light"] .countdown-hero-card .countdown-soon-pill {
    border-color: color-mix(in srgb, var(--event-color) 48%, rgba(255, 255, 255, 0.16));
    color: #fff7ed;
    background: color-mix(in srgb, var(--event-color) 52%, rgba(67, 20, 7, 0.78));
}

:root[data-theme="dark"] .countdown-panel,
:root[data-theme="dark"] .countdown-popular,
:root[data-theme="dark"] .countdown-editor-sheet,
:root[data-theme="dark"] .countdown-idea-card {
    background: rgba(8, 17, 34, 0.86);
    border-color: rgba(96, 165, 250, 0.18);
}

:root[data-theme="dark"] .countdown-event-row,
:root[data-theme="dark"] .countdown-form input,
:root[data-theme="dark"] .countdown-form select,
:root[data-theme="dark"] .countdown-form textarea,
:root[data-theme="dark"] .countdown-chip-field label {
    background: rgba(8, 17, 34, 0.72);
    border-color: rgba(96, 165, 250, 0.18);
}

:root[data-theme="dark"] .countdown-hero-card {
    box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, 0.34);
}

@media (max-width: 1250px) {
    .countdown-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .countdown-time-grid i {
        display: none;
    }
}

@media (max-width: 1100px) {
}

@media (max-width: 960px) {
    .countdown-shell {
        padding-top: 7.5rem;
    }

    .countdown-heading {
        text-align: left;
    }

    .countdown-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .countdown-sidebar {
        order: 2;
    }

    .countdown-main {
        order: 1;
    }

    .countdown-hero-copy {
        width: min(100%, 34rem);
    }

    .countdown-hero-card {
        min-height: clamp(28rem, 60vw, 38rem);
    }

    .countdown-hero-overlay {
        min-height: inherit;
    }

    .countdown-watchers {
        align-items: center;
        max-width: 14rem;
    }

    .countdown-hero-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .countdown-primary-button,
    .countdown-secondary-button {
        width: 100%;
        min-width: 0;
        padding-inline: 0.8rem;
    }

}

@media (max-width: 820px) and (min-width: 521px) {
    .countdown-shell {
        padding-top: 10.25rem;
    }
}

@media (max-width: 750px) {
    .countdown-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .countdown-time-grid i {
        display: none;
    }

    .countdown-hero-card {
        min-height: clamp(30rem, 70vw, 40rem);
    }

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

    .countdown-hero-copy h2 {
        font-size: clamp(1.9rem, 6vw, 2.7rem);
    }
}

@media (max-width: 640px) {
    .countdown-page,
    .countdown-shell {
        width: 100dvw;
        max-width: 100dvw;
    }

    .countdown-layout,
    .countdown-main,
    .countdown-sidebar,
    .countdown-panel,
    .countdown-popular {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .countdown-shell {
        padding: 10.25rem 0.85rem 0.85rem;
        overflow-x: hidden;
    }

    .countdown-heading {
        text-align: left;
        grid-template-columns: minmax(0, 1fr);
    }

    .countdown-heading h1 {
        font-size: clamp(1.85rem, 10vw, 2.35rem);
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .countdown-heading p {
        margin-inline: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .countdown-hero-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 1.05rem;
    }

    .countdown-hero-overlay {
        width: 100%;
        min-height: inherit;
        padding: 1rem;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.7), rgba(239, 246, 255, 0.92) 48%, rgba(248, 250, 252, 0.72));
    }

    .countdown-hero-overlay > * {
        max-width: 100%;
        min-width: 0;
    }

    .countdown-hero-body {
        width: 100%;
    }

    .countdown-hero-top {
        align-items: flex-start;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .countdown-badge {
        justify-self: start;
    }

    .countdown-watchers {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.45rem;
        max-width: none;
        width: 100%;
        justify-content: flex-start;
    }

    .countdown-watchers-avatars,
    .countdown-watchers-pill,
    .countdown-heart,
    .countdown-fullscreen {
        align-self: center;
    }

    .countdown-hero-copy h2 {
        font-size: clamp(1.65rem, 8vw, 2.15rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .countdown-time-grid {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem;
    }

    .countdown-time-grid i {
        display: none !important;
    }

    .countdown-block {
        min-width: 0;
        min-height: 5.2rem;
        padding: 0.55rem 0.35rem;
    }

    .countdown-block strong {
        font-size: clamp(1.65rem, 8vw, 2.25rem);
    }

    .countdown-block span {
        font-size: 0.68rem;
    }

    .countdown-hero-actions {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .countdown-primary-button,
    .countdown-secondary-button {
        min-width: 0;
        width: 100%;
        padding-inline: 0.65rem;
    }

    .countdown-idea-row {
        grid-auto-columns: minmax(15.5rem, 84vw);
    }

    .countdown-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .countdown-modal-backdrop {
        padding: 0;
        align-items: stretch;
    }

    .countdown-editor-sheet {
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }
}

@media (max-width: 520px) {
    .countdown-shell {
        padding-top: 4.85rem;
    }
}

@media (max-width: 420px) {
    .countdown-hero-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .countdown-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem;
    }

    .countdown-block strong {
        font-size: clamp(1.5rem, 12vw, 2rem);
    }

    .countdown-block span {
        font-size: 0.62rem;
    }
}

:root[data-theme="dark"] .countdown-hero-overlay {
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.28) 70%, rgba(2, 6, 23, 0.22));
}

:root[data-theme="dark"] .countdown-watchers {
    color: rgba(255, 255, 255, 0.88);
}

:root[data-theme="dark"] .countdown-watchers-avatars,
:root[data-theme="dark"] .countdown-watchers-pill {
    border-color: color-mix(in srgb, var(--countdown-primary) 26%, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 24%, rgba(15, 23, 42, 0.74)),
            color-mix(in srgb, var(--countdown-primary) 18%, rgba(2, 6, 23, 0.82))
        );
    box-shadow:
        0 0.45rem 1rem color-mix(in srgb, var(--countdown-primary) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .countdown-card-pill {
    border-color: color-mix(in srgb, var(--event-color, var(--countdown-primary)) 28%, rgba(255, 255, 255, 0.14));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--event-color, var(--countdown-secondary)) 32%, rgba(15, 23, 42, 0.8)),
            color-mix(in srgb, var(--event-color, var(--countdown-primary)) 24%, rgba(2, 6, 23, 0.84))
        );
}

:root[data-theme="dark"] .countdown-watcher-avatar {
    border-color: rgba(15, 23, 42, 0.78);
}

:root[data-theme="dark"] .countdown-heart {
    color: #fff;
    border-color: color-mix(in srgb, var(--countdown-primary) 24%, rgba(255, 255, 255, 0.16));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 24%, rgba(15, 23, 42, 0.74)),
            color-mix(in srgb, var(--countdown-primary) 18%, rgba(2, 6, 23, 0.8))
        );
}

:root[data-theme="dark"] .countdown-fullscreen {
    color: #fff;
    border-color: color-mix(in srgb, var(--countdown-primary) 24%, rgba(255, 255, 255, 0.16));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--countdown-secondary) 24%, rgba(15, 23, 42, 0.74)),
            color-mix(in srgb, var(--countdown-primary) 18%, rgba(2, 6, 23, 0.8))
        );
}

:root[data-theme="dark"] .countdown-carousel-button {
    color: #dbeafe;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.52);
}

:root[data-theme="dark"] .countdown-carousel-button:hover:not(:disabled) {
    border-color: rgba(129, 140, 248, 0.38);
    background: rgba(30, 41, 59, 0.76);
}

:root[data-theme="dark"] .countdown-hero-copy h2 {
    color: #fff;
}

:root[data-theme="dark"] .countdown-hero-copy p {
    color: rgba(255, 255, 255, 0.9);
}

:root[data-theme="dark"] .countdown-meta span {
    color: rgba(255, 255, 255, 0.82);
}

:root[data-theme="dark"] .countdown-block {
    border-color: color-mix(in srgb, var(--event-color) 48%, rgba(255, 255, 255, 0.16));
    background: rgba(7, 12, 32, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .countdown-block strong {
    color: #fff;
}

:root[data-theme="dark"] .countdown-block span {
    color: rgba(255, 255, 255, 0.72);
}

:root[data-theme="dark"] .countdown-time-grid i {
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
    :root[data-theme="light"] .countdown-hero-overlay {
        background:
            linear-gradient(180deg, rgba(2, 6, 23, 0.28) 0%, rgba(2, 6, 23, 0.74) 34%, rgba(2, 6, 23, 0.94) 76%, rgba(2, 6, 23, 0.96) 100%);
    }

    :root[data-theme="light"] .countdown-time-grid {
        width: 100%;
    }

    :root[data-theme="dark"] .countdown-hero-overlay {
        background: linear-gradient(180deg, rgba(2, 6, 23, 0.2), rgba(2, 6, 23, 0.92) 48%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .countdown-theme-animation {
        display: none;
    }

    .countdown-page *,
    .countdown-page *::before,
    .countdown-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Multi Clock compact site-aligned pass: keeps the mockup's density while matching ClockHorizon. */
.multi-clock-page {
    min-height: var(--page-vh);
    color: #172033;
    background: #e8eef4;
    overflow-x: clip;
}

.multi-clock-page .multi-clock-shell,
.multi-clock-page .multi-clock-shell * {
    letter-spacing: 0;
}

.multi-clock-page .zones-section,
:root[data-theme="dark"] .multi-clock-page .zones-section {
    min-height: var(--page-vh);
    padding: calc(var(--header-h) + clamp(1.25rem, 3svh, 2.25rem)) var(--edge-x) clamp(2.25rem, 5svh, 4rem);
    background-image:
        linear-gradient(90deg, rgba(247, 250, 253, 0.78) 0%, rgba(239, 244, 249, 0.6) 44%, rgba(59, 79, 101, 0.36) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(13, 30, 49, 0.28)),
        url("/images/hero-misty-lake.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.multi-clock-page .multi-clock-shell {
    position: relative;
    z-index: 1;
    width: min(100%, var(--hero-inline));
    margin: 0 auto;
}

.multi-clock-page .multi-clock-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.multi-clock-page .multi-clock-heading-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.multi-clock-page .multi-clock-heading .eyebrow {
    margin: 0 0 0.45rem;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.1;
    text-transform: uppercase;
}

.multi-clock-page .multi-clock-heading h1 {
    margin: 0;
    color: #111827;
    font-size: 2.35rem;
    font-weight: 720;
    line-height: 1.05;
}

.multi-clock-page .multi-clock-heading p:last-child {
    max-width: 34rem;
    margin: 0.55rem 0 0;
    color: #435066;
    font-size: 1rem;
    line-height: 1.45;
}

.multi-clock-page .tracked-city-count {
    min-height: 2.3rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(88, 105, 126, 0.14);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #40516a;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
    backdrop-filter: blur(12px);
}

.multi-clock-page .multi-clock-icon-button,
.multi-clock-page .multi-clock-fullscreen-button,
.multi-clock-page .live-status {
    min-height: 2.5rem;
    border: 1px solid rgba(85, 103, 124, 0.16);
    color: #253043;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.9rem 2rem rgba(40, 58, 80, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
}

.multi-clock-page .multi-clock-icon-button {
    width: 2.5rem;
    padding: 0;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #40516a;
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.multi-clock-page .multi-clock-icon-button:hover {
    transform: translateY(-1px);
    border-color: rgba(11, 125, 240, 0.28);
    color: var(--blue);
    background: rgba(255, 255, 255, 0.88);
}

.multi-clock-page .multi-clock-add-button span {
    font-size: 1.35rem;
    font-weight: 520;
    line-height: 1;
}

.multi-clock-page .multi-clock-fullscreen-button svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.multi-clock-page .multi-clock-fullscreen-button .exit-fullscreen-icon {
    display: none;
}

.multi-clock-page .live-status {
    padding: 0 0.78rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    color: #526074;
    font-size: 0.78rem;
    font-weight: 700;
}

.multi-clock-page .live-status > span {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.12);
}

.multi-clock-page .city-grid {
    --city-card-height-fallback: clamp(13.45rem, 29svh, 15.5rem);
    width: 100%;
    margin: clamp(0.85rem, 1.6svh, 1.15rem) 0 0;
    grid-template-columns: repeat(var(--multi-clock-columns, 4), minmax(0, 1fr));
    grid-auto-rows: var(--city-card-height, var(--city-card-height-fallback));
    gap: var(--multi-clock-gap, clamp(0.75rem, 1.2vw, 1rem));
}

.multi-clock-page .city-card,
:root[data-theme="dark"] .multi-clock-page .city-card {
    position: relative;
    min-height: var(--city-card-height, var(--city-card-height-fallback, clamp(13.45rem, 29svh, 15.5rem)));
    border: 1px solid rgba(77, 93, 113, 0.1);
    border-radius: 1.08rem;
    overflow: hidden;
    color: #172033;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14) 52%, rgba(232, 241, 250, 0.18)),
        linear-gradient(135deg, color-mix(in srgb, var(--city-accent, var(--blue)) 10%, transparent), transparent 64%);
    box-shadow:
        0 1.1rem 2.5rem rgba(40, 58, 80, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.multi-clock-page .city-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 42%),
        linear-gradient(315deg, color-mix(in srgb, var(--city-accent, var(--blue)) 7%, transparent), transparent 54%);
    opacity: 0.78;
    pointer-events: none;
}

.multi-clock-page .city-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    width: auto;
    height: 0.16rem;
    border-radius: 1.08rem 1.08rem 0 0;
    background: color-mix(in srgb, var(--city-accent, var(--blue)) 58%, transparent);
    filter: none;
    opacity: 0.58;
    pointer-events: none;
}

.multi-clock-page .city-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--city-accent) 30%, rgba(77, 93, 113, 0.14));
    box-shadow:
        0 1.35rem 3rem rgba(40, 58, 80, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14);
}

.multi-clock-page .city-card.selected,
:root[data-theme="dark"] .multi-clock-page .city-card.selected {
    border-color: color-mix(in srgb, var(--city-accent) 42%, rgba(11, 125, 240, 0.22));
    box-shadow:
        0 1.2rem 2.8rem color-mix(in srgb, var(--city-accent) 12%, rgba(40, 58, 80, 0.1)),
        inset 0 0 0 1px color-mix(in srgb, var(--city-accent) 14%, transparent);
}

.multi-clock-page .city-select {
    position: relative;
    z-index: 1;
    min-height: var(--city-card-height, var(--city-card-height-fallback, clamp(13.45rem, 29svh, 15.5rem)));
    padding: var(--multi-clock-card-padding, 1rem);
    display: flex;
    flex-direction: column;
    gap: 0;
    color: inherit;
    background: transparent;
}

.multi-clock-page .city-select:hover,
.multi-clock-page .city-card.selected .city-select,
:root[data-theme="dark"] .multi-clock-page .city-select:hover,
:root[data-theme="dark"] .multi-clock-page .city-card.selected .city-select {
    background: transparent;
}

.multi-clock-page .city-select:focus-visible,
.multi-clock-page .multi-clock-icon-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.multi-clock-page .city-card-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--multi-clock-clock-size, minmax(6.8rem, 8.4rem));
    align-items: start;
    gap: var(--multi-clock-card-gap, 0.64rem);
}

.multi-clock-page .city-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.multi-clock-page .city-icon-badge {
    width: var(--multi-clock-icon-size, 2.8rem);
    height: var(--multi-clock-icon-size, 2.8rem);
    border: 1px solid color-mix(in srgb, var(--city-accent, var(--blue)) 58%, rgba(255, 255, 255, 0.28));
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: color-mix(in srgb, var(--city-accent, var(--blue)) 76%, #1f2937);
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.62), transparent 42%),
        color-mix(in srgb, var(--city-accent, var(--blue)) 12%, rgba(255, 255, 255, 0.28));
    box-shadow:
        0 0 0 0.24rem color-mix(in srgb, var(--city-accent, var(--blue)) 10%, transparent),
        0 0.9rem 1.8rem color-mix(in srgb, var(--city-accent, var(--blue)) 18%, rgba(23, 32, 51, 0.08)),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    line-height: 1;
}

.multi-clock-page .city-icon-badge svg {
    width: 58%;
    height: 58%;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0.2rem 0.36rem color-mix(in srgb, currentColor 28%, transparent));
}

.multi-clock-page .city-clock-face,
:root[data-theme="dark"] .multi-clock-page .city-clock-face {
    position: relative;
    width: var(--multi-clock-clock-size, 100%);
    max-width: var(--multi-clock-clock-size, 7.85rem);
    aspect-ratio: 1;
    justify-self: end;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 50%;
    background:
        radial-gradient(circle at 48% 45%, rgba(45, 60, 83, 0.9), rgba(18, 29, 47, 0.94) 48%, rgba(6, 14, 28, 0.98) 100%),
        repeating-conic-gradient(from -1deg, rgba(226, 232, 240, 0.44) 0 1deg, transparent 1deg 6deg);
    box-shadow:
        0 0.9rem 1.65rem rgba(8, 16, 31, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 1.2rem rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
}

.multi-clock-page .city-clock-face::before {
    content: "";
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 56%, rgba(255, 255, 255, 0.04) 57%, transparent 68%);
}

.multi-clock-page .clock-number {
    position: absolute;
    z-index: 1;
    width: calc(var(--multi-clock-number-size, 0.66rem) * 1.75);
    color: #f8fafc;
    font-size: var(--multi-clock-number-size, 0.66rem);
    font-weight: 760;
    line-height: 1;
    opacity: 0;
    text-align: center;
    transform: translate(-50%, -50%);
}

.multi-clock-page .clock-number:nth-child(3),
.multi-clock-page .clock-number:nth-child(6),
.multi-clock-page .clock-number:nth-child(9),
.multi-clock-page .clock-number:nth-child(12) {
    opacity: 1;
}

.multi-clock-page .city-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 3;
    border-radius: 999px;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 1px 0.12rem rgba(20, 35, 52, 0.16));
}

.multi-clock-page .city-clock-hour,
:root[data-theme="dark"] .multi-clock-page .city-clock-hour {
    width: var(--multi-clock-hour-hand-width, 0.22rem);
    height: 28%;
    background: var(--city-accent);
    box-shadow: 0 0 0.55rem color-mix(in srgb, var(--city-accent) 42%, transparent);
}

.multi-clock-page .city-clock-minute,
:root[data-theme="dark"] .multi-clock-page .city-clock-minute {
    width: var(--multi-clock-minute-hand-width, 0.16rem);
    height: 38%;
    background: #f8fafc;
}

.multi-clock-page .city-clock-second {
    width: var(--multi-clock-second-hand-width, 0.085rem);
    height: 41%;
    background: color-mix(in srgb, var(--city-accent) 78%, #f8fafc);
    opacity: 0.74;
}

.multi-clock-page .city-clock-pin,
:root[data-theme="dark"] .multi-clock-page .city-clock-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: var(--multi-clock-pin-size, 0.54rem);
    height: var(--multi-clock-pin-size, 0.54rem);
    transform: translate(-50%, -50%);
    border: 2px solid rgba(248, 250, 252, 0.88);
    border-radius: 50%;
    background: var(--city-accent);
    box-shadow: 0 0.25rem 0.7rem rgba(0, 0, 0, 0.24);
}

.multi-clock-page .city-summary {
    min-width: 0;
    margin-top: var(--multi-clock-summary-top, 0.95rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.multi-clock-page .city-summary strong {
    max-width: 100%;
    color: #172033;
    font-size: var(--multi-clock-city-size, 0.96rem);
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-clock-page .city-summary small {
    max-width: 100%;
    margin-top: 0.26rem;
    color: #526074;
    font-size: var(--multi-clock-country-size, 0.68rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-clock-page .city-card .offset-pill,
:root[data-theme="dark"] .multi-clock-page .city-card .offset-pill {
    min-height: 1.32rem;
    margin-top: 0.62rem;
    padding: 0 0.6rem;
    border: 1px solid color-mix(in srgb, var(--city-accent) 56%, rgba(255, 255, 255, 0.2));
    border-radius: 999px;
    color: color-mix(in srgb, var(--city-accent) 76%, #111827);
    background: color-mix(in srgb, var(--city-accent) 9%, rgba(255, 255, 255, 0.58));
    box-shadow:
        0 0 0.8rem color-mix(in srgb, var(--city-accent) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-size: var(--multi-clock-meta-size, 0.62rem);
    font-weight: 720;
}

.multi-clock-page .city-summary .city-difference {
    margin-top: 0.46rem;
    color: #64748b;
    font-size: var(--multi-clock-meta-size, 0.62rem);
    font-weight: 620;
}

.multi-clock-page .city-card-divider {
    width: 100%;
    height: 1px;
    margin: auto 0 0.88rem;
    display: block;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.08), rgba(100, 116, 139, 0.28), rgba(100, 116, 139, 0.08));
}

.multi-clock-page .city-time,
:root[data-theme="dark"] .multi-clock-page .city-time {
    width: auto;
    margin: 0;
    display: flex;
    align-items: baseline;
    color: #071431;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.multi-clock-page .city-time span,
:root[data-theme="dark"] .multi-clock-page .city-time span {
    color: #071431;
    font-size: var(--multi-clock-time-size, clamp(2.05rem, 3.6svh, 2.55rem));
    font-weight: 820;
    line-height: 0.9;
    letter-spacing: 0;
}

.multi-clock-page .city-card-meta {
    width: 100%;
    margin-top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.multi-clock-page .city-time-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.multi-clock-page .city-date,
:root[data-theme="dark"] .multi-clock-page .city-date {
    margin: 0.48rem 0 0;
    color: #53637c;
    font-size: 0.72rem;
    font-weight: 620;
    white-space: nowrap;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-select {
    padding: 0.82rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-card-main {
    align-items: start;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-summary small,
.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-summary .city-difference {
    display: none;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-card .offset-pill {
    min-height: 1.1rem;
    margin-top: 0.32rem;
    padding: 0 0.4rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-summary {
    margin-top: 0.56rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-card-divider {
    margin-bottom: 0.5rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-time span,
:root[data-theme="dark"] .multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-time span {
    font-size: var(--multi-clock-time-size, 1.875rem);
    line-height: 0.9;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="compact"] .city-card-meta {
    margin-top: 0;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-select {
    padding: 0.68rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-card-main {
    align-items: start;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-summary {
    margin-top: 0.42rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-summary small,
.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-summary .city-difference {
    display: none;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-card .offset-pill {
    min-height: 1rem;
    margin-top: 0.28rem;
    padding: 0 0.36rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-card-divider {
    margin-bottom: 0.36rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-card-meta {
    gap: 0.45rem;
}

.multi-clock-page .multi-clock-shell[data-multi-clock-density="ultra-compact"] .city-date {
    margin-top: 0.28rem;
    font-size: 0.66rem;
}

.multi-clock-page .daylight-icon {
    position: relative;
    width: var(--multi-clock-status-size, 2.15rem);
    height: var(--multi-clock-status-size, 2.15rem);
    border: 1px solid color-mix(in srgb, var(--city-accent, var(--blue)) 34%, rgba(255, 255, 255, 0.28));
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.54), transparent 42%),
        color-mix(in srgb, var(--city-accent, var(--blue)) 10%, rgba(255, 255, 255, 0.5));
    box-shadow:
        0 0.7rem 1.4rem color-mix(in srgb, var(--city-accent, var(--blue)) 13%, rgba(23, 32, 51, 0.08)),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.multi-clock-page .daylight-icon.sun {
    color: #f59e0b;
}

.multi-clock-page .daylight-icon.sun::before {
    content: "☀";
    font-size: calc(var(--multi-clock-status-size, 2.15rem) * 0.56);
    line-height: 1;
}

.multi-clock-page .daylight-icon.moon {
    color: #3b82f6;
}

.multi-clock-page .daylight-icon.moon::before {
    content: "☾";
    font-size: calc(var(--multi-clock-status-size, 2.15rem) * 0.68);
    line-height: 1;
}

.multi-clock-page .city-remove {
    top: 0.75rem;
    right: 0.75rem;
    bottom: auto;
    z-index: 4;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(100, 116, 139, 0.14);
    border-radius: 999px;
    color: #475569;
    background: rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
}

.multi-clock-page .city-remove:hover:not(:disabled) {
    color: var(--blue);
    background: rgba(255, 255, 255, 0.6);
    transform: none;
}

.multi-clock-page .city-remove svg {
    width: 0.82rem;
    height: 0.82rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.multi-clock-page .city-remove:disabled {
    opacity: 0.34;
}

:root[data-theme="dark"] .multi-clock-page {
    color: #e5edf8;
    background: #06111f;
}

:root[data-theme="dark"] .multi-clock-page .zones-section {
    background-image:
        linear-gradient(90deg, rgba(4, 12, 24, 0.86) 0%, rgba(9, 20, 36, 0.76) 48%, rgba(2, 8, 18, 0.7) 100%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.26), rgba(2, 6, 23, 0.66)),
        url("/images/hero-misty-lake.png");
}

:root[data-theme="dark"] .multi-clock-page .multi-clock-heading h1,
:root[data-theme="dark"] .multi-clock-page .city-summary strong {
    color: #f8fafc;
}

:root[data-theme="dark"] .multi-clock-page .multi-clock-heading p:last-child,
:root[data-theme="dark"] .multi-clock-page .tracked-city-count,
:root[data-theme="dark"] .multi-clock-page .multi-clock-icon-button,
:root[data-theme="dark"] .multi-clock-page .multi-clock-fullscreen-button,
:root[data-theme="dark"] .multi-clock-page .live-status,
:root[data-theme="dark"] .multi-clock-page .city-summary small,
:root[data-theme="dark"] .multi-clock-page .city-summary .city-difference,
:root[data-theme="dark"] .multi-clock-page .city-date {
    color: #b8c7db;
}

:root[data-theme="dark"] .multi-clock-page .tracked-city-count,
:root[data-theme="dark"] .multi-clock-page .multi-clock-icon-button,
:root[data-theme="dark"] .multi-clock-page .multi-clock-fullscreen-button,
:root[data-theme="dark"] .multi-clock-page .live-status {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .multi-clock-page .multi-clock-icon-button:hover {
    color: var(--accent-hover);
    background: rgba(15, 23, 42, 0.82);
}

:root[data-theme="dark"] .multi-clock-page .multi-clock-shell:fullscreen,
:root[data-theme="dark"] .multi-clock-page .multi-clock-shell:-webkit-full-screen {
    background-image:
        linear-gradient(90deg, rgba(4, 12, 24, 0.86) 0%, rgba(9, 20, 36, 0.76) 48%, rgba(2, 8, 18, 0.7) 100%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.26), rgba(2, 6, 23, 0.66)),
        url("/images/hero-misty-lake.png");
}

:root[data-theme="dark"] .multi-clock-page .city-card {
    border-color: rgba(190, 204, 222, 0.18);
    color: #e5edf8;
    background:
        linear-gradient(145deg, rgba(39, 53, 78, 0.5), rgba(30, 43, 66, 0.34) 54%, rgba(20, 32, 52, 0.36)),
        linear-gradient(135deg, color-mix(in srgb, var(--city-accent, var(--accent)) 8%, transparent), transparent 66%);
    box-shadow:
        0 1.1rem 2.6rem rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .multi-clock-page .city-card::after {
    border-color: rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 42%),
        linear-gradient(315deg, color-mix(in srgb, var(--city-accent, var(--accent)) 6%, transparent), transparent 54%);
    opacity: 0.9;
}

:root[data-theme="dark"] .multi-clock-page .city-icon-badge {
    color: color-mix(in srgb, var(--city-accent, var(--accent)) 70%, #f8fafc);
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.14), transparent 42%),
        color-mix(in srgb, var(--city-accent, var(--accent)) 14%, rgba(8, 18, 34, 0.5));
    box-shadow:
        0 0 0 0.24rem color-mix(in srgb, var(--city-accent, var(--accent)) 12%, transparent),
        0 0.9rem 1.8rem color-mix(in srgb, var(--city-accent, var(--accent)) 20%, rgba(0, 0, 0, 0.18)),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .multi-clock-page .city-clock-face {
    border-color: rgba(148, 163, 184, 0.24);
    background:
        radial-gradient(circle at 48% 45%, rgba(45, 60, 83, 0.88), rgba(18, 29, 47, 0.94) 48%, rgba(6, 14, 28, 0.98) 100%),
        repeating-conic-gradient(from -1deg, rgba(226, 232, 240, 0.42) 0 1deg, transparent 1deg 6deg);
    box-shadow:
        0 0.9rem 1.65rem rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 1.2rem rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .multi-clock-page .clock-number {
    color: #dce8f7;
}

:root[data-theme="dark"] .multi-clock-page .city-clock-hour,
:root[data-theme="dark"] .multi-clock-page .city-clock-minute {
    background: #f8fafc;
}

:root[data-theme="dark"] .multi-clock-page .city-clock-hour {
    background: var(--city-accent);
}

:root[data-theme="dark"] .multi-clock-page .city-clock-pin {
    border-color: #0f172a;
}

:root[data-theme="dark"] .multi-clock-page .city-card .offset-pill {
    border-color: color-mix(in srgb, var(--city-accent) 54%, rgba(148, 163, 184, 0.2));
    color: color-mix(in srgb, var(--city-accent) 64%, #f8fafc);
    background: color-mix(in srgb, var(--city-accent) 12%, rgba(15, 23, 42, 0.68));
}

:root[data-theme="dark"] .multi-clock-page .city-card-divider {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.03), rgba(148, 163, 184, 0.24), rgba(148, 163, 184, 0.03));
}

.multi-clock-page .multi-clock-shell:fullscreen,
.multi-clock-page .multi-clock-shell:-webkit-full-screen {
    width: min(100%, var(--page-vw));
    height: var(--page-vh);
    min-height: var(--page-vh);
    max-width: none;
    margin: 0;
    padding: clamp(1rem, 2.4svh, 1.6rem) var(--edge-x) clamp(1.5rem, 3svh, 2.4rem);
    overflow: auto;
    background-image:
        linear-gradient(90deg, rgba(247, 250, 253, 0.78) 0%, rgba(239, 244, 249, 0.6) 44%, rgba(59, 79, 101, 0.36) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(13, 30, 49, 0.28)),
        url("/images/hero-misty-lake.png");
    background-position: center;
    background-size: cover;
}

.multi-clock-page .multi-clock-shell:fullscreen .multi-clock-heading,
.multi-clock-page .multi-clock-shell:-webkit-full-screen .multi-clock-heading {
    justify-content: flex-end;
}

.multi-clock-page .multi-clock-shell:fullscreen .multi-clock-heading-copy,
.multi-clock-page .multi-clock-shell:-webkit-full-screen .multi-clock-heading-copy {
    display: none;
}

.multi-clock-page .multi-clock-shell:fullscreen .city-grid,
.multi-clock-page .multi-clock-shell:-webkit-full-screen .city-grid {
    margin-top: clamp(0.5rem, 1.2svh, 0.85rem);
}

.multi-clock-page .multi-clock-shell:fullscreen .multi-clock-fullscreen-button .enter-fullscreen-icon,
.multi-clock-page .multi-clock-shell:-webkit-full-screen .multi-clock-fullscreen-button .enter-fullscreen-icon {
    display: none;
}

.multi-clock-page .multi-clock-shell:fullscreen .multi-clock-fullscreen-button .exit-fullscreen-icon,
.multi-clock-page .multi-clock-shell:-webkit-full-screen .multi-clock-fullscreen-button .exit-fullscreen-icon {
    display: block;
}

:root[data-theme="dark"] .multi-clock-page .city-time,
:root[data-theme="dark"] .multi-clock-page .city-time span {
    color: #f8fafc;
}

:root[data-theme="dark"] .multi-clock-page .daylight-icon.moon {
    color: #93c5fd;
}

:root[data-theme="dark"] .multi-clock-page .daylight-icon {
    border-color: color-mix(in srgb, var(--city-accent, var(--accent)) 36%, rgba(148, 163, 184, 0.18));
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.12), transparent 42%),
        color-mix(in srgb, var(--city-accent, var(--accent)) 12%, rgba(15, 23, 42, 0.58));
    box-shadow:
        0 0.7rem 1.4rem color-mix(in srgb, var(--city-accent, var(--accent)) 18%, rgba(0, 0, 0, 0.18)),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .multi-clock-page .city-remove {
    border-color: rgba(148, 163, 184, 0.14);
    color: #9fb1ca;
    background: rgba(15, 23, 42, 0.36);
}

:root[data-theme="dark"] .multi-clock-page .city-remove:hover:not(:disabled) {
    color: var(--accent-hover);
    background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .picker-option {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.76);
}

:root[data-theme="dark"] .picker-option:hover {
    border-color: rgba(96, 165, 250, 0.38);
    background: rgba(19, 34, 56, 0.96);
}

:root[data-theme="dark"] .picker-option small,
:root[data-theme="dark"] .empty-state {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .picker-option > span:last-child {
    color: var(--accent-hover);
}

:root[data-theme="dark"] .search-box svg {
    stroke: var(--text-muted);
}

.multi-clock-page .city-picker {
    width: min(100%, 34rem);
    max-height: min(78svh, 38rem);
    border-radius: 0.75rem;
}

.multi-clock-page .picker-head {
    padding: 1rem 1rem 0.75rem;
    gap: 0.85rem;
}

.multi-clock-page .city-picker .eyebrow {
    margin: 0 0 0.32rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.multi-clock-page .city-picker h2 {
    margin: 0;
    font-size: clamp(1.15rem, 2.1svh, 1.35rem);
    font-weight: 720;
    line-height: 1.15;
}

.multi-clock-page .close-button {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.86rem;
}

.multi-clock-page .search-box {
    margin: 0 1rem 0.75rem;
}

.multi-clock-page .search-box svg {
    left: 0.9rem;
    width: 1rem;
    height: 1rem;
}

.multi-clock-page .search-box input {
    min-height: 2.45rem;
    padding: 0 0.9rem 0 2.55rem;
    font-size: 0.88rem;
    font-weight: 560;
}

.multi-clock-page .picker-list {
    max-height: min(23rem, 52svh);
    padding: 0 1rem 1rem;
    gap: 0.42rem;
}

.multi-clock-page .picker-option {
    min-height: 3.2rem;
    padding: 0.5rem 0.68rem;
    border-radius: 0.55rem;
    gap: 0.75rem;
}

.multi-clock-page .picker-option strong {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.16;
}

.multi-clock-page .picker-option small {
    margin-top: 0.16rem;
    font-size: var(--multi-clock-meta-size, 0.72rem);
    line-height: 1.18;
}

.multi-clock-page .picker-option > span:last-child {
    font-size: 0.76rem;
    font-weight: 720;
}

.multi-clock-page .empty-state {
    padding: 1.15rem 0;
    font-size: 0.88rem;
}

@media (max-width: 78rem) {
    .multi-clock-page .city-grid {
        --city-card-height-fallback: clamp(13.75rem, 30svh, 15.75rem);
        grid-template-columns: repeat(var(--multi-clock-columns, 2), minmax(0, 1fr));
    }

    .multi-clock-page .city-card-main {
        grid-template-columns: minmax(0, 1fr) var(--multi-clock-clock-size, minmax(7.2rem, 8.35rem));
    }

    .multi-clock-page .city-clock-face,
    :root[data-theme="dark"] .multi-clock-page .city-clock-face {
        width: var(--multi-clock-clock-size, 100%);
        max-width: var(--multi-clock-clock-size, 8.35rem);
    }
}

@media (max-width: 42rem) {
    .multi-clock-page .zones-section,
    :root[data-theme="dark"] .multi-clock-page .zones-section {
        padding: calc(var(--header-h) + 1.15rem) 1rem 2.5rem;
        background-attachment: scroll;
    }

    .multi-clock-page .multi-clock-shell {
        width: min(100%, 34rem);
    }

    .multi-clock-page .multi-clock-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .multi-clock-page .multi-clock-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .multi-clock-page .multi-clock-heading h1 {
        font-size: 2rem;
    }

    .multi-clock-page .live-status {
        display: none;
    }

    .multi-clock-page .city-grid {
        --city-card-height-fallback: 14.5rem;
        grid-template-columns: repeat(var(--multi-clock-columns, 1), minmax(0, 1fr));
    }

    .multi-clock-page .city-card-main {
        grid-template-columns: minmax(0, 1fr) var(--multi-clock-clock-size, minmax(6.85rem, 7.45rem));
    }

    .multi-clock-page .city-clock-face,
    :root[data-theme="dark"] .multi-clock-page .city-clock-face {
        width: var(--multi-clock-clock-size, 100%);
        max-width: var(--multi-clock-clock-size, 7.45rem);
    }

    .multi-clock-page .city-time span,
    :root[data-theme="dark"] .multi-clock-page .city-time span {
        font-size: var(--multi-clock-time-size, clamp(2rem, 4.2svh, 2.35rem));
    }
}

/* Presentation-only fullscreen timer layout after legacy timer layers. */
.timer-fullscreen-playback {
    display: none;
}

.timer-page.seo-enabled .timer-hero:fullscreen,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen {
    --timer-panel-width: min(96vw, 76rem);
    --timer-dial-size: clamp(24rem, min(57.6vw, 65.6svh), 46.4rem);
    padding: clamp(1rem, 2.5svh, 2rem);
    overflow: auto;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-shell,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-shell {
    width: var(--timer-panel-width);
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-console,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-console {
    width: auto;
    max-width: var(--timer-panel-width);
    max-height: none;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 2.6svh, 2rem);
    gap: 0;
    border-radius: 1.35rem;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-dial,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-dial {
    width: var(--timer-dial-size);
    margin: 0;
    justify-self: center;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-dial .timer-display strong,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-dial .timer-display strong {
    font-size: clamp(4.5rem, min(8.5vw, 10.5svh, calc(var(--timer-dial-size) * 0.16)), 8.5rem) !important;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-dial .timer-display,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-dial .timer-display {
    gap: clamp(0.85rem, 1.7svh, 1.35rem);
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-dial .timer-status,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-dial .timer-status {
    font-size: clamp(1rem, 1.9svh, 1.35rem);
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-dial .timer-duration-pill,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-dial .timer-duration-pill {
    min-height: clamp(2.6rem, 4.8svh, 3.5rem);
    padding: 0 clamp(1.1rem, 2.3svh, 1.8rem);
    font-size: clamp(1rem, 2svh, 1.3rem);
}

.timer-page.seo-enabled .timer-hero:fullscreen .duration-grid,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .duration-grid,
.timer-page.seo-enabled .timer-hero:fullscreen .timer-presets,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-presets,
.timer-page.seo-enabled .timer-hero:fullscreen .timer-actions,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-actions,
.timer-page.seo-enabled .timer-hero:fullscreen .timer-settings,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-settings {
    display: none;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-fullscreen-playback,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-fullscreen-playback {
    width: clamp(3rem, 5.5svh, 4.25rem);
    height: clamp(3rem, 5.5svh, 4.25rem);
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: rgba(96, 165, 250, 0.28);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22);
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-fullscreen-playback:disabled,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-fullscreen-playback:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.timer-page.seo-enabled .timer-hero:fullscreen .timer-fullscreen-playback svg,
.timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-fullscreen-playback svg {
    width: 46%;
    height: 46%;
    fill: currentColor;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.35;
}

@media (max-width: 900px) {
    .timer-page.seo-enabled .timer-hero:fullscreen,
    .timer-page.seo-enabled .timer-hero:-webkit-full-screen {
        --timer-panel-width: min(94vw, 34rem);
        --timer-dial-size: clamp(13.6rem, min(65.6vw, 49.6svh), 23.2rem);
    }

    .timer-page.seo-enabled .timer-hero:fullscreen .timer-console,
    .timer-page.seo-enabled .timer-hero:-webkit-full-screen .timer-console {
        padding: clamp(1rem, 2.5svh, 1.5rem);
    }
}