:root {
    color-scheme: light;
    --primary: #2f73ff;
    --primary-dark: #1e4fc4;
    --background: #f3f7fc;
    --surface: #ffffff;
    --surface-soft: #f6f9ff;
    --text-primary: #0f1f3a;
    --text-secondary: #64748b;
    --border: #dbe5f1;
    --shadow: 0 18px 42px rgba(30, 79, 196, 0.10);
    --radius-lg: 24px;
    --radius-md: 16px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 50% -10%, rgba(47, 115, 255, 0.10), transparent 36%), var(--background);
    color: var(--text-primary);
}

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

button,
a,
span {
    -webkit-tap-highlight-color: transparent;
}

.app-shell {
    min-height: 100vh;
}

.topbar {
    width: min(1480px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dfeaff;
    font-size: 25px;
}

.brand-copy {
    display: grid;
    gap: 3px;
}

.brand-copy strong {
    font-size: 22px;
    letter-spacing: -0.03em;
}

.brand-copy span {
    color: var(--text-secondary);
    font-size: 13px;
}

.icon-button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 19px;
    display: inline-grid;
    place-items: center;
}

.desktop-layout {
    width: min(1480px, calc(100% - 48px));
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
}

.sidebar {
    min-height: calc(100vh - 134px);
    padding: 22px 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, #142f5c 0%, #102754 100%);
    color: #e7efff;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 22px;
    font-size: 13px;
    font-weight: 700;
}

.mini-mark {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
}

.nav-list {
    display: grid;
    gap: 6px;
}

.nav-item {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    font-weight: 600;
}

.nav-item.is-active {
    background: linear-gradient(135deg, var(--primary), #2660df);
    box-shadow: 0 12px 26px rgba(47, 115, 255, 0.25);
}

.nav-item.is-disabled,
.mobile-nav-item.is-disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.nav-icon {
    width: 20px;
    text-align: center;
    font-size: 15px;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 24px;
}

.main-content {
    min-width: 0;
}

.page-heading {
    min-height: 82px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.page-heading h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.today-label {
    color: var(--text-secondary);
    font-size: 13px;
    text-align: right;
}

.clock-card {
    padding: clamp(22px, 4vw, 38px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.98));
    border: 1px solid rgba(219, 229, 241, 0.86);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.clock-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.clock-card-heading h2 {
    margin: 0;
    font-size: 19px;
}

.clock-location {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.status-pill {
    padding: 7px 11px;
    border-radius: 999px;
    background: #e7f8ef;
    color: #198754;
    font-size: 12px;
    font-weight: 800;
}

.digital-clock {
    margin: clamp(30px, 6vw, 62px) 0 32px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
}

#clock-time {
    font-size: clamp(60px, 11vw, 148px);
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 0.9;
}

.clock-period {
    color: var(--primary);
    font-size: clamp(20px, 2.5vw, 34px);
    font-weight: 800;
}

.clock-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.info-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
}

.info-label {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.info-card strong {
    display: block;
    font-size: 14px;
}

.feature-strip {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.feature-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.feature-card-muted {
    opacity: 0.78;
}

.feature-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--surface-soft);
    font-size: 19px;
}

.feature-card h3 {
    margin: 0 0 5px;
    font-size: 14px;
}

.feature-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.mobile-nav {
    display: none;
}

@media (max-width: 1024px) {
    .topbar,
    .desktop-layout {
        width: min(100% - 28px, 920px);
    }

    .desktop-layout {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .feature-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 84px;
    }

    .topbar,
    .desktop-layout {
        width: calc(100% - 24px);
    }

    .topbar {
        min-height: 78px;
    }

    .brand-copy span {
        display: none;
    }

    .brand-copy strong {
        font-size: 18px;
    }

    .desktop-layout {
        display: block;
        margin-bottom: 20px;
    }

    .sidebar {
        display: none;
    }

    .page-heading {
        min-height: auto;
        margin: 8px 0 14px;
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .today-label {
        text-align: left;
    }

    .clock-card {
        padding: 22px 16px;
        border-radius: 20px;
    }

    .digital-clock {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    #clock-time {
        font-size: clamp(50px, 17vw, 96px);
    }

    .clock-period {
        font-size: 22px;
    }

    .clock-meta {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: 15px;
    }

    .mobile-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 10;
        min-height: 64px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(16px);
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: 0 16px 36px rgba(15, 31, 58, 0.14);
    }

    .mobile-nav::-webkit-scrollbar { display: none; }

    .mobile-nav-item {
        flex: 0 0 68px;
        min-height: 52px;
        display: grid;
        place-items: center;
        gap: 2px;
        border-radius: 13px;
        color: var(--text-secondary);
        font-size: 18px;
    }

    .mobile-nav-item small {
        font-size: 9px;
        font-weight: 800;
    }

    .mobile-nav-item.is-active {
        background: #e9f0ff;
        color: var(--primary);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: #091427;
        --surface: #101c31;
        --surface-soft: #15233e;
        --text-primary: #eef4ff;
        --text-secondary: #9fb0cb;
        --border: #243452;
        --shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
    }

    body {
        background: radial-gradient(circle at 50% -10%, rgba(47, 115, 255, 0.16), transparent 36%), var(--background);
    }

    .icon-button,
    .mobile-nav {
        background: rgba(16, 28, 49, 0.94);
    }

    .clock-card {
        background: linear-gradient(145deg, #101c31, #0c1729);
        border-color: var(--border);
    }

    .info-card,
    .feature-card {
        background: #101c31;
    }

    .mobile-nav-item.is-active {
        background: #173464;
    }
}


:root[data-theme="light"] {
    color-scheme: light;
    --primary: #2f73ff;
    --primary-dark: #1e4fc4;
    --background: #f3f7fc;
    --surface: #ffffff;
    --surface-soft: #f6f9ff;
    --text-primary: #0f1f3a;
    --text-secondary: #64748b;
    --border: #dbe5f1;
    --shadow: 0 18px 42px rgba(30, 79, 196, 0.10);
}

:root[data-theme="light"] body {
    background: radial-gradient(circle at 50% -10%, rgba(47, 115, 255, 0.10), transparent 36%), var(--background);
}

:root[data-theme="light"] .icon-button,
:root[data-theme="light"] .mobile-nav {
    background: rgba(255, 255, 255, 0.94);
}

:root[data-theme="light"] .clock-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.98));
    border-color: rgba(219, 229, 241, 0.86);
}

:root[data-theme="light"] .info-card,
:root[data-theme="light"] .feature-card {
    background: var(--surface);
}

:root[data-theme="light"] .mobile-nav-item.is-active {
    background: #e9f0ff;
}

:root[data-theme="dark"] body {
    background: radial-gradient(circle at 50% -10%, rgba(47, 115, 255, 0.16), transparent 36%), var(--background);
}

/* My World dashboard */
.my-world-card {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(244,248,255,0.96));
    box-shadow: 0 14px 34px rgba(30, 79, 196, 0.07);
}

.my-world-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
}

.my-world-heading h2 { margin: 0; font-size: 22px; }
.my-world-heading p:not(.eyebrow) { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; }
.my-world-add { position: relative; width: min(420px, 100%); }
.my-world-add input {
    width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 13px;
    outline: 0; background: var(--surface); color: var(--text-primary); font: inherit;
}
.my-world-add input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,115,255,.10); }
.my-world-search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 8; overflow: hidden;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 42px rgba(15,31,58,.16);
    max-height: 420px; overflow-y: auto;
}
.my-world-search-result { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-primary); padding: 11px 12px; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.my-world-search-result:last-child { border-bottom: 0; }
.my-world-search-result:hover, .my-world-search-result:focus-visible { background: var(--surface-soft); outline: 0; }
.my-world-search-result > span:first-child { font-size: 18px; }
.my-world-search-result strong, .my-world-search-result small { display: block; }
.my-world-search-result small { margin-top: 2px; color: var(--text-secondary); font-size: 11px; }
.my-world-search-result b { color: var(--primary); font-size: 18px; }
.my-world-search-empty { padding: 16px; color: var(--text-secondary); font-size: 13px; }
.my-world-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.my-world-city { position: relative; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; cursor: grab; }
.my-world-city:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(30,79,196,.08); }
.my-world-city.is-dragging { opacity: .5; }
.my-world-city.is-drag-over { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,115,255,.10); }
.my-world-city-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.my-world-city-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.my-world-city-flag { font-size: 23px; line-height: 1; }
.my-world-city-identity h3 { margin: 0; font-size: 15px; }
.my-world-city-identity p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-world-remove { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--surface-soft); color: var(--text-secondary); font-size: 20px; line-height: 1; cursor: pointer; }
.my-world-remove:hover, .my-world-remove:focus-visible { color: var(--text-primary); background: #e8efff; outline: 0; }
.my-world-city-time { margin-top: 18px; font-size: clamp(27px, 3.1vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.my-world-city-date { margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
.my-world-city-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.my-world-city-meta span { padding: 5px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; font-weight: 800; }
.my-world-state.is-day { color: #2d7b43; }
.my-world-state.is-night { color: #5d6d9d; }
.my-world-city-zone { margin-top: 11px; color: var(--text-secondary); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-world-drag { position: absolute; right: 50%; bottom: 7px; transform: translateX(50%); color: var(--border); font-size: 12px; letter-spacing: -3px; user-select: none; }
.my-world-empty { margin-top: 12px; padding: 24px; border: 1px dashed var(--border); border-radius: 17px; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.my-world-empty-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-soft); color: var(--primary); font-size: 23px; }
.my-world-empty strong { display: block; font-size: 14px; }
.my-world-empty p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.is-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:root[data-theme="dark"] .my-world-card { background: linear-gradient(145deg, #101c31, #0c1729); }

@media (max-width: 1024px) {
    .my-world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .my-world-card { padding: 18px 14px; }
    .my-world-heading { flex-direction: column; }
    .my-world-add { width: 100%; }
    .my-world-grid { grid-template-columns: 1fr; }
}

/* v01.28 — Local Clock display modes */
[hidden] { display: none !important; }
.clock-card { position: relative; overflow: hidden; transition: padding .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.clock-mode-content { min-height: 310px; display: grid; place-items: center; position: relative; }
.clock-live-copy { width: 100%; display: grid; justify-items: center; text-align: center; }
.clock-day-state { min-height: 19px; color: var(--text-secondary); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.clock-location-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin-top: 16px; }
.clock-location-line strong { font-size: 18px; }
.clock-location-line span { color: var(--text-secondary); font-size: 14px; }
.clock-secondary-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 9px; color: var(--text-secondary); font-size: 12px; }
.clock-secondary-meta span:first-child { color: var(--text-primary); font-weight: 800; }
.clock-secondary-meta time { color: var(--text-secondary); }
.clock-mode-minimal .clock-card-heading,
.clock-mode-compact .clock-card-heading { margin-bottom: 0; }
.clock-mode-minimal { background: var(--surface) !important; border-color: transparent !important; box-shadow: none !important; }
.clock-mode-minimal .clock-card-heading { justify-content: center; text-align: center; }
.clock-mode-minimal .clock-card-heading > div { display: grid; justify-items: center; }
.clock-mode-minimal .clock-card-heading h2,
.clock-mode-minimal .clock-card-heading .clock-location,
.clock-mode-minimal .status-pill,
.clock-mode-minimal .clock-secondary-meta,
.clock-mode-minimal .clock-day-state,
.clock-mode-minimal .clock-meta { display: none; }
.clock-mode-minimal .clock-mode-content { min-height: 290px; }
.clock-mode-minimal #clock-time { font-size: clamp(54px, 9vw, 108px); font-weight: 700; }
.clock-mode-minimal .clock-location-line { margin-top: 12px; display: grid; gap: 3px; }
.clock-mode-minimal .clock-location-line strong { font-size: 17px; }
.clock-mode-minimal .clock-location-line span { font-size: 13px; }

.clock-mode-colorful { background: linear-gradient(145deg, rgba(255, 247, 222, .98), rgba(233, 243, 255, .98)) !important; }
.clock-mode-colorful[data-day-state="twilight"] { background: linear-gradient(145deg, rgba(255, 236, 213, .98), rgba(245, 231, 255, .98)) !important; }
.clock-mode-colorful[data-day-state="night"] { background: linear-gradient(145deg, rgba(26, 35, 60, .98), rgba(57, 46, 82, .98)) !important; color: #f7f9ff; }
.clock-mode-colorful[data-day-state="night"] .clock-card-heading .clock-location,
.clock-mode-colorful[data-day-state="night"] .clock-secondary-meta,
.clock-mode-colorful[data-day-state="night"] .clock-location-line span,
.clock-mode-colorful[data-day-state="night"] .clock-day-state { color: #cdd5ea; }
.clock-mode-colorful .digital-clock { margin-top: 28px; }
.clock-mode-colorful #clock-time { font-size: clamp(58px, 10vw, 132px); font-weight: 900; }
.clock-mode-colorful .clock-day-state { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.52); color: var(--text-primary); }
.clock-mode-colorful[data-day-state="night"] .clock-day-state { background: rgba(0,0,0,.18); color: #f7f9ff; }
.clock-mode-colorful .clock-secondary-meta span[data-role="offset"] { color: #7c3aed; }
.clock-mode-colorful[data-day-state="night"] .clock-secondary-meta span[data-role="offset"] { color: #c4b5fd; }

.clock-mode-glass { background: linear-gradient(145deg, rgba(255,255,255,.40), rgba(230,239,255,.28)) !important; border-color: rgba(255,255,255,.42) !important; box-shadow: 0 24px 60px rgba(54, 83, 138, .17), inset 0 1px 0 rgba(255,255,255,.65) !important; backdrop-filter: blur(16px); }
.clock-mode-glass .clock-mode-content { margin: 34px 0; border: 1px solid rgba(255,255,255,.42); border-radius: 26px; background: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.36); backdrop-filter: blur(14px); }
.clock-mode-glass #clock-time { font-size: clamp(58px, 10vw, 136px); font-weight: 850; }
.clock-mode-glass .clock-secondary-meta { padding-bottom: 26px; }

.clock-mode-compact { padding: 22px !important; }
.clock-mode-compact .clock-card-heading { align-items: center; }
.clock-mode-compact .clock-mode-content { min-height: 106px; display: block; }
.clock-mode-compact .clock-live-copy { display: grid; grid-template-columns: minmax(120px, 1fr) auto; grid-template-areas: "identity time" "meta meta"; align-items: center; gap: 4px 18px; text-align: left; }
.clock-mode-compact .clock-day-state { display: none; }
.clock-mode-compact .digital-clock { grid-area: time; margin: 0; justify-content: flex-end; }
.clock-mode-compact #clock-time { font-size: clamp(32px, 5vw, 62px); font-weight: 850; }
.clock-mode-compact .clock-location-line { grid-area: identity; margin: 0; justify-content: flex-start; display: grid; gap: 2px; }
.clock-mode-compact .clock-location-line strong { font-size: 17px; }
.clock-mode-compact .clock-location-line span { font-size: 12px; }
.clock-mode-compact .clock-secondary-meta { grid-area: meta; justify-content: flex-start; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.clock-mode-compact .clock-secondary-meta time { display: none; }
.clock-mode-compact .clock-meta { display: none; }

.clock-mode-large-digital .clock-mode-content { min-height: 360px; }
.clock-mode-large-digital .clock-card-heading { opacity: .88; }
.clock-mode-large-digital .digital-clock { margin: 36px 0 0; display: grid; gap: 4px; justify-items: center; }
.clock-mode-large-digital #clock-time { font-size: clamp(74px, 15vw, 170px); font-weight: 900; letter-spacing: -.085em; line-height: .84; }
.clock-mode-large-digital .clock-location-line { margin-top: 24px; }
.clock-mode-large-digital .clock-location-line strong { font-size: clamp(18px, 2.2vw, 26px); text-transform: uppercase; letter-spacing: .08em; }
.clock-mode-large-digital .clock-location-line span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.clock-mode-large-digital .clock-secondary-meta { margin-top: 12px; }
.clock-mode-large-digital .clock-meta { display: none; }

.clock-mode-analog .clock-mode-content { min-height: 430px; grid-template-columns: minmax(260px, 430px) minmax(0, 1fr); gap: clamp(22px, 5vw, 60px); }
.clock-mode-analog .clock-live-copy { align-content: center; justify-items: start; text-align: left; }
.clock-mode-analog .clock-live-copy .digital-clock { order: 2; margin: 0; justify-content: flex-start; }
.clock-mode-analog .clock-live-copy .clock-day-state { order: 1; }
.clock-mode-analog .clock-location-line { order: 3; justify-content: flex-start; margin-top: 14px; }
.clock-mode-analog .clock-secondary-meta { order: 4; justify-content: flex-start; }
.clock-mode-analog #clock-time { font-size: clamp(34px, 5vw, 62px); font-weight: 800; }
.clock-mode-analog .clock-analog { grid-column: 1; grid-row: 1; }
.clock-analog { position: relative; width: min(70vw, 380px); aspect-ratio: 1; border: 10px solid var(--text-primary); border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--border), 0 20px 48px rgba(15,31,58,.13); color: var(--text-primary); }
.clock-analog::before { content: ''; position: absolute; inset: 7%; border: 1px solid var(--border); border-radius: 50%; }
.analog-mark { position: absolute; font-size: clamp(10px, 1.3vw, 15px); font-weight: 900; }
.analog-mark.m12 { top: 7%; left: 50%; transform: translateX(-50%); }
.analog-mark.m3 { right: 8%; top: 50%; transform: translateY(-50%); }
.analog-mark.m6 { bottom: 7%; left: 50%; transform: translateX(-50%); }
.analog-mark.m9 { left: 8%; top: 50%; transform: translateY(-50%); }
.analog-mark.m1 { top: 15%; right: 24%; }
.analog-mark.m2 { top: 25%; right: 14%; }
.analog-mark.m4 { bottom: 25%; right: 14%; }
.analog-mark.m5 { bottom: 15%; right: 24%; }
.analog-mark.m7 { bottom: 15%; left: 24%; }
.analog-mark.m8 { bottom: 25%; left: 14%; }
.analog-mark.m10 { top: 25%; left: 14%; }
.analog-mark.m11 { top: 15%; left: 24%; }
.analog-hand { position: absolute; left: 50%; bottom: 50%; width: 4px; border-radius: 999px; transform-origin: 50% 100%; transform: translateX(-50%) rotate(0deg); z-index: 2; }
.analog-hand.hour { height: 24%; background: currentColor; }
.analog-hand.minute { height: 33%; background: currentColor; opacity: .9; }
.analog-hand.second { height: 37%; width: 2px; background: var(--primary); }
.analog-dot { position: absolute; width: 14px; height: 14px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; z-index: 3; box-shadow: 0 0 0 4px var(--surface); }
.clock-mode-analog .clock-meta { display: none; }

.clock-mode-world-map .clock-mode-content { min-height: 0; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.clock-world-map { position: relative; grid-column: 1; grid-row: 1; width: 100%; min-width: 0; aspect-ratio: 2 / 1; max-height: 360px; contain: layout paint; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--surface-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.clock-world-map img { display: block; width: 100%; height: 100%; object-fit: contain; }
.clock-map-markers { position: absolute; inset: 0; }
.clock-map-marker { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 0; border-radius: 999px; background: rgba(255,255,255,.88); color: #1a2b48; box-shadow: 0 6px 16px rgba(15,31,58,.16); font: 800 9px/1 system-ui, sans-serif; cursor: pointer; }
.clock-map-marker.is-selected { box-shadow: 0 0 0 2px var(--primary), 0 8px 20px rgba(15,31,58,.18); }
.clock-map-marker:focus-visible { outline: 3px solid rgba(47,115,255,.42); outline-offset: 2px; }
.clock-map-marker span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(47,115,255,.15); }
.clock-map-marker.is-local { z-index: 2; background: var(--primary); color: white; }
.clock-map-marker.is-local span { background: white; }
.clock-mode-map-copy { width: 100%; text-align: left; align-self: center; }
.clock-mode-map-copy .digital-clock { margin: 8px 0 12px; justify-content: flex-start; }
.clock-mode-map-copy #clock-time { font-size: clamp(38px, 5vw, 68px); font-weight: 900; }
.clock-mode-map-copy .clock-period { font-size: 19px; }
.clock-mode-map-copy .clock-location-line { justify-content: flex-start; margin-top: 0; display: grid; }
.clock-mode-map-copy .clock-location-line strong { font-size: 21px; }
.clock-mode-map-copy .clock-secondary-meta { justify-content: flex-start; }
.clock-mode-world-map .clock-meta { display: none; }

.clock-mode-world-map .clock-live-copy { grid-column: 1; grid-row: 2; align-content: center; justify-items: center; text-align: center; }
.clock-mode-world-map .clock-day-state { order: 0; }
.clock-mode-world-map .clock-live-copy .digital-clock { order: 1; }
.clock-mode-world-map .clock-location-line { order: 2; }
.clock-mode-world-map .clock-secondary-meta { order: 3; }

html[data-theme="dark"] .clock-mode-glass { background: linear-gradient(145deg, rgba(22,34,58,.62), rgba(19,31,55,.48)) !important; }
html[data-theme="dark"] .clock-mode-compact .clock-secondary-meta { border-top-color: #2a3a57; }
html[data-theme="dark"] .clock-map-marker { background: rgba(18,29,49,.92); color: #edf3ff; }

@media (prefers-reduced-motion: reduce) {
    .clock-card { transition: none; }
}

@media (max-width: 900px) {
    .clock-mode-analog .clock-mode-content { grid-template-columns: 1fr; text-align: center; gap: 20px; }
    .clock-mode-analog .clock-analog { grid-column: 1; grid-row: 1; width: min(56vw, 330px); }
    .clock-mode-analog .clock-live-copy { grid-column: 1; grid-row: 2; justify-items: center; text-align: center; }
    .clock-mode-analog .clock-live-copy .digital-clock { justify-content: center; }
    .clock-mode-analog .clock-location-line, .clock-mode-analog .clock-secondary-meta { justify-content: center; }
}

@media (max-width: 760px) {
    .clock-mode-content { min-height: 270px; }
    .clock-mode-compact { padding: 18px !important; }
    .clock-mode-compact .clock-live-copy { grid-template-columns: 1fr; grid-template-areas: "identity" "time" "meta"; justify-items: start; }
    .clock-mode-compact .digital-clock { justify-content: flex-start; margin-top: 6px; }
    .clock-mode-compact #clock-time { font-size: 44px; }
    .clock-mode-large-digital .clock-mode-content { min-height: 310px; }
    .clock-mode-large-digital #clock-time { font-size: clamp(64px, 20vw, 116px); }
    .clock-mode-analog .clock-analog { width: min(72vw, 270px); }
    .clock-world-map { max-height: 300px; border-radius: 20px; }
    .clock-map-marker { font-size: 7px; padding: 3px 5px; }
    .clock-map-marker strong { display: none; }
    .clock-mode-glass .clock-mode-content { margin: 18px 0; border-radius: 20px; }
}


/* v01.28.3 — Multi Theme System */
:root[data-theme="ocean"] {
    color-scheme: light;
    --primary: #087ea4;
    --primary-dark: #075985;
    --background: #eaf8fc;
    --surface: #ffffff;
    --surface-soft: #effbff;
    --text-primary: #0b2d42;
    --text-secondary: #4d7184;
    --border: #c6e5ef;
    --shadow: 0 18px 42px rgba(7, 89, 133, .13);
}
:root[data-theme="sunset"] {
    color-scheme: light;
    --primary: #c84b61;
    --primary-dark: #9f3148;
    --background: #fff4eb;
    --surface: #fffdfb;
    --surface-soft: #fff1e6;
    --text-primary: #4b2530;
    --text-secondary: #86616a;
    --border: #f0d2c6;
    --shadow: 0 18px 42px rgba(159, 49, 72, .12);
}
:root[data-theme="aurora"] {
    color-scheme: dark;
    --primary: #6ee7d0;
    --primary-dark: #43c4ad;
    --background: #111a32;
    --surface: #192544;
    --surface-soft: #15203a;
    --text-primary: #eef9ff;
    --text-secondary: #b4c4dc;
    --border: #314267;
    --shadow: 0 18px 42px rgba(4, 17, 46, .34);
}
:root[data-theme="midnight"] {
    color-scheme: dark;
    --primary: #77a6ff;
    --primary-dark: #4e7fe5;
    --background: #080f1e;
    --surface: #101a31;
    --surface-soft: #0d162a;
    --text-primary: #edf3ff;
    --text-secondary: #91a3c6;
    --border: #253553;
    --shadow: 0 18px 42px rgba(0,0,0,.42);
}
:root[data-theme="day-night-world"][data-theme-state="day"] {
    color-scheme: light;
    --primary: #d8861c;
    --primary-dark: #a9620b;
    --background: #edf7ff;
    --surface: rgba(255,255,255,.94);
    --surface-soft: #f4f9ff;
    --text-primary: #17324f;
    --text-secondary: #5e7892;
    --border: #cfe2f3;
    --shadow: 0 18px 42px rgba(23,80,133,.12);
}
:root[data-theme="day-night-world"][data-theme-state="twilight"] {
    color-scheme: dark;
    --primary: #d685b7;
    --primary-dark: #9f5f8d;
    --background: #30253f;
    --surface: #3d304e;
    --surface-soft: #362b46;
    --text-primary: #fff5f6;
    --text-secondary: #ddc9d9;
    --border: #5a465f;
    --shadow: 0 18px 42px rgba(20,9,31,.35);
}
:root[data-theme="day-night-world"][data-theme-state="night"] {
    color-scheme: dark;
    --primary: #77a6ff;
    --primary-dark: #4b78d4;
    --background: #080f1c;
    --surface: #0f192d;
    --surface-soft: #0c1527;
    --text-primary: #eaf2ff;
    --text-secondary: #98a9c8;
    --border: #253650;
    --shadow: 0 18px 42px rgba(0,0,0,.45);
}

:root[data-theme="ocean"] body { background: radial-gradient(circle at 20% -10%, rgba(8,126,164,.16), transparent 40%), linear-gradient(180deg, #eaf8fc, #f5fcff); }
:root[data-theme="sunset"] body { background: radial-gradient(circle at 70% -10%, rgba(216,134,28,.13), transparent 38%), linear-gradient(180deg, #fff4eb, #fffaf6); }
:root[data-theme="aurora"] body { background: radial-gradient(circle at 20% -10%, rgba(110,231,208,.12), transparent 36%), radial-gradient(circle at 90% 10%, rgba(108,80,220,.18), transparent 35%), var(--background); }
:root[data-theme="midnight"] body { background: radial-gradient(circle at 50% -10%, rgba(119,166,255,.12), transparent 34%), var(--background); }
:root[data-theme="day-night-world"][data-theme-state="day"] body { background: radial-gradient(circle at 50% -10%, rgba(255,208,110,.20), transparent 34%), linear-gradient(180deg, #e9f7ff, #f8fcff); }
:root[data-theme="day-night-world"][data-theme-state="twilight"] body { background: radial-gradient(circle at 50% -10%, rgba(224,132,169,.18), transparent 34%), linear-gradient(180deg, #33273f, #211b30); }
:root[data-theme="day-night-world"][data-theme-state="night"] body { background: radial-gradient(circle at 50% -10%, rgba(93,126,255,.16), transparent 34%), linear-gradient(180deg, #09111f, #050a12); }

:root[data-theme="ocean"] .sidebar { background: linear-gradient(180deg, #0a5771 0%, #063b55 100%); }
:root[data-theme="sunset"] .sidebar { background: linear-gradient(180deg, #5e2c3e 0%, #3f202f 100%); }
:root[data-theme="aurora"] .sidebar { background: linear-gradient(180deg, #17234a 0%, #241a45 100%); }
:root[data-theme="midnight"] .sidebar { background: linear-gradient(180deg, #0b1327 0%, #080d19 100%); }
:root[data-theme="day-night-world"][data-theme-state="day"] .sidebar { background: linear-gradient(180deg, #1a4f78 0%, #173a61 100%); }
:root[data-theme="day-night-world"][data-theme-state="twilight"] .sidebar { background: linear-gradient(180deg, #4a3157 0%, #2d233f 100%); }
:root[data-theme="day-night-world"][data-theme-state="night"] .sidebar { background: linear-gradient(180deg, #101c37 0%, #0a1224 100%); }

:root[data-theme="ocean"] .clock-card,
:root[data-theme="ocean"] .settings-card,
:root[data-theme="ocean"] .my-world-card { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(234,250,255,.98)); }
:root[data-theme="sunset"] .clock-card,
:root[data-theme="sunset"] .settings-card,
:root[data-theme="sunset"] .my-world-card { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,240,229,.98)); }
:root[data-theme="aurora"] .clock-card,
:root[data-theme="aurora"] .settings-card,
:root[data-theme="aurora"] .my-world-card { background: linear-gradient(145deg, rgba(25,39,70,.96), rgba(34,28,67,.96)); }
:root[data-theme="midnight"] .clock-card,
:root[data-theme="midnight"] .settings-card,
:root[data-theme="midnight"] .my-world-card { background: linear-gradient(145deg, #111b31, #0c1427); }
:root[data-theme="day-night-world"] .clock-card { position: relative; overflow: hidden; }
:root[data-theme="day-night-world"] .clock-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.9), transparent 35%); }
:root[data-theme="day-night-world"][data-theme-state="twilight"] .clock-card::before { background: radial-gradient(circle at 50% 0%, rgba(226,130,175,.55), transparent 38%); opacity: .34; }
:root[data-theme="day-night-world"][data-theme-state="night"] .clock-card::before { background: radial-gradient(circle at 50% 0%, rgba(91,122,255,.45), transparent 38%); opacity: .35; }

:root[data-theme="aurora"] .clock-time,
:root[data-theme="aurora"] #clock-time { text-shadow: 0 0 24px rgba(110,231,208,.14); }
:root[data-theme="midnight"] #clock-time { text-shadow: 0 0 20px rgba(119,166,255,.18); }
:root[data-theme="ocean"] .clock-card-heading h2 { color: #075985; }
:root[data-theme="sunset"] .clock-card-heading h2 { color: #8b3046; }

:root[data-theme="ocean"] .icon-button,
:root[data-theme="ocean"] .secondary-button,
:root[data-theme="sunset"] .icon-button,
:root[data-theme="sunset"] .secondary-button,
:root[data-theme="aurora"] .icon-button,
:root[data-theme="aurora"] .secondary-button,
:root[data-theme="midnight"] .icon-button,
:root[data-theme="midnight"] .secondary-button,
:root[data-theme="day-night-world"] .icon-button,
:root[data-theme="day-night-world"] .secondary-button { background: var(--surface); color: var(--text-primary); }

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        color-scheme: dark;
        --primary: #77a6ff;
        --primary-dark: #4e7fe5;
        --background: #0e1728;
        --surface: #15213a;
        --surface-soft: #111d33;
        --text-primary: #edf3ff;
        --text-secondary: #a0b0cd;
        --border: #2a3d5e;
    }
    :root[data-theme="system"] body { background: radial-gradient(circle at 50% -10%, rgba(47,115,255,.16), transparent 36%), var(--background); }
    :root[data-theme="system"] .clock-card { background: linear-gradient(145deg, rgba(22,34,58,.98), rgba(14,25,44,.98)); border-color: rgba(61,82,119,.65); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-card, .theme-option, .display-mode-card, .display-mode-option { transition: none !important; }
}