.weather-panel { margin-top: 20px; padding: 22px 25px; border: 1px solid var(--scene-line); border-radius: 22px; background: #ffffffdb; box-shadow: 0 4px 20px #2b382305; }
.weather-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 17px; }
.weather-heading > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--scene-ink); font-size: 13px; font-weight: 550; }
.weather-heading > span:first-child svg { width: 15px; height: 15px; stroke-width: 1.4; }
.weather-heading > small { color: #89907f; margin-left: auto; font-size: 10px; letter-spacing: .3px; }
.weather-demo-badge { border: 1px solid #d5c7b4; background: #f8f1e6; color: #947351; border-radius: 5px; font-size: 9px; padding: 3px 6px; }
.weather-content { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 30px; align-items: stretch; }
.weather-overview { min-width: 0; }
.weather-current { display: flex; align-items: center; gap: 12px; min-height: 77px; }
.weather-art { width: 73px; height: 73px; flex-shrink: 0; }
.weather-temperature { font-size: 39px; letter-spacing: -1.6px; color: var(--scene-ink); line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weather-temperature > small { font-size: 14px; letter-spacing: 0; margin-left: 1px; font-weight: 400; }
.weather-current > div:not(.weather-current-missing) { display: flex; flex-direction: column; gap: 7px; }
.weather-current > div > strong { font-size: 12px; color: #56634b; font-weight: 500; }
.weather-current > div > span { font-size: 11px; color: #8b9581; line-height: 1.6; }
.weather-forecast { display: flex; flex-direction: column; gap: 8px; padding-top: 11px; }
.weather-day { display: flex; align-items: baseline; gap: 13px; font-size: 10px; color: #6b7b5f; }
.weather-day > span:first-child { white-space: nowrap; }
.weather-day small { font-size: 9px; margin-left: 5px; color: #96a08b; }
.weather-day > strong { font-weight: 500; font-size: 11px; color: #526348; min-width: 68px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.weather-day-description { margin-left: auto; text-align: right; color: #8b9780; }
.weather-care-message { display: flex; align-items: flex-start; gap: 12px; padding: 23px 22px; border: 1px solid var(--scene-line); background: linear-gradient(125deg, var(--scene-soft), #ffffff85); border-radius: 17px; }
.weather-message-icon { display: grid; place-items: center; width: 31px; height: 31px; background: #ffffffbd; color: var(--scene-accent); border-radius: 10px; flex-shrink: 0; }
.weather-message-icon svg { width: 15px; height: 15px; }
.weather-care-message h3 { font-family: inherit; color: var(--scene-ink); font-size: 16px; line-height: 1.7; font-weight: 550; margin: 0 0 9px; letter-spacing: -.2px; }
.weather-care-message p { font-size: 11px; line-height: 1.9; color: #879178; margin: 0; }
.weather-care-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.weather-care-tags span { padding: 4px 7px; font-size: 9px; color: var(--scene-accent); background: #ffffffb8; border-radius: 5px; }
.weather-tools { display:flex;align-items:center;gap:2px;flex-shrink:0; }
.weather-info { position:relative; }
.weather-info>summary { list-style:none;cursor:pointer;color:#98a18e;width:31px;height:31px;min-width:31px;min-height:31px; }
.weather-info>summary::-webkit-details-marker { display:none; }
.weather-info>summary svg { width:14px;height:14px; }
.weather-info[open]>summary { background:var(--scene-soft);color:var(--scene-accent); }
.weather-info-popover { position:absolute;z-index:50;top:37px;right:0;width:min(285px,calc(100vw - 72px));padding:17px 19px;border:1px solid var(--scene-line);border-radius:15px;background:#fffefa;box-shadow:0 14px 40px #4d42251c;color:#8b937f;font-size:11px;line-height:1.8; }
.weather-info-popover>strong { display:block;color:var(--scene-ink);font-size:12px;font-weight:500;margin-bottom:9px; }
.weather-info-popover p { margin:5px 0; }
.weather-info-popover a { color:#819171;text-underline-offset:3px; }
.weather-info-popover .link-btn { margin-top:7px;font-size:11px; }
.weather-refresh { min-width: 31px; width: 31px; height: 31px; min-height: 31px; color: #829271; flex-shrink: 0; }
.weather-refresh svg { width: 14px; height: 14px; }
.weather-refresh:disabled { opacity: .4; cursor: default; }
.weather-loading { display: flex; align-items: center; gap: 11px; min-height: 100px; padding: 15px; }
.weather-loading p { font-size: 12px; color: #8a987d; line-height: 1.8; }
.weather-loading-dot { width: 8px; height: 8px; background: var(--scene-accent); opacity: .4; border-radius: 50%; flex-shrink: 0; }
.weather-empty { display: flex; align-items: center; gap: 17px; padding: 12px 5px 18px; min-height: 112px; }
.weather-empty h3 { font-size: 15px; font-weight: 500; line-height: 1.8; color: var(--scene-ink); margin: 0 0 8px; }
.weather-empty p { font-size: 11px; line-height: 1.9; color: #89967b; margin: 0; }
.weather-current-missing { display: flex; flex-direction: column; gap: 8px; }
.weather-is-stale .weather-overview { opacity: .72; }
.weather-is-stale .weather-care-message { background: #f6f7f2; border-style: dashed; }
.scene-weather-field { margin-bottom: 24px; }
.scene-weather-field select { width: 100%; min-height: 48px; font-size: 13px; color: #435c38; }
@media (max-width: 860px) { .weather-content { grid-template-columns: minmax(0, 1fr); gap: 18px; } .weather-overview { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; align-items: center; } .weather-current { gap: 8px; } .weather-forecast { padding-top: 0; } .weather-day { flex-wrap: wrap; gap: 4px 10px; } .weather-day-description { width: 100%; text-align: left; margin-left: 0; } }
@media (max-width: 540px) {
 .weather-panel { padding: 19px 18px; border-radius: 20px; margin-top: 17px; }
 .weather-heading { margin-bottom: 15px; gap: 7px; }
 .weather-heading > span:first-child { font-size: 12px; }
 .weather-heading > small { font-size: 9px; }
 .weather-overview { display: block; }
 .weather-current { min-height: 69px; gap: 13px; }
 .weather-art { width: 67px; height: 67px; }
 .weather-temperature { font-size: 37px; }
 .weather-forecast { padding: 10px 0 0; gap: 10px; }
 .weather-day { gap: 8px; flex-wrap: nowrap; }
 .weather-day-description { width: auto; margin-left: auto; text-align: right; font-size: 9px; }
 .weather-day small { display: none; }
 .weather-care-message { padding: 18px 15px; gap: 10px; border-radius: 13px; }
 .weather-care-message h3 { font-size: 14px; }
 .weather-care-message p { font-size: 11px; }
 .weather-message-icon { width: 27px; height: 27px; border-radius: 8px; }
 .weather-content { gap: 17px; }
 .weather-heading.is-preview>small { display:none; }
 .weather-empty { gap: 10px; padding: 10px 0 15px; }
 .weather-empty .weather-art { width: 53px; height: 53px; }
 .weather-empty h3 { font-size: 13px; }
 .scene-weather-field select { font-size: 16px; }
}