/* Final layer: square cells, then content composition by cell shape. No scaled text. */
.modular-grid{display:grid;align-items:stretch;grid-auto-flow:row;position:relative;isolation:isolate;min-width:0}
.modular-grid .modular-card,.grid-ghost.modular-card{position:relative;box-sizing:border-box;align-self:stretch;width:100%;height:100%;min-width:0;min-height:0;padding:0;overflow:hidden;border-radius:19px;border:1px solid var(--fg-line);background:linear-gradient(145deg,rgba(var(--fg-ink-rgb), 0.043),transparent 56%),rgba(var(--fg-surface-rgb), 0.851);box-shadow:inset 0 1px #ffffff0a,0 5px 22px #0002;animation:none;transition:border-color .2s,box-shadow .2s,background .2s}
.modular-card.is-on{border-color:rgba(var(--fg-accent-rgb), 0.18);background:radial-gradient(ellipse at 0 0,rgba(var(--fg-accent-rgb), 0.055),transparent 70%),rgba(var(--fg-surface-rgb), 0.91)}
.modular-card:focus-within{border-color:rgba(var(--fg-accent-rgb), 0.4)}.modular-card.selected{border-color:rgba(var(--fg-accent-rgb), 0.45);box-shadow:0 0 0 1px #e4d1a533}
.modular-card>.widget-content,.modular-card>.room-card-body{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;height:100%;min-height:0!important;padding:14px!important;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;position:relative}
.modular-card :is(h3,p){margin:0}.modular-card .widget-device-heading{display:flex;flex-direction:row!important;flex-wrap:nowrap;gap:9px;align-items:center;min-width:0;min-height:32px;padding-right:22px;flex-shrink:0}
.modular-card .widget-device-heading>div{min-width:0;flex:1}.modular-card .widget-device-heading h3{min-width:0;font-size:13px;line-height:1.3;font-weight:500;letter-spacing:-.1px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.modular-card .widget-device-heading p{font-size:9px;line-height:1.3;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.modular-card .widget-symbol{min-width:30px;min-height:30px;padding:5px;border-radius:10px;flex-shrink:0}
.modular-card .widget-symbol svg{width:clamp(22px,var(--widget-icon-size,32px),48px);height:clamp(22px,var(--widget-icon-size,32px),48px)}
.modular-card .widget-reading{display:flex;align-items:baseline;gap:5px;margin:0;min-width:0;flex-shrink:0}.modular-card .widget-reading strong{font-size:27px;line-height:1.15;letter-spacing:-.8px;font-variant-numeric:tabular-nums;font-weight:450}.modular-card .widget-reading small{font-size:11px}
.modular-card .tile-controls{min-height:0}.modular-card .quick-controls{display:flex;flex-direction:column;gap:7px;margin:0;min-width:0}
.modular-card .quick-button{min-height:36px;padding:7px 6px;font-size:11px;border-radius:10px}.modular-card .quick-blinds{display:flex;gap:5px}.modular-card .quick-blinds .quick-button{flex:1;min-width:0;min-height:36px;padding:5px;gap:4px}.modular-card .quick-blinds svg{width:15px;height:15px}
.modular-card .live-setting{padding:8px;min-width:0}.modular-card .live-setting-head{font-size:10px}.modular-card .live-setting-head strong{font-size:14px}.modular-card .live-actual{font-size:9px}.modular-card .live-setting input[type=range]{height:24px;min-width:0;margin:0}
.modular-card .widget-values{display:block;margin:0;font-size:11px}.modular-card .widget-values>div{padding:6px 0;gap:5px}.modular-card .widget-values:empty{display:none}
.modular-card .pending-message{font-size:10px;line-height:1.35;flex-shrink:0;overflow-wrap:anywhere}.modular-card :is(.widget-content,.room-card-body)>.text-button{font-size:11px;min-height:28px;margin:0;padding:4px 0;align-self:flex-start}
.tile-expand{position:absolute;top:5px;right:5px;width:28px;height:28px;min-width:28px;min-height:28px;padding:6px;border:0;border-radius:9px;background:transparent;color:var(--fg-muted);z-index:3;opacity:.8}.tile-expand:hover{background:rgba(var(--fg-ink-rgb), 0.071);color:var(--fg-text);opacity:1}.tile-expand svg{width:14px;height:14px}.tile-expand>span{display:none}
.modular-card :is(.widget-toolbar,.room-card-toolbar){position:absolute;z-index:5;left:6px;bottom:6px;top:auto;right:auto;display:flex;gap:2px;padding:3px;border:1px solid var(--fg-line);border-radius:11px;background:rgba(var(--fg-surface-rgb), 0.949);box-shadow:0 3px 10px #0004}
.modular-card :is(.widget-toolbar,.room-card-toolbar) button{width:26px;height:28px;min-width:26px;min-height:28px;padding:5px;margin:0;border:0;border-radius:6px;font-size:12px}
.modular-card .widget-toolbar button>span{display:none}.modular-card :is(.widget-toolbar,.room-card-toolbar) svg{width:15px;height:15px}
.modular-card :is(.widget-resize,.room-card-resize){position:absolute;z-index:6;bottom:6px;right:6px;width:34px;height:34px;min-width:34px;min-height:34px;padding:8px;border-radius:10px;background:rgba(var(--fg-surface-rgb), 0.949);border:1px solid var(--fg-line);touch-action:none;cursor:nwse-resize}
.tile-size{position:absolute;top:7px;left:8px;z-index:4;border:1px solid var(--fg-line);background:rgba(var(--fg-surface-rgb), 0.933);border-radius:6px;padding:3px 6px;font-size:10px;line-height:1.3;color:var(--fg-text);font-variant-numeric:tabular-nums;pointer-events:none}
.modular-card :is(.widget-toolbar,.room-card-toolbar,.widget-resize,.room-card-resize,.tile-expand,.tile-size)[hidden]{display:none}
.dashboard-editing .modular-card,.modular-card.layout-editing{cursor:grab;touch-action:none;user-select:none;border-style:dashed}
.dashboard-editing .modular-card>.widget-content,.modular-card.layout-editing>.room-card-body{opacity:.48;pointer-events:none}
.modular-grid.grid-in-motion{background-image:radial-gradient(circle,rgba(var(--fg-ink-rgb), 0.125) 1px,transparent 1px);background-size:var(--grid-step) var(--grid-step);background-position:0 0}
.modular-grid .grid-placeholder{border:1px dashed rgba(var(--fg-accent-rgb), 0.45);background:rgba(var(--fg-accent-rgb), 0.031);box-shadow:inset 0 0 24px #e6d5ad08}.grid-placeholder>*{visibility:hidden}
.grid-ghost.modular-card{position:fixed!important;z-index:10000;pointer-events:none!important;opacity:.96;border-color:rgba(var(--fg-accent-rgb), 0.45);box-shadow:0 28px 70px #0009;cursor:grabbing;transition:none;will-change:transform;contain:layout style;backdrop-filter:blur(20px)}
.grid-ghost>.widget-content,.grid-ghost>.room-card-body{opacity:.85;overflow:hidden}
/* 1×1: one glance, one primary action. Full controls remain in the expanded card. */
.modular-card[data-tile=small]>.widget-content,.modular-card[data-tile=small]>.room-card-body{padding:11px!important;gap:7px;overflow:hidden}
.modular-card[data-tile=small] .widget-symbol svg{width:24px;height:24px}.modular-card[data-tile=small] .widget-reading{flex:1;align-items:center}.modular-card[data-tile=small] .widget-reading strong{font-size:25px}
.modular-card[data-tile=small] .widget-device-heading h3{font-size:12px}.modular-card[data-tile=small] .widget-device-heading p{display:none}
.modular-card[data-tile=small] .widget-values,.modular-card[data-tile=small] :is(.widget-content,.room-card-body)>.text-button{display:none}
.modular-card[data-tile=small] .quick-choices,.modular-card[data-tile=small] .quick-controls>.live-setting~.live-setting{display:none}
.modular-card[data-tile=small] .quick-controls>.quick-switch~.live-setting{display:none}
.modular-card[data-tile=small] .live-actual{display:none}.modular-card[data-tile=small] .pending-message{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.modular-card[data-tile=small][data-tight=true] .widget-device-heading{gap:5px;min-height:26px}.modular-card[data-tile=small][data-tight=true] .widget-symbol{min-height:26px;min-width:26px;padding:3px}.modular-card[data-tile=small][data-tight=true] .widget-device-heading h3{font-size:11px}.modular-card[data-tile=small][data-tight=true] .widget-reading strong{font-size:21px}
.modular-card[data-tile=small][data-blind=true] .widget-reading{display:none}.modular-card[data-tile=small][data-blind=true] :is(.widget-content,.room-card-body){gap:4px}.modular-card[data-tile=small][data-blind=true] .shutter-graphic{order:1;flex:1;min-height:30px;width:76px;max-width:76px;margin:0 auto;padding:0 6px 13px}.modular-card[data-tile=small][data-blind=true] .shutter-window{height:100%;min-height:27px;max-height:80px;border-width:3px}.modular-card[data-tile=small][data-blind=true] :is(.tile-controls,.quick-controls){order:2}.modular-card[data-tile=small][data-blind=true] .pending-message{order:3}.modular-card[data-tile=small] .quick-blinds .quick-button{min-height:32px;font-size:9px}.modular-card[data-tile=small] .quick-blinds .quick-button>span{display:none}
/* 2×1 / 3×1: identity and reading on the left, controls on the right. */
.modular-card[data-tile=strip][data-kind=device]>.widget-content,.modular-card[data-tile=strip][data-kind=device]>.room-card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto 1fr auto;gap:8px 16px;align-content:center}
.modular-card[data-tile=strip][data-kind=device] .widget-device-heading{grid-column:1;grid-row:1;padding-right:0}.modular-card[data-tile=strip][data-kind=device] .widget-reading{grid-column:1;grid-row:2;align-self:center}.modular-card[data-tile=strip] :is(.tile-controls,.room-card-body>.quick-controls){grid-column:2;grid-row:1/4;align-self:center;margin-right:12px;max-height:100%;overflow:auto}
.modular-card[data-tile=strip] .widget-values,.modular-card[data-tile=strip] :is(.widget-content,.room-card-body)>.text-button{display:none}.modular-card[data-tile=strip] .pending-message{grid-column:1;grid-row:3;font-size:10px}.modular-card[data-tile=strip] .quick-choices{display:none}
.modular-card[data-tile=strip][data-blind=true] .shutter-graphic{grid-column:1;grid-row:2/4;justify-self:center;width:80px;padding:0 8px 16px;margin:0}.modular-card[data-tile=strip][data-blind=true] .shutter-window{height:72px;border-width:3px}.modular-card[data-tile=strip][data-blind=true] .widget-reading{display:none}.modular-card[data-tile=strip][data-blind=true] .pending-message{grid-column:2;grid-row:3}
/* Tall and large cards reveal more content without stretching the controls. */
.modular-card[data-tile=column] .widget-reading{margin:12px 0}.modular-card[data-tile=column] .widget-reading strong{font-size:32px}.modular-card[data-tile=column] .widget-device-heading{flex-wrap:wrap}.modular-card[data-tile=column] .widget-device-heading h3{-webkit-line-clamp:4}.modular-card[data-tile=column] :is(.tile-controls,.room-card-body>.quick-controls){margin-top:auto}.modular-card[data-tile=column] .shutter-graphic{order:0;max-width:135px;width:100%;margin:auto;flex:0 1 auto}.modular-card[data-tile=column] .shutter-window{height:155px}
.modular-card[data-tile=large]>.widget-content,.modular-card[data-tile=large]>.room-card-body{padding:20px!important;gap:14px}.modular-card[data-tile=large] .widget-device-heading h3{font-size:16px}.modular-card[data-tile=large] .widget-reading strong{font-size:40px}.modular-card[data-tile=large] .quick-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));align-items:center}.modular-card[data-tile=large] .quick-blinds{grid-column:1/-1}.modular-card[data-tile=large] .shutter-graphic{width:150px;max-width:150px;margin:auto;order:0}.modular-card[data-tile=large] .shutter-window{height:145px}.modular-card[data-tile=large] .widget-values{margin-top:auto}
.modular-card[data-appearance=icon][data-kind=device]>.widget-content{align-items:stretch;text-align:left}.modular-card[data-appearance=icon] .widget-device-heading{flex-direction:row}.modular-card[data-appearance=icon]:not([data-tile=small]) .widget-symbol svg{width:clamp(24px,var(--widget-icon-size),120px);height:clamp(24px,var(--widget-icon-size),120px)}
/* Weather, plan, camera and charts keep their own aspect ratio. */
.modular-card .premium-title{font-size:13px;margin:0;padding-right:24px;flex-shrink:0}.modular-card .premium-body{min-height:0;flex:1;overflow:auto}.modular-card .mini-plan,.modular-card .camera-frame{display:block;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}.modular-card .energy-chart{min-height:0;max-height:300px;width:100%;height:auto;aspect-ratio:600/230}.modular-card .energy-live{gap:5px}.modular-card .energy-live strong{font-size:27px}.modular-card .chart-ranges{margin:0;gap:4px}.modular-card .chart-ranges .soft{font-size:10px;padding:4px 7px;min-height:28px}.modular-card .chart-tooltip{font-size:10px}.modular-card .premium-body+.fine{font-size:10px;flex-shrink:0}
.modular-card[data-tile=small] :is(.chart-ranges,.chart-tooltip,.energy-live .fine,.camera-test,.camera-diagnostic){display:none}.modular-card[data-tile=small] .energy-live strong{font-size:23px}.modular-card[data-tile=small] .premium-body+.fine{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:9px}.modular-card[data-tile=small] .premium-empty{padding:0;font-size:11px;line-height:1.4}
.modular-card[data-tile=small] .suggestion-device{padding:7px;gap:6px;margin-bottom:5px}.modular-card[data-tile=small] .suggestion-device:nth-child(n+3){display:none}.modular-card[data-tile=small] .suggestion-device strong{font-size:11px}.modular-card[data-tile=small] .suggestion-device small,.modular-card[data-tile=small] .suggestion-value{display:none}.modular-card[data-tile=small][data-kind=suggestions] .premium-body+.fine{display:none}
.modular-card .widget-clock{font-size:clamp(28px,4vw,56px);line-height:1;margin:auto 0 0;letter-spacing:-1px;font-variant-numeric:tabular-nums}.modular-card[data-kind=clock] .muted{font-size:11px;margin-bottom:auto}.modular-card[data-kind=clock] .widget-content>svg{width:22px;height:22px;color:var(--fg-muted)}.modular-card .widget-room-link{min-height:0;gap:12px;justify-content:center;font-size:15px;padding:0}.modular-card .widget-room-link svg{width:clamp(28px,var(--widget-icon-size),80px);height:clamp(28px,var(--widget-icon-size),80px)}.modular-card[data-tile=strip] .widget-room-link{flex-direction:row}
.modular-card .weather-heading{padding-right:20px;flex-shrink:0}.modular-card .weather-heading h3{font-size:14px}.modular-card .weather-heading button{font-size:10px;padding:4px}.modular-card .weather-status{font-size:9px;line-height:1.4}.modular-card .weather-tabs{gap:4px;margin:0;flex-shrink:0;flex-wrap:wrap}.modular-card .weather-tabs button{font-size:10px;padding:5px;min-height:30px}.modular-card .weather-body{min-height:0;overflow:auto;flex:1}.modular-card .weather-source{font-size:9px;margin:0;flex-shrink:0}.modular-card .weather-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.modular-card .weather-metric{padding:9px}.modular-card .weather-metric span{font-size:9px}.modular-card .weather-metric strong{font-size:15px}.modular-card .weather-hero{flex-wrap:wrap;gap:8px}.modular-card .weather-temperature{font-size:38px}.modular-card .weather-hero p{font-size:12px}
.weather-summary{display:none}.modular-card:is([data-tile=small],[data-tile=strip]) :is(.weather-body,.weather-tabs,.weather-heading button,.weather-source>span){display:none}.modular-card:is([data-tile=small],[data-tile=strip]) .weather-summary{display:flex;flex:1;align-items:center;gap:10px;flex-wrap:wrap;min-height:0}.weather-summary>strong{font-size:34px;line-height:1;letter-spacing:-1px;font-weight:450;white-space:nowrap}.weather-summary>svg{width:30px;height:30px;color:var(--fg-accent)}.weather-summary>small{width:100%;font-size:10px;color:var(--fg-muted)}.weather-summary>span{font-size:11px;color:var(--fg-muted)}.modular-card[data-tile=small] .weather-summary>span{display:none}.modular-card[data-tile=small] .weather-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modular-card[data-tile=small][data-tight=true] .weather-summary>strong{font-size:28px}.modular-card[data-tile=small][data-tight=true] .weather-summary>small{display:none}
.modular-card[data-tile=column] .weather-metrics{grid-template-columns:1fr}.modular-card[data-tile=column] .weather-heading button{font-size:0}.modular-card[data-tile=column] .weather-days>div{display:flex;flex-wrap:wrap;font-size:11px}.modular-card[data-tile=column] .weather-hero>svg{width:28px;height:28px}
.modular-card[data-kind=scene] .widget-content>section{min-height:0;overflow:auto;flex:1}.modular-card[data-tile=small][data-kind=scene] .scene-card{padding:8px}.modular-card[data-tile=small][data-kind=scene] :is(.scene-description,.scene-details){display:none}
.tile-dialog{width:min(680px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);padding:14px;background:rgba(var(--fg-surface-rgb), 0.961);border:1px solid var(--fg-line);border-radius:22px;box-shadow:0 30px 100px #0009;color:var(--fg-text);backdrop-filter:blur(24px)}.tile-dialog::backdrop{background:rgba(var(--fg-surface-rgb), 0.6);backdrop-filter:blur(5px)}.tile-dialog>button{display:block;margin-left:auto;margin-bottom:10px}.tile-dialog .tile-expanded{height:auto;min-height:300px;max-height:none;border:0;background:transparent;box-shadow:none}.tile-dialog .tile-expanded>.widget-content,.tile-dialog .tile-expanded>.room-card-body{height:auto;min-height:300px!important;max-height:70vh;overflow:auto}.tile-dialog .tile-expanded .premium-body{flex:1 0 230px}.tile-dialog .tile-expanded .weather-body{flex:1 0 auto}.tile-dialog .tile-expanded .camera-frame,.tile-dialog .tile-expanded .mini-plan{height:360px}.tile-dialog .tile-expanded .weather-summary{display:none}.tile-dialog .tile-expanded .weather-source>span{display:inline}
@media(max-width:599px){.modular-grid .modular-card{border-radius:15px}.modular-card .tile-expand{width:28px;height:28px}.tile-dialog .tile-expanded>.widget-content,.tile-dialog .tile-expanded>.room-card-body{padding:10px!important}.tile-dialog .tile-expanded .camera-frame,.tile-dialog .tile-expanded .mini-plan{height:240px}.modular-card[data-tile=large]>.widget-content,.modular-card[data-tile=large]>.room-card-body{padding:14px!important}}
@media(prefers-reduced-motion:reduce){.modular-card,.modular-card *{animation:none!important;transition:none!important}.grid-ghost.modular-card{will-change:auto}}
.modular-card[data-tile=small][data-blind=true] .shutter-graphic{display:flex;flex-direction:column}.modular-card[data-tile=small][data-blind=true] .shutter-window{flex:1;height:auto}
.modular-card .scene-card{border:0;box-shadow:none;background:transparent;padding:0}.modular-card .scene-heading{display:flex;flex-wrap:wrap;gap:8px}.modular-card .scene-heading h3{font-size:13px}.modular-card .scene-heading>div{min-width:0}.modular-card .scene-heading .primary{min-height:36px;padding:7px 10px;font-size:11px}.modular-card[data-tile=small] .scene-heading{gap:6px}.modular-card[data-tile=small] .scene-symbol,.modular-card[data-tile=small] .scene-heading .muted,.modular-card[data-tile=small] .scene-card>.text-button{display:none}.modular-card[data-tile=small] .scene-status{font-size:9px;line-height:1.3;margin-top:6px}.modular-card[data-tile=small] .scene-heading .primary{width:100%}.modular-card[data-tile=strip] .scene-heading{flex-wrap:nowrap}.modular-card[data-tile=strip] .scene-heading .muted{display:none}
.modular-card:is([data-tile=column],[data-tile=large])[data-kind=device] .widget-device-heading{order:0}.modular-card:is([data-tile=column],[data-tile=large])[data-kind=device] .widget-reading{order:1}.modular-card:is([data-tile=column],[data-tile=large])[data-kind=device] .shutter-graphic{order:2}.modular-card:is([data-tile=column],[data-tile=large])[data-kind=device] :is(.tile-controls,.room-card-body>.quick-controls){order:3}.modular-card:is([data-tile=column],[data-tile=large])[data-kind=device] .pending-message{order:4}.modular-card:is([data-tile=column],[data-tile=large])[data-kind=device] .widget-values{order:5}.modular-card:is([data-tile=column],[data-tile=large])[data-kind=device] :is(.widget-content,.room-card-body)>.text-button{order:6}
.modular-card[data-tight=true] .widget-toolbar .widget-drag{display:none}