* { 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, a:focus { outline: 2px solid #547360; 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; }
.page-heading > .greeting, .page-heading > .clock, .page-heading > .heading-balance { width: 25%; }
.home-briefing { display: flex; align-items: center; min-width: 0; padding-left: 12px; border-left: 1px solid rgba(135, 124, 95, .16); }
.home-briefing h2 { margin-bottom: 5px; color: #8d8069; font-size: 8px; line-height: 12px; letter-spacing: 1px; }
.briefing-price { width: 39%; min-width: 0; }
#briefing-price-current { display: block; color: #314a54; font-size: 22px; line-height: 25px; font-weight: 800; white-space: nowrap; }
#briefing-price-cheapest { display: block; margin-top: 3px; color: #778285; font-size: 9px; line-height: 13px; white-space: nowrap; }
.briefing-price small { display: block; margin-top: 1px; color: #8b9592; font-size: 7px; line-height: 10px; white-space: nowrap; }
.briefing-weather { width: 61%; min-width: 0; padding-left: 10px; border-left: 1px solid rgba(135, 124, 95, .12); }
.weather-days { display: flex; }
.weather-days > div { width: 50%; min-width: 0; padding-right: 5px; }
.weather-days > div > span { display: block; color: #89918f; font-size: 8px; line-height: 12px; }
.weather-days strong { display: block; color: #435663; font-size: 9px; line-height: 13px; font-weight: 700; }
.spotify-card { position: relative; clear: both; margin: 6px 0; padding: 14px 16px; border: 1px solid #e8e4d9; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 5px 18px rgba(51,56,68,.035); }
.spotify-heading, .spotify-current, .spotify-controls, .spotify-library, .spotify-results li { display: flex; align-items: center; }
.spotify-heading { justify-content: space-between; }
.spotify-heading .eyebrow { margin-bottom: 3px; color: #58835d; }
.spotify-device-select { display: flex; align-items: center; }
.spotify-device-select label { margin-right: 8px; color: #65736b; font-size: 10px; font-weight: 700; }
.spotify-card select, .spotify-search input { min-height: 38px; border: 1px solid #dfe5dc; border-radius: 9px; background: #fff; color: #33454e; font-size: 13px; }
.spotify-device-select select { max-width: 230px; padding: 5px 8px; }
.spotify-current { min-height: 70px; padding: 10px 0; }
.spotify-current img { display: none; width: 52px; height: 52px; margin-right: 12px; border-radius: 5px; }
.spotify-current img.spotify-cover-visible { display: block; }
.spotify-current > div { min-width: 0; }
.spotify-current strong, .spotify-current span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotify-current #spotify-track { display: block; color: #253d43; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotify-current span { margin-top: 3px; color: #68777a; font-size: 11px; }
.spotify-current #spotify-player-note { color: #84908a; font-size: 9px; }
.spotify-controls > button + button { margin-left: 7px; }
.spotify-controls .small-button, .spotify-controls .action-button { min-height: 38px; height: 38px; border-radius: 9px; }
.spotify-controls .action-button { min-width: 90px; background: #dcebdd; border-color: #c8ddc8; color: #315d3b; }
.spotify-controls #spotify-connect { margin-left: auto; }
.spotify-library { margin-top: 10px; }
.spotify-library > * + * { margin-left: 8px; }
.spotify-search { display: flex; flex: 1 1 50%; min-width: 0; }
.spotify-search input { flex: 1 1 auto; min-width: 0; padding: 4px 9px; }
.spotify-search button { min-height: 38px; margin-left: 5px; padding: 0 11px; }
.spotify-library > select { flex: 1 1 50%; min-width: 0; padding: 4px 8px; }
.spotify-results { max-height: 210px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.spotify-results li { min-height: 56px; justify-content: space-between; padding: 5px 0; border-top: 1px solid #eef0eb; }
.spotify-result-link { display: flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.spotify-result-link img { width: 42px; height: 42px; margin-right: 9px; object-fit: contain; }
.spotify-result-details { display: block; min-width: 0; }
.spotify-result-details strong, .spotify-result-details span { display: block; max-width: 550px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotify-result-details strong { font-size: 12px; }
.spotify-result-details span { margin-top: 2px; color: #778285; font-size: 10px; }
.spotify-result-play { min-height: 32px !important; padding: 0 10px; }
.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; }
.page-heading > .greeting, .page-heading > .clock { width: 50%; }
.heading-balance.today-events { display: block; width: 100%; padding: 10px 0; margin-top: 8px; border-left: 0; border-top: 1px solid #e7e2d5; }
.home-briefing { width: 100%; min-height: 74px; margin-top: 4px; padding: 8px 0 0; border-left: 0; border-top: 1px solid #e7e2d5; }
.briefing-price { width: 35%; }
.briefing-weather { width: 65%; }
.spotify-card { padding: 12px; }
.spotify-library { align-items: stretch; flex-direction: column; }
.spotify-library > * + * { margin-top: 8px; margin-left: 0; }
.spotify-search { flex: 1 1 auto; }
.spotify-library > select { flex: 1 1 auto; }
.spotify-device-select { display: block; max-width: 58%; }
.spotify-device-select label { display: block; margin-bottom: 4px; }
.spotify-device-select select { width: 100%; max-width: 100%; }
.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; }
.home-briefing h2 { font-size: 7px; }
#briefing-price-current { font-size: 19px; }
#briefing-price-cheapest, .weather-days strong { font-size: 8px; }
.spotify-current #spotify-track { font-size: 13px; }
.spotify-device-select { max-width: 62%; }
}
@media (max-width: 900px) and (min-width: 700px) {
.page-heading > .greeting, .page-heading > .clock, .page-heading > .heading-balance { width: 25%; }
.clock-time { font-size: 56px; letter-spacing: -2px; }
.greeting h1 { font-size: 23px; }
.today-events { padding-left: 9px; }
.today-event-time { width: 48px; font-size: 8px; }
.today-event-title { margin-left: 52px; font-size: 10px; }
#briefing-price-current { font-size: 18px; }
#briefing-price-cheapest, .weather-days strong { font-size: 8px; }
}
/* 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, html[data-theme="dark"] a:focus { outline-color: #d8c192; }
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; }
}
html[data-theme="dark"] .home-briefing { border-color: rgba(194,177,137,.24); }
html[data-theme="dark"] .home-briefing h2 { color: #d1bd94; }
html[data-theme="dark"] #briefing-price-current, html[data-theme="dark"] .weather-days strong { color: #dce6e2; }
html[data-theme="dark"] #briefing-price-cheapest, html[data-theme="dark"] .weather-days > div > span { color: #a8b6b9; }
html[data-theme="dark"] .spotify-card { background: #1e2a32; border-color: #3a4b53; color: #e0e8e4; }
html[data-theme="dark"] .spotify-current strong, html[data-theme="dark"] .spotify-current #spotify-track { color: #edf2ed; }
html[data-theme="dark"] .spotify-current span, html[data-theme="dark"] .spotify-result-details span { color: #a9b7b9; }
html[data-theme="dark"] .spotify-card select, html[data-theme="dark"] .spotify-search input { background: #26353d; border-color: #45575e; color: #e0e8e4; }
html[data-theme="dark"] .spotify-results li { border-color: #394950; }
html[data-theme="dark"] .spotify-controls .action-button { background: #335a3e; border-color: #49744f; color: #e0f1de; }
/* Family panel: definite positions and simple flex/float layouts for Safari 10. */
.family-panel .app-main { position: relative; display: block; padding: 16px; }
.family-panel .family-heading { display: flex; align-items: center; height: auto; min-height: 94px; margin: 0 0 12px; }
.family-clock { display: flex; align-items: center; flex: 0 0 32%; width: 32%; min-width: 0; padding-right: 16px; }
.family-panel .clock-time { flex: 0 0 auto; font-size: 54px; line-height: 1; letter-spacing: -3px; }
.family-panel .greeting { width: auto; min-width: 0; margin-left: 14px; }
.family-panel .greeting h1 { font-size: 17px; line-height: 22px; letter-spacing: -.5px; }
.family-panel .clock-date { font-size: 12px; line-height: 18px; margin-top: 4px; }
.family-panel .home-briefing { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; width: 68%; margin: 0; padding-left: 20px; border-top: 0; border-left: 1px solid #e1ddcf; }
.family-panel .home-briefing h2 { margin-bottom: 7px; font-size: 10px; line-height: 14px; letter-spacing: 1px; }
.family-panel .briefing-weather { width: 58%; min-width: 0; padding: 0 16px 0 0; border: 0; }
.family-panel .briefing-price { width: 42%; min-width: 0; padding-left: 18px; border-left: 1px solid #e1ddcf; }
.family-panel #briefing-price-current { overflow: hidden; font-size: 29px; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; }
.family-panel #briefing-price-current.price-unavailable { font-size: 16px; line-height: 21px; white-space: normal; }
.family-panel #briefing-price-cheapest { display: block; max-width: 100%; font-size: 12px; line-height: 18px; white-space: normal; }
.family-panel .briefing-price small { display: block; margin-top: 2px; color: #5c706a; font-size: 11px; line-height: 15px; white-space: normal; }
.family-panel .weather-days { display: flex; }
.family-panel .weather-days > div { width: 50%; padding-right: 8px; }
.family-panel .weather-days > div > span { display: block; color: #69787b; font-size: 12px; line-height: 16px; }
.family-panel .weather-day-reading { display: flex; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 18px; line-height: 28px; }
.weather-symbol { width: 32px; height: 32px; flex: 0 0 32px; margin-right: 7px; color: #81939e; }
.weather-symbol-sun, .weather-symbol-partly_cloudy { color: #bf933a; }
.weather-symbol-rain, .weather-symbol-snow { color: #568daf; }
.weather-symbol-storm { color: #82709e; }
.weather-temperature { white-space: nowrap; }
.weather-rain { margin-left: 6px; color: #526d7b; font-size: 12px; font-weight: 500; }
.family-panel #home-view { position: relative; display: block; height: auto; width: 100%; }
.family-planner { position: relative; float: left; width: calc(63% - 6px); margin-right: 12px; }
.family-sidebar { position: relative; float: right; width: calc(37% - 6px); }
.family-layout:after { content: ""; display: block; clear: both; }
.family-panel #home-view > * { margin-top: 0; }
.family-panel .calendar-card { width: 100%; height: 486px; margin: 0; padding: 16px; border: 1px solid #e4e3da; background: #fffefa; border-radius: 20px; box-shadow: none; }
.family-panel .calendar-heading { top: 12px; left: 16px; right: 16px; height: 44px; }
.family-panel .calendar-heading h2 { font-size: 23px; letter-spacing: -.6px; }
.family-panel .calendar-heading .eyebrow { display: none; }
.family-panel .calendar-actions .small-button { min-height: 44px; height: 44px; padding: 0 10px; font-size: 13px; }
.family-panel .calendar-actions .small-button svg { width: 18px; height: 18px; }
.family-panel #calendar-manage { padding: 0 10px; }
.family-panel .calendar-weekdays { top: 65px; left: 16px; right: 16px; height: 18px; }
.family-panel .calendar-weekdays span { font-size: 12px; line-height: 18px; color: #586d69; }
.family-panel .calendar-days { top: 90px; bottom: 24px; left: 16px; right: 16px; }
.family-panel .calendar-day { position: relative; height: 16.6667%; padding: 7px 6px; overflow: hidden; border-color: #eceee7; background: transparent; }
.family-panel .calendar-days[data-weeks="5"] .calendar-day { height: 20%; }
.family-panel .calendar-number { font-size: 18px; line-height: 21px; margin-bottom: 5px; }
.family-panel .calendar-preview { color: #566b72; font-size: 12px; line-height: 16px; }
.family-panel .calendar-more { position: absolute; top: 9px; right: 5px; font-size: 10px; line-height: 16px; color: #927137; }
.family-panel .calendar-day.today { background: #f6ebcf; border-radius: 10px; color: #8d6520; }
.family-panel .calendar-day.outside { background: #f9faf6; color: #6b7973; }
.family-panel .calendar-status { left: 16px; right: 16px; bottom: 6px; color: #5c706a; font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.family-panel .today-events { position: relative; width: 100%; height: auto; min-height: 88px; margin-top: 12px; padding: 12px 16px; border: 1px solid #e4e3da; border-radius: 18px; background: #fffefa; }
.family-panel .today-events h2 { margin: 0 0 5px; color: #566b65; font-size: 11px; line-height: 16px; }
.family-panel .today-events > button { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; box-shadow: none; }
.family-panel #today-events-list { display: block; overflow: hidden; }
.family-panel .today-event { display: flex; align-items: center; float: left; width: 50%; min-width: 0; min-height: 23px; height: auto; padding-right: 12px; line-height: 1.3; }
.family-panel .today-event-time { display: block; flex: 0 0 68px; width: 68px; overflow: hidden; color: #876222; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.family-panel .today-event-title { display: block; flex: 1 1 auto; min-width: 0; margin-left: 6px; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.family-panel #today-events-note { display: block; clear: both; color: #5c706a; font-size: 12px; line-height: 18px; }
.family-panel .devices-column { position: relative; display: block; width: 100%; height: 220px; margin: 0; padding: 10px 12px; border: 1px solid #e4e3da; border-radius: 20px; background: #fffefa; }
.family-panel .overview-heading { height: 24px; margin: 0; }
.family-panel .overview-heading h2 { color: #435d59; font-size: 12px; line-height: 18px; letter-spacing: 1px; }
.family-panel .home-summary { font-size: 11px; }
.family-panel #device-total, .family-panel .summary-divider { display: none; }
.family-panel .device-list { display: block; height: 176px; margin: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.device-row { position: relative; display: block; width: 100%; height: 44px; padding: 0 26px 0 42px; background: transparent; border: 0; border-bottom: 1px solid #eceee7; border-radius: 0; color: #2a4146; text-align: left; box-shadow: none; }
.device-row:last-child { border-bottom: 0; }
.device-row-icon { position: absolute; top: 7px; left: 0; width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: #697b8d; background: #edf1f6; }
.device-row-icon svg { width: 18px; height: 18px; }
.device-row-vacuum .device-row-icon { color: #7b6a92; background: #f0eaf5; }
.device-row-appliance .device-row-icon { color: #5a8678; background: #eaf2eb; }
.device-row-light .device-row-icon { color: #ae8a44; background: #f8f0dc; }
.device-row-copy { display: block; padding-top: 4px; }
.device-row-name, .device-row-state { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.device-row-name { font-size: 14px; line-height: 19px; font-weight: 700; }
.device-row-state { color: #586e68; font-size: 12px; line-height: 16px; }
.device-row-arrow { position: absolute; right: 1px; top: 13px; color: #94a29b; }
.device-row-arrow svg { width: 18px; height: 18px; }
.device-row-offline .device-row-state { color: #925b34; }
.family-panel .empty-card { margin: 0; padding: 16px 4px; border: 0; background: transparent; font-size: 14px; }
.family-panel .lists-row { position: relative; width: 100%; height: 452px; min-height: 452px; margin-top: 12px; padding: 10px; border: 1px solid #e4e3da; border-radius: 20px; background: #fffefa; }
.list-tabs { position: absolute; top: 6px; left: 10px; right: 10px; display: flex; height: 48px; padding: 2px; border-radius: 12px; background: #f1f2eb; }
.list-tab { position: relative; display: block; width: 50%; height: 44px; padding: 0 36px 0 10px; border: 0; border-radius: 9px; background: transparent; color: #52655e; font-size: 14px; font-weight: 700; text-align: left; }
.list-tab.active { color: #38544b; background: #fffefa; box-shadow: 0 1px 4px rgba(44,59,42,.08); }
.list-tab .shopping-count { position: absolute; top: 10px; right: 7px; width: 24px; height: 24px; border-radius: 7px; border: 0; background: #eaf0e6; color: #627e54; font-size: 11px; }
.family-panel .shopping-card { position: absolute; top: 60px; left: 10px; right: 10px; bottom: 8px; float: none; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.family-panel .shopping-heading { display: none; }
.family-panel .shopping-toolbar { top: 0; left: 0; right: 0; height: 44px; display: block; }
.family-panel .shopping-form { width: 100%; height: 44px; }
.family-panel .shopping-form input { width: calc(100% - 50px); min-height: 44px; height: 44px; font-size: 16px; }
.family-panel .shopping-form .action-button { flex: 0 0 44px; width: 44px; min-height: 44px; height: 44px; }
.family-panel .shopping-items { top: 52px; left: 0; right: 0; bottom: 88px; margin: 0; }
.family-panel .shopping-item { width: 100%; margin: 0 0 4px; border-color: #ecede6; background: #f6f7f2; }
.family-panel .shopping-items.two-columns .shopping-item { float: left; width: calc(50% - 6px); margin: 0 3px 4px; }
.family-panel .shopping-check { flex-basis: 44px; width: 44px; }
.family-panel .shopping-check:before { width: 20px; height: 20px; border-color: #7c9188; }
.family-panel .shopping-label { font-size: 14px; line-height: 18px; max-height: 36px; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; }
.family-panel .purchased .shopping-label { color: #61736f; }
.family-panel .shopping-remove { flex-basis: 44px; width: 44px; color: #647871; }
.family-panel .shopping-remove svg { width: 16px; height: 16px; }
.family-panel .shopping-pagination { left: 0; right: 0; bottom: 0; height: 44px; }
.family-panel .shopping-pagination .small-button { height: 44px; min-height: 44px; width: 44px; padding: 0; }
.family-panel .shopping-pagination span { color: #5c706a; font-size: 12px; }
.family-panel .shopping-error { bottom: 48px; left: 0; right: 0; line-height: 17px; height: 34px; font-size: 12px; white-space: normal; overflow-y: auto; background: #fffefa; z-index: 1; }
.family-panel .shopping-empty { padding: 7px 0 0; text-align: center; }
.family-panel .shopping-empty svg { display: none; }
.family-panel .shopping-empty strong { font-size: 13px; }
.family-panel .shopping-empty span { font-size: 11px; }
.family-panel .spotify-dock { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin: 12px 0 0; padding: 12px; border-color: #e4e3da; border-radius: 18px; background: #fffefa; box-shadow: none; }
.family-panel .spotify-current { flex: 1 1 100%; min-width: 0; min-height: 50px; width: 100%; margin: 0 0 10px; padding: 0; }
.family-panel .spotify-current > div { flex: 1 1 auto; min-width: 0; }
.family-panel .spotify-current .eyebrow { display: block; margin: 0 0 3px; color: #4d6b55; font-size: 11px; line-height: 14px; }
.family-panel .spotify-current img { flex: 0 0 50px; width: 50px; height: 50px; margin-right: 10px; object-fit: contain; }
.family-panel .spotify-current #spotify-track { font-size: 15px; line-height: 19px; }
.family-panel .spotify-current #spotify-artist { font-size: 12px; line-height: 15px; margin-top: 1px; }
.family-panel #spotify-player-note { order: 4; flex: 1 1 100%; width: 100%; margin-top: 8px; color: #5c706a; font-size: 12px; line-height: 18px; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; }
.family-panel #spotify-player-note:empty { display: none; }
.family-panel .spotify-controls { order: 1; display: flex; flex: 1 1 auto; width: auto; margin: 0; }
.family-panel .spotify-controls .small-button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 24px; }
.family-panel .spotify-controls .action-button { width: 78px; min-width: 78px; height: 44px; min-height: 44px; font-size: 14px; }
.family-panel .spotify-controls > button + button { margin-left: 6px; }
.family-panel .spotify-device-select { order: 3; display: flex; align-items: center; flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; margin: 10px 0 0; }
.family-panel .spotify-device-select label { flex: 0 0 auto; margin: 0 8px 0 0; color: #5c706a; font-size: 12px; line-height: 16px; }
.family-panel .spotify-device-select select { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; height: 44px; max-width: none; font-size: 16px; }
.family-panel #spotify-browse { order: 2; flex: 0 0 72px; min-height: 44px; height: 44px; width: 72px; padding: 0; margin: 0 0 0 8px; font-size: 14px; }
.family-panel .panel-footer { display: flex; align-items: center; height: 44px; margin: 8px 0 0; }
.family-panel .panel-footer .small-button { min-height: 44px; height: 44px; font-size: 12px; padding: 0 12px; }
.family-panel .panel-footer .brand { font-size: 14px; }
.family-panel .panel-footer .brand-symbol { width: 28px; height: 28px; }
.family-panel .panel-footer .brand-symbol svg { width: 18px; height: 18px; }
.family-panel .spotify-browser-card .spotify-library { display: block; margin: 18px 0; }
.family-panel .spotify-browser-card .spotify-library > * + * { margin: 14px 0 0; }
.family-panel .spotify-browser-card select { width: 100%; height: 48px; padding: 8px 12px; border: 1px solid #dfe5dc; border-radius: 10px; background: #fff; font-size: 16px; }
.family-panel .spotify-browser-card .spotify-search input, .family-panel .spotify-browser-card .spotify-search button { min-height: 48px; font-size: 16px; }
.family-panel .spotify-results { max-height: 300px; }
.family-panel .spotify-results li { min-height: 68px; }
.family-panel .spotify-result-details strong { font-size: 16px; }
.family-panel .spotify-result-details span { font-size: 13px; }
.family-panel .spotify-result-play { min-height: 48px !important; margin-left: 12px; font-size: 14px; }
.spotify-account { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #e0e4da; font-size: 14px; }
.family-panel .device-controls-dialog .device-card { float: none; display: block; width: 100%; height: auto; margin: 0; padding: 16px; animation: none; }
.family-panel .device-controls-dialog .card-top { min-height: 44px; }
.family-panel .device-controls-dialog .device-name { font-size: 18px; }
.family-panel .device-controls-dialog .domain-label { font-size: 11px; }
.family-panel .device-controls-dialog .state-pill { max-width: 180px; font-size: 13px; }
.family-panel .device-controls-dialog .device-overview { min-height: 110px; padding: 16px 0; }
.family-panel .device-controls-dialog .device-state, .family-panel .device-controls-dialog .device-state.numeric { font-size: 34px; }
.family-panel .device-controls-dialog .reading-label { font-size: 11px; }
.family-panel .device-controls-dialog .details { display: block; max-height: none; font-size: 14px; line-height: 20px; }
.family-panel .device-controls-dialog .device-art svg { height: 90px; }
.family-panel .device-controls-dialog .action-row { display: flex; flex-wrap: wrap; height: auto; margin: -4px; }
.family-panel .device-controls-dialog .action-row > button { display: block; float: none; flex: 1 1 100px; width: auto !important; height: 60px; min-height: 60px; margin: 4px; padding: 7px; font-size: 14px; }
.family-panel .device-controls-dialog .action-row svg { width: 18px; height: 18px; margin: 0 auto 5px; }
.family-panel .device-controls-dialog .action-row span { display: block; }
.family-panel .device-controls-dialog .volume-control { height: auto; margin-top: 14px; }
.family-panel .device-controls-dialog .volume-control .action-button { width: 48px; min-height: 48px; height: 48px; }
.family-panel .device-controls-dialog .volume-value { font-size: 14px; }
.family-panel .device-controls-dialog .volume-value strong { font-size: 18px; }
.family-panel .device-controls-dialog .vacuum-panel { margin-top: 18px; }
.family-panel .device-controls-dialog .vacuum-toolbar { height: auto; min-height: 48px; }
.family-panel .device-controls-dialog .vacuum-toolbar .small-button { min-height: 48px; height: 48px; font-size: 14px; }
.family-panel .device-controls-dialog .compact-vacuum-title { font-size: 12px; }
.family-panel .device-controls-dialog .vacuum-compact { display: flex; flex-wrap: wrap; height: auto; margin: 0 -4px; }
.family-panel .device-controls-dialog .vacuum-compact .vacuum-field, .family-panel .device-controls-dialog .vacuum-compact .compact-start { display: block; float: none; width: calc(50% - 8px); height: auto; min-height: 48px; margin: 6px 4px; }
.family-panel .device-controls-dialog .vacuum-compact select { height: 48px; min-height: 48px; padding: 8px; font-size: 16px; }
.family-panel .device-controls-dialog .vacuum-compact .compact-start { height: 48px; font-size: 15px; }
.family-panel .device-controls-dialog .compact-vacuum-hint { height: auto; max-height: none; font-size: 12px; line-height: 18px; white-space: normal; }
.family-panel .device-controls-dialog .appliance-panel { margin-top: 16px; padding-top: 12px; }
.family-panel .device-controls-dialog .appliance-panel select, .family-panel .device-controls-dialog .appliance-panel .small-button { min-height: 48px; height: 48px; }
.family-panel .device-controls-dialog .appliance-panel .footnote { font-size: 12px; line-height: 18px; }
/* One page scroll keeps all five list rows reachable at every screen height. */
body.wall-open { overflow: auto; }
.family-panel { min-height: 100vh; }
.family-panel .app-main > main { position: static; display: block; height: auto; }
html[data-theme="dark"] .family-panel .calendar-card, html[data-theme="dark"] .family-panel .today-events, html[data-theme="dark"] .family-panel .devices-column, html[data-theme="dark"] .family-panel .lists-row, html[data-theme="dark"] .family-panel .spotify-dock { background: #1e2a32; border-color: #394950; }
html[data-theme="dark"] .family-panel .home-briefing, html[data-theme="dark"] .family-panel .briefing-price { border-color: #3b4a49; }
html[data-theme="dark"] .family-panel .weather-days > div > span { color: #a9b9b6; }
html[data-theme="dark"] .family-panel .weather-day-reading { color: #e2eae4; }
html[data-theme="dark"] .family-panel .weather-symbol { color: #aac0cc; }
html[data-theme="dark"] .family-panel .weather-symbol-sun, html[data-theme="dark"] .family-panel .weather-symbol-partly_cloudy { color: #e0bd70; }
html[data-theme="dark"] .family-panel .overview-heading h2 { color: #c1d3c9; }
html[data-theme="dark"] .device-row { color: #e0e8e3; border-color: #35464a; }
html[data-theme="dark"] .device-row-state { color: #a1b4b1; }
html[data-theme="dark"] .device-row-icon { background: #303d4a; color: #b0c1d5; }
html[data-theme="dark"] .device-row-vacuum .device-row-icon { background: #3c354a; color: #c6b5dc; }
html[data-theme="dark"] .device-row-appliance .device-row-icon { background: #2d443c; color: #a2c7b5; }
html[data-theme="dark"] .family-panel .list-tabs { background: #17242a; }
html[data-theme="dark"] .family-panel .list-tab { color: #a6b7b2; }
html[data-theme="dark"] .family-panel .list-tab.active { background: #34463f; color: #e1ece2; }
html[data-theme="dark"] .family-panel .list-tab .shopping-count { background: #45604b; color: #d6e7cc; }
html[data-theme="dark"] .family-panel .shopping-card { background: transparent; }
html[data-theme="dark"] .family-panel .shopping-item { background: #29383c; border-color: #394b4d; }
html[data-theme="dark"] .family-panel .shopping-error { background: #1e2a32; }
html[data-theme="dark"] .family-panel .spotify-browser-card select { background: #26353d; border-color: #45575e; color: #e0e8e4; }
html[data-theme="dark"] .spotify-account { border-color: #3b4a49; }
html[data-theme="dark"] .family-panel .briefing-price small,
html[data-theme="dark"] .family-panel #spotify-player-note,
html[data-theme="dark"] .family-panel .spotify-device-select label,
html[data-theme="dark"] .family-panel .spotify-current .eyebrow,
html[data-theme="dark"] .family-panel .shopping-pagination span,
html[data-theme="dark"] .family-panel .calendar-status,
html[data-theme="dark"] .family-panel .calendar-weekdays span,
html[data-theme="dark"] .family-panel .today-events h2,
html[data-theme="dark"] .family-panel #today-events-note { color: #b1c3bd; }
html[data-theme="dark"] .family-panel .calendar-preview { color: #bacbd0; }
html[data-theme="dark"] .family-panel .weather-rain { color: #b5cbd6; }
html[data-theme="dark"] .family-panel .shopping-remove { color: #b1c3bd; }
html[data-theme="dark"] .family-panel .purchased .shopping-label { color: #a6bbb2; }
html[data-theme="dark"] .device-row-offline .device-row-state { color: #edbf90; }
@media (hover: hover) {
.device-row:hover:not(:disabled), .family-panel .calendar-day:hover:not(:disabled),
.family-panel .shopping-check:hover:not(:disabled), .family-panel .shopping-remove:hover:not(:disabled) { transform: none; box-shadow: none; background-color: rgba(94, 123, 108, .12); }
}
.family-panel .calendar-day:focus, .device-row:focus { outline-offset: -3px; }
@media (max-width: 900px) {
.family-panel .family-heading { height: auto; min-height: 92px; flex-wrap: wrap; padding-bottom: 12px; }
.family-panel .family-clock { flex-basis: 100%; width: 100%; padding: 0; margin-bottom: 16px; }
.family-panel .clock-time { font-size: 48px; }
.family-panel .greeting h1 { font-size: 19px; }
.family-panel .home-briefing { flex-basis: 100%; width: 100%; padding-left: 0; border: 0; }
.family-panel .briefing-weather { width: 62%; }
.family-panel .briefing-price { width: 38%; padding-left: 12px; }
.family-panel #briefing-price-current { font-size: 24px; }
.family-planner, .family-sidebar { float: none; width: 100%; margin: 0; }
.family-sidebar { margin-top: 12px !important; }
.family-panel .calendar-card { height: 440px; }
.family-panel .panel-footer { height: auto; flex-wrap: wrap; }
.family-panel .panel-footer .header-actions { flex-wrap: wrap; }
.family-panel .panel-footer .header-actions > * { margin-top: 8px; }
}
@media (max-width: 550px) {
.family-panel .app-main { padding: 10px; }
.family-panel .home-briefing { display: block; }
.family-panel .briefing-weather { width: 100%; padding: 0; }
.family-panel .briefing-price { width: 100%; padding: 12px 0 0; margin-top: 12px; border-left: 0; border-top: 1px solid #e1ddcf; }
.family-panel .calendar-heading { height: 88px; display: block; }
.family-panel .calendar-heading h2 { margin-bottom: 8px; }
.family-panel .calendar-weekdays { top: 106px; }
.family-panel .calendar-days { top: 132px; }
.family-panel .calendar-number { font-size: 16px; }
.family-panel .calendar-preview { display: none; }
.family-panel .calendar-more { display: none; }
.family-panel .calendar-dots { display: block; height: 8px; margin-top: 3px; }
.family-panel .calendar-dots i { display: inline-block; width: 5px; height: 5px; background: #876222; }
html[data-theme="dark"] .family-panel .calendar-dots i { background: #e0bd70; }
.family-panel .today-events { height: auto; min-height: 104px; }
.family-panel .today-event { float: none; width: 100%; }
.family-panel .device-controls-dialog .volume-value > span { display: none; }
}