:root {
    color-scheme: dark;

    --font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-muted: rgba(255, 255, 255, 0.52);

    --surface:
        rgba(19, 31, 51, 0.66);

    --surface-strong:
        rgba(13, 24, 41, 0.82);

    --surface-border:
        rgba(255, 255, 255, 0.14);

    --accent: #8ce1d5;
    --success: #77e0a3;
    --danger: #ff9696;

    --shadow:
        0 24px 80px rgba(0, 0, 0, 0.3);

    --radius-large: 30px;
    --radius-medium: 22px;
    --radius-small: 16px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;

    font-family: var(--font-family);
    color: var(--text-primary);

    background: #13233b;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

[hidden] {
    display: none !important;
}

.app-shell {
    width: min(1180px, calc(100% - 32px));
    position: relative;

    z-index: 1;
    min-height: 100vh;
    margin: 0 auto;

    padding:
        max(22px, env(safe-area-inset-top))
        0
        max(28px, env(safe-area-inset-bottom));
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 34px;
}

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

    color: inherit;
    text-decoration: none;
}

.brand-icon {
    display: grid;
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    place-items: center;

    overflow: hidden;

    background: transparent;
    border: 0;
    border-radius: 16px;

    box-shadow: none;
}

.brand-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: inherit;
}

.brand-copy {
    display: flex;
    flex-direction: column;
}

.brand-overline {
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.24em;

    color: var(--accent);
}

.brand-title {
    font-size: 23px;
    font-weight: 680;
    letter-spacing: -0.035em;
}

.header-actions {
    display: flex;
    gap: 10px;
}

.icon-button {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;

    padding: 0;

    font-size: 21px;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.09);
    border: 1px solid var(--surface-border);
    border-radius: 16px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.13);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        transform 160ms ease,
        background-color 160ms ease;
}

.icon-button:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.icon-button:active {
    transform: translateY(0);
}

.search-section {
    position: relative;
    z-index: 20;

    margin-bottom: 28px;
}

.location-search {
    position: relative;

    width: min(620px, 100%);
    margin: 0 auto;
}

.search-input-wrapper {
    position: relative;

    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 19px;

    z-index: 2;

    font-size: 22px;
    color: var(--text-muted);

    pointer-events: none;
}

.location-search input {
    width: 100%;
    height: 58px;

    padding:
        0
        54px
        0
        54px;

    color: var(--text-primary);
    font-size: 16px;

    outline: none;

    background:
        rgba(16, 29, 48, 0.72);

    border:
        1px solid
        var(--surface-border);

    border-radius: 19px;

    box-shadow:
        0 16px 42px
        rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.location-search input::placeholder {
    color: var(--text-muted);
}

.location-search input:focus {
    background:
        rgba(16, 29, 48, 0.88);

    border-color:
        rgba(140, 225, 213, 0.52);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.22),
        0 0 0 4px
        rgba(140, 225, 213, 0.08);
}

.clear-search-button {
    position: absolute;
    right: 13px;

    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;

    padding: 0;

    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    background:
        rgba(255, 255, 255, 0.08);

    border: 0;
    border-radius: 11px;
}

.clear-search-button:hover {
    color: var(--text-primary);

    background:
        rgba(255, 255, 255, 0.14);
}

.search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;

    max-height: 390px;
    overflow-y: auto;

    padding: 8px;

    background:
        rgba(13, 24, 41, 0.96);

    border:
        1px solid
        var(--surface-border);

    border-radius: 20px;

    box-shadow:
        0 26px 70px
        rgba(0, 0, 0, 0.38);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: 100%;
    min-height: 64px;

    padding: 12px 14px;

    color: var(--text-primary);
    text-align: left;

    cursor: pointer;

    background: transparent;
    border: 0;
    border-radius: 14px;
}

.search-result:hover,
.search-result.is-active {
    background:
        rgba(255, 255, 255, 0.09);
}

.search-result-main {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.search-result-name {
    font-weight: 680;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-detail {
    color: var(--text-muted);
    font-size: 13px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-country {
    flex: 0 0 auto;

    min-width: 34px;

    padding: 5px 7px;

    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-align: center;

    background:
        rgba(255, 255, 255, 0.07);

    border-radius: 9px;
}

.search-message {
    padding: 20px;

    color: var(--text-secondary);
    text-align: center;
}

.search-message-error {
    color: var(--danger);
}
.status-panel {
    display: flex;
    align-items: center;
    gap: 18px;

    max-width: 720px;
    margin: 12vh auto 0;
    padding: 26px;

    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-medium);

    box-shadow: var(--shadow);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.status-panel strong {
    display: block;
    margin-bottom: 6px;

    font-size: 18px;
}

.status-panel p {
    margin: 0;

    line-height: 1.55;
    color: var(--text-secondary);
}

.status-panel-error {
    border-color: rgba(255, 150, 150, 0.35);
}

.status-spinner {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent);
    border-radius: 50%;

    animation: spin 0.9s linear infinite;
}

.status-panel-error .status-spinner {
    animation: none;
    border-color: var(--danger);
}

.weather-content {
    animation: content-enter 500ms ease both;
}



.section-eyebrow {
    margin: 0 0 6px;

    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--accent);
}



.location-detail {
    margin: 10px 0 0;

    color: var(--text-secondary);
}



.hero-card {
    position: relative;

    overflow: hidden;

    display: flex;
    align-items: stretch;

    min-height: 0;
    margin-bottom: 18px;
    padding: 0;

    border-radius: 32px;
}
.hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.condition {
    margin: 0 0 8px;

    font-size: clamp(18px, 3vw, 24px);
    color: var(--text-secondary);
}

































.forecast-section {
    margin-top: 18px;
    padding: clamp(22px, 4vw, 34px);

    background: rgba(15, 28, 47, 0.58);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-large);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.16);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 22px;
}

.section-header h2 {
    margin: 0;

    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.forecast-navigation {
    display: flex;
    gap: 8px;
}

.forecast-navigation-button {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;

    padding: 0;

    color: var(--text-primary);
    font-size: 27px;
    line-height: 1;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--surface-border);
    border-radius: 13px;

    transition:
        background-color 160ms ease,
        transform 160ms ease,
        opacity 160ms ease;
}

.forecast-navigation-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.forecast-navigation-button:disabled {
    cursor: default;
    opacity: 0.34;
}

.hourly-forecast {
    display: flex;
    gap: 10px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 2px 2px 10px;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.24)
        transparent;
}

.hourly-forecast::-webkit-scrollbar {
    height: 7px;
}

.hourly-forecast::-webkit-scrollbar-track {
    background: transparent;
}

.hourly-forecast::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
}

.hourly-card {
    position: relative;

    display: flex;
    flex: 0 0 104px;
    flex-direction: column;
    align-items: center;

    min-height: 188px;
    padding: 17px 12px 15px;

    scroll-snap-align: start;

    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;

    transition:
        transform 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.hourly-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-3px);
}

.hourly-card.is-current {
    background:
        linear-gradient(
            180deg,
            rgba(140, 225, 213, 0.16),
            rgba(255, 255, 255, 0.065)
        );

    border-color: rgba(140, 225, 213, 0.35);
}

.hourly-card.is-current::before {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 6px;
    height: 6px;

    content: "";

    background: var(--accent);
    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(140, 225, 213, 0.9);
}

.hourly-time {
    min-height: 18px;

    font-size: 13px;
    font-weight: 650;
    color: var(--text-secondary);
}

.hourly-card.is-current .hourly-time {
    color: var(--accent);
}

.hourly-icon {
    display: grid;
    min-height: 60px;
    place-items: center;

    margin: 9px 0 4px;

    font-size: 38px;

    filter:
        drop-shadow(
            0 8px 13px rgba(0, 0, 0, 0.15)
        );
}

.hourly-temperature {
    margin-top: 2px;

    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.hourly-precipitation {
    display: flex;
    align-items: center;
    gap: 4px;

    min-height: 20px;
    margin-top: 9px;

    font-size: 12px;
    color: #9edcff;
}

.hourly-precipitation.is-empty {
    color: var(--text-muted);
}

.hourly-day-marker {
    margin-top: 7px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: var(--text-muted);
}
.section-description {
    max-width: 310px;
    margin: 0;

    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
}

.daily-forecast {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.daily-card {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.2fr)
        64px
        minmax(110px, 1fr)
        minmax(100px, 0.8fr);
    align-items: center;
    gap: 18px;

    width: 100%;
    min-height: 84px;
    padding: 15px 18px;

    color: var(--text-primary);
    text-align: left;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.daily-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.daily-card:focus-visible {
    outline: 3px solid rgba(140, 225, 213, 0.35);
    outline-offset: 2px;
}

.daily-card.is-today {
    background:
        linear-gradient(
            135deg,
            rgba(140, 225, 213, 0.14),
            rgba(255, 255, 255, 0.05)
        );

    border-color: rgba(140, 225, 213, 0.3);
}

.daily-date {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.daily-day-name {
    font-size: 16px;
    font-weight: 700;
}

.daily-date-value {
    font-size: 12px;
    color: var(--text-muted);
}

.daily-icon {
    display: grid;
    place-items: center;

    font-size: 35px;

    filter:
        drop-shadow(
            0 7px 11px rgba(0, 0, 0, 0.15)
        );
}

.daily-condition {
    min-width: 0;

    color: var(--text-secondary);
    font-size: 13px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.daily-temperature {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.daily-temperature-min {
    color: var(--text-muted);
    font-weight: 500;
}

.daily-precipitation {
    font-size: 12px;
    color: #9edcff;
}
body.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: grid;
    place-items: center;

    padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));
}

.modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(4, 10, 19, 0.68);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    animation: modal-backdrop-enter 180ms ease both;
}

.modal-panel {
    position: relative;
    z-index: 1;

    width: min(720px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;

    padding: clamp(24px, 5vw, 38px);

    background:
        linear-gradient(
            145deg,
            rgba(24, 40, 63, 0.98),
            rgba(12, 24, 42, 0.98)
        );

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;

    box-shadow:
        0 35px 110px rgba(0, 0, 0, 0.55);

    animation: modal-panel-enter 220ms ease both;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.modal-header h2 {
    margin: 0;

    font-size: clamp(30px, 6vw, 46px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.modal-condition {
    margin: 10px 0 0;

    color: var(--text-secondary);
}

.modal-close-button {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;

    padding: 0;

    color: var(--text-secondary);
    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
}

.modal-close-button:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.14);
}

.day-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 30px;
    padding: 24px;

    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
}

.day-detail-icon {
    display: grid;
    min-width: 120px;
    min-height: 110px;
    place-items: center;

    font-size: 82px;

    filter:
        drop-shadow(
            0 15px 18px rgba(0, 0, 0, 0.18)
        );
}

.day-detail-temperature {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.day-detail-temperature > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.day-detail-temperature span {
    color: var(--text-muted);
    font-size: 13px;
}

.day-detail-temperature strong {
    font-size: clamp(34px, 7vw, 54px);
    letter-spacing: -0.05em;
}

.day-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    margin-top: 14px;
}

.day-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 64px;
    padding: 15px 17px;

    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
}

.day-detail-item span {
    color: var(--text-muted);
    font-size: 13px;
}

.day-detail-item strong {
    text-align: right;
    white-space: nowrap;
}

.sun-cycle {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;

    margin-top: 14px;
    padding: 20px;

    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 18px;
}

.sun-cycle-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sun-cycle-item > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sun-cycle-item span:not(.sun-cycle-icon) {
    color: var(--text-muted);
    font-size: 12px;
}

.sun-cycle-icon {
    font-size: 27px;
}

.sun-cycle-line {
    position: relative;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 216, 117, 0.25),
            rgba(255, 216, 117, 0.7),
            rgba(138, 170, 229, 0.35)
        );
}

.sun-cycle-line span {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    background: #ffe08a;
    border-radius: 50%;

    box-shadow:
        0 0 14px rgba(255, 224, 138, 0.85);

    transform: translate(-50%, -50%);
}

@keyframes modal-backdrop-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-panel-enter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.settings-panel {
    width: min(680px, 100%);
}

.settings-content {
    margin-top: 30px;
}

.settings-group {
    padding: 22px;

    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
}

.settings-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
}

.settings-group-header h3 {
    margin: 0 0 7px;

    font-size: 20px;
    letter-spacing: -0.025em;
}

.settings-group-header p {
    max-width: 430px;
    margin: 0;

    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.settings-status-badge {
    flex: 0 0 auto;

    padding: 7px 10px;

    color: var(--accent);
    font-size: 11px;
    font-weight: 700;

    background: rgba(140, 225, 213, 0.1);
    border: 1px solid rgba(140, 225, 213, 0.2);
    border-radius: 999px;
}

.settings-options {
    display: grid;
    gap: 10px;
}

.settings-option {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 78px;
    padding: 16px 17px;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.settings-option:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.settings-option:has(input:checked) {
    background:
        linear-gradient(
            135deg,
            rgba(140, 225, 213, 0.13),
            rgba(255, 255, 255, 0.045)
        );

    border-color: rgba(140, 225, 213, 0.32);
}

.settings-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.settings-option-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.settings-option-content strong {
    font-size: 15px;
}

.settings-option-content > span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.settings-radio {
    position: relative;

    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}

.settings-option input:checked
+ .settings-option-content
+ .settings-radio {
    border-color: var(--accent);
}

.settings-option input:checked
+ .settings-option-content
+ .settings-radio::after {
    position: absolute;
    inset: 4px;

    content: "";

    background: var(--accent);
    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(140, 225, 213, 0.6);
}

.settings-option input:focus-visible
+ .settings-option-content
+ .settings-radio {
    outline: 3px solid rgba(140, 225, 213, 0.25);
    outline-offset: 3px;
}

.settings-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 14px;
    padding: 15px 17px;

    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 16px;
}

.settings-info > span {
    display: grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;

    color: var(--accent);
    font-size: 12px;
    font-weight: 800;

    background: rgba(140, 225, 213, 0.1);
    border-radius: 50%;
}

.settings-info p {
    margin: 1px 0 0;

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}
/* =======================================================
   AIR QUALITY
======================================================= */

.air-quality-section {
    --air-quality-accent: #9aa9ba;
    --air-quality-soft: rgba(154, 169, 186, 0.14);

    margin-top: 18px;
    padding: clamp(22px, 4vw, 34px);

    background:
        linear-gradient(
            145deg,
            var(--air-quality-soft),
            rgba(15, 28, 47, 0.6) 42%
        );

    border: 1px solid var(--surface-border);
    border-radius: var(--radius-large);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.16);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    transition:
        background-color 300ms ease,
        border-color 300ms ease;
}

.air-quality-section[data-level="good"] {
    --air-quality-accent: #70dfad;
    --air-quality-soft: rgba(112, 223, 173, 0.13);
}

.air-quality-section[data-level="fair"] {
    --air-quality-accent: #b8dd78;
    --air-quality-soft: rgba(184, 221, 120, 0.13);
}

.air-quality-section[data-level="moderate"] {
    --air-quality-accent: #ffd36e;
    --air-quality-soft: rgba(255, 211, 110, 0.14);
}

.air-quality-section[data-level="poor"] {
    --air-quality-accent: #ffad66;
    --air-quality-soft: rgba(255, 173, 102, 0.14);
}

.air-quality-section[data-level="very-poor"] {
    --air-quality-accent: #ff7f79;
    --air-quality-soft: rgba(255, 127, 121, 0.15);
}

.air-quality-section[data-level="extremely-poor"] {
    --air-quality-accent: #d991e8;
    --air-quality-soft: rgba(217, 145, 232, 0.16);
}

.air-quality-header {
    align-items: center;
}

.air-quality-status {
    padding: 7px 11px;

    color: var(--air-quality-accent);
    font-size: 12px;
    font-weight: 700;

    background: var(--air-quality-soft);
    border: 1px solid
        color-mix(
            in srgb,
            var(--air-quality-accent) 28%,
            transparent
        );
    border-radius: 999px;
}

.air-quality-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) 1.6fr;
    gap: 14px;
}

.air-quality-overview {
    display: flex;
    flex-direction: column;

    min-height: 320px;
    padding: 24px;

    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 22px;
}

.air-quality-score {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.air-quality-value {
    color: var(--air-quality-accent);
    font-size: clamp(64px, 9vw, 92px);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.07em;
}

.air-quality-unit {
    margin-bottom: 7px;

    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.air-quality-copy {
    margin-top: 22px;
}

.air-quality-copy h3 {
    margin: 0;

    font-size: 21px;
    letter-spacing: -0.025em;
}

.air-quality-copy p {
    margin: 8px 0 0;

    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.air-quality-scale {
    margin-top: 25px;
}

.air-quality-scale-track {
    position: relative;

    height: 8px;

    background:
        linear-gradient(
            90deg,
            #70dfad 0%,
            #b8dd78 20%,
            #ffd36e 40%,
            #ffad66 60%,
            #ff7f79 80%,
            #d991e8 100%
        );

    border-radius: 999px;
}

.air-quality-marker {
    position: absolute;
    top: 50%;
    left: 0%;

    width: 17px;
    height: 17px;

    background: #ffffff;
    border: 3px solid var(--air-quality-accent);
    border-radius: 50%;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.38);

    transform: translate(-50%, -50%);
    transition: left 500ms ease;
}

.air-quality-scale-labels {
    display: flex;
    justify-content: space-between;

    margin-top: 8px;

    color: var(--text-muted);
    font-size: 10px;
}

.air-quality-advice {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: auto;
    padding-top: 22px;
}

.air-quality-advice-icon {
    display: grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;

    color: var(--air-quality-accent);
    font-size: 12px;
    font-weight: 800;

    background: var(--air-quality-soft);
    border-radius: 50%;
}

.air-quality-advice p {
    margin: 2px 0 0;

    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.air-quality-components {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.air-component-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 150px;
    padding: 20px;

    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;
}

.air-component-card::after {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 7px;
    height: 7px;

    content: "";

    background: var(--air-quality-accent);
    border-radius: 50%;

    box-shadow:
        0 0 12px var(--air-quality-accent);
}

.air-component-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.air-component-heading > span {
    font-size: 15px;
    font-weight: 750;
}

.air-component-heading small {
    color: var(--text-muted);
    font-size: 11px;
}

.air-component-card strong {
    margin-top: auto;

    font-size: clamp(27px, 4vw, 38px);
    font-weight: 600;
    letter-spacing: -0.04em;
}

.air-component-unit {
    margin-top: 3px;

    color: var(--text-muted);
    font-size: 11px;
}

.air-quality-updated {
    margin: 14px 2px 0;

    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
}
/* =======================================================
   SUN & MOON
======================================================= */

.sunmoon-section {
    margin-top: 18px;
}

.sunmoon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.celestial-card {
    position: relative;

    overflow: hidden;

    min-height: 390px;
    padding: clamp(21px, 3vw, 30px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(12, 25, 44, 0.68)
        );

    border: 1px solid var(--surface-border);
    border-radius: var(--radius-large);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.15);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.sun-card::before,
.moon-card::before {
    position: absolute;
    top: -130px;
    right: -100px;

    width: 310px;
    height: 310px;

    content: "";

    border-radius: 50%;
    pointer-events: none;
}

.sun-card::before {
    background:
        radial-gradient(
            circle,
            rgba(255, 212, 111, 0.17),
            transparent 68%
        );
}

.moon-card::before {
    background:
        radial-gradient(
            circle,
            rgba(160, 185, 241, 0.16),
            transparent 68%
        );
}

.celestial-card-header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.celestial-card-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.celestial-card-title > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.celestial-main-icon {
    display: grid;
    flex: 0 0 auto;

    width: 52px;
    height: 52px;
    place-items: center;

    font-size: 30px;

    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
}

.celestial-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.celestial-card-title strong {
    font-size: 20px;
    letter-spacing: -0.025em;
}

.celestial-badge {
    padding: 7px 10px;

    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.sun-path {
    margin-top: 44px;
}









.sun-path-times {
    display: flex;
    justify-content: space-between;

    margin-top: 8px;
}

.sun-path-times > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sun-path-times > div:last-child {
    align-items: flex-end;
}

.sun-path-times span,
.celestial-details span {
    color: var(--text-muted);
    font-size: 11px;
}

.sun-path-times strong {
    font-size: 18px;
}

.celestial-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;

    margin-top: 24px;
}

.celestial-details > div {
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-width: 0;
    min-height: 75px;
    padding: 13px;

    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
}

.celestial-details strong {
    font-size: 14px;
    line-height: 1.25;
}

.moon-visual {
    display: grid;
    grid-template-columns: 128px 1fr;
    align-items: center;
    gap: 28px;

    margin-top: 32px;
}

.moon-disc {
    position: relative;

    flex: 0 0 auto;

    width: 124px;
    height: 124px;

    overflow: hidden;

    border-radius: 50%;

    background: transparent;

    box-shadow:
        0 0 30px
        rgba(176, 197, 244, 0.22),
        0 12px 26px
        rgba(0, 0, 0, 0.24);
}
.moon-disc img {
    position: absolute;
    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    filter:
        contrast(1.04)
        brightness(1.02)
        drop-shadow(
            0 0 10px
            rgba(225, 235, 255, 0.2)
        );
}
.moon-disc-shadow {
    position: absolute;
    inset: -1px;

    z-index: 2;

    background:
        radial-gradient(
            circle at 40% 34%,
            rgba(7, 14, 24, 0.66),
            rgba(2, 7, 14, 0.82) 72%
        );

    border-radius: 50%;

    opacity: 0.86;

    transform:
        translateX(
            var(
                --moon-shadow-offset,
                0%
            )
        );

    transition:
        transform 800ms ease,
        opacity 800ms ease;

    pointer-events: none;
}

.moon-copy p {
    margin: 0;

    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.moon-cycle-progress {
    height: 6px;
    margin-top: 20px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.moon-cycle-progress-value {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #879ed1,
            #e7ecfa
        );

    border-radius: inherit;

    transition: width 700ms ease;
}

.moon-cycle-labels {
    display: flex;
    justify-content: space-between;

    margin-top: 7px;

    color: var(--text-muted);
    font-size: 9px;
}
/* =======================================================
   WEATHER DETAILS
======================================================= */

.weather-details-section {
    margin-top: 18px;
}

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

.weather-detail-card {
    --detail-accent: var(--accent);

    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 190px;
    padding: 20px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(12, 25, 44, 0.62)
        );

    border: 1px solid var(--surface-border);
    border-radius: 20px;

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.13);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}

.weather-detail-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.15);
}

.weather-detail-card::after {
    position: absolute;
    right: -55px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    content: "";

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--detail-accent) 15%,
                transparent
            ),
            transparent 68%
        );

    border-radius: 50%;
    pointer-events: none;
}

.weather-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-detail-icon {
    display: grid;
    flex: 0 0 auto;

    width: 39px;
    height: 39px;
    place-items: center;

    color: var(--detail-accent);
    font-size: 18px;

    background:
        color-mix(
            in srgb,
            var(--detail-accent) 10%,
            rgba(255, 255, 255, 0.045)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--detail-accent) 18%,
            rgba(255, 255, 255, 0.06)
        );

    border-radius: 13px;
}

.weather-detail-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.weather-detail-value {
    position: relative;
    z-index: 1;

    margin-top: auto;
    padding-top: 27px;

    color: var(--text-primary);
    font-size: clamp(31px, 4vw, 44px);
    font-weight: 450;
    line-height: 1;
    letter-spacing: -0.045em;
}

.weather-detail-card p {
    position: relative;
    z-index: 1;

    margin: 9px 0 0;

    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.detail-progress {
    height: 6px;
    margin-top: 16px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.detail-progress-value {
    display: block;

    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #74dba9,
            #f0d66f,
            #ff906e,
            #d989e5
        );

    border-radius: inherit;

    transition: width 600ms ease;
}

#uvDetailCard[data-level="low"] {
    --detail-accent: #70dfad;
}

#uvDetailCard[data-level="moderate"] {
    --detail-accent: #f0d66f;
}

#uvDetailCard[data-level="high"] {
    --detail-accent: #ffad66;
}

#uvDetailCard[data-level="very-high"] {
    --detail-accent: #ff7f79;
}

#uvDetailCard[data-level="extreme"] {
    --detail-accent: #d991e8;
}

.wind-direction-icon {
    transition: transform 500ms ease;
}
@media (max-width: 900px) {
    .weather-details-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}
/* =======================================================
   WEATHER CHART
======================================================= */

.weather-chart-section {
    margin-top: 18px;
}

.weather-chart-legend {
    display: flex;
    align-items: center;
    gap: 15px;

    color: var(--text-muted);
    font-size: 11px;
}

.weather-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.weather-chart-legend-symbol {
    display: block;

    width: 20px;
    height: 4px;

    border-radius: 999px;
}

.weather-chart-legend-temperature {
    background: var(--accent);
}

.weather-chart-legend-precipitation {
    height: 10px;

    background:
        rgba(104, 185, 255, 0.42);

    border:
        1px solid
        rgba(137, 204, 255, 0.58);

    border-radius: 3px;
}

.weather-chart-card {
    overflow: hidden;

    padding:
        clamp(20px, 3vw, 30px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(11, 24, 43, 0.66)
        );

    border:
        1px solid
        var(--surface-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.14);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.weather-chart-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 9px;

    margin-bottom: 24px;
}

.weather-chart-summary > div {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-height: 70px;
    padding: 13px 15px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 14px;
}

.weather-chart-summary span {
    color: var(--text-muted);
    font-size: 10px;
}

.weather-chart-summary strong {
    margin-top: auto;

    font-size: 20px;
    letter-spacing: -0.03em;
}

.weather-chart-container {
    position: relative;

    width: 100%;
    min-height: 340px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.18)
        transparent;
}

.weather-chart {
    display: block;

    width: 100%;
    min-width: 900px;
    height: 340px;

    overflow: visible;
}

.weather-chart-grid-line {
    stroke:
        rgba(255, 255, 255, 0.075);

    stroke-width: 1;
    vector-effect:
        non-scaling-stroke;
}

.weather-chart-current-line {
    stroke:
        rgba(255, 255, 255, 0.24);

    stroke-width: 1;
    stroke-dasharray: 4 5;

    vector-effect:
        non-scaling-stroke;
}

.weather-chart-temperature-area {
    fill:
        url(
            #weatherTemperatureGradient
        );

    opacity: 0.34;
}

.weather-chart-temperature-line {
    fill: none;

    stroke: var(--accent);
    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 3px 8px
            rgba(103, 221, 197, 0.27)
        );

    vector-effect:
        non-scaling-stroke;
}

.weather-chart-temperature-point {
    fill: var(--accent);

    stroke:
        rgba(13, 28, 47, 0.9);

    stroke-width: 2;

    vector-effect:
        non-scaling-stroke;
}

.weather-chart-temperature-label {
    fill: var(--text-primary);

    font-size: 12px;
    font-weight: 700;

    text-anchor: middle;
}

.weather-chart-time-label {
    fill: var(--text-muted);

    font-size: 10px;
    text-anchor: middle;
}

.weather-chart-precipitation-bar {
    fill:
        rgba(104, 185, 255, 0.28);

    stroke:
        rgba(137, 204, 255, 0.38);

    stroke-width: 1;

    rx: 3;
    ry: 3;

    vector-effect:
        non-scaling-stroke;
}

.weather-chart-precipitation-label {
    fill:
        rgba(178, 220, 255, 0.88);

    font-size: 9px;
    text-anchor: middle;
}

.weather-chart-now-label {
    fill: var(--accent);

    font-size: 9px;
    font-weight: 800;
    text-anchor: middle;
    text-transform: uppercase;
}

.weather-chart-caption {
    margin: 16px 2px 0;

    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

/* =======================================================
   METEOROLOGICAL CENTER
======================================================= */

.meteo-center-section {
    margin-top: 22px;
    padding: clamp(20px, 3vw, 30px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(9, 21, 39, 0.72)
        );

    border: 1px solid var(--surface-border);
    border-radius: var(--radius-large);

    box-shadow:
        0 20px 54px
        rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.meteo-center-heading {
    align-items: flex-start;
}

.meteo-center-heading
.section-description {
    max-width: 650px;
    margin-top: 7px;
}

.meteo-center-location {
    padding: 8px 12px;

    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 999px;
}

.meteo-center-tabs {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;

    margin: 23px 0 14px;
    padding: 6px;

    background:
        rgba(2, 12, 25, 0.28);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 17px;
}

.meteo-center-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    padding: 10px 15px;

    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.meteo-center-tab:hover {
    color: var(--text-primary);

    background:
        rgba(255, 255, 255, 0.045);
}

.meteo-center-tab.is-active {
    color: var(--text-primary);

    background:
        rgba(255, 255, 255, 0.09);

    border-color:
        rgba(255, 255, 255, 0.1);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.12);
}

.meteo-center-content {
    min-height: 540px;
}

.meteo-center-panel {
    animation:
        meteo-panel-show
        220ms
        ease;
}

.meteo-center-panel[hidden] {
    display: none;
}

.meteo-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 15px;
}

.meteo-panel-header h3 {
    margin: 3px 0 0;

    font-size: clamp(21px, 3vw, 29px);
    letter-spacing: -0.035em;
}

.meteo-panel-header p:not(.section-eyebrow) {
    max-width: 640px;
    margin: 7px 0 0;

    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.meteo-detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;

    min-height: 40px;
    padding: 9px 13px;

    color: var(--text-primary);
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;

    background:
        rgba(255, 255, 255, 0.065);

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    transition:
        background-color 160ms ease,
        transform 160ms ease;
}

.meteo-detail-button:hover {
    background:
        rgba(255, 255, 255, 0.105);

    transform: translateY(-1px);
}

.meteo-map-frame {
    position: relative;

    width: 100%;
    height: clamp(420px, 58vw, 620px);

    overflow: hidden;

    background:
        rgba(1, 10, 22, 0.75);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 20px;
}

.meteo-map-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    opacity: 0;

    transition:
        opacity 350ms ease;
}

.meteo-map-frame iframe.is-loaded {
    opacity: 1;
}

.meteo-map-loader {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: var(--text-muted);
    font-size: 12px;

    pointer-events: none;

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

.meteo-map-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.meteo-center-note {
    margin: 12px 2px 0;

    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.5;
}

.weather-layer-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 13px;
}

.weather-layer-button {
    min-height: 36px;
    padding: 7px 12px;

    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 999px;

    cursor: pointer;

    transition:
        color 150ms ease,
        background-color 150ms ease,
        border-color 150ms ease;
}

.weather-layer-button:hover,
.weather-layer-button.is-active {
    color: var(--text-primary);

    background:
        rgba(89, 213, 191, 0.12);

    border-color:
        rgba(89, 213, 191, 0.25);
}

/* SKY PLACEHOLDER */

.planet-sky-map {
    position: relative;

    min-height: 410px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(35, 75, 114, 0.48),
            transparent 46%
        ),
        linear-gradient(
            180deg,
            #071225,
            #102a48
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 20px;
}

.planet-sky-stars {
    position: absolute;
    inset: 0;

    opacity: 0.6;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.75) 0 1px,
            transparent 1.4px
        );

    background-size:
        67px 67px;
}

.planet-sky-zenith {
    position: absolute;
    top: 18px;
    left: 50%;

    color: var(--text-muted);
    font-size: 10px;

    transform: translateX(-50%);
}

.planet-sky-objects {
    position: absolute;
    inset: 32px 24px 55px;
}

.planet-sky-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;

    margin: 0;

    color: var(--text-secondary);
    font-size: 12px;

    transform:
        translate(-50%, -50%);
}

.planet-sky-horizon {
    position: absolute;
    right: 20px;
    bottom: 15px;
    left: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 10px;

    color: var(--text-muted);
    font-size: 10px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.19);
}

.planet-sky-horizon strong {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.planet-cards {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 8px;

    margin-top: 12px;
}
.planet-sky-updated {
    margin-left: auto;
    padding: 7px 10px;

    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 999px;
}

.planet-sky-object {
    --planet-accent: #d9e2f5;

    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    min-width: 58px;

    transform:
        translate(-50%, 50%);

    transition:
        left 700ms ease,
        bottom 700ms ease,
        opacity 300ms ease;
}

.planet-sky-object.is-below-horizon {
    opacity: 0.27;
}

.planet-sky-object-dot {
    display: grid;

    width: 20px;
    height: 20px;
    place-items: center;

    color: #fff;
    font-size: 12px;

    background:
        var(--planet-accent);

    border:
        2px solid
        rgba(255, 255, 255, 0.8);

    border-radius: 50%;

    box-shadow:
        0 0 9px var(--planet-accent);
}

.planet-sky-object-label {
    padding: 3px 6px;

    color: var(--text-primary);
    font-size: 9px;
    font-weight: 750;

    background:
        rgba(4, 13, 27, 0.72);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 7px;
}

.planet-sky-object-altitude {
    color: var(--text-muted);
    font-size: 8px;
}

.planet-sky-object[data-planet="mercury"],
.planet-card[data-planet="mercury"] {
    --planet-accent: #b9b6ad;
}

.planet-sky-object[data-planet="venus"],
.planet-card[data-planet="venus"] {
    --planet-accent: #f0d8a8;
}

.planet-sky-object[data-planet="mars"],
.planet-card[data-planet="mars"] {
    --planet-accent: #e88767;
}

.planet-sky-object[data-planet="jupiter"],
.planet-card[data-planet="jupiter"] {
    --planet-accent: #d8bb91;
}

.planet-sky-object[data-planet="saturn"],
.planet-card[data-planet="saturn"] {
    --planet-accent: #e4d092;
}

.planet-card {
    --planet-accent: #d9e2f5;

    display: flex;
    flex-direction: column;

    min-height: 190px;
    padding: 16px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--planet-accent) 7%,
                rgba(255, 255, 255, 0.045)
            ),
            rgba(7, 18, 35, 0.5)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--planet-accent) 15%,
            rgba(255, 255, 255, 0.07)
        );

    border-radius: 17px;
}

.planet-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.planet-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.planet-card-symbol {
    display: grid;

    width: 32px;
    height: 32px;
    place-items: center;

    color: var(--planet-accent);
    font-size: 20px;

    background:
        color-mix(
            in srgb,
            var(--planet-accent) 9%,
            transparent
        );

    border-radius: 11px;
}

.planet-card-title strong {
    font-size: 13px;
}

.planet-visibility-badge {
    padding: 5px 7px;

    color: var(--planet-accent);
    font-size: 8px;
    font-weight: 750;

    background:
        color-mix(
            in srgb,
            var(--planet-accent) 9%,
            transparent
        );

    border-radius: 999px;
}

.planet-card-position {
    margin-top: 16px;

    font-size: 25px;
    font-weight: 500;
}

.planet-card-direction {
    margin-top: 4px;

    color: var(--text-secondary);
    font-size: 10px;
}

.planet-card-details {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;

    margin-top: auto;
    padding-top: 15px;
}

.planet-card-details > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.planet-card-details span {
    color: var(--text-muted);
    font-size: 8px;
}

.planet-card-details strong {
    font-size: 10px;
}

.planet-card-note {
    margin: 12px 0 0;

    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.4;
}

.planet-sky-error {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(420px, 90%);
    margin: 0;

    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;

    transform:
        translate(-50%, -50%);
}
@keyframes meteo-panel-show {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-top: 30px;
    padding: 0 4px;

    font-size: 12px;
    color: var(--text-muted);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes content-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@media (max-width: 820px) {
    .planet-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
    .sunmoon-grid {
        grid-template-columns: 1fr;
    }
    .air-quality-layout {
        grid-template-columns: 1fr;
    }

    .air-quality-overview {
        min-height: 290px;
    }
    .daily-forecast {
        grid-template-columns: 1fr;
    }
    

    
}

@media (max-width: 640px) {
    .hero-alert {
        align-items: flex-start;

        padding: 13px 12px;
        border-radius: 14px;
    }

    .hero-alert-icon {
        width: 36px;
        height: 36px;

        font-size: 18px;
    }

    .day-characteristics {
        padding: 14px 12px;
    }

    .day-characteristic-tags {
        gap: 6px;
    }

    .day-characteristic-tag {
        min-height: 30px;
        padding: 5px 9px;
    }

    .meteo-center-section {
        padding: 18px 13px;
        border-radius: 24px;
    }

    .meteo-center-heading,
    .meteo-panel-header {
        flex-direction: column;
        gap: 12px;
    }

    .meteo-center-location,
    .meteo-detail-button {
        width: 100%;
        justify-content: center;
    }

    .meteo-center-tabs {
        grid-template-columns: 1fr;
    }

    .meteo-center-tab {
        justify-content: flex-start;
    }

    .meteo-center-content {
        min-height: 460px;
    }

    .meteo-map-frame {
        height: 470px;
        border-radius: 16px;
    }

    .weather-layer-switcher {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .weather-layer-button {
        width: 100%;
    }

    .planet-sky-map {
        min-height: 360px;
        border-radius: 16px;
    }

    .planet-cards {
        grid-template-columns: 1fr;
    }
    .weather-chart-card {
        padding: 17px 13px;
        border-radius: 24px;
    }

    .weather-chart-summary {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .weather-chart-summary > div {
        min-height: 58px;
    }

    .weather-chart-container {
        min-height: 300px;
    }

    .weather-chart {
        min-width: 820px;
        height: 300px;
    }

    .weather-chart-legend {
        display: none;
    }
    .weather-details-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .weather-detail-card {
        min-height: 155px;
        padding: 17px 15px;
        border-radius: 17px;
    }

    .weather-detail-value {
        padding-top: 22px;
        font-size: 35px;
    }
    .celestial-card {
        min-height: auto;
        padding: 19px 14px;
        border-radius: 24px;
    }

    .celestial-card-header {
        gap: 10px;
    }

    .celestial-main-icon {
        width: 44px;
        height: 44px;

        font-size: 25px;
        border-radius: 14px;
    }

    .moon-visual {
        grid-template-columns: 90px 1fr;
        gap: 18px;
    }

    .moon-disc {
        width: 88px;
        height: 88px;
    }

    .celestial-details {
        grid-template-columns: 1fr;
    }

    .celestial-details > div {
        min-height: 58px;
    }
    .hero-card {
        min-height: auto;
        border-radius: 26px;
    }

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

    .hero-content {
        padding: 18px 14px;
    }

    .hero-topbar {
        flex-direction: column;
        gap: 13px;
    }

    .hero-time-block {
        width: 100%;
        justify-content: center;
    }

    .hero-main {
        padding:
            10px
            8px
            22px;
    }

    .hero-icon {
        width: 145px;
        height: 125px;

        margin-bottom: 2px;

        font-size: 6.6rem;
    }

    .hero-temperature {
        font-size: 82px;
    }

    .hero-condition {
        font-size: 25px;
    }

    .hero-summary {
        font-size: 13px;
        line-height: 1.55;
    }

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

        gap: 8px;

        padding-top: 16px;
    }

    .hero-metric {
        min-height: 78px;

        padding: 11px 10px;

        border:
            1px solid
            rgba(255, 255, 255, 0.085);

        border-radius: 14px;
    }

    .hero-metric-icon {
        width: 34px;
        height: 34px;

        font-size: 16px;
    }
    .hero-metric:nth-child(2n) {
        border-right: 0;
    }

    .hero-metric:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .hero-metric strong {
        font-size: 15px;
    }
    .air-quality-section {
        padding: 20px 14px;
        border-radius: 24px;
    }

    .air-quality-components {
        grid-template-columns: 1fr 1fr;
    }

    .air-component-card {
        min-height: 132px;
        padding: 16px;
    }

    .air-quality-updated {
        text-align: left;
    }
    .settings-group {

        padding: 17px 14px;

    }

    .settings-group-header {

        flex-direction: column;

        gap: 12px;

    }

    .settings-option {

        min-height: 82px;

        padding: 14px;

    }

    .settings-option-content > span {

        padding-right: 8px;

    }
    .section-description {
        display: none;
    }

    .daily-card {
        grid-template-columns:
            minmax(95px, 1fr)
            48px
            minmax(82px, 0.8fr);
        gap: 10px;

        min-height: 76px;
        padding: 13px 12px;
    }

    .daily-condition {
        display: none;
    }

    .daily-icon {
        font-size: 30px;
    }

    .modal {
        align-items: end;
        padding:
            max(10px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom));
    }

    .modal-panel {
        width: 100%;
        max-height: calc(100vh - 18px);

        padding: 24px 16px;

        border-radius: 25px 25px 18px 18px;
    }

    .day-detail-hero {
        gap: 14px;
        padding: 18px;
    }

    .day-detail-icon {
        min-width: 76px;
        min-height: 80px;

        font-size: 57px;
    }

    .day-detail-temperature {
        gap: 16px;
    }

    .day-detail-temperature strong {
        font-size: 34px;
    }

    .day-detail-grid {
        grid-template-columns: 1fr;
    }

    .sun-cycle {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sun-cycle-line {
        display: none;
    }

    .sun-cycle-item {
        justify-content: space-between;
    }

    .forecast-section {
        padding: 20px 14px;
        border-radius: 24px;
    }

    .section-header {
        align-items: center;
        margin-bottom: 18px;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .forecast-navigation {
        display: none;
    }

    .hourly-forecast {
        margin-right: -14px;
        padding-right: 14px;
    }

    .hourly-card {
        flex-basis: 92px;
        min-height: 177px;
        padding-inline: 9px;
    }

    .hourly-icon {
        font-size: 34px;
    }
    .search-section {
        margin-bottom: 22px;
    }

    .location-search input {
        height: 54px;
        border-radius: 17px;
    }

    .search-results {
        max-height: 330px;
        border-radius: 18px;
    }
    .app-shell {
        width: min(100% - 20px, 1180px);
    }

    .app-header {
        margin-bottom: 24px;
    }

    .brand-icon {
        width: 46px;
        height: 46px;

        border-radius: 15px;
    }

    

    

    .hero-card {
        border-radius: 24px;
    }

    .hero-main {
        align-items: flex-start;
    }

    

    

    

    

    

    .app-footer {
        flex-direction: column;
        gap: 6px;
    }
}

/* =======================================================
   HERO
======================================================= */

.hero-card {
    position: relative;

    overflow: hidden;

    display: flex;
    align-items: stretch;
    justify-content: center;

    min-height: 0;
    margin-bottom: 18px;
    padding: 0;

    border-radius: 34px;
}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(255,255,255,.05),

rgba(0,0,0,.20)

);

pointer-events:none;

}

.hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;
    max-width: none;

    padding:
        clamp(22px, 2.4vw, 30px)
        clamp(28px, 3.4vw, 42px)
        clamp(22px, 2.4vw, 30px);

    text-align: center;
}
.hero-topbar {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 24px;

    width: 100%;

    text-align: left;

}

.hero-location-block {

    min-width: 0;

}

.hero-location-block .section-eyebrow {

    margin-bottom: 7px;

}

.hero-location-block h2 {

    margin: 0;

    font-size: clamp(24px, 3vw, 34px);

    line-height: 1.05;

    letter-spacing: -0.04em;

}

.hero-location-detail {

    margin: 7px 0 0;

    color: var(--text-secondary);

    font-size: 13px;

}

.hero-time-block {

    display: flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;

    padding: 10px 13px;

    color: var(--text-secondary);

    background:

        rgba(255, 255, 255, 0.055);

    border:

        1px solid

        rgba(255, 255, 255, 0.08);

    border-radius: 14px;

}

.hero-time-block p {

    margin: 0;

    font-size: 13px;

    white-space: nowrap;

}

.hero-time-icon {

    color: var(--accent);

    font-size: 17px;

}
.hero-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 0;

    padding:
        4px
        clamp(18px, 4vw, 48px)
        14px;
}
.hero-location{

font-size:1.3rem;

font-weight:600;

opacity:.9;

margin-bottom:12px;

}

.hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 180px;
    height: 150px;

    margin: 0 auto 5px;

    font-size: 8rem;
    line-height: 1;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(0, 0, 0, 0.35)
        );
}
.hero-temperature {
    margin: 0 0 4px;

    font-size: clamp(76px, 9vw, 112px);
    font-weight: 200;
    line-height: 0.92;
    letter-spacing: -0.07em;
}
.hero-condition {
    margin: 5px 0 9px;

    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
}
.hero-range {
    display: flex;
    justify-content: center;
    gap: 34px;

    margin-bottom: 13px;

    color: var(--text-secondary);
    font-size: 15px;
}
.hero-summary {
    max-width: 720px;
    margin: 0 auto;

    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}
.hero-metrics {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 9px;

    width: 100%;
    margin-top: 13px;
    padding-top: 15px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);

    background: transparent;
}
.hero-metric {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    min-width: 0;
    min-height: 82px;

    padding: 13px 12px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    border-radius: 16px;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.hero-metric:hover {
    background:
        rgba(255, 255, 255, 0.085);

    border-color:
        rgba(255, 255, 255, 0.14);

    transform: translateY(-2px);
}
.hero-metric-icon {
    display: grid;
    flex: 0 0 auto;

    width: 38px;
    height: 38px;
    place-items: center;

    font-size: 18px;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 12px;
}
.hero-metric > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;

    min-width: 0;
}

.hero-metric-label {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.hero-metric strong {
    color: var(--text-primary);
    font-size: clamp(14px, 1.35vw, 17px);
    line-height: 1.1;
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .hero-metrics {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .hero-metric:nth-last-child(-n + 3) {
        border-bottom: 0;
    }
}
/* =======================================================
   THEME MODES
======================================================= */

:root,
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;

    --text-primary: #172638;
    --text-secondary: rgba(23, 38, 56, 0.73);
    --text-muted: rgba(23, 38, 56, 0.54);

    --surface:
        rgba(255, 255, 255, 0.68);

    --surface-strong:
        rgba(255, 255, 255, 0.88);

    --surface-border:
        rgba(37, 69, 91, 0.15);

    --accent: #167f86;
    --success: #278a5a;
    --danger: #c94f55;

    --shadow:
        0 24px 70px
        rgba(49, 80, 99, 0.16);
}

html[data-theme="light"] body {
    color: var(--text-primary);

    background:
        #dcebf2;
}

/*
 * Horní navigace a vyhledávání.
 */

html[data-theme="light"]
.brand-icon,
html[data-theme="light"]
.icon-button {
    background:
        rgba(255, 255, 255, 0.62);

    border-color:
        rgba(38, 70, 91, 0.14);

    box-shadow:
        0 12px 28px
        rgba(45, 76, 96, 0.12);
}

html[data-theme="light"]
.icon-button:hover {
    background:
        rgba(255, 255, 255, 0.86);
}

html[data-theme="light"]
.location-search input {
    color:
        var(--text-primary);

    background:
        rgba(255, 255, 255, 0.72);

    border-color:
        rgba(38, 70, 91, 0.16);

    box-shadow:
        0 16px 40px
        rgba(45, 76, 96, 0.13);
}

html[data-theme="light"]
.location-search input:focus {
    background:
        rgba(255, 255, 255, 0.92);

    border-color:
        rgba(22, 127, 134, 0.4);

    box-shadow:
        0 18px 45px
        rgba(45, 76, 96, 0.15),
        0 0 0 4px
        rgba(22, 127, 134, 0.08);
}

html[data-theme="light"]
.search-results {
    background:
        rgba(250, 253, 254, 0.96);

    box-shadow:
        0 26px 65px
        rgba(45, 76, 96, 0.22);
}

html[data-theme="light"]
.search-result:hover,
html[data-theme="light"]
.search-result.is-active {
    background:
        rgba(30, 105, 125, 0.08);
}

/*
 * Hlavní a sekční panely.
 */

html[data-theme="light"]
.hero-card,
html[data-theme="light"]
.forecast-section,
html[data-theme="light"]
.air-quality-section,
html[data-theme="light"]
.celestial-card,
html[data-theme="light"]
.weather-detail-card,
html[data-theme="light"]
.weather-chart-card,
html[data-theme="light"]
.meteo-center-section,
html[data-theme="light"]
.status-panel {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.73),
            rgba(242, 249, 251, 0.58)
        );

    border-color:
        rgba(38, 70, 91, 0.15);

    box-shadow:
        0 18px 48px
        rgba(45, 76, 96, 0.14);
}

/*
 * Menší vnitřní karty.
 */

html[data-theme="light"]
.hero-time-block,
html[data-theme="light"]
.hero-metric,
html[data-theme="light"]
.hourly-card,
html[data-theme="light"]
.daily-card,
html[data-theme="light"]
.air-quality-overview,
html[data-theme="light"]
.air-component-card,
html[data-theme="light"]
.celestial-details > div,
html[data-theme="light"]
.weather-chart-summary > div,
html[data-theme="light"]
.settings-group,
html[data-theme="light"]
.settings-option,
html[data-theme="light"]
.settings-info,
html[data-theme="light"]
.day-detail-hero,
html[data-theme="light"]
.day-detail-item,
html[data-theme="light"]
.sun-cycle,
html[data-theme="light"]
.planet-card {
    background:
        rgba(255, 255, 255, 0.48);

    border-color:
        rgba(38, 70, 91, 0.12);
}

html[data-theme="light"]
.hero-metric:hover,
html[data-theme="light"]
.hourly-card:hover,
html[data-theme="light"]
.daily-card:hover,
html[data-theme="light"]
.settings-option:hover {
    background:
        rgba(255, 255, 255, 0.72);

    border-color:
        rgba(38, 70, 91, 0.2);
}

/*
 * Aktivní prvky.
 */

html[data-theme="light"]
.hourly-card.is-current,
html[data-theme="light"]
.daily-card.is-today,
html[data-theme="light"]
.settings-option:has(input:checked) {
    background:
        linear-gradient(
            135deg,
            rgba(22, 127, 134, 0.13),
            rgba(255, 255, 255, 0.62)
        );

    border-color:
        rgba(22, 127, 134, 0.28);
}

/*
 * Modální okna.
 */

html[data-theme="light"]
.modal-backdrop {
    background:
        rgba(99, 122, 136, 0.42);
}

html[data-theme="light"]
.modal-panel {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(237, 247, 250, 0.99)
        );

    border-color:
        rgba(38, 70, 91, 0.16);

    box-shadow:
        0 35px 100px
        rgba(41, 67, 82, 0.3);
}

html[data-theme="light"]
.modal-close-button,
html[data-theme="light"]
.forecast-navigation-button,
html[data-theme="light"]
.clear-search-button,
html[data-theme="light"]
.meteo-detail-button,
html[data-theme="light"]
.weather-layer-button {
    background:
        rgba(255, 255, 255, 0.58);

    border-color:
        rgba(38, 70, 91, 0.14);
}

/*
 * Meteorologické mapy a planetární obloha
 * zůstávají záměrně tmavé kvůli čitelnosti.
 */

html[data-theme="light"]
.meteo-map-frame,
html[data-theme="light"]
.planet-sky-map {
    color: #ffffff;
}

html[data-theme="light"]
.planet-sky-map {
    --text-primary: #ffffff;
    --text-secondary:
        rgba(255, 255, 255, 0.72);
    --text-muted:
        rgba(255, 255, 255, 0.52);
}

/*
 * Scrollbary.
 */

html[data-theme="light"]
.hourly-forecast {
    scrollbar-color:
        rgba(38, 70, 91, 0.22)
        transparent;
}

html[data-theme="light"]
.hourly-forecast::-webkit-scrollbar-thumb {
    background:
        rgba(38, 70, 91, 0.2);
}
/* =======================================================
   FOOTER CARD
======================================================= */

.weather-footer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;

    margin-top: 22px;
    padding:
        clamp(20px, 3vw, 28px);

    color: var(--text-secondary);
    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(11, 24, 43, 0.58)
        );

    border:
        1px solid
        var(--surface-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.14);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.weather-footer-made {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;

    transition:
        color 160ms ease,
        opacity 160ms ease;
}

.weather-footer-made:hover {
    color: var(--accent);
}

.weather-footer-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;

    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.weather-footer-meta a {
    color: inherit;
    text-decoration: none;

    transition:
        color 160ms ease;
}

.weather-footer-meta a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.weather-footer-separator {
    opacity: 0.5;
}

html[data-theme="light"]
.weather-footer-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72),
            rgba(242, 249, 251, 0.58)
        );

    border-color:
        rgba(38, 70, 91, 0.15);

    box-shadow:
        0 18px 48px
        rgba(45, 76, 96, 0.13);
}

@media (max-width: 640px) {
    .weather-footer-card {
        padding: 19px 14px;
        border-radius: 24px;
    }

    .weather-footer-made {
        font-size: 12px;
    }

    .weather-footer-meta {
        flex-direction: column;
        gap: 5px;
    }

    .weather-footer-separator {
        display: none;
    }
}
/* =======================================================
   FINAL CARD & SUN PATH POLISH
======================================================= */

/*
 * Sjednocení hlavní karty s ostatními velkými panely.
 */

.hero-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(12, 25, 44, 0.68)
        );

    border:
        1px solid
        var(--surface-border);

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.15);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}

/*
 * Překryv už nemá kartu silně ztmavovat.
 * Ponechává pouze velmi jemné prostorové tónování.
 */

.hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.035),
            rgba(5, 14, 27, 0.08)
        );
}

/*
 * Světlý motiv používá stejný glass povrch
 * jako ostatní hlavní karty.
 */

html[data-theme="light"]
.hero-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.73),
            rgba(242, 249, 251, 0.58)
        );

    border-color:
        rgba(38, 70, 91, 0.15);

    box-shadow:
        0 18px 48px
        rgba(45, 76, 96, 0.14);
}

html[data-theme="light"]
.hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            rgba(82, 112, 129, 0.025)
        );
}

/*
 * Výraznější oblouk Slunce.
 */



/*
 * Jemná druhá světelná stopa těsně pod obloukem.
 */



/*
 * Linie horizontu pod obloukem.
 */



/*
 * Výraznější marker Slunce.
 */



/*
 * Úpravy pro denní motiv.
 */








/* =======================================================
   IMPORTANT DAILY ALERT
======================================================= */

.hero-alert {
    --alert-accent: #8ce1d5;
    --alert-background:
        rgba(140, 225, 213, 0.08);
    --alert-border:
        rgba(140, 225, 213, 0.18);

    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;

    color: var(--text-secondary);
    text-align: left;

    background:
        linear-gradient(
            135deg,
            var(--alert-background),
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid
        var(--alert-border);

    border-radius: 16px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.035);
}

.hero-alert[data-level="warning"] {
    --alert-accent: #ffd26f;
    --alert-background:
        rgba(255, 199, 83, 0.1);
    --alert-border:
        rgba(255, 199, 83, 0.23);
}

.hero-alert[data-level="danger"] {
    --alert-accent: #ff9999;
    --alert-background:
        rgba(255, 111, 111, 0.11);
    --alert-border:
        rgba(255, 111, 111, 0.25);
}

.hero-alert-icon {
    display: grid;
    flex: 0 0 auto;

    width: 40px;
    height: 40px;
    place-items: center;

    color: var(--alert-accent);
    font-size: 21px;

    background:
        color-mix(
            in srgb,
            var(--alert-accent) 11%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--alert-accent) 20%,
            transparent
        );

    border-radius: 13px;
}

.hero-alert-copy {
    min-width: 0;
}

.hero-alert-copy strong {
    display: block;

    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.3;
}

.hero-alert-copy p {
    margin: 4px 0 0;

    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

html[data-theme="light"]
.hero-alert {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--alert-accent) 8%,
                rgba(255, 255, 255, 0.62)
            ),
            rgba(255, 255, 255, 0.46)
        );

    border-color:
        color-mix(
            in srgb,
            var(--alert-accent) 24%,
            rgba(38, 70, 91, 0.1)
        );
}

/* =======================================================
   DAY CHARACTERISTICS
======================================================= */

.day-characteristics {
    margin-top: 18px;
    padding: 16px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 17px;
}

.day-characteristics-header {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;

    color: var(--text-secondary);
}

.day-characteristics-header strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.day-characteristics-icon {
    color: var(--accent);
    font-size: 15px;
}

.day-characteristic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.day-characteristic-tag {
    --tag-accent: var(--accent);

    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;
    padding: 6px 10px;

    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;

    background:
        color-mix(
            in srgb,
            var(--tag-accent) 8%,
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--tag-accent) 17%,
            rgba(255, 255, 255, 0.055)
        );

    border-radius: 999px;
}

.day-characteristic-tag[data-tone="danger"] {
    --tag-accent: #ff8e8e;
}

.day-characteristic-tag[data-tone="warning"] {
    --tag-accent: #ffd16e;
}

.day-characteristic-tag[data-tone="warm"] {
    --tag-accent: #ffb06a;
}

.day-characteristic-tag[data-tone="cold"] {
    --tag-accent: #8dcfff;
}

.day-characteristic-tag[data-tone="rain"] {
    --tag-accent: #85c8ff;
}

.day-characteristic-tag[data-tone="wind"] {
    --tag-accent: #b6cceb;
}

.day-characteristic-tag[data-tone="sun"] {
    --tag-accent: #f1c85c;
}

.day-characteristic-tag[data-tone="cloud"] {
    --tag-accent: #b6c2cf;
}

.day-characteristic-tag[data-tone="calm"] {
    --tag-accent: #86dcb2;
}

.day-characteristic-tag-icon {
    color: var(--tag-accent);
    font-size: 13px;
}

html[data-theme="light"]
.day-characteristics {
    background:
        rgba(255, 255, 255, 0.48);

    border-color:
        rgba(38, 70, 91, 0.12);
}

html[data-theme="light"]
.day-characteristic-tag {
    color:
        var(--text-primary);

    background:
        color-mix(
            in srgb,
            var(--tag-accent) 8%,
            rgba(255, 255, 255, 0.7)
        );

    border-color:
        color-mix(
            in srgb,
            var(--tag-accent) 20%,
            rgba(38, 70, 91, 0.08)
        );
}
/* =======================================================
   FINAL SUN PATH ALIGNMENT
======================================================= */

.sun-path {
    position: relative;

    margin-top: 44px;

    overflow: visible;
}



/*
 * Záře používá stejný eliptický tvar,
 * nikoliv rovný gradientový proužek.
 */


/*
 * Horizont mezi východem a západem.
 */











/* =======================================================
   FINAL MOBILE HERO FIX
======================================================= */

@media (max-width: 640px) {

    .app-shell {
        width:
            min(
                calc(100% - 20px),
                1180px
            );
    }

    .hero-card {
        min-height: auto;

        overflow: hidden;

        border-radius: 26px;
    }

    .hero-content {
        padding:
            18px
            12px
            20px;
    }

    .hero-main {
        width: 100%;

        padding:
            8px
            2px
            20px;
    }

    .hero-icon {
        width: 130px;
        height: 112px;

        margin:
            0
            auto
            4px;

        font-size: 5.8rem;
    }

    .hero-temperature {
        font-size: 76px;
        line-height: 0.95;
    }

    .hero-condition {
        margin:
            13px
            0
            17px;

        font-size: 25px;
    }

    .hero-range {
        gap: 30px;

        margin-bottom: 22px;

        font-size: 15px;
    }

    .hero-summary {
        width: 100%;
        max-width: 315px;

        margin-inline: auto;

        font-size: 14px;
        line-height: 1.55;
    }

    /*
     * Dvě dostatečně široké kolony.
     */
    .hero-metrics {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;

        padding-top: 18px;
    }

    /*
     * Na mobilu musí být obsah karty svisle.
     */
    .hero-metric {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 7px;

        min-width: 0;
        min-height: 108px;

        padding:
            11px
            7px;

        text-align: center;

        border:
            1px solid
            rgba(255, 255, 255, 0.1);

        border-radius: 16px;
    }

    /*
     * Zrušení starých pravidel dělicích okrajů.
     */
    .hero-metric:nth-child(n) {
        border-right:
            1px solid
            rgba(255, 255, 255, 0.1);

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.1);
    }

    .hero-metric-icon {
        flex: 0 0 auto;

        width: 39px;
        height: 39px;

        font-size: 19px;

        border-radius: 12px;
    }

    .hero-metric > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;

        width: 100%;
        min-width: 0;
    }

    .hero-metric-label {
        display: block;

        width: 100%;

        overflow: hidden;

        font-size: 10px;
        line-height: 1.25;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-metric strong {
        display: block;

        width: 100%;

        overflow: hidden;

        font-size: 15px;
        line-height: 1.25;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-alert {
        align-items: flex-start;

        margin-top: 12px;
        padding: 13px 11px;

        border-radius: 16px;
    }

    .hero-alert-icon {
        width: 37px;
        height: 37px;

        font-size: 18px;
    }

    .hero-alert-copy {
        min-width: 0;
    }

    .hero-alert-copy strong {
        font-size: 12px;
    }

    .hero-alert-copy p {
        font-size: 11px;
        line-height: 1.48;
    }

    /*
     * Karty Slunce a Měsíce pod sebou.
     */
    .sunmoon-grid {
        grid-template-columns: 1fr;
    }

    .moon-visual {
        grid-template-columns:
            92px
            minmax(0, 1fr);

        gap: 15px;
    }

    .moon-disc {
        width: 90px;
        height: 90px;
    }
}
@media (max-width: 360px) {

    .hero-metrics {
        grid-template-columns: 1fr;
    }

    .hero-metric {
        min-height: 92px;
    }

    .moon-visual {
        grid-template-columns: 1fr;
    }

    .moon-disc {
        margin-inline: auto;
    }
}

/* SOFON WEATHER: FAVORITES START */

#favoritesButton.is-active {
    color: #ffd36f;

    background:
        linear-gradient(
            145deg,
            rgba(255, 211, 111, 0.16),
            rgba(255, 255, 255, 0.08)
        );

    border-color:
        rgba(255, 211, 111, 0.32);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.13),
        0 0 18px
        rgba(255, 211, 111, 0.12);
}

.favorites-panel {
    width: min(720px, 100%);
}

.favorites-content {
    display: grid;
    gap: 16px;

    margin-top: 28px;
}

.favorites-current-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(140, 225, 213, 0.09),
            rgba(255, 255, 255, 0.035)
        );

    border:
        1px solid
        rgba(140, 225, 213, 0.18);

    border-radius: 20px;
}

.favorites-current-copy {
    min-width: 0;
}

.favorites-current-label {
    display: block;

    margin-bottom: 6px;

    color: var(--accent);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.favorites-current-copy strong {
    display: block;

    overflow: hidden;

    font-size: 20px;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-current-copy p {
    margin: 6px 0 0;

    overflow: hidden;

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-primary-button {
    flex: 0 0 auto;

    min-height: 44px;
    padding: 10px 15px;

    color: #08201e;
    font: inherit;
    font-size: 12px;
    font-weight: 750;

    cursor: pointer;

    background: var(--accent);
    border: 1px solid transparent;
    border-radius: 14px;

    transition:
        transform 160ms ease,
        filter 160ms ease,
        opacity 160ms ease;
}

.favorites-primary-button:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.favorites-primary-button.is-remove {
    color: #ffdede;

    background:
        rgba(255, 112, 112, 0.12);

    border-color:
        rgba(255, 112, 112, 0.25);
}

.favorites-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.favorites-message {
    margin: 0;
    padding: 11px 13px;

    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;

    background:
        rgba(140, 225, 213, 0.08);

    border:
        1px solid
        rgba(140, 225, 213, 0.18);

    border-radius: 14px;
}

.favorites-message[data-level="success"] {
    color: #bff2d2;

    background:
        rgba(84, 202, 135, 0.1);

    border-color:
        rgba(84, 202, 135, 0.22);
}

.favorites-message[data-level="error"] {
    color: #ffd2d2;

    background:
        rgba(255, 112, 112, 0.1);

    border-color:
        rgba(255, 112, 112, 0.23);
}

.favorites-list-section {
    padding: 20px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    border-radius: 20px;
}

.favorites-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 14px;
}

.favorites-list-header h3 {
    margin: 0 0 5px;

    font-size: 18px;
    letter-spacing: -0.025em;
}

.favorites-list-header p {
    margin: 0;

    color: var(--text-muted);
    font-size: 12px;
}

.favorites-count {
    flex: 0 0 auto;

    padding: 6px 9px;

    color: var(--accent);
    font-size: 10px;
    font-weight: 750;

    background:
        rgba(140, 225, 213, 0.09);

    border:
        1px solid
        rgba(140, 225, 213, 0.18);

    border-radius: 999px;
}

.favorites-list {
    display: grid;
    gap: 9px;

    max-height: min(42vh, 420px);
    overflow-y: auto;

    padding-right: 2px;
}

.favorite-item {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        42px;
    gap: 8px;

    padding: 7px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 16px;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.favorite-item:hover {
    background:
        rgba(255, 255, 255, 0.065);

    border-color:
        rgba(255, 255, 255, 0.12);
}

.favorite-item.is-current {
    background:
        linear-gradient(
            135deg,
            rgba(255, 211, 111, 0.1),
            rgba(140, 225, 213, 0.06)
        );

    border-color:
        rgba(255, 211, 111, 0.25);
}

.favorite-item-main {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
    padding: 8px 9px;

    color: inherit;
    text-align: left;

    cursor: pointer;

    background: transparent;
    border: 0;
    border-radius: 12px;
}

.favorite-item-icon {
    display: grid;
    flex: 0 0 auto;

    width: 34px;
    height: 34px;
    place-items: center;

    color: #ffd36f;
    font-size: 17px;

    background:
        rgba(255, 211, 111, 0.09);

    border:
        1px solid
        rgba(255, 211, 111, 0.16);

    border-radius: 11px;
}

.favorite-item-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.favorite-item-copy strong,
.favorite-item-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-item-copy strong {
    font-size: 14px;
}

.favorite-item-copy span {
    color: var(--text-muted);
    font-size: 11px;
}

.favorite-remove-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;

    align-self: center;

    padding: 0;

    color: var(--text-muted);
    font: inherit;
    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 12px;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.favorite-remove-button:hover {
    color: #ffd1d1;

    background:
        rgba(255, 112, 112, 0.11);

    border-color:
        rgba(255, 112, 112, 0.22);
}

.favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 28px 18px 22px;

    color: var(--text-secondary);
    text-align: center;
}

.favorites-empty > span {
    color: #ffd36f;
    font-size: 30px;
}

.favorites-empty strong {
    font-size: 14px;
}

.favorites-empty p {
    max-width: 430px;
    margin: 0;

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.favorites-info {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 13px 15px;

    background:
        rgba(255, 255, 255, 0.03);

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 14px;
}

.favorites-info > span {
    display: grid;
    flex: 0 0 auto;

    width: 22px;
    height: 22px;
    place-items: center;

    color: var(--accent);
    font-size: 11px;
    font-weight: 800;

    background:
        rgba(140, 225, 213, 0.09);

    border-radius: 50%;
}

.favorites-info p {
    margin: 1px 0 0;

    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

html[data-theme="light"]
#favoritesButton.is-active {
    color: #b77b00;

    background:
        rgba(255, 210, 95, 0.22);

    border-color:
        rgba(183, 123, 0, 0.2);
}

html[data-theme="light"]
.favorites-current-card,
html[data-theme="light"]
.favorites-list-section,
html[data-theme="light"]
.favorites-info {
    background:
        rgba(255, 255, 255, 0.52);

    border-color:
        rgba(38, 70, 91, 0.12);
}

html[data-theme="light"]
.favorite-item {
    background:
        rgba(255, 255, 255, 0.46);

    border-color:
        rgba(38, 70, 91, 0.1);
}

html[data-theme="light"]
.favorite-item:hover {
    background:
        rgba(255, 255, 255, 0.72);

    border-color:
        rgba(38, 70, 91, 0.17);
}

html[data-theme="light"]
.favorite-remove-button {
    color: var(--text-secondary);

    background:
        rgba(255, 255, 255, 0.58);

    border-color:
        rgba(38, 70, 91, 0.1);
}

html[data-theme="light"]
.favorites-primary-button.is-remove {
    color: #9c2f36;
}

@media (max-width: 640px) {
    .header-actions {
        gap: 7px;
    }

    .header-actions .icon-button {
        width: 43px;
        height: 43px;

        border-radius: 14px;
    }

    .favorites-panel {
        padding: 20px 14px;
        border-radius: 24px;
    }

    .favorites-content {
        margin-top: 22px;
    }

    .favorites-current-card {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        padding: 16px;
    }

    .favorites-current-copy strong,
    .favorites-current-copy p {
        white-space: normal;
    }

    .favorites-primary-button {
        width: 100%;
    }

    .favorites-list-section {
        padding: 15px 12px;
    }

    .favorites-list-header {
        gap: 12px;
    }

    .favorites-list-header p {
        line-height: 1.45;
    }

    .favorite-item {
        grid-template-columns:
            minmax(0, 1fr)
            40px;
    }

    .favorite-item-main {
        gap: 9px;
        padding: 7px 5px;
    }

    .favorite-item-icon {
        width: 31px;
        height: 31px;

        font-size: 15px;
    }

    .favorite-remove-button {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 380px) {
    .header-actions {
        gap: 5px;
    }

    .header-actions .icon-button {
        width: 39px;
        height: 39px;

        font-size: 18px;
        border-radius: 13px;
    }

    .favorites-list-header {
        flex-direction: column;
    }
}

/* SOFON WEATHER: FAVORITES END */

/* SOFON WEATHER: HORIZONTAL CURRENT WEATHER START */

/*
 * Desktop/tablet: hlavní údaje aktuálního počasí v jedné kompaktní řadě.
 * Velikosti ikony, teploty a textů se nemění; mění se pouze rozložení.
 * Mobil do 759 px zůstává v původním svislém uspořádání.
 */
@media (min-width: 760px) {
    .hero-main {
        display: grid;
        grid-template-columns:
            180px
            max-content
            minmax(220px, 340px);
        grid-template-areas:
            "icon temperature condition"
            "icon temperature range"
            "summary summary summary";
        align-items: center;
        justify-content: center;
        column-gap: clamp(24px, 3.2vw, 42px);
        row-gap: 6px;

        width: 100%;
        min-height: 0;

        padding:
            2px
            clamp(18px, 4vw, 48px)
            8px;
    }

    .hero-icon {
        grid-area: icon;
        margin: 0;
    }

    .hero-temperature {
        grid-area: temperature;
        align-self: center;
        margin: 0;
        white-space: nowrap;
    }

    .hero-condition {
        grid-area: condition;
        align-self: end;
        margin: 0;
        text-align: left;
    }

    .hero-range {
        grid-area: range;
        align-self: start;
        justify-content: flex-start;
        margin: 0;
        text-align: left;
    }

    .hero-summary {
        grid-area: summary;
        width: min(720px, 100%);
        margin: 10px auto 0;
        text-align: center;
    }
}

/*
 * Užší tablety: zachováme stejné velikosti prvků,
 * pouze stáhneme mezery mezi sloupci.
 */
@media (min-width: 760px) and (max-width: 920px) {
    .hero-main {
        grid-template-columns:
            180px
            max-content
            minmax(190px, 1fr);
        column-gap: 18px;
        padding-inline: 8px;
    }
}

/* SOFON WEATHER: HORIZONTAL CURRENT WEATHER END */

/* SOFON WEATHER: APPLE-LIKE SUN HORIZON START */

/*
 * Celodenní dráha Slunce inspirovaná principem Apple Weather:
 * - pevná linie horizontu,
 * - denní oblouk nad horizontem,
 * - noční oblouk pod horizontem,
 * - marker se pohybuje podle místního času zvoleného místa.
 */
.sun-path {
    margin-top: 24px;
}

.sun-path-stage {
    position: relative;

    width: 100%;
    height: 124px;

    overflow: visible;

    border-radius: 18px;

    isolation: isolate;
}

.sun-path-stage::after {
    position: absolute;
    top: 60%;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 0;

    content: "";

    background:
        linear-gradient(
            180deg,
            rgba(92, 139, 198, 0.02),
            rgba(39, 84, 139, 0.10)
        );

    border-radius: 0 0 18px 18px;

    pointer-events: none;
}

.sun-path-svg {
    position: absolute;
    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}

.sun-orbit-curve {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}

.sun-orbit-curve-day {
    stroke:
        rgba(151, 198, 255, 0.76);
    stroke-width: 7;

    filter:
        drop-shadow(
            0 0 5px
            rgba(118, 176, 246, 0.2)
        );
}

.sun-orbit-curve-night {
    stroke:
        rgba(104, 151, 208, 0.34);
    stroke-width: 6;
}

.sun-horizon-line {
    stroke:
        rgba(235, 244, 255, 0.50);
    stroke-width: 1.6;

    vector-effect: non-scaling-stroke;
}

.sun-horizon-point {
    fill:
        rgba(229, 240, 255, 0.72);

    stroke:
        rgba(109, 158, 217, 0.25);
    stroke-width: 1;

    vector-effect: non-scaling-stroke;
}

.sun-orbit-marker {
    position: absolute;

    z-index: 3;

    display: block;

    width: 19px;
    height: 19px;

    padding: 0;

    background: #ffffff;
    border: 0;
    border-radius: 50%;

    box-shadow:
        0 0 0 4px
        rgba(255, 244, 204, 0.08),
        0 0 13px
        rgba(255, 231, 150, 0.78),
        0 0 28px
        rgba(255, 191, 72, 0.34),
        0 4px 9px
        rgba(0, 0, 0, 0.20);

    transform:
        translate(-50%, -50%);

    transition:
        left 700ms ease,
        top 700ms ease,
        opacity 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;

    pointer-events: none;
}

.sun-path-stage[data-sun-position="below"]
.sun-orbit-marker {
    opacity: 0.82;

    background: #e4eefc;

    box-shadow:
        0 0 0 4px
        rgba(157, 194, 241, 0.07),
        0 0 12px
        rgba(141, 184, 236, 0.58),
        0 0 24px
        rgba(91, 142, 207, 0.26),
        0 4px 9px
        rgba(0, 0, 0, 0.22);
}

.sun-path-times {
    margin-top: 5px;
}

html[data-theme="light"]
.sun-path-stage::after {
    background:
        linear-gradient(
            180deg,
            rgba(92, 139, 198, 0.015),
            rgba(72, 117, 171, 0.07)
        );
}

html[data-theme="light"]
.sun-orbit-curve-day {
    stroke:
        rgba(65, 125, 195, 0.68);

    filter:
        drop-shadow(
            0 0 4px
            rgba(61, 116, 181, 0.12)
        );
}

html[data-theme="light"]
.sun-orbit-curve-night {
    stroke:
        rgba(75, 117, 165, 0.28);
}

html[data-theme="light"]
.sun-horizon-line {
    stroke:
        rgba(62, 88, 111, 0.38);
}

html[data-theme="light"]
.sun-horizon-point {
    fill:
        rgba(78, 113, 148, 0.62);

    stroke:
        rgba(255, 255, 255, 0.48);
}

html[data-theme="light"]
.sun-orbit-marker {
    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(255, 199, 71, 0.08),
        0 0 12px
        rgba(244, 181, 47, 0.65),
        0 0 24px
        rgba(230, 152, 23, 0.26),
        0 3px 7px
        rgba(65, 72, 79, 0.16);
}

html[data-theme="light"]
.sun-path-stage[data-sun-position="below"]
.sun-orbit-marker {
    background: #f7fbff;

    box-shadow:
        0 0 0 4px
        rgba(94, 142, 198, 0.05),
        0 0 10px
        rgba(78, 127, 184, 0.35),
        0 3px 7px
        rgba(65, 72, 79, 0.15);
}

@media (max-width: 640px) {
    .sun-path {
        margin-top: 20px;
    }

    .sun-path-stage {
        height: 108px;
    }

    .sun-orbit-marker {
        width: 17px;
        height: 17px;
    }
}

/* SOFON WEATHER: APPLE-LIKE SUN HORIZON END */

/* SOFON WEATHER: HOURLY DETAIL MODAL START */

/* Hodinová karta je interaktivní stejně jako denní karta. */
.hourly-card[role="button"] {
    cursor: pointer;
}

.hourly-card[role="button"]:focus-visible {
    outline: 3px solid rgba(140, 225, 213, 0.38);
    outline-offset: 3px;
}

/* Kompaktnější hodinový modal. */
.hour-detail-panel {
    width: min(690px, 100%);
    padding: clamp(22px, 3.4vw, 30px);
}

.hour-detail-panel .modal-header {
    gap: 18px;
}

.hour-detail-panel .modal-condition {
    margin-top: 7px;
}

.hour-detail-hero {
    justify-content: flex-start;
    gap: 20px;

    margin-top: 20px;
    padding: 18px 20px;
}

.hour-detail-icon {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 92px;
}

.hour-detail-temperature-block {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

    min-width: 0;
}

.hour-detail-label,
.hour-detail-feels {
    color: var(--text-muted);
    font-size: 13px;
}

.hour-detail-temperature-block > strong {
    color: var(--text-primary);
    font-size: clamp(42px, 8vw, 62px);
    font-weight: 560;
    line-height: 1;
    letter-spacing: -0.055em;
}

.hour-detail-feels {
    color: var(--text-secondary);
}

/*
 * Všechny položky hodinového detailu používají stejnou šířku.
 * Složení srážek a Lokalita/Aktivita už tedy neroztahují celý řádek.
 */
.hour-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.hour-detail-item,
.hour-detail-item-wide {
    grid-column: auto;
    min-width: 0;
    min-height: 56px;
    padding: 11px 14px;
}

.hour-detail-item strong,
.hour-detail-item-wide strong {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

html[data-theme="light"]
.hourly-card[role="button"]:focus-visible {
    outline-color: rgba(22, 127, 134, 0.34);
}

@media (max-width: 640px) {
    .hour-detail-panel {
        width: 100%;
        padding: 20px 15px;
    }

    .hour-detail-hero {
        align-items: center;
        gap: 14px;
        margin-top: 16px;
        padding: 16px;
    }

    .hour-detail-icon {
        min-width: 82px;
        min-height: 78px;
    }

    .hour-detail-temperature-block > strong {
        font-size: 42px;
    }

    .hour-detail-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .hour-detail-item,
    .hour-detail-item-wide {
        grid-column: auto;
        min-height: 54px;
        padding: 11px 13px;
    }
}

/* SOFON WEATHER: HOURLY DETAIL MODAL END */

/* SOFON WEATHER: PHASE05 UV SCALE & MAP LAYERS START */

/* UV index – plná barevná škála s ukazatelem aktuální hodnoty. */
#uvDetailCard {
    --uv-progress: 0%;
}

#uvDetailCard .detail-progress {
    position: relative;

    height: 9px;
    margin-top: 16px;

    overflow: visible;

    background:
        linear-gradient(
            90deg,
            #70dfad 0%,
            #70dfad 16%,
            #b8dd78 24%,
            #f0d66f 42%,
            #ffad66 61%,
            #ff7f79 80%,
            #d991e8 100%
        );

    border-radius: 999px;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Původní progress value už neurčuje délku – škála musí být vidět celá. */
#uvDetailCard .detail-progress-value {
    width: 100% !important;
    opacity: 0;
}

#uvDetailCard .detail-progress::after {
    position: absolute;
    top: 50%;
    left: clamp(7px, var(--uv-progress, 0%), calc(100% - 7px));

    z-index: 3;

    width: 16px;
    height: 16px;

    content: "";

    background: #ffffff;
    border: 3px solid var(--detail-accent);
    border-radius: 50%;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.20),
        0 0 0 2px rgba(255, 255, 255, 0.25),
        0 0 12px color-mix(in srgb, var(--detail-accent) 46%, transparent);

    transform: translate(-50%, -50%);

    transition:
        left 600ms ease,
        border-color 350ms ease;
}

.uv-scale-labels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;

    margin-top: 8px;

    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
}

.uv-scale-labels span:first-child {
    text-align: left;
}

.uv-scale-labels span:last-child {
    text-align: right;
}

html[data-theme="light"]
#uvDetailCard .detail-progress::after {
    box-shadow:
        0 3px 10px rgba(45, 76, 96, 0.18),
        0 0 0 2px rgba(255, 255, 255, 0.72),
        0 0 10px color-mix(in srgb, var(--detail-accent) 38%, transparent);
}

/* Více Windy vrstev – zachováme kompaktní pill tlačítka a zalamování. */
.weather-layer-switcher {
    align-items: center;
    row-gap: 8px;
}

.weather-layer-button {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .uv-scale-labels {
        font-size: 8px;
    }

    .weather-layer-switcher {
        display: flex;
        flex-wrap: wrap;
    }

    .weather-layer-button {
        width: auto;
        flex: 0 0 auto;
    }
}

/* SOFON WEATHER: PHASE05 UV SCALE & MAP LAYERS END */

/* SOFON WEATHER – sun path marker icon START */

#sunPathMarker{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible;
    transform:translate(-50%, -50%);
    color:transparent;
    font-size:0;
}

#sunPathMarker::before{
    content:"☀️";
    display:block;
    font-size:1.65rem;
    line-height:1;
    color:#f6b31a;
    filter:drop-shadow(0 0 10px rgba(255, 191, 73, .40));
}

/* SOFON WEATHER – sun path marker icon END */
/* SOFON WEATHER – moon progress marker START */

.moon-cycle-progress{
    position:relative;
    overflow:visible;
}

#moonCycleProgress{
    position:relative;
    overflow:visible;
    min-width:6px;
    border-radius:999px;
}

#moonCycleProgress::after{
    content:"🌓";
    position:absolute;
    top:50%;
    right:0;
    transform:translate(50%, -50%);
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.15rem;
    line-height:1;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));
    pointer-events:none;
}

/* SOFON WEATHER – moon progress marker END */
/* SOFON WEATHER – logo without card START */

html[data-theme="light"] .brand-icon,
html[data-theme="dark"] .brand-icon,
.brand-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible;
}

.brand-icon img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 0;
}

/* SOFON WEATHER – logo without card END */
@media (max-width: 700px) {
    .brand-icon img {
        width: 46px;
        height: 46px;
    }
}