/* APP-only home, using the existing pale blue glass design system. */
.screen.home-screen { padding: 0 0 86px; }
[data-page="home"] { --home-safe-top: max(var(--native-statusbar-height, 0px), env(safe-area-inset-top, 0px)); position: relative; isolation: isolate; padding: 0 16px 12px; color: #223550; }
.home-scenery { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 475px; object-fit: cover; object-position: 50% 45%; pointer-events: none; -webkit-mask-image: linear-gradient(#000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 58%, transparent 100%); }
.home-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: calc(328px + var(--home-safe-top)); padding: calc(27px + var(--home-safe-top)) 5px 25px; background: transparent; }
.home-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.home-brand { width: 43px; height: 43px; object-fit: contain; }
.home-weather { display: flex; align-items: center; gap: 8px; min-height: 44px; text-align: right; padding: 0; }
.weather-copy { display: flex; flex-direction: column; gap: 3px; }
.home-city { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 14px; font-weight: 600; max-width: 165px; }
.home-city img { width: 13px; height: 13px; opacity: .75; }
.weather-reading { font-size: 12px; color: #5c7596; }
.weather-art { width: 47px; height: 47px; object-fit: contain; }
.home-weather[data-weather="unknown"] .weather-art { opacity: .4; }
.home-weather[data-weather="sun"] .weather-art { animation: sunshine 24s linear infinite; }
.home-weather[data-weather="cloud"] .weather-art, .home-weather[data-weather="mist"] .weather-art { animation: cloud-drift 5s ease-in-out infinite; }
.home-weather[data-weather="rain"] .weather-art, .home-weather[data-weather="snow"] .weather-art { animation: weather-fall 2.6s ease-in-out infinite; }
.home-weather[data-weather="storm"] .weather-art { animation: weather-glow 3s ease-in-out infinite; }
.home-weather:disabled { cursor: progress; opacity: .65; }
.home-greeting { margin-top: auto; padding-top: 100px; }
.greeting-person { display: flex; align-items: flex-start; gap: 11px; }
.greeting-person .avatar { width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.95); box-shadow: 0 3px 12px #7096c826; flex: 0 0 auto; }
.greeting-person h1 { font-size: 20px; font-weight: 650; letter-spacing: -.5px; line-height: 1.4; }
.greeting-person p { font-size: 13px; line-height: 1.65; color: #5c7a9e; margin-top: 7px; }
.home-location-error { font-size: 11px; color: #755b47; margin: 9px 5px 0; line-height: 1.6; }
.home-location-error:empty { display: none; }
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(250,252,255,.88); }
.home-stats .stat { padding: 18px 12px 15px; text-align: left; border: 0; border-right: 1px solid #e4eaf3; border-radius: 0; min-height: 113px; margin: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.home-stats .stat:last-child { border-right: 0; }
.home-stats .stat small { font-size: 12px; color: #71819a; white-space: nowrap; }
.home-stats .stat strong { font-size: 28px; font-weight: 650; color: #293c56; line-height: 1.25; margin: 7px 0 3px; }
.home-stats .stat span { font-size: 10px; color: #7b8da7; white-space: nowrap; }
.home-stats .stat .device-count { font-size: 9px; letter-spacing: -.25px; }
.home-stats .stat .device-count span { display: inline; font-size: inherit; }
[data-page="home"] .section-title { margin-top: 26px; margin-bottom: 13px; }
[data-page="home"] .section-title span { font-size: 15px; font-weight: 650; }
[data-page="home"] .section-title button { font-size: 11px; color: #7187ca; }
[data-page="home"] .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
[data-page="home"] .quick { min-height: 88px; padding: 13px 8px 11px; border-radius: 19px; gap: 8px; }
[data-page="home"] .quick .bubble { width: 35px; height: 35px; border-radius: 12px; background: #e3eaff; color: #7085ed; }
[data-page="home"] .quick span:last-child { font-size: 11px; }
.home-message { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 16px 14px; text-align: left; border-radius: 19px; }
.message-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: #fff0e3; color: #c58b55; }
.message-icon img { width: 17px; height: 17px; }
.home-message.order .message-icon { background: #e5ebff; }
.message-content { flex: 1; min-width: 0; }
.message-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.message-head strong { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-status { color: #c08a5d; font-size: 9px; flex: 0 0 auto; }
.message-status.recovered { color: #76a17b; }
.message-detail { color: #6f8096; font-size: 11px; margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-time { color: #91a0b6; font-size: 10px; }
.home-empty { padding: 23px 16px; text-align: center; font-size: 12px; color: #71849f; }
.tabs .tab { min-width: 0; }
.tabs .tab img { width: 18px; height: 18px; }
.tabs .tab.active img { filter: invert(49%) sepia(56%) saturate(2434%) hue-rotate(207deg); }
button:focus-visible, [role="button"]:focus-visible { outline: 2px solid #687fe0; outline-offset: 3px; }
.home-preview-label { text-align: center; color: #7386a2; font-size: 10px; margin-top: 18px; }
.detail-customer-link { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 0; font: inherit; font-weight: inherit; color: #376bb3; text-align: left; }
.detail-customer-link span { min-width: 0; }
.detail-customer-link img { flex: 0 0 auto; width: 15px; height: 15px; transform: rotate(-90deg); }
.detail-customer-link:hover { color: #235b9f; }
.detail-customer-link:active { opacity: .7; }
[data-page="device"] #deviceSearch { font-size: 13px; line-height: 1.5; }
@keyframes sunshine { to { transform: rotate(360deg); } }
@keyframes cloud-drift { 50% { transform: translateX(4px); } }
@keyframes weather-fall { 50% { transform: translateY(3px); } }
@keyframes weather-glow { 50% { opacity: .5; } }
@media (max-width: 359px) { .home-cover { padding: calc(24px + var(--home-safe-top)) 4px 24px; } .greeting-person h1 { font-size: 18px; } .home-weather { gap: 5px; } .weather-art { width: 37px; height: 37px; } }
@media (prefers-reduced-motion: reduce) { [data-page="home"] *, [data-page="home"] *::before, [data-page="home"] *::after { animation: none !important; transition: none !important; } }