/* Compact control surfaces: small headers, intrinsic cards, no decorative status blocks. */
.workspace main{padding:20px 24px;max-width:1800px}.topbar{min-height:62px;padding:10px 24px}.page-heading{margin-bottom:16px;gap:12px}.page-heading h1{font-size:25px;letter-spacing:-.6px}.page-heading .muted{margin-top:5px}.section-heading{margin-bottom:10px}.section-heading h2{font-size:15px}.home-rooms-section{margin-bottom:18px}.home-rooms{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}.home-room{min-height:94px;padding:13px 15px;grid-template-columns:34px minmax(0,1fr);gap:3px 10px;border-radius:17px}.home-room-symbol{grid-row:1/3;width:34px;height:34px;border-radius:11px;margin:0}.home-room strong{grid-column:2;font-size:14px}.home-room-count{grid-column:2;font-size:10px}.home-room-status,.home-room-arrow,.home-room.is-on:after{display:none}.home-room-symbol svg{width:20px;height:20px}
#dashboard-status:empty{display:none}#dashboard-status{font-size:10px;margin:6px 0}.dashboard-widget{min-height:var(--widget-height,160px);border-radius:20px}.widget-content{padding:16px}.widget-reading{margin:12px 0;font-size:24px}.widget-reading strong{font-size:25px}.widget-device-heading h3{font-size:14px}.widget-symbol{padding:7px;border-radius:12px}.widget-values{margin:10px 0 0}.widget-clock{margin:12px 0}.dashboard-tools{padding:12px;margin:10px 0;gap:10px}.dashboard-inspector{padding:14px;gap:10px}.dashboard-grid{gap:10px}.device-card{padding:15px;border-radius:18px}.device-top{margin-bottom:8px}.device-reading{margin:10px 0}.device-reading strong{font-size:24px}.device-icon{width:34px;height:34px}.device-open{margin-top:10px;min-height:36px}.device-card .quick-controls{margin-top:8px}.device-room{font-size:9px}.room-page-heading{justify-content:space-between;margin-bottom:10px}.room-page-heading>div{display:flex;align-items:center;gap:14px}.room-page-heading .text-button{margin:0;font-size:0;min-height:38px;padding:8px}.room-page-heading .text-button svg{width:20px;height:20px}.room-grid-tools{margin-bottom:12px}.room-grid-tools input{min-height:38px;font-size:12px}.room-card-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;align-items:start;margin:0}.room-device{position:relative;min-width:0;padding:0;border-radius:18px;overflow:hidden}.room-card-body{padding:15px;min-width:0}.room-device .widget-device-heading{flex-wrap:nowrap;gap:10px}.room-device .widget-device-heading h3{font-size:13px;min-width:0}.room-device .widget-reading{margin:10px 0}.room-device .widget-reading strong{font-size:23px}.room-device .widget-symbol svg{width:24px;height:24px}.room-device .widget-symbol{min-width:38px;min-height:38px;padding:6px}.room-device .text-button{min-height:34px;margin:7px 0 0;font-size:11px}.room-card-toolbar{display:flex;gap:4px;padding:6px;background:rgba(var(--fg-ink-rgb), 0.027)}.room-card-toolbar .icon-button{min-height:32px;min-width:32px;width:32px;height:32px;padding:6px;touch-action:none}.room-card-toolbar>button:first-child{margin-right:auto;cursor:grab}.room-card-resize{position:absolute;bottom:3px;right:3px;width:32px;height:32px;padding:7px;touch-action:none;cursor:nwse-resize;background:rgba(var(--fg-surface-rgb), 1);border:1px solid var(--fg-line);border-radius:10px}.room-card-resize>span{display:none}.layout-editing{border-style:dashed}.layout-editing .room-card-body{padding-bottom:38px;opacity:.65;pointer-events:none}.room-card-toolbar[hidden],.room-card-resize[hidden]{display:none}
.quick-switch:after{display:none!important}.quick-switch{justify-content:center;border-radius:11px;padding:8px 12px;min-height:38px}.quick-switch[aria-pressed=true]{background:rgba(var(--fg-accent-rgb), 0.094);border-color:rgba(var(--fg-accent-rgb), 0.251);color:var(--fg-accent)}.quick-controls{gap:9px;margin-top:9px}.quick-button{min-height:38px;font-size:11px}.quick-blinds .quick-button{min-height:42px;flex-direction:row;gap:5px;padding:8px 3px}.live-setting{padding:9px;border-radius:11px}.live-setting-head{font-size:11px}.live-setting-head strong{font-size:15px}.live-actual{font-size:9px}.pending-message{margin-top:6px}.widget-content>.text-button{margin-top:6px}.room-device.is-on .widget-symbol,.device-card.is-on .device-icon{box-shadow:none}.page-footer{padding:12px 24px}
/* The fabric is clipped, not stretched; slats keep their spacing and rotate independently. */
.shutter-graphic{--closed:100%;--slat-angle:0deg;position:relative;max-width:280px;width:100%;margin:0 auto;padding:10px 20px 25px}.shutter-window{position:relative;height:210px;border:7px solid var(--fg-line);border-bottom-width:10px;border-radius:7px;background:linear-gradient(145deg,rgba(var(--fg-accent-rgb), 0.11),rgba(var(--fg-info-rgb), 0.071)),linear-gradient(90deg,transparent 48%,rgba(var(--fg-ink-rgb), 0.063) 48%,rgba(var(--fg-ink-rgb), 0.063) 51%,transparent 51%),rgba(var(--fg-surface-rgb), 1);box-shadow:inset 0 0 24px #0005,0 12px 24px #0004;overflow:hidden}.shutter-window:after{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:rgba(var(--fg-accent-rgb), 0.18);box-shadow:0 3px 8px #0008;z-index:2}.shutter-fabric{position:absolute;inset:6px 0 0;display:flex;flex-direction:column;gap:3px;clip-path:inset(0 0 calc(100% - var(--closed)) 0);transition:clip-path 1.1s linear;perspective:400px}.shutter-slat{display:block;flex:1;min-height:0;background:linear-gradient(rgba(var(--fg-ink-rgb), 1),rgba(var(--fg-surface-rgb), 1) 60%,rgba(var(--fg-ink-rgb), 1));border-radius:1px;box-shadow:0 2px 3px #0008;transform:rotateX(var(--slat-angle));transition:transform .35s ease;transform-style:preserve-3d}.shutter-percent{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-size:13px;color:var(--fg-accent);font-variant-numeric:tabular-nums}.shutter-graphic.position-unknown .shutter-fabric{opacity:.18}.shutter-graphic.position-unknown .shutter-window{background:repeating-linear-gradient(135deg,rgba(var(--fg-ink-rgb), 0.024) 0 8px,transparent 8px 16px),rgba(var(--fg-surface-rgb), 1)}.shutter-graphic.is-offline{opacity:.45}.shutter-graphic.is-moving .shutter-window{box-shadow:0 0 0 1px #d7c49a66,0 0 25px #d7c49a15}.shutter-graphic.compact{width:130px;padding:5px 12px 20px;margin:2px auto 7px}.shutter-graphic.compact .shutter-window{height:95px;border-width:4px}.shutter-graphic.compact .shutter-fabric{gap:2px}.shutter-graphic.compact .shutter-percent{font-size:11px}.shutter-panel{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(220px,1.2fr);gap:20px;margin-top:12px}.shutter-status{text-align:center;font-size:12px;color:var(--fg-accent);margin:8px 0}.shutter-visual>.fine{font-size:10px;text-align:center;line-height:1.5}.shutter-controls{min-width:0}.shutter-movement{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:18px}.shutter-movement>button{padding:9px 4px;font-size:11px}.shutter-stop{min-height:44px;border:1px solid rgba(var(--fg-accent-rgb), 0.333);background:rgba(var(--fg-accent-rgb), 0.094);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:5px}.shutter-slider{margin-bottom:16px}.shutter-slider label{flex-direction:row;justify-content:space-between;gap:10px;font-size:12px}.shutter-slider output{color:var(--fg-accent)}.shutter-slider input{width:100%;accent-color:var(--fg-accent)}.shutter-pulse{display:flex;gap:5px;align-items:center;margin:12px 0 8px}.shutter-pulse button{flex:1;padding:8px 4px;font-size:11px}.shutter-pulse select{width:73px;padding:6px;min-height:40px;font-size:11px}.shutter-reference,.shutter-calibration{border-top:1px solid var(--fg-line);padding:12px 0;margin-top:14px}.shutter-reference summary,.shutter-calibration summary{font-size:12px;min-height:34px;cursor:pointer}.shutter-reference>button{margin:4px 0;width:100%}.shutter-calibration>button{width:100%;margin:8px 0}.calibration-stage{font-size:13px;color:var(--fg-accent);margin:8px 0}.shutter-calibration .fine{line-height:1.5}.control-unit:has(.shutter-panel){grid-column:1/-1;padding:16px}.control-dialog:has(.shutter-panel){width:760px}.plan-shutter-symbol{padding:3px!important}.plan-shutter-symbol .shutter-graphic.compact{width:100%;padding:0;margin:0}.plan-shutter-symbol .shutter-window{height:calc(var(--marker-size,44px) - 10px);min-height:28px;border-width:2px}.plan-shutter-symbol .shutter-percent{display:none}.plan-shutter-symbol .shutter-fabric{gap:1px;inset:3px 0 0}.plan-shutter-symbol .shutter-window:after{height:2px}.plan-shutter-symbol>span:empty{display:none}
.comfort-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;align-items:start}.comfort-card{padding:16px;border-radius:18px}.comfort-card h3{font-size:14px}.comfort-card>small{font-size:10px}.temperature-values{margin:10px 0;display:grid;gap:7px}.temperature-values>div{display:flex;justify-content:space-between;gap:8px;font-size:11px;align-items:baseline}.temperature-values>div>span{color:var(--fg-muted)}.temperature-values strong{font-size:21px;font-weight:450;white-space:nowrap}.comfort-card.is-offline .temperature-values{opacity:.4}.solar-preparation{margin-top:20px;padding:15px;border-radius:18px}.solar-preparation>summary{cursor:pointer;font-size:13px}.solar-preparation>.fine{margin:10px 0}.solar-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;padding:10px 0;border-bottom:1px solid var(--fg-line)}.solar-row span{color:var(--fg-muted)}.solar-row button{margin-left:auto}#solar-form{margin-top:15px}.bottom-nav{grid-template-columns:repeat(5,1fr)}
@media(max-width:699px){.workspace main{padding:14px 12px}.topbar{padding:8px 12px;min-height:56px}.page-heading h1{font-size:22px}.home-room{min-height:80px;padding:11px}.home-rooms{gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}.room-page-heading>div{gap:5px}.room-page-heading .soft{min-height:36px;padding:8px;font-size:10px}.room-grid-tools .wrap{gap:6px}.room-grid-tools .soft,.room-grid-tools .primary{min-height:36px;font-size:11px;padding:8px 10px}.room-grid-tools input{width:150px}.widget-content{padding:13px}.room-card-body{padding:13px}.bottom-nav>button{width:20%;font-size:9px}.shutter-panel{grid-template-columns:1fr;gap:10px}.shutter-visual{display:grid;grid-template-columns:110px 1fr;gap:5px;align-items:center}.shutter-visual .shutter-graphic{grid-row:1/3;padding:4px 8px 23px}.shutter-visual .shutter-window{height:130px;border-width:4px}.shutter-status{margin:0;font-size:12px}.shutter-visual>.fine{font-size:9px}.shutter-movement{margin-bottom:13px}.shutter-slider{margin-bottom:10px}.comfort-grid{grid-template-columns:1fr}.control-dialog:has(.shutter-panel){padding:16px}.dialog-header{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.shutter-fabric,.shutter-slat{transition:none}}