.integration-widget { display:flex; flex:1; flex-direction:column; min-height:0; gap:12px; }
.weather-attribution a { color:inherit; text-decoration:none; }
.weather-attribution a:hover { text-decoration:underline; }
.integration-error, .integration-loading, .integration-stale { color:#a5a6ac; margin:0; font-size:12px; }
.integration-error { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.dashboard-page .integration-error button { font-size:11px; padding:2px 6px; min-height:24px; text-decoration:underline; text-underline-offset:3px; }
.currency-rates { display:flex; flex:1; flex-direction:column; min-height:0; }
.currency-row { display:flex; flex:1; min-height:30px; align-items:center; gap:8px; border-bottom:1px solid rgb(255 255 255 / .05); font-family:Geist Mono,ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums; }
.currency-row:last-child { border-bottom:0; }
.currency-code { font-size:12px; font-weight:600; }
.currency-delta { margin-left:auto; font-size:11px; white-space:nowrap; }
.currency-value { font-size:clamp(16px,1.7vw,24px); font-weight:300; white-space:nowrap; }
.is-positive { --integration-delta:#acbdae; }
.is-negative { --integration-delta:#caabaa; }
.currency-delta { color:var(--integration-delta); }
.crypto-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.crypto-segments { display:flex; gap:2px; padding:2px; background:rgb(255 255 255 / .04); border-radius:8px; }
.dashboard-page .crypto-segments button { min-height:24px; padding:3px 8px; font-size:11px; border-radius:6px; }
.dashboard-page .crypto-segments button[aria-pressed="true"] { background:rgb(255 255 255 / .1); color:#f2f2f3; }
.crypto-data { display:flex; flex:1; flex-direction:column; min-height:0; gap:6px; }
.crypto-price-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crypto-price { font-size:clamp(20px,1.8vw,26px); font-weight:300; line-height:1.2; font-variant-numeric:tabular-nums; }
.crypto-change { font-size:11px; color:var(--integration-delta); background:color-mix(in srgb,var(--integration-delta) 10%,transparent); padding:3px 6px; border-radius:6px; font-variant-numeric:tabular-nums; }
.integration-stale { font-size:10px; }
.crypto-chart-wrap { position:relative; display:flex; flex:1; min-width:0; min-height:64px; }
.dashboard-page svg.crypto-chart { position:absolute; inset:0; width:100%; height:100%; min-width:0; min-height:0; overflow:visible; color:var(--integration-delta); }
.crypto-line { fill:none; stroke:currentColor; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.crypto-area { fill:currentColor; opacity:.075; }
.crypto-tooltip { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); white-space:nowrap; border-radius:6px; padding:3px 8px; font-size:11px; background:#17181c; pointer-events:none; }
.crypto-tooltip:empty { display:none; }
.dashboard-weather { margin-right:auto; min-width:0; }
.dashboard-page .weather-island { display:flex; align-items:center; gap:10px; max-width:310px; min-height:44px; padding:9px 14px; border-radius:12px; background:linear-gradient(145deg,rgb(43 44 49 / .76),rgb(23 24 28 / .76)); box-shadow:inset 0 1px rgb(255 255 255 / .09),0 6px 18px rgb(0 0 0 / .1); color:#f2f2f3; text-align:left; }
.weather-island-temp { font-size:24px; font-weight:300; font-variant-numeric:tabular-nums; line-height:1; }
.weather-island-city { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; color:#a5a6ac; }
.weather-dialog { width:min(768px,calc(100vw - 32px)); max-height:calc(100svh - 48px); overflow:auto; padding:28px 32px; border:1px solid rgb(255 255 255 / .08); border-radius:20px; color:#f2f2f3; background:linear-gradient(145deg,#24252a,#15161b); box-shadow:inset 0 1px rgb(255 255 255 / .09),0 24px 80px rgb(0 0 0 / .5); font:14px/1.5 Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.weather-dialog::backdrop { background:rgb(0 0 0 / .65); backdrop-filter:blur(6px); }
.weather-dialog-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.weather-dialog-top h2 { font-size:18px; font-weight:500; margin:0; }
.dashboard-page .weather-close { font-size:24px; line-height:1; width:36px; height:36px; padding:4px; }
.weather-overview { display:flex; align-items:center; gap:32px; margin:28px 0 32px; }
.weather-overview-current { flex:1; min-width:0; }
.weather-city-panel { width:300px; flex-shrink:0; }
.weather-city-controls { display:flex; align-items:center; gap:8px; }
.weather-city-search { position:relative; flex:1; min-width:0; }
.weather-city-search .field-input { min-height:36px; font-size:13px; }
.weather-city-results { position:absolute; z-index:3; top:100%; right:0; list-style:none; padding:6px; margin:6px 0 0; width:min(300px,calc(100vw - 72px)); max-height:220px; overflow:auto; border-radius:10px; background:#2a2b31; box-shadow:0 12px 30px rgb(0 0 0 / .3); }
.dashboard-page .weather-city-results button { display:flex; width:100%; flex-direction:column; align-items:flex-start; text-align:left; padding:8px 10px; color:#f2f2f3; }
.weather-city-results small { font-size:11px; color:#a5a6ac; }
.weather-search-status { margin:6px 0 0; font-size:11px; text-align:right; color:#a5a6ac; }
.weather-search-status:empty { display:none; }
.weather-details { display:flex; flex-direction:column; gap:32px; }
.weather-current p { margin:8px 0 0; color:#a5a6ac; }
.weather-current h3 { margin:10px 0 0; font-size:18px; font-weight:500; }
.weather-current-temp { font-size:72px; font-weight:200; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.weather-current-icon { font-size:32px; opacity:.5; margin-left:12px; }
.weather-section-label, .weather-current .weather-section-label { color:#85868d; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; }
.weather-scroll-rail { position:relative; min-width:0; }
.weather-rail-scroll { overflow:auto; padding:4px 0 8px; scrollbar-width:thin; scrollbar-color:#45464d transparent; }
.weather-rail-content { display:flex; width:max-content; gap:8px; min-width:100%; }
.weather-week-rail-wrap .weather-rail-content { display:grid; width:100%; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.weather-rail-fade { position:absolute; z-index:2; top:0; bottom:8px; width:56px; pointer-events:none; }
.weather-rail-fade-left { left:0; background:linear-gradient(90deg,#24252a,transparent); }
.weather-rail-fade-right { right:0; background:linear-gradient(270deg,#24252a,transparent); }
.weather-hour-rail { display:flex; overflow:auto; gap:8px; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:#45464d transparent; }
.weather-hour-card { display:flex; flex:0 0 68px; flex-direction:column; align-items:center; gap:8px; padding:12px 8px; border-radius:8px; background:rgb(255 255 255 / .04); font-variant-numeric:tabular-nums; }
.weather-hour-card span:first-child, .weather-hour-card span:last-child, .weather-hour-card small { font-size:11px; color:#a5a6ac; }
.weather-hour-card strong { font-size:16px; font-weight:500; }
.weather-today { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; margin:0; }
.weather-today div { display:flex; justify-content:space-between; gap:12px; padding:0 0 10px; border-bottom:1px solid rgb(255 255 255 / .05); font-size:12px; }
.weather-details dt { color:#a5a6ac; }.weather-details dd { margin:0; font-variant-numeric:tabular-nums; }
.weather-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.weather-metrics div { padding:16px; border-radius:8px; background:rgb(255 255 255 / .04); }
.weather-metrics dt { font-size:11px; margin-bottom:6px; }.weather-metrics dd { font-size:14px; }
.weather-week-rail { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.weather-day-card { display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 8px; border-radius:8px; background:rgb(255 255 255 / .04); }
.weather-day-card span:first-child,.weather-day-card span:last-child { font-size:11px; color:#a5a6ac; }
.weather-day-card strong { font-size:14px; font-weight:500; }
.weather-attribution { margin:24px 0 0; font-size:10px; color:#85868d; }
.weather-swap-in { animation: weather-content-swap .32s ease-out both; }
@keyframes weather-content-swap { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:639px) {
  .dashboard-page .weather-island { max-width:100%; padding:8px 12px; }
  .weather-dialog { width:calc(100vw - 20px); max-height:calc(100svh - 24px); padding:20px; border-radius:16px; }
  .weather-overview { flex-direction:column; align-items:stretch; gap:24px; margin-top:20px; }
  .weather-city-panel { order:-1; width:100%; }
  .weather-current-temp { font-size:60px; }
  .weather-today { grid-template-columns:1fr; }
  .weather-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .weather-metrics div { padding:12px; }
  .weather-week-rail { display:flex; overflow:auto; gap:8px; padding-bottom:8px; }
  .weather-day-card { flex:0 0 72px; }
  .weather-week-rail-wrap .weather-rail-content { display:flex; width:max-content; gap:8px; }
  .weather-week-rail-wrap .weather-day-card { flex:0 0 72px; }
  .crypto-price { font-size:24px; }.currency-value { font-size:24px; }
}
.integration-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.integration-heading h2, .integration-title { margin:0; font-size:14px; font-weight:500; }
.crypto-price-copy { display:flex; flex-direction:column; gap:5px; }
.crypto-coin-name { color:#85868d; font-size:11px; }
.is-stacked .integration-heading h2, .is-stacked .integration-title { display:none; }
.is-stacked .currency-widget { min-height:min-content; }
.is-stacked .currency-widget .integration-heading { display:none; }
.is-stacked .currency-rates { min-height:min-content; }
.is-stacked .currency-row { min-height:44px; gap:12px; }
.is-stacked .currency-value { font-size:24px; }
.is-stacked .crypto-widget, .is-stacked .crypto-data { min-height:min-content; }
.is-stacked .crypto-chart-wrap { min-height:112px; }
html:has(.weather-dialog[open]) { overflow:hidden; }
@media(max-width:767px) { .weather-dialog { margin:auto auto 12px; max-height:calc(100svh - 24px); } }
@media (max-width: 639px) {
  .dashboard-page .is-stacked .currency-row { min-height: 36px; gap: 8px; }
  .dashboard-page .is-stacked .currency-value { font-size: 22px; }
  .dashboard-page .is-stacked .crypto-chart-wrap { min-height: 88px; }
}

@keyframes ui-chart-draw { from { stroke-dashoffset: 1000; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
.dashboard-page .crypto-line { stroke-dasharray: 1000; animation: ui-chart-draw .6s ease-out both; }
.dashboard-page .crypto-area { animation: ui-fade-in .45s ease-out both; }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dashboard-page .crypto-line, .dashboard-page .crypto-area { animation: none; } }
@media (prefers-reduced-motion: reduce) { .weather-swap-in { animation: none; } }