/* Generated by manage.py build_panel_assets. Edit source files, not this bundle. */

/* Source: css/app.css */
:root{--primary:#1e40af;--primary-2:#3b82f6;--accent:#d97706;--bg:#f8fafc;--surface:#fff;--ink:#172554;--text:#334155;--muted:#64748b;--line:#dbeafe;--soft:#e9eef6;--danger:#dc2626;--success:#15803d;--radius:14px;--shadow:0 12px 36px rgba(30,58,138,.08);}
*{box-sizing:border-box;}html{background:var(--bg);color-scheme:light;}body{margin:0;background:var(--bg);color:var(--text);font-family:"Fira Sans",system-ui,sans-serif;line-height:1.5;}a{color:var(--primary);text-decoration:none;}button,input,select,textarea{font:inherit;}button,a,summary{touch-action:manipulation;}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}.skip-link{position:fixed;top:-60px;left:12px;z-index:99;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;}.skip-link:focus{top:12px;}:focus-visible{outline:3px solid #f59e0b;outline-offset:3px;}
*[hidden]{display:none!important;}
.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 clamp(18px,4vw,64px);gap:40px;position:sticky;top:0;z-index:20;}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);min-width:max-content;min-height:44px;}.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--primary);color:#fff;border-radius:10px;}.brand-mark svg{width:23px;}.brand-copy{display:block;}.brand strong{font-family:"Fira Code",monospace;font-size:14px;display:block;line-height:1.05;}.brand-place{display:block;color:var(--text);font-size:11px;font-weight:600;line-height:1.25;margin-top:2px;}.brand small{display:block;letter-spacing:.13em;font-size:7px;color:var(--primary);font-weight:700;margin-top:2px;}.topbar nav{display:flex;align-items:stretch;height:100%;gap:6px;}.topbar nav a{min-width:88px;padding:0 16px;color:var(--muted);font-weight:600;display:grid;place-items:center;position:relative;}.topbar nav a:hover{color:var(--primary);background:#f8fbff;}.topbar nav a[aria-current=page]{color:var(--primary);}.topbar nav a[aria-current=page]:after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--primary);}.user-menu{margin-left:auto;position:relative;}.user-menu summary{list-style:none;display:flex;gap:10px;align-items:center;cursor:pointer;min-height:44px;}.user-menu summary::-webkit-details-marker{display:none;}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--primary);font-weight:700;}.user-label{font-size:14px;color:var(--text);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.user-menu>div{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:var(--shadow);min-width:200px;}.user-menu>div>*{display:block;padding:9px 11px;width:100%;min-height:44px;text-align:left;}.user-menu>div>span{font-size:12px;color:var(--muted);}.user-menu form{padding:0;}.user-menu button{background:none;border:0;color:var(--primary);cursor:pointer;padding:9px 11px;width:100%;min-height:44px;text-align:left;}.page-shell{width:min(1400px,calc(100% - 48px));margin:0 auto;padding:42px 0 70px;min-height:calc(100vh - 130px);}.footer{border-top:1px solid var(--line);padding:22px clamp(18px,4vw,64px);display:flex;justify-content:space-between;color:var(--muted);font-size:12px;}.messages{position:fixed;right:24px;top:88px;z-index:40;display:grid;gap:8px;max-width:440px;}.message{background:#fff;border-left:4px solid var(--primary);box-shadow:var(--shadow);border-radius:8px;padding:14px 18px;}.message.success{border-color:var(--success);}.message.warning{border-color:var(--accent);}.message.error{border-color:var(--danger);}
.page-header{margin-bottom:30px;}.page-header h1{margin:3px 0 4px;font-family:"Fira Code",monospace;font-size:clamp(27px,3vw,39px);line-height:1.15;color:var(--ink);letter-spacing:-.04em;}.page-header>p:last-child,.page-header div>p:last-child{margin:0;color:var(--muted);}.split{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.14em;color:var(--primary);font-weight:700;font-size:11px;}.back-link{display:inline-block;margin-bottom:18px;font-size:14px;font-weight:600;}.live-state{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:10px 15px;border-radius:10px;min-width:245px;}.live-state strong,.live-state small{display:block;}.live-state strong{font-size:13px;color:var(--ink);}.live-state small{font-size:11px;color:var(--muted);}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #dcfce7;}.notice{display:flex;gap:12px;border:1px solid #fcd34d;background:#fffbeb;color:#78350f;padding:14px 17px;border-radius:10px;margin-bottom:22px;}.notice svg{flex:none;width:20px;}.notice strong,.notice span{display:block;}.notice span{font-size:13px;margin-top:1px;}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}.metrics.three{grid-template-columns:repeat(3,1fr);}.metrics article{min-height:145px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:21px 22px;position:relative;overflow:hidden;}.metrics article:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary-2);}.metrics article>span{display:block;color:var(--muted);font-size:13px;margin-bottom:14px;}.metrics strong{font-family:"Fira Code",monospace;color:var(--ink);font-size:clamp(24px,2.5vw,32px);letter-spacing:-.04em;line-height:1.1;}.metrics strong small{font-family:"Fira Sans";font-size:13px;letter-spacing:0;color:var(--muted);}.metrics p{font-size:12px;margin:10px 0 0;color:var(--muted);}.metrics .metric-accent{background:var(--ink);border-color:var(--ink);}.metrics .metric-accent:before{background:#f59e0b;}.metrics .metric-accent span,.metrics .metric-accent p,.metrics .metric-accent a{color:#bfdbfe;}.metrics .metric-accent strong{color:#fff;}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:20px;box-shadow:0 1px 0 rgba(30,58,138,.02);}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;}.panel-heading h2,.experiment-running h2,.method-card h2{font-family:"Fira Code",monospace;margin:3px 0 0;color:var(--ink);font-size:19px;letter-spacing:-.025em;}.text-link{font-size:13px;font-weight:600;}.unit-pill,.badge{background:var(--soft);color:var(--primary);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700;}.house-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}.house-card{border:1px solid var(--line);border-top:3px solid var(--house-color);border-radius:11px;padding:17px;background:linear-gradient(180deg,#fff,#fbfdff);}.house-title{display:flex;gap:10px;align-items:center;}.house-letter{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--house-color),white 86%);color:var(--house-color);font-family:"Fira Code";font-weight:700;}.house-title h3{margin:0;color:var(--ink);font-size:15px;}.house-title small,.house-card>small{color:var(--muted);font-size:10px;}.house-value{display:flex;align-items:baseline;gap:5px;margin:20px 0 14px;}.house-value strong{font-family:"Fira Code";font-size:28px;color:var(--ink);letter-spacing:-.04em;}.house-value span{font-size:12px;color:var(--muted);}.house-cost{padding-top:12px;border-top:1px solid var(--soft);display:flex;justify-content:space-between;align-items:center;gap:8px;}.house-cost span{font-size:11px;color:var(--muted);}.house-cost strong{color:var(--ink);font-size:15px;}.coverage{height:4px;background:var(--soft);border-radius:4px;margin:14px 0 5px;}.coverage span{display:block;height:100%;background:var(--house-color);border-radius:4px;}.pending-value{height:112px;display:flex;flex-direction:column;justify-content:center;color:var(--muted);}.pending-value strong{color:var(--ink);}.pending-value span{font-size:12px;}.content-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;}.content-grid>.panel{min-width:0;}.bar-chart{height:250px;display:flex;align-items:end;gap:clamp(3px,1vw,12px);padding:30px 8px 0;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 49px,#eef2ff 50px);}.bar-item{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;color:var(--muted);font-size:9px;}.bar{width:min(24px,80%);min-height:3px;background:linear-gradient(to top,var(--primary),var(--primary-2));border-radius:3px 3px 0 0;}.bar-value{opacity:0;font-size:9px;}.bar-item:hover .bar-value{opacity:1;}.bar-item>span:last-child{margin-top:6px;}.chart-data{margin-top:14px;font-size:12px;}.chart-data summary{cursor:pointer;color:var(--primary);font-weight:600;min-height:44px;display:flex;align-items:center;}.chart-data table{max-width:400px;}.period-mini-list{display:grid;}.period-mini-list a{min-height:65px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--soft);padding:8px 2px;}.period-mini-list a:last-child{border-bottom:0;}.period-mini-list strong,.period-mini-list small{display:block;}.period-mini-list strong{font-size:13px;color:var(--ink);}.period-mini-list small{font-size:11px;color:var(--muted);}
.responsive-table{overflow-x:auto;}table{width:100%;border-collapse:collapse;font-size:13px;}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}td{padding:15px 14px;border-bottom:1px solid var(--soft);color:var(--text);}tbody tr:hover{background:#f8fbff;}tfoot th{font-size:12px;color:var(--ink);border-top:2px solid var(--line);}.numeric{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}.table-panel{padding:12px 10px;}.table-panel .panel-heading{padding:12px 14px 0;}.badge.open{background:#dbeafe;}.badge.reconciled{background:#dcfce7;color:#166534;}.badge.invoice_received{background:#fef3c7;color:#92400e;}.icon-link{display:grid;place-items:center;min-width:44px;min-height:44px;font-size:20px;}.house-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;}.cell-note{display:block;color:var(--muted);font-size:10px;margin-left:16px;}.admin-note{background:#eff6ff;border-left:3px solid var(--primary);padding:16px 20px;border-radius:7px;font-size:13px;}.admin-note strong{color:var(--ink);}.admin-note p{margin:4px 0 0;}.empty-state,.empty-page{text-align:center;color:var(--muted);padding:60px 20px;}.empty-page h1{color:var(--ink);font-family:"Fira Code";}
.button{min-height:44px;border:1px solid transparent;border-radius:8px;padding:10px 17px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;cursor:pointer;}.button.primary{background:var(--primary);color:#fff;}.button.primary:hover{background:#1e3a8a;}.button.secondary{background:#fff;color:var(--primary);border-color:#bfdbfe;}.button.danger{background:var(--danger);color:#fff;}.button.wide{width:100%;}.form-stack{display:grid;gap:17px;}.form-stack label{display:grid;gap:6px;color:var(--ink);font-weight:600;font-size:13px;}.form-stack input,.form-stack select,.form-stack textarea{width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;background:#fff;color:var(--text);min-height:44px;}.form-stack input[type=file]{padding:8px;}.form-stack label small{font-weight:400;color:var(--muted);}.field-error,.form-error{color:var(--danger);font-size:12px;}.form-error ul{padding-left:18px;}.compact{gap:14px;}.panel-copy{font-size:13px;color:var(--muted);}
.operation-grid{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);}.device-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}.device-list>article{border:1px solid var(--line);border-radius:10px;padding:15px;}.device-head{display:flex;align-items:center;gap:10px;}.device-head h3{font-size:14px;margin:0;color:var(--ink);}.device-head small{display:block;color:var(--muted);font-size:9px;}.device-status{width:9px;height:9px;background:#94a3b8;border-radius:50%;box-shadow:0 0 0 4px #f1f5f9;}.device-status.online{background:#22c55e;box-shadow:0 0 0 4px #dcfce7;}.device-list dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0;}.device-list dt{font-size:9px;color:var(--muted);text-transform:uppercase;}.device-list dd{font-size:11px;margin:2px 0;color:var(--ink);font-weight:600;}.channel{display:flex;gap:8px;padding:7px 0;border-top:1px solid var(--soft);font-size:11px;}.channel strong{margin-left:auto;color:var(--ink);}.channel small{color:var(--accent);}.device-warning{font-size:10px;color:#92400e;background:#fffbeb;padding:7px;border-radius:6px;}.integration-note{border-top:1px solid var(--line);padding-top:18px;}.integration-note strong{font-size:12px;color:var(--ink);}.integration-note p{font-size:11px;color:var(--muted);}
.experiment-running{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:28px;margin-bottom:20px;}.experiment-running .eyebrow{color:#93c5fd;}.experiment-running h2{color:#fff;}.experiment-running p:last-child{margin:5px 0 0;color:#bfdbfe;font-size:13px;}.pulse-icon{width:48px;height:48px;border-radius:50%;background:#ffffff12;display:grid;place-items:center;}.pulse-icon span{width:12px;height:12px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 7px rgba(34,197,94,.18);}.steps{padding-left:25px;color:var(--muted);font-size:13px;margin:0 0 22px;}.steps li{padding:5px;}.method-card{background:#eff6ff;}.method-card>p{font-size:13px;}.formula{display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:18px;margin:22px 0;text-align:center;font-family:"Fira Code";font-size:12px;}.formula strong{color:var(--primary);}.fine-print{color:var(--muted);font-size:11px!important;}
.experiment-running.is-armed{background:var(--primary);}
.experiment-running.is-armed .pulse-icon span{background:#fbbf24;box-shadow:0 0 0 7px rgba(251,191,36,.2);}
.appliance-start-form{grid-template-columns:repeat(2,minmax(0,1fr));}
.appliance-start-form label:first-of-type,.appliance-start-form label:last-of-type,.appliance-start-form .button{grid-column:1/-1;}
.appliance-start-form label small{line-height:1.4;}
.experiment-delete-cell{width:64px;text-align:right;}
.experiment-delete-cell form{display:flex;justify-content:flex-end;margin:0;}
.experiment-live-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.18);}
.experiment-live-metrics article{min-width:0;padding:15px 17px;background:rgba(255,255,255,.08);}
.experiment-live-metrics span,.experiment-live-metrics small{display:block;color:#bfdbfe;font-size:11px;}
.experiment-live-metrics strong{display:block;margin:7px 0 4px;color:#fff;font:700 clamp(20px,2vw,27px) "Fira Code",monospace;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.experiment-live-metrics small{font-size:10px;}
.experiment-running.is-start-detected{background:#7c2d12;}
.experiment-running.is-stop-detected{background:#713f12;}
.experiment-running.is-completed{background:#14532d;}
.experiment-running.is-start-detected .pulse-icon span,.experiment-running.is-stop-detected .pulse-icon span{background:#fbbf24;box-shadow:0 0 0 7px rgba(251,191,36,.2);}
.experiment-running.is-completed .pulse-icon span{background:#86efac;box-shadow:0 0 0 7px rgba(134,239,172,.2);}
.appliance-setup-panel{max-width:1100px;margin-inline:auto;}
.appliance-guide{margin:-4px 0 24px;padding:18px 20px;border:1px solid #bfdbfe;border-radius:11px;background:#f8fbff;}
.appliance-guide p{margin:0;color:var(--text);font-size:13px;line-height:1.75;}
.appliance-guide strong{color:var(--ink);}
.appliance-guide .appliance-guide-run{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);}
.experiment-notes{margin-top:7px;text-align:left;}
.experiment-notes summary{display:inline;color:var(--primary);font-size:11px;font-weight:700;cursor:pointer;}
.experiment-notes div{min-width:220px;max-width:380px;margin-top:7px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--text);font-size:11px;line-height:1.5;white-space:normal;}
.login-shell{width:100%;padding:0;min-height:100vh;display:grid;grid-template-columns:minmax(420px,42%) 1fr;background:#fff;}.login-card{align-self:center;justify-self:center;width:min(390px,calc(100% - 48px));padding:40px 0;}.brand-login{margin-bottom:55px;}.login-card h1{font-family:"Fira Code";color:var(--ink);letter-spacing:-.04em;font-size:31px;margin:7px 0;}.login-card .lede{color:var(--muted);margin:0 0 30px;}.login-help{font-size:11px;color:var(--muted);text-align:center;margin-top:24px;}.login-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#172554,#1e40af);color:#fff;display:grid;place-items:center;}.visual-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:45px 45px;transform:perspective(500px) rotateX(45deg) scale(1.4);transform-origin:bottom;}.visual-content{position:relative;z-index:1;width:min(520px,75%);}.visual-content p{display:inline;margin-left:9px;color:#bfdbfe;font-size:12px;}.visual-content strong{display:block;font-family:"Fira Code";font-size:clamp(38px,5vw,65px);line-height:1.12;letter-spacing:-.05em;margin:35px 0;}.visual-content small{color:#93c5fd;letter-spacing:.15em;text-transform:uppercase;}.login-shell+.footer{display:none;}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.house-grid{grid-template-columns:repeat(2,1fr)}.topbar{gap:18px}.user-label{display:none}.device-list{grid-template-columns:1fr}}
@media(max-width:780px){.topbar{height:auto;min-height:64px;flex-wrap:wrap;padding:10px 18px}.topbar nav{order:3;width:100%;overflow-x:auto;height:48px}.topbar nav a{min-width:92px}.page-shell{width:min(100% - 28px,1400px);padding-top:28px}.split{align-items:flex-start;flex-direction:column}.live-state{width:100%}.content-grid,.operation-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr;min-height:100vh}.login-visual{display:none}.login-card{padding:30px 0}.brand-login{margin-bottom:45px}.bar-chart{gap:2px}.bar-value{display:none}.footer{flex-direction:column;gap:4px}.messages{left:14px;right:14px;top:75px}.experiment-running{grid-template-columns:auto 1fr}.experiment-running form{grid-column:1/-1}.experiment-running .button{width:100%}.experiment-live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.appliance-start-form{grid-template-columns:1fr}.appliance-start-form label:first-of-type,.appliance-start-form label:last-of-type,.appliance-start-form .button{grid-column:auto}.experiment-delete-cell{width:auto;text-align:left}.experiment-delete-cell form{justify-content:flex-start}}
@media(max-width:520px){.metrics,.metrics.three,.house-grid,.experiment-live-metrics{grid-template-columns:1fr}.metrics article{min-height:125px}.panel{padding:18px}.page-header h1{font-size:27px}.topbar .brand{margin-right:auto}.user-menu{margin-left:0}.bar-chart{overflow-x:auto}.bar-item{min-width:13px}.table-panel{padding:6px}.device-list dl{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:no-preference){.button,.topbar nav a,.house-card{transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.house-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
.projection-panel{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius);margin-bottom:20px;overflow:hidden;}.projection-panel>div,.projection-panel>article{padding:22px;}.projection-panel>article{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;}.projection-panel h2{font-family:"Fira Code",monospace;color:var(--ink);font-size:18px;margin:4px 0;}.projection-panel p{font-size:12px;color:var(--muted);margin:5px 0;}.projection-panel article>span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}.projection-panel article>strong{font-family:"Fira Code",monospace;color:var(--ink);font-size:25px;margin:6px 0;}.projection-panel article small{color:var(--muted);}.projection-panel code{font-size:9px;color:var(--primary);margin-top:12px;white-space:normal;}.confidence-warning{display:inline-block;background:#fef3c7;color:#92400e;border-radius:6px;padding:6px 8px;margin-top:8px;font-size:10px;}.projection-panel.low-confidence{border-color:#fcd34d;}
.projection-scope{display:block;color:var(--muted);line-height:1.45;margin-top:10px;}
@media(max-width:1050px){.projection-panel{grid-template-columns:1fr 1fr}.projection-intro{grid-column:1/-1}.projection-panel>article:first-of-type{border-left:0}}
@media(max-width:520px){.projection-panel{grid-template-columns:1fr}.projection-intro{grid-column:auto}.projection-panel>article{border-left:0;border-top:1px solid var(--line)}}
.login-options{display:grid;gap:10px;padding:2px 0;}.form-stack .check-option{display:flex;align-items:center;gap:9px;min-height:32px;font-weight:500;color:var(--text);cursor:pointer;}.form-stack .check-option input{width:18px;height:18px;min-height:18px;padding:0;accent-color:var(--primary);cursor:pointer;}.visual-content small{text-transform:none;letter-spacing:.05em;}
.projection-section{padding:0;overflow:hidden;border-color:#bfdbfe;}.projection-heading{padding:20px 22px;margin:0;background:#eff6ff;}.projection-heading h2{font-family:"Fira Code",monospace;margin:3px 0 0;color:var(--ink);font-size:20px;letter-spacing:-.025em;}.projection-cards{display:grid;grid-template-columns:repeat(3,1fr);}.projection-cards article{min-height:154px;padding:22px;border-right:1px solid var(--line);background:#fff;}.projection-cards article:last-child{border-right:0;}.projection-cards article>span{display:block;color:var(--muted);font-size:12px;margin-bottom:14px;}.projection-cards strong{display:block;font-family:"Fira Code",monospace;color:var(--ink);font-size:clamp(22px,2.2vw,30px);letter-spacing:-.04em;line-height:1.12;}.projection-cards strong small{font-family:"Fira Sans",sans-serif;font-size:12px;letter-spacing:0;color:var(--muted);}.projection-cards p{font-size:11px;color:var(--muted);margin:11px 0 0;line-height:1.45;}.projection-cards .projection-highlight{background:var(--ink);}.projection-cards .projection-highlight>span,.projection-cards .projection-highlight p{color:#bfdbfe;}.projection-cards .projection-highlight strong{color:#fff;}.projection-basis{margin:0;padding:11px 22px;border-top:1px solid var(--line);background:#f8fbff;color:var(--muted);font-size:11px;}
.meter-reading-grid{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.75fr);gap:28px;align-items:start;}.meter-reading-grid .responsive-table{border:1px solid var(--line);border-radius:10px;}.meter-reading-grid table td{font-size:12px;}.meter-reading-grid form{margin-top:20px;}
@media(max-width:900px){.projection-cards{grid-template-columns:1fr}.projection-cards article{min-height:122px;border-right:0;border-bottom:1px solid var(--line)}.projection-cards article:last-child{border-bottom:0}.meter-reading-grid{grid-template-columns:1fr}}
@media(max-width:520px){.projection-heading{align-items:flex-start;flex-direction:column}.projection-heading .unit-pill{margin-top:8px}.projection-cards article{padding:18px}.login-options{gap:6px}}
.house-cost.house-projection{margin-top:10px;padding:11px 10px;border:1px solid color-mix(in srgb,var(--house-color),white 78%);border-radius:8px;background:color-mix(in srgb,var(--house-color),white 94%);}.house-cost.house-projection span{display:flex;flex-direction:column;gap:3px;color:var(--ink);font-weight:600;}.house-cost.house-projection span small{color:var(--muted);font-size:9px;font-weight:400;}.house-cost.house-projection strong{font-family:"Fira Code",monospace;color:var(--house-color);font-variant-numeric:tabular-nums;}.house-card>small{display:block;line-height:1.45;}

/* Stable product UI: accessible contrast, clear projection semantics and touch-first controls. */
:root{--accent:#92400e;--success:#166534;}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--primary);place-items:center;cursor:pointer;}
/* The shared energy navigation includes device statistics; keep it touch-safe. */
@media(min-width:781px) and (max-width:1400px){.energy-body .topbar{height:auto;min-height:72px;flex-wrap:wrap;gap:12px;padding:10px 24px}.energy-body .brand{margin-right:auto}.energy-body .nav-toggle{display:grid}.energy-body .user-menu{margin-left:0}.energy-body .user-label{display:none}.energy-body .topbar nav{display:none;order:3;width:100%;height:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.energy-body .topbar nav.is-open{display:grid}.energy-body .topbar nav a{min-width:0;min-height:48px;padding:8px}}
.required-mark{color:var(--danger);}
.form-stack input,.form-stack select,.form-stack textarea{font-size:16px;}
.form-stack .check-option{min-height:44px;padding:5px 0;}
.form-stack .check-option input{width:22px;height:22px;min-height:22px;}
.button[aria-disabled=true],form[aria-busy=true] .button{cursor:wait;opacity:.72;}
.password-field{position:relative;display:block;}
.password-field input{padding-right:82px;}
.password-toggle{position:absolute;right:5px;top:5px;min-height:34px;border:0;border-radius:6px;background:#eff6ff;color:var(--primary);padding:5px 9px;font-size:12px;font-weight:700;cursor:pointer;}
.login-recovery{font-size:13px;font-weight:600;justify-self:end;margin-top:-6px;}
.login-byline{display:none;margin:28px 0 0;text-align:center;color:var(--muted);font-size:12px;}
.auth-shell{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:34px 18px;}
.auth-card{width:min(520px,100%);padding:clamp(24px,5vw,42px);}
.auth-card h1{font-family:"Fira Code",monospace;color:var(--ink);letter-spacing:-.04em;line-height:1.15;}
.auth-card>p:not(.eyebrow){color:var(--muted);}
.auth-card .form-stack{margin:24px 0;}
.auth-back{margin:18px 0 0;}
.retry-link{display:block;border:0;background:none;color:var(--primary);font-size:11px;font-weight:700;padding:3px 0;cursor:pointer;}
.live-state.is-stale .status-dot{background:#b45309;box-shadow:0 0 0 4px #fef3c7;}
.house-letter{color:var(--ink);}
.house-total-label{margin:17px 0 0;color:var(--muted);font-size:11px;}
.house-cost.house-projection strong{color:var(--ink);}
.house-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;}
.house-breakdown div{min-width:0;padding:9px 7px;border-radius:8px;background:#f8fafc;}
.house-breakdown dt{font-size:9px;color:var(--muted);line-height:1.25;}
.house-breakdown dd{margin:4px 0 0;color:var(--ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.coverage-label{display:flex;justify-content:space-between;gap:10px;margin-top:14px;color:var(--muted);font-size:10px;}
.coverage-label strong{color:var(--ink);}
.coverage-label+.coverage{margin-top:5px;}
.house-basis{margin-top:14px;color:var(--muted);font-size:10px;}
.bar-value{opacity:1;color:var(--ink);font-size:10px;font-variant-numeric:tabular-nums;}
.fine-print{color:var(--text)!important;}
.formula b{color:var(--accent);}
.device-head{flex-wrap:wrap;}
.device-head .status-text{font-size:10px;font-weight:700;color:var(--text);}
.device-head .badge{margin-left:auto;}
.channel small{color:#92400e;font-weight:600;}

@media(max-width:780px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);width:100%;max-width:100%;height:auto;min-height:64px;padding:10px 14px;gap:8px 10px}
  .topbar .brand{min-width:0;overflow:hidden}
  .topbar .brand-mark{flex:none}
  .topbar .brand-copy{min-width:0}
  .technical-settings-link{grid-column:2;grid-row:1}
  .nav-toggle{display:grid;grid-column:3;grid-row:1}
  .topbar nav{display:none;grid-column:1/-1;order:initial;width:100%;height:auto;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:4px}
  .topbar nav.is-open{display:grid}
  .topbar nav a{min-width:0;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}
  .topbar nav a[aria-current=page]{background:#eff6ff}
  .topbar nav a[aria-current=page]:after{display:none}
  .user-menu{margin-left:0;grid-column:4;grid-row:1}
  .user-menu summary{min-width:44px;justify-content:center}
  .login-byline{display:block}
  .bar-chart{min-width:0;gap:5px;overflow-x:auto}
  .bar-item{min-width:27px}
  .bar-value{display:block}
}

@media(max-width:680px){
  .responsive-table{overflow:visible}
  .table-mobile-cards,.table-mobile-cards tbody,.table-mobile-cards tr,.table-mobile-cards td{display:block;width:100%}
  .table-mobile-cards thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .table-mobile-cards tbody{display:grid;gap:12px}
  .table-mobile-cards tbody tr{border:1px solid var(--line);border-radius:11px;padding:8px 13px;background:#fff}
  .table-mobile-cards tbody tr:hover{background:#fff}
  .table-mobile-cards td{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--soft);text-align:right!important;white-space:normal}
  .table-mobile-cards td:last-child{border-bottom:0}
  .table-mobile-cards td:before{content:attr(data-label);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;text-align:left}
  .table-mobile-cards td:first-child{display:block;text-align:left!important}
  .table-mobile-cards td:first-child:before{display:block;margin-bottom:5px}
  .table-mobile-cards td[colspan]{display:block;text-align:center!important}
  .table-mobile-cards td[colspan]:before{display:none}
  .table-mobile-cards tfoot{display:none}
  .table-mobile-cards .cell-note{margin-left:0}
  .table-mobile-cards .icon-link{border:1px solid var(--line);border-radius:8px;width:100%;min-height:40px}
  .period-table td:last-child{padding-top:8px}
}

@media(max-width:520px){
  .page-shell{width:min(100% - 22px,1400px);padding-top:24px}
  .topbar .brand strong{font-size:11px;line-height:1.2;white-space:normal}
  .topbar .brand-place,.topbar .brand-copy small{display:none}
  .projection-heading{padding:18px}
  .projection-heading h2{font-size:18px}
  .house-breakdown{grid-template-columns:1fr}
  .house-breakdown div{display:flex;justify-content:space-between;gap:12px}
  .house-breakdown dd{margin:0}
  .login-card{width:min(100% - 36px,390px)}
  .brand-login{margin-bottom:36px}
  .footer{padding-inline:16px}
}

/* Billing period summary: a calm, executive path from current use to closing projection. */
.billing-summary{--summary-blue:#1e40af;--summary-blue-soft:#eff6ff;--summary-blue-line:#bfdbfe;--summary-amber:#b45309;padding:0;overflow:hidden;border-color:#dbe5f2;background:#fff;box-shadow:0 14px 34px rgba(30,58,138,.08);}
.billing-summary-heading{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px 22px;background:linear-gradient(112deg,#f8fbff 0%,#eef5ff 58%,#f8fbff 100%);border-bottom:1px solid #dbeafe;}
.billing-summary-heading::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--summary-blue),#60a5fa);}
.billing-summary-heading h2{margin:3px 0 0;font-family:"Fira Code",monospace;color:var(--ink);font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.035em;}
.billing-summary-heading .unit-pill{border-color:#bfdbfe;background:rgba(255,255,255,.82);color:#1e3a8a;box-shadow:0 3px 10px rgba(30,64,175,.06);}
.billing-period-meta{display:grid;grid-template-columns:minmax(250px,1.55fr) repeat(3,minmax(125px,1fr));gap:10px;margin:0;padding:14px 18px;background:#f5f8fc;border-bottom:1px solid #e2e8f0;}
.billing-period-meta>div{min-width:0;padding:13px 15px;border:1px solid #e2e8f0;border-radius:10px;background:rgba(255,255,255,.9);box-shadow:0 2px 7px rgba(15,23,42,.035);}
.billing-period-meta>div:last-child{border-color:#c7dafe;background:#f8fbff;}
.billing-period-meta dt{color:#64748b;font-size:9px;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:.09em;}
.billing-period-meta dd{margin:5px 0 0;color:var(--ink);font-family:"Fira Code",monospace;font-size:14px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;}
.billing-period-meta>div:last-child dd{color:var(--summary-blue);}
.summary-group{padding:23px 24px 25px;}
.summary-group+.summary-group{padding-top:22px;border-top:1px solid #e5edf6;background:linear-gradient(180deg,#fbfdff 0%,#fff 35%);}
.summary-group h3{display:flex;align-items:center;gap:11px;margin:0 0 14px;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.summary-group h3::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#dbe5f2,transparent);}
.summary-data-grid{display:grid;gap:11px;overflow:visible;background:transparent;border:0;border-radius:0;}
.summary-data-grid.consumption-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.summary-data-grid.cost-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.summary-data-grid article{position:relative;min-width:0;min-height:132px;padding:19px 17px 17px;overflow:hidden;background:#fff;border:1px solid #dfe7f1;border-top:3px solid #94a3b8;border-radius:12px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;box-shadow:0 4px 12px rgba(15,23,42,.045);}
.summary-data-grid article:nth-child(2){border-top-color:#0f766e;}
.summary-data-grid article:nth-child(3){border-top-color:#2563eb;}
.summary-data-grid article:nth-child(4){border-top-color:var(--summary-amber);}
.summary-data-grid article>span{display:block;max-width:18ch;color:#64748b;font-size:11px;font-weight:600;line-height:1.42;}
.summary-data-grid strong{display:block;color:var(--ink);font-family:"Fira Code",monospace;font-size:clamp(20px,2vw,26px);line-height:1.12;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.summary-data-grid strong small{font-family:"Fira Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:0;color:#64748b;}
.summary-data-grid .summary-total{border-color:#93c5fd;border-top-color:var(--summary-blue);background:linear-gradient(145deg,#eff6ff,#dbeafe);box-shadow:0 7px 18px rgba(30,64,175,.1);}
.summary-data-grid .summary-total::after{content:"";position:absolute;right:-28px;bottom:-38px;width:100px;height:100px;border:18px solid rgba(255,255,255,.42);border-radius:50%;pointer-events:none;}
.summary-data-grid .summary-total>span{position:relative;z-index:1;color:#1e40af;font-weight:700;}
.summary-data-grid .summary-total strong{position:relative;z-index:1;font-size:clamp(23px,2.2vw,30px);}
.summary-data-grid .cost-total{border-color:#1e3a8a;border-top-color:#60a5fa;background:linear-gradient(145deg,#1e3a8a,#172554);box-shadow:0 8px 20px rgba(23,37,84,.18);}
.summary-data-grid .cost-total::after{border-color:rgba(96,165,250,.13);}
.summary-data-grid .cost-total>span{color:#dbeafe;}
.summary-data-grid .cost-total strong{color:#fff;font-size:clamp(25px,2.5vw,32px);}

@media(max-width:1050px){
  .billing-period-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-data-grid.consumption-grid,.summary-data-grid.cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-data-grid.consumption-grid .summary-total{grid-column:1/-1}
}

@media(max-width:680px){
  .house-grid{grid-template-columns:1fr}
  .billing-summary-heading{align-items:flex-start;flex-direction:column;padding:20px 19px 18px;gap:12px}
  .billing-summary-heading .unit-pill{align-self:flex-start}
  .billing-period-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:11px 12px}
  .billing-period-meta>div{padding:12px}
  .billing-period-meta>div:first-child{grid-column:1/-1}
  .billing-period-meta dd{font-size:12px}
  .summary-group{padding:20px 16px 21px}
  .summary-data-grid.consumption-grid,.summary-data-grid.cost-grid{grid-template-columns:1fr}
  .summary-data-grid.consumption-grid .summary-total{grid-column:auto}
  .summary-data-grid article{min-height:82px;padding:15px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
  .summary-data-grid article>span{max-width:24ch}
  .summary-data-grid strong,.summary-data-grid .summary-total strong,.summary-data-grid .cost-total strong{font-size:22px;text-align:right}
}

@media(max-width:390px){
  .billing-period-meta{grid-template-columns:1fr}
  .billing-period-meta>div:first-child{grid-column:auto}
  .billing-period-meta>div{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .billing-period-meta dd{margin:0;text-align:right}
  .summary-data-grid article{grid-template-columns:minmax(0,1fr);gap:8px}
  .summary-data-grid article>span{max-width:none}
  .summary-data-grid strong,.summary-data-grid .summary-total strong,.summary-data-grid .cost-total strong{text-align:left}
}

/* House cards prioritize the amount payable, then the energy behind it. */
.house-card{display:flex;flex-direction:column;}
.house-projected-cost{margin-top:18px;padding:16px;border-radius:10px;background:var(--ink);border-left:3px solid var(--house-color);}
.house-projected-cost>span{display:block;margin-bottom:8px;color:#bfdbfe;font-size:11px;font-weight:600;}
.house-projected-cost>strong{display:block;color:#fff;font-family:"Fira Code",monospace;font-size:clamp(24px,2.2vw,30px);line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.house-projected-energy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--house-color),white 78%);border-radius:8px;background:color-mix(in srgb,var(--house-color),white 94%);}
.house-projected-energy>span{color:var(--text);font-size:11px;font-weight:600;}
.house-projected-energy>strong{color:var(--ink);font-family:"Fira Code",monospace;font-size:16px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;}
.house-projected-energy small{color:var(--muted);font-family:"Fira Sans",sans-serif;font-size:10px;}
.house-breakdown.house-breakdown-two{grid-template-columns:repeat(2,minmax(0,1fr));}
.house-meter-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--soft);color:var(--muted);font-size:9px;}
.house-meter-note>strong{display:block;margin-bottom:7px;color:var(--ink);font-size:10px;}
.house-meter-note dl{display:grid;gap:5px;margin:0;}
.house-meter-note dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.house-meter-note dt{min-width:0;}
.house-meter-note dd{margin:0;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.house-live-power{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;margin-top:15px;padding:10px 11px;border:1px solid #bbf7d0;border-radius:8px;background:#f0fdf4;}
.house-live-label{display:flex;align-items:center;gap:7px;color:#166534;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.house-live-label i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}
.house-live-power>strong{grid-row:1/3;grid-column:2;color:var(--ink);font:700 18px "Fira Code",monospace;font-variant-numeric:tabular-nums;white-space:nowrap;}
.house-live-power>small{color:#4b6354;font-size:9px;}
.house-live-power.is-offline{border-color:#e2e8f0;background:#f8fafc;}
.house-live-power.is-offline .house-live-label,.house-live-power.is-offline>small{color:var(--muted);}
.house-live-power.is-offline .house-live-label i{background:#94a3b8;box-shadow:0 0 0 3px #e2e8f0;}
.house-live-power.is-offline>strong{font:600 11px "Fira Sans",sans-serif;color:#64748b;}
.house-manual-reading{border-color:#dbeafe;background:#f8fbff;}
.house-manual-reading .house-live-label{color:var(--primary);}
.house-manual-reading .house-live-label i{border-radius:2px;background:var(--primary);box-shadow:0 0 0 3px #dbeafe;}
.house-manual-reading>strong{font-size:15px;}
.house-manual-reading>strong small{color:var(--muted);font:600 8px "Fira Sans",sans-serif;letter-spacing:0;}
.house-manual-reading>small{color:var(--muted);}
.house-manual-reading.is-pending>strong{font:600 11px "Fira Sans",sans-serif;color:#64748b;}
.house-card-footer{margin-top:auto;padding-top:14px;}
.house-card-footer .coverage-label,.house-card-footer .house-meter-note,.house-card-footer .house-basis{margin-top:0;}
.house-card-footer .coverage{margin-bottom:0;}
.house-card-footer .house-meter-note dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.house-card-footer .house-meter-note dl>div{display:block;min-width:0;}
.house-card-footer .house-meter-note dt{overflow:hidden;font-size:8px;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;}
.house-card-footer .house-meter-note dd{margin-top:3px;overflow:hidden;font-size:9px;text-overflow:ellipsis;}

/* Keep the latest invoices in context; older periods stay one step away. */
.history-panel .panel-heading{margin-bottom:16px;}
.invoice-history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.invoice-history-item{min-width:0;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fbfdff;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.invoice-history-item:hover{border-color:#bfdbfe;background:#f8fbff;box-shadow:0 2px 8px rgba(30,64,175,.07);}
.invoice-history-item.is-static{cursor:default;}.invoice-history-item.is-static:hover{border-color:var(--line);background:#fbfdff;box-shadow:none;}
.invoice-history-copy,.invoice-history-copy strong,.invoice-history-copy small,.invoice-history-meta{display:block;min-width:0;}
.invoice-history-copy strong{overflow:hidden;color:var(--ink);font-size:13px;white-space:nowrap;text-overflow:ellipsis;}
.invoice-history-copy small{margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;}
.invoice-history-meta{flex:none;text-align:right;}
.invoice-history-meta .badge{display:inline-block;padding:4px 7px;font-size:9px;white-space:nowrap;}
.invoice-history-meta>strong{display:block;margin-top:5px;color:var(--ink);font:600 11px "Fira Code",monospace;font-variant-numeric:tabular-nums;}
.invoice-history-empty{grid-column:1/-1;margin:0;color:var(--muted);font-size:13px;}

@media(max-width:1050px){.invoice-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.invoice-history-grid{grid-template-columns:1fr}.invoice-history-item{min-height:72px}}

@media(max-width:520px){
  .house-projected-cost{padding:15px}
  .house-projected-cost>strong{font-size:27px}
  .house-breakdown.house-breakdown-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .house-breakdown.house-breakdown-two div{display:block}
  .house-breakdown.house-breakdown-two dd{margin-top:4px}
}

/* Interactive energy patterns: multi-house filters, daily bars and weekday/hour heatmap. */
.consumption-analysis{overflow:hidden;}
.analysis-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px;}
.analysis-heading h2{margin:3px 0 5px;font-family:"Fira Code",monospace;color:var(--ink);font-size:22px;letter-spacing:-.03em;}
.analysis-heading p:last-child{margin:0;color:var(--muted);font-size:13px;}
.analysis-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:18px;border:1px solid var(--line);border-radius:11px;background:#f8fbff;}
.house-filter-group{min-width:0;margin:0;padding:0;border:0;}
.house-filter-group legend,.weekday-filter-group legend,.chart-view-control>span{display:block;margin-bottom:9px;color:var(--ink);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.house-filter-list{display:flex;flex-wrap:wrap;gap:8px;}
.house-filter{min-height:48px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:600 12px "Fira Sans",sans-serif;cursor:pointer;touch-action:manipulation;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.house-filter-letter{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--filter-color,var(--primary)),white 86%);color:var(--ink);font-family:"Fira Code",monospace;font-weight:700;}
.house-filter-check{width:18px;height:18px;display:grid;place-items:center;border:1px solid #cbd5e1;border-radius:50%;color:#fff;background:#fff;}
.house-filter-check svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.house-filter:hover{border-color:color-mix(in srgb,var(--filter-color),white 40%);background:color-mix(in srgb,var(--filter-color),white 96%);}
.house-filter:focus-visible,.weekday-filter-list button:focus-visible,.chart-view-tabs button:focus-visible,.usage-bar-item:focus-visible,.heatmap-cell:focus-visible{outline:3px solid color-mix(in srgb,var(--primary),white 35%);outline-offset:2px;}
.house-filter[aria-pressed=true]{border-color:var(--filter-color);background:color-mix(in srgb,var(--filter-color),white 91%);box-shadow:inset 0 -3px 0 var(--filter-color);}
.house-filter[aria-pressed=true] .house-filter-check{border-color:var(--filter-color);background:var(--filter-color);}
.house-filter[aria-pressed=true] .house-filter-check svg{opacity:1;}
.chart-view-control{min-width:300px;}
.chart-view-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fff;}
.chart-view-tabs button{min-height:44px;padding:7px 12px;border:0;border-radius:7px;background:transparent;color:var(--text);font:600 12px "Fira Sans",sans-serif;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;}
.chart-view-tabs button:hover{background:#f1f5f9;}
.chart-view-tabs button[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:0 2px 6px rgba(30,58,138,.18);}
.weekday-filter-group{grid-column:1/-1;min-width:0;margin:0;padding:16px 0 0;border:0;border-top:1px solid var(--line);}
.weekday-filter-group[hidden]{display:none;}
.weekday-filter-list{display:flex;flex-wrap:wrap;gap:7px;}
.weekday-filter-list button{min-width:48px;min-height:42px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font:600 11px "Fira Sans",sans-serif;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease;}
.weekday-filter-list button:hover{border-color:#93c5fd;background:#eff6ff;}
.weekday-filter-list button[aria-pressed=true]{border-color:var(--primary);background:var(--primary);color:#fff;}
.chart-context{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:24px 0 10px;}
.chart-context p{margin:0;color:var(--muted);font-size:11px;}
.chart-context #chart-scope{margin-bottom:3px;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.chart-context h3{margin:0 0 4px;color:var(--ink);font-family:"Fira Code",monospace;font-size:17px;letter-spacing:-.02em;}
.chart-legend{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:10px;}
.chart-legend>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.legend-swatch{width:13px;height:13px;display:inline-block;border-radius:3px;background:var(--primary);}
.legend-swatch.is-weekend{background:var(--accent);}
.legend-swatch.heat-level-0{border:1px dashed #94a3b8;background:repeating-linear-gradient(135deg,#fff,#fff 3px,#e2e8f0 3px,#e2e8f0 5px);}
.usage-chart{min-height:300px;border:1px solid var(--line);border-radius:11px;background:#fbfdff;overflow:hidden;}
.usage-bars-scroller,.heatmap-scroller{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:#94a3b8 #e2e8f0;}
.usage-bars{position:relative;height:300px;min-width:760px;display:flex;align-items:stretch;gap:5px;padding:20px 16px 12px 64px;background:#fbfdff;}
.usage-bars-daily{min-width:max(760px,calc(var(--daily-count,20) * 38px));}
.usage-value-scale{position:absolute;z-index:0;inset:44px 16px 46px 0;pointer-events:none;}
.usage-value-scale-unit{position:absolute;top:-25px;left:10px;color:var(--ink);font:700 9px "Fira Code",monospace;text-transform:none;}
.usage-value-scale-tick{position:absolute;left:0;right:0;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:8px;transform:translateY(50%);}
.usage-value-scale-tick span{color:#64748b;font:500 9px "Fira Code",monospace;text-align:right;font-variant-numeric:tabular-nums;}
.usage-value-scale-tick i{height:1px;background:#dbe5f2;}
.usage-bar-item{position:relative;z-index:1;flex:1;min-width:22px;display:grid;grid-template-rows:24px 1fr 34px;align-items:end;text-align:center;border-radius:5px;color:var(--muted);}
.usage-bar-value{align-self:center;color:var(--ink);font:600 9px "Fira Code",monospace;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .15s ease;}
.usage-bar-track{height:100%;display:flex;align-items:flex-end;justify-content:center;}
.usage-bar-fill{display:block;width:min(24px,78%);min-height:2px;border-radius:4px 4px 1px 1px;background:linear-gradient(to top,var(--primary),var(--primary-2));}
.usage-bar-label{align-self:start;margin-top:6px;color:#475569;font-size:10px;line-height:1.25;font-variant-numeric:tabular-nums;}
.usage-bar-item:hover .usage-bar-value,.usage-bar-item:focus .usage-bar-value{opacity:1;}
.usage-bar-item.is-weekend .usage-bar-fill{background:linear-gradient(to top,#92400e,#d97706);}
.usage-bar-item.is-weekend .usage-bar-label{color:#78350f;font-weight:700;}
.usage-heatmap{min-width:760px;display:grid;grid-template-columns:58px repeat(24,minmax(24px,1fr));gap:4px;padding:18px;}
.heatmap-corner,.heatmap-hour,.heatmap-day{display:grid;place-items:center;color:var(--muted);font-size:9px;}
.heatmap-day{justify-content:start;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.heatmap-cell{min-width:24px;aspect-ratio:1;border:0;border-radius:4px;background:#eef2f7;cursor:help;}
.heat-level-0{background:repeating-linear-gradient(135deg,#fff,#fff 4px,#e2e8f0 4px,#e2e8f0 6px);}
.heat-level-1{background:#dbeafe;}.heat-level-2{background:#bfdbfe;}.heat-level-3{background:#60a5fa;}.heat-level-4{background:#2563eb;}.heat-level-5{background:#172554;}
.chart-tooltip{position:fixed;z-index:1000;max-width:min(280px,calc(100vw - 20px));padding:9px 11px;border:1px solid #334155;border-radius:8px;background:#0f172a;color:#fff;box-shadow:0 10px 25px rgba(15,23,42,.22);pointer-events:none;}
.chart-tooltip[hidden]{display:none;}
.chart-tooltip span,.chart-tooltip strong{display:block;white-space:nowrap;}
.chart-tooltip span{color:#cbd5e1;font-size:10px;line-height:1.35;}
.chart-tooltip strong{margin-top:3px;font:700 12px "Fira Code",monospace;font-variant-numeric:tabular-nums;}
.consumption-analysis .chart-data{margin-top:5px;}
.consumption-analysis .chart-data table{max-width:none;}
.consumption-analysis .responsive-table{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:8px;}
.consumption-analysis .chart-data th:first-child{color:var(--ink);font-size:11px;text-transform:none;letter-spacing:0;}
.history-panel .period-mini-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px;}

@media(max-width:900px){
  .analysis-toolbar{grid-template-columns:1fr}
  .chart-view-control{min-width:0}
}

@media(max-width:600px){
  .consumption-analysis{padding:18px}
  .analysis-heading{flex-direction:column;gap:10px}
  .analysis-heading h2{font-size:20px}
  .analysis-heading .unit-pill{align-self:flex-start}
  .analysis-toolbar{padding:13px;gap:18px}
  .house-filter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .house-filter{width:100%;min-width:0;justify-content:flex-start;padding:6px 8px}
  .house-filter-check{margin-left:auto;flex:none}
  .chart-view-tabs button{padding-inline:7px;font-size:11px}
  .chart-context{align-items:flex-start;flex-direction:column;margin-top:20px}
  .chart-legend{justify-content:flex-start}
  .usage-chart{min-height:280px}
  .usage-bars{height:280px;padding-inline:12px}
  .history-panel .period-mini-list{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .house-filter,.weekday-filter-list button,.chart-view-tabs button,.usage-bar-value{transition:none}
}

/* Operations: review invoices before import and keep every editable record in context. */
.operation-section{padding:clamp(20px,3vw,30px);}
.operation-section .panel-copy{max-width:850px;margin:-8px 0 20px;line-height:1.6;}
.field-label{display:inline-flex;align-items:baseline;gap:4px;min-height:20px;}
.field-label .required-mark{display:inline;color:var(--danger);line-height:1;}
.invoice-upload-form{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:18px;border:1px solid var(--line);border-radius:11px;background:#f8fbff;}
.invoice-upload-form label{min-width:0;}
.invoice-upload-form .button{margin-top:26px;}
.invoice-preview{margin-top:24px;padding:22px;border:1px solid #93c5fd;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(30,64,175,.07);}
.record-heading,.subsection-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.record-heading h3,.subsection-heading h3{margin:3px 0 2px;color:var(--ink);font:700 17px "Fira Code",monospace;letter-spacing:-.025em;}
.record-heading small{display:block;max-width:580px;color:var(--muted);font-size:10px;overflow-wrap:anywhere;}
.record-kicker{display:block;color:var(--primary);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.preview-metrics{display:grid;grid-template-columns:1.35fr repeat(3,1fr);margin-top:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.preview-metrics>div{min-width:0;min-height:105px;padding:16px;border-right:1px solid var(--line);background:#f8fbff;}
.preview-metrics>div:last-child{border-right:0;}
.preview-metrics span,.record-total span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em;}
.preview-metrics strong,.record-total strong{display:block;margin-top:9px;color:var(--ink);font:700 18px "Fira Code",monospace;font-variant-numeric:tabular-nums;}
.preview-metrics strong small,.preview-metrics>div>small,.record-total small{display:block;margin-top:3px;color:var(--muted);font:500 10px "Fira Sans",sans-serif;letter-spacing:0;text-transform:none;}
.preview-detail-grid,.invoice-record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px;}
.preview-detail-grid>section,.invoice-record-grid>section{min-width:0;padding:15px;border:1px solid var(--line);border-radius:9px;background:#fbfdff;}
.preview-detail-grid h4,.preview-lines h4,.invoice-record-grid h4{margin:0 0 10px;color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.08em;}
.record-facts{margin:0;}
.record-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--soft);}
.record-facts>div:last-child{border-bottom:0;}
.record-facts dt{color:var(--muted);font-size:11px;}
.record-facts dd{margin:0;color:var(--ink);font-size:11px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
.preview-lines{margin-top:16px;}
.preview-lines .responsive-table{border:1px solid var(--line);border-radius:9px;}
.preview-lines td{padding-block:10px;}
.preview-warnings{margin-top:15px;padding:13px 15px;border-left:3px solid var(--accent);border-radius:7px;background:#fffbeb;color:#78350f;font-size:12px;}
.preview-warnings ul{margin:6px 0 0;padding-left:19px;}
.record-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px;}
.button:disabled{cursor:not-allowed;opacity:.48;}
.integration-note{display:flex;align-items:baseline;gap:14px;margin-top:22px;padding-top:16px;}
.integration-note p{margin:0;}
.reading-strip{grid-template-columns:minmax(160px,.65fr) minmax(190px,.8fr) minmax(240px,1.5fr) auto;align-items:start;}
.reading-strip .button{margin-top:25px;}
.invoice-record-list{display:grid;gap:14px;}
.invoice-record{padding:18px;border:1px solid var(--line);border-radius:11px;background:#fff;}
.record-total{flex:none;text-align:right;}
.record-total strong{font-size:21px;}
.linked-readings{display:grid;gap:8px;}
.linked-readings>div{padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;}
.linked-readings>div>span,.linked-readings>div>strong{display:block;}
.linked-readings>div>span{color:var(--muted);font-size:10px;}
.linked-readings>div>strong{margin-top:3px;color:var(--ink);font:700 12px "Fira Code",monospace;}
.linked-readings details{margin-top:5px;}
.linked-readings summary,.reading-actions summary{color:var(--primary);font-size:11px;font-weight:700;cursor:pointer;}
.record-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.record-footer details{flex:1;}
.record-footer summary{width:max-content;list-style:none;cursor:pointer;}
.record-footer summary::-webkit-details-marker,.reading-actions summary::-webkit-details-marker{display:none;}
.invoice-edit-form,.inline-edit-form{grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;margin-top:14px;padding:15px;border:1px solid var(--line);border-radius:9px;background:#f8fbff;}
.invoice-edit-form .button,.inline-edit-form .button{align-self:end;}
.button.danger-outline{border-color:#fecaca;background:#fff;color:#b91c1c;}
.button.danger-outline:hover{border-color:#ef4444;background:#fef2f2;}
.empty-records{padding:28px;border:1px dashed #bfdbfe;border-radius:10px;color:var(--muted);text-align:center;background:#f8fbff;}
.empty-records strong{color:var(--ink);}
.empty-records p{margin:4px 0 0;font-size:12px;}
.empty-records.compact{padding:18px;}
.independent-readings{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);}
.reading-record-list{display:grid;gap:8px;margin-top:14px;}
.reading-record{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;min-height:76px;padding:13px 15px;border:1px solid var(--line);border-radius:9px;background:#fbfdff;}
.reading-record>div:first-child>span,.reading-record>div:first-child>strong,.reading-record>div:first-child>small{display:block;}
.reading-record>div:first-child>span{color:var(--muted);font-size:10px;}
.reading-record>div:first-child>strong{margin-top:2px;color:var(--ink);font:700 14px "Fira Code",monospace;}
.reading-record>div:first-child>small{margin-top:3px;color:var(--muted);font-size:10px;}
.reading-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:14px;}
.reading-actions form{margin:0;}
.text-danger{min-height:44px;padding:7px;border:0;background:transparent;color:#b91c1c;font-size:11px;font-weight:700;cursor:pointer;}

@media(max-width:1000px){
  .preview-metrics{grid-template-columns:repeat(2,1fr)}
  .preview-metrics>div:nth-child(2){border-right:0}
  .preview-metrics>div:nth-child(-n/**/+2){border-bottom:1px solid var(--line)}
  .preview-detail-grid,.invoice-record-grid{grid-template-columns:1fr 1fr}
  .invoice-record-grid>section:last-child{grid-column:1/-1}
  .reading-strip{grid-template-columns:1fr 1fr}
  .reading-strip .button{margin-top:0}
  .invoice-edit-form,.inline-edit-form{grid-template-columns:repeat(2,minmax(140px,1fr))}
}

@media(max-width:620px){
  .invoice-upload-form,.reading-strip{grid-template-columns:1fr}
  .invoice-upload-form .button,.reading-strip .button{width:100%;margin-top:0}
  .preview-metrics,.preview-detail-grid,.invoice-record-grid{grid-template-columns:1fr}
  .preview-metrics>div{min-height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .preview-metrics>div:last-child{border-bottom:0}
  .invoice-record-grid>section:last-child{grid-column:auto}
  .record-heading{flex-direction:column}
  .record-total{text-align:left}
  .record-actions,.record-footer{align-items:stretch;flex-direction:column}
  .record-actions form,.record-actions .button,.record-footer>form,.record-footer .button,.record-footer summary{width:100%}
  .invoice-edit-form,.inline-edit-form{grid-template-columns:1fr}
  .reading-record{flex-direction:column}
  .reading-actions{width:100%;justify-content:space-between}
  .integration-note{align-items:flex-start;flex-direction:column;gap:3px}
  .usage-bars{padding-left:64px;padding-right:12px}
}

/* Unified operation ledger: readings and invoice closures share one compact table. */
.records-intro{margin:5px 0 0;color:var(--muted);font-size:12px;}
.operation-records-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:#fff;overscroll-behavior-inline:contain;}
.operation-record-table{min-width:1160px;table-layout:fixed;}
.operation-record-table th:nth-child(1){width:9%;}
.operation-record-table th:nth-child(2){width:11%;}
.operation-record-table th:nth-child(3){width:22%;}
.operation-record-table th:nth-child(4){width:24%;}
.operation-record-table th:nth-child(5){width:12%;}
.operation-record-table th:nth-child(6){width:13%;}
.operation-record-table th:nth-child(7){width:9%;}
.operation-record-table td{position:relative;padding:13px 12px;vertical-align:top;}
.operation-record-table tbody+tbody tr:first-child td{border-top:8px solid #fff;}
.operation-record-table .invoice-record-group tr{background:#f8fbff;}
.operation-record-table .invoice-record-group tr:hover{background:#f1f7ff;}
.operation-record-table .invoice-record-group td:first-child{border-left:3px solid #60a5fa;}
.operation-record-table .invoice-row-start td{border-bottom-color:#dbeafe;}
.record-primary,.record-source,.record-period,.record-total-inline{display:block;color:var(--ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.record-total-inline{font-family:"Fira Code",monospace;font-size:13px;}
.operation-record-row td small{display:block;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.35;}
.not-applicable{color:#94a3b8;font:600 10px "Fira Code",monospace;}
.invoice-relation-marker{display:inline-block;width:8px;height:8px;margin:0 7px 1px 0;border:2px solid #2563eb;border-radius:50%;background:#fff;}
.invoice-row-end td:nth-child(3)::after{content:"";position:absolute;left:15px;top:31px;bottom:-14px;width:2px;background:#93c5fd;z-index:1;}
.invoice-row-start .record-source,.invoice-row-end .record-source{display:inline;color:#1e40af;}
.record-edit{display:none;}
.operation-record-row.is-editing{background:#fffdf7!important;box-shadow:inset 3px 0 #d97706;}
.operation-record-row.is-editing .record-display{display:none!important;}
.operation-record-row.is-editing .record-edit{display:block;}
.operation-record-row.is-editing .row-save-actions{display:flex;}
.record-edit-stack{gap:8px;}
.operation-record-row.is-editing .record-edit-stack{display:grid;}
.record-field{display:grid;min-width:0;gap:4px;text-align:left;}
.record-field>span{color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.record-field input{width:100%;min-width:0;min-height:42px;padding:8px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:var(--ink);font-size:12px;}
.record-field input:focus{border-color:var(--primary);outline:3px solid #dbeafe;outline-offset:0;}
.record-field-pair,.record-date-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.record-edit-hint{display:block;margin-top:6px;color:var(--muted);font-size:9px;line-height:1.35;}
.row-icon-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.row-icon-actions form{margin:0;}
.icon-button{width:44px;height:44px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--primary);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease;}
.icon-button svg{width:18px;height:18px;}
.icon-button:hover{border-color:#93c5fd;background:#eff6ff;}
.icon-button.delete-icon{border-color:#fecaca;color:#b91c1c;}
.icon-button.delete-icon:hover{border-color:#ef4444;background:#fef2f2;color:#991b1b;}
.row-save-actions{align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;}
.compact-button{min-height:40px;padding:8px 11px;font-size:11px;}
.record-delete-dialog{width:min(610px,calc(100% - 32px));padding:0;border:0;border-radius:14px;background:#fff;color:var(--text);box-shadow:0 24px 70px rgba(15,23,42,.28);}
.record-delete-dialog::backdrop{background:rgba(15,23,42,.52);backdrop-filter:blur(2px);}
.dialog-content{padding:26px;}
.dialog-content h3{margin:5px 0 8px;color:var(--ink);font:700 20px "Fira Code",monospace;}
.dialog-content p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;}
.dialog-eyebrow{color:#b91c1c;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:22px;}
.dialog-actions form{margin:0;}

@media(max-width:800px){
  .operation-records-wrap{overflow:visible;border:0;background:transparent}
  .operation-record-table{display:block;min-width:0}
  .operation-record-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .operation-record-table tbody{display:block;margin-bottom:12px}
  .operation-record-table tbody+tbody tr:first-child td{border-top:0}
  .operation-record-table tr{display:block;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
  .operation-record-table .invoice-record-group tr{border-left:3px solid #60a5fa;border-radius:0}
  .operation-record-table .invoice-record-group tr:first-child{border-radius:10px 10px 0 0}
  .operation-record-table .invoice-record-group tr:last-child{border-top:0;border-radius:0 0 10px 10px}
  .operation-record-table td,.operation-record-table td.numeric{display:grid;grid-template-columns:minmax(112px,.42fr) minmax(0,1fr);align-items:start;gap:12px;width:100%;padding:10px 12px;border-bottom:1px solid var(--soft);border-left:0!important;text-align:left}
  .operation-record-table td::before{content:attr(data-label);color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
  .operation-record-table td:last-child{border-bottom:0}
  .operation-record-row td>.record-display,.operation-record-row td>.record-edit{text-align:left}
  .invoice-row-end td:nth-child(3)::after{display:none}
  .row-icon-actions,.row-save-actions{justify-content:flex-start}
  .record-actions-cell .record-display,.record-actions-cell .record-edit{grid-column:2}
  .record-field input{min-height:44px;font-size:16px}
}

@media(max-width:520px){
  .operation-record-table td,.operation-record-table td.numeric{grid-template-columns:96px minmax(0,1fr);gap:8px}
  .record-date-grid,.record-field-pair{grid-template-columns:1fr}
  .dialog-content{padding:21px}
  .dialog-actions{align-items:stretch;flex-direction:column-reverse}
  .dialog-actions,.dialog-actions form,.dialog-actions .button{width:100%}
}

/* User access management: compact permission overview and explicit, accessible scopes. */
.user-page-header .button{flex:none;gap:8px;}.user-page-header .button svg{width:18px;height:18px;}
.user-email-notice{align-items:flex-start;}.user-email-notice div{min-width:0;}
.user-access-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px;}
.user-access-metrics article{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:82px;padding:16px 18px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.035);}
.user-access-metrics article:last-child{border-color:#fde68a;background:#fffbeb;}
.user-access-metrics span{color:#64748b;font-size:12px;font-weight:600;}
.user-access-metrics strong{color:var(--ink);font:700 25px "Fira Code",monospace;font-variant-numeric:tabular-nums;}
.user-list-panel{padding:18px;}.user-list-panel .panel-heading{margin:0 6px 14px;}
.user-access-table{table-layout:auto;}.user-access-table th,.user-access-table td{vertical-align:middle;}
.user-access-table td{padding-block:13px;}.user-access-table time{color:#475569;font:500 11px "Fira Code",monospace;white-space:nowrap;}
.user-identity-cell{display:flex;align-items:center;gap:10px;min-width:205px;}.user-identity-cell .avatar{flex:none;width:36px;height:36px;}
.user-identity-cell>span:last-child,.user-identity-cell strong,.user-identity-cell small{display:block;min-width:0;}
.user-identity-cell strong{overflow:hidden;max-width:220px;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap;}
.user-identity-cell small{overflow:hidden;max-width:220px;margin-top:2px;color:#64748b;font-size:10px;text-overflow:ellipsis;white-space:nowrap;}
.access-role-badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid #dbe5f2;border-radius:999px;background:#f8fafc;color:#475569;font-size:10px;font-weight:700;white-space:nowrap;}
.access-role-badge.is-admin{border-color:#bfdbfe;background:#eff6ff;color:#1e40af;}
.access-chip-list{display:flex;flex-wrap:wrap;gap:5px;max-width:235px;}
.access-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 7px;border-radius:6px;background:#f1f5f9;color:#334155;font-size:10px;font-weight:600;white-space:nowrap;}
.access-chip i{width:7px;height:7px;border-radius:50%;background:var(--chip-color,var(--primary));}
.access-feature-list{display:flex;flex-wrap:wrap;gap:4px;max-width:260px;}.access-feature-list>span:not(.empty-value){padding:3px 6px;border:1px solid #e2e8f0;border-radius:5px;color:#475569;font-size:9px;line-height:1.25;}
.empty-value{color:#64748b;font-size:11px;}
.account-status{display:inline-flex;align-items:center;gap:6px;color:#475569;font-size:10px;font-weight:700;white-space:nowrap;}.account-status i{width:7px;height:7px;border-radius:50%;background:#94a3b8;}
.account-status.is-active{color:#166534;}.account-status.is-active i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}
.account-status.is-pending{color:#92400e;}.account-status.is-pending i{background:#d97706;box-shadow:0 0 0 3px #fef3c7;}
.account-status.is-disabled{color:#64748b;}.account-status.is-disabled i{background:#94a3b8;box-shadow:0 0 0 3px #e2e8f0;}
.user-row-actions{white-space:nowrap;}.user-row-actions,.user-row-actions form{display:flex;align-items:center;justify-content:flex-end;gap:6px;}.user-row-actions .icon-button{width:40px;height:40px;min-width:40px;}

.user-form-header{max-width:760px;}.user-access-form{max-width:1120px;}.user-access-form>.form-error{margin-bottom:16px;padding:14px 16px;border:1px solid #fecaca;border-radius:9px;background:#fef2f2;}
.user-form-section{padding:0;overflow:hidden;}.user-form-section-heading{display:flex;align-items:center;gap:13px;padding:18px 21px;border-bottom:1px solid #e2e8f0;background:#f8fbff;}
.user-form-section-heading .section-number{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:9px;background:#dbeafe;color:#1e40af;font:700 11px "Fira Code",monospace;}
.user-form-section-heading h2,.invitation-option h2{margin:0;color:var(--ink);font-family:"Fira Code",monospace;font-size:17px;letter-spacing:-.025em;}.user-form-section-heading p,.invitation-option p{margin:3px 0 0;color:#64748b;font-size:12px;}
.user-form-grid{display:grid;gap:17px;padding:21px;}.user-form-grid.two-columns{grid-template-columns:repeat(2,minmax(0,1fr));}
.user-access-form label,.role-field label{color:var(--ink);font-size:12px;font-weight:700;}.user-form-grid label,.role-field label{display:grid;gap:6px;}
.user-access-form input[type=text],.user-access-form input[type=email],.user-access-form select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--text);font-size:16px;}
.user-access-form input:focus,.user-access-form select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #dbeafe;outline:0;}
.user-access-form label small{color:#64748b;font-size:10px;font-weight:400;}.required-mark{color:#b91c1c;}
.inline-checks{display:flex;flex-wrap:wrap;gap:12px 28px;padding:0 21px 21px;}.user-access-form .check-option,.invitation-option .check-option{min-height:44px;display:inline-flex;align-items:center;gap:9px;color:#334155;font-size:12px;font-weight:600;cursor:pointer;}
.user-access-form input[type=checkbox]{width:21px;height:21px;min-height:21px;margin:0;accent-color:var(--primary);cursor:pointer;}
.role-field{max-width:380px;padding:21px 21px 5px;}
.admin-scope-note{margin:12px 21px 2px;padding:10px 12px;border-left:3px solid #2563eb;border-radius:6px;background:#eff6ff;color:#1e3a8a;font-size:11px;font-weight:600;}.admin-scope-note[hidden]{display:none;}
.access-choice-fieldset{min-width:0;margin:16px 21px 21px;padding:17px;border:1px solid #dbe5f2;border-radius:10px;background:#fbfdff;}.access-choice-fieldset legend{padding:0 7px;color:var(--ink);font-size:12px;font-weight:700;}.access-choice-fieldset>p{margin:0 0 13px;color:#64748b;font-size:11px;}
.access-choice-fieldset:disabled{opacity:.58;background:#f8fafc;}.access-choice-fieldset:disabled label{cursor:not-allowed;}
.access-choice-grid>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}.access-choice-grid>div>div{min-width:0;}
.access-choice-grid label{min-height:48px;display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid #dbe5f2;border-radius:8px;background:#fff;color:#334155;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;}
.access-choice-grid label:hover{border-color:#93c5fd;background:#f8fbff;}.access-choice-grid label:has(input:checked){border-color:#60a5fa;background:#eff6ff;box-shadow:inset 0 -2px 0 #2563eb;}
.feature-choice-grid>div{grid-template-columns:repeat(2,minmax(0,1fr));}
.feature-explanations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px;margin-top:14px;padding-top:13px;border-top:1px solid #e2e8f0;}.feature-explanations p{margin:0;color:#64748b;font-size:10px;line-height:1.45;}.feature-explanations strong{color:#334155;}
.invitation-option{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;border-color:#bfdbfe;background:#f8fbff;}.invitation-option>div{max-width:650px;}.invitation-option small{display:block;margin-top:7px;color:#92400e;font-size:11px;font-weight:600;}.invitation-option.is-unavailable{border-color:#fde68a;background:#fffbeb;}
.user-form-actions{position:sticky;z-index:10;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px;padding:14px 0 2px;background:linear-gradient(180deg,rgba(244,247,251,0),var(--bg) 28%);}

@media(max-width:1050px){
  .user-access-table{min-width:1080px}
  .access-choice-grid>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .user-access-metrics{grid-template-columns:1fr}.user-access-metrics article{min-height:66px;padding:12px 15px}.user-access-metrics strong{font-size:21px}
  .user-list-panel{padding:12px}.user-list-panel .panel-heading{margin:4px 3px 14px}
  .user-access-table{min-width:0}.user-access-table td:first-child:before{margin-bottom:8px}.user-access-table .user-row-actions{display:flex;justify-content:flex-end}.user-access-table .user-row-actions:before{margin-right:auto}
  .access-chip-list,.access-feature-list{justify-content:flex-end;max-width:min(70%,280px)}
  .user-form-grid.two-columns{grid-template-columns:1fr}.user-form-grid{padding:18px}.inline-checks{padding:0 18px 18px}.role-field{padding:18px 18px 4px}.admin-scope-note{margin-inline:18px}.access-choice-fieldset{margin:14px 18px 18px;padding:14px}
  .invitation-option{align-items:flex-start;flex-direction:column;gap:10px;padding:18px}.invitation-option .check-option{width:100%}
}
@media(max-width:440px){
  .access-choice-grid>div,.feature-choice-grid>div,.feature-explanations{grid-template-columns:1fr}
  .user-form-section-heading{align-items:flex-start;padding:16px}.user-form-section-heading .section-number{width:30px;height:30px}
  .user-form-actions{display:grid;grid-template-columns:1fr 1fr}.user-form-actions .button{width:100%;padding-inline:10px}
  .access-chip-list,.access-feature-list{max-width:65%}
}

@media(prefers-reduced-motion:reduce){.access-choice-grid label{transition:none}}

/* Home Manager portal */
.home-shell{width:min(1240px,calc(100% - 48px));gap:28px;}
.home-hero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:36px;min-height:210px;padding:38px;border:1px solid #cbdaf1;border-radius:20px;overflow:hidden;background:linear-gradient(130deg,#eff6ff 0%,#fff 58%,#fff7ed 100%);box-shadow:0 18px 48px rgba(30,64,175,.08);}
.home-hero::after{content:"";position:absolute;right:-75px;top:-115px;width:300px;height:300px;border:55px solid rgba(59,130,246,.08);border-radius:50%;pointer-events:none;}
.home-hero>div:first-child{position:relative;z-index:1;max-width:690px;}
.home-hero h1{margin:7px 0 12px;color:var(--ink);font:700 clamp(31px,4.4vw,54px)/1.04 "Fira Code",monospace;letter-spacing:-.055em;}
.home-hero p:last-child{max-width:590px;margin:0;color:#52627a;font-size:16px;}
.integration-state{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-width:285px;padding:14px 16px;border:1px solid #dbe5f2;border-radius:12px;background:rgba(255,255,255,.88);color:var(--text);box-shadow:0 8px 24px rgba(15,23,42,.06);cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;}
.integration-state:hover{border-color:#93c5fd;background:#fff;box-shadow:0 12px 28px rgba(30,64,175,.11);}
.integration-state-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:10px;background:#f1f5f9;}
.integration-state-icon i{width:10px;height:10px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 5px #e2e8f0;}
.integration-state.is-installed .integration-state-icon{background:#fff7ed;}.integration-state.is-installed .integration-state-icon i{background:#d97706;box-shadow:0 0 0 5px #ffedd5;}
.integration-state.is-online .integration-state-icon{background:#f0fdf4;}.integration-state.is-online .integration-state-icon i{background:#16a34a;box-shadow:0 0 0 5px #dcfce7;}
.integration-state strong,.integration-state small{display:block;}.integration-state strong{color:var(--ink);font-size:12px;}.integration-state small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35;}
.home-energy-overview{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);overflow:hidden;}
.home-energy-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 26px;border-bottom:1px solid var(--line);}
.home-energy-heading h2{margin:4px 0 2px;color:var(--ink);font:700 20px "Fira Code",monospace;letter-spacing:-.03em;}.home-energy-heading p:last-child{margin:0;color:var(--muted);font-size:12px;}
.home-energy-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.home-energy-metrics article{min-width:0;padding:22px 26px;border-right:1px solid var(--line);}.home-energy-metrics article:last-child{border-right:0;}.home-energy-metrics article.is-highlighted{background:#eff6ff;}
.home-energy-metrics span,.home-energy-metrics strong{display:block;}.home-energy-metrics span{margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:600;}.home-energy-metrics strong{color:var(--ink);font:700 clamp(21px,2.6vw,30px) "Fira Code",monospace;letter-spacing:-.04em;}.home-energy-metrics small{font-size:.45em;color:var(--muted);}
.home-modules{display:grid;gap:18px;}.home-modules .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;}.home-modules .section-heading h2{margin:4px 0 0;color:var(--ink);font:700 24px "Fira Code",monospace;letter-spacing:-.035em;}.home-modules .section-heading>p{max-width:440px;margin:0;color:var(--muted);font-size:12px;text-align:right;}
.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.module-card{min-width:0;min-height:235px;display:flex;flex-direction:column;padding:21px;border:1px solid #dbe5f2;border-radius:14px;background:#fff;color:var(--text);box-shadow:0 5px 18px rgba(15,23,42,.045);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.module-card.is-actionable:hover{transform:translateY(-3px);border-color:#93c5fd;box-shadow:0 15px 32px rgba(30,64,175,.1);}
.module-card-head,.module-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}.module-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:11px;background:#eff6ff;color:#1e40af;}.module-icon svg{width:22px;height:22px;}.module-icon-climate{background:#fff7ed;color:#c2410c;}.module-icon-appliances{background:#f5f3ff;color:#6d28d9;}.module-icon-media{background:#ecfeff;color:#0e7490;}.module-icon-lighting{background:#fefce8;color:#a16207;}.module-icon-security{background:#f1f5f9;color:#475569;}
.module-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:#f8fafc;color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}.module-status i{width:6px;height:6px;border-radius:50%;background:#94a3b8;}.module-status.is-online{background:#f0fdf4;color:#166534;}.module-status.is-online i{background:#22c55e;}.module-status.is-restricted{background:#fef2f2;color:#991b1b;}.module-status.is-restricted i{background:#ef4444;}
.module-card-copy{margin:24px 0 20px;}.module-card-copy h3{margin:0 0 8px;color:var(--ink);font:700 18px "Fira Code",monospace;letter-spacing:-.03em;}.module-card-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.55;}
.module-card-foot{margin-top:auto;padding-top:14px;border-top:1px solid #edf2f7;color:#64748b;font-size:10px;}.module-arrow{color:var(--primary);font-size:20px;line-height:1;}

@media(max-width:960px){.home-hero{align-items:flex-start;flex-direction:column}.integration-state{width:100%}.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.home-shell{width:min(100% - 28px,1240px);padding-top:24px}.home-hero{min-height:0;padding:25px 21px}.home-hero h1{font-size:31px}.home-hero p:last-child{font-size:14px}.home-energy-heading,.home-modules .section-heading{align-items:flex-start;flex-direction:column}.home-energy-heading{padding:19px}.home-energy-heading .button{width:100%}.home-energy-metrics{grid-template-columns:1fr}.home-energy-metrics article{padding:18px 20px;border-right:0;border-bottom:1px solid var(--line)}.home-energy-metrics article:last-child{border-bottom:0}.home-modules .section-heading>p{text-align:left}.module-grid{grid-template-columns:1fr}.module-card{min-height:205px}}
@media(prefers-reduced-motion:reduce){.module-card{transition:none}}

/* Administrative inbox: compact audit trail for every inbound channel. */
.inbox-page-header{max-width:820px;}
.inbox-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.inbox-metrics article{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;border:1px solid var(--line);border-radius:11px;background:#fff;}
.inbox-metrics article.needs-attention{border-color:#fed7aa;background:#fff7ed;}
.inbox-metrics span{color:var(--muted);font-size:12px;font-weight:600;}.inbox-metrics strong{color:var(--ink);font:700 24px "Fira Code",monospace;font-variant-numeric:tabular-nums;}
.inbox-retention-note{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px;padding:15px 17px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1e3a8a;}
.inbox-retention-note svg{width:20px;height:20px;flex:none;margin-top:1px;}.inbox-retention-note strong{display:block;color:var(--ink);font-size:12px;}.inbox-retention-note p{margin:2px 0 0;font-size:11px;line-height:1.5;}
.inbox-panel{padding:18px;}.inbox-filters{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(190px,1fr) minmax(170px,.8fr) auto;align-items:end;gap:12px;padding:4px 5px 19px;border-bottom:1px solid var(--soft);}
.inbox-filters label{display:grid;gap:6px;color:var(--ink);font-size:11px;font-weight:700;}.inbox-filters input,.inbox-filters select{width:100%;min-height:44px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--text);font-size:16px;}
.inbox-filters input:focus,.inbox-filters select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #dbeafe;outline:0;}.inbox-filter-actions{display:flex;align-items:center;gap:8px;}.inbox-filter-actions .button{white-space:nowrap;}
.inbox-list-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 6px 12px;}.inbox-list-heading h2{margin:3px 0 0;color:var(--ink);font:700 18px "Fira Code",monospace;letter-spacing:-.025em;}
.inbox-table{table-layout:auto;}.inbox-table th,.inbox-table td{vertical-align:top;}.inbox-table td{padding-block:14px;}.inbox-table time{color:#475569;font:500 10px "Fira Code",monospace;white-space:nowrap;}
.inbox-table td>strong,.inbox-table td>small,.inbox-table td>span{display:block;}.inbox-mailbox{max-width:190px;overflow:hidden;color:var(--ink);font-size:11px;text-overflow:ellipsis;white-space:nowrap;}.inbox-mailbox+small{max-width:190px;margin-top:3px;color:var(--muted);font-size:9px;}
.inbox-sender{max-width:220px;overflow:hidden;color:var(--ink);font-size:11px;text-overflow:ellipsis;white-space:nowrap;}.inbox-subject{max-width:220px;margin-top:4px;color:#64748b;font-size:11px;line-height:1.35;}
.inbox-attachment-count{color:var(--ink);font:700 17px "Fira Code",monospace;}.inbox-attachment-count+small{margin-top:2px;color:var(--muted);font-size:10px;}
.inbox-status,.raw-state{display:inline-flex!important;align-items:center;gap:6px;min-height:27px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:700;white-space:nowrap;}.inbox-status i,.raw-state i{width:6px;height:6px;border-radius:50%;background:currentColor;}
.inbox-status.processed{background:#f0fdf4;color:#166534;}.inbox-status.filtered{background:#f1f5f9;color:#475569;}.inbox-status.received{background:#eff6ff;color:#1e40af;}.inbox-status.pending{background:#fff7ed;color:#9a3412;}.inbox-status.failed{background:#fef2f2;color:#991b1b;}
.inbox-result-stack{display:grid;justify-items:start;min-width:230px;}.inbox-result{max-width:290px;margin-top:7px;color:#475569;font-size:10px;line-height:1.4;}.inbox-detail{width:100%;max-width:330px;margin-top:3px;}.inbox-detail summary{min-height:44px;display:flex;align-items:center;color:var(--primary);font-size:10px;font-weight:700;cursor:pointer;}.inbox-detail[open] summary{margin-bottom:6px;}
.inbox-processing-counts{display:grid;grid-template-columns:repeat(3,auto);gap:5px;margin-top:8px;}.inbox-processing-counts span{min-width:54px;padding:5px 6px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;color:#64748b;font-size:8px;text-align:center;}.inbox-processing-counts strong{display:block;color:var(--ink);font:700 11px "Fira Code",monospace;}
.inbox-detail dl{display:grid;gap:5px;margin:0;padding:9px;border:1px solid #e2e8f0;border-radius:7px;background:#f8fafc;}.inbox-detail dl div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;}.inbox-detail dt{color:var(--muted);font-size:9px;}.inbox-detail dd{min-width:0;margin:0;overflow-wrap:anywhere;color:#334155;font-size:9px;}.inbox-detail>p{margin:7px 0;color:#64748b;font-size:10px;}
.inbox-import-list{display:grid;gap:6px;margin:7px 0 0;padding:0;list-style:none;}.inbox-import-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:8px;border:1px solid #e2e8f0;border-radius:7px;}.inbox-import-list li>span{min-width:0;overflow:hidden;color:#334155;font-size:9px;text-overflow:ellipsis;white-space:nowrap;}.inbox-import-list li>small{grid-column:1/-1;color:#64748b;font-size:9px;}.import-status{font-size:8px;text-transform:uppercase;}.import-status.imported{color:#166534;}.import-status.failed{color:#991b1b;}.import-status.pending{color:#9a3412;}
.raw-state.retained{background:#eff6ff;color:#1e40af;}.raw-state.purged{background:#f1f5f9;color:#475569;}.raw-state.unavailable{background:#f8fafc;color:#64748b;}.raw-state+small{margin-top:4px;color:var(--muted);font-size:9px;}
.inbox-row-actions{min-width:112px;}.inbox-row-actions,.inbox-row-actions>form{display:flex;align-items:center;justify-content:flex-end;gap:7px;}.inbox-process-button{min-height:40px;padding:8px 11px;font-size:10px;}.inbox-row-actions .icon-button{width:40px;height:40px;min-width:40px;}
.inbox-panel .empty-state svg{width:38px;height:38px;margin-bottom:8px;color:#94a3b8;}.inbox-panel .empty-state h2{margin:0;color:var(--ink);font:700 17px "Fira Code",monospace;}.inbox-panel .empty-state p{margin:6px 0 0;}.pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 6px 4px;}.pagination>span{color:var(--muted);font-size:11px;}

@media(max-width:1050px){.inbox-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.inbox-filter-actions{grid-column:1/-1}.inbox-table{min-width:1080px}}
@media(max-width:680px){
  .inbox-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.inbox-metrics article{min-height:66px;padding:12px 14px}.inbox-metrics strong{font-size:21px}
  .inbox-retention-note{padding:13px}.inbox-panel{padding:12px}.inbox-filters{grid-template-columns:1fr;padding-inline:2px}.inbox-filter-actions{grid-column:auto}.inbox-filter-actions .button{flex:1}
  .inbox-list-heading{align-items:flex-start}.inbox-table{min-width:0;max-width:100%;table-layout:fixed}.inbox-table tbody,.inbox-table tbody tr,.inbox-table td{min-width:0!important;max-width:100%!important;width:100%!important}.inbox-table thead tr,.inbox-table thead th{position:absolute;display:block;width:1px;max-width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0,0,0,0);white-space:nowrap}.inbox-table td:first-child{display:flex;text-align:right!important}.inbox-table td:first-child:before{display:block;margin:0}.inbox-table td>small,.inbox-table td>span,.inbox-table td>strong{max-width:68%;text-align:right}.inbox-result-stack{min-width:0;max-width:68%;justify-items:end;text-align:right}.inbox-result-stack>*{max-width:100%;text-align:right}.inbox-table .inbox-status,.inbox-table .raw-state{margin-left:auto}.inbox-processing-counts{margin-left:auto}.inbox-detail{max-width:100%;margin-left:auto;text-align:left}.inbox-detail summary{justify-content:flex-end}.inbox-detail dl div{grid-template-columns:64px minmax(0,1fr)}.inbox-row-actions{justify-content:flex-end}.inbox-row-actions:before{margin-right:auto}.inbox-row-actions>form{max-width:none}
  .pagination{justify-content:space-between;gap:8px}.pagination .button{padding-inline:12px}.pagination>span{text-align:center}
}
@media(max-width:420px){.inbox-metrics{grid-template-columns:1fr}.inbox-filter-actions{display:grid;grid-template-columns:1fr}.inbox-list-heading .unit-pill{display:none}.inbox-table td>small,.inbox-table td>span,.inbox-table td>strong,.inbox-detail{max-width:64%}}
@media(prefers-reduced-motion:reduce){.inbox-filters input,.inbox-filters select{scroll-behavior:auto}}
/* Read-only device inventory. Manufacturer adapters remain outside homehub. */
.device-inventory-shell{width:min(1240px,calc(100% - 48px));display:grid;align-content:start;gap:24px;}
.inventory-page-header{margin-bottom:0;}.inventory-page-header>div{max-width:770px;}.inventory-page-header .button{flex:none;gap:7px;}.inventory-page-header .button svg{width:18px;height:18px;}
.inventory-engine{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 22px;border:1px solid #dbe5f2;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.045);}
.inventory-engine.is-online{border-color:#bbf7d0;background:linear-gradient(115deg,#f0fdf4,#fff 62%);}.inventory-engine.is-offline{border-color:#fed7aa;background:linear-gradient(115deg,#fff7ed,#fff 62%);}
.inventory-engine-icon,.inventory-setup-icon{width:46px;height:46px;display:grid;place-items:center;flex:none;border-radius:12px;background:#f1f5f9;color:#475569;}.inventory-engine.is-online .inventory-engine-icon{background:#dcfce7;color:#15803d;}.inventory-engine.is-offline .inventory-engine-icon{background:#ffedd5;color:#c2410c;}.inventory-engine-icon svg,.inventory-setup-icon svg{width:24px;height:24px;}
.inventory-engine-copy h2{margin:3px 0 4px;color:var(--ink);font:700 18px "Fira Code",monospace;letter-spacing:-.025em;}.inventory-engine-copy>p:last-child{margin:0;color:#52627a;font-size:12px;}
.inventory-engine-metrics{display:flex;align-items:stretch;margin:0;}.inventory-engine-metrics div{min-width:135px;padding:3px 17px;border-left:1px solid #dbe5f2;}.inventory-engine-metrics dt{color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}.inventory-engine-metrics dd{margin:5px 0 0;color:var(--ink);font:700 16px "Fira Code",monospace;}
.inventory-filters{display:flex;gap:7px;max-width:100%;padding:4px 2px;overflow-x:auto;scrollbar-width:thin;}.inventory-filters a{min-height:44px;display:inline-flex;align-items:center;gap:8px;flex:none;padding:9px 12px;border:1px solid #dbe5f2;border-radius:9px;background:#fff;color:#52627a;font-size:11px;font-weight:700;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease;}.inventory-filters a:hover{border-color:#93c5fd;background:#f8fbff;color:#1e40af;}.inventory-filters a[aria-current=page]{border-color:#60a5fa;background:#eff6ff;color:#1e40af;box-shadow:inset 0 -2px 0 #2563eb;}.inventory-filters a span{min-width:22px;padding:2px 6px;border-radius:999px;background:#e9eef6;color:#475569;text-align:center;font:600 9px "Fira Code",monospace;}.inventory-filters a[aria-current=page] span{background:#dbeafe;color:#1e40af;}
.inventory-results{display:grid;gap:16px;}.inventory-results-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}.inventory-results-heading h2{margin:4px 0 0;color:var(--ink);font:700 23px "Fira Code",monospace;letter-spacing:-.035em;}.inventory-results-heading>p{margin:0;color:#64748b;font-size:11px;font-weight:600;}
.inventory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}.inventory-card{min-width:0;display:flex;flex-direction:column;padding:18px;border:1px solid #dbe5f2;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.04);}
.inventory-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}.inventory-availability{display:inline-flex;align-items:center;gap:6px;color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.035em;}.inventory-availability i{width:7px;height:7px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px #e2e8f0;}.inventory-availability.is-available{color:#166534;}.inventory-availability.is-available i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}
.inventory-card-copy{margin:17px 0 15px;}.inventory-card-copy>span{color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;}.inventory-card-copy h3{margin:4px 0 5px;overflow-wrap:anywhere;color:var(--ink);font:700 16px "Fira Code",monospace;letter-spacing:-.025em;}.inventory-entity-id{margin:0;overflow:hidden;color:#64748b;font:500 9px "Fira Code",monospace;text-overflow:ellipsis;white-space:nowrap;}
.inventory-state{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:13px;border-top:1px solid #edf2f7;}.inventory-state span{color:#64748b;font-size:10px;}.inventory-state strong{color:var(--ink);font-size:12px;text-align:right;}.inventory-details{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0;padding:0;list-style:none;}.inventory-details li{padding:4px 7px;border-radius:6px;background:#f1f5f9;color:#475569;font-size:9px;font-weight:600;}
.inventory-empty,.inventory-setup{display:flex;align-items:center;gap:18px;padding:28px;border:1px dashed #bfd0e6;border-radius:14px;background:#f8fbff;}.inventory-empty{min-height:210px;justify-content:center;flex-direction:column;text-align:center;}.inventory-empty>svg{width:38px;height:38px;color:#64748b;}.inventory-empty h3,.inventory-setup h2{margin:0;color:var(--ink);font:700 18px "Fira Code",monospace;}.inventory-empty p,.inventory-setup>div>p:last-child{max-width:720px;margin:5px 0 0;color:#52627a;font-size:12px;line-height:1.6;}.inventory-setup code{padding:2px 5px;border:1px solid #dbe5f2;border-radius:4px;background:#fff;color:#1e3a8a;font:600 11px "Fira Code",monospace;}
.inventory-readonly-note{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-left:3px solid #2563eb;border-radius:7px;background:#eff6ff;color:#1e3a8a;}.inventory-readonly-note svg{width:20px;height:20px;flex:none;margin-top:1px;}.inventory-readonly-note p{margin:0;font-size:11px;line-height:1.55;}

@media(max-width:1024px){.inventory-engine{grid-template-columns:auto minmax(0,1fr)}.inventory-engine-metrics{grid-column:1/-1}.inventory-engine-metrics div:first-child{border-left:0;padding-left:0}.inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.device-inventory-shell{width:min(100% - 28px,1240px);padding-top:24px}.inventory-page-header .button{width:100%}.inventory-engine{grid-template-columns:auto minmax(0,1fr);padding:17px}.inventory-engine-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.inventory-engine-metrics div{min-width:0}.inventory-results-heading{align-items:flex-start}.inventory-grid{grid-template-columns:1fr}.inventory-empty,.inventory-setup{align-items:flex-start;padding:22px}.inventory-empty{align-items:center}}
@media(max-width:420px){.inventory-engine{grid-template-columns:1fr}.inventory-engine-metrics{grid-template-columns:1fr}.inventory-engine-metrics div,.inventory-engine-metrics div:first-child{padding:10px 0;border-left:0;border-top:1px solid #dbe5f2}.inventory-results-heading{flex-direction:column;gap:5px}.inventory-setup{flex-direction:column}.inventory-card{padding:16px}}
@media(prefers-reduced-motion:reduce){.integration-state,.inventory-filters a{transition:none}}

/* Technical access stays secondary, explicit and restricted to system administrators. */
.technical-settings-link{width:44px;height:44px;display:grid;place-items:center;flex:none;border:1px solid var(--line);border-radius:9px;background:#fff;color:#475569;transition:border-color .18s ease,background-color .18s ease,color .18s ease;}
.technical-settings-link svg{width:20px;height:20px;}.technical-settings-link:hover{border-color:#93c5fd;background:#eff6ff;color:var(--primary);}
.module-icon-energy{background:#ecfdf5;color:#047857;}.module-icon-other{background:#f8fafc;color:#475569;}
.inventory-availability.is-online{color:#166534;}.inventory-availability.is-online i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}
.inventory-availability.is-offline{color:#9a3412;}.inventory-availability.is-offline i{background:#f97316;box-shadow:0 0 0 3px #ffedd5;}
.inventory-availability.is-pending{color:#475569;}.inventory-availability.is-pending i{background:#64748b;box-shadow:0 0 0 3px #e2e8f0;}
.inventory-availability.is-detected{color:#075985;}.inventory-availability.is-detected i{background:#0284c7;box-shadow:0 0 0 3px #e0f2fe;}
.inventory-availability.is-optional{color:#64748b;}.inventory-availability.is-optional i{background:#94a3b8;box-shadow:0 0 0 3px #f1f5f9;}
.inventory-integration{margin:5px 0 0;color:#475569;font-size:11px;font-weight:600;}.inventory-device-description{margin:11px 0 0;color:#64748b;font-size:10px;line-height:1.45;}.inventory-entity-count{margin:9px 0 0;color:#64748b;font:500 9px "Fira Code",monospace;}.inventory-section-copy{max-width:760px;margin:-8px 0 14px;color:#64748b;font-size:12px;}.inventory-unassigned{padding-top:4px;border-top:1px solid var(--line);}.raw-entity-card{background:#fbfdff;}

/* Climate module: touch-first supervision with explicit read-only states. */
.climate-shell{width:min(1240px,calc(100% - 48px));display:grid;align-content:start;gap:24px;}
.climate-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px;border:1px solid #bfdbfe;border-radius:18px;background:linear-gradient(120deg,#eff6ff,#fff 65%);box-shadow:0 8px 24px rgba(30,64,175,.06);}
.climate-hero h1{margin:4px 0 6px;color:var(--ink);font:700 clamp(30px,4vw,46px) "Fira Code",monospace;letter-spacing:-.05em;line-height:1.1;}.climate-hero p:last-child{max-width:680px;margin:0;color:#475569;font-size:15px;}
.climate-hero .button{flex:none;gap:7px;}.climate-hero .button svg{width:18px;height:18px;}
.climate-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid #dbe5f2;border-radius:14px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.04);}
.climate-summary article{min-width:0;padding:20px 22px;border-right:1px solid #e2e8f0;}.climate-summary article:last-child{border-right:0;}.climate-summary span,.climate-summary small{display:block;color:#52627a;}.climate-summary span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.055em;}.climate-summary strong{display:block;margin:7px 0 5px;color:var(--ink);font:700 25px "Fira Code",monospace;letter-spacing:-.035em;}.climate-summary small{font-size:11px;line-height:1.45;}.climate-summary .climate-engine-state.is-online{background:#f0fdf4;}.climate-summary .climate-engine-state.is-online strong{color:#166534;}
.climate-notice{display:flex;align-items:flex-start;gap:13px;padding:17px 18px;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed;color:#7c2d12;}.climate-notice svg{width:22px;height:22px;flex:none;}.climate-notice strong{color:#7c2d12;}.climate-notice p{margin:3px 0 0;font-size:12px;line-height:1.55;}
.climate-devices{display:grid;gap:16px;}.climate-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}.climate-section-heading h2{margin:4px 0 0;color:var(--ink);font:700 23px "Fira Code",monospace;letter-spacing:-.035em;}.climate-section-heading .text-link{min-height:44px;display:inline-flex;align-items:center;}
.climate-device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}.climate-device-card{min-width:0;display:flex;flex-direction:column;min-height:285px;padding:22px;border:1px solid #dbe5f2;border-top:4px solid #94a3b8;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.045);}.climate-device-card.is-online{border-top-color:#22c55e;}.climate-device-card.is-offline{border-top-color:#f97316;}.climate-device-card.is-detected{border-top-color:#0ea5e9;}.climate-device-card.is-pending{border-top-color:#64748b;}
.climate-device-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}.climate-device-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:#eff6ff;color:#1e40af;}.climate-device-icon svg{width:25px;height:25px;}.climate-device-status{display:inline-flex;align-items:center;gap:7px;color:#475569;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;}.climate-device-status i{width:8px;height:8px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px #e2e8f0;}.climate-device-card.is-online .climate-device-status{color:#166534;}.climate-device-card.is-online .climate-device-status i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}.climate-device-card.is-offline .climate-device-status{color:#9a3412;}.climate-device-card.is-offline .climate-device-status i{background:#f97316;box-shadow:0 0 0 3px #ffedd5;}
.climate-device-copy{margin:20px 0;}.climate-device-copy>span{color:#64748b;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.075em;}.climate-device-copy h3{margin:5px 0 7px;color:var(--ink);font:700 19px "Fira Code",monospace;letter-spacing:-.03em;}.climate-device-copy p{max-width:62ch;margin:0;color:#52627a;font-size:12px;line-height:1.55;}
.climate-reading-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:auto 0 0;}.climate-reading-list div,.climate-device-empty{padding:13px 14px;border:1px solid #dbeafe;border-radius:10px;background:#f8fbff;}.climate-reading-list dt,.climate-device-empty span{color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.055em;}.climate-reading-list dd{margin:4px 0 0;color:var(--ink);font:700 15px "Fira Code",monospace;}.climate-device-empty{margin-top:auto;}.climate-device-empty span,.climate-device-empty strong{display:block;}.climate-device-empty strong{margin-top:4px;color:var(--ink);font-size:13px;}
.climate-readonly-note{display:flex;align-items:flex-start;gap:12px;padding:17px 18px;border-left:4px solid #2563eb;border-radius:9px;background:#eff6ff;color:#1e3a8a;}.climate-readonly-note svg{width:23px;height:23px;flex:none;}.climate-readonly-note strong{color:#172554;}.climate-readonly-note p{margin:3px 0 0;font-size:12px;line-height:1.55;}
@media(max-width:800px){.climate-shell{width:min(100% - 28px,1240px);padding-top:24px}.climate-hero{align-items:flex-start;flex-direction:column;padding:22px}.climate-hero .button{width:100%}.climate-summary{grid-template-columns:1fr}.climate-summary article,.climate-summary article:last-child{border-right:0;border-bottom:1px solid #e2e8f0}.climate-summary article:last-child{border-bottom:0}.climate-device-grid{grid-template-columns:1fr}}
@media(max-width:420px){.climate-hero{padding:19px}.climate-section-heading{align-items:flex-start;flex-direction:column;gap:4px}.climate-device-card{min-height:0;padding:18px}.climate-reading-list{grid-template-columns:1fr}}

.technical-access-shell{width:min(1040px,calc(100% - 48px));}.technical-page-header{max-width:760px;}.technical-access-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:26px;border:1px solid #bfdbfe;border-radius:14px;background:linear-gradient(115deg,#eff6ff,#fff 64%);box-shadow:var(--shadow);}
.technical-access-card+.technical-access-card{margin-top:14px;}
.technical-access-icon{width:52px;height:52px;display:grid;place-items:center;flex:none;border-radius:13px;background:var(--primary);color:#fff;}.technical-access-icon svg{width:28px;height:28px;}.technical-access-card h2{margin:4px 0 6px;color:var(--ink);font:700 21px "Fira Code",monospace;}.technical-access-card p:not(.eyebrow){max-width:650px;margin:0 0 11px;color:#52627a;font-size:13px;}.technical-access-card code{display:inline-block;padding:5px 8px;border:1px solid #dbe5f2;border-radius:6px;background:#fff;color:#1e3a8a;font:600 11px "Fira Code",monospace;}.technical-access-card .button{gap:8px;white-space:nowrap;}.technical-access-card .button svg{width:18px;height:18px;}
.technical-network-note{display:flex;align-items:flex-start;gap:13px;margin-top:18px;padding:17px 19px;border-left:3px solid #d97706;border-radius:8px;background:#fffbeb;color:#78350f;}.technical-network-note>svg{width:21px;height:21px;flex:none;}.technical-network-note strong{display:block;color:#78350f;font-size:12px;}.technical-network-note p{margin:3px 0 0;font-size:12px;}.technical-dns-note{margin:17px 2px 0;color:#64748b;font-size:11px;}.technical-dns-note strong{color:#334155;font-family:"Fira Code",monospace;}
.local-access-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:#eff6ff;}.local-access-notice{width:min(620px,100%);padding:38px;border:1px solid #bfdbfe;border-radius:16px;background:#fff;box-shadow:0 24px 70px rgba(30,58,138,.14);text-align:center;}.local-access-notice .technical-access-icon{margin:0 auto 18px;}.local-access-notice h1{margin:5px 0 10px;color:var(--ink);font:700 clamp(26px,5vw,36px) "Fira Code",monospace;letter-spacing:-.04em;}.local-access-notice>p:not(.eyebrow){max-width:500px;margin:0 auto;color:#52627a;}.local-access-actions{display:flex;justify-content:center;gap:10px;margin-top:24px;}

@media(max-width:780px){.technical-access-card{grid-template-columns:auto minmax(0,1fr)}.technical-access-card .button{grid-column:1/-1;width:100%}}
@media(max-width:520px){.technical-access-shell{width:min(100% - 22px,1040px)}.technical-access-card{grid-template-columns:1fr;padding:21px}.technical-access-card .button{grid-column:auto}.local-access-notice{padding:28px 20px}.local-access-actions{display:grid;grid-template-columns:1fr}.local-access-actions .button{width:100%}}
.sinthesi-status-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:22px;border:1px solid #d7e1ec;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(15,23,42,.06);}.sinthesi-status-card.is-linked{border-color:#a7f3d0;background:linear-gradient(115deg,#ecfdf5,#fff 65%);}.sinthesi-status-card h2,.sinthesi-form-card h2,.sinthesi-device-section h2{margin:3px 0 5px;color:var(--ink);font-size:20px;}.sinthesi-status-card p,.sinthesi-form-card p{margin:0;color:#64748b;font-size:13px;line-height:1.5;}.sinthesi-status-card small{display:block;margin-top:6px;color:#64748b;}.sinthesi-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;}.sinthesi-form-card{position:relative;display:grid;align-content:start;gap:14px;padding:22px;border:1px solid #d7e1ec;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(15,23,42,.06);}.sinthesi-form-card.is-disabled{opacity:.58;}.sinthesi-step{position:absolute;top:18px;right:18px;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:#dbeafe;color:#1d4ed8;font-weight:800;}.sinthesi-form-card .button{justify-self:start;}.sinthesi-form-card .button:disabled{cursor:not-allowed;opacity:.55;}.sinthesi-account-actions{display:flex;gap:10px;margin:14px 0;}.sinthesi-account-actions form{margin:0;}.sinthesi-device-section{margin-top:20px;}.sinthesi-device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}.sinthesi-device-grid article{padding:18px;border:1px solid #d7e1ec;border-radius:16px;background:#fff;}.sinthesi-device-grid h3{margin:12px 0;color:var(--ink);}.sinthesi-device-grid dl{display:grid;gap:7px;margin:0;}.sinthesi-device-grid dl div{display:flex;justify-content:space-between;gap:14px;}.sinthesi-device-grid dt{color:#64748b;font-size:12px;}.sinthesi-device-grid dd{margin:0;color:var(--ink);font:600 12px "Fira Code",monospace;}.sinthesi-error{margin:14px 0 0;padding:12px 14px;border:1px solid #fecaca;border-radius:12px;background:#fef2f2;color:#b91c1c;font-weight:700;}@media(max-width:700px){.sinthesi-link-grid{grid-template-columns:1fr}.sinthesi-account-actions{display:grid}.sinthesi-account-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.technical-settings-link{transition:none}}

/* Shared, permission-aware controls for normalized Home Assistant devices. */
.device-control-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 0;}.device-control-metrics div{min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:#f8fafc;}.device-control-metrics dt{color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}.device-control-metrics dd{margin:4px 0 0;overflow-wrap:anywhere;color:var(--ink);font:600 12px "Fira Code",monospace;}.device-control-panel{display:grid;gap:12px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line);}.device-control-panel h4{margin:0;color:var(--ink);font:700 12px "Fira Code",monospace;text-transform:uppercase;letter-spacing:.04em;}.device-control-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.device-control-buttons form{min-width:0;}.device-control-button,.device-control-adjustment button{width:100%;min-height:44px;border:1px solid #93c5fd;border-radius:8px;background:#eff6ff;color:#1e3a8a;font-size:12px;font-weight:700;cursor:pointer;transition:background-color .18s ease,border-color .18s ease;}.device-control-button:hover,.device-control-adjustment button:hover{border-color:#2563eb;background:#dbeafe;}.device-control-button:active,.device-control-adjustment button:active{background:#bfdbfe;}.device-control-adjustment{display:grid;gap:7px;}.device-control-adjustment label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--ink);font-size:11px;font-weight:700;}.device-control-adjustment output{color:var(--primary);font:700 13px "Fira Code",monospace;}.device-control-adjustment>div{display:grid;grid-template-columns:minmax(0,1fr) 76px;align-items:center;gap:9px;}.device-control-adjustment input[type=range]{width:100%;min-height:44px;margin:0;accent-color:var(--primary);cursor:pointer;}.device-control-adjustment select{width:100%;min-height:44px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--ink);padding:8px 10px;font-size:16px;}.device-control-locked{margin:14px 0 0;padding:11px 12px;border-left:3px solid #64748b;border-radius:6px;background:#f1f5f9;color:#475569;font-size:11px;line-height:1.5;}.climate-control-panel{margin-top:18px;}.climate-device-card:has(.climate-control-panel){min-height:420px;}

@media(max-width:420px){.device-control-metrics{grid-template-columns:1fr}.device-control-buttons{grid-template-columns:1fr}.device-control-adjustment>div{grid-template-columns:1fr}.device-control-adjustment button{width:100%}}

@media(prefers-reduced-motion:reduce){.device-control-button,.device-control-adjustment button{transition:none}}

/* Tablet control surface: calm overview, large targets and progressive disclosure. */
.home-status-stack{position:relative;z-index:1;width:min(340px,100%);display:grid;gap:9px;flex:none;}.home-mode-link{min-height:64px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 14px;border:1px solid #bbf7d0;border-radius:12px;background:rgba(240,253,244,.92);color:#166534;box-shadow:0 8px 24px rgba(15,23,42,.05);}.home-mode-link.is-away{border-color:#fed7aa;background:rgba(255,247,237,.94);color:#9a3412;}.home-mode-link>span{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#dcfce7;font-size:23px;}.home-mode-link.is-away>span{background:#ffedd5;}.home-mode-link strong,.home-mode-link small{display:block;}.home-mode-link strong{font-size:13px;}.home-mode-link small{margin-top:2px;color:#52627a;font-size:10px;}.home-mode-link b{font-size:18px;}.home-status-stack .integration-state{width:100%;min-width:0;min-height:64px;padding:11px 14px;}
.home-quick-modules,.home-devices{display:grid;gap:15px;}.home-quick-modules .section-heading,.home-devices .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}.home-quick-modules .section-heading h2,.home-devices .section-heading h2{margin:4px 0 0;color:var(--ink);font:700 23px "Fira Code",monospace;letter-spacing:-.035em;}.home-quick-modules .text-link,.home-devices .text-link{min-height:44px;display:inline-flex;align-items:center;}.home-quick-modules .module-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}.home-quick-modules .module-card{min-height:164px;padding:16px;}.home-quick-modules .module-card-copy{margin:19px 0 8px;}.home-quick-modules .module-card-copy h3{font-size:15px;}.home-quick-modules .module-card-copy p{font-size:10px;line-height:1.4;}.home-quick-modules .module-status{font-size:8px;}.home-quick-modules .module-arrow{margin-top:auto;align-self:flex-end;}.home-device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}.home-device-card{min-width:0;display:flex;flex-direction:column;padding:18px;border:1px solid #dbe5f2;border-radius:14px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.045);}.home-device-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}.home-device-copy{margin:15px 0;}.home-device-copy>span{color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;}.home-device-copy h3{margin:4px 0;color:var(--ink);font:700 16px "Fira Code",monospace;letter-spacing:-.025em;}.home-device-copy p{margin:3px 0 0;color:#52627a;font-size:12px;}.home-device-actions{margin-top:auto;padding-top:14px;}.home-device-detail{min-height:44px;display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding:0 3px;color:#475569;font-size:11px;font-weight:700;}

/* Device view keeps manufacturer details secondary to daily controls. */
.inventory-header-actions{display:flex;gap:8px;}.inventory-engine-details{border:1px solid #dbe5f2;border-radius:12px;background:#fff;overflow:hidden;}.inventory-engine-details>summary{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;color:#334155;font-size:12px;font-weight:700;cursor:pointer;list-style:none;}.inventory-engine-details>summary::-webkit-details-marker{display:none;}.inventory-engine-details>summary span{display:flex;align-items:center;gap:9px;}.inventory-engine-details>summary small{color:var(--primary);font-size:10px;}.engine-dot{width:8px;height:8px;border-radius:50%;background:#f97316;box-shadow:0 0 0 4px #ffedd5;}.engine-dot.is-online{background:#22c55e;box-shadow:0 0 0 4px #dcfce7;}.inventory-engine-details .inventory-engine{border:0;border-top:1px solid #dbe5f2;border-radius:0;box-shadow:none;}.inventory-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible;}.inventory-filters a{position:relative;min-height:72px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:11px 42px 11px 14px;border-radius:11px;}.inventory-filters a strong{color:inherit;font-size:12px;}.inventory-filters a small{color:#64748b;font-size:9px;font-weight:500;}.inventory-filters a span{position:absolute;right:12px;top:50%;transform:translateY(-50%);}.inventory-technical-details{margin:9px 0 0;}.inventory-technical-details summary{min-height:44px;display:flex;align-items:center;color:#64748b;font-size:10px;font-weight:700;cursor:pointer;}.inventory-technical-details p{margin:0 0 8px;padding:9px 10px;border-radius:7px;background:#f8fafc;color:#64748b;font:500 9px "Fira Code",monospace;}.catalog-device-card{border-top:3px solid #dbeafe;}.catalog-device-card:has(.inventory-availability.is-online){border-top-color:#22c55e;}

/* Human-configured device automations. */
.automation-shell{width:min(1240px,calc(100% - 48px));display:grid;align-content:start;gap:24px;}.automation-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px;border:1px solid #bfdbfe;border-radius:18px;background:linear-gradient(120deg,#eff6ff,#fff 65%);box-shadow:0 8px 24px rgba(30,64,175,.06);}.automation-hero h1{margin:4px 0 6px;color:var(--ink);font:700 clamp(30px,4vw,46px) "Fira Code",monospace;letter-spacing:-.05em;line-height:1.1;}.automation-hero p:last-child{max-width:680px;margin:0;color:#475569;font-size:15px;}.automation-hero-actions{display:flex;gap:8px;flex:none;}.house-mode-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:17px;padding:20px 22px;border:1px solid #bbf7d0;border-radius:14px;background:linear-gradient(110deg,#f0fdf4,#fff 62%);}.house-mode-card.is-away{border-color:#fed7aa;background:linear-gradient(110deg,#fff7ed,#fff 62%);}.house-mode-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:13px;background:#dcfce7;color:#15803d;}.house-mode-card.is-away .house-mode-icon{background:#ffedd5;color:#c2410c;}.house-mode-icon svg{width:27px;height:27px;}.house-mode-card h2{margin:3px 0;color:var(--ink);font:700 20px "Fira Code",monospace;}.house-mode-card p:last-child{margin:0;color:#52627a;font-size:12px;}.house-mode-card dl{display:flex;margin:0;}.house-mode-card dl div{min-width:115px;padding:3px 15px;border-left:1px solid #dbe5f2;}.house-mode-card dt{color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;}.house-mode-card dd{margin:3px 0 0;color:var(--ink);font:700 20px "Fira Code",monospace;}.automation-section{display:grid;gap:14px;}.automation-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}.automation-section-heading h2{margin:4px 0 0;color:var(--ink);font:700 23px "Fira Code",monospace;letter-spacing:-.035em;}.automation-section-heading .text-link{min-height:44px;display:flex;align-items:center;}.automation-list{display:grid;gap:9px;}.automation-row{display:grid;grid-template-columns:105px minmax(0,1fr) auto;align-items:center;gap:17px;padding:15px 17px;border:1px solid #dbe5f2;border-left:4px solid #94a3b8;border-radius:11px;background:#fff;}.automation-row.is-enabled{border-left-color:#22c55e;}.automation-row-status,.automation-state{display:flex;align-items:center;gap:7px;color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;}.automation-row-status i,.automation-state i{width:8px;height:8px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px #e2e8f0;}.is-enabled .automation-row-status,.is-enabled .automation-state{color:#166534;}.is-enabled .automation-row-status i,.is-enabled .automation-state i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}.automation-row-copy h3{margin:0;color:var(--ink);font:700 14px "Fira Code",monospace;}.automation-row-copy p{margin:3px 0;color:#475569;font-size:11px;}.automation-row-copy small{display:block;color:#64748b;font-size:10px;}.automation-row-actions,.automation-rule-actions{display:flex;gap:7px;}.automation-row-actions form,.automation-rule-actions form{display:flex;}.automation-row-actions .button,.automation-rule-actions .button{min-width:88px;}.automation-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}.automation-rule-card{min-width:0;display:flex;flex-direction:column;padding:18px;border:1px solid #dbe5f2;border-top:4px solid #94a3b8;border-radius:13px;background:#fff;}.automation-rule-card.is-enabled{border-top-color:#22c55e;}.automation-rule-head{display:flex;align-items:center;justify-content:space-between;}.automation-rule-copy{margin:17px 0;}.automation-rule-copy span{color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;}.automation-rule-copy h3{margin:4px 0;color:var(--ink);font:700 16px "Fira Code",monospace;}.automation-rule-copy p{margin:3px 0 0;color:#52627a;font-size:11px;}.automation-rule-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:auto 0 14px;}.automation-rule-settings div{padding:9px 10px;border-radius:8px;background:#f8fafc;}.automation-rule-settings dt{color:#64748b;font-size:8px;font-weight:700;text-transform:uppercase;}.automation-rule-settings dd{margin:3px 0 0;color:var(--ink);font-size:11px;font-weight:700;}.automation-rule-actions{padding-top:13px;border-top:1px solid #edf2f7;}.automation-rule-actions>*{flex:1;}.automation-rule-actions .button{width:100%;}.automation-empty{grid-column:1/-1;min-height:150px;display:grid;place-items:center;align-content:center;padding:24px;border:1px dashed #bfd0e6;border-radius:12px;background:#f8fbff;text-align:center;}.automation-empty h3{margin:0;color:var(--ink);font:700 16px "Fira Code",monospace;}.automation-empty p{max-width:620px;margin:5px 0 0;color:#64748b;font-size:12px;}.automation-history{border:1px solid #dbe5f2;border-radius:12px;background:#fff;overflow:hidden;}.automation-history>summary{min-height:52px;display:flex;align-items:center;padding:10px 16px;color:var(--primary);font-size:11px;font-weight:700;cursor:pointer;}.automation-history>div{border-top:1px solid #edf2f7;}.automation-history article{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-bottom:1px solid #edf2f7;}.automation-history article:last-child{border-bottom:0;}.automation-history strong,.automation-history small{display:block;}.automation-history strong{color:var(--ink);font-size:11px;}.automation-history small{margin-top:2px;color:#64748b;font-size:9px;}.automation-event-result{min-width:80px;padding:3px 6px;border-radius:999px;background:#dcfce7;color:#166534;font-size:8px;font-weight:700;text-align:center;text-transform:uppercase;}.automation-event-result.is-failed{background:#fee2e2;color:#991b1b;}.automation-safety-note{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-left:4px solid #2563eb;border-radius:9px;background:#eff6ff;color:#1e3a8a;}.automation-safety-note svg{width:22px;height:22px;flex:none;}.automation-safety-note p{margin:0;font-size:11px;line-height:1.55;}
.automation-form-shell{width:min(920px,calc(100% - 48px));}.automation-form-header{margin-bottom:0;}.automation-form{display:grid;gap:17px;}.automation-form>section{overflow:hidden;border:1px solid #dbe5f2;border-radius:14px;background:#fff;}.automation-form-section-heading{display:flex;align-items:flex-start;gap:13px;padding:17px 20px;border-bottom:1px solid #edf2f7;background:#f8fbff;}.automation-form-section-heading>span{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:9px;background:#dbeafe;color:#1e40af;font:700 12px "Fira Code",monospace;}.automation-form-section-heading h2{margin:0;color:var(--ink);font:700 15px "Fira Code",monospace;}.automation-form-section-heading p{margin:3px 0 0;color:#64748b;font-size:11px;}.automation-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px;}.automation-field{display:grid;align-content:start;gap:6px;color:var(--ink);font-size:12px;font-weight:700;}.automation-field>input,.automation-field>select{width:100%;min-height:48px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:var(--text);font-size:16px;}.automation-field small{color:#64748b;font-size:10px;font-weight:400;}.automation-check{min-height:48px;display:flex;align-items:center;gap:10px;}.automation-check input{width:22px;height:22px;accent-color:var(--primary);}.automation-check label{color:var(--ink);font-size:12px;font-weight:700;}.automation-weekdays{grid-column:1/-1;margin:0;padding:14px;border:1px solid #dbe5f2;border-radius:10px;}.automation-weekdays legend{padding:0 5px;color:var(--ink);font-size:12px;font-weight:700;}.automation-weekdays ul{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:7px 0 0;padding:0;list-style:none;}.automation-weekdays label{min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1px solid #dbe5f2;border-radius:8px;color:#475569;font-size:10px;font-weight:700;cursor:pointer;}.automation-weekdays input{width:18px;height:18px;accent-color:var(--primary);}.automation-conditional{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}.automation-activation{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border-left:4px solid #d97706!important;background:#fffbeb!important;}.automation-activation h2{margin:0;color:#78350f;font:700 14px "Fira Code",monospace;}.automation-activation p{margin:4px 0 0;color:#78350f;font-size:11px;}.automation-form-actions{display:flex;justify-content:flex-end;gap:8px;}.automation-form-actions .button{min-width:130px;}

@media(max-width:1280px){.home-body .topbar{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);width:100%;max-width:100%;height:auto;min-height:64px;padding:10px 14px;gap:8px 10px}.home-body .topbar .brand{min-width:0;overflow:hidden}.home-body .topbar .brand-mark{flex:none}.home-body .topbar .brand-copy{min-width:0}.home-body .technical-settings-link{grid-column:2;grid-row:1}.home-body .nav-toggle{display:grid;grid-column:3;grid-row:1}.home-body .topbar nav{display:none;grid-column:1/-1;order:initial;width:100%;height:auto;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:4px}.home-body .topbar nav.is-open{display:grid}.home-body .topbar nav a{min-width:0;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}.home-body .topbar nav a[aria-current=page]{background:#eff6ff}.home-body .topbar nav a[aria-current=page]:after{display:none}.home-body .user-menu{margin-left:0;grid-column:4;grid-row:1}.home-body .user-menu summary{min-width:44px;justify-content:center}}
@media(max-width:1100px){.home-quick-modules .module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-device-grid,.automation-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.home-hero{align-items:flex-start;flex-direction:column;min-height:0;padding:24px}.home-status-stack{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.home-quick-modules .section-heading,.home-devices .section-heading,.automation-section-heading{align-items:flex-start}.automation-shell{width:min(100% - 28px,1240px);padding-top:24px}.automation-hero{align-items:flex-start;flex-direction:column;padding:22px}.automation-hero-actions{width:100%}.automation-hero-actions .button{flex:1}.house-mode-card{grid-template-columns:auto minmax(0,1fr)}.house-mode-card dl{grid-column:1/-1}.house-mode-card dl div:first-child{border-left:0;padding-left:0}.automation-row{grid-template-columns:1fr}.automation-row-status{order:2}.automation-row-actions{order:3}.automation-weekdays ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.home-shell,.device-inventory-shell,.automation-shell{width:min(100% - 24px,1240px)}.home-status-stack,.home-device-grid,.automation-rule-grid,.automation-form-grid,.automation-conditional{grid-template-columns:1fr}.home-quick-modules .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-quick-modules .section-heading,.home-devices .section-heading,.automation-section-heading{flex-direction:column;gap:4px}.inventory-header-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.inventory-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-engine-details .inventory-engine{grid-template-columns:1fr}.automation-hero-actions{display:grid;grid-template-columns:1fr}.house-mode-card{grid-template-columns:1fr}.house-mode-card dl{display:grid;grid-template-columns:1fr 1fr}.house-mode-card dl div:first-child{padding-left:15px;border-left:1px solid #dbe5f2}.automation-rule-settings{grid-template-columns:1fr}.automation-weekdays ul{grid-template-columns:repeat(2,minmax(0,1fr))}.automation-activation{align-items:flex-start;flex-direction:column}.automation-form-actions{display:grid;grid-template-columns:1fr 1fr}.automation-form-actions .button{min-width:0;width:100%}}
@media(max-width:390px){.home-quick-modules .module-grid,.inventory-filters{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.home-mode-link,.home-device-card,.automation-rule-card{scroll-behavior:auto}}

/* Touch-first device console */
.touch-control-console{--control-accent:#2563eb;display:grid;gap:14px;margin-top:16px;padding:16px;border:1px solid #dbe5f2;border-radius:14px;background:linear-gradient(145deg,#f8fbff,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;}.touch-control-console.is-on{--control-accent:#16a34a;border-color:#86efac;background:linear-gradient(145deg,#f0fdf4,#fff);}.touch-control-console.is-off{--control-accent:#64748b;}.touch-control-console.is-unavailable{--control-accent:#f97316;}.touch-control-console.is-updating{box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.touch-control-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(124px,auto);align-items:center;gap:12px;}.touch-live-state{min-width:0;display:flex;align-items:center;gap:11px;}.touch-live-state>span:last-child{min-width:0;display:grid;gap:2px;}.touch-live-state small{color:#64748b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;}.touch-live-state strong{overflow:hidden;color:var(--ink);font:700 13px "Fira Code",monospace;text-overflow:ellipsis;white-space:nowrap;}.touch-live-dot{width:12px;height:12px;flex:none;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 5px #e2e8f0;}.is-on .touch-live-dot{background:#22c55e;box-shadow:0 0 0 5px #dcfce7;}.is-off .touch-live-dot{background:#64748b;box-shadow:0 0 0 5px #e2e8f0;}.is-unavailable .touch-live-dot{background:#f97316;box-shadow:0 0 0 5px #ffedd5;}
.touch-power-form{display:flex;}.touch-power-button,.touch-action-button,.touch-step-button,.touch-noscript-submit{min-height:52px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#334155;font-size:13px;font-weight:800;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease;}.touch-power-button{min-width:124px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 16px;border-color:#94a3b8;}.touch-power-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}.is-on .touch-power-button{border-color:#22c55e;background:#16a34a;color:#fff;box-shadow:0 6px 14px rgba(22,163,74,.18);}.is-off .touch-power-button{border-color:#94a3b8;background:#fff;color:#334155;}.touch-power-button:hover,.touch-action-button:hover,.touch-step-button:hover{border-color:var(--control-accent);background:#eff6ff;}.is-on .touch-power-button:hover{background:#15803d;color:#fff;}.touch-power-button:active,.touch-action-button:active,.touch-step-button:active{transform:scale(.96);}.touch-power-button:focus-visible,.touch-action-button:focus-visible,.touch-step-button:focus-visible,.touch-range:focus-visible,.touch-select:focus-visible{outline:3px solid #93c5fd;outline-offset:3px;}.touch-control-console [disabled]{cursor:wait;opacity:.66;}
.touch-adjustment-list{display:grid;gap:11px;padding-top:14px;border-top:1px solid #dbe5f2;}.touch-adjustment{--control-progress:50%;display:grid;gap:9px;padding:13px;border:1px solid #dbe5f2;border-radius:12px;background:rgba(255,255,255,.78);}.touch-adjustment-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}.touch-adjustment-heading label,.touch-select-label{color:var(--ink);font-size:12px;font-weight:800;}.touch-adjustment-heading small{color:#64748b;font-size:9px;text-align:right;}.touch-adjustment-heading strong{display:flex;align-items:baseline;gap:3px;color:var(--control-accent);font:800 18px "Fira Code",monospace;}.touch-adjustment-heading strong span{font-size:10px;}
.touch-range{width:100%;height:44px;margin:0;padding:0;background:transparent;cursor:pointer;accent-color:var(--control-accent);touch-action:pan-y;}.touch-range::-webkit-slider-runnable-track{height:9px;border-radius:999px;background:linear-gradient(90deg,var(--control-accent) 0 var(--control-progress),#dbe5f2 var(--control-progress) 100%);}.touch-range::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9.5px;border:3px solid #fff;border-radius:50%;background:var(--control-accent);box-shadow:0 2px 7px rgba(15,23,42,.25);-webkit-appearance:none;}.touch-range{-webkit-appearance:none;}.touch-range::-moz-range-track{height:9px;border-radius:999px;background:#dbe5f2;}.touch-range::-moz-range-progress{height:9px;border-radius:999px;background:var(--control-accent);}.touch-range::-moz-range-thumb{width:24px;height:24px;border:3px solid #fff;border-radius:50%;background:var(--control-accent);box-shadow:0 2px 7px rgba(15,23,42,.25);}
.touch-dial-control{display:grid;grid-template-columns:52px 108px 52px;align-items:center;justify-content:center;gap:12px;}.touch-step-button{width:52px;padding:0;color:var(--control-accent);font:800 27px/1 "Fira Code",monospace;}.touch-dial-readout{width:108px;height:108px;display:grid;grid-template-columns:auto auto;place-content:center;align-items:baseline;border-radius:50%;background:radial-gradient(circle at center,#fff 61%,transparent 62%),conic-gradient(var(--control-accent) 0 var(--control-progress),#dbe5f2 var(--control-progress) 100%);box-shadow:inset 0 0 0 1px #dbe5f2,0 4px 13px rgba(15,23,42,.08);}.touch-dial-readout output{color:var(--ink);font:800 28px "Fira Code",monospace;}.touch-dial-readout span{color:#64748b;font:700 11px "Fira Code",monospace;}.touch-dial-range{height:44px;}
.touch-select{width:100%;min-height:52px;padding:10px 40px 10px 13px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;color:var(--ink);font-size:16px;cursor:pointer;}.touch-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:13px;border-top:1px solid #dbe5f2;}.touch-action-grid form{min-width:0;}.touch-action-button{width:100%;padding:9px 12px;border-color:#bfdbfe;background:#eff6ff;color:#1e3a8a;}.touch-noscript-submit{width:100%;}.touch-control-feedback{min-height:17px;margin:0;color:#64748b;font-weight:700;text-align:center;}.touch-control-feedback:empty{min-height:0;}.touch-control-feedback[data-kind="success"]{color:#15803d;}.touch-control-feedback[data-kind="error"]{min-height:auto;padding:8px;border-radius:8px;background:#fef2f2;color:#b91c1c;}.touch-control-feedback[data-kind="pending"]{color:#1d4ed8;}
.touch-color-controls{display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:8px;}.touch-color-swatch{position:relative;min-width:48px;min-height:52px;padding:0;border:3px solid #fff;border-radius:12px;background:var(--swatch-color);box-shadow:0 0 0 1px #cbd5e1;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,box-shadow .2s ease;}.touch-color-swatch svg{width:27px;height:27px;padding:5px;border-radius:50%;background:rgba(255,255,255,.92);color:#0f172a;stroke-width:3;opacity:0;transition:opacity .18s ease;}.touch-color-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px #1e40af;}.touch-color-swatch[aria-pressed="true"] svg{opacity:1;}.touch-color-swatch:hover{transform:scale(1.04);}.touch-color-swatch:active{transform:scale(.96);}.touch-color-swatch:focus-visible,.touch-custom-color:focus-within{outline:3px solid #1e40af;outline-offset:3px;}.touch-custom-color{grid-column:1/-1;min-height:52px;display:flex;align-items:center;gap:11px;padding:5px 12px 5px 6px;border:1px dashed #94a3b8;border-radius:12px;background:#fff;color:#334155;font-size:12px;font-weight:800;cursor:pointer;}.touch-custom-color input[type=color]{width:44px;height:44px;flex:none;padding:3px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;cursor:pointer;}.touch-custom-color input[type=color]::-webkit-color-swatch-wrapper{padding:0;}.touch-custom-color input[type=color]::-webkit-color-swatch{border:0;border-radius:6px;}.touch-custom-color input[type=color]::-moz-color-swatch{border:0;border-radius:6px;}
.touch-control-console.is-compact{margin-top:auto;padding:12px;gap:10px;}.touch-control-console.is-compact .touch-control-header{grid-template-columns:minmax(0,1fr) minmax(112px,auto);}.touch-control-console.is-compact .touch-power-button{min-height:48px;min-width:112px;}.touch-control-console.is-compact .touch-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:10px;}.touch-control-console.is-compact .touch-action-button{min-height:48px;}.climate-device-card:has(.touch-control-console){min-height:420px;}
@media(max-width:520px){.touch-control-header{grid-template-columns:1fr}.touch-power-button{width:100%}.touch-dial-control{grid-template-columns:52px minmax(92px,108px) 52px;gap:9px}.touch-dial-readout{width:96px;height:96px}.touch-action-grid{grid-template-columns:1fr}.touch-control-console.is-compact .touch-control-header{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.touch-control-console,.touch-power-button,.touch-action-button,.touch-step-button,.touch-color-swatch,.touch-color-swatch svg{transition:none}}

/* Compact wall-tablet and mobile control surface. */
.home-body{min-height:100dvh;}
.home-body .footer{display:none;}
.home-body .topbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));}
.home-body .brand-place,.home-body .brand-copy small{display:none;}
.home-body .brand-copy strong{font-size:14px;}
.home-shell{width:min(1120px,calc(100% - 28px));min-height:calc(100dvh - 92px);display:grid;align-items:center;padding:18px 0 28px;}
.home-launcher{width:100%;}
.home-launcher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.home-launcher-button{min-width:0;min-height:132px;display:grid;place-items:center;align-content:center;gap:12px;padding:18px;border:1px solid #d7e1ec;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(15,23,42,.07);text-align:center;text-decoration:none;touch-action:manipulation;transition:transform .16s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease;}
.home-launcher-button:hover{border-color:#93c5fd;background:#f8fbff;box-shadow:0 12px 28px rgba(30,64,175,.12);}
.home-launcher-button:active{transform:scale(.97);}
.home-launcher-button:focus-visible{outline:3px solid #2563eb;outline-offset:3px;}
.home-launcher-button.is-disabled{opacity:.52;box-shadow:none;}
.home-launcher-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#eef4ff;color:#1e40af;}
.home-launcher-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.home-launcher-button strong{font-size:15px;line-height:1.2;}
.home-launcher-button.is-energy .home-launcher-icon{background:#fff7ed;color:#c2410c;}
.home-launcher-button.is-climate .home-launcher-icon{background:#eff6ff;color:#1d4ed8;}
.home-launcher-button.is-lighting .home-launcher-icon{background:#fefce8;color:#a16207;}
.home-launcher-button.is-security .home-launcher-icon{background:#fef2f2;color:#b91c1c;}
.home-launcher-button.is-media .home-launcher-icon{background:#f5f3ff;color:#6d28d9;}
.home-launcher-button.is-automations .home-launcher-icon{background:#f0fdf4;color:#15803d;}

.control-page-header{min-height:56px;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px;margin-bottom:14px;}
.control-page-header h1{margin:0;overflow:hidden;color:var(--ink);font-size:clamp(20px,3vw,26px);line-height:1.15;text-align:center;text-overflow:ellipsis;white-space:nowrap;}
.control-page-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid #d7e1ec;border-radius:14px;background:#fff;color:#334155;box-shadow:0 4px 12px rgba(15,23,42,.05);touch-action:manipulation;transition:transform .16s ease,border-color .2s ease,background-color .2s ease;}
.control-page-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.control-page-icon:hover{border-color:#93c5fd;background:#eff6ff;}
.control-page-icon:active{transform:scale(.94);}
.control-page-icon:focus-visible{outline:3px solid #2563eb;outline-offset:2px;}
.compact-system-notice{min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:12px;padding:8px 12px;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed;color:#9a3412;font-size:13px;font-weight:700;}
.compact-system-notice svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;}

.device-inventory-shell,.climate-shell{width:min(1180px,calc(100% - 24px));padding-top:12px;}
.inventory-results{margin-top:0;}
.inventory-grid,.climate-device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(264px,1fr));align-items:start;gap:12px;}
.inventory-card.catalog-device-card,.climate-device-card{position:relative;min-height:0;padding:13px;border-radius:17px;gap:10px;background:#fff;box-shadow:0 7px 20px rgba(15,23,42,.06);}
.climate-device-card:has(.touch-control-console){min-height:0;}
.compact-device-header{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;}
.inventory-card:has(.touch-power-form) .compact-device-header,.climate-device-card:has(.touch-power-form) .compact-device-header{padding-right:56px;}
.compact-device-header>.module-icon{width:44px;height:44px;border-radius:13px;}
.compact-device-header>.module-icon svg{width:23px;height:23px;}
.compact-device-title{min-width:0;display:grid;gap:3px;}
.compact-device-title h3{margin:0;overflow:hidden;color:var(--ink);font-size:15px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;}
.compact-device-state{min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;color:#475569;font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;}
.compact-device-state i{width:8px;height:8px;flex:none;border-radius:50%;background:#94a3b8;}
.compact-device-state.is-online i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}
.compact-device-state.is-offline i{background:#f97316;box-shadow:0 0 0 3px #ffedd5;}
.compact-device-state.is-on i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}.compact-device-state.is-off i{background:#64748b;box-shadow:0 0 0 3px #e2e8f0;}.compact-device-state.is-idle i{background:#3b82f6;box-shadow:0 0 0 3px #dbeafe;}.compact-device-state.is-unavailable i{background:#f97316;box-shadow:0 0 0 3px #ffedd5;}
.compact-device-note{margin:0;padding:8px 10px;border-radius:10px;background:#f8fafc;color:#64748b;font-size:11px;line-height:1.35;}
.compact-device-metrics,.device-control-metrics.compact-device-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;}
.compact-device-metrics div{min-height:48px;padding:8px 10px;border-radius:10px;}
.compact-device-metrics dt{font-size:9px;}
.compact-device-metrics dd{font-size:14px;}
.compact-device-readings{display:flex;flex-wrap:wrap;gap:7px;}.compact-device-readings span{padding:7px 9px;border-radius:9px;background:#f1f5f9;color:#334155;font:700 11px "Fira Code",monospace;}

.touch-control-console{gap:9px;margin-top:2px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
.touch-control-console.is-on,.touch-control-console.is-off,.touch-control-console.is-unavailable{border:0;background:transparent;}
.touch-control-console.is-updating{box-shadow:none;}
.touch-control-console.is-updating .touch-color-wheel{pointer-events:none;opacity:.68;}
.touch-control-header{position:absolute;top:13px;right:13px;display:flex;justify-content:flex-end;gap:8px;padding:0;border:0;}
.touch-live-state{gap:9px;padding-left:4px;}
.touch-live-state strong{font:700 12px "Fira Code",monospace;}
.touch-live-dot{width:9px;height:9px;box-shadow:0 0 0 4px #e2e8f0;}
.is-on .touch-live-dot{box-shadow:0 0 0 4px #dcfce7;}
.is-unavailable .touch-live-dot{box-shadow:0 0 0 4px #ffedd5;}
.touch-power-form{width:48px;}
.touch-power-button{width:48px;min-width:48px;min-height:48px;height:48px;padding:0;border-radius:14px;}
.touch-power-button svg{width:22px;height:22px;}
.touch-adjustment-list{gap:8px;padding-top:8px;}
.touch-adjustment{gap:6px;padding:8px;border:0;border-radius:11px;background:#f8fafc;}
.touch-adjustment-heading label,.touch-select-label{font-size:11px;}
.touch-adjustment-heading strong{font-size:16px;}
.touch-range{height:38px;}
.touch-range::-webkit-slider-thumb{width:26px;height:26px;margin-top:-8.5px;}
.touch-dial-control{grid-template-columns:48px 92px 48px;gap:9px;}
.touch-step-button{width:48px;min-height:48px;border-radius:14px;}
.touch-dial-readout{width:92px;height:92px;}
.touch-dial-readout output{font-size:24px;}
.touch-dial-range{height:36px;}
.touch-action-grid{gap:8px;padding-top:8px;}
.touch-action-button{min-height:48px;}
.touch-action-button.is-toggle-action,.touch-action-button.is-media-action{width:48px;min-height:48px;padding:0;display:grid;place-items:center;border-radius:14px;}
.touch-action-button.is-toggle-action svg,.touch-action-button.is-media-action svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.touch-action-button.is-toggle-action[aria-pressed="true"]{border-color:#2563eb;background:#2563eb;color:#fff;box-shadow:0 4px 10px rgba(37,99,235,.2);}
.touch-action-grid{display:flex;flex-wrap:wrap;justify-content:center;}
.touch-action-form{flex:1 1 120px;}.touch-action-form.is-toggle-action,.touch-action-form.is-media-action{flex:0 0 48px;}

.is-module-lighting .touch-adjustment-list{grid-template-columns:minmax(112px,1fr) 56px;align-items:center;}
.is-module-lighting .touch-adjustment.is-slider{grid-column:1/-1;}
.touch-adjustment.is-color,.touch-adjustment.is-quick-white,.touch-adjustment.is-icon-modes{padding:0;background:transparent;}
.touch-color-wheel{position:relative;width:112px;height:112px;margin:auto;border:5px solid #fff;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.96) 6%,rgba(255,255,255,0) 69%),conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);box-shadow:0 0 0 1px #cbd5e1,0 5px 14px rgba(15,23,42,.14);cursor:crosshair;touch-action:none;transition:opacity .16s ease,box-shadow .16s ease;}
.touch-color-wheel:focus-visible{outline:3px solid #2563eb;outline-offset:3px;}
.touch-color-wheel-handle{position:absolute;left:50%;top:50%;width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:var(--selected-color);box-shadow:0 0 0 2px #0f172a,0 2px 6px rgba(15,23,42,.35);pointer-events:none;}
.touch-white-buttons{display:grid;grid-template-rows:repeat(2,52px);gap:8px;}
.touch-white-button,.touch-mode-button{width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid #cbd5e1;border-radius:14px;background:#fff;color:#475569;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;}
.touch-white-button svg,.touch-mode-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.touch-white-button.is-warm{background:#fff7ed;color:#c2410c;}
.touch-white-button.is-cool{background:#eff6ff;color:#1d4ed8;}
.touch-white-button[aria-pressed="true"],.touch-mode-button[aria-pressed="true"]{border-color:#1d4ed8;box-shadow:0 0 0 3px #dbeafe;}
.touch-white-button:active,.touch-mode-button:active{transform:scale(.94);}
.touch-white-button:focus-visible,.touch-mode-button:focus-visible{outline:3px solid #2563eb;outline-offset:2px;}
.touch-mode-buttons{display:grid;grid-template-columns:repeat(4,52px);justify-content:center;gap:8px;}
.touch-mode-button[aria-pressed="true"]{background:#1e40af;color:#fff;}
.touch-control-feedback{font-size:10px;}
.touch-control-console.is-compact{padding:0;}
.touch-control-console.is-compact .touch-control-header{display:flex;justify-content:flex-end;}
.touch-control-console.is-compact .touch-power-button{min-width:48px;}

@media(min-width:700px){.home-launcher-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.home-launcher-button{min-height:160px}.home-launcher-icon{width:68px;height:68px}.home-launcher-icon svg{width:37px;height:37px}.home-launcher-button strong{font-size:17px}}
@media(min-width:1000px) and (orientation:landscape){.home-launcher-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.home-launcher-button{min-height:174px}.inventory-grid,.climate-device-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.home-shell{width:min(100% - 20px,560px);padding-top:12px}.home-launcher-grid{gap:9px}.home-launcher-button{min-height:116px;padding:12px;border-radius:16px}.home-launcher-icon{width:50px;height:50px;border-radius:15px}.home-launcher-icon svg{width:28px;height:28px}.home-launcher-button strong{font-size:13px}.device-inventory-shell,.climate-shell{width:min(100% - 16px,560px);padding-top:8px}.inventory-grid,.climate-device-grid{grid-template-columns:1fr}.touch-power-button{width:48px}.touch-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(display-mode:fullscreen),(display-mode:standalone){.home-body .topbar{display:none}.home-body .home-shell{min-height:100dvh;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.home-body .device-inventory-shell,.home-body .climate-shell{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.home-launcher-button,.control-page-icon,.touch-color-wheel,.touch-white-button,.touch-mode-button{transition:none}}

/* Multimedia: compact Spotify and local-device console. */
.media-shell{width:min(1080px,calc(100% - 24px));padding-top:12px;padding-bottom:32px;}
.spotify-empty-state,.spotify-console,.spotify-setup-card,.spotify-callback-card,.spotify-account-details{border:1px solid #d7e1ec;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(15,23,42,.06);}
.spotify-empty-state{min-height:180px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:18px;padding:24px;}
.spotify-empty-state h2,.spotify-console h2,.spotify-setup-card h2,.spotify-callback-card h2,.spotify-section-heading h2{margin:3px 0 5px;color:var(--ink);font-size:clamp(18px,3vw,24px);}
.spotify-empty-state p,.spotify-setup-card p,.spotify-callback-card p{margin:0;color:#64748b;line-height:1.5;}
.spotify-feature-icon,.spotify-album-placeholder{width:64px;height:64px;display:grid;place-items:center;flex:none;border-radius:18px;background:#ecfdf3;color:#15803d;}
.spotify-feature-icon svg,.spotify-album-placeholder svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.spotify-primary-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border:0;border-radius:13px;background:#15803d;color:#fff;font:800 14px "Fira Sans",sans-serif;text-decoration:none;cursor:pointer;touch-action:manipulation;box-shadow:0 5px 14px rgba(21,128,61,.2);}
.spotify-primary-button:hover{background:#166534;color:#fff;}.spotify-primary-button:active{transform:scale(.97);}
.spotify-primary-button:focus-visible,.spotify-transport button:focus-visible,.spotify-device-picker select:focus-visible,.spotify-device-picker button:focus-visible,.spotify-volume input:focus-visible,.spotify-playlist-grid button:focus-visible,.spotify-config-form input:focus-visible{outline:3px solid #86efac;outline-offset:3px;}
.spotify-console{overflow:hidden;padding:18px;}
.spotify-console-heading{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;gap:18px;padding-bottom:16px;border-bottom:1px solid #e2e8f0;}
.spotify-console-heading h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spotify-console-heading p{margin:0;overflow:hidden;color:#64748b;text-overflow:ellipsis;white-space:nowrap;}
.spotify-console-heading img,.spotify-album-placeholder{width:96px;height:96px;border-radius:15px;object-fit:cover;}
.spotify-transport{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 0 10px;}
.spotify-transport form{margin:0;}.spotify-transport button{width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid #cbd5e1;border-radius:50%;background:#fff;color:#334155;cursor:pointer;touch-action:manipulation;}
.spotify-transport button.is-primary{width:64px;height:64px;border-color:#15803d;background:#15803d;color:#fff;box-shadow:0 6px 16px rgba(21,128,61,.22);}
.spotify-transport button:hover{border-color:#15803d;color:#15803d;}.spotify-transport button.is-primary:hover{background:#166534;color:#fff;}.spotify-transport button:active{transform:scale(.94);}
.spotify-transport svg,.spotify-volume svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.spotify-console [disabled],.spotify-playlist-grid [disabled]{cursor:not-allowed;opacity:.45;}
.spotify-volume{display:grid;grid-template-columns:26px minmax(0,1fr) 52px;align-items:center;gap:10px;max-width:540px;margin:4px auto 18px;padding:0 8px;color:#475569;}
.spotify-volume input{width:100%;height:44px;margin:0;accent-color:#15803d;cursor:pointer;}.spotify-volume output{color:#166534;font:800 13px "Fira Code",monospace;text-align:right;}
.spotify-device-picker{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;max-width:660px;margin:auto;}
.spotify-device-picker label{font-size:12px;font-weight:800;color:#475569;}.spotify-device-picker select{min-width:0;min-height:48px;padding:8px 12px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:var(--ink);font-size:15px;}.spotify-device-picker button{min-height:48px;padding:8px 15px;border:1px solid #bbf7d0;border-radius:12px;background:#f0fdf4;color:#166534;font-weight:800;cursor:pointer;}
.spotify-feedback{min-height:18px;margin:12px 0 0;color:#64748b;font-size:11px;font-weight:700;text-align:center;}
.spotify-inline-error{margin:14px 0 0;padding:10px 12px;border-radius:11px;background:#fff7ed;color:#9a3412;font-size:12px;font-weight:700;}.spotify-inline-error a{color:inherit;}
.spotify-playlists,.media-house-devices{margin-top:22px;}.spotify-section-heading{margin-bottom:10px;}.spotify-section-heading p{margin:0;}.spotify-playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px;}.spotify-playlist-grid form{margin:0;}.spotify-playlist-grid button{width:100%;min-height:82px;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:10px;padding:10px;border:1px solid #d7e1ec;border-radius:15px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 12px rgba(15,23,42,.04);}.spotify-playlist-grid button:hover{border-color:#86efac;background:#f0fdf4;}.spotify-playlist-grid button:active{transform:scale(.97);}.spotify-playlist-grid img,.spotify-playlist-grid button>span{width:56px;height:56px;display:grid;place-items:center;border-radius:10px;background:#ecfdf3;object-fit:cover;}.spotify-playlist-grid svg{width:25px;height:25px;fill:none;stroke:#15803d;stroke-width:2;}.spotify-playlist-grid strong{overflow:hidden;font-size:13px;line-height:1.3;text-overflow:ellipsis;}
.spotify-account-details{margin-top:22px;padding:4px 16px;}.spotify-account-details summary{min-height:48px;display:flex;align-items:center;color:#475569;font-size:13px;font-weight:800;cursor:pointer;}.spotify-account-details p{color:#64748b;font-size:13px;line-height:1.45;}.spotify-account-details form{padding-bottom:14px;}.spotify-account-details button{min-height:44px;padding:8px 13px;border:1px solid #fecaca;border-radius:11px;background:#fff;color:#b91c1c;font-weight:800;cursor:pointer;}
.spotify-setup-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);align-items:start;gap:14px;}.spotify-setup-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:22px;}.spotify-config-form{grid-column:1/-1;display:grid;gap:14px;padding-top:4px;}.spotify-form-field{display:grid;gap:6px;}.spotify-form-field label{color:var(--ink);font-size:12px;font-weight:800;}.spotify-form-field input{width:100%;min-height:48px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;color:var(--ink);font:600 14px "Fira Code",monospace;}.spotify-form-field small{color:#64748b;font-size:11px;}.spotify-form-field.has-error input{border-color:#ef4444;}.field-error,.form-errors{color:#b91c1c;font-size:12px;font-weight:700;}.spotify-config-form .spotify-primary-button{justify-self:start;}.spotify-callback-card{padding:20px;}.spotify-callback-card code{display:block;overflow-wrap:anywhere;margin:12px 0;padding:12px;border-radius:11px;background:#f1f5f9;color:#1e3a8a;font-size:12px;line-height:1.45;}
.media-house-devices .inventory-card{position:relative;}
@media(max-width:720px){.spotify-empty-state{grid-template-columns:56px minmax(0,1fr);padding:18px}.spotify-empty-state .spotify-primary-button{grid-column:1/-1;width:100%}.spotify-feature-icon{width:56px;height:56px}.spotify-setup-layout{grid-template-columns:1fr}.spotify-device-picker{grid-template-columns:1fr}.spotify-device-picker label{margin-bottom:-4px}.spotify-playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.media-shell{width:min(100% - 16px,560px);padding-top:8px}.spotify-console{padding:14px}.spotify-console-heading{grid-template-columns:minmax(0,1fr) 72px;gap:12px}.spotify-console-heading img,.spotify-album-placeholder{width:72px;height:72px}.spotify-playlist-grid{grid-template-columns:1fr}.spotify-setup-card{grid-template-columns:1fr}.spotify-config-form{grid-column:1}.spotify-transport{gap:9px}}
@media(prefers-reduced-motion:reduce){.spotify-primary-button,.spotify-transport button,.spotify-playlist-grid button{transition:none}}

/* Multimedia: physical-player cards with optional provider capabilities. */
.media-device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;}
.media-device-card{min-width:0;padding:16px;border-color:#d7e1ec;box-shadow:0 7px 22px rgba(15,23,42,.06);}
.media-device-card.has-spotify{grid-column:span 2;order:-1;}
.media-device-card .compact-device-title h2{overflow:hidden;margin:0;color:var(--ink);font-size:17px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;}
.media-device-card .touch-control-console{margin-top:10px;}
.media-device-pending{margin:12px 0 0;padding:11px 12px;border-radius:11px;background:#f8fafc;color:#64748b;font-size:12px;line-height:1.45;}
.media-now-playing{grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:11px;margin-top:13px;padding:10px;border-radius:14px;background:linear-gradient(135deg,#f8fafc,#fff);}
.media-now-playing.is-playing{border-color:#bbf7d0;background:linear-gradient(135deg,#f0fdf4,#fff);}
.media-now-playing-art{width:56px;height:56px;display:grid;place-items:center;border-radius:11px;background:#e2e8f0;color:#475569;overflow:hidden;}
.media-now-playing.is-playing .media-now-playing-art{background:#dcfce7;color:#15803d;}
.media-now-playing-art img{width:100%;height:100%;object-fit:cover;}
.media-now-playing-art svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.media-now-playing-copy{min-width:0;display:grid;gap:2px;}
.media-now-playing-copy>span{overflow:hidden;color:#64748b;font-size:10px;font-weight:800;letter-spacing:.035em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;}
.media-now-playing-copy strong,.media-now-playing-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.media-now-playing-copy strong{color:var(--ink);font-size:14px;}.media-now-playing-copy small{color:#64748b;font-size:11px;}
.media-now-playing-volume{min-width:45px;color:#334155;font:700 12px "Fira Code",monospace;text-align:right;}
.spotify-device-capability{margin-top:13px;padding:11px;border:1px solid #d7e1ec;border-radius:14px;background:#f8fafc;}
.spotify-capability-header{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;}
.spotify-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#16a34a;color:#fff;}
.spotify-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.spotify-capability-header>div{min-width:0;display:grid;gap:1px;}.spotify-capability-header>div strong{color:var(--ink);font-size:14px;}.spotify-capability-header>div span{overflow:hidden;color:#64748b;font-size:10px;text-overflow:ellipsis;white-space:nowrap;}
.spotify-connect-status{display:flex;align-items:center;gap:6px;color:#64748b;font-size:10px;font-weight:800;white-space:nowrap;}.spotify-connect-status i{width:8px;height:8px;border-radius:50%;background:#94a3b8;}.spotify-connect-status.is-ready{color:#15803d;}.spotify-connect-status.is-ready i{background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}.spotify-connect-status.is-local{color:#1d4ed8;}.spotify-connect-status.is-local i{background:#3b82f6;box-shadow:0 0 0 3px #dbeafe;}
.spotify-card-message{min-height:48px;display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:9px 10px;border-radius:11px;background:#fff;color:#475569;font-size:12px;line-height:1.4;}
.spotify-card-message>span{min-width:0;flex:1;}.spotify-card-message.is-guidance{display:grid;grid-template-columns:24px minmax(0,1fr) auto;}.spotify-card-message.is-guidance>svg{width:22px;height:22px;fill:none;stroke:#2563eb;stroke-width:2;}.spotify-card-message.is-guidance span{display:grid;gap:2px;}.spotify-card-message.is-guidance strong{color:var(--ink);}
.spotify-card-message.is-error{background:#fff7ed;color:#9a3412;}.spotify-card-message a{color:inherit;font-weight:800;}
.spotify-compact-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border:1px solid #86efac;border-radius:11px;background:#f0fdf4;color:#166534!important;font-weight:800;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,transform .16s ease;}.spotify-compact-button:hover{background:#dcfce7;}.spotify-compact-button:active{transform:scale(.96);}.spotify-compact-button:focus-visible{outline:3px solid #86efac;outline-offset:2px;}
.spotify-library{margin-top:10px;border-radius:11px;background:#fff;}.spotify-library>summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;color:#166534;cursor:pointer;list-style:none;touch-action:manipulation;}.spotify-library>summary::-webkit-details-marker{display:none;}.spotify-library>summary>span{display:grid;}.spotify-library>summary strong{font-size:13px;}.spotify-library>summary small{color:#64748b;font-size:10px;}.spotify-library>summary>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .16s ease;}.spotify-library[open]>summary>svg{transform:rotate(180deg);}.spotify-library>summary:focus-visible{outline:3px solid #86efac;outline-offset:2px;border-radius:11px;}
.spotify-card-playlists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 9px 9px;}.spotify-card-playlists form{min-width:0;margin:0;}.spotify-card-playlists button,.spotify-playlist-link{width:100%;min-height:58px;display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:8px;padding:5px;border:1px solid #e2e8f0;border-radius:11px;background:#fff;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:border-color .16s ease,background-color .16s ease,transform .16s ease;}.spotify-card-playlists button:hover,.spotify-playlist-link:hover{border-color:#86efac;background:#f0fdf4;}.spotify-card-playlists button:active,.spotify-playlist-link:active{transform:scale(.98);}.spotify-card-playlists button:focus-visible,.spotify-playlist-link:focus-visible{outline:3px solid #86efac;outline-offset:2px;}.spotify-card-playlists button:disabled{cursor:not-allowed;opacity:.45;}.spotify-card-playlists img,.spotify-card-playlists button>span,.spotify-playlist-link>span{width:48px;height:48px;display:grid;place-items:center;border-radius:8px;background:#dcfce7;object-fit:cover;}.spotify-card-playlists button>span svg,.spotify-playlist-link>span svg{width:22px;height:22px;fill:none;stroke:#15803d;stroke-width:2;}.spotify-card-playlists strong{overflow:hidden;font-size:12px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;}.spotify-card-playlists .spotify-play-icon{width:22px;height:22px;fill:none;stroke:#15803d;stroke-width:2;}
.spotify-feedback:empty{display:none;}.spotify-feedback{min-height:0;margin:8px 0 0;padding:7px 9px;border-radius:9px;background:#eff6ff;color:#1d4ed8;text-align:left;}.spotify-feedback[data-kind="success"]{background:#f0fdf4;color:#15803d;}.spotify-feedback[data-kind="error"]{background:#fef2f2;color:#b91c1c;}
.spotify-account-compact{margin-top:5px;}.spotify-account-compact>summary{min-height:44px;display:flex;align-items:center;color:#64748b;font-size:10px;font-weight:800;cursor:pointer;}.spotify-account-compact form{padding-bottom:3px;}.spotify-account-compact button{min-height:44px;padding:8px 11px;border:1px solid #fecaca;border-radius:10px;background:#fff;color:#b91c1c;font-size:11px;font-weight:800;cursor:pointer;}
.media-now-playing-source{max-width:112px;overflow:hidden;padding:5px 8px;border-radius:999px;background:#dcfce7;color:#166534;font-size:9px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.media-seek{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px;margin:1px 0 0;}.media-seek>button{min-width:48px;height:44px;padding:0;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#334155;font:800 10px "Fira Code",monospace;cursor:pointer;touch-action:manipulation;}.media-seek>span{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;}.media-seek input{height:40px;}.media-seek output{font:700 9px "Fira Code",monospace;}.media-seek button:focus-visible,.media-seek input:focus-visible{outline:3px solid #86efac;outline-offset:2px;}
.spotify-inline-setup{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:7px 9px;border-radius:9px;background:#fff7ed;color:#9a3412;font-size:10px;font-weight:700;}.spotify-inline-setup a{min-height:36px;display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px;background:#ffedd5;color:inherit;text-decoration:none;}
.spotify-library-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px;padding:4px;border-radius:11px;background:#e8eef5;}.spotify-library-tabs button{min-height:44px;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:#52627a;font-size:11px;font-weight:800;cursor:pointer;touch-action:manipulation;}.spotify-library-tabs button[aria-selected="true"]{background:#fff;color:#166534;box-shadow:0 2px 8px rgba(15,23,42,.08);}.spotify-library-tabs button:focus-visible{outline:3px solid #86efac;outline-offset:1px;}
.spotify-library-panel{margin-top:8px;}.spotify-library-panel[hidden]{display:none;}.spotify-item-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}.spotify-item-grid form{min-width:0;margin:0;}.spotify-item-grid button{position:relative;width:100%;min-height:80px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:7px;padding:7px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;transition:border-color .14s ease,background-color .14s ease,transform .14s ease;}.spotify-item-grid button:hover,.spotify-item-grid form.is-selected button{border-color:#4ade80;background:#f0fdf4;}.spotify-item-grid button:active{transform:scale(.97);}.spotify-item-grid button:focus-visible{outline:3px solid #86efac;outline-offset:2px;}.spotify-item-grid button:disabled{cursor:not-allowed;opacity:.42;}.spotify-item-grid img,.spotify-item-placeholder{width:48px;height:48px;grid-row:1/3;display:grid;place-items:center;border-radius:8px;background:#dcfce7;object-fit:cover;}.spotify-item-placeholder svg{width:23px;height:23px;fill:none;stroke:#15803d;stroke-width:2;}.spotify-item-copy{min-width:0;display:grid;align-self:end;}.spotify-item-copy strong,.spotify-item-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.spotify-item-copy strong{font-size:11px;line-height:1.25;}.spotify-item-copy small{margin-top:2px;color:#64748b;font-size:8px;}.spotify-item-kind{align-self:start;color:#64748b;font-size:8px;font-weight:700;}.spotify-item-grid .spotify-play-icon{position:absolute;right:6px;bottom:6px;width:17px;height:17px;fill:none;stroke:#15803d;stroke-width:2;}.spotify-compact-empty{min-height:48px;display:flex;align-items:center;justify-content:center;margin:0;padding:8px;color:#64748b;font-size:10px;text-align:center;}.spotify-compact-empty a{margin-left:4px;color:#166534;font-weight:800;}.spotify-compact-empty.is-error{color:#b91c1c;}
.spotify-search-form{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:6px;margin:0 0 7px;}.spotify-search-form input{min-width:0;min-height:48px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--ink);font-size:16px;}.spotify-search-form button{width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:#15803d;color:#fff;cursor:pointer;}.spotify-search-form svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;}.spotify-search-form input:focus-visible,.spotify-search-form button:focus-visible{outline:3px solid #86efac;outline-offset:2px;}
@media(min-width:1000px){.media-device-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.media-device-card.has-spotify{grid-column:span 2}}
@media(max-width:900px){.spotify-item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.media-device-grid{grid-template-columns:1fr}.media-device-card.has-spotify{grid-column:span 1}.spotify-card-playlists{grid-template-columns:1fr}.spotify-item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.media-shell{width:min(100% - 16px,560px)}.media-device-card{padding:13px}.spotify-card-message.is-guidance{grid-template-columns:22px minmax(0,1fr)}.spotify-card-message.is-guidance .spotify-compact-button{grid-column:1/-1;width:100%}.media-now-playing{grid-template-columns:50px minmax(0,1fr) auto}.media-now-playing-art{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){.spotify-compact-button,.spotify-library>summary>svg,.spotify-card-playlists button,.spotify-playlist-link,.spotify-item-grid button{transition:none}}

/* Denon wall-tablet console: physical state first, Spotify only on Network. */
.media-device-card.has-spotify{padding:12px;transition:border-color .16s ease,box-shadow .16s ease;}
.media-device-card.has-spotify.is-on{border-color:#bbf7d0;box-shadow:0 8px 22px rgba(21,128,61,.08);}
.media-device-card.has-spotify .compact-device-header{min-height:44px;grid-template-columns:42px minmax(0,1fr) 44px;gap:9px;}
.media-device-card.has-spotify .module-icon{width:42px;height:42px;border-radius:11px;}
.media-device-card.has-spotify .module-icon svg{width:24px;height:24px;}
.denon-control-console{margin-top:7px;}
.denon-off-state{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed #cbd5e1;border-radius:11px;background:#f8fafc;color:#64748b;font-size:11px;font-weight:800;}
.denon-off-state svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.denon-off-state[hidden],.denon-active-controls[hidden],.denon-source-panel[hidden],.media-now-playing[hidden]{display:none;}
.denon-active-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;}.denon-active-controls>.denon-source-select,.denon-active-controls>.denon-source-readonly,.denon-active-controls>.denon-source-panel{grid-column:1/-1;}
.denon-power{margin:0;}
.denon-power button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #d6e0eb;border-radius:12px;background:#f8fafc;color:#64748b;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;}
.denon-power button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.denon-power button[aria-checked="true"]{border-color:#4ade80;background:#dcfce7;color:#15803d;box-shadow:0 0 0 3px rgba(34,197,94,.1);}
.denon-power button:hover{border-color:#86efac;background:#f0fdf4;color:#166534;}
.denon-power button:active{transform:scale(.94);}
.denon-power button:disabled{cursor:wait;opacity:.58;}
.denon-power.is-pending button,.denon-power.is-pending button:hover{border-color:#f59e0b;background:#fffbeb;color:#b45309;opacity:1;}
.denon-power.is-pending button svg{animation:denon-power-pulse .9s ease-in-out infinite;}
.denon-source-select{position:relative;display:grid;grid-template-columns:auto 12px minmax(0,1fr);align-items:center;gap:7px;margin:0;padding:4px 4px 4px 10px;border-radius:11px;background:#e8eef5;}
.denon-source-select label,.denon-source-readonly>span{color:#475569;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.035em;}
.denon-source-select select{width:100%;min-height:44px;padding:7px 32px 7px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--ink);font-size:14px;font-weight:750;cursor:pointer;touch-action:manipulation;}
.denon-source-select select:disabled{cursor:not-allowed;background:#f1f5f9;color:#94a3b8;}
.denon-source-progress{width:9px;height:9px;border:2px solid #cbd5e1;border-top-color:#2563eb;border-radius:50%;animation:denon-source-spin .75s linear infinite;}
.denon-source-progress[aria-hidden="true"]{visibility:hidden;animation:none;}
.denon-source-readonly{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:7px 10px;border-radius:10px;background:#e8eef5;}.denon-source-readonly strong{font-size:12px;}
.denon-volume{grid-column:1;display:grid;grid-template-columns:21px minmax(44px,1fr) 28px;align-items:center;gap:5px;margin:0;padding:0 7px;color:#64748b;}
.denon-volume svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.denon-volume input{width:100%;height:44px;margin:0;accent-color:#2563eb;cursor:pointer;touch-action:pan-y;}
.denon-volume input:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.45;}
.denon-volume output{color:#475569;font:800 10px "Fira Code",monospace;font-variant-numeric:tabular-nums;text-align:right;}
.denon-mute{margin:0;justify-self:end;}.denon-mute button{display:flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:8px 12px;border:1px solid var(--line,#cbd5e1);border-radius:10px;background:var(--surface,#f8fafc);color:var(--ink);cursor:pointer;touch-action:manipulation;}.denon-mute button[aria-pressed="true"]{background:#fffbeb;border-color:#f59e0b;color:#92400e;}.denon-mute button:disabled{opacity:.45;cursor:not-allowed;}.denon-mute button:focus-visible{outline:3px solid #86efac;outline-offset:2px;}.denon-mute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.spotify-device-capability.denon-source-panel{margin:0;padding:7px;border:1px solid #dbe4ee;border-radius:11px;background:#f8fafc;}
.media-now-playing{display:grid;grid-template-columns:44px minmax(0,1fr);gap:7px;margin:0 0 6px;padding:7px;border:1px solid #dbe4ee;border-radius:10px;background:#fff;}
.media-now-playing-art{width:44px;height:44px;border-radius:8px;}.media-now-playing-art svg{width:23px;height:23px;}
.media-now-playing-copy strong{font-size:12px;}.media-now-playing-copy small{font-size:9px;}.media-now-playing-copy>span{font-size:8px;}
.media-now-playing-copy .media-session-label{color:#94a3b8;font-size:8px;}
.media-now-playing.is-updating{border-color:#86efac;}.media-now-playing.is-updating .media-now-playing-art{animation:media-action-pulse .8s ease-in-out infinite;}
.media-now-playing.is-switching{border-color:#fbbf24;}.media-now-playing.is-switching [data-media-state]{color:#b45309;}
.denon-playback-row{grid-column:1/-1;display:grid;grid-template-columns:44px 44px minmax(110px,1fr) 44px;align-items:center;gap:5px;}
.denon-playback-row>form{margin:0;}
.denon-playback-row>form>button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #d6e0eb;border-radius:10px;background:#fff;color:#334155;cursor:pointer;touch-action:manipulation;transition:background-color .14s ease,border-color .14s ease,transform .14s ease;}
.denon-playback-row>form>button.is-primary{border-color:#15803d;background:#15803d;color:#fff;box-shadow:0 3px 9px rgba(21,128,61,.18);}
.denon-playback-row>form>button:hover{border-color:#86efac;background:#f0fdf4;color:#166534;}
.denon-playback-row>form>button.is-primary:hover{background:#166534;color:#fff;}
.denon-playback-row>form>button:active{transform:scale(.94);}
.denon-playback-row>form>button:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.4;}
.denon-playback-row>form.is-pending>button{border-color:#4ade80;background:#f0fdf4;color:#166534;opacity:1;}
.denon-playback-row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.denon-playback-row>.media-seek{grid-column:auto;display:grid;grid-template-columns:31px minmax(50px,1fr) 31px;align-items:center;gap:4px;margin:0;}
.media-seek input{width:100%;min-width:0;height:44px;margin:0;accent-color:#15803d;cursor:pointer;touch-action:pan-y;}
.media-seek input:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.38;}
.media-seek output{color:#64748b;font:700 8px "Fira Code",monospace;font-variant-numeric:tabular-nums;text-align:center;}
.spotify-mini-header{min-height:25px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px;}
.spotify-mini-header>span:first-child{overflow:hidden;color:#475569;font-size:9px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.spotify-library-tabs{margin-top:5px;}.spotify-library-panel{margin-top:5px;}
.spotify-item-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:5px;}
.spotify-item-grid button{min-height:64px;grid-template-columns:42px minmax(0,1fr);gap:6px;padding:5px;border-radius:9px;}
.spotify-item-grid img,.spotify-item-placeholder{width:42px;height:42px;border-radius:7px;}
.spotify-item-copy strong{font-size:10px;}.spotify-item-copy small,.spotify-item-kind{font-size:8px;}
.spotify-item-grid .spotify-play-icon{right:5px;bottom:5px;width:15px;height:15px;}
.spotify-search-form{margin-bottom:5px;}.spotify-feedback{margin-top:4px;padding:6px 8px;font-size:10px;}
.denon-control-console .touch-control-feedback{min-height:0;margin:4px 0 0;text-align:center;}.denon-control-console .touch-control-feedback:empty{display:none;}
.media-device-card.is-source-changing .denon-source-select{box-shadow:inset 0 0 0 1px #93c5fd;}
.media-device-card.is-updating{cursor:progress;}
.denon-source-select select:focus-visible,.denon-power button:focus-visible,.denon-volume input:focus-visible,.denon-playback-row button:focus-visible,.media-seek input:focus-visible{outline:3px solid #86efac;outline-offset:2px;}
@keyframes denon-source-spin{to{transform:rotate(360deg)}}
@keyframes denon-power-pulse{0%,100%{opacity:.45;transform:scale(.84)}50%{opacity:1;transform:scale(1)}}
@keyframes media-action-pulse{0%,100%{opacity:.55}50%{opacity:1}}

@media(max-width:540px){.media-device-card.has-spotify{padding:10px}.spotify-item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.denon-playback-row{grid-template-columns:44px 44px minmax(88px,1fr) 44px}.denon-playback-row>.media-seek{grid-template-columns:27px minmax(42px,1fr) 27px}.media-seek output{font-size:7px}}
@media(max-width:390px){.denon-playback-row{grid-template-columns:42px 42px minmax(70px,1fr) 42px;gap:3px}.denon-playback-row>form>button{width:42px;height:42px}.denon-playback-row>.media-seek{grid-template-columns:minmax(55px,1fr)}.media-seek output{display:none}}
@media(prefers-reduced-motion:reduce){.media-device-card.has-spotify,.denon-power button,.denon-playback-row>form>button{transition:none}.denon-source-progress,.denon-power.is-pending button svg,.media-now-playing.is-updating .media-now-playing-art{animation:none}}

.media-device-card.has-webos{padding:12px;transition:border-color .16s ease,box-shadow .16s ease;}
.media-device-card.has-webos.is-on{border-color:#bae6fd;box-shadow:0 8px 22px rgba(3,105,161,.08);}
.media-device-card.has-webos .compact-device-header{min-height:44px;grid-template-columns:42px minmax(0,1fr) 44px;gap:9px;}
.webos-power{margin:0;}.webos-power .touch-power-button{width:44px;height:44px;}
.webos-control-console{margin-top:7px;}.webos-off-state{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed #cbd5e1;border-radius:11px;background:#f8fafc;color:#64748b;font-size:11px;font-weight:800;}
.webos-off-state svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}.webos-off-state[hidden],.webos-active-controls[hidden],.webos-media-title[hidden],.webos-actions form[hidden]{display:none;}
.webos-active-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.8fr);gap:8px;}
.webos-source{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;margin:0;padding:4px 4px 4px 10px;border-radius:11px;background:#e8eef5;}.webos-source label{color:#475569;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.035em;}.webos-source select{width:100%;min-height:44px;padding:7px 28px 7px 9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--ink);font-size:13px;font-weight:750;cursor:pointer;touch-action:manipulation;}
.webos-volume{display:grid;grid-template-columns:20px minmax(70px,1fr) 22px 9px;align-items:center;gap:3px;margin:0;padding:0 7px;color:#64748b;}.webos-volume svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}.webos-volume input{width:100%;height:44px;margin:0;accent-color:#0284c7;cursor:pointer;touch-action:pan-y;}.webos-volume output,.webos-volume>span{color:#475569;font:800 9px "Fira Code",monospace;font-variant-numeric:tabular-nums;text-align:right;}
.webos-media-title{grid-column:1/-1;overflow:hidden;margin:0;padding:7px 9px;border-radius:9px;background:#f8fafc;color:#334155;font-size:11px;font-weight:750;text-overflow:ellipsis;white-space:nowrap;}.webos-actions{grid-column:1/-1;display:flex;justify-content:center;gap:6px;}.webos-actions form{margin:0;}.webos-actions button{width:44px;height:44px;padding:0;}.webos-control-console .touch-control-feedback{min-height:0;margin:4px 0 0;text-align:center;}.webos-control-console .touch-control-feedback:empty{display:none;}
@media(max-width:540px){.webos-active-controls{grid-template-columns:1fr}.webos-media-title,.webos-actions{grid-column:auto}}

/* Electrodomésticos: live LG state with compact tablet controls. */
.appliances-shell{width:min(1040px,calc(100% - 24px));padding-top:12px;padding-bottom:32px;}
.appliance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;}
.appliance-card{min-width:0;padding:14px;border-color:#d7e1ec;box-shadow:0 7px 22px rgba(15,23,42,.06);transition:border-color .16s ease,background-color .16s ease;}
.appliance-card.is-on{border-color:#86efac;background:linear-gradient(145deg,#f0fdf4,#fff);}
.appliance-card.is-alert{border-color:#fdba74;background:#fff7ed;}
.appliance-card.is-offline{border-style:dashed;background:#f8fafc;}
.appliance-card .compact-device-title h2{overflow:hidden;margin:0;color:var(--ink);font-size:16px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;}
.compact-device-state.is-alert{color:#c2410c;}.compact-device-state.is-alert i{background:#f97316;box-shadow:0 0 0 3px #ffedd5;}
.compact-device-state.is-offline{color:#64748b;}.compact-device-state.is-offline i{background:#94a3b8;}
.appliance-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:11px 0 0;}
.appliance-readings>div{min-width:0;padding:8px 9px;border-radius:9px;background:#f1f5f9;}
.appliance-card.is-on .appliance-readings>div{background:rgba(255,255,255,.82);}
.appliance-readings dt{overflow:hidden;color:#64748b;font-size:8px;font-weight:850;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;}
.appliance-readings dd{overflow:hidden;margin:3px 0 0;color:#1e293b;font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.appliance-alerts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.appliance-alerts[hidden]{display:none;}.appliance-alerts span{min-height:32px;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:9px;background:#fff7ed;color:#9a3412;font-size:10px;font-weight:800;}.appliance-alerts svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.appliance-card .touch-control-console{gap:8px;margin-top:9px;padding:10px;}.appliance-card .touch-action-grid{padding-top:8px;}.appliance-card .touch-adjustment-list{gap:8px;}
.appliance-readonly-note{margin:9px 0 0;color:#94a3b8;font-size:9px;font-weight:700;text-align:right;}
@media(max-width:680px){.appliance-grid{grid-template-columns:1fr}.appliances-shell{width:min(100% - 16px,560px);padding-top:8px}.appliance-readings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.appliance-card{transition:none}}

/* Vacation mode preview and reversible automation ownership. */
.house-mode-effects{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}.house-mode-effects span{min-height:38px;display:grid;align-content:center;padding:6px 9px;border:1px solid #dbe5f2;border-radius:8px;background:rgba(255,255,255,.78);color:#475569;font-size:9px;}.house-mode-effects strong{display:block;margin-bottom:2px;color:#1e293b;font-size:8px;letter-spacing:.04em;text-transform:uppercase;}.automation-row.is-active{border-left-color:#f97316;background:linear-gradient(100deg,#fff7ed,#fff 30%);}.automation-row.is-active .automation-row-status{color:#c2410c;}.automation-row.is-active .automation-row-status i{background:#f97316;box-shadow:0 0 0 3px #ffedd5;}.automation-row.is-scheduled{border-left-color:#2563eb;}.automation-row.is-scheduled .automation-row-status{color:#1d4ed8;}.automation-row.is-scheduled .automation-row-status i{background:#2563eb;box-shadow:0 0 0 3px #dbeafe;}.automation-row.is-expired{border-left-color:#cbd5e1;opacity:.72;}.automation-frost-fields{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:14px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;}.automation-frost-fields[hidden]{display:none;}.vacation-live-preview{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;padding:16px 18px;border:1px solid #bfdbfe;border-radius:12px;background:linear-gradient(110deg,#eff6ff,#fff);}.vacation-live-preview>span{padding:5px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}.vacation-live-preview strong{color:var(--ink);font:700 13px "Fira Code",monospace;}.vacation-live-preview p{margin:4px 0 0;color:#52627a;font-size:10px;}.vacation-live-preview p:last-child{color:#1e40af;font-weight:700;}
@media(max-width:620px){.house-mode-effects{display:grid}.automation-frost-fields{grid-template-columns:1fr}.vacation-live-preview{grid-template-columns:1fr}}

/* Household hierarchy: a compact, touch-first layer independent of vendors. */
.home-launcher-button.is-household .home-launcher-icon{background:#ecfdf5;color:#047857;}
.home-household-strip{display:grid;gap:10px;}.home-strip-heading,.household-section-heading{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;}.home-strip-heading h2,.household-section-heading h2{margin:0;color:var(--ink);font:700 14px "Fira Code",monospace;letter-spacing:-.02em;}.home-strip-heading>a{min-height:44px;display:flex;align-items:center;padding:0 4px;font-size:12px;font-weight:800;}.home-strip-heading>span,.household-section-heading>span{min-width:30px;min-height:30px;display:grid;place-items:center;border-radius:999px;background:#e8eef5;color:#334155;font:800 11px "Fira Code",monospace;}
.home-layout-setup,.household-empty-action{min-height:72px;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border:1px dashed #93c5fd;border-radius:15px;background:#f8fbff;color:var(--ink);transition:border-color .18s ease,background-color .18s ease;}.home-layout-setup:hover,.household-empty-action:hover{border-color:#2563eb;background:#eff6ff;}.home-layout-setup>svg,.household-empty-action>svg{width:44px;height:44px;padding:10px;border-radius:12px;background:#dbeafe;color:#1d4ed8;}.home-layout-setup strong,.home-layout-setup small,.household-empty-action strong,.household-empty-action small{display:block;}.home-layout-setup small,.household-empty-action small{margin-top:2px;color:#64748b;font-size:10px;}
.household-shell{width:min(1180px,calc(100% - 32px));display:grid;gap:18px;padding-top:16px;}.household-page-header{min-height:58px;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px;}.household-page-header>div{min-width:0;text-align:center;}.household-page-header h1{overflow:hidden;margin:2px 0 0;color:var(--ink);font-size:clamp(20px,3vw,27px);line-height:1.15;text-overflow:ellipsis;white-space:nowrap;}.household-page-header .eyebrow{font-size:9px;}.household-section{display:grid;gap:10px;}
.household-space-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}.household-space-tile{min-width:0;min-height:78px;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;align-items:center;gap:10px;padding:11px 12px;border:1px solid #d7e1ec;border-radius:15px;background:#fff;color:var(--ink);box-shadow:0 5px 16px rgba(15,23,42,.045);transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;}.household-space-tile:hover{border-color:#93c5fd;background:#f8fbff;box-shadow:0 9px 22px rgba(30,64,175,.08);}.household-space-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:#eff6ff;color:#1d4ed8;}.household-space-tile.is-home .household-space-icon{background:#ecfdf5;color:#047857;}.household-space-tile.is-zone .household-space-icon{background:#fff7ed;color:#c2410c;}.household-space-icon svg{width:25px;height:25px;}.household-space-copy{min-width:0;}.household-space-copy strong,.household-space-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.household-space-copy strong{font-size:14px;}.household-space-copy small{margin-top:3px;color:#64748b;font-size:10px;}.household-tile-arrow{width:20px;height:20px;color:#94a3b8;}
.household-group-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}.household-group-tile{min-width:0;min-height:68px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:9px;padding:9px 11px;border:1px solid #d7e1ec;border-radius:13px;background:#fff;color:var(--ink);transition:border-color .18s ease,background-color .18s ease;}.household-group-tile:hover{border-color:#93c5fd;background:#f8fbff;}.household-group-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#eef4ff;color:#1e40af;}.household-group-icon svg{width:22px;height:22px;}.household-group-tile>span:last-child{min-width:0;}.household-group-tile strong,.household-group-tile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.household-group-tile strong{font-size:12px;}.household-group-tile small{margin-top:2px;color:#64748b;font-size:9px;}
.quick-scene-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}.quick-scene-tile{min-width:0;margin:0;}.quick-scene-tile>button,.quick-scene-tile:not(form){width:100%;min-height:72px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;padding:9px;border:1px solid #d7e1ec;border-radius:14px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;transition:border-color .18s ease,background-color .18s ease,transform .16s ease;}.quick-scene-tile>button:hover,.quick-scene-tile.is-draft:hover{border-color:#86efac;background:#f0fdf4;}.quick-scene-tile>button:active{transform:scale(.97);}.quick-scene-tile>button:disabled{cursor:wait;opacity:.65;}.quick-scene-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#e8eef5;color:#334155;}.quick-scene-icon svg{width:22px;height:22px;}.quick-scene-tile.is-ready .quick-scene-icon{background:#dcfce7;color:#15803d;}.quick-scene-tile.is-draft{opacity:.7;}.quick-scene-tile>button>span:last-child,.quick-scene-tile:not(form)>span:last-child{min-width:0;}.quick-scene-tile strong,.quick-scene-tile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.quick-scene-tile strong{font-size:11px;}.quick-scene-tile small{margin-top:3px;color:#64748b;font-size:8px;}.quick-scene-tile.is-pending>button{border-color:#93c5fd;background:#eff6ff;}.quick-scene-tile.is-success>button{border-color:#86efac;background:#f0fdf4;}.quick-scene-tile.is-error>button{border-color:#fecaca;background:#fef2f2;}
.household-device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px;}.household-device-card{min-width:0;padding:12px;border:1px solid #d7e1ec;border-radius:15px;background:#fff;box-shadow:0 5px 17px rgba(15,23,42,.05);}.household-device-card.is-on{border-color:#86efac;background:linear-gradient(145deg,#f0fdf4,#fff 62%);}.household-device-card.is-unavailable{border-style:dashed;background:#f8fafc;}.household-device-card>header{min-height:46px;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px;}.household-device-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#eef4ff;color:#1e40af;}.household-device-icon svg{width:23px;height:23px;}.household-device-copy{min-width:0;}.household-device-copy>strong,.household-device-copy>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.household-device-copy>strong{color:var(--ink);font-size:13px;}.household-device-copy>small{margin-top:3px;color:#64748b;font-size:9px;font-weight:800;}.household-device-copy>small i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#94a3b8;}.household-device-copy>small.is-on{color:#166534;}.household-device-copy>small.is-on i{background:#22c55e;box-shadow:0 0 0 2px #dcfce7;}.household-device-copy>small.is-unavailable{color:#9a3412;}.household-device-copy>small.is-unavailable i{background:#f97316;}.household-device-purpose{display:flex;align-items:center;gap:5px;}.household-device-purpose span{color:#64748b;font-size:8px;font-weight:800;text-transform:uppercase;}.household-device-purpose strong{overflow:hidden;color:#1e40af;font-size:10px;text-overflow:ellipsis;white-space:nowrap;}.household-device-card>dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:8px 0 0;}.household-device-card>dl div{min-width:0;padding:6px 8px;border-radius:8px;background:rgba(241,245,249,.8);}.household-device-card dt{overflow:hidden;color:#64748b;font-size:7px;font-weight:800;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;}.household-device-card dd{overflow:hidden;margin:2px 0 0;color:#1e293b;font-size:9px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}.household-device-card>p{margin:8px 0 0;color:#64748b;font-size:9px;}.household-device-card .touch-control-console.is-compact{margin-top:8px;}.household-device-card .touch-control-console.is-compact .touch-action-grid{grid-template-columns:repeat(4,minmax(44px,1fr));}.household-device-card .touch-control-feedback{min-height:0;margin:3px 0 0;font-size:8px;}.household-device-card .touch-control-feedback:empty{display:none;}
.household-unassigned-link{min-height:52px;display:grid;grid-template-columns:30px minmax(0,1fr) 20px;align-items:center;gap:9px;padding:8px 11px;border:1px dashed #cbd5e1;border-radius:12px;background:#fff;color:#475569;font-size:11px;font-weight:800;}.household-unassigned-link>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e8eef5;color:#1e40af;font:800 10px "Fira Code",monospace;}.household-unassigned-link svg{width:18px;}.household-empty-state{min-height:84px;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;border:1px dashed #cbd5e1;border-radius:14px;background:#fff;color:#64748b;text-align:center;}.household-empty-state p{margin:0;}.household-empty-state a{min-height:44px;display:flex;align-items:center;font-weight:800;}
.household-manage-shell{gap:14px;}.household-manage-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;border-radius:13px;background:#e8eef5;}.household-manage-tabs a{min-height:44px;display:grid;place-items:center;border-radius:9px;color:#475569;font-size:11px;font-weight:800;}.household-manage-tabs a:hover{background:#fff;color:#1e40af;}.household-manage-section{scroll-margin-top:90px;padding:16px;border:1px solid #d7e1ec;border-radius:16px;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.04);}.household-manage-heading{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;}.household-manage-heading h2{margin:2px 0 0;color:var(--ink);font:700 18px "Fira Code",monospace;}.household-manage-heading>.button{min-height:44px;}.household-manage-heading>span{min-width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e8eef5;color:#1e40af;font-weight:800;}.household-record-list,.household-placement-list{display:grid;gap:7px;}.household-record{min-height:62px;display:grid;grid-template-columns:40px minmax(0,1fr) auto 44px;align-items:center;gap:9px;padding:8px;border:1px solid #e2e8f0;border-radius:11px;background:#fff;}.household-record.is-inactive{opacity:.62;background:#f8fafc;}.household-record-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#eef4ff;color:#1e40af;}.household-record-icon svg{width:21px;height:21px;}.household-record>div{min-width:0;}.household-record strong,.household-record small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.household-record strong{color:var(--ink);font-size:12px;}.household-record small{margin-top:2px;color:#64748b;font-size:9px;}.household-record-state{padding:4px 7px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:8px;font-weight:800;text-transform:uppercase;}.household-record-edit{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;color:#1e40af;}.household-record-edit:hover{background:#eff6ff;}.household-record-edit svg{width:20px;height:20px;}.household-empty-copy{margin:4px;color:#64748b;font-size:11px;}
.household-placement-list form{min-height:66px;display:grid;grid-template-columns:minmax(190px,1.2fr) minmax(190px,1fr) 76px;align-items:center;gap:8px;padding:8px;border:1px solid #e2e8f0;border-radius:11px;}.household-placement-list form.has-load-field{grid-template-columns:minmax(180px,1.15fr) minmax(180px,1fr) minmax(160px,.8fr) 76px;}.household-placement-list label{min-width:0;}.household-placement-list label strong,.household-placement-list label small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.household-placement-list label strong{color:var(--ink);font-size:11px;}.household-placement-list label small{color:#64748b;font-size:8px;}.household-placement-list select,.household-placement-list input{min-width:0;min-height:44px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:var(--ink);font-size:13px;}.household-placement-list select{cursor:pointer;}.household-placement-list input::placeholder{color:#94a3b8;}.household-placement-list button{min-height:44px;border:1px solid #93c5fd;border-radius:9px;background:#eff6ff;color:#1e40af;font-size:10px;font-weight:800;cursor:pointer;}.household-placement-list button:hover{border-color:#2563eb;background:#dbeafe;}
.household-form-shell{width:min(900px,calc(100% - 32px));}.household-editor{display:grid;gap:18px;padding:20px;border:1px solid #d7e1ec;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.055);}.household-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}.household-field{min-width:0;display:grid;align-content:start;gap:5px;}.household-field>label:not(.household-check){color:var(--ink);font-size:11px;font-weight:800;}.household-field>input:not([type=checkbox]),.household-field>select,.household-field>textarea{width:100%;min-height:48px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--ink);font-size:16px;}.household-field>small{color:#64748b;font-size:9px;line-height:1.4;}.household-field.has-error>input,.household-field.has-error>select{border-color:#ef4444;}.household-check{min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #d7e1ec;border-radius:10px;color:var(--ink);font-size:11px;font-weight:800;cursor:pointer;}.household-check input{width:20px;height:20px;accent-color:#1e40af;}.household-field>div>div,.household-field ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none;}.household-field li label,.household-field>div label{min-height:44px;display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid #e2e8f0;border-radius:8px;color:#334155;font-size:10px;cursor:pointer;}.household-field li input,.household-field>div input{width:18px;height:18px;accent-color:#1e40af;}.household-form-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:4px;}.household-form-actions .button{min-width:120px;min-height:48px;}.household-form-errors{padding:10px 12px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:11px;}.household-form-errors ul{margin:0;padding-left:18px;}.scene-step-editor{display:grid;gap:12px;padding-top:16px;border-top:1px solid #e2e8f0;}.scene-step-editor h2{margin:2px 0;color:var(--ink);font:700 18px "Fira Code",monospace;}.scene-step-editor>div>p:last-child{margin:3px 0 0;color:#64748b;font-size:10px;}.scene-step-list{display:grid;gap:9px;}.scene-step-row{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(130px,1fr) minmax(130px,.8fr) 76px;align-items:start;gap:9px;margin:0;padding:13px;border:1px solid #dbe5f2;border-radius:12px;background:#f8fafc;}.scene-step-row legend{grid-column:1/-1;padding:0 5px;color:#1e40af;font-size:9px;font-weight:800;text-transform:uppercase;}.scene-step-row .household-field:has(input[type=checkbox]){align-self:end;}
@media(max-width:900px){.household-space-grid,.household-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.household-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-scene-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.scene-step-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.household-shell,.household-form-shell{width:min(100% - 16px,560px);padding-top:8px}.household-space-grid,.household-device-grid,.household-group-grid{grid-template-columns:1fr}.quick-scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.household-manage-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.household-manage-section,.household-editor{padding:12px}.household-record{grid-template-columns:40px minmax(0,1fr) 44px}.household-record-state{grid-column:2}.household-record-edit{grid-column:3;grid-row:1/3}.household-placement-list form{grid-template-columns:minmax(0,1fr) 72px}.household-placement-list form.has-load-field{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px}.household-placement-list label{grid-column:1/-1}.household-form-grid,.scene-step-row{grid-template-columns:1fr}.household-form-actions{display:grid;grid-template-columns:1fr 1fr}.household-form-actions .button{min-width:0}.household-field>div>div,.household-field ul{grid-template-columns:1fr}.home-household-strip .household-space-grid,.home-household-strip .household-group-grid{grid-template-columns:1fr}.home-household-strip .household-device-grid{grid-template-columns:1fr}}
@media(max-width:390px){.quick-scene-grid{grid-template-columns:1fr}.household-page-header{grid-template-columns:44px minmax(0,1fr) 44px;gap:7px}.household-manage-section{padding:10px}.household-placement-list form,.household-placement-list form.has-load-field{grid-template-columns:1fr}.household-placement-list button{width:100%}}
@media(prefers-reduced-motion:reduce){.home-layout-setup,.household-empty-action,.household-space-tile,.household-group-tile,.quick-scene-tile>button,.quick-scene-tile:not(form){transition:none}}
.quick-scene-tile.is-warning>button{border-color:#fcd34d;background:#fffbeb;}


/* Source: css/panel.css */
/* Home Manager 2 · approved light design. Scoped: never rewrite accounting styles. */
:root {
--hm-canvas: #f7f5f0;
--hm-surface: #fff;
--hm-text: #162c28;
--hm-muted: #52635d;
--hm-line: #d6ddd6;
--hm-green: #195d4f;
--hm-soft: #e2f0e8;
--hm-focus: #1758a6;
--hm-shadow: 0 3px 12px #162c280d;
}
.panel-body {
margin: 0 auto;
width: 100%;
container-type: inline-size;
container-name: panel;
background: var(--hm-canvas);
color: var(--hm-text);
font:
400 16px/1.5 Inter,
system-ui,
-apple-system,
"Segoe UI",
sans-serif;
min-height: 100dvh;
}
html[data-effective-mode="tablet"] {
background: #e8e6e0;
}
html[data-effective-mode="tablet"] .panel-body {
max-width: 1024px;
box-shadow: 0 0 0 1px var(--hm-line);
}
.panel-body * {
box-sizing: border-box;
}
.panel-body [hidden] {
display: none !important;
}
.panel-body h1,
.panel-body h2,
.panel-body h3,
.panel-body strong,
.panel-body button {
font-family: inherit;
letter-spacing: normal;
}
.panel-body h1 {
font-size: 28px;
line-height: 34px;
margin: 0;
font-weight: 650;
}
.panel-body h2 {
font-size: 22px;
line-height: 28px;
margin: 0 0 12px;
}
.panel-body h3 {
font-size: 18px;
line-height: 24px;
}
.panel-body small {
font-size: 14px;
line-height: 20px;
color: var(--hm-muted);
}
.panel-body a {
color: inherit;
text-decoration: none;
}
.panel-body svg {
max-width: 100%;
}
.panel-body :focus-visible {
outline: 3px solid var(--hm-focus);
outline-offset: 4px;
}
.panel-body button,
.panel-body summary,
.panel-body select,
.panel-body
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
min-height: 48px;
}
.panel-body button,
.panel-body summary {
cursor: pointer;
touch-action: manipulation;
}
.panel-body button:disabled {
cursor: not-allowed;
background: #eff1ee;
color: #69726e;
opacity: 1;
}
.panel-body input,
.panel-body select,
.panel-body textarea {
font: inherit;
border: 1px solid var(--hm-line);
border-radius: 12px;
color: var(--hm-text);
background: white;
padding: 10px 12px;
max-width: 100%;
}
.panel-body input[type="checkbox"],
.panel-body input[type="radio"] {
width: 24px;
height: 24px;
accent-color: var(--hm-green);
flex: none;
}
.panel-icon {
width: 28px;
height: 28px;
flex: none;
}
.panel-topbar {
height: 72px;
padding: 0 32px;
display: flex;
align-items: center;
gap: 24px;
border-bottom: 1px solid var(--hm-line);
background: #faf9f5;
position: relative;
z-index: 30;
}
.panel-back {
display: flex;
gap: 8px;
align-items: center;
min-width: 48px;
min-height: 48px;
}
.panel-brand {
display: flex;
align-items: center;
gap: 12px;
margin-right: auto;
font-weight: 650;
white-space: nowrap;
}
.panel-brand > .panel-icon {
width: 40px;
height: 40px;
padding: 8px;
border-radius: 12px;
background: var(--hm-green);
color: #fff;
}
.panel-brand small {
display: block;
font-weight: 400;
}
.panel-top-actions {
display: flex;
align-items: center;
gap: 16px;
}
.panel-top-actions > a,
.panel-menu > summary {
display: flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 8px;
}
.panel-menu {
position: relative;
}
.panel-menu > summary {
list-style: none;
}
.panel-menu > summary::-webkit-details-marker {
display: none;
}
.panel-menu > div {
position: absolute;
right: 0;
top: 56px;
width: 250px;
background: #fff;
border: 1px solid var(--hm-line);
padding: 8px;
border-radius: 16px;
box-shadow: 0 12px 32px #162c2824;
}
.panel-menu a,
.panel-menu button {
display: flex;
align-items: center;
min-height: 48px;
width: 100%;
padding: 8px 12px;
border: 0;
background: transparent;
font-size: 16px;
text-align: left;
}
.panel-menu a:hover,
.panel-menu button:hover {
background: var(--hm-soft);
}
.panel-main {
max-width: 1360px;
padding: 24px 32px;
margin: 0 auto;
}
.panel-heading,
.panel-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.panel-heading {
margin: 0 0 24px;
}
.panel-eyebrow {
font-size: 14px;
color: var(--hm-muted);
margin: 0 0 4px;
}
.panel-section-title {
margin: 18px 0 12px;
}
.panel-section-title h2 {
margin: 0;
}
.panel-section-title a {
display: flex;
align-items: center;
min-height: 48px;
color: var(--hm-green);
}
.panel-button,
.panel-context-actions > a,
.panel-context-actions > button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 10px 18px;
border: 1px solid var(--hm-line);
border-radius: 12px;
background: #fff;
color: var(--hm-green);
font-size: 16px;
line-height: 24px;
font-weight: 600;
}
.panel-button.primary,
.panel-body .button.primary {
background: var(--hm-green);
color: #fff;
border-color: var(--hm-green);
}
.panel-hero {
height: 144px;
border-radius: 24px;
overflow: hidden;
position: relative;
background: #d8dbd2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 32px;
margin-bottom: 8px;
isolation: isolate;
}
.panel-hero > img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
z-index: -2;
object-position: center 57%;
}
.panel-hero:after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, #142721c9, #14272160 65%, #14272120);
}
.panel-hero h1,
.panel-hero p {
color: #fff;
}
.panel-hero p {
margin: 0 0 2px;
font-size: 14px;
}
.panel-hero button {
background: #ffffffed;
border-color: #fff;
}
.panel-hero.without-photo {
background: #eee9df;
}
.panel-hero.without-photo:after {
background: none;
}
.panel-hero.without-photo h1,
.panel-hero.without-photo p {
color: var(--hm-text);
}
.panel-hero-symbol {
position: absolute;
right: 24%;
opacity: .12;
pointer-events: none;
}
.panel-hero-symbol .panel-icon {
width: 112px;
height: 112px;
}
.panel-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.panel-tile {
position: relative;
background: var(--hm-surface);
border: 1px solid var(--hm-line);
border-radius: 20px;
box-shadow: var(--hm-shadow);
overflow: hidden;
min-height: 128px;
transition:
transform 0.12s ease,
background 0.12s ease;
}
.panel-tile > a {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 6px;
padding: 16px 20px;
}
.panel-tile:active {
transform: scale(0.98);
}
.panel-tile:has(a:focus-visible) {
outline: 3px solid var(--hm-focus);
outline-offset: 3px;
}
.panel-tile strong {
font-size: 18px;
line-height: 22px;
font-weight: 600;
max-width: 100%;
overflow-wrap: anywhere;
}
.panel-tile-icon {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
color: var(--hm-green);
background: var(--hm-soft);
border-radius: 12px;
margin-bottom: 4px;
}
.panel-tile-power {
position: absolute;
right: 8px;
top: 8px;
}
.panel-tile-power .touch-control-console {
background: none;
border: 0;
box-shadow: none;
padding: 0;
}
.panel-tile-power ~ * {
pointer-events: none;
}
.panel-tile-power .touch-control-feedback,
.panel-tile-power .touch-action-grid {
display: none;
}
.panel-tile:has(.panel-tile-power) > a {
padding-right: 64px;
}
.panel-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-height: 56px;
margin-top: 4px;
}
.panel-pagination button {
border: 0;
background: transparent;
padding: 12px;
min-width: 48px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.panel-pagination button span {
display: block;
background: #a8b7ae;
width: 10px;
height: 10px;
border-radius: 8px;
}
.panel-pagination button[aria-current="true"] span {
background: var(--hm-green);
width: 24px;
}
.panel-pagination .page-arrow {
font-size: 28px;
color: var(--hm-green);
}
.panel-pagination button:disabled {
opacity: 0.35;
background: transparent;
}
.panel-favorites {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
margin-top: 8px;
}
.panel-favorite {
min-height: 88px;
padding: 12px;
border: 1px solid var(--hm-line);
background: #fff;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
text-align: center;
font-weight: 600;
font-size: 14px;
position: relative;
}
.panel-favorite .panel-icon {
color: var(--hm-green);
}
.panel-favorite.is-device {
padding-right: 54px;
align-items: flex-start;
text-align: left;
font-size: 14px;
line-height: 20px;
}
.panel-favorite.is-device > a {
min-height: 40px;
display: flex;
align-items: center;
}
.panel-favorite .touch-control-console {
position: absolute;
right: 4px;
top: 20px;
background: transparent;
padding: 0;
border: 0;
box-shadow: none;
}
.panel-favorite .touch-control-header {
margin: 0;
}
.panel-favorite .touch-power-button {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 12px;
}
.panel-favorite .touch-action-grid,
.panel-favorite .touch-control-feedback {
display: none;
}
.panel-state {
font-size: 14px;
font-weight: 400;
color: var(--hm-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.panel-state:before {
content: "";
width: 8px;
height: 8px;
flex: none;
border-radius: 50%;
background: #929b96;
}
.panel-state.is-on:before {
background: #176148;
}
.panel-state.is-on {
color: #176148;
}
.panel-state.is-unavailable {
color: #875000;
}
.panel-state.is-unavailable:before {
background: #875000;
}
.panel-tile.with-photo > a {
padding: 0 0 20px;
justify-content: flex-start;
gap: 8px;
}
.panel-tile.with-photo img {
width: 100%;
height: 150px;
object-fit: cover;
}
.panel-tile.with-photo strong,
.panel-tile.with-photo small {
margin: 0 20px;
}
.panel-tile.with-photo .panel-tile-icon {
margin: 0 20px 0;
margin-top: -28px;
border: 3px solid white;
position: relative;
width: 44px;
height: 44px;
}
.houses .panel-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.houses .panel-tile {
min-height: 290px;
}
.houses .panel-tile.with-photo img {
height: 190px;
}
.applications .panel-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.applications .panel-tile {
min-height: 186px;
}
.panel-context-actions {
display: flex;
justify-content: center;
gap: 16px;
margin: 20px 0;
flex-wrap: wrap;
}
.panel-empty {
border: 1px dashed var(--hm-line);
border-radius: 20px;
padding: 32px;
grid-column: 1/-1;
text-align: center;
background: #ffffff80;
color: var(--hm-muted);
}
.panel-empty p {
margin: 8px 0 16px;
}
.panel-empty h2 {
color: var(--hm-text);
}
.panel-form {
max-width: 850px;
background: #fff;
padding: 24px;
border: 1px solid var(--hm-line);
border-radius: 20px;
margin: 16px auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.panel-form fieldset {
border: 0;
padding: 0;
margin: 0;
}
.panel-form legend {
font-size: 22px;
font-weight: 600;
}
.panel-form .panel-button {
align-self: flex-start;
}
.panel-segmented {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.panel-segmented label {
position: relative;
}
.panel-segmented input {
position: absolute;
opacity: 0;
}
.panel-segmented span {
display: block;
border: 1px solid var(--hm-line);
padding: 12px 20px;
min-height: 48px;
border-radius: 12px;
cursor: pointer;
}
.panel-segmented input:checked + span {
background: var(--hm-green);
color: white;
}
.panel-segmented input:focus-visible + span {
outline: 3px solid var(--hm-focus);
outline-offset: 3px;
}
.panel-check {
min-height: 56px;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border: 1px solid var(--hm-line);
border-radius: 12px;
cursor: pointer;
}
.panel-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.panel-messages {
max-width: 1100px;
margin: auto;
padding: 0 24px;
}
.panel-messages .message {
padding: 10px 16px;
margin: 8px 0;
border-radius: 12px;
}
.panel-caption {
color: var(--hm-muted);
font-size: 14px;
line-height: 20px;
}
.panel-warning {
padding: 12px 16px;
border-radius: 12px;
background: #fff0d3;
color: #875000;
}
.panel-network,
.panel-demo {
padding: 8px 16px;
background: #fff0d3;
color: #875000;
text-align: center;
}
.panel-network {
position: fixed;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
border-radius: 12px;
box-shadow: var(--hm-shadow);
}
.panel-device-card {
background: #fff;
border: 1px solid var(--hm-line);
border-radius: 20px;
padding: 20px;
box-shadow: var(--hm-shadow);
overflow: hidden;
}
.panel-device-card > header {
gap: 12px;
}
.panel-device-card > header h2 {
font-size: 18px;
line-height: 24px;
margin: 0 0 4px;
}
.panel-device-metrics {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin: 8px 0;
}
.panel-device-metrics dt {
font-size: 14px;
color: var(--hm-muted);
}
.panel-device-metrics dd {
font-size: 26px;
margin: 0;
font-variant-numeric: tabular-nums;
}
.device-collection .panel-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel-device-detail {
max-width: 780px;
margin: auto;
}
.panel-body .touch-control-console {
background: transparent;
border: 0;
box-shadow: none;
}
.panel-body .touch-power-button[aria-checked="true"] {
background: var(--hm-green);
border-color: var(--hm-green);
color: #fff;
}
.panel-body .touch-power-button,
.panel-body .touch-action-button,
.panel-body .touch-mode-button,
.panel-body .touch-white-button,
.panel-body .touch-step-button {
min-width: 48px;
min-height: 48px;
border-radius: 12px;
border-color: var(--hm-line);
}
.panel-body .touch-power-button {
width: 56px;
height: 56px;
}
.panel-body input[type="range"] {
accent-color: var(--hm-green);
padding: 0;
}
.panel-body .touch-dial-readout {
color: var(--hm-text);
background: var(--hm-soft);
}
.panel-body .touch-mode-button[aria-pressed="true"] {
background: var(--hm-soft);
color: var(--hm-green);
border-color: var(--hm-green);
}
.panel-body .touch-control-feedback {
min-height: 0;
margin: 4px 0 0;
}
.panel-body .touch-control-feedback:empty {
display: none;
}
.panel-body [aria-busy="true"] .touch-power-button {
animation: hm-pending 0.8s ease-in-out infinite;
}
.panel-body .inventory-card,
.panel-body .climate-device-card,
.panel-body .media-device-card,
.panel-body .appliance-device-card {
box-shadow: var(--hm-shadow);
border-color: var(--hm-line);
border-radius: 20px;
}
.panel-body .module-icon {
color: var(--hm-green);
background: var(--hm-soft);
}
.panel-body .compact-device-state.is-on {
color: var(--hm-green);
}

.panel-body .control-page-icon {
min-width: 48px;
min-height: 48px;
color: var(--hm-green);
}
.panel-body .control-page-header h1 {
font-size: 24px;
}
.panel-body .media-device-grid:has(> .media-device-card:only-child) {
grid-template-columns: 1fr;
max-width: 1100px;
margin: auto;
}
.panel-body .spotify-library {
max-height: 250px;
}
.panel-body .spotify-collection-row,
.panel-body .spotify-track-row {
min-height: 48px;
}
.panel-body .device-control-locked {
color: var(--hm-muted);
}
.panel-tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.panel-tabs > a {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 10px 24px;
border: 1px solid var(--hm-line);
border-radius: 12px;
}
.panel-tabs > a[aria-current="page"] {
background: var(--hm-green);
color: #fff;
border-color: var(--hm-green);
}
.panel-range {
color: var(--hm-muted);
font-size: 14px;
margin: -8px 0 16px;
}
.panel-range > span {
margin-left: 12px;
}
.panel-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.panel-kpis > article {
background: #fff;
border: 1px solid var(--hm-line);
border-radius: 20px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 132px;
}
.panel-kpis > article > span {
font-size: 14px;
color: var(--hm-muted);
}
.panel-kpis strong {
font-size: 30px;
line-height: 40px;
font-variant-numeric: tabular-nums;
}
.panel-kpis strong small {
font-size: 16px;
font-weight: 400;
}
.panel-chart {
margin: 0;
background: white;
border: 1px solid var(--hm-line);
border-radius: 20px;
padding: 16px 24px;
}
.panel-chart figcaption {
font-size: 18px;
font-weight: 600;
}
.panel-chart > svg {
display: block;
width: 100%;
height: 245px;
}
.panel-chart text {
font-size: 12px;
fill: var(--hm-muted);
}
.panel-chart path.chart-meter {
stroke: var(--hm-green);
}
.panel-chart path.chart-measured {
stroke: #215c8f;
stroke-dasharray: 8 4;
}
.panel-chart path.chart-estimated {
stroke: #875000;
stroke-dasharray: 3 4;
}
.panel-chart path.chart-device-0 {
stroke: #584381;
}
.panel-chart path.chart-device-1 {
stroke: #a82d34;
}
.panel-chart path.chart-device-2 {
stroke: #215c8f;
}
.panel-legend {
display: flex;
gap: 24px;
justify-content: center;
font-size: 14px;
color: var(--hm-muted);
}
.panel-energy-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 120px 120px;
gap: 24px;
align-items: center;
background: white;
border: 1px solid var(--hm-line);
border-radius: 12px;
min-height: 64px;
padding: 12px 20px;
margin: 8px 0;
font-variant-numeric: tabular-nums;
}
.panel-energy-row small {
display: block;
}
.panel-house-energy {
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.panel-period {
position: relative;
max-width: 420px;
}
.panel-period > summary {
display: flex;
align-items: center;
list-style: none;
min-height: 48px;
padding: 8px 16px;
border: 1px solid var(--hm-line);
border-radius: 12px;
background: white;
color: var(--hm-green);
}
.panel-period-form {
position: absolute;
z-index: 25;
right: 0;
top: 56px;
background: #fff;
box-shadow: 0 12px 32px #162c2824;
border: 1px solid var(--hm-line);
padding: 20px;
border-radius: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 560px;
max-height: 70dvh;
overflow: auto;
}
.panel-period-form label {
display: flex;
flex-direction: column;
gap: 4px;
}
.panel-period-form select[multiple] {
height: 110px;
}
.panel-body .form-stack {
gap: 16px;
}
.panel-body .form-stack label {
gap: 8px;
}
.panel-body .form-stack input:not([type="checkbox"]) {
min-height: 56px;
}
.panel-body .form-error,
.panel-body .field-error {
color: #a82d34;
}
.panel-body .login-shell {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100dvh;
max-width: none;
padding: 0;
gap: 0;
}
.panel-body .login-card {
background: #fff;
border: 0;
box-shadow: none;
border-radius: 0;
display: flex;
justify-content: center;
flex-direction: column;
padding: 40px clamp(24px, 6vw, 100px);
max-width: none;
width: 100%;
}
.panel-body .login-card .brand {
margin-bottom: 20px;
}
.panel-body .brand-mark {
background: var(--hm-green);
color: white;
}
.panel-body .brand-copy strong {
font-family: inherit;
font-size: 18px;
color: var(--hm-text);
}
.panel-body .login-card h1 {
margin: 0 0 24px;
}
.panel-body .login-card .eyebrow,
.panel-body .brand-copy small,
.panel-body .login-byline {
display: none;
}
.panel-body .login-visual {
border-radius: 0;
background: url("../panel/photos/dormitorio.436ab099614e.png") center/cover;
}
.panel-body .login-visual > * {
display: none;
}
.panel-body .login-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.panel-body .check-option {
min-height: 48px;
display: flex;
align-items: center;
gap: 8px;
}
.panel-body .login-recovery {
min-height: 48px;
display: flex;
align-items: center;
color: var(--hm-green);
}
.panel-body .panel-wizard-page {
border: 0;
padding: 0;
margin: 0;
}
.panel-wizard-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
}
.panel-wizard-progress {
color: var(--hm-muted);
font-size: 14px;
margin: 0 0 16px;
}
.panel-wizard-summary {
display: grid;
gap: 12px;
}
.panel-wizard-summary dt {
color: var(--hm-muted);
font-size: 14px;
}
.panel-wizard-summary dd {
margin: 0;
font-weight: 600;
}
.panel-program-tile {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
}
.panel-program-tile h2 {
font-size: 18px;
}
.panel-program-tile footer {
display: flex;
gap: 8px;
margin-top: auto;
}
.panel-program-tile footer a,
.panel-program-tile footer button {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.panel-error {
max-width: 600px;
margin: 60px auto;
text-align: center;
}
.panel-body .table-scroll {
max-width: 100%;
overflow: auto;
}
.panel-body .footer {
display: none;
}
.panel-form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 16px 0;
}
.panel-form-field > label {
font-weight: 600;
}
.panel-form-field [id$="weekdays"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.panel-form-field [id$="weekdays"] label {
min-height: 48px;
display: flex;
align-items: center;
gap: 8px;
}
.panel-permission-row {
display: grid;
grid-template-columns: minmax(130px, 1fr) 2fr;
gap: 16px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--hm-line);
}
.panel-demo {
position: fixed;
bottom: 4px;
right: 8px;
z-index: 80;
font-size: 12px;
line-height: 18px;
padding: 2px 8px;
border-radius: 6px;
pointer-events: none;
}
.panel-section-title {
margin-top: 8px;
margin-bottom: 8px;
}
.panel-favorite .panel-state {
font-size: 12px;
white-space: nowrap;
}
.panel-body .panel-main:has(> .panel-hero) {
padding-top: 16px;
}
@keyframes hm-pending {
  50% {
    opacity: 0.58;
    transform: scale(0.95);
  }
}
.panel-device-card {
position: relative;
}
.panel-device-card > header {
padding-right: 56px;
min-height: 56px;
}
.panel-device-card.is-module-lighting .panel-device-metrics {
display: none;
}
.panel-device-card .touch-control-header {
top: 16px;
right: 16px;
}
.panel-favorite .touch-control-header,
.panel-tile-power .touch-control-header {
position: static;
}
.panel-body .touch-power-form {
width: 56px;
}
.panel-favorite .touch-power-form {
width: 48px;
}
.panel-body .touch-adjustment-heading label,
.panel-body .touch-select-label {
font-size: 14px;
font-weight: 500;
}
.panel-body .touch-adjustment-heading strong {
font-family: inherit;
font-weight: 600;
}
.panel-body .touch-dial-readout {
width: 72px;
height: 72px;
}
.panel-body .touch-dial-control {
grid-template-columns: 48px 72px 48px;
}
.panel-body .panel-main .page-header {
margin-bottom: 12px;
}
.panel-brand,
.panel-favorite.is-device > a {
min-height: 48px;
}
.panel-top-actions > a,
.panel-menu > summary {
min-width: 48px;
}
.panel-back {
flex-shrink: 0;
}
.panel-form-field:has(input[type="checkbox"]) {
flex-direction: row;
}

.panel-wizard-summary {
font-size: 14px;
line-height: 20px;
max-height: 180px;
overflow: auto;
grid-template-columns: 1fr 1fr;
margin: 8px 0;
}
.panel-wizard-summary dt,
.panel-wizard-summary dd {
margin: 0;
}
.panel-chart circle.chart-meter {
fill: var(--hm-green);
}
.panel-chart circle.chart-measured {
fill: #215c8f;
}
.panel-chart circle.chart-estimated {
fill: #875000;
}
.panel-period:not(.panel-heading .panel-period) {
margin-bottom: 12px;
}
.panel-program-tile footer form {
display: flex;
}
.panel-body .de-equipment-list [data-page-item] {
min-width: 0;
}
html[data-effective-mode="tablet"] .panel-main {
max-width: 1280px;
}
html[data-effective-mode="desktop"] .panel-main {
padding-top: 32px;
}
html[data-effective-mode="tablet"] .panel-main:has(> .panel-hero) {
padding-top: 16px;
}
@container panel (max-width: 1100px) {
  .panel-topbar {
    padding: 0 24px;
    gap: 16px;
  }
  .panel-main {
    padding: 16px 24px;
  }
  .panel-grid {
    gap: 12px;
  }
  .panel-tile > a {
    padding: 12px 16px;
  }
  .panel-favorites {
    gap: 8px;
  }
  .panel-favorite {
    padding: 8px;
  }
  .panel-favorite.is-device {
    padding-right: 48px;
  }
  .panel-kpis {
    gap: 12px;
  }
  .panel-kpis > article {
    padding: 16px;
  }
  .panel-kpis strong {
    font-size: 26px;
  }
  .panel-heading {
    margin-bottom: 16px;
  }
}
@media (max-height: 670px) and (min-width: 700px) {
  .panel-topbar {
    height: 64px;
  }
  .panel-main {
    padding-top: 12px;
  }
  .panel-hero {
    height: 100px;
    padding: 16px 24px;
  }
  .panel-section-title {
    margin: 8px 0;
  }
  .panel-tile {
    min-height: 132px;
  }
  .panel-favorite {
    min-height: 76px;
  }
  .panel-heading {
    margin-bottom: 12px;
  }
  .panel-kpis > article {
    min-height: 108px;
    padding: 12px;
  }
  .panel-chart > svg {
    height: 175px;
  }
  .panel-chart {
    padding: 12px 20px;
  }
  .panel-period-form {
    max-height: 65dvh;
  }
  .panel-collection.houses .panel-tile.with-photo img {
    height: 150px;
  }
}
@container panel (max-width: 699px) {
  .panel-topbar {
    height: 64px;
    padding: 0 12px;
    gap: 8px;
  }
  .panel-topbar .panel-back span,
  .panel-top-actions > a > span,
  .panel-menu > summary > span {
    display: none;
  }
  .panel-brand {
    font-size: 16px;
    gap: 8px;
  }
  .panel-brand small {
    font-size: 12px;
  }
  .panel-brand > .panel-icon {
    display: none;
  }
  .panel-top-actions {
    gap: 8px;
  }
  .panel-top-actions > a,
  .panel-menu > summary {
    padding: 8px;
  }
  .panel-main {
    padding: 16px;
  }
  .panel-heading {
    flex-wrap: wrap;
  }
  .panel-body h1 {
    font-size: 24px;
    line-height: 30px;
  }
  .panel-hero {
    height: 118px;
    padding: 16px;
  }
  .panel-hero h1 {
    font-size: 24px;
  }
  .panel-hero button {
    font-size: 14px;
    padding: 8px 12px;
  }
  .panel-grid,
  .houses .panel-grid,
  .applications .panel-grid,
  .device-collection .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .panel-tile {
    min-height: 145px;
  }
  .panel-tile strong {
    font-size: 17px;
  }
  .panel-tile > a {
    padding: 12px;
  }
  .panel-tile.with-photo img,
  .houses .panel-tile.with-photo img {
    height: 100px;
  }
  .houses .panel-tile {
    min-height: 225px;
  }
  .panel-favorites {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .panel-favorite {
    min-height: 84px;
  }
  .panel-favorite.is-device {
    font-size: 12px;
    padding-right: 45px;
  }
  .panel-favorite .panel-state {
    font-size: 12px;
  }
  .panel-favorite .touch-power-button {
    min-width: 40px;
    width: 40px;
  }
  .panel-body .panel-favorite .touch-power-button {
    min-width: 48px;
    width: 48px;
  }
  .panel-favorite.is-device {
    padding-right: 48px;
  }
  .panel-favorite .touch-control-console {
    right: 0;
  }
  .panel-favorite.is-device > a {
    overflow-wrap: anywhere;
  }
  .panel-context-actions {
    gap: 8px;
  }
  .panel-context-actions > a,
  .panel-context-actions > button {
    width: 100%;
  }
  .panel-form {
    padding: 20px;
  }
  .panel-choice-grid {
    grid-template-columns: 1fr;
  }
  .panel-device-card {
    padding: 16px;
  }
  .device-collection .panel-grid {
    grid-template-columns: 1fr;
  }
  .panel-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .panel-kpis > article {
    padding: 12px;
    min-height: 118px;
  }
  .panel-kpis strong {
    font-size: 25px;
  }
  .panel-kpis strong small {
    font-size: 14px;
  }
  .panel-tabs {
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .panel-tabs > a {
    padding: 8px 12px;
  }
  .panel-range > span {
    display: block;
    margin: 0;
  }
  .panel-chart {
    padding: 12px;
  }
  .panel-chart > svg {
    height: 180px;
  }
  .panel-legend {
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
  }
  .panel-period {
    max-width: 100%;
    width: 100%;
  }
  .panel-period-form {
    position: relative;
    top: 8px;
    max-width: 100%;
    grid-template-columns: 1fr;
    max-height: none;
    box-shadow: none;
  }
  .panel-energy-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px;
  }
  .panel-energy-row > div {
    grid-column: 1/-1;
  }
  .panel-body .login-shell {
    grid-template-columns: 1fr;
  }
  .panel-body .login-visual {
    display: none;
  }
  .panel-body .login-card {
    padding: 24px;
    justify-content: center;
  }
  .panel-wizard-summary {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel-body * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html[data-reduced-motion] .panel-body * {
animation: none !important;
transition: none !important;
}
html[data-effective-mode="tablet"] .panel-grid > * {
min-width: 0;
}
.panel-favorite-option {
display: grid;
grid-template-columns: minmax(0, 1fr) 48px 48px;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--panel-line, #d6ddd6);
}
.panel-favorite-option .panel-button {
min-width: 48px;
padding: 8px;
}
.panel-program-notice,
.panel-scene-result {
font-size: 14px;
}
.panel-program-notice summary,
.panel-scene-result summary {
min-height: 48px;
display: flex;
align-items: center;
cursor: pointer;
}
.panel-favorite-palette > summary {
min-height: 48px;
display: flex;
align-items: center;
font-weight: 600;
cursor: pointer;
}
.panel-palette-popover {
position: fixed;
z-index: 80;
width: min(340px, calc(100vw - 24px));
max-height: calc(100dvh - 24px);
overflow: auto;
padding: 16px;
background: #fff;
border: 1px solid #d6ddd6;
border-radius: 20px;
box-shadow: 0 16px 48px #162c2840;
}
.panel-favorite .panel-palette-popover .touch-adjustment-list {
display: grid;
}
.panel-favorite .panel-palette-popover .touch-control-console {
position: static;
}
.panel-favorite .panel-palette-popover .touch-control-feedback:not(:empty) {
display: block;
}
.panel-main > details.panel-form:not([open]) {
padding: 12px 24px;
}
.panel-forecast-note {
background: #fff;
border: 1px solid var(--hm-line);
border-radius: 20px;
padding: 16px 20px;
}
.panel-forecast-note h2 {
margin: 0;
}
.panel-forecast-note p {
margin: 8px 0;
}
.panel-forecast-note summary {
min-height: 48px;
display: flex;
align-items: center;
cursor: pointer;
}
.panel-forecast-note .panel-button {
margin-top: 8px;
}
.panel-chart .panel-empty {
padding: 20px;
min-height: 0;
}
@container panel (max-width: 699px) {
  .panel-forecast-note {
    padding: 12px 20px;
  }
}
@media (max-height: 670px) and (min-width: 700px) {
  html[data-effective-mode] .panel-main {
    padding-top: 12px;
  }
}
@container panel (max-width: 699px) {
  .panel-hero {
    height: 104px;
  }
  .panel-tile {
    min-height: 140px;
  }
  .panel-favorite .panel-state {
    white-space: normal;
    font-size: 12px;
  }
  .panel-favorite.is-device {
    padding-right: 8px;
  }
  .panel-favorite.is-device:has(.touch-power-button) {
    padding-right: 48px;
  }
  .panel-demo {
    max-width: 245px;
    font-size: 11px;
  }
}


/* Source: css/panel-fidelity.css */
/* Completion of the approved tablet components. No accounting selectors. */
[data-connection-locked] { opacity: .45; pointer-events: none; }
.panel-network { max-width: calc(100vw - 32px); font-size: 16px; }
@container panel (max-width: 699px) {
  .applications .panel-tile strong { font-size: 16px; }
}
:root {
--hm-light: #9c6009;
--hm-light-soft: #fff3d7;
--hm-heat: #b44529;
--hm-heat-soft: #fdebe2;
--hm-media: #584381;
--hm-media-soft: #f0eaf8;
--hm-danger: #a82d34;
}
.panel-confirm-dialog {
width: min(520px, calc(100vw - 32px));
max-height: calc(100dvh - 48px);
padding: 24px;
border: 1px solid var(--hm-line);
border-radius: 20px;
background: var(--hm-surface);
color: var(--hm-text);
}
.panel-action-notice {
position: fixed;
z-index: 90;
bottom: 16px;
right: 16px;
display: flex;
align-items: center;
gap: 16px;
width: min(560px, calc(100vw - 32px));
padding: 16px;
color: var(--hm-danger);
background: var(--hm-surface);
border: 1px solid var(--hm-danger);
border-radius: 16px;
box-shadow: var(--hm-shadow);
}
.panel-action-notice p {
flex: 1;
margin: 0;
font-size: 16px;
line-height: 24px;
}
.panel-state.is-alarm {
color: var(--hm-danger);
font-weight: 700;
}
.panel-confirm-dialog::backdrop {
background: rgb(19 37 31 / 45%);
}
.panel-confirm-dialog h2 {
margin: 0 0 16px;
font-size: 24px;
}
.panel-confirm-dialog p {
font-size: 16px;
line-height: 1.5;
}
.panel-confirm-dialog .panel-row-actions {
justify-content: flex-end;
margin-top: 24px;
}
.panel-body .touch-adjustment-heading strong output {
font-size: 22px;
}
.panel-body .touch-adjustment-heading strong span,
.panel-body .touch-dial-readout span {
font-size: 14px;
}
.panel-body .touch-dial-readout output {
font-size: 26px;
}
.panel-body .touch-control-feedback {
font-size: 14px;
line-height: 20px;
}
.panel-preferences-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 20px;
align-items: start;
}
.panel-field-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.panel-list-toolbar,
.panel-row-actions {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.panel-list-toolbar {
margin: 12px 0;
}
.panel-rule-list {
display: grid;
gap: 12px;
}
.panel-rule-row {
display: flex;
align-items: center;
gap: 16px;
background: var(--hm-surface, #fff);
border: 1px solid var(--border, #d9dfd6);
border-radius: 20px;
padding: 16px 20px;
}
.panel-rule-row > div:first-of-type {
flex: 1;
min-width: 0;
}
.panel-rule-row h2 {
font-size: 18px;
margin: 0 0 6px;
}
.panel-rule-row p,
.panel-rule-row small {
font-size: 14px;
margin: 4px 0;
display: block;
}
.panel-effect-summary {
padding: 16px;
background: #eef3ea;
border-radius: 16px;
}
.panel-effect-summary h2 {
font-size: 18px;
}
.panel-energy-ranking {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.panel-energy-heading {
flex-wrap: wrap;
}
.panel-energy-heading h1 {
flex: 1;
}
.panel-energy-menu > nav {
position: absolute;
top: 48px;
right: 0;
z-index: 20;
width: 280px;
padding: 16px;
margin: 0;
background: var(--hm-surface);
border: 1px solid var(--hm-line);
border-radius: 16px;
box-shadow: var(--hm-shadow);
}
.panel-energy-menu > nav > a {
width: 100%;
}
.panel-body .panel-energy-ranking .panel-rank-row {
padding: 12px 16px;
gap: 8px;
}
.panel-rank-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 20px;
padding: 18px 22px;
border: 1px solid #d9dfd6;
border-radius: 20px;
background: #fff;
}
.panel-rank-label a,
.panel-rank-label strong {
font-size: 18px;
font-weight: 650;
min-height: 48px;
display: flex;
align-items: center;
}
.panel-rank-label small,
.panel-rank-values span {
display: block;
font-size: 14px;
}
.panel-rank-values {
text-align: right;
align-self: center;
}
.panel-rank-values strong {
font-size: 22px;
}
.panel-rank-track {
grid-column: 1/-1;
height: 8px;
background: #edf0e9;
border-radius: 8px;
overflow: hidden;
}
.panel-rank-track span {
display: block;
height: 100%;
background: #5c7855;
border-radius: 8px;
}
.is-remainder .panel-rank-track span {
background: #9b927c;
}
.panel-chart-touch {
display: flex;
align-items: center;
gap: 12px;
}
.panel-body .panel-chart > svg {
height: clamp(160px, calc(100dvh - 540px), 245px);
}
.panel-body .panel-chart text {
font-size: 18px;
}
.panel-chart-footer {
display: flex;
align-items: center;
gap: 16px;
margin-top: 12px;
}
.panel-chart-footer p {
flex: 1;
margin: 0;
}
@media (max-height: 670px) and (min-width: 700px) {
  .panel-body .panel-chart text {
    font-size: 24px;
  }
}
.panel-chart-touch label {
flex: 1;
font-size: 14px;
}
.panel-chart-touch input {
display: block;
width: 100%;
min-height: 48px;
accent-color: #526a47;
}
.panel-chart-reading {
display: block;
min-height: 48px;
font-size: 14px;
padding: 8px 0;
}
.panel-chart-touch button {
min-width: 48px;
}
.panel-chart .chart-device-0 {
stroke: #556d45;
fill: none;
}
.panel-chart circle.chart-device-0 {
fill: #556d45;
}
.panel-technical-menu {
position: relative;
}
.panel-technical-menu summary {
min-height: 48px;
cursor: pointer;
padding: 12px;
}
@container panel (max-width: 800px) {
  .panel-preferences-grid {
    grid-template-columns: 1fr;
  }
  .panel-field-pair {
    grid-template-columns: 1fr;
  }
  .panel-rule-row {
    flex-wrap: wrap;
  }
  .panel-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .panel-rank-row {
    padding: 12px;
    gap: 8px;
  }
  .panel-rank-values strong {
    font-size: 18px;
  }
}
.panel-body .panel-tile-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 16px;
}
.panel-body .panel-tile-icon .panel-icon {
width: 42px;
height: 42px;
}

.applications .panel-tile > a {
min-height: 182px;
gap: 12px;
}
.is-module-lighting .panel-tile-icon {
color: var(--hm-light);
background: var(--hm-light-soft);
}
.is-module-climate .panel-tile-icon {
color: var(--hm-heat);
background: var(--hm-heat-soft);
}
.is-module-media .panel-tile-icon {
color: var(--hm-media);
background: var(--hm-media-soft);
}
.panel-module-heading {
flex-wrap: wrap;
gap: 16px;
}
.panel-module-heading > div {
display: flex;
align-items: center;
gap: 16px;
}
.panel-module-heading .panel-tile-icon {
margin: 0;
}
.panel-room-filter {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
max-width: 100%;
}
.panel-room-filter select {
min-height: 48px;
max-width: 240px;
border: 1px solid var(--hm-line);
border-radius: 12px;
background: var(--hm-surface);
padding: 8px 12px;
font: inherit;
}
.panel-equipment-summary {
position: relative;
min-width: 0;
min-height: 184px;
padding: 16px;
background: var(--hm-surface);
border: 1px solid var(--hm-line);
border-radius: 20px;
box-shadow: var(--hm-shadow);
}
.panel-equipment-open {
display: grid;
gap: 10px;
min-height: 118px;
margin: -4px -4px 8px;
padding: 4px;
}
.panel-equipment-open > div {
min-width: 0;
}
.panel-grid > .panel-equipment-summary:has(.panel-summary-temperature) {
grid-column: span 2;
}
.panel-body .panel-equipment-open h2 {
font-size: 18px;
line-height: 24px;
margin: 0;
overflow-wrap: anywhere;
}
.panel-equipment-room {
display: block;
color: var(--hm-muted);
font-size: 14px;
line-height: 20px;
margin: 4px 0;
}
.panel-equipment-summary:has(.panel-summary-power)
  .panel-equipment-open
  .panel-tile-icon {
margin-right: 64px;
}
.panel-summary-power {
position: absolute;
right: 8px;
top: 8px;
}
.panel-summary-power .touch-control-header {
margin: 0;
}
.panel-summary-power .touch-control-console {
margin: 0;
padding: 0;
}
.panel-summary-metrics {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 12px 0 0;
}
.panel-summary-metrics > div {
min-width: 0;
}
.panel-summary-metrics dt {
font-size: 14px;
line-height: 20px;
color: var(--hm-muted);
}
.panel-summary-metrics dd {
font-size: 18px;
line-height: 24px;
font-weight: 600;
margin: 0;
overflow-wrap: anywhere;
}
.panel-protected-label {
display: block;
margin-top: 12px;
font-size: 14px;
color: var(--hm-muted);
}
.panel-body .panel-device-detail {
max-width: 1000px;
}
.panel-body .device-energy {
--de-blue: var(--hm-green);
--de-ink: var(--hm-text);
--de-muted: var(--hm-muted);
--de-line: var(--hm-line);
}
.panel-device-card > header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.panel-device-card > header > div:not(.panel-detail-power) {
flex: 1;
min-width: 0;
}
.panel-detail-power {
margin-left: auto;
}
.panel-body .panel-device-card h1 {
font-size: 26px;
line-height: 32px;
}
.panel-body .panel-device-card .touch-control-console {
margin: 0;
}
.panel-device-card .touch-color-wheel {
width: 224px;
height: 224px;
}
.panel-device-card .touch-color-wheel-handle {
width: 28px;
height: 28px;
}
.panel-device-card .touch-adjustment-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 16px;
}
.panel-device-card .is-color {
grid-row: span 2;
}
@container panel (min-width: 700px) {
  .panel-device-card [data-light-modes] .touch-adjustment.is-slider {
    grid-column: 2;
  }
  .panel-device-card [data-light-modes] .is-color {
    grid-column: 1;
    grid-row: 1/3;
  }
  .panel-device-card [data-light-modes] .is-quick-white {
    grid-column: 1;
    grid-row: 1/3;
  }
}
.panel-body:has(.panel-favorites) .panel-main {
padding-bottom: 8px;
}
.panel-device-card .is-icon-modes {
grid-column: 1/-1;
}
.panel-control-tabs {
display: flex;
gap: 8px;
margin: 12px 0;
}
.panel-control-tabs button[aria-pressed="true"] {
background: var(--hm-green);
color: white;
}
.panel-body .touch-mode-button,
.panel-body .touch-white-button {
width: auto;
min-width: 64px;
min-height: 64px;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.panel-body .touch-choice-label {
font-size: 14px;
line-height: 20px;
}
.panel-body .touch-mode-buttons {
grid-template-columns: repeat(4, max-content);
gap: 8px;
}
.panel-body .touch-select,
.panel-body .touch-adjustment-heading label,
.panel-body .touch-adjustment-heading strong {
font-size: 16px;
}
.panel-body .touch-action-button {
color: var(--hm-green);
background: var(--hm-soft);
font-size: 14px;
}
.panel-secondary-controls {
margin-top: 16px;
border-top: 1px solid var(--hm-line);
}
.panel-secondary-controls summary {
cursor: pointer;
min-height: 48px;
padding: 12px 0;
font-weight: 600;
}
.panel-secondary-controls p {
font-size: 16px;
line-height: 24px;
}
.panel-secondary-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.panel-secondary-metrics dt {
color: var(--hm-muted);
font-size: 14px;
}
.panel-secondary-metrics dd {
font-size: 18px;
margin: 4px 0;
}
.panel-critical {
color: var(--hm-danger);
}
.panel-detail-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.panel-appliance-alerts p {
margin: 8px 0;
background: var(--hm-light-soft);
color: var(--hm-light);
padding: 12px;
border-radius: 12px;
}
.panel-summary-temperature .touch-adjustment-list {
margin-top: 12px;
}
.panel-summary-temperature .touch-dial-control {
gap: 8px;
}
.panel-summary-temperature .touch-dial-readout {
width: 76px;
height: 76px;
}
.panel-summary-temperature .touch-dial-range {
display: none;
}
.panel-body .appliance-readings dt {
font-size: 14px;
line-height: 20px;
}
.panel-body .appliance-readings dd {
font-size: 18px;
line-height: 24px;
white-space: normal;
}
.panel-body .appliance-alerts span {
font-size: 14px;
line-height: 20px;
}
.panel-body .compact-device-state,
.panel-body .compact-device-note,
.panel-body .appliance-readonly-note {
font-size: 14px;
line-height: 20px;
}
.panel-body .compact-device-title h2 {
font-size: 20px;
line-height: 26px;
}
.panel-body .compact-device-title h1 {
font-size: 26px;
line-height: 32px;
margin: 0;
}
.panel-scene-step {
padding: 16px 0;
border-bottom: 1px solid var(--hm-line);
}
.panel-scene-step h2 {
font-size: 18px;
margin: 0 0 12px;
}
.panel-form-field:has(input[type="checkbox"]) {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
min-height: 48px;
}
.panel-body [data-wizard] > [data-wizard-progress] {
margin: 0;
font-size: 14px;
}
.panel-body [data-wizard] .panel-form-field {
margin: 8px 0;
}
.panel-body [data-wizard] .panel-field-pair {
row-gap: 0;
}
.panel-body [data-wizard] .panel-wizard-actions {
margin-top: 8px;
}
.panel-form-field:has(input[type="checkbox"]) > label {
cursor: pointer;
min-height: 48px;
display: flex;
align-items: center;
}
.panel-form-field [role="group"] label,
.panel-form-field div[id] label {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
}
.panel-form-field [id$="_weekdays"] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
@container panel (max-width: 699px) {
  .panel-chart-footer {
    flex-wrap: wrap;
  }
  .panel-energy-ranking {
    grid-template-columns: 1fr;
  }
  .panel-form-field [id$="_weekdays"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
.panel-body .control-page-header {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.panel-body .media-device-grid:has(> article:only-child) {
grid-template-columns: minmax(0, 1fr);
max-width: 1100px;
margin: auto;
}
.panel-body .media-device-card {
padding: 20px;
border-radius: 20px;
border-color: var(--hm-line);
}
.panel-body .media-device-card .compact-device-header {
grid-template-columns: 56px minmax(0, 1fr) 48px;
gap: 16px;
min-height: 64px;
margin-bottom: 16px;
}
.panel-body .media-shell {
padding-bottom: 8px;
}
.panel-body .denon-source-select,
.panel-body .spotify-library-tabs {
background: var(--hm-soft);
}
.panel-body .denon-source-panel {
background: var(--hm-canvas);
border-color: var(--hm-line);
}
.panel-body .panel-pagination .page-arrow {
line-height: 24px;
}
.panel-legend > span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.panel-legend > span::before {
content: "";
width: 24px;
border-top: 3px solid var(--hm-green);
}
.panel-legend > .legend-measured::before {
border-color: #215c8f;
border-top-style: dashed;
}
.panel-legend > .legend-estimated::before {
border-color: #875000;
border-top-style: dotted;
}
.panel-legend > .legend-device-0::before {
border-color: var(--hm-media);
}
.panel-legend > .legend-device-1::before {
border-color: var(--hm-danger);
}
.panel-legend > .legend-device-2::before {
border-color: #215c8f;
}
.panel-body .denon-volume output {
font-size: 24px;
min-width: 56px;
}
.panel-body .denon-volume {
grid-template-columns: 24px minmax(44px, 1fr) 64px;
}
.panel-body .spotify-mini-header > span:first-child {
font-size: 14px;
line-height: 20px;
}
.panel-body .denon-source-panel .panel-pagination {
margin-bottom: 0;
}
.panel-body .denon-source-select label,
.panel-body .denon-source-select select,
.panel-body .webos-source label,
.panel-body .webos-source select {
font-size: 16px;
}
.panel-body .webos-volume {
grid-template-columns: 24px minmax(70px, 1fr) 56px 16px;
}
.panel-body .webos-volume output {
font-size: 24px;
}
.panel-body .webos-volume > span {
font-size: 14px;
}
.panel-body .panel-list-toolbar {
flex-wrap: wrap;
}
.panel-body .panel-inline-filter {
flex-wrap: wrap;
}
.panel-body .denon-mute button {
font-size: 14px;
}
.panel-body .media-now-playing-title {
font-size: 20px;
line-height: 26px;
}
.panel-body .media-now-playing-copy strong {
font-size: 20px;
line-height: 26px;
white-space: normal;
}
.panel-body .media-now-playing-copy small,
.panel-body .media-now-playing-copy p,
.panel-body .media-now-playing-copy span,
.panel-body .media-seek output {
font-size: 14px;
line-height: 20px;
}
.panel-body .spotify-mini-header,
.panel-body .spotify-card-message,
.panel-body .spotify-connect-status,
.panel-body .spotify-compact-empty,
.panel-body .spotify-inline-setup {
font-size: 14px;
line-height: 20px;
}
.panel-body .spotify-library-tabs button,
.panel-body .spotify-search-form input {
font-size: 16px;
}
.panel-body .spotify-item-copy strong {
font-size: 16px;
line-height: 22px;
white-space: normal;
}
.panel-body .spotify-item-copy small {
font-size: 14px;
line-height: 20px;
}
.panel-body .spotify-item-kind {
display: none;
}
.panel-body .spotify-item-grid {
gap: 8px;
}
.panel-body .spotify-item-grid > form > button {
min-height: 80px;
}

@container panel (min-width: 900px) {
  .media-device-grid:has(> article:only-child) .denon-source-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px;
    align-items: start;
  }
  .media-device-grid:has(> article:only-child) .media-now-playing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 16px;
    min-height: 260px;
  }
  .media-device-grid:has(> article:only-child) .media-now-playing-art {
    width: 96px;
    height: 96px;
    margin: 0 auto;
  }
  .media-device-grid:has(> article:only-child) .media-now-playing-art img {
    width: 96px;
    height: 96px;
  }
}
@media (min-width: 900px) and (max-height: 669px) {
  .panel-body .panel-main:has(> .panel-device-detail) {
    padding-bottom: 8px;
  }
  .panel-body .panel-device-card.is-module-climate {
    padding: 12px;
  }
  .panel-device-card.is-module-climate .touch-adjustment-list {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  }
  .panel-device-card.is-module-climate .is-icon-modes {
    grid-column: auto;
  }
  .panel-device-card.is-module-climate .touch-mode-buttons {
    grid-template-columns: repeat(2, minmax(64px, 1fr));
  }
  .panel-body .media-shell {
    padding-bottom: 4px;
  }
  .panel-body .control-page-header {
    height: 48px;
    margin-bottom: 8px;
  }
  .panel-body .control-page-icon {
    height: 48px;
  }
  .panel-body .media-device-card {
    padding: 12px;
  }
  .panel-body .media-device-card .compact-device-header {
    min-height: 48px;
    margin-bottom: 8px;
  }
  .panel-body .media-device-card .panel-tile-icon {
    width: 48px;
    height: 48px;
  }
  .panel-body .media-device-grid:has(> article:only-child) .media-now-playing {
    min-height: 0;
    padding: 12px;
    gap: 8px;
  }
  .panel-body
    .media-device-grid:has(> article:only-child)
    .media-now-playing-art {
    display: none;
  }
  .panel-body .panel-library-pages .panel-pagination {
    min-height: 48px;
  }
}
@container panel (max-width: 699px) {
  .panel-body .touch-mode-buttons {
    grid-template-columns: repeat(2, max-content);
  }
  .panel-equipment-summary {
    padding: 12px;
    min-height: 190px;
  }
  .panel-equipment-open {
    display: block;
  }
  .panel-equipment-open .panel-tile-icon {
    margin-bottom: 8px;
  }
  .panel-equipment-summary:has(.panel-summary-power) .panel-equipment-open {
    padding-right: 0;
  }
  .panel-body .panel-equipment-open h2 {
    font-size: 16px;
    line-height: 22px;
  }
  .panel-room-filter {
    margin-left: 0;
    width: 100%;
  }
  .panel-room-filter select {
    flex: 1;
    min-width: 0;
  }
  .panel-device-card .touch-adjustment-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel-device-card .is-color {
    grid-row: auto;
  }
  .panel-body .panel-device-card h1 {
    font-size: 22px;
    line-height: 28px;
  }
  .panel-secondary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-body .media-device-card {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel-equipment-summary * {
    transition: none !important;
    animation: none !important;
  }
}


/* Source: css/panel-artwork.css */
/* Supplied mockup artwork, composed with real HTML controls and live data.
   Photos are conceptual; no raster contains state, readings or controls. */
.panel-body {
--hm-line: #e0e4dd;
--hm-shadow: 0 3px 14px rgb(22 44 40 / 4%);
--hm-art-sage: #195d4f;
--hm-art-clay: #966044;
--hm-art-slate: #43616c;
}
.panel-art-icon {
display: inline-block;
width: 52px;
height: 52px;
flex: none;
background: currentColor;
-webkit-mask: var(--art-mask) center / contain no-repeat;
mask: var(--art-mask) center / contain no-repeat;
}
.panel-top-actions > a,
.panel-menu > summary {
border: 1px solid var(--hm-line);
border-radius: 12px;
background: var(--hm-surface);
padding: 8px 14px;
}
.panel-brand > .panel-icon {
padding: 0;
color: var(--hm-green);
background: transparent;
}
.panel-hero {
background: #e7e0d3;
}
.panel-hero::after {
background: linear-gradient(90deg, rgb(16 31 25 / 72%), rgb(16 31 25 / 14%) 70%);
}
.panel-hero h1 {
text-shadow: 0 1px 4px rgb(0 0 0 / 24%);
}
.panel-hero.without-photo h1 {
text-shadow: none;
}
.panel-tile.icon-dining,
.panel-tile.icon-grill,
.panel-tile.icon-playroom {
--tile-art-color: var(--hm-art-clay);
--tile-art-background: #f6eee5;
}
.panel-tile.icon-living,
.panel-tile.icon-bedroom,
.panel-tile.icon-office,
.panel-tile.icon-terrace {
--tile-art-color: var(--hm-art-slate);
--tile-art-background: #edf1f1;
}
.panel-tile > a {
text-align: center;
align-items: center;
gap: 8px;
}
.panel-body .panel-tile .panel-tile-icon {
background: var(--tile-art-background, #eff5ef);
color: var(--tile-art-color, var(--hm-green));
width: 64px;
height: 60px;
border-radius: 22px 22px 16px 16px;
margin: 0;
}
.panel-tile.is-module-lighting {
--tile-art-color: var(--hm-light);
--tile-art-background: var(--hm-light-soft);
}
.panel-tile.is-module-climate {
--tile-art-color: var(--hm-heat);
--tile-art-background: var(--hm-heat-soft);
}
.panel-tile.is-module-media {
--tile-art-color: var(--hm-media);
--tile-art-background: var(--hm-media-soft);
}
.panel-room-state {
border-radius: 999px;
padding: 2px 12px;
background: #f0f2ee;
max-width: 100%;
}
.panel-room-state.is-on {
color: #195d4f;
background: #e2f0e8;
}
.panel-room-state.is-alarm {
color: var(--hm-danger);
background: #fce8e8;
}
.houses .panel-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@container panel (min-width: 900px) {
  .houses .panel-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.houses .panel-grid > :only-child {
grid-column: 1 / -1;
width: min(100%, 360px);
justify-self: center;
}
.panel-body .houses .panel-tile {
min-height: 260px;
}
.panel-body .houses .panel-tile > a {
padding: 0 0 20px;
justify-content: start;
gap: 10px;
}
.panel-body .houses .panel-tile.with-photo img {
position: static;
display: block;
width: 100%;
height: 164px;
object-fit: cover;
}
.panel-body .houses .panel-tile .panel-tile-icon {
width: 52px;
height: 52px;
border: 4px solid white;
border-radius: 16px;
margin: -30px 0 0;
position: relative;
}
.houses .panel-art-icon {
width: 36px;
height: 36px;
}
.houses .panel-tile strong,
.houses .panel-tile small {
margin: 0 12px;
}
.houses .panel-room-state {
background: transparent;
padding: 0;
}
.panel-favorites {
border-top: 1px solid var(--hm-line);
padding-top: 12px;
}
.panel-body:has(.panel-favorites) .panel-tile > a {
padding: 12px 16px;
gap: 6px;
}
.panel-body:has(.panel-favorites) .panel-main {
padding-bottom: 6px;
}
.panel-body:has(.panel-favorites) .panel-tile .panel-tile-icon {
width: 60px;
height: 56px;
}
.panel-favorite.is-category-energy {
background: #e8f2ec;
}
.panel-favorite.is-category-climate {
background: #fbedE5;
color: var(--hm-heat);
}
.panel-favorite.is-category-media {
background: #f0eaf8;
color: var(--hm-media);
}
.panel-favorite.is-category-security {
background: #eaf1f7;
color: #215c8f;
}
.panel-favorite.is-module-lighting {
background: #fff7e6;
}
.panel-body .panel-favorite > .panel-art-icon {
width: 36px;
height: 36px;
}
.panel-equipment-visual {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 112px;
height: 80px;
border-radius: 14px;
overflow: hidden;
background: #f4f3ee;
color: var(--hm-green);
}
.panel-equipment-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.panel-equipment-visual.is-product {
width: 80px;
background: white;
}
.panel-equipment-visual.is-product img {
object-fit: contain;
}
.panel-equipment-visual.is-symbol {
width: 72px;
color: var(--hm-green);
background: var(--hm-soft);
}
.is-module-lighting .panel-equipment-visual.is-symbol {
color: var(--hm-light);
background: var(--hm-light-soft);
}
.is-module-security .panel-equipment-visual.is-symbol {
color: #215c8f;
background: #eaf1f7;
}
.panel-equipment-visual > .panel-icon {
width: 48px;
height: 48px;
}
.panel-equipment-open {
align-content: start;
min-height: 132px;
}
.panel-equipment-summary:has(.panel-summary-power) .panel-equipment-visual {
max-width: calc(100% - 56px);
}
.panel-equipment-summary .panel-state,
.panel-device-card .panel-state {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
background: #eff1ee;
color: var(--hm-muted);
max-width: 100%;
font-size: 14px;
line-height: 20px;
}
.panel-equipment-summary.is-on .panel-state,
.panel-device-card.is-on .panel-state {
background: var(--hm-soft);
color: var(--hm-green);
}
.panel-equipment-summary.is-alarm .panel-state,
.panel-device-card.is-alarm .panel-state {
background: #fce8e8;
color: var(--hm-danger);
}
.panel-device-card > header > .panel-equipment-visual {
width: 156px;
height: 104px;
}
.panel-device-card > header > .panel-equipment-visual.is-product {
width: 88px;
}
.panel-device-card > header > .panel-equipment-visual.is-symbol {
width: 88px;
height: 88px;
}
.panel-body .media-device-card .compact-device-header {
grid-template-columns: 176px minmax(0, 1fr) 48px;
}
.media-device-card .panel-equipment-visual {
width: 176px;
height: 76px;
}
.panel-device-card.is-module-climate .panel-device-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.panel-device-card.is-module-climate .panel-device-metrics > div {
padding: 10px 16px;
border-radius: 14px;
background: #edf5ef;
}
.panel-device-card.is-module-climate .panel-device-metrics > div:nth-child(2) {
background: #fff4e7;
}
.panel-device-card.is-module-climate .panel-device-metrics dd {
font-size: 26px;
font-weight: 650;
color: var(--hm-text);
}
.panel-rank-label {
min-width: 0;
}
.panel-rank-label .panel-equipment-visual {
float: left;
width: 52px;
height: 60px;
margin: 0 12px 4px 0;
}
.panel-rank-label .panel-equipment-visual .panel-art-icon,
.panel-rank-label .panel-equipment-visual .panel-icon {
width: 36px;
height: 36px;
}
.panel-body .panel-rank-label a {
min-height: 44px;
overflow-wrap: anywhere;
}
.panel-body .login-visual {
background-image: url("../panel/art/houses/house-c.4f25e07b6e77.webp");
background-position: 50% 55%;
}
@container panel (min-width: 700px) {
  .summary-collection:is(.module-appliances, .module-climate, .module-media) .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .summary-collection:is(.module-appliances, .module-climate, .module-media) .panel-equipment-summary {
    min-height: 174px;
    padding-left: 132px;
  }
  .summary-collection:is(.module-appliances, .module-climate, .module-media) .panel-equipment-open {
    min-height: 60px;
    padding-right: 48px;
  }
  .summary-collection:is(.module-appliances, .module-climate, .module-media) .panel-equipment-visual {
    position: absolute;
    left: 16px;
    top: 20px;
    width: 100px;
    height: 124px;
    max-width: none;
  }
  .summary-collection .panel-equipment-visual.is-product img {
    object-fit: contain;
    max-height: 96px;
  }
  .panel-body .panel-main:has(> .summary-collection) > .panel-hero {
    height: 112px;
    margin-bottom: 16px;
  }
}
@container panel (max-width: 899px) {
  .houses .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container panel (max-width: 699px) {
  .panel-top-actions > a,
  .panel-menu > summary {
    padding: 8px;
  }
  .panel-body .houses .panel-tile {
    min-height: 224px;
  }
  .panel-body .houses .panel-tile.with-photo img {
    height: 120px;
  }
  .panel-equipment-open {
    min-height: 156px;
  }
  .panel-equipment-summary .panel-equipment-visual {
    height: 64px;
    margin-bottom: 12px;
  }
  .panel-equipment-summary:has(.panel-summary-power) .panel-equipment-visual {
    max-width: calc(100% - 44px);
  }
  .panel-equipment-summary .panel-art-icon {
    width: 44px;
    height: 44px;
  }
  .panel-device-card > header > .panel-equipment-visual {
    width: 72px;
    height: 64px;
  }
  .panel-device-card > header > .panel-equipment-visual:is(.is-product, .is-symbol) {
    width: 56px;
    height: 64px;
  }
  .panel-body .media-device-card .compact-device-header {
    grid-template-columns: 72px minmax(0, 1fr) 48px;
    gap: 12px;
  }
  .media-device-card .panel-equipment-visual {
    width: 72px;
    height: 64px;
  }
  .panel-rank-label .panel-equipment-visual {
    display: none;
  }
}
@media (max-height: 670px) {
  .panel-body .panel-main:has(> .summary-collection) > .panel-hero {
    height: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel-tile:active {
    transform: none;
  }
}
html[data-reduced-motion] .panel-tile:active {
transform: none;
}


/* Source: css/panel-touch.css */
/* Compact visual controls retain a 48 px touch target. Approved ivory/sage palette. */
.panel-topbar {
gap: 16px;
}

.panel-back,
.panel-top-actions>a,
.panel-menu>summary {
width: 48px;
height: 48px;
padding: 10px;
justify-content: center;
flex: none;
border: 1px solid var(--hm-line);
border-radius: 14px;
background: var(--hm-surface);
}

.panel-top-actions {
gap: 10px;
}

.panel-top-actions>a[aria-current="page"],
.panel-menu[open]>summary {
color: var(--hm-green);
background: var(--hm-soft);
border-color: #a9c7b6;
}

.panel-menu>div {
width: 228px;
max-height: calc(100dvh - 90px);
overflow-y: auto;
}

.panel-menu a,
.panel-menu button {
gap: 12px;
border-radius: 10px;
font-size: 15px;
}

.panel-menu .panel-icon {
width: 22px;
height: 22px;
}

.panel-hero.with-environment {
gap: 16px;
padding: 20px 24px;
min-height: 136px;
height: auto;
}

.panel-hero.with-environment::after {
background: linear-gradient(90deg, #122d26dc, #122d269e);
}

.panel-hero-heading {
margin-right: auto;
min-width: 0;
}

.panel-hero-heading h1 {
font-size: 27px;
line-height: 1.2;
}

.panel-hero .panel-pin {
align-self: flex-start;
}

.panel-pin .panel-button {
width: 48px;
padding: 10px;
}

.panel-pin [aria-pressed="true"] {
color: var(--hm-green);
background: #e2f0e8;
}

.panel-environment {
display: flex;
align-items: center;
gap: 16px;
color: white;
}

.panel-clock {
display: flex;
flex-direction: column;
min-width: 94px;
padding-right: 16px;
border-right: 1px solid #ffffff45;
}

.panel-clock time {
font-size: 30px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}

.panel-clock span {
font-size: 12px;
margin-top: 6px;
white-space: nowrap;
}

.panel-environment-metric {
display: grid;
grid-template-columns: 24px auto;
align-items: center;
gap: 0 6px;
}

.panel-environment-metric .panel-icon {
width: 24px;
height: 24px;
}

.panel-environment-metric strong {
font-size: 19px;
font-weight: 600;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}

.panel-body .panel-environment-metric small {
grid-column: 1 / -1;
color: #f2f6f2;
font-size: 11px;
white-space: nowrap;
}

.panel-hero.without-photo .panel-environment {
color: var(--hm-text);
}

.panel-hero.with-environment.without-photo::after {
background: none;
}

.panel-hero.without-photo .panel-environment small {
color: var(--hm-muted);
}

.panel-hero.without-photo .panel-clock {
border-color: var(--hm-line);
}

.panel-body .panel-room-count {
position: absolute;
top: 10px;
right: 12px;
min-width: 24px;
padding: 1px 6px;
border-radius: 8px;
background: #edf1ec;
font-size: 12px;
font-weight: 650;
}

.panel-favorites {
display: flex;
align-items: stretch;
gap: 16px;
}

.panel-favorite-group {
display: flex;
flex: 1;
gap: 10px;
min-width: 0;
}

.panel-favorite-group.is-actions {
flex: 0 1 auto;
}

.panel-favorite-group+.panel-favorite-group {
border-left: 1px solid #c6d0c6;
padding-left: 16px;
}

.panel-favorite-group>.panel-favorite {
flex: 1 1 0;
min-width: 0;
min-height: 104px;
}

.panel-favorite-group.is-actions>.panel-favorite {
width: 148px;
}

.panel-favorite-group.is-actions>.panel-favorite:has([data-color-hue]) {
width: 176px;
}

.panel-favorite.is-device {
display: grid;
grid-template-columns: minmax(0, 1fr) 48px;
grid-template-rows: auto;
align-items: center;
padding: 8px;
gap: 0 4px;
}

.panel-quick-name {
font-size: 13px;
font-weight: 600;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.panel-favorite .touch-control-console {
position: static;
width: 48px;
margin: 0;
}

.panel-body .is-module-lighting .touch-power-button[aria-checked="true"],
.panel-body .is-module-lighting [aria-busy="true"] .touch-power-button[data-pending-state="on"] {
color: #fff;
background: #195d4f;
border-color: #195d4f;
}

.panel-body .is-module-lighting .touch-power-button[aria-checked="false"],
.panel-body .is-module-lighting [aria-busy="true"] .touch-power-button[data-pending-state="off"] {
color: #59625d;
background: #eef1ed;
border-color: #cbd3cc;
}

.panel-favorite .touch-control-console .touch-power-button:disabled {
color: #747b75;
background: #ecefe9;
border-color: var(--hm-line);
}

.panel-quick-unavailable {
width: 48px;
height: 48px;
display: grid;
place-items: center;
color: #777;
border: 1px dashed var(--hm-line);
border-radius: 12px;
}

.panel-quick-adjustments {
grid-column: 1 / -1;
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}

.panel-quick-adjustments form:only-of-type {
grid-column: 1 / -1;
}

.panel-quick-adjustments:empty {
display: none;
}

.panel-quick-adjustments form {
min-width: 0;
margin: 0;
}

.panel-body .panel-quick-adjustments input[type="range"] {
width: 100%;
height: 48px;
min-height: 48px;
padding: 0 4px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
appearance: none;
cursor: pointer;
}

.panel-quick-adjustments input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
border-radius: 4px;
background: #d7cdb5;
}

.panel-quick-adjustments input[type="range"]::-moz-range-track {
height: 5px;
border-radius: 4px;
background: #d7cdb5;
}

.panel-quick-adjustments input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
margin-top: -6px;
border-radius: 50%;
background: #966416;
border: 2px solid white;
box-shadow: 0 1px 3px #0004;
}

.panel-quick-adjustments input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #966416;
border: 2px solid white;
}

.panel-quick-adjustments input.panel-hue-range::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #f44, #ff4, #4f4, #4ff, #44f, #f4f, #f44);
}

.panel-quick-adjustments input.panel-hue-range::-moz-range-track {
background: linear-gradient(90deg, #f44, #ff4, #4f4, #4ff, #44f, #f4f, #f44);
}

.panel-quick-adjustments input.panel-hue-range::-webkit-slider-thumb {
background: var(--selected-color, #fff);
}

.panel-quick-adjustments input.panel-hue-range::-moz-range-thumb {
background: var(--selected-color, #fff);
}

.panel-quick-adjustments input:disabled {
opacity: .45;
cursor: not-allowed;
}

.panel-device-group-label {
display: flex;
gap: 6px;
align-items: center;
border-bottom: 1px solid var(--hm-line);
padding-bottom: 6px;
margin-bottom: 8px;
font-size: 12px;
color: var(--hm-muted);
}

.panel-device-group-label .panel-icon {
width: 18px;
height: 18px;
}

.panel-equipment-summary:not(.is-group-start) .panel-device-group-label {
visibility: hidden;
}

/* Library and playback are two independent, equally tall panels. */
.panel-body .panel-main.media-shell {
padding-top: 8px;
}

.panel-body .media-shell .control-page-header {
height: 48px;
min-height: 48px;
margin: 0 0 8px;
}

.panel-body .media-shell .control-page-icon {
height: 48px;
width: 48px;
}

.panel-body .media-device-card {
padding: 16px;
}

.panel-body .media-device-card .compact-device-header {
grid-template-columns: 140px minmax(0, 1fr) 48px;
min-height: 56px;
margin-bottom: 10px;
}

.panel-body .media-device-card .compact-device-header .panel-equipment-visual {
width: 140px;
height: 56px;
}

.panel-body .denon-source-panel {
padding: 10px;
}

.panel-media-library {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 8px;
border: 1px solid var(--hm-line);
border-radius: 14px;
background: #fff;
}

.panel-body .spotify-library-tabs {
margin: 0;
padding: 0;
flex: none;
}

.panel-body .spotify-library-tabs button {
font-size: 14px;
min-height: 48px;
}

.panel-body .spotify-library-panel {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-height: 0;
}

.panel-library-pages,
.spotify-library-panel [data-spotify-results] {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}

.panel-body .spotify-item-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
align-content: start;
}

.panel-body .spotify-item-grid>form>button {
height: 62px;
min-height: 62px;
grid-template-columns: 42px minmax(0, 1fr) 26px;
grid-template-rows: 1fr;
gap: 6px;
padding: 6px;
}

.panel-body .spotify-item-grid img,
.panel-body .spotify-item-placeholder {
width: 42px;
height: 42px;
grid-row: auto;
}

.panel-body .spotify-item-copy {
align-self: center;
}

.panel-body .spotify-item-copy strong {
font-size: 13px;
line-height: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.panel-body .spotify-item-copy small {
font-size: 11px;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.panel-body .spotify-item-grid .spotify-play-icon {
position: static;
width: 26px;
height: 26px;
}

.panel-body .panel-media-library .panel-pagination {
margin: auto 0 0;
padding-top: 0;
min-height: 48px;
gap: 0;
flex-wrap: nowrap;
}

.panel-body .panel-media-library .panel-pagination button {
padding: 8px;
min-width: 48px;
}

.panel-body .spotify-search-form {
margin: 0;
gap: 6px;
flex: none;
}

.panel-body .spotify-search-form input {
height: 48px;
min-height: 48px;
padding: 6px 10px;
font-size: 14px;
}

.panel-body .spotify-search-form button {
width: 48px;
min-height: 48px;
}

.panel-body .media-now-playing {
margin: 0;
border-radius: 14px;
}

.panel-body .media-now-playing-copy strong {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@container panel (min-width: 900px) {
  .panel-body .media-device-grid:has(> article:only-child) .denon-source-panel {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
    align-items: stretch;
    gap: 12px;
  }

  .panel-body .media-device-grid:has(> article:only-child) .media-now-playing {
    display: flex;
    flex-direction: column;
    min-height: 372px;
    height: 100%;
    padding: 16px;
    gap: 16px;
    justify-content: center;
  }

  .panel-body .media-device-grid:has(> article:only-child) .media-now-playing-art,
  .panel-body .media-device-grid:has(> article:only-child) .media-now-playing-art img {
    width: 128px;
    height: 128px;
  }

  .panel-body .media-now-playing .denon-playback-row {
    margin-top: auto;
  }

  .panel-body .media-device-grid:has(> article:only-child) .panel-media-library {
    min-height: 372px;
  }

  .panel-body .media-now-playing .media-seek {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .panel-body .media-now-playing .media-seek input {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .panel-body .media-now-playing .media-seek output {
    font-size: 11px;
  }
}

@container panel (max-width: 899px) {
  .panel-environment {
    gap: 10px;
  }

  .panel-hero.with-environment {
    flex-wrap: wrap;
  }

  .panel-hero-heading {
    flex: 1 1 55%;
  }

  .panel-environment {
    order: 3;
    flex: 1 1 100%;
  }

  .panel-favorites {
    flex-wrap: wrap;
  }

  .panel-favorite-group.is-actions {
    flex: 1 1 100%;
  }

  .panel-favorite-group+.panel-favorite-group {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--hm-line);
    padding-top: 10px;
  }

  .panel-media-library {
    margin-top: 10px;
  }
}

@container panel (max-width: 599px) {
  .panel-topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .panel-brand>span {
    display: none;
  }

  .panel-top-actions {
    gap: 6px;
  }

  .panel-brand {
    margin-right: auto;
  }

  .panel-hero.with-environment {
    padding: 16px;
  }

  .panel-environment {
    flex-wrap: wrap;
    gap: 12px;
  }

  .panel-clock {
    min-width: 80px;
    padding-right: 10px;
  }

  .panel-clock time {
    font-size: 24px;
  }

  .panel-environment-metric strong {
    font-size: 17px;
  }

  .panel-environment-metric {
    grid-template-columns: 20px auto;
  }

  .panel-environment-metric .panel-icon {
    width: 20px;
    height: 20px;
  }

  .panel-favorite-group.is-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-body .spotify-item-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-body .media-device-card .compact-device-header {
    grid-template-columns: 72px minmax(0, 1fr) 48px;
    gap: 8px;
  }

  .panel-body .media-device-card .compact-device-header .panel-equipment-visual {
    width: 72px;
    height: 56px;
  }

  .panel-body .media-device-card .compact-device-header :is(h1, h2) {
    font-size: 20px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {

  .panel-favorite *,
  .spotify-item-grid button {
    transition: none;
  }
}


/* Source: css/panel-landscape.css */
/* A short phone viewport is not a small tablet. Keep native-size hit areas;
   compact decoration and paginate the menus instead of scaling the whole UI.
   Never lock page overflow: forms, errors and enlarged text stay reachable. */
.panel-topbar {
padding-left: max(32px, env(safe-area-inset-left));
padding-right: max(32px, env(safe-area-inset-right));
padding-top: env(safe-area-inset-top);
box-sizing: content-box;
}
.panel-body .panel-main {
padding-left: max(32px, env(safe-area-inset-left));
padding-right: max(32px, env(safe-area-inset-right));
padding-bottom: max(24px, env(safe-area-inset-bottom));
}
@container panel (max-width: 1100px) {
  .panel-body .panel-main, .panel-topbar {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .panel-body .panel-main { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@container panel (max-width: 699px) {
  .panel-body .panel-main {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .panel-topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .panel-brand { min-width: 48px; min-height: 48px; justify-content: center; }
  .panel-brand > .panel-icon { display: block; width: 28px; height: 28px; }
}
.panel-network,
.panel-action-notice {
bottom: max(16px, env(safe-area-inset-bottom));
right: max(16px, env(safe-area-inset-right));
max-width: calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
}

@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  .panel-body .panel-topbar {
    height: 56px;
    gap: 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .panel-brand > .panel-icon { width: 32px; height: 32px; }
  .panel-brand { font-size: 14px; gap: 8px; }
  .panel-brand small { font-size: 12px; line-height: 16px; }
  html .panel-body .panel-main.panel-paged-screen {
    padding-top: 8px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .panel-menu > div {
    top: 52px;
    max-height: calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .panel-paged-screen > .panel-collection {
    --panel-page-limit: 4;
  }
  .panel-body .panel-paged-screen > .panel-hero {
    height: auto;
    min-height: 56px;
    padding: 4px 12px;
    margin-bottom: 8px;
    border-radius: 16px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .panel-paged-screen .panel-hero-heading {
    flex: 1;
  }
  .panel-paged-screen .panel-hero h1 {
    font-size: 22px;
    line-height: 26px;
  }
  .panel-paged-screen .panel-hero p { font-size: 12px; line-height: 16px; }
  .panel-paged-screen .panel-pin { align-self: center; }
  .panel-paged-screen .panel-environment {
    flex: 0 1 auto;
    order: 0;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .panel-paged-screen .panel-clock {
    min-width: 78px;
    padding-right: 10px;
  }
  .panel-paged-screen .panel-clock time { font-size: 22px; }
  .panel-paged-screen .panel-clock span { margin-top: 2px; }
  .panel-paged-screen .panel-environment-metric { grid-template-columns: 20px auto; }
  .panel-paged-screen .panel-environment-metric .panel-icon { width: 20px; height: 20px; }
  .panel-paged-screen .panel-environment-metric strong { font-size: 16px; }
  .panel-paged-screen .panel-environment-metric small { font-size: 12px; line-height: 16px; }
  /* The active top navigation and region label already identify Habitaciones. */
  .panel-house-screen > .panel-section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
  }
  .panel-paged-screen .panel-grid,
  .panel-paged-screen .houses .panel-grid,
  .panel-paged-screen .applications .panel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .panel-body .panel-paged-screen .panel-tile {
    min-height: 96px;
    border-radius: 16px;
  }
  .panel-body .panel-paged-screen .panel-tile > a {
    padding: 8px 12px;
    gap: 4px;
  }
  .panel-body .panel-paged-screen .panel-tile .panel-tile-icon {
    width: 40px;
    height: 36px;
    border-radius: 12px;
    margin: 0;
  }
  .panel-paged-screen .panel-tile-icon .panel-art-icon { width: 32px; height: 32px; }
  .panel-paged-screen .panel-tile strong { font-size: 16px; line-height: 20px; }
  .panel-paged-screen > .applications { --panel-page-limit: 6; }
  .panel-paged-screen .applications .panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-body .panel-paged-screen .applications .panel-tile,
  .panel-body .panel-paged-screen .applications .panel-tile > a { min-height: 112px; }
  .panel-paged-screen .panel-room-count { top: 6px; right: 6px; }
  .panel-paged-screen .panel-pagination {
    min-height: 48px;
    margin: 0;
    gap: 4px;
  }
  .panel-paged-screen .panel-heading { margin-bottom: 8px; }
  .panel-paged-screen .panel-heading h1 { font-size: 24px; }
  .panel-body .panel-paged-screen .houses .panel-tile > a { padding: 0 0 8px; }
  .panel-paged-screen .houses .panel-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-body .panel-paged-screen .houses .panel-tile.with-photo img { height: 100px; }
  .panel-body .panel-paged-screen .houses .panel-tile .panel-tile-icon { margin-top: -22px; }

  .panel-house-screen .panel-favorites {
    flex-wrap: nowrap;
    margin-top: 4px;
    padding-top: 4px;
    gap: 8px;
  }
  .panel-house-screen .panel-favorite-group {
    display: flex;
    flex: 1;
    gap: 8px;
  }
  .panel-house-screen .panel-favorite-group.is-actions { flex: 0 1 auto; }
  .panel-house-screen .panel-favorite-group + .panel-favorite-group {
    border-top: 0;
    border-left: 1px solid var(--hm-line);
    padding: 0 0 0 8px;
  }
  .panel-house-screen .panel-favorite-group > .panel-favorite {
    min-height: 104px;
    padding: 4px;
    gap: 0 4px;
  }
  .panel-house-screen .panel-favorite-group.is-actions > .panel-favorite { width: 152px; }
  .panel-house-screen .panel-favorite-group.is-navigation > .panel-favorite { min-width: 64px; }
  .panel-house-screen .panel-favorite .panel-art-icon { width: 28px; height: 28px; }
  .panel-house-screen .panel-favorite > span:not(.panel-quick-name, .sr-only) { font-size: 12px; }
  .panel-house-screen .panel-quick-adjustments input[type="range"] { display: block; }
  .panel-house-screen .touch-power-form { display: flex; }
  .panel-body .panel-house-screen .touch-power-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .panel-room-screen > .panel-collection,
  .panel-module-screen > .panel-collection { --panel-page-limit: 2; }
  .panel-paged-screen .panel-grid:has(> .panel-equipment-summary) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-body .panel-paged-screen .panel-equipment-summary {
    padding: 10px;
    min-height: 0;
  }
  .panel-body .panel-paged-screen .panel-equipment-open {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    min-height: 56px;
    margin: 0 0 4px;
    padding: 0;
    gap: 8px;
  }
  .panel-body .panel-paged-screen .panel-equipment-open .panel-equipment-visual {
    position: static;
    width: 56px;
    height: 56px;
    margin: 0;
    max-width: none;
  }
  .panel-paged-screen .panel-equipment-visual :is(.panel-art-icon, .panel-icon) { width: 40px; height: 40px; }
  .panel-paged-screen .panel-device-group-label { margin-bottom: 4px; padding-bottom: 2px; }
  .panel-body .panel-paged-screen .panel-equipment-open h2 { font-size: 16px; line-height: 20px; }
  .panel-body .panel-paged-screen .panel-equipment-summary:has(.panel-summary-power) .panel-equipment-open { margin-right: 48px; }
  .panel-room-screen .panel-equipment-room { display: none; }
  .panel-paged-screen .panel-equipment-summary .panel-caption { margin: 4px 0 0; }
  .panel-paged-screen .panel-summary-metrics { margin-top: 4px; gap: 4px 12px; }
  .panel-paged-screen .panel-summary-metrics > div { display: flex; align-items: baseline; gap: 4px; }
  .panel-paged-screen .panel-summary-metrics dd { font-size: 16px; }
  .panel-paged-screen .panel-equipment-summary:has(.panel-summary-temperature) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 0 16px;
  }
  .panel-paged-screen .panel-summary-temperature {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: center;
  }
  .panel-paged-screen .panel-summary-temperature .touch-adjustment-list { margin: 0; }
  .panel-paged-screen .panel-summary-temperature .touch-dial-readout { width: 48px; height: 48px; }
  .panel-paged-screen .panel-summary-temperature .touch-adjustment { padding: 4px; }
  .panel-paged-screen .panel-equipment-summary:has(.panel-summary-temperature) > .panel-device-group-label { grid-column: 1 / -1; }
  .panel-paged-screen .panel-equipment-summary:has(.panel-summary-temperature) > :is(.panel-state, .panel-summary-metrics) { grid-column: 1; }
  .panel-paged-screen .panel-equipment-summary:has(.panel-summary-temperature) .panel-summary-power { right: 288px; top: 32px; }
  .panel-paged-screen .panel-equipment-summary > .panel-state { justify-self: start; }
  .panel-paged-screen .panel-context-actions { margin: 8px 0 0; gap: 8px; flex-wrap: nowrap; }
  .panel-paged-screen .panel-context-actions > :is(a, button) { font-size: 14px; padding: 4px 12px; }
}


/* Source: css/panel-shell.css */
/* Navigation shell: photos and device controls keep the approved ivory/sage
   design. Geometry is based on the usable viewport, not a scaled desktop. */
:root {
--panel-safe-top: env(safe-area-inset-top, 0px);
--panel-safe-bottom: env(safe-area-inset-bottom, 0px);
--panel-safe-left: env(safe-area-inset-left, 0px);
--panel-safe-right: env(safe-area-inset-right, 0px);
}
.panel-body .panel-topbar {
height: 64px;
padding: var(--panel-safe-top) max(16px, var(--panel-safe-right)) 0 max(16px, var(--panel-safe-left));
gap: 8px;
}
.panel-body .panel-back,
.panel-body .panel-top-actions > a,
.panel-body .panel-menu > summary {
background: transparent;
border-color: transparent;
border-radius: 50%;
}
.panel-body .panel-back .panel-icon { width: 26px; height: 26px; }
.panel-body .panel-top-actions > a[aria-current="page"],
.panel-body .panel-menu[open] > summary { background: var(--hm-soft); color: var(--hm-green); }
.panel-body .panel-top-actions { gap: 8px; }
.panel-body .panel-brand { min-width: 48px; min-height: 48px; }
.panel-body .panel-brand > .panel-icon { background: none; padding: 4px; width: 32px; height: 32px; }
.panel-body :is(.panel-back, .panel-top-actions > a, .panel-menu > summary):active {
background: var(--hm-soft);
}
.panel-body .panel-menu > div {
top: 56px;
max-height: calc(100dvh - 80px - var(--panel-safe-top) - var(--panel-safe-bottom));
}
.panel-body .panel-hero.with-environment {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
min-height: 144px;
height: auto;
padding: 16px 24px;
gap: 20px;
}
.panel-hero-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.panel-hero-title .panel-hero-heading { flex: 0 1 auto; margin: 0; }
.panel-body .panel-environment {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 20px;
align-items: center;
order: 0;
min-width: 0;
padding-left: 20px;
border-left: 1px solid rgb(255 255 255 / 30%);
}
.panel-body .panel-clock { border: 0; padding: 0; min-width: 0; }
.panel-body .panel-clock time { font-size: 24px; line-height: 1.1; }
.panel-body .panel-clock span { margin-top: 2px; font-size: 12px; line-height: 16px; }
.panel-body .panel-environment-metric { grid-template-columns: 20px minmax(0, 1fr); gap: 0 6px; }
.panel-body .panel-environment-metric .panel-icon { width: 20px; height: 20px; }
.panel-body [data-environment-icon] { display: flex; align-items: center; }
.panel-body .panel-environment-metric strong { font-size: 18px; line-height: 22px; }
.panel-body .panel-environment-metric small { font-size: 12px; line-height: 16px; }
.panel-body .without-photo .panel-environment { border-color: var(--hm-line); }

/* Only menu screens fill the viewport. Forms and complex controls remain
   naturally scrollable, and zoom/large text is never clipped or disabled. */
.panel-body .panel-main.panel-paged-screen {
display: flex;
flex-direction: column;
width: 100%;
min-height: 0;
height: calc(var(--panel-viewport-height, 100dvh) - var(--panel-header-height, 64px));
padding: 12px max(24px, var(--panel-safe-right)) max(12px, var(--panel-safe-bottom)) max(24px, var(--panel-safe-left));
gap: 12px;
}
.panel-paged-screen > :not(.panel-collection) { flex-shrink: 0; }
.panel-paged-screen > :is(.panel-hero, .panel-heading, .panel-context-actions) { margin: 0; }
.panel-paged-screen > .panel-collection { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-paged-screen > .panel-collection > .panel-grid {
flex: 1;
min-height: 0;
align-content: stretch;
grid-auto-rows: minmax(min-content, 1fr);
grid-template-rows: repeat(var(--panel-grid-rows, 1), minmax(min-content, 1fr));
}
.panel-body .panel-main.panel-screen-overflow { height: auto; min-height: calc(var(--panel-viewport-height, 100dvh) - var(--panel-header-height, 64px)); }
.panel-screen-overflow > .panel-collection, .panel-screen-overflow > .panel-collection > .panel-grid { flex: none; }
.panel-house-screen > .panel-section-title {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
}
.panel-paged-screen .panel-pagination { flex: none; min-height: 44px; gap: 8px; margin: 0; }
.panel-body .panel-pagination button { min-width: 44px; min-height: 44px; height: 44px; padding: 8px; }
.panel-body .panel-house-screen .panel-favorites { margin: 0; padding-top: 8px; }
[data-page-items] { touch-action: pan-y pinch-zoom; }
.panel-screen-viewport, [data-pager] { overflow-x: clip; overflow-y: visible; }
[data-page-items] a, [data-page-items] img { -webkit-user-drag: none; }
[data-page-items].is-swiping { user-select: none; cursor: grabbing; }
[data-pager].is-page-transitioning { position: relative; isolation: isolate; }
[data-pager].is-page-transitioning > [data-page-items]:not(.panel-page-preview) {
position: relative;
z-index: 1;
will-change: transform;
}
[data-pager] > .panel-page-preview {
position: absolute !important;
z-index: 2;
margin: 0 !important;
pointer-events: none !important;
user-select: none;
will-change: transform;
}
.panel-body .panel-main { transition: opacity 160ms ease; }
.panel-body .panel-back[aria-busy="true"] { opacity: .55; }

@container panel (max-width: 699px) {
  .panel-body .panel-topbar { height: 56px; }
  .panel-body .panel-brand > span { display: none; }
  .panel-body .panel-top-actions { gap: 4px; }
  .panel-body .panel-main.panel-paged-screen {
    padding-left: max(12px, var(--panel-safe-left));
    padding-right: max(12px, var(--panel-safe-right));
    gap: 10px;
  }
  .panel-body .panel-hero.with-environment {
    min-height: 132px;
    grid-template-columns: minmax(0, 1fr) 206px;
    padding: 12px;
    gap: 8px;
  }
  .panel-hero-title { flex-wrap: wrap; gap: 8px; }
  .panel-body .panel-environment { padding-left: 10px; gap: 10px 8px; }
  .panel-body .panel-environment-metric strong { font-size: 16px; }
  .panel-body .panel-hero-heading h1 { font-size: 22px; line-height: 26px; }
  .panel-body .panel-favorite-group.is-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panel-body .panel-favorite-group.is-navigation > .panel-favorite { min-height: 68px; padding: 4px; gap: 0; }
  .panel-body .panel-favorite-group.is-navigation .panel-art-icon { width: 28px; height: 28px; }
  .panel-body .panel-favorite-group.is-navigation > .panel-favorite > span { font-size: 12px; }
  .panel-body .panel-context-actions { gap: 8px; flex-wrap: wrap; }
  .panel-body .panel-context-actions > :is(a, button) { flex: 1 1 44%; font-size: 14px; padding: 8px; }
}
@container panel (max-width: 359px) {
  .panel-body .panel-topbar { gap: 0; }
  .panel-body .panel-top-actions { gap: 0; }
  .panel-body .panel-hero.with-environment { grid-template-columns: minmax(0, 1fr); }
  .panel-hero-title { flex-wrap: nowrap; }
  .panel-body .panel-environment { border-left: 0; padding-left: 0; }
}
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  .panel-body .panel-topbar { height: 52px; }
  .panel-body .panel-brand > span { display: none; }
  html .panel-body .panel-main.panel-paged-screen {
    padding: 6px max(16px, var(--panel-safe-right)) max(8px, var(--panel-safe-bottom)) max(16px, var(--panel-safe-left));
    gap: 6px;
  }
  .panel-body .panel-paged-screen > .panel-hero.with-environment {
    grid-template-columns: minmax(0, 1fr) 286px;
    min-height: 88px;
    padding: 6px 16px;
    margin: 0;
    gap: 12px;
  }
  .panel-body .panel-environment { gap: 4px 14px; padding-left: 14px; }
  .panel-body .panel-clock time { font-size: 20px; }
  .panel-body .panel-environment-metric strong { font-size: 16px; line-height: 20px; }
  .panel-body .panel-clock span { line-height: 14px; }
  .panel-body .panel-paged-screen .panel-tile,
  .panel-body .panel-paged-screen .panel-tile > a { min-height: 80px; }
  .panel-body .panel-house-screen .panel-favorites { padding-top: 4px; }
  .panel-body .panel-paged-screen .applications .panel-tile,
  .panel-body .panel-paged-screen .applications .panel-tile > a { min-height: 88px; }
  .panel-body .panel-paged-screen .panel-context-actions { gap: 8px; flex-wrap: wrap; }
  .panel-body .panel-paged-screen .panel-equipment-summary { padding: 6px 10px; }
  .panel-body .panel-paged-screen .panel-equipment-open {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 48px;
  }
  .panel-body .panel-paged-screen .panel-equipment-open .panel-equipment-visual { width: 48px; height: 48px; }
  .panel-body .panel-paged-screen .panel-device-group-label { line-height: 16px; }
  .panel-body .panel-paged-screen .panel-summary-metrics :is(dt, dd) { line-height: 20px; }
  html .panel-body .panel-main.panel-control-screen {
    padding: 8px max(16px, var(--panel-safe-right)) max(8px, var(--panel-safe-bottom)) max(16px, var(--panel-safe-left));
  }
  .panel-body .panel-control-screen .panel-device-card:is(.is-module-lighting, .is-module-climate) {
    display: grid;
    grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr);
    align-items: start;
    gap: 8px 16px;
    padding: 12px;
    overflow: visible;
  }
  .panel-control-screen .panel-device-card:is(.is-module-lighting, .is-module-climate) > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    gap: 6px;
  }
  .panel-control-screen .panel-device-card:is(.is-module-lighting, .is-module-climate) > header > div:not(.panel-detail-power) { grid-column: 1 / -1; grid-row: 2; }
  .panel-control-screen .panel-detail-power { grid-column: 2; grid-row: 1; }
  .panel-body .panel-control-screen .panel-device-card > header { padding: 0; }
  .panel-body .panel-control-screen .panel-detail-power .touch-control-header { position: static; }
  .panel-body .panel-control-screen .panel-detail-power .touch-power-button { width: 48px; height: 48px; }
  .panel-body .panel-control-screen .panel-device-card > header > .panel-equipment-visual { width: 64px; height: 56px; }
  .panel-body .panel-control-screen .panel-device-card h1 { font-size: 20px; line-height: 24px; }
  .panel-control-screen .panel-main-controls { grid-column: 2; grid-row: 1 / span 3; min-width: 0; }
  .panel-control-screen .panel-device-card > .panel-device-metrics { grid-column: 1; grid-row: 2; margin: 0; gap: 8px; }
  .panel-control-screen .panel-detail-links { grid-column: 1; grid-row: 3; margin: 0; gap: 8px; }
  .panel-control-screen .panel-detail-links .panel-button { padding: 8px; font-size: 14px; }
  .panel-control-screen .panel-secondary-controls,
  .panel-control-screen .panel-program-notice,
  .panel-control-screen .panel-caption { grid-column: 1 / -1; margin: 0; }
  .panel-body .panel-control-screen .panel-device-metrics dd { font-size: 20px; line-height: 24px; }
  .panel-body .panel-control-screen .touch-adjustment-list { gap: 8px; padding-top: 8px; }
  .panel-body .panel-control-screen .touch-adjustment { padding: 6px; }
  .panel-body .panel-control-screen .touch-color-wheel { width: 160px; height: 160px; }
  .panel-control-screen .panel-control-tabs { margin: 0 0 8px; }
  .panel-body .panel-control-screen .touch-dial-control { grid-template-columns: 48px 64px 48px; gap: 8px; }
  .panel-body .panel-control-screen .touch-dial-readout { width: 64px; height: 64px; }
  .panel-body .panel-control-screen .touch-dial-readout output { font-size: 24px; }
  .panel-body .panel-control-screen .touch-mode-button { min-height: 48px; min-width: 48px; padding: 4px 8px; }
  .panel-body .panel-control-screen .touch-choice-label { font-size: 12px; line-height: 16px; }
  .panel-body .panel-control-screen .is-quick-white > div { gap: 8px; }
  .panel-body .panel-control-screen .panel-device-card.is-module-climate {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 6px 12px;
    padding: 10px;
  }
  .panel-body .panel-control-screen .is-module-climate > header {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    gap: 8px;
  }
  .panel-body .panel-control-screen .is-module-climate > .panel-device-metrics { grid-column: 2; grid-row: 1; align-self: center; }
  .panel-body .panel-control-screen .is-module-climate .panel-device-metrics dd { white-space: nowrap; font-size: 18px; }
  .panel-body .panel-control-screen .is-module-climate > .panel-main-controls { grid-column: 1 / -1; grid-row: 2; }
  .panel-body .panel-control-screen .is-module-climate .touch-adjustment-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-body .panel-control-screen .is-module-climate .is-icon-modes { grid-column: 3; grid-row: 1; }
  .panel-body .panel-control-screen .is-module-climate .touch-mode-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-body .panel-control-screen .is-module-climate > .panel-detail-links { grid-column: 1; grid-row: 3; }
  .panel-body .panel-control-screen .is-module-climate > .panel-secondary-controls { grid-column: 2; grid-row: 3; }
  .panel-body .panel-control-screen .is-module-climate > .panel-secondary-controls[open] { grid-column: 1 / -1; grid-row: 4; }
}

/* A single image-backed header for navigation and house/room context.
   Overflow stays visible so the menu is not clipped by the hero artwork. */
.panel-body .panel-paged-screen > .panel-unified-header {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 48px minmax(64px, 1fr);
min-height: 188px;
height: auto;
padding: 12px 24px 20px;
gap: 8px 20px;
overflow: visible;
z-index: 40;
}
.panel-body .panel-paged-screen > .panel-unified-header.with-environment {
grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
min-height: 200px;
}
.panel-unified-header > img, .panel-unified-header::after { border-radius: inherit; }
.panel-body .panel-unified-header::after {
background: linear-gradient(100deg, rgb(20 39 33 / 80%), rgb(20 39 33 / 60%));
}
.panel-body .panel-unified-header.without-photo::after { background: none; }
.panel-body .panel-unified-header > .panel-topbar {
grid-column: 1 / -1;
grid-row: 1;
height: 48px;
padding: 0;
border: 0;
background: none;
box-sizing: border-box;
width: 100%;
max-width: none;
}
.panel-body .panel-unified-header:not(.without-photo) :is(.panel-back, .panel-brand, .panel-top-actions > a, .panel-menu > summary, .panel-brand > .panel-icon) {
color: white;
}
.panel-body .panel-unified-header:not(.without-photo) :is(.panel-top-actions > a[aria-current="page"], .panel-menu[open] > summary) {
background: var(--hm-soft);
color: var(--hm-green);
}
.panel-body .panel-unified-header:not(.without-photo) :is(.panel-back, .panel-top-actions > a, .panel-menu > summary):active {
color: var(--hm-green);
}
.panel-body .panel-unified-header .panel-brand > span { font-size: 16px; }
.panel-body .panel-unified-header .panel-brand small { font-size: 12px; color: inherit; }
.panel-body .panel-unified-header .panel-menu > div {
color: var(--hm-text);
top: 52px;
max-height: calc(var(--panel-viewport-height, 100dvh) - 100px - var(--panel-safe-top) - var(--panel-safe-bottom));
}
.panel-body .panel-main.panel-paged-screen:has(> .panel-unified-header) { padding-top: max(12px, var(--panel-safe-top)); }
@container panel (max-width: 699px) {
  .panel-body .panel-paged-screen > .panel-unified-header {
    padding: 8px 12px 16px;
    min-height: 172px;
    gap: 8px;
  }
  .panel-body .panel-paged-screen > .panel-unified-header.with-environment {
    grid-template-columns: minmax(0, 1fr) 206px;
    min-height: 188px;
  }
}
@container panel (max-width: 359px) {
  .panel-body .panel-paged-screen > .panel-unified-header.with-environment { grid-template-columns: minmax(0, 1fr); }
}
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  .panel-body .panel-paged-screen > .panel-unified-header {
    min-height: 122px;
    padding: 4px 16px 8px;
    gap: 4px 12px;
  }
  .panel-body .panel-paged-screen > .panel-unified-header.with-environment {
    grid-template-columns: minmax(0, 1fr) 286px;
    min-height: 142px;
    padding: 4px 16px 8px;
    gap: 4px 12px;
  }
  html .panel-body .panel-main.panel-paged-screen:has(> .panel-unified-header) { padding-top: max(6px, var(--panel-safe-top)); }
}