:root{
    --bg-blur: 14px;
    --glass-bg: rgba(255,255,255,0.14);
    --glass-stroke: rgba(255,255,255,0.35);
    --text: #ffffff;
    --muted: rgba(255,255,255,0.75);
    --shadow: 0 20px 40px rgba(0,0,0,0.25);
    --panel-radius: 16px;
    --accent: #ffffff;
}

*{ box-sizing:border-box }

body{
    margin:0;
    min-height:100svh;
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    background:
            linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.35)),
            url("background.jpg") center/cover no-repeat fixed;
    display:grid;
    place-items:center;
}

.glass{
    width:min(1100px, 92vw);
    backdrop-filter: blur(var(--bg-blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--bg-blur)) saturate(120%);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow);
    overflow:hidden;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid rgba(255,255,255,0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
}
.brand{
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--muted);
}
nav ul{
    list-style:none;
    display:flex;
    gap:18px;
    margin:0;
    padding:0;
}
nav a{
    color:var(--muted);
    text-decoration:none;
    font-size:13px;
}
nav a:hover{ color:#fff }

.hero{
    display:grid;
    grid-template-columns: 1.4fr .8fr;
    gap:24px;
    padding:38px 40px 20px;
}
.title{
    font-size:42px;
    font-weight:600;
    letter-spacing:0.02em;
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.subtitle{
    margin-top:10px;
    color:var(--muted);
    font-size:14px;
    max-width:56ch;
    display:flex;
    align-items:center;
    gap:10px;
}

#status{
    background: rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.20);
    border-radius: 12px;
    padding:6px 10px;
    font-size:12px;
    line-height:1.15;
    color:#fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 6px 16px rgba(0,0,0,0.18);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}
#status-icon{
    display:inline-flex;
    width:16px; height:16px;
    align-items:center; justify-content:center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
#status-text{
    letter-spacing:.01em;
    font-size:12px;
    font-weight:600;
}

.status--info{
    border-color: rgba(155,211,255,0.45);
    box-shadow: inset 0 0 0 1px rgba(155,211,255,0.14), 0 6px 16px rgba(0,0,0,0.18);
    background: linear-gradient(180deg, rgba(155,211,255,0.18), rgba(155,211,255,0.08));
}
.status--success{
    border-color: rgba(100, 216, 150, 0.45);
    box-shadow: inset 0 0 0 1px rgba(100,216,150,0.16), 0 6px 16px rgba(0,0,0,0.18);
    background: linear-gradient(180deg, rgba(100,216,150,0.20), rgba(100,216,150,0.10));
}
.status--warning{
    border-color: rgba(255, 209, 102, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255,209,102,0.18), 0 6px 16px rgba(0,0,0,0.18);
    background: linear-gradient(180deg, rgba(255,209,102,0.22), rgba(255,209,102,0.12));
}
.status--error{
    border-color: rgba(255, 123, 123, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255,123,123,0.20), 0 6px 16px rgba(0,0,0,0.20);
    background: linear-gradient(180deg, rgba(255,123,123,0.22), rgba(255,123,123,0.12));
}

@keyframes pulseStatus {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
    100% { filter: brightness(1); }
}
.status--loading{
    animation: pulseStatus 1.4s ease-in-out infinite;
    border-color: rgba(155,211,255,0.55);
    background: linear-gradient(180deg, rgba(155,211,255,0.20), rgba(155,211,255,0.10));
}

.weather-icon{
    width:64px; height:64px;
    margin: 4px auto 8px;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.weather-icon.small{
    width:18px; height:18px; margin:0;
    filter:none;
}

.search{
    display:flex;
    gap:10px;
    margin-top:14px;
}
.search input{
    flex:1;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.10);
    color:#fff;
    outline:none;
    backdrop-filter: blur(6px);
}
.search input::placeholder{ color:rgba(255,255,255,.6) }
.btn{
    padding:10px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.16);
    color:#fff;
    cursor:pointer;
}
.btn.ghost{
    background: transparent;
}
.btn:hover{ filter:brightness(1.05) }

.digital{
    justify-self:end;
    width:240px;
    background: rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.25);
    border-radius: 14px;
    padding:16px 18px;
    display:grid;
    grid-template-columns: 1fr auto;
    gap:10px;
    align-items:center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.digital small{
    color:var(--muted);
    display:block;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.temp{
    font-family: "SF Mono","JetBrains Mono",ui-monospace,monospace;
    font-size:54px;
    font-weight:700;
    letter-spacing:.02em;
}
.right{ text-align:right }

.cards{
    padding:10px 34px 30px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:18px;
}
@media (max-width: 960px){
    .hero{ grid-template-columns: 1fr }
    .digital{ justify-self:start }
    .cards{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 620px){
    .cards{ grid-template-columns: repeat(2, 1fr) }
}

.card{
    background: rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:12px;
    padding:16px;
    text-align:center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.card h4{
    margin:8px 0 6px;
    font-weight:600;
    font-size:13px;
    color:#fff;
    letter-spacing:.02em;
}
.card p{
    margin:0;
    font-size:12px;
    color:var(--muted);
}

.cloud{
    width:64px; height:40px;
    margin: 4px auto 8px;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.cloud svg{ width:100%; height:100% }
.thin{ opacity:.9 }
.puffy{ transform: scale(1.08) }

.footer{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    padding:18px 34px 22px;
    border-top:1px solid rgba(255,255,255,0.16);
    color:var(--muted);
    font-size:12px;
    overflow: hidden;
    white-space: nowrap;
}

.footer div{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding:8px 10px;
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
}

.footer .accent{
    color: color-mix(in oklab, var(--accent) 78%, #ffffff 22%);
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    letter-spacing:.02em;
    font-weight:600;
    flex: 0 0 auto;
    min-width: 0;
}

.footer span[id]{
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.18);
    padding:6px 10px;
    border-radius:999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    font-variant-numeric: tabular-nums;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .2s ease;
}

.footer span[id].badge--good{
    border-color: rgba(100,216,150,0.55);
    background: linear-gradient(180deg, rgba(100,216,150,0.20), rgba(100,216,150,0.10));
    box-shadow: inset 0 0 0 1px rgba(100,216,150,0.16);
    color:#fff;
}
.footer span[id].badge--warn{
    border-color: rgba(255,209,102,0.55);
    background: linear-gradient(180deg, rgba(255,209,102,0.22), rgba(255,209,102,0.12));
    box-shadow: inset 0 0 0 1px rgba(255,209,102,0.18);
    color:#fff;
}
.footer span[id].badge--bad{
    border-color: rgba(255,123,123,0.55);
    background: linear-gradient(180deg, rgba(255,123,123,0.22), rgba(255,123,123,0.12));
    box-shadow: inset 0 0 0 1px rgba(255,123,123,0.20);
    color:#fff;
}

.footer span[id].badge--time{
    border-color: rgba(155,211,255,0.45);
    background: linear-gradient(180deg, rgba(155,211,255,0.18), rgba(155,211,255,0.08));
    box-shadow: inset 0 0 0 1px rgba(155,211,255,0.14);
}

.footer span[id].badge--time.badge--soon{
    border-color: rgba(155,211,255,0.65);
    box-shadow:
        inset 0 0 0 1px rgba(155,211,255,0.22),
        0 0 0 3px rgba(155,211,255,0.10);
    animation: pulseStatus 1.6s ease-in-out infinite;
}

@media (max-width: 760px){
    .footer{
        gap: 10px;
        padding:16px 16px 18px;
    }
    .footer div{
        gap: 8px;
        padding:6px 8px;
    }
    .footer span[id]{ padding:5px 8px; }
}