* { box-sizing: border-box; }
html { background: #f6f3e8; color: #20313d; font-family: "Avenir Next", "Avenir", "Century Gothic", -apple-system, "Segoe UI", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 3% 0, #ffedb7 0, rgba(255, 237, 183, 0) 49%), radial-gradient(ellipse at 100% 100%, #e9efdb 0, rgba(233, 239, 219, 0) 43%); }
h1, h2, p { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .14s ease; }
button:focus, input:focus, select:focus { outline: 2px solid #8da8b5; outline-offset: 3px; }
button:active:not(:disabled) { transform: translateY(2px) scale(.98); }
button:disabled { opacity: .45; cursor: default; }
svg { display: block; flex-shrink: 0; }
.hidden { display: none !important; }
.page-shell { width: 100%; height: 100vh; }
.brand { display: flex; align-items: center; font-size: 17px; font-weight: 800; letter-spacing: -.8px; }
.brand-dot { color: #c69033; }
.brand-symbol { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px; background: #20313d; color: #fff2c8; border-radius: 9px; }
.brand-symbol svg { width: 18px; height: 18px; }
.app-main { position: relative; display: flex; flex-direction: column; height: 100%; padding: 12px 20px 12px; max-width: 1500px; margin: 0 auto; }
.app-main > main { display: flex; flex: 1 1 auto; min-height: 0; }
#home-view { display: flex; width: 100%; height: 100%; min-height: 0; }
.devices-column { display: flex; flex-direction: column; width: calc(100% - 276px); min-height: 0; margin-right: 16px; }
.topbar, .status-strip, .header-actions, .page-heading, .overview-heading, .card-top, .card-identity, .section-heading, .integration-row, .action-row { display: flex; align-items: center; }
.topbar { justify-content: space-between; min-height: 44px; flex: 0 0 44px; }
.status-strip { color: #4d5e63; font-size: 10px; font-weight: 600; padding: 9px 12px; border-radius: 11px; background: rgba(255, 255, 255, .76); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 6px rgba(61, 59, 41, .03); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #b29255; margin-right: 8px; display: inline-block; }
.status-dot.online { background: #489279; box-shadow: 0 0 0 3px #eaf4ed; }
.status-dot.offline { background: #b06147; }
.muted { color: #6e7b81; margin-left: 12px; font-size: 9px; }
.header-actions button + button { margin-left: 6px; }
.icon-button, .small-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; background: #fffefa; border: 1px solid #e5e6e5; border-radius: 12px; color: #53616b; font-size: 11px; font-weight: 700; box-shadow: 0 2px 3px rgba(35, 46, 52, .025), inset 0 1px 0 #fff; }
.icon-button { width: 44px; padding: 0; }
.icon-button svg { width: 19px; height: 19px; }
.lock-button svg { width: 16px; height: 16px; margin-right: 7px; }
.page-heading { justify-content: space-between; flex: 0 0 114px; }
.greeting, .heading-balance { width: 33.333%; }
.eyebrow { color: #6d7880; font-size: 9px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px; }
h1 { font-size: 31px; line-height: 1.12; font-weight: 800; letter-spacing: -1.2px; }
h2 { font-size: 17px; line-height: 1.3; font-weight: 800; letter-spacing: -.5px; }
.page-caption { margin-top: 9px; font-size: 13px; color: #6c7865; line-height: 1.5; }
.clock { width: 33.333%; text-align: center; }
.clock-time { font-family: "Avenir Next", "Avenir", "Century Gothic", "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; font-size: 72px; line-height: 1; font-weight: 700; letter-spacing: -4px; }
.clock-label { margin-top: 6px; color: #6d7880; font-size: 8px; font-weight: 700; letter-spacing: 2px; }
.clock-date { font-size: 11px; color: #63717a; margin-top: 8px; font-weight: 500; }
.overview-heading { justify-content: space-between; flex: 0 0 24px; margin-bottom: 0; }
.overview-heading h2 { font-size: 9px; letter-spacing: 1.2px; color: #626f7a; }
.home-summary { display: flex; align-items: center; font-size: 10px; color: #64727a; }
.summary-divider { width: 3px; height: 3px; background: #aab59e; border-radius: 50%; margin: 0 9px; }
.device-list { display: flex; flex: 1 1 auto; min-height: 0; flex-wrap: wrap; align-content: stretch; margin: 0 -6px; }
.device-card { display: flex; flex-direction: column; width: calc(50% - 12px); height: calc(50% - 12px); margin: 6px; padding: 13px 14px; background: rgba(255, 255, 255, .88); border: 1px solid #fff; border-radius: 22px; box-shadow: 0 5px 18px rgba(51, 56, 68, .035), inset 0 1px 0 #fff; animation: card-arrive .5s ease both; }
.device-media_player { background: linear-gradient(135deg, #fffdf7 0, #fff 68%); }
.device-soundbar { background: linear-gradient(135deg, #f9f9ff 0, #fff 68%); }
.device-vacuum { background: linear-gradient(135deg, #fcfaff 0, #fff 68%); }
.device-appliance { background: linear-gradient(135deg, #f6fbf8 0, #fff 68%); }
.device-card:nth-child(2) { animation-delay: .06s; }
.device-card:nth-child(3) { animation-delay: .12s; }
.device-card:nth-child(4) { animation-delay: .18s; }
.card-top { justify-content: space-between; flex: 0 0 34px; margin-bottom: 0; }
.card-identity { min-width: 0; padding-right: 8px; }
.device-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; margin-right: 9px; border-radius: 10px; background: #e7b94c; color: #63420d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(167, 119, 25, .14); }
.device-icon svg { width: 19px; height: 19px; }
.device-vacuum .device-icon { background: #a69bc9; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(117, 91, 150, .12); }
.device-appliance .device-icon { background: #77aaa0; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(80, 130, 116, .12); }
.device-soundbar .device-icon { background: #839ac5; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(96, 116, 171, .12); }
.domain-label { color: #6e7b85; font-size: 8px; font-weight: 800; letter-spacing: .8px; margin-bottom: 3px; }
.device-name { font-size: 13px; font-weight: 800; line-height: 1.3; word-wrap: break-word; letter-spacing: -.4px; }
.state-pill { flex: 0 0 auto; max-width: 105px; padding: 5px 8px; border-radius: 8px; background: #f1f2f4; color: #65727c; font-size: 9px; font-weight: 700; text-align: center; }
.state-pill.good { background: #e9f4ec; color: #387c62; }
.state-pill.warn { background: #fbecd8; color: #916325; }
.device-overview { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; min-height: 52px; padding: 5px 0; }
.device-reading { min-width: 0; width: 58%; }
.device-state { font-size: 24px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; }
.device-state.numeric { font-size: 34px; letter-spacing: -1.8px; }
.metric-unit { font-size: 17px; margin-left: 2px; letter-spacing: -.5px; }
.reading-label { margin-top: 3px; font-size: 8px; letter-spacing: 1px; color: #73808a; font-weight: 800; }
.details { margin-top: 4px; color: #64747e; font-size: 10px; line-height: 1.3; }
.device-art { width: 42%; max-width: 135px; }
.device-art svg { width: 100%; height: 68px; }
.device-appliance .device-overview { min-height: 36px; }
.device-appliance .details { display: none; }
.device-media_player:not(.device-active) .device-art { opacity: .65; }
.action-row { flex-wrap: wrap; margin: -4px; flex: 0 0 auto; }
.action-row > button { margin: 4px; flex: 1 0 auto; }
.device-card .action-row > button { flex: 1 1 0; min-width: 0; padding: 5px 3px; font-size: 11px; line-height: 1.15; flex-direction: column; }
.device-card .action-row svg { width: 15px; height: 15px; margin: 0 0 3px; }
.action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 13px; background: #d9b365; border: 1px solid #d1a753; border-radius: 12px; color: #473411; font-size: 12px; font-weight: 700; box-shadow: 0 2px 4px rgba(118, 93, 33, .08), inset 0 1px 0 rgba(255, 255, 255, .4); }
.action-button svg { width: 17px; height: 17px; margin-right: 7px; }
.action-button.secondary { color: #606f7d; background: #f3f5f8; border-color: #e5e8ed; box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(31, 45, 65, .025); }
.action-button.stop { color: #9a6657; background: #f7efec; border-color: #ecdeda; box-shadow: inset 0 1px 0 #fff; }
.device-soundbar .action-button:not(.secondary):not(.stop) { color: #314e77; background: #dce6f4; border-color: #c5d3e9; }
.device-vacuum .action-button:not(.secondary):not(.stop) { color: #5d497f; background: #e7e0f0; border-color: #d3c6e4; }
.device-appliance .action-button:not(.secondary):not(.stop) { color: #31675c; background: #deeee7; border-color: #bfd9ce; }
.action-button.busy { opacity: .65; }
.volume-control { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; margin-top: 6px; padding: 1px; border: 1px solid #e8ebef; border-radius: 12px; background: #f5f6f8; }
.volume-control .action-button { width: 43px; min-height: 42px; padding: 0; flex-shrink: 0; background: #fcfdfe; color: #627082; border-color: transparent; box-shadow: none; border-radius: 10px; }
.volume-control svg { margin: 0; width: 16px; height: 16px; }
.volume-value { display: flex; align-items: center; font-size: 10px; color: #73808c; }
.volume-value svg { width: 16px; height: 16px; margin-right: 8px; }
.volume-value strong { margin-left: 8px; color: #344654; font-size: 13px; }
.sync-note { color: #758188; font-size: 8px; line-height: 1.4; flex: 0 0 14px; padding-top: 2px; }
.empty-card { width: 100%; margin: 8px; padding: 28px; border: 1px solid #e2e6db; border-radius: 22px; background: #fdfdf8; color: #687462; font-size: 14px; line-height: 1.6; }
.setup-card { margin: 0 0 18px; padding: 25px; background: #fffefa; border: 1px solid #e6e8e8; border-radius: 20px; }
.section-heading { margin-bottom: 22px; }
.integration-row { justify-content: space-between; min-height: 83px; padding: 14px 0; border-top: 1px solid #e7eadf; }
.integration-row > div:first-child { padding-right: 12px; }
.integration-row strong, .integration-status { display: block; }
.integration-row strong { font-size: 14px; font-weight: 600; }
.integration-status { color: #6c7865; font-size: 12px; margin-top: 5px; line-height: 1.5; }
.integration-buttons { flex-shrink: 0; }
.integration-buttons .small-button + .small-button { margin-left: 5px; }
.setup-guide { color: #62715b; font-size: 14px; line-height: 1.65; margin: 18px 0; }
.setup-guide p { margin: 12px 0; }
.setup-guide a { color: #3f643f; }
.setup-field { margin: 18px 0; }
.setup-field label, .vacuum-label { display: block; color: #62715b; font-size: 12px; margin-bottom: 8px; }
.setup-field input, .setup-field select, .vacuum-field select { width: 100%; min-height: 48px; border: 1px solid #e2e7e7; border-radius: 12px; background: #f4f6f7; color: #3a5360; padding: 10px 12px; font: inherit; font-size: 16px; }
.setup-field input[readonly] { font-size: 12px; }
.setup-error { color: #9c4f39; font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.footnote { color: #6d7963; font-size: 11px; line-height: 1.65; margin-top: 12px; }
.notice { position: fixed; top: 65px; left: 50%; width: 420px; max-width: 90%; transform: translateX(-50%); z-index: 30; padding: 14px 17px; border: 1px solid #d5e1c7; border-radius: 13px; background: #edf3e5; color: #476538; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 30px rgba(38, 59, 48, .12); }
.notice.error { background: #f7ece5; border-color: #ead5c6; color: #905039; }
.vacuum-panel { margin-top: 6px; flex: 0 0 auto; }
.vacuum-toolbar .small-button { width: calc(100% - 8px); background: #f5f3f9; border-color: #e8e2f0; color: #726586; font-size: 10px; }
.appliance-panel { display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; margin-top: 6px; padding-top: 5px; border-top: 1px solid #e9efec; }
.appliance-panel .vacuum-field { width: calc(100% - 68px); margin: 0 8px 0 0; }
.appliance-panel .vacuum-label { display: none; }
.appliance-panel .small-button { width: 60px; padding: 0; }
.appliance-panel .footnote { width: 100%; font-size: 9px; line-height: 1.4; margin-top: 4px; color: #688079; }
.appliance-panel select { min-height: 44px; padding: 8px; font-size: 16px; }
.vacuum-toolbar { display: flex; flex-wrap: wrap; margin: -4px; }
.vacuum-toolbar button { margin: 4px; }
.vacuum-map-title { margin: 17px 0 10px; color: #58694f; font-size: 13px; font-weight: 600; }
.vacuum-map { display: block; width: 100%; height: auto; background: #f0f2e9; border-radius: 14px; cursor: pointer; }
.vacuum-rooms { display: flex; flex-wrap: wrap; margin: 10px -3px 0; }
.room-button { margin: 3px; min-height: 46px; padding: 8px 11px; color: #726586; background: #f4f2f8; border: 1px solid #e5dfee; border-radius: 11px; font-size: 13px; }
.room-button.selected { background: #756193; border-color: #756193; color: white; }
.vacuum-fields { margin-top: 17px; }
.vacuum-field { display: block; margin: 14px 0; }
.vacuum-start { margin-top: 15px; width: 100%; }
footer { display: flex; justify-content: space-between; color: #727d69; font-size: 10px; padding: 26px 0 15px; }
footer span:first-child { font-weight: 650; letter-spacing: -.3px; }
.lock-screen { min-height: 100vh; padding: 40px 20px; text-align: center; background: radial-gradient(ellipse at 50% 20%, #fff0be 0, #f6f3e8 65%); }
.pin-card { max-width: 408px; margin: 7vh auto 0; padding: 40px 34px 32px; border: 1px solid #fff; border-radius: 28px; background: #fffdf9; box-shadow: 0 14px 50px rgba(76, 70, 49, .065); animation: card-arrive .5s ease both; }
.login-mark { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin: 0 auto 25px; border-radius: 22px; color: #fff0c5; background: #20313d; box-shadow: 0 5px 12px rgba(32, 49, 61, .12); }
.login-mark svg { width: 34px; height: 34px; }
.pin-card h1 { font-size: 34px; letter-spacing: -1px; }
.login-caption { margin-top: 12px; color: #6c7865; font-size: 13px; }
.pin-card label { display: block; margin: 30px 0 12px; color: #65745c; font-size: 12px; }
.pin-card input { width: 100%; min-height: 62px; border: 1px solid #e5e8eb; border-radius: 14px; background: #f4f5f7; color: #20313d; font-size: 28px; text-align: center; letter-spacing: 16px; padding-left: 16px; }
.pin-card .action-button { width: 100%; min-height: 52px; font-size: 14px; }
#pin-error { min-height: 46px; padding: 12px 0; color: #9c4f39; font-size: 12px; line-height: 1.5; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) {
  button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(54, 88, 63, .1); }
  .action-button:hover:not(:disabled) { border-color: #b99b58; box-shadow: 0 4px 10px rgba(87, 81, 48, .12); }
  .action-button.secondary:hover:not(:disabled) { background: #eaf0f6; }
  .action-button.stop:hover:not(:disabled) { background: #f0e1da; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.shopping-card { background: rgba(255, 255, 255, .9); border: 1px solid #fff; border-radius: 22px; box-shadow: 0 5px 18px rgba(51, 56, 68, .035); }
.shopping-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex: 0 0 auto; }
.shopping-heading .eyebrow { margin-bottom: 4px; font-size: 8px; }
.shopping-heading h2 { font-size: 23px; letter-spacing: -1px; }
.shopping-heading-dot { color: #c7902c; }
.shopping-count { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: #f8edcf; border: 1px solid #efddb2; font-size: 12px; font-weight: 700; color: #8b682b; }
.shopping-form { display: flex; flex: 0 0 44px; }
.shopping-form input { width: calc(100% - 50px); min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid #e3e8ee; border-radius: 11px; color: #344956; background: #f4f6f8; font-size: 16px; }
.shopping-form .action-button { width: 44px; min-height: 44px; padding: 0; margin-left: 6px; font-size: 22px; font-weight: 400; }
.shopping-error { flex: 0 0 auto; color: #945238; font-size: 10px; line-height: 1.4; margin-top: 6px; }
.shopping-items { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 8px 0 6px; padding: 0; list-style: none; }
.shopping-item { display: flex; align-items: center; height: calc(10% - 4px); flex: 0 0 calc(10% - 4px); min-height: 0; margin-bottom: 4px; border: 1px solid #eef0f3; background: #f5f6f8; border-radius: 10px; }
.shopping-check { display: flex; align-items: center; justify-content: center; width: 44px; height: 100%; min-height: 0; flex: 0 0 44px; padding: 0; color: #fff; background: transparent; border: 0; position: relative; font-size: 13px; }
.shopping-check:before { content: ""; position: absolute; width: 19px; height: 19px; border: 1px solid #c7d0db; background: #fff; border-radius: 50%; z-index: 0; }
.shopping-check-glyph { position: relative; z-index: 1; }
.purchased .shopping-check { color: #fff; }
.purchased .shopping-check:before { background: #79a593; border-color: #79a593; }
.shopping-label { flex: 1 1 auto; min-width: 0; color: #384c5c; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.purchased .shopping-label { text-decoration: line-through; color: #87959f; }
.shopping-remove { display: flex; align-items: center; justify-content: center; width: 36px; height: 100%; min-height: 0; padding: 0; flex: 0 0 36px; color: #93a0ac; background: transparent; border: 0; }
.shopping-remove svg { width: 14px; height: 14px; }
.shopping-empty { padding: 22px 5px; color: #73818c; font-size: 11px; text-align: center; }
.shopping-empty svg { width: 42px; height: 42px; padding: 8px; margin: 0 auto 13px; border-radius: 14px; background: #fbf3df; color: #b39454; }
.shopping-empty strong { display: block; font-size: 12px; color: #536979; margin-bottom: 5px; }
.shopping-empty span { display: block; }
.shopping-pagination { display: flex; align-items: center; justify-content: space-between; flex: 0 0 44px; }
.shopping-pagination .small-button { width: 40px; min-height: 44px; padding: 0; background: #f4f6f8; border-color: #e9edf1; }
.shopping-pagination svg, .shopping-form button svg { width: 16px; height: 16px; margin: 0; }
.shopping-pagination span { font-size: 9px; color: #778794; }
.device-dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(38, 59, 48, .24); }
.dialog-card { width: 760px; max-width: 100%; max-height: 100%; padding: 22px; border-radius: 24px; border: 1px solid #fff; background: #f6f4ec; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 20px 70px rgba(38, 59, 48, .15); }
.dialog-heading { display: flex; align-items: center; margin-bottom: 18px; }
.dialog-heading h2 { margin-right: auto; }
.dialog-heading button { margin-left: 8px; }
.dialog-card .vacuum-map { max-height: 280px; width: auto; max-width: 100%; margin: 0 auto; }
.device-dialog .vacuum-fields { display: flex; flex-wrap: wrap; margin: 14px -5px 0; }
.device-dialog .vacuum-fields .vacuum-field { width: calc(33.333% - 10px); margin: 8px 5px; }
@media (max-height: 690px) and (min-width: 700px) {
  .page-heading { flex-basis: 100px; }
  .clock-time { font-size: 66px; }
  .device-card { padding: 10px 12px; }
  .device-art svg { height: 58px; }
  .device-appliance .device-art svg { height: 40px; }
  .device-appliance .device-state { font-size: 21px; }
}
@media (max-height: 620px) and (min-width: 700px) {
  .page-heading { flex-basis: 82px; }
  .clock-time { font-size: 56px; }
  .clock-date { margin-top: 6px; font-size: 11px; }
  .device-card { padding-top: 8px; padding-bottom: 8px; }
  .device-art svg { height: 48px; }
  .device-appliance .device-art svg { height: 34px; }
  .device-state { font-size: 21px; }
  .device-state.numeric { font-size: 28px; }
  .device-media_player .details { display: none; }
}
@media (max-width: 850px) and (min-width: 700px) {
  .app-main { padding-left: 16px; padding-right: 16px; }
  .device-name { font-size: 13px; }
  .state-pill { font-size: 9px; padding: 5px 7px; }
  .muted { display: none; }
}
@media (max-width: 699px) {
  .page-shell { height: auto !important; }
  .app-main { padding: 12px 14px; }
  .brand { font-size: 17px; }
  .topbar .status-strip { display: none; }
  .page-heading { min-height: 118px; }
  .clock-time { font-size: 76px; }
  .heading-balance { display: none; }
  .greeting { width: 50%; }
  .greeting h1 { font-size: 23px; }
  .clock { width: 50%; }
  #home-view { flex-direction: column; }
  .devices-column { width: 100%; margin: 0; }
  .device-list { min-height: 460px; }
  .device-card { min-height: 218px; }
  .shopping-card { position: static; width: 100%; height: 680px; flex: 0 0 680px; margin-top: 18px; }
  .dialog-card { padding: 16px; }
  .device-dialog { padding: 12px; }
  .setup-card { padding: 18px; }
  .integration-row { flex-wrap: wrap; }
  .integration-buttons { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } }

/* Wall panel: four devices above a shared calendar and shopping row. */
#home-view { flex-direction: column; }
.devices-column { width: 100%; margin: 0; flex: 1 1 auto; min-height: 0; }
.device-card { width: calc(25% - 12px); height: calc(100% - 12px); padding: 10px 12px; border-radius: 19px; }
.device-name { font-size: 12px; }
.card-identity { padding-right: 4px; }
.device-icon { width: 28px; height: 28px; flex-basis: 28px; margin-right: 7px; }
.state-pill { font-size: 8px; padding: 4px 6px; max-width: 66px; }
.device-card .action-row > button { font-size: 10px; min-height: 40px; margin: 3px; }
.device-card .action-row { margin: -3px; }
.volume-control .action-button { width: 34px; min-height: 38px; }
.volume-value { font-size: 8px; }
.volume-value svg { display: none; }
.volume-value strong { margin-left: 4px; }
.device-overview { min-height: 40px; }
.device-art svg { height: 62px; }
.device-state { font-size: 22px; }
.device-state.numeric { font-size: 32px; }
.device-vacuum .device-overview { flex: 1 1 auto; min-height: 28px; padding: 3px 0; }
.device-vacuum .device-reading { display: flex; align-items: baseline; width: 100%; }
.device-vacuum .device-state.numeric { font-size: 22px; letter-spacing: -.7px; }
.device-vacuum .metric-unit { font-size: 11px; }
.device-vacuum .reading-label { margin: 0 0 0 6px; font-size: 7px; }
.device-vacuum .details, .device-vacuum .device-art { display: none; }
.vacuum-panel { margin-top: 6px; }
.vacuum-toolbar { margin: 0; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.compact-vacuum-title { font-size: 7px; font-weight: 800; letter-spacing: .8px; color: #81718f; }
.vacuum-toolbar .small-button { min-height: 22px; width: auto; margin: 0; padding: 0 8px; font-size: 9px; border-radius: 7px; }
.vacuum-compact { display: flex; flex-wrap: wrap; align-items: center; margin: 2px -2px 0; }
.vacuum-compact .vacuum-field, .vacuum-compact .compact-start { width: calc(50% - 4px); margin: 2px; }
.vacuum-compact .vacuum-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.vacuum-compact select { min-height: 32px; height: 32px; font-size: 11px; padding: 3px 4px; border-radius: 8px; background: #f4f1f8; border-color: #e6dfef; }
.vacuum-compact .compact-start { min-height: 32px; font-size: 10px; padding: 0 3px; border-radius: 8px; }
.compact-vacuum-hint { font-size: 8px; line-height: 1.35; color: #81718f; margin-top: 3px; max-height: 23px; overflow: hidden; }
.planning-row { display: flex; flex: 0 0 44%; min-height: 210px; padding-top: 8px; }
.calendar-card, .shopping-card { position: static; display: flex; flex-direction: column; width: calc(50% - 6px); height: 100%; min-height: 0; margin: 0; padding: 12px 14px 9px; border-radius: 19px; background: rgba(255,255,255,.9); border: 1px solid #fff; box-shadow: 0 5px 18px rgba(51,56,68,.035); }
.calendar-card { margin-right: 12px; }
.calendar-heading, .calendar-actions { display: flex; align-items: center; justify-content: space-between; }
.calendar-heading { flex: 0 0 35px; margin-bottom: 4px; }
.calendar-heading .eyebrow, .shopping-heading .eyebrow { margin-bottom: 2px; font-size: 7px; }
.calendar-heading h2, .shopping-heading h2 { font-size: 17px; letter-spacing: -.6px; }
.calendar-actions .small-button { min-height: 30px; font-size: 9px; padding: 0 8px; margin-left: 3px; border-radius: 8px; }
.calendar-actions svg { width: 13px; height: 13px; }
.calendar-weekdays { display: flex; flex: 0 0 17px; }
.calendar-weekdays span { width: 14.2857%; font-size: 8px; color: #92a0a7; text-align: center; }
.calendar-days { display: flex; flex-wrap: wrap; flex: 1 1 auto; min-height: 0; align-content: stretch; }
.calendar-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 14.2857%; height: 16.6667%; min-height: 0; border: 0; border-radius: 8px; padding: 1px 3px; background: transparent; color: #3c5260; overflow: hidden; }
.calendar-number { font-size: 10px; font-weight: 700; }
.calendar-day.outside { color: #b2bac0; }
.calendar-day.today { background: #faf0d7; color: #997225; }
.calendar-preview { font-size: 7px; line-height: 1.1; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; }
.calendar-dots { display: flex; height: 4px; margin-top: 1px; }
.calendar-dots i { width: 3px; height: 3px; margin: 0 1px; background: #ad9872; border-radius: 50%; }
.calendar-dots .feed-color-1 { background: #83a5a0; }
.calendar-dots .feed-color-2 { background: #9b8ab8; }
.calendar-status { font-size: 8px; line-height: 13px; flex: 0 0 13px; color: #84929a; margin-top: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.shopping-toolbar { display: flex; align-items: center; flex: 0 0 35px; }
.shopping-heading { width: 47%; margin: 0 10px 0 0; }
.shopping-count { width: 23px; height: 23px; border-radius: 8px; margin-left: 5px; font-size: 10px; }
.shopping-form { flex: 1 1 auto; min-width: 0; }
.shopping-form input { width: calc(100% - 37px); min-height: 32px; height: 32px; padding: 4px 8px; font-size: 16px; border-radius: 8px; }
.shopping-form .action-button { width: 32px; min-height: 32px; height: 32px; margin-left: 5px; border-radius: 8px; }
.shopping-error { margin-top: 3px; }
.shopping-items { flex-direction: row; flex-wrap: wrap; align-content: flex-start; margin: 5px -3px 3px; }
.shopping-item { width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); margin: 0 3px 4px; border-radius: 8px; }
.shopping-check { width: 31px; flex-basis: 31px; }
.shopping-check:before { width: 15px; height: 15px; }
.shopping-label { font-size: 11px; }
.shopping-remove { width: 26px; flex-basis: 26px; }
.shopping-remove svg { width: 12px; height: 12px; }
.shopping-pagination { flex: 0 0 27px; }
.shopping-pagination .small-button { min-height: 27px; height: 27px; width: 32px; border-radius: 8px; }
.shopping-empty { width: 100%; padding: 12px 0; }
.shopping-empty svg { margin-bottom: 6px; }
.calendar-agenda-item, .calendar-feed-row { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid #e3e6dd; font-size: 14px; }
.calendar-agenda-time { width: 85px; flex: 0 0 85px; font-size: 12px; color: #8b7755; }
.calendar-agenda-item .footnote, .calendar-feed-row .footnote { margin-top: 3px; }
.calendar-feed-row { justify-content: space-between; }
.today-events { display: block; padding-left: 16px; border-left: 1px solid rgba(135, 124, 95, .16); }
.today-events h2 { font-size: 8px; line-height: 12px; color: #8d8069; letter-spacing: 1.2px; margin-bottom: 4px; }
.today-events > button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: #3d5260; text-align: left; border-radius: 5px; box-shadow: none; }
.today-event { display: block; height: 20px; line-height: 20px; }
.today-event-time { display: block; float: left; width: 68px; color: #9b7a39; font-size: 10px; font-weight: 700; }
.today-event-title { display: block; margin-left: 73px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#today-events-note { display: block; font-size: 9px; line-height: 13px; color: #8b9598; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 36px; height: 36px; margin-top: 6px; padding: 0; }
.panel-footer .brand { font-size: 13px; color: #8b9291; }
.panel-footer .brand-symbol { width: 22px; height: 22px; margin-right: 6px; border-radius: 7px; }
.panel-footer .brand-symbol svg { width: 14px; height: 14px; }
.panel-footer .small-button { min-height: 36px; height: 36px; padding: 0 12px; font-size: 10px; border-radius: 9px; }
/* A growing page: device rows, full-width calendar, then two shared lists.
   Floats and definite inner heights keep the layout reliable on iOS 10. */
.page-shell { height: auto; min-height: 100vh; }
body.wall-open { min-height: 100vh; overflow: auto; }
.app-main, .wall-panel .app-main { display: block; height: auto; padding: 8px; }
.app-main > main, .wall-panel .app-main > main { position: static; display: block; height: auto; min-height: 0; }
#home-view, .wall-panel #home-view { position: static; display: block; height: auto; }
.page-heading, .wall-panel .page-heading { position: static; height: 90px; min-height: 90px; margin-bottom: 4px; }
.wall-panel .clock-time { font-size: 68px; }
.wall-panel .greeting h1 { font-size: 27px; }
.devices-column, .wall-panel .devices-column { position: static; display: block; width: 100%; height: auto; min-height: 0; margin: 0; }
.overview-heading, .wall-panel .overview-heading { position: static; height: 20px; margin-bottom: 4px; }
.device-list, .wall-panel .device-list { position: static; display: block; min-height: 0; margin: 0; }
.device-list:after, .lists-row:after { content: ""; display: block; clear: both; }
.device-card, .wall-panel .device-card { float: left; width: calc(25% - 4.5px); height: 240px; min-height: 0; margin: 0 6px 6px 0; padding: 10px; }
.device-card:nth-child(4n) { margin-right: 0; }
.wall-panel .device-card { animation: none; }
.sync-note, .wall-panel .sync-note { position: static; height: auto; padding: 0; margin-top: 2px; font-size: 8px; white-space: normal; }
.panel-footer, .wall-panel .panel-footer { position: relative; top: auto; right: auto; bottom: auto; left: auto; clear: both; height: 40px; margin-top: 6px; }
.wall-panel .card-top { flex: 0 0 30px; min-height: 30px; }
.wall-panel .card-identity { flex: 1 1 auto; min-width: 0; }
.wall-panel .card-identity > div:last-child { min-width: 0; }
.wall-panel .device-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.wall-panel .domain-label { font-size: 7px; margin-bottom: 2px; }
.wall-panel .device-overview { flex: 1 1 0; min-height: 0; padding: 4px 0; overflow: hidden; }
.wall-panel .device-art svg { height: 48px; }
.wall-panel .device-state { font-size: 21px; }
.wall-panel .device-state.numeric { font-size: 29px; }
.wall-panel .device-vacuum .device-state.numeric { font-size: 21px; }
.wall-panel .device-media_player .details { font-size: 9px; max-height: 24px; overflow: hidden; }
.wall-panel .device-card .action-row { display: block; flex: 0 0 42px; height: 42px; margin: 0 -3px; }
.wall-panel .device-card .action-row > button { display: block; float: left; margin: 2px 3px; height: 38px; min-height: 38px; padding: 3px 1px; text-align: center; font-size: 10px; }
.wall-panel .device-card .action-row svg { display: block; margin: 0 auto 2px; width: 14px; height: 14px; }
.wall-panel .device-card .action-row > button span { display: block; }
.wall-panel .volume-control { flex: 0 0 38px; height: 38px; margin-top: 4px; }
.wall-panel .volume-control .action-button { display: block; min-height: 34px; height: 34px; width: 34px; }
.wall-panel .volume-control .action-button svg { margin: 0 auto; }
.wall-panel .appliance-panel { margin-top: 4px; padding-top: 4px; }
.wall-panel .appliance-panel select { min-height: 36px; height: 36px; padding: 4px; font-size: 16px; }
.wall-panel .appliance-panel .small-button { min-height: 36px; height: 36px; }
.wall-panel .appliance-panel .footnote { font-size: 8px; line-height: 11px; margin-top: 3px; }
.wall-panel .vacuum-panel { margin-top: 4px; }
.wall-panel .vacuum-toolbar { height: 20px; }
.wall-panel .vacuum-toolbar .small-button { min-height: 20px; height: 20px; }
.wall-panel .vacuum-compact { display: block; height: 72px; margin: 2px -2px 0; }
.wall-panel .vacuum-compact .vacuum-field, .wall-panel .vacuum-compact .compact-start { display: block; float: left; height: 32px; min-height: 32px; }
.wall-panel .vacuum-compact .compact-start { text-align: center; }
.wall-panel .vacuum-compact select { font-size: 16px; padding: 2px; }
.wall-panel .compact-vacuum-hint { height: 11px; max-height: 11px; margin-top: 2px; line-height: 11px; white-space: nowrap; text-overflow: ellipsis; }

.planning-row, .wall-panel .planning-row { position: static; display: block; width: 100%; height: auto; min-height: 0; padding-top: 18px; }
.calendar-card, .wall-panel .calendar-card { position: relative; display: block; width: 100%; height: 500px; min-height: 0; margin: 0; padding: 14px; border-radius: 19px; }
.calendar-heading, .wall-panel .calendar-heading { position: absolute; top: 10px; left: 14px; right: 14px; height: 36px; margin: 0; flex-wrap: nowrap; }
.calendar-heading h2, .wall-panel .calendar-heading h2 { font-size: 23px; white-space: nowrap; }
.calendar-heading .eyebrow { font-size: 8px; margin-bottom: 3px; }
.calendar-actions .small-button, .wall-panel .calendar-actions .small-button { min-height: 38px; padding: 0 12px; font-size: 11px; border-radius: 10px; }
.calendar-weekdays, .wall-panel .calendar-weekdays { position: absolute; top: 53px; left: 14px; right: 14px; height: 20px; display: block; }
.calendar-weekdays span { display: block; float: left; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.calendar-days, .wall-panel .calendar-days { position: absolute; top: 76px; bottom: 24px; left: 14px; right: 14px; display: block; min-height: 0; }
.calendar-day, .wall-panel .calendar-day { display: block; float: left; width: 14.2857%; height: 16.6667%; min-height: 0; padding: 5px 6px 3px; text-align: left; border-radius: 0; border-top: 1px solid #edf0ec; border-right: 1px solid #f2f3ef; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.today { border-radius: 10px; background: #faf0d7; }
.calendar-day.outside { background: #fcfcf9; }
.calendar-day.today.outside { background: #faf0d7; }
.calendar-number, .wall-panel .calendar-number { display: block; font-size: 16px; line-height: 18px; margin-bottom: 2px; }
.calendar-preview, .wall-panel .calendar-preview { display: block; font-size: 10px; line-height: 12px; text-align: left; color: #71818a; }
.calendar-more { display: block; color: #a08b66; font-size: 9px; line-height: 11px; }
.calendar-dots, .wall-panel .calendar-dots { display: none; }
.calendar-status, .wall-panel .calendar-status { position: absolute; bottom: 6px; left: 14px; right: 14px; height: 14px; margin: 0; font-size: 10px; }
.lists-row { position: relative; display: block; min-height: 360px; margin-top: 6px; }
.shopping-card, .wall-panel .shopping-card { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: block; float: left; width: calc(50% - 3px); height: 360px; min-height: 0; margin: 0 6px 0 0; padding: 12px; border-radius: 19px; }
.shopping-card:last-child { margin-right: 0; }
.shopping-toolbar, .wall-panel .shopping-toolbar { position: absolute; top: 10px; left: 12px; right: 12px; height: 40px; margin: 0; display: flex; align-items: center; flex-wrap: nowrap; }
.shopping-heading, .wall-panel .shopping-heading { flex: 0 0 44%; width: 44%; min-width: 0; margin: 0 10px 0 0; }
.shopping-heading h2, .wall-panel .shopping-heading h2 { font-size: 21px; white-space: nowrap; }
.shopping-form, .wall-panel .shopping-form { flex: 1 1 auto; min-width: 0; height: 40px; }
.shopping-form input { width: calc(100% - 44px); flex: 1 1 auto; min-height: 40px; height: 40px; font-size: 16px; }
.shopping-form .action-button, .wall-panel .shopping-form .action-button { flex: 0 0 38px; width: 38px; min-height: 40px; height: 40px; }
.shopping-error, .wall-panel .shopping-error { position: absolute; bottom: 40px; left: 12px; right: 12px; height: 14px; line-height: 14px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopping-error:empty { display: none; }
.shopping-items, .wall-panel .shopping-items { position: absolute; top: 60px; bottom: 54px; left: 9px; right: 9px; display: block; min-height: 0; margin: 0; }
.shopping-item, .wall-panel .shopping-item { float: left; width: calc(50% - 6px); margin: 0 3px 4px; }
.shopping-check { width: 34px; flex-basis: 34px; }
.shopping-remove { width: 30px; flex-basis: 30px; }
.shopping-pagination, .wall-panel .shopping-pagination { position: absolute; bottom: 6px; left: 12px; right: 12px; height: 30px; }
.shopping-pagination .small-button { min-height: 32px; height: 32px; }
.shopping-empty { float: none; width: 100%; margin: 0; padding-top: 65px; }
@media (max-width: 900px) {
  .device-card { width: calc(50% - 3px); height: 270px; }
  .device-card:nth-child(2n) { margin-right: 0; }
  .calendar-card { height: 500px; }
  .shopping-toolbar { height: 84px; flex-wrap: wrap; }
  .shopping-heading { flex: 0 0 100%; width: 100%; margin: 0 0 6px; }
  .shopping-items { top: 100px; }
}
@media (max-width: 699px) {
  .page-heading { height: auto; min-height: 118px; flex-wrap: wrap; }
  .heading-balance.today-events { display: block; width: 100%; padding: 10px 0; margin-top: 8px; border-left: 0; border-top: 1px solid #e7e2d5; }
  .calendar-card { height: 500px; margin: 0; }
  .calendar-heading { top: 14px; left: 12px; right: 12px; height: 62px; flex-wrap: wrap; align-content: space-between; }
  .calendar-heading > div:first-child { width: 100%; }
  .calendar-heading h2 { font-size: 20px; }
  .calendar-heading .eyebrow { display: none; }
  .calendar-actions .small-button { min-height: 32px; padding: 0 10px; font-size: 10px; }
  .calendar-weekdays { top: 80px; left: 8px; right: 8px; }
  .calendar-days { top: 99px; left: 8px; right: 8px; }
  .calendar-day { padding: 5px 3px 3px; }
  .calendar-number { font-size: 14px; }
  .calendar-preview { font-size: 8px; line-height: 11px; }
  .calendar-more { font-size: 8px; line-height: 10px; }
  .calendar-status { left: 12px; right: 12px; font-size: 8px; }
  .lists-row { min-height: 0; margin-top: 6px; }
  .shopping-card, .shopping-card:last-child { float: none; width: 100%; height: 640px; margin: 0 0 6px; }
  .shopping-toolbar { height: 84px; }
  .shopping-heading { width: 100%; margin: 0 0 6px; }
  .shopping-items { top: 100px; }
  .shopping-item { width: calc(100% - 6px); }
  .shopping-label { font-size: 14px; }
  .shopping-check { width: 40px; flex-basis: 40px; }
  .panel-footer { height: auto; display: block; }
  .panel-footer .brand { margin-bottom: 6px; }
  .panel-footer .header-actions { flex-wrap: wrap; }
  .panel-footer .small-button { padding: 0 10px; }
}
@media (max-width: 419px) {
  .device-card { width: 100%; margin-right: 0; }
}

/* Uniform module spacing, regardless of the chosen section order. */
#home-view > * { margin-top: 6px; }
#home-view > :first-child { margin-top: 0; }
.arrange-dialog { position: relative; width: 650px; height: calc(100vh - 48px); max-height: 720px; padding: 18px; overflow: hidden; }
.arrange-caption { margin-top: 6px; color: #758189; font-size: 12px; line-height: 1.5; }
.arrange-groups { position: absolute; top: 100px; bottom: 104px; left: 18px; right: 18px; margin: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.arrange-group + .arrange-group { margin-top: 14px; }
.arrange-group-title { margin: 0 0 5px; font-size: 10px; font-weight: 800; letter-spacing: .6px; color: #7f898c; }
.arrange-row { display: flex; align-items: center; min-height: 48px; padding: 2px 3px 2px 10px; margin-top: 4px; border-radius: 12px; background: #fffdf7; border: 1px solid #e9e7dd; }
.arrange-position { width: 22px; flex: 0 0 22px; color: #b09a6e; font-size: 11px; }
.arrange-name { flex: 1 1 auto; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrange-moves { display: flex; flex: 0 0 auto; margin-left: 8px; }
.arrange-move { display: block; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; box-shadow: none; background: #f4f3ee; }
.arrange-move + .arrange-move { margin-left: 4px; }
.arrange-move svg { width: 18px; height: 18px; margin: 12px auto; }
.arrange-feedback { position: absolute; bottom: 68px; left: 18px; right: 18px; height: 30px; overflow-y: auto; margin: 0; color: #8b7452; font-size: 11px; line-height: 1.5; }
.arrange-footer { position: absolute; bottom: 18px; left: 18px; right: 18px; height: 44px; display: flex; justify-content: flex-end; align-items: center; margin: 0; }
.arrange-footer button { margin-left: 6px; min-height: 44px; }
.arrange-footer button:first-child { margin-left: 0; margin-right: auto; }
@media (max-width: 699px) {
  .arrange-dialog { height: calc(100vh - 24px); }
  .arrange-caption { font-size: 11px; }
  .arrange-groups { top: 124px; }
}

/* Theme controls stay in the footer; explicit colors work without CSS variables on iOS 10. */
.theme-control { position: relative; display: inline-block; flex: 0 0 auto; margin-right: 6px; }
.theme-toggle svg { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: middle; }
.theme-toggle span { display: inline-block; vertical-align: middle; }
.theme-menu { position: absolute; left: 0; bottom: 44px; z-index: 15; width: 230px; padding: 6px; border: 1px solid #e7e4da; border-radius: 14px; background: #fffdf8; box-shadow: 0 8px 30px rgba(31,44,53,.16); }
.header-actions .theme-menu button { position: relative; display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px 30px 10px 12px; border: 0; border-radius: 9px; background: transparent; color: #53616b; text-align: left; font-size: 12px; font-weight: 700; }
.theme-menu button span { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; color: #839096; }
.theme-menu button[aria-checked="true"] { background: #faf0d7; color: #8d6826; }
.theme-menu button[aria-checked="true"]:after { content: "✓"; position: absolute; right: 12px; top: 12px; }
@media (max-width: 699px) {
  .theme-control { margin-bottom: 4px; }
  .panel-footer .header-actions > button { margin-bottom: 4px; }
}

/* Warm night palette: all panels, dialogs and the PIN screen use the same theme. */
html[data-theme="dark"] { background: #151c22; color: #e7ece9; }
html[data-theme="dark"] body { background: radial-gradient(ellipse at 3% 0, #2a2820 0, rgba(42,40,32,0) 49%), radial-gradient(ellipse at 100% 100%, #1a2b28 0, rgba(26,43,40,0) 43%); }
html[data-theme="dark"] button:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus { outline-color: #c6b182; }
html[data-theme="dark"] .device-card, html[data-theme="dark"] .calendar-card, html[data-theme="dark"] .shopping-card,
html[data-theme="dark"] .setup-card, html[data-theme="dark"] .pin-card, html[data-theme="dark"] .empty-card { background: #202931; color: #e7ece9; border-color: #35424a; box-shadow: 0 3px 14px rgba(0,0,0,.12); }
html[data-theme="dark"] .device-media_player { background: linear-gradient(135deg, #2a2b26 0, #202931 68%); }
html[data-theme="dark"] .device-soundbar { background: linear-gradient(135deg, #272d3a 0, #202931 68%); }
html[data-theme="dark"] .device-vacuum { background: linear-gradient(135deg, #2c2837 0, #202931 68%); }
html[data-theme="dark"] .device-appliance { background: linear-gradient(135deg, #22322e 0, #202931 68%); }
html[data-theme="dark"] .device-light { background: linear-gradient(135deg, #302c22 0, #202931 68%); }
html[data-theme="dark"] .clock-time { color: #e0e7e3; }
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .clock-label, html[data-theme="dark"] .clock-date,
html[data-theme="dark"] .domain-label, html[data-theme="dark"] .overview-heading h2, html[data-theme="dark"] .home-summary,
html[data-theme="dark"] .sync-note, html[data-theme="dark"] .reading-label, html[data-theme="dark"] .details,
html[data-theme="dark"] .page-caption, html[data-theme="dark"] .integration-status, html[data-theme="dark"] .footnote,
html[data-theme="dark"] .login-caption, html[data-theme="dark"] .setup-guide, html[data-theme="dark"] .setup-field label,
html[data-theme="dark"] .vacuum-label, html[data-theme="dark"] .shopping-empty, html[data-theme="dark"] .shopping-pagination span,
html[data-theme="dark"] .arrange-caption, html[data-theme="dark"] .arrange-group-title { color: #a4b1b8; }
html[data-theme="dark"] .setup-guide a { color: #bdd9ca; }
html[data-theme="dark"] .state-pill { background: #34414b; color: #c0cbd0; }
html[data-theme="dark"] .state-pill.good { background: #29483c; color: #bcdec9; }
html[data-theme="dark"] .state-pill.warn { background: #4e3c28; color: #efd3a6; }
html[data-theme="dark"] .device-icon { background: #9a7838; color: #fff0ce; box-shadow: none; }
html[data-theme="dark"] .device-soundbar .device-icon { background: #576c91; color: #dce9ff; }
html[data-theme="dark"] .device-vacuum .device-icon { background: #70638c; color: #efe8fc; }
html[data-theme="dark"] .device-appliance .device-icon { background: #507c71; color: #d5f1e4; }
html[data-theme="dark"] .icon-button, html[data-theme="dark"] .small-button { background: #29353e; color: #cad4d9; border-color: #40515b; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
html[data-theme="dark"] .action-button { background: #655236; color: #f8e0b7; border-color: #8b7046; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .action-button.secondary { background: #29353e; color: #cad4d9; border-color: #40515b; }
html[data-theme="dark"] .action-button.stop { background: #47322e; color: #edb9ab; border-color: #695047; }
html[data-theme="dark"] .device-soundbar .action-button:not(.secondary):not(.stop) { background: #34445e; color: #d4e2fa; border-color: #526587; }
html[data-theme="dark"] .device-vacuum .action-button:not(.secondary):not(.stop) { background: #443850; color: #e7daf6; border-color: #665476; }
html[data-theme="dark"] .device-appliance .action-button:not(.secondary):not(.stop) { background: #2f4b40; color: #d1eadc; border-color: #507565; }
html[data-theme="dark"] .volume-control { background: #18232c; border-color: #364750; }
html[data-theme="dark"] .volume-control .action-button { background: #2b3943; color: #c9d5dd; border-color: transparent; }
html[data-theme="dark"] .volume-value { color: #a6b4bd; }
html[data-theme="dark"] .volume-value strong { color: #e1e9ed; }
html[data-theme="dark"] .setup-field input, html[data-theme="dark"] .setup-field select, html[data-theme="dark"] .vacuum-field select,
html[data-theme="dark"] .shopping-form input, html[data-theme="dark"] .pin-card input { background: #19242d; color: #dce5e8; border-color: #40515c; }
html[data-theme="dark"] input::-webkit-input-placeholder { color: #95a6b1; }
html[data-theme="dark"] input::placeholder { color: #95a6b1; }
html[data-theme="dark"] .integration-row, html[data-theme="dark"] .appliance-panel,
html[data-theme="dark"] .calendar-agenda-item, html[data-theme="dark"] .calendar-feed-row { border-color: #37474f; }
html[data-theme="dark"] .compact-vacuum-title, html[data-theme="dark"] .compact-vacuum-hint,
html[data-theme="dark"] .vacuum-map-title { color: #c4b6d5; }
html[data-theme="dark"] .vacuum-toolbar .small-button { background: #342d40; color: #d7c9e7; border-color: #50455f; }
html[data-theme="dark"] .room-button { background: #342d40; color: #d7c9e7; border-color: #50455f; }
html[data-theme="dark"] .room-button.selected { background: #786293; color: #fff; border-color: #9a83b4; }
html[data-theme="dark"] .vacuum-map { background: #19242d; -webkit-filter: brightness(.82); filter: brightness(.82); }
html[data-theme="dark"] .today-events { border-color: #3d443f; }
html[data-theme="dark"] .today-events h2, html[data-theme="dark"] #today-events-note { color: #a7b3b8; }
html[data-theme="dark"] .today-event-time { color: #d7bd8a; }
html[data-theme="dark"] .today-event-title { color: #dce6e8; }
html[data-theme="dark"] .calendar-weekdays span, html[data-theme="dark"] .calendar-status { color: #a4b1b8; }
html[data-theme="dark"] .calendar-day { color: #e0e6e6; border-color: #35434b; }
html[data-theme="dark"] .calendar-day.outside { background: #1b252d; color: #89979f; }
html[data-theme="dark"] .calendar-day.today, html[data-theme="dark"] .calendar-day.today.outside { background: #4a3d29; color: #f1d6a4; }
html[data-theme="dark"] .calendar-preview { color: #b8c5cc; }
html[data-theme="dark"] .calendar-day.outside .calendar-preview { color: #899aa5; }
html[data-theme="dark"] .calendar-more, html[data-theme="dark"] .calendar-agenda-time { color: #d3b98c; }
html[data-theme="dark"] .shopping-heading-dot, html[data-theme="dark"] .brand-dot { color: #d9bb7f; }
html[data-theme="dark"] .shopping-count { background: #473c2a; border-color: #715f3c; color: #ead2a1; }
html[data-theme="dark"] .shopping-item { background: #26333c; border-color: #36464f; }
html[data-theme="dark"] .shopping-label, html[data-theme="dark"] .shopping-empty strong { color: #d4dfe5; }
html[data-theme="dark"] .purchased .shopping-label { color: #9babb5; }
html[data-theme="dark"] .shopping-check:before { background: #1b2730; border-color: #718490; }
html[data-theme="dark"] .purchased .shopping-check:before { background: #527c68; border-color: #79a68e; }
html[data-theme="dark"] .shopping-remove { color: #a0b0bb; }
html[data-theme="dark"] .shopping-empty svg { background: #3d3427; color: #d7bb85; }
html[data-theme="dark"] .device-dialog { background: rgba(5,10,15,.72); }
html[data-theme="dark"] .dialog-card { background: #1d272f; color: #e7ece9; border-color: #40515b; box-shadow: 0 15px 60px rgba(0,0,0,.4); }
html[data-theme="dark"] .arrange-row { background: #26323b; border-color: #3a4b55; }
html[data-theme="dark"] .arrange-position, html[data-theme="dark"] .arrange-feedback { color: #d7bf90; }
html[data-theme="dark"] .arrange-move { background: #303f49; }
html[data-theme="dark"] .notice { background: #2c4538; color: #d8e9d8; border-color: #527460; }
html[data-theme="dark"] .notice.error { background: #49342e; color: #f1c7b1; border-color: #795448; }
html[data-theme="dark"] .setup-error, html[data-theme="dark"] .shopping-error, html[data-theme="dark"] #pin-error { color: #f0b7a6; }
html[data-theme="dark"] .lock-screen { background: radial-gradient(ellipse at 50% 20%, #2c2b22 0, #151c22 65%); }
html[data-theme="dark"] .pin-card label { color: #b4c1c1; }
html[data-theme="dark"] .login-mark, html[data-theme="dark"] .brand-symbol { background: #34434b; color: #e6d5aa; }
html[data-theme="dark"] .panel-footer .brand { color: #a6b2b4; }
html[data-theme="dark"] .theme-menu { background: #212c34; border-color: #43545e; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
html[data-theme="dark"] .theme-menu button { color: #ced9dd; }
html[data-theme="dark"] .theme-menu button span { color: #a6b6bf; }
html[data-theme="dark"] .theme-menu button[aria-checked="true"] { background: #4a3d29; color: #f1d6a4; }
@media (hover: hover) {
  html[data-theme="dark"] .action-button.secondary:hover:not(:disabled) { background: #364752; }
  html[data-theme="dark"] .action-button.stop:hover:not(:disabled) { background: #61413a; }
}