/* Shared visual system: native fonts, no additional network dependencies. */
:root { color-scheme: dark; --canvas:#0b1423; --panel:#131f31; --line:#2b394e; --muted:#b2bfd1; --accent:#b6edc4; }
body { background:var(--canvas); color:#f4f7fc; font-size:16px; line-height:1.6; background-attachment:scroll; }
button, input, select { font:inherit; }
a { text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.site-bar { max-width:1200px; margin:auto; padding:24px; display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); }
.site-brand { color:#fff; font-size:26px; font-weight:800; letter-spacing:-1px; text-decoration:none; }
.site-brand span { color:var(--accent); }
.site-caption { color:var(--muted); font-size:13px; margin-left:auto; }
.dashboard-intro { max-width:1200px; margin:36px auto 24px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.dashboard-intro h2 { font-size:28px; letter-spacing:-1px; line-height:1.4; }
.dashboard-intro p { color:var(--muted); margin-top:6px; font-size:14px; }
.dashboard-search { display:flex; gap:8px; width:min(440px,100%); }
.dashboard-search input { min-width:0; flex:1; border:1px solid var(--line); background:var(--panel); color:white; padding:12px 16px; border-radius:12px; }
.dashboard-search button, .retry-weather { background:var(--accent); color:#12271b; border:0; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer; min-height:44px; }
.dashboard-search input::placeholder { color:var(--muted); }
.weather-app.container { max-width:1152px; min-height:0; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; padding:0; position:relative; }
.weather-app .header { grid-column:1; grid-row:1; text-align:left; padding:76px 30px 24px; background:radial-gradient(ellipse at 100% 0%,#5a96ad 0%,transparent 65%),linear-gradient(145deg,#244c77,#19334f); border:1px solid #4c6d88; border-radius:24px; overflow:hidden; }
.weather-app .menu-btn { top:18px; left:24px; min-width:42px; min-height:42px; padding:4px 10px; font-size:22px; border:1px solid #8ba4bb; border-radius:10px; box-shadow:none; z-index:5; }
.weather-app .header-controls { top:18px; left:80px; right:auto; gap:8px; z-index:5; }
.weather-app .header-controls button { width:42px; height:42px; min-width:42px; min-height:42px; border:1px solid #8ba4bb; border-radius:10px; font-size:19px; }
.weather-app .location-name { font-size:30px; margin:0 0 4px; text-shadow:none; }
.weather-app .weather-condition { font-size:16px; margin:0; text-shadow:none; }
.weather-app .weather-icon { position:absolute; top:118px; right:32px; font-size:88px; margin:0; filter:none; }
.weather-app .current-temp { font-size:92px; line-height:1.2; margin:14px 0 4px; font-weight:300; text-shadow:none; }
.weather-app .feels-like { font-size:15px; margin:0 0 12px; }
.weather-app .temp-range { justify-content:flex-start; margin:0 0 24px; gap:14px; }
.weather-app .temp-min,.weather-app .temp-max { font-size:17px; }
.weather-app .temp-bar { max-width:100px; }
.weather-app .weather-summary { margin:0; gap:10px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.weather-app .summary-card { background:#142c4570; box-shadow:none; border:1px solid #7893aa70; padding:12px 10px; border-radius:12px; backdrop-filter:none; }
.weather-app .summary-label { font-size:12px; color:#d5e2ed; }
.weather-app .summary-value { font-size:18px; line-height:1.4; }
.weather-app .daily-forecast { grid-column:2; grid-row:1 / 3; }
.weather-app .daily-forecast,.weather-app .hourly-forecast,.weather-app .weather-details { margin:0; background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:22px; backdrop-filter:none; min-width:0; }
.weather-app .hourly-forecast { grid-column:1; grid-row:2; }
.weather-app .forecast-title { font-size:18px; margin:0 0 18px; padding:0!important; }
.weather-app .hourly-container { justify-content:flex-start; padding:4px 0 12px; gap:10px; scrollbar-width:thin; scrollbar-color:#60758e transparent; }
.weather-app .hourly-container::-webkit-scrollbar { display:block; height:6px; }
.weather-app #locationText,.weather-app #languageText { display:none; }
.weather-app .hourly-item { background:#1c2b40; border:1px solid var(--line); border-radius:14px; min-width:72px; padding:12px 8px; cursor:default; }
.weather-app .hourly-item:hover { transform:none; }
.weather-app .hourly-rain { color:#a5d8ff; }
.weather-app .daily-row { padding:16px 0; min-height:78px; gap:8px; }
.weather-app .daily-day { font-size:16px; }
.weather-app .daily-date { color:var(--muted); font-size:12px; }
.weather-app .daily-icon { font-size:27px; }
.weather-app .daily-icon { margin:0 8px; }
.weather-app .daily-rain { margin-right:4px; min-width:32px; }
.weather-app .daily-temps { gap:8px; }
.weather-app .temp-range-bar { width:58px; margin:0 2px; }
.weather-app .temp-range-bar::after { left:var(--range-start, 0%); width:var(--range-width, 100%); }
.weather-app .daily-low,.weather-app .daily-high { font-size:17px; }
.weather-app .daily-rain { color:#a5d8ff; font-size:12px; }
.weather-app .weather-details { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 26px; }
.weather-app .detail-row { padding:14px 0; border-bottom:1px solid var(--line); min-width:0; gap:10px; }
.weather-app .detail-label,.weather-app .detail-value { font-size:15px; }
.weather-app .detail-label { color:var(--muted); }
.weather-app .detail-icon { font-size:23px; }
.weather-app .install-pwa { position:static; margin:10px 0; font-size:13px; }
.weather-app .loading:not(.location-btn-header) { top:auto; bottom:20px; left:50%; right:auto; transform:translateX(-50%); width:max-content; max-width:90vw; padding:14px 24px; border-radius:16px; flex-direction:row; gap:12px; background:#17293f; border:1px solid var(--line); pointer-events:none; }
.weather-app .loading-spinner { width:22px; height:22px; border-width:2px; margin:0; }
.weather-app #loadingMessage { font-size:14px; }
.weather-app .location-selector { color-scheme:light; }
.weather-state { max-width:1152px; margin:12px auto; display:flex; align-items:center; gap:12px; color:var(--muted); padding:0 4px; font-size:13px; }
.weather-state a { color:var(--accent); }
.weather-state .retry-weather { margin-left:auto; padding:6px 14px; }
.content-section { padding-top:28px; }
.content-shell { max-width:1152px; }
.content-nav { background:transparent; box-shadow:none; border:1px solid var(--line); padding:12px; border-radius:16px; gap:8px; margin-bottom:24px; backdrop-filter:none; }
.content-nav-link,.content-button-link { font-size:14px; border-radius:10px; }
.reference-disclosure summary { cursor:pointer; color:var(--muted); padding:12px 0; }
.reference-disclosure .content-panel { margin-top:12px; }
.content-panel { background:var(--panel); box-shadow:none; border:1px solid var(--line); border-radius:20px; padding:28px; margin-bottom:20px; backdrop-filter:none; }
.content-panel-title { font-size:23px; text-shadow:none; margin-bottom:20px; }
.content-card { background:#1b2a3e; border:1px solid var(--line); box-shadow:none; border-radius:14px; }
.content-card-title { font-size:18px; }
.content-card-text,.content-lead,.content-mini-text,.faq-preview-answer { color:#c4cfe0; line-height:1.8; }
.seo-search-section { display:none; }
.skip-link:focus { position:fixed; top:8px; left:8px; width:auto; height:auto; clip:auto; padding:12px; background:#fff; color:#132337; z-index:10000; }
.editorial-page .container { max-width:1000px; }
.editorial-page .content-section { background:var(--panel); border:1px solid var(--line); box-shadow:none; border-radius:20px; }
.editorial-page header { background:transparent; }
.editorial-page nav a { border-radius:10px; }
@media(max-width:900px) {
 .weather-app.container { margin:0 20px; grid-template-columns:minmax(0,1fr); }
 .weather-app .header,.weather-app .hourly-forecast,.weather-app .daily-forecast,.weather-app .weather-details { grid-column:1; grid-row:auto; }
 .weather-app .weather-details { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .dashboard-intro { flex-direction:column; align-items:flex-start; margin-top:24px; }
 .dashboard-search { width:100%; }
 .weather-state { margin:14px 24px; flex-wrap:wrap; }
}
@media(max-width:480px) {
 .site-bar { padding:16px 20px; } .site-caption { font-size:11px; }
 .dashboard-intro { padding:0 20px; } .dashboard-intro h2 { font-size:24px; }
 .weather-app.container { margin:0 12px; gap:14px; }
 .weather-app .header { padding:74px 20px 20px; }
 .weather-app .weather-icon { right:22px; font-size:70px; }
 .weather-app .location-name { max-width:100%; font-size:26px; }
 .weather-app .weather-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .weather-app .weather-details { gap:0 14px; padding:16px; }
 .weather-app .detail-left { gap:6px; } .weather-app .detail-icon { display:none; }
 .weather-app .detail-value { font-size:13px; }
 .weather-app .daily-forecast,.weather-app .hourly-forecast { padding:18px; }
 .content-section { padding:20px 12px 0; } .content-panel { padding:22px 18px; }
 .content-grid { grid-template-columns:1fr; }
 .content-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .content-nav-link { padding:10px 6px; text-align:center; }
 .content-grid-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
}