/* Canonical shared theme. Load this stylesheet last via #app-theme.
   Quiet surfaces and a single navy accent for desktop and mobile. */
/* Bill report rows show a short summary; all native columns remain in print/export. */
.rpt-mobile{display:none}
@media screen and (max-width:600px){
 html body #app #rp-print.rpt-compact{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
 #app .rpt-compact .rp-head{gap:8px;margin-bottom:12px}
 #app .rpt-compact .rp-head h2{font-size:17px;line-height:1.5}
 #app .rpt-compact .rp-head h2 small{display:block;margin:3px 0 0;font-size:13px;color:var(--ui-muted)}
 #app .rpt-compact .rp-cards{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 16px;border:1px solid var(--ui-line);border-radius:12px;overflow:hidden;background:var(--ui-surface)}
 #app .rpt-compact .rp-c{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;min-height:64px;padding:10px 12px;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:transparent!important}
 #app .rpt-compact .rp-c:last-child{border-bottom:0}
 #app .rpt-compact .rp-tag{padding:0;border-radius:0;background:transparent;font-size:13px;line-height:1.5;color:var(--ui-ink)}
 #app .rpt-compact .rp-c>small{grid-column:1;grid-row:2;margin:0;font-size:12px;color:var(--ui-muted)}
 #app .rpt-compact .rp-c>strong{grid-column:2;grid-row:1/3;margin:0;font-size:18px;line-height:1.5;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ui-accent)}
 #app .rpt-compact .rp-c>strong small{font-size:12px;color:var(--ui-muted)}
 #app .rpt-compact .rp-c.st-paid>strong{color:#317f61}
 #app .rpt-compact .rp-c.st-overdue>strong{color:#b05165}
 #app .rpt-compact .rp-table{display:none!important}
 #app .rpt-mobile{display:block}
 #app .rpt-list-heading{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:16px;font-weight:600;color:var(--ui-ink)}
 #app .rpt-list-heading small{font-size:12px;font-weight:400;color:var(--ui-muted)}
 #app .rpt-card .mbl-card-copy>small{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ui-muted)}
 #app .rpt-card .mbl-card-value>strong{font-size:18px;font-variant-numeric:tabular-nums}
 body:has(#modal[open] .rpt-detail){overflow:hidden}
 html body #modal:has(.rpt-detail){position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;border:0;border-radius:0!important;overflow-x:hidden;overflow-y:auto;background:var(--ui-surface);color:var(--ui-ink)}
 html body #modal:has(.rpt-detail) #modal-content{padding:0!important;min-height:100%;background:var(--ui-surface)}
 #modal:has(.rpt-detail) .modal-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:64px;padding:10px 14px;margin:0;border-radius:0;border-bottom:1px solid var(--ui-line);background:var(--ui-surface)}
 #modal:has(.rpt-detail) .modal-head h2{margin:0;font-size:17px}
 html body #modal .rpt-back{display:grid;place-items:center;position:static;flex:none;width:44px;height:44px;padding:10px;border:0;background:transparent;color:var(--ui-ink)}
 #modal .rpt-back svg{width:24px;height:24px}
 #modal .rpt-detail{padding:8px 16px calc(24px + env(safe-area-inset-bottom))}
 #modal .rpt-period{font-size:14px;color:var(--ui-muted)}
 #modal .rpt-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--ui-line);font-size:16px;line-height:1.6}
 #modal .rpt-detail-row>span{color:var(--ui-muted)}
 #modal .rpt-detail-row>strong{max-width:65%;text-align:right;overflow-wrap:anywhere;font-weight:500;color:var(--ui-ink);font-variant-numeric:tabular-nums}
 #modal .rpt-total>strong{font-size:21px;font-weight:600;color:var(--ui-accent)}
 html[data-theme=dark] #app .rpt-compact .rp-c.st-paid>strong{color:#a6dbc3}
 html[data-theme=dark] #app .rpt-compact .rp-c.st-overdue>strong{color:#f4bdc8}
}
/* Tenant LINE invoices keep native amounts, status and payment actions. */
 #tv-chat .tv-msg:has(>.tv-bill){align-items:flex-start;gap:8px;min-width:0}
 #tv-chat .tv-bill{flex:1;min-width:0;width:auto;max-width:100%;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-surface)!important;color:var(--ui-ink);font-size:15px;box-shadow:0 4px 14px #172b4512}
 #tv-chat .tv-bill .tvb-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 8px;padding:16px;background:var(--ui-subtle)!important;color:var(--ui-ink)!important;border-bottom:1px solid var(--ui-line)}
 #tv-chat .tv-bill .tvb-head>small{grid-column:1/-1;font-size:13px;line-height:1.6;color:var(--ui-muted)!important;opacity:1}
 #tv-chat .tv-bill .tvb-head>b{font-size:20px;line-height:1.4;font-weight:600;color:var(--ui-ink)}
 #tv-chat .tv-bill .tvb-head>.badge{padding:4px 8px;border:0;border-radius:6px;font-size:12px;line-height:1.5;white-space:normal;text-align:center;background:#fff1dd!important;color:#986c25!important}
 #tv-chat .tv-bill .tvb-head>.badge.paid{background:#e4f2ea!important;color:#317f61!important}
 #tv-chat .tv-bill .tvb-head>.badge.overdue{background:#fae9ec!important;color:#b05165!important}
 #tv-chat .tv-bill .tvb-body{display:flex;flex-direction:column;gap:0;padding:16px}
 #tv-chat .tv-bill .tvb-body::before{content:'รายการค่าใช้จ่าย';margin:0 0 4px;font-size:13px;font-weight:600;color:var(--ui-muted)}
 #tv-chat .tv-bill .tvb-total{order:-2;display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0 0 8px;padding:14px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-selected);color:var(--ui-accent)}
 #tv-chat .tv-bill .tvb-total>span{font-size:13px;line-height:1.5}
 #tv-chat .tv-bill .tvb-total>b{font-size:26px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:var(--ui-accent)}
 #tv-chat .tv-bill .tvb-body>small{order:-1;margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--ui-muted)}
 #tv-chat .tv-bill .tvb-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--ui-line);font-size:15px;line-height:1.55;color:var(--ui-ink)}
 #tv-chat .tv-bill .tvb-line>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
 #tv-chat .tv-bill .tvb-line>span:last-child{flex:none;white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
 #tv-chat .tv-bill .tvb-line.red{color:#b05165}
 #tv-chat .tv-bill .tvb-foot{margin:0;padding:0 16px 16px;font-size:14px;line-height:1.65;color:var(--ui-muted)}
 #tv-chat .tv-bill .tvb-foot>span{display:block;padding:10px 12px;border-radius:9px;background:var(--ui-subtle);color:var(--ui-ink)}
 #tv-chat .tv-bill .tvb-foot>.green{background:#e4f2ea;color:#317f61!important}
 #tv-chat .tv-bill .tvb-foot .btn{display:block;width:100%;min-height:46px;padding:10px 12px;border:0;border-radius:10px;background:var(--ui-accent)!important;color:var(--ui-on-accent,#fff)!important;font-size:15px;line-height:1.5;white-space:normal}
 html[data-theme=dark] #tv-chat .tv-bill .tvb-head>.badge{background:#4c402a!important;color:#f0d298!important}
 html[data-theme=dark] #tv-chat .tv-bill .tvb-head>.badge.paid,html[data-theme=dark] #tv-chat .tv-bill .tvb-foot>.green{background:#24463b!important;color:#a6dbc3!important}
 html[data-theme=dark] #tv-chat .tv-bill .tvb-head>.badge.overdue{background:#4f303b!important;color:#f4bdc8!important}
 html[data-theme=dark] #tv-chat .tv-bill .tvb-line.red{color:#f4bdc8}
 html[data-theme=dark] #tv-chat .tv-bill .tvb-foot .btn{color:#18263a!important}
/* Main mobile menu follows the full-page room menu. */
@media(max-width:600px){
 html body #modal .mobile-menu-body{padding:8px 0 calc(20px + env(safe-area-inset-bottom))!important}
 #modal .mobile-menu-body .app-menu-property,#modal .mobile-menu-body .app-menu-section>h3{display:none}
 #modal .mobile-menu-body .app-menu-section{margin:0;padding:0}
 #modal .mobile-menu-body :is(.app-menu-grid,.app-menu-settings){display:block;margin:0;padding:0}
 html body #modal .mobile-menu-body .app-menu-item{display:flex;flex-direction:row;align-items:center;gap:14px;width:100%;min-height:82px;margin:0;padding:16px 20px;border:0!important;border-bottom:1px solid var(--ui-line)!important;border-radius:0;box-shadow:none!important;text-align:left;background:var(--ui-surface)!important}
 #modal .mobile-menu-body .app-menu-copy{flex:1;min-width:0;gap:3px}
 #modal .mobile-menu-body .app-menu-copy strong{font-size:17px;font-weight:500;line-height:1.5}
 #modal .mobile-menu-body .app-menu-copy small{display:none}
 #modal .mobile-menu-body .is-current .app-menu-copy small{display:block;font-size:12px;color:var(--ui-muted)!important}
 #modal .mobile-menu-body .app-menu-check{display:none}
 #modal .mobile-menu-body .app-menu-chevron{display:block;flex:none;margin-left:auto;font-size:28px;line-height:1;color:var(--ui-muted)}
 #modal .mobile-menu-body .app-menu-item{--app-menu-tone:#e5eef8;--app-menu-color:#38648d}
 #modal .mobile-menu-body :is(.menu-meters,.menu-parking,.menu-vehicles){--app-menu-tone:#e3f2f3;--app-menu-color:#38858b}
 #modal .mobile-menu-body :is(.menu-billing,.menu-finance){--app-menu-tone:#e4f2ea;--app-menu-color:#317f61}
 #modal .mobile-menu-body :is(.menu-calendar,.menu-summary){--app-menu-tone:#ede9f7;--app-menu-color:#7653a1}
 #modal .mobile-menu-body :is(.menu-repairs,.menu-news){--app-menu-tone:#fff1dd;--app-menu-color:#a57733}
 #modal .mobile-menu-body .menu-leaves{--app-menu-tone:#fae9ec;--app-menu-color:#b05165}
 html body #modal .mobile-menu-body .app-menu-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--app-menu-tone)!important;color:var(--app-menu-color)!important}
 #modal .mobile-menu-body .app-menu-icon svg{width:23px;height:23px}
 html body #modal .mobile-menu-body .app-menu-item.is-current{background:var(--ui-selected)!important}
 html body #modal .mobile-menu-body .app-menu-item:active{background:var(--ui-selected)!important}
 #modal .mobile-menu-body .app-menu-item:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-3px}
 #modal .mobile-menu-body .app-menu-settings{margin-top:16px;border-top:1px solid var(--ui-line)}
 html body #modal .mobile-menu-body .app-menu-role{width:100%;min-height:82px;gap:14px;margin-top:16px;padding:16px 20px;border:0;border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);border-radius:0;background:var(--ui-surface);color:var(--ui-ink)}
 #modal .mobile-menu-body .app-menu-role .app-menu-avatar{width:46px;height:46px;background:var(--ui-selected);color:var(--ui-accent)}
 #modal .mobile-menu-body .app-menu-role small{font-size:12px;color:var(--ui-muted)}
 #modal .mhl-tasks.mobile-menu-body{display:block;gap:0}
 #modal .mhl-tasks .app-menu-copy{align-items:flex-start}
 #modal .mhl-tasks .app-menu-icon svg{color:inherit}
 #modal .mhl-tasks .mhl-task-count{flex:none;margin-left:auto;font-size:15px;font-weight:500;line-height:1.5;color:var(--ui-muted)}
 html body #modal:has(.mobile-menu-body) .modal-head .app-menu-back{border:0!important;box-shadow:none!important}
 html[data-theme=dark] #modal .mobile-menu-body .app-menu-item{--app-menu-tone:#2a4059;--app-menu-color:#adcbea}
 html[data-theme=dark] #modal .mobile-menu-body :is(.menu-meters,.menu-parking,.menu-vehicles){--app-menu-tone:#284547;--app-menu-color:#b3dfe0}
 html[data-theme=dark] #modal .mobile-menu-body :is(.menu-billing,.menu-finance){--app-menu-tone:#24463b;--app-menu-color:#a6dbc3}
 html[data-theme=dark] #modal .mobile-menu-body :is(.menu-calendar,.menu-summary){--app-menu-tone:#403751;--app-menu-color:#d0b8f0}
 html[data-theme=dark] #modal .mobile-menu-body :is(.menu-repairs,.menu-news){--app-menu-tone:#4c402a;--app-menu-color:#f0d298}
 html[data-theme=dark] #modal .mobile-menu-body .menu-leaves{--app-menu-tone:#4f303b;--app-menu-color:#f4bdc8}
}
/* Repair history uses compact, tappable rows like the billing list. */
@media(max-width:600px){
 html body #app[data-view=repairs] .mobile-list-card.ml-repair-history{display:grid;grid-template-columns:var(--mobile-card-columns);align-items:center;gap:var(--mobile-card-gap);min-height:var(--mobile-card-height);padding:var(--mobile-card-padding);border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface)!important;color:var(--ui-ink)}
 #app .ml-repair-history .mbl-card-copy{display:grid;gap:2px;min-width:0}
 #app .ml-repair-history .mbl-card-copy>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.5}
 #app .ml-repair-history .mbl-card-value>strong{font-size:16px}
 #app .ml-repair-history .mbl-card-status{font-size:11px}
 #app .ml-repair-history .mbl-room-icon{background:var(--ui-selected)!important;color:var(--ui-accent)!important}
}
/* The bottom-navigation menu uses the full mobile viewport. */
@media(max-width:600px){
 body:has(#modal[open] .mobile-menu-body){overflow:hidden}
 html body dialog#modal:has(.mobile-menu-body){position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;border:0;border-radius:0!important;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;background:var(--ui-surface)!important;color:var(--ui-ink)}
 html body #modal:has(.mobile-menu-body) #modal-content{padding:0!important;min-height:100%;background:var(--ui-surface)}
 html body #modal:has(.mobile-menu-body) .modal-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:64px;margin:0;padding:12px 16px;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:var(--ui-surface)!important}
 html body #modal:has(.mobile-menu-body) .modal-head h2{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.5;color:var(--ui-ink)!important}
 html body #modal:has(.mobile-menu-body) .modal-head .app-menu-back{order:-1;display:grid;place-items:center;flex:none;width:42px;min-height:44px;padding:8px;border:0;border-radius:10px;background:transparent!important;color:var(--ui-ink)!important}
 #modal .app-menu-back svg{width:24px;height:24px}
 html body #modal .mobile-menu-body{margin:0;padding:16px 16px calc(24px + env(safe-area-inset-bottom));min-width:0}
}
/* Mobile bill actions open as a menu before the native document or form. */
@media(max-width:600px){
 body:has(#modal[open].mbl-page-dialog){overflow:hidden}
 html body dialog#modal.mbl-page-dialog{position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;border:0;border-radius:0!important;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;background:var(--ui-surface);color:var(--ui-ink)}
 #modal.mbl-page-dialog #modal-content{padding:0!important;background:var(--ui-surface);min-height:100%}
 #modal.mbl-page-dialog .modal-head{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;min-height:64px;margin:0;padding:12px 16px;border-radius:0;border-bottom:1px solid var(--ui-line);background:var(--ui-surface)}
 #modal.mbl-page-dialog .modal-head h2{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.5}
 #modal.mbl-page-dialog .modal-head .close{display:none!important}
 #modal.mbl-page-dialog .mbl-page-back{display:grid;place-items:center;flex:none;width:42px;min-height:44px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--ui-ink)}
 .mbl-page-back svg{width:24px;height:24px}
 #modal.mbl-page-dialog #modal-content>:not(.modal-head,.mbl-action-menu,.mbl-menu-info){margin:16px}
 #modal .mbl-menu-info{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ui-line);background:var(--ui-subtle)}
 #modal .mbl-menu-info>div{display:grid;gap:6px;min-width:0}
 #modal .mbl-menu-info>div:first-child{flex:1}
 #modal .mbl-menu-info>div:last-child{text-align:right;flex:none;justify-items:end}
 #modal .mbl-menu-info strong{font-size:15px;color:var(--ui-ink);overflow-wrap:anywhere}
 #modal .mbl-menu-info small{font-size:12px;color:var(--ui-muted)}
 #modal .mbl-menu-info .mbl-card-status{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--ui-selected);color:var(--ui-accent)}
 #modal .mbl-menu-info .state-paid{background:#e4f2ea;color:#317f61}
 #modal .mbl-menu-info .state-overdue{background:#fae9ec;color:#b05165}
 #modal .mbl-action-menu{display:block!important;overflow:visible!important;position:static;width:100%;margin:0;padding:4px 0 calc(20px + env(safe-area-inset-bottom));border:0;background:var(--ui-surface)}
 #modal .mbl-action-row{display:flex;align-items:center;gap:14px;width:100%;min-height:80px;padding:15px 20px;margin:0;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-size:16px;text-align:left;box-shadow:none}
 #modal .mbl-action-row>span:nth-child(2){flex:1;min-width:0;line-height:1.5}
 #modal .mbl-action-row:active{background:var(--ui-selected)}
 #modal .mbl-action-row:focus-visible,#modal .mbl-page-back:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-3px}
 #modal .mbl-action-chevron{font-size:28px;color:var(--ui-muted)}
 #modal .mbl-action-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:#e5eef8;color:#38648d}
 #modal .mbl-action-icon svg{width:23px;height:23px}
 #modal .action-proof,#modal .action-cash{background:#e4f2ea;color:#317f61}
 #modal .action-review,#modal .action-edit{background:#fff1dd;color:#a57733}
 #modal .action-message{background:#e5f3f0;color:#42847f}
 #modal .action-history{background:#ede9f7;color:#7653a1}
 #modal.mbl-page-dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;max-width:100%;min-width:0}
 #modal.mbl-page-dialog .btn{min-height:46px}
 #modal.mbl-page-dialog .mobile-save-bar{background:var(--ui-surface);border-color:var(--ui-line)}
 /* Larger invoice copy and amounts, scoped to the mobile document page. */
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row{display:flex!important;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:12px 0;margin:8px 16px;font-size:18px;line-height:1.55;border-color:var(--ui-line)}
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row>*{margin:0!important;font-size:18px;color:var(--ui-ink)}
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row>*:first-child{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:500}
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row>*:last-child{flex:none;white-space:nowrap;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row small{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--ui-muted)}
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row:has(.invoice-total){margin-top:16px;border-top:1px solid var(--ui-line)}
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row:has(.invoice-total)>strong:first-child{font-size:20px;font-weight:600}
 html body #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.summary-row>.invoice-total{font-size:22px;color:var(--ui-accent)}
 #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>.cl-group{font-size:14px;line-height:1.6;padding:7px 9px;white-space:normal;background:var(--ui-selected);color:var(--ui-accent)}
 #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>p{font-size:16px;line-height:1.65;color:var(--ui-ink)}
 #modal.mbl-page-dialog:has(#modal-content>.bill-header) #modal-content>p.hint{font-size:14px;color:var(--ui-muted)}
 #modal.mbl-page-dialog:has(#modal-content>.bill-header) .bill-header>.hint{font-size:13px;overflow-wrap:anywhere}
 #modal.mbl-page-dialog #modal-content>.btn.full{width:calc(100% - 32px);max-width:calc(100% - 32px)}
 #modal .mbl-payment-proof .slip-box{display:flex;flex-direction:column;align-items:stretch;gap:16px}
 #modal .mbl-payment-proof .slip-box img{width:100%;height:auto;max-height:65dvh;object-fit:contain}
 html[data-theme=dark] #modal .mbl-action-icon{background:#2a4059;color:#adcbea}
 html[data-theme=dark] #modal :is(.action-proof,.action-cash,.mbl-menu-info .state-paid){background:#24463b;color:#a6dbc3}
 html[data-theme=dark] #modal :is(.action-review,.action-edit){background:#4c402a;color:#f0d298}
 html[data-theme=dark] #modal .action-message{background:#284547;color:#b3dfe0}
 html[data-theme=dark] #modal .action-history{background:#403751;color:#d0b8f0}
 html[data-theme=dark] #modal .mbl-menu-info .state-overdue{background:#4f303b;color:#f4bdc8}
}
/* Mobile billing: two readable selector rows, secondary tools on demand. */
@media(max-width:600px){
 html body #app[data-view=billing]:has(.mobile-billing-list)>.billing-cycle,
 #app[data-view=billing]:has(.mobile-billing-list)>.billing-cycle+section.card,
 html body #app[data-view=billing]:has(.mobile-billing-list) .period-selects{display:none!important}
 html body #app[data-view=billing] .mobile-billing-list{margin-top:12px}
 #app .mbl-select-rows{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;overflow:hidden;margin-bottom:4px}
 #app .mbl-select-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:4px 14px;margin:0;color:var(--ui-ink);font-size:15px;font-weight:500}
 #app .mbl-select-row+.mbl-select-row{border-top:1px solid var(--ui-line)}
 #app .mbl-select-row>span{flex:none}
 html body #app .mbl-select-row>select{width:auto;flex:1;min-width:0;max-width:75%;min-height:46px;padding:8px 22px 8px 4px;border:0;border-radius:6px;background-color:transparent;color:var(--ui-ink);font-size:16px;font-weight:500;text-align:right;box-shadow:none}
 #app .mbl-select-row>select:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
 #app .mbl-extra{margin:0 0 12px;background:transparent;color:var(--ui-ink)}
 #app .mbl-extra>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 4px;list-style:none;color:var(--ui-muted);font-size:13px;cursor:pointer}
 #app .mbl-extra>summary::-webkit-details-marker{display:none}
 #app .mbl-extra>summary>svg{width:18px;height:18px;color:var(--ui-accent)}
 #app .mbl-extra-chevron{margin-left:auto;font-size:20px;color:var(--ui-muted)}
 #app .mbl-extra[open] .mbl-extra-chevron{transform:rotate(180deg)}
 #app .mbl-extra>summary>i{width:6px;height:6px;border-radius:50%;background:var(--ui-accent)}
 #app .mbl-extra-body{padding:12px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px}
 html body #app .mbl-extra .mbl-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 14px}
 #app .mbl-building-field{display:flex;align-items:center;gap:12px;margin:0;font-size:14px;color:var(--ui-muted)}
 #app .mbl-building-field>select{flex:1;min-width:0;min-height:44px;font-size:16px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line)}
 #app .mbl-extra-title{margin:0 0 8px;font-size:12px;color:var(--ui-muted)}
 #app .mbl-extra .mbl-summary{margin:0}
 #app .mbl-issue-compact{display:flex;align-items:center;gap:5px;min-height:44px;margin:0;padding:8px 12px;font-size:13px;white-space:nowrap;background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-line)}
 #app .mbl-issue-compact>svg{width:18px;height:18px}
 #app .mbl-active-filters{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;color:var(--ui-muted);overflow-wrap:anywhere}
 #app .mbl-active-filters>button{flex:none;min-height:36px;padding:4px 0;border:0;background:transparent;color:var(--ui-accent);font:inherit;text-decoration:underline}
 #app .mbl-select-row option,#app .mbl-select-row optgroup{background:var(--ui-surface);color:var(--ui-ink)}
}
/* App-style mobile landing page; navigation stays scoped to existing permissions. */
.mhl-greeting,.mhl-notice{display:none}
@media(max-width:600px){
 html body #app:has(.mobile-launcher){padding:14px 12px calc(86px + env(safe-area-inset-bottom));background:var(--ui-page);min-width:0}
 html body #app:has(.mobile-launcher).page-enter{animation:none}
 #app:has(.mobile-launcher)>:not(.mobile-launcher){display:none!important}
 body.mobile-home-route .shell>header .breadcrumb{display:none!important}
 body.mobile-home-route .mhl-greeting{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;color:var(--ui-ink)}
 body.mobile-home-route .mhl-notice{position:relative;display:grid;place-items:center;flex:none;width:40px;min-height:44px;padding:8px;border:0;background:transparent;color:var(--ui-accent);border-radius:10px}
 .mhl-notice svg{width:23px;height:23px}
 .mhl-notice b{position:absolute;top:2px;right:0;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:#ae4960;color:white;font-size:10px;font-weight:600;line-height:1}
 body.mobile-home-route .shell>header #theme-toggle{min-width:32px;width:32px}
 body.mobile-home-route .shell>header .header-right{gap:3px}
 #app .mobile-launcher{display:block;color:var(--ui-ink);min-width:0;width:100%;margin:0}
 #app .mhl-property{display:flex;align-items:flex-start;gap:12px;position:relative;min-height:124px;padding:18px 18px 30px;border-radius:20px;background:linear-gradient(125deg,#24446a,#365b83);color:#fff}
 #app .mhl-property-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;background:#ffffff20;color:#fff}
 #app .mhl-property>div{min-width:0;flex:1}
 #app .mhl-property-icon svg{width:28px;height:28px}
 #app .mhl-property small{display:block;font-size:12px;color:#d4e1ee;margin:0 0 4px;line-height:1.4}
 html body .shell #app .mobile-launcher .mhl-property .mhl-property-label{display:block;font-size:12px;color:#e8eff6!important;margin:0 0 4px;line-height:1.4}
 #app .mhl-property h1{font-size:22px;font-weight:600;line-height:1.4;color:white;margin:0;overflow-wrap:anywhere;padding:0;border:0;display:block!important}
 #app .mhl-property p{font-size:12px;color:#d4e1ee;margin:5px 0 0;line-height:1.5}
 html body #app .mobile-launcher .mhl-property h1{color:#fff!important;font-size:22px!important}
 html body #app .mobile-launcher .mhl-property small{color:#d4e1ee!important}
 #app .mhl-property .mhl-demo{position:absolute;right:14px;top:16px;border-radius:6px;padding:3px 7px;color:#e7eff8;background:#ffffff12;font-size:10px;line-height:1.5}
 #app .mhl-overview{position:relative;margin:-24px 10px 0;background:var(--ui-surface);border:1px solid var(--ui-line);padding:12px 14px 14px;border-radius:14px;box-shadow:0 5px 18px #192e4610}
 #app .mhl-overview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
 #app .mhl-overview-head h2{font-size:13px;font-weight:600;line-height:1.4;color:var(--ui-ink);margin:0}
 #app .mhl-overview-head button{display:flex;align-items:center;gap:2px;border:0;background:transparent;color:var(--ui-accent);font:inherit;font-size:12px;min-height:44px;padding:4px 0 4px 8px;cursor:pointer}
 #app .mhl-overview-head svg{width:14px;height:14px}
 #app .mhl-room-counts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
 #app .mhl-room-counts>button{display:flex;align-items:flex-start;flex-direction:column;min-height:44px;gap:3px;text-align:left;border:0;border-radius:0;background:transparent;color:var(--ui-ink);font:inherit;padding:0 8px;cursor:pointer}
 #app .mhl-room-counts>button:first-child{padding-left:0;border-right:1px solid var(--ui-line)}
 #app .mhl-room-counts>button>span{font-size:12px;color:var(--ui-muted)}
 #app .mhl-room-counts strong{font-size:24px;line-height:1.3;font-weight:700;color:var(--ui-ink)}
 #app .mhl-room-counts small{font-size:12px;color:var(--ui-muted);font-weight:400}
 html body #app .mobile-launcher .mhl-room-counts strong>small{display:inline!important;margin:0!important;color:var(--ui-muted)!important}
 #app .mhl-occupancy{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--ui-muted);margin:10px 0 6px}
 #app .mhl-occupancy strong{font-size:12px;color:var(--ui-accent)}
 #app .mhl-progress{height:4px;border-radius:4px;background:var(--ui-line);overflow:hidden}
 #app .mhl-progress>span{display:block;height:100%;border-radius:inherit;background:var(--ui-accent)}
 #app .mhl-menu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 2px 6px}
 #app .mhl-menu-head h2{font-size:17px;font-weight:600;line-height:1.5;margin:0;color:var(--ui-ink)}
 #app .mhl-menu-head small{font-size:11px;color:var(--ui-muted)}
 #app .mhl-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;background:none;border:0;margin:0;padding:0}
 #app .mhl-tile{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:0;min-height:88px;height:88px;padding:8px 4px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:12px;box-shadow:0 2px 5px #25324703;font:inherit;font-size:13px;font-weight:500;line-height:1.4;text-align:center;cursor:pointer;white-space:normal;overflow-wrap:normal}
 #app .mhl-tile>span:last-of-type{display:flex;align-items:center;justify-content:center;min-height:36px}
 #app .mhl-tile:hover,#app .mhl-tile:active{background:var(--ui-selected);border-color:var(--ui-accent)}
 #app .mhl-tile:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
 #app .mhl-tile-icon{display:grid;place-items:center;width:30px;height:30px;color:var(--ui-accent)}
 #app .mhl-tile-icon svg{width:28px;height:28px}
 #app .mhl-count{position:absolute;top:6px;right:6px;min-width:17px;height:17px;display:grid;place-items:center;border-radius:10px;background:#f9e9ed;color:#a53e55;font-size:10px;font-weight:600;line-height:1;padding:0 3px}
 #modal .mhl-tasks{display:grid;gap:10px;padding:4px}
 #modal .mhl-tasks button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:12px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:10px;font:inherit;font-size:14px;cursor:pointer}
 #modal .mhl-tasks button>span{display:flex;align-items:center;gap:10px}
 #modal .mhl-tasks svg{width:23px;height:23px;color:var(--ui-accent)}
 #modal .mhl-tasks b{font-size:12px;font-weight:500;white-space:nowrap;color:var(--ui-muted)}
 html[data-theme=dark] #app .mhl-count{background:#4f303b;color:#f4bdc8}
}
@media(max-width:359px){
 #app .mhl-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #app .mhl-property h1{font-size:20px}
 body.mobile-home-route .mhl-greeting{font-size:14px}
}
/* Vacant-room menu on mobile, backed by the same native room editor. */
.room-vacant-menu,.room-vacant-back{display:none!important}
@media(max-width:600px){
 #modal .room-mobile-workflow>.rd-hero,#modal .room-mobile-workflow>.room-flow-tabs{display:none!important}
 #modal:is(:has(.room-mobile-workflow),.room-mobile-subpage) .modal-head{display:flex;align-items:center;gap:12px;min-height:64px}
 #modal:is(:has(.room-mobile-workflow),.room-mobile-subpage) .modal-head h2{flex:1;min-width:0;font-size:17px;margin:0;line-height:1.5}
 #modal:is(:has(.room-mobile-workflow),.room-mobile-subpage) .room-vacant-back{display:grid!important;place-items:center;flex:none;width:42px;min-height:44px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--ui-ink);box-shadow:none}
 #modal:is(:has(.room-mobile-workflow),.room-mobile-subpage) .modal-head .close{display:none!important}
 .room-vacant-back svg{width:24px;height:24px}
 #modal .room-mobile-workflow[data-mobile-view=menu]>.room-vacant-menu{display:block!important;padding:8px 0}
 #modal .room-mobile-workflow[data-mobile-view=menu]>.room-flow-editor{display:none!important}
 #modal .room-mobile-workflow .rs-form-head{display:none!important}
 html body dialog#modal .room-mobile-workflow :is(#rs-form,#rs-inline){padding:0;border:0;background:var(--ui-surface);border-radius:0}
 #modal .room-mobile-workflow :is(#rs-form,#rs-inline) .field{margin-bottom:18px}
 #modal:is(:has(.room-mobile-workflow),.room-mobile-subpage) .mobile-save-bar{background:var(--ui-surface);border-color:var(--ui-line)}
 html body dialog#modal.room-mobile-subpage{width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh!important;margin:0;inset:0!important;border:0;border-radius:0;background:var(--ui-surface);color:var(--ui-ink)}
 #modal.room-mobile-subpage #modal-content{padding:0;background:var(--ui-surface);min-height:100%}
 #modal.room-mobile-subpage .modal-head{position:sticky;top:0;z-index:4;padding:14px 16px;margin:0;border-radius:0;border-bottom:1px solid var(--ui-line);background:var(--ui-surface)}
 #modal.room-mobile-subpage #modal-content>:not(.modal-head){margin:16px}
 #modal.room-mobile-subpage :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;max-width:100%;min-width:0}
 #modal.room-mobile-subpage .btn{min-height:46px}
 body:has(#modal[open].room-mobile-subpage){overflow:hidden}
 #modal .room-vacant-item{display:flex;align-items:center;gap:14px;width:100%;min-height:82px;margin:0;padding:16px 20px;text-align:left;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:var(--ui-surface);color:var(--ui-ink);box-shadow:none;font:inherit;font-size:17px;font-weight:500}
 #modal .room-vacant-item:active{background:var(--ui-selected)}
 #modal .room-vacant-item:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-3px}
 #modal .room-vacant-item .room-tab-icon{width:46px;height:46px}
 #modal .room-vacant-item .room-tab-icon svg{width:23px;height:23px}
 #modal .room-vacant-label{flex:1;min-width:0}
 #modal .room-vacant-chevron{font-size:28px;line-height:1;color:var(--ui-muted)}
 #modal .room-vacant-item:last-child{margin-top:16px;border-top:1px solid var(--ui-line)}
 #modal .room-vacant-attention,#modal .room-vacant-count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:50%;background:var(--ui-selected);color:var(--ui-accent);font-size:12px;font-weight:700}
 #modal .room-vacant-attention{background:#fae9ec;color:#b05165}
 [data-theme=dark] #modal .room-vacant-attention{background:#4f303b;color:#f4bdc8}
}
/* Room workflow: horizontal menu, one native editor, shared light/dark surfaces. */
body:has(#modal[open].room-flow-dialog){overflow:hidden}
html body dialog#modal.room-flow-dialog:has(.room-workflow){width:min(980px,calc(100vw - 48px))!important;max-width:none!important;max-height:90dvh!important;height:auto;margin:auto;inset:0!important;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-surface);color:var(--ui-ink)}
#modal.room-flow-dialog #modal-content{padding:0;background:var(--ui-surface)}
#modal.room-flow-dialog .modal-head{position:sticky;top:0;z-index:4;background:var(--ui-surface);padding:18px 24px;margin:0;border-bottom:1px solid var(--ui-line);border-radius:0}
#modal .room-workflow{padding:0;background:var(--ui-surface);min-width:0}
#modal .room-workflow .rd-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 24px;background:var(--ui-subtle);border:0;border-radius:0;margin:0}
#modal .room-workflow .rd-hero .summary-row{display:flex;flex-direction:row;gap:10px;align-items:center;padding:0;border:0;font-size:13px}
#modal .room-workflow .rd-hero .summary-row>span:first-child{font-size:12px;color:var(--ui-muted)}
#modal .room-workflow .room-flow-tabs{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:10px 18px;margin:0;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:var(--ui-surface)}
#modal .room-workflow .room-flow-tabs>button{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--ui-muted);font-size:14px;white-space:nowrap;font-weight:600}
#modal .room-workflow .room-flow-tabs>button.active{background:var(--ui-accent);color:#fff;box-shadow:0 2px 5px #122b4517}
html body dialog#modal .room-workflow .room-flow-tabs>button.active{background:#24446a!important;color:#fff!important}
#modal .room-workflow .room-flow-tabs>button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
.room-tab-icon{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:#e5eef8;color:#38648d}
.room-tab-icon svg{width:18px;height:18px}
.room-tab-icon.icon-lease{background:#ede9f7;color:#7653a1}
.room-tab-icon.icon-payment{background:#e4f2ea;color:#317f61}
.room-tab-icon.icon-exit{background:#fae9ec;color:#b05165}
.room-tab-icon.icon-requests{background:#fff0dc;color:#9b732c}
.room-tab-icon.icon-booking{background:#e3f2f2;color:#3f8284}
.room-tab-icon.icon-entry{background:#e4f2ea;color:#317f61}
#modal .room-workflow .room-flow-editor{border:0;margin:0;padding:20px 24px;background:var(--ui-subtle)}
#modal .room-workflow #rs-acts{display:block;margin:0;padding:0}
#modal .room-workflow #rs-acts[hidden],#modal .room-workflow [hidden],#modal .room-workflow .room-panel-hidden{display:none!important}
#modal .room-workflow .room-flow-panel{display:grid;gap:16px;min-width:0}
#modal .room-workflow .rd-section{margin:0;padding:18px 20px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;box-shadow:none}
#modal .room-workflow .rd-section>h3{margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--ui-line);background:transparent;color:var(--ui-ink);font-size:16px}
#modal .room-workflow .rd-section>h3 small{float:right;color:var(--ui-muted);font-size:12px;font-weight:400}
#modal .room-workflow .summary-row{display:flex!important;align-items:center;justify-content:space-between;gap:18px;padding:11px 0;border-color:var(--ui-line);color:var(--ui-ink);font-size:14px}
#modal .room-workflow .summary-row>*{margin:0!important}
#modal .room-workflow .summary-row>span:first-child{color:var(--ui-muted);flex:none}
#modal .room-workflow .summary-row>span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right;flex:1}
#modal .room-workflow .summary-row>span.badge:last-child{flex:0 0 auto;display:inline-flex;width:auto}
#modal .room-workflow .rd-rent{display:flex;align-items:center;flex-direction:row}
#modal .room-workflow .rd-extra>summary{color:var(--ui-ink)!important;background:var(--ui-subtle)}
#modal .room-workflow .room-flow-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0}
#modal .room-workflow .room-flow-actions .btn{min-height:44px;margin:0}
#modal .room-workflow .rd-svc{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;padding:16px 20px;margin:0;grid-column:auto}
#modal .room-workflow .room-request-item{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%;padding:12px 0;margin:0;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:transparent;color:var(--ui-ink);white-space:normal;box-shadow:none}
#modal .room-workflow .room-request-item>span:first-child{flex:1;min-width:0}
#modal .room-workflow .room-request-item small{display:block;font-size:12px;color:var(--ui-muted);margin-top:4px}
.room-exit-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:exit;list-style:none;padding:0;margin:16px 0 20px}
.room-exit-steps li{counter-increment:exit;display:flex;align-items:center;gap:10px;font-size:14px;padding:12px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-subtle)}
.room-exit-steps li:before{content:counter(exit);display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ui-selected);color:var(--ui-accent);font-weight:700}
#modal .room-refund-steps{display:grid;gap:14px;margin:18px 0}
#modal .room-refund-step h3{display:flex;align-items:center;gap:10px}
#modal .room-refund-step h3>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ui-selected);color:var(--ui-accent)}
#modal .room-refund-step .dr-last{border:0;padding:0;margin:0;background:transparent}
#modal .room-refund-step .bill-summary{margin:0}
#modal .room-workflow #rs-inline,#modal .room-workflow #rs-form{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;padding:18px 20px}
#modal .room-workflow .rs-form-head{margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--ui-line);color:var(--ui-ink)}
[data-theme=dark] .room-tab-icon{filter:saturate(.8);background:#2a4059;color:#adcbea}
[data-theme=dark] .room-tab-icon.icon-lease{background:#403751;color:#d0b8f0}
[data-theme=dark] .room-tab-icon.icon-payment,[data-theme=dark] .room-tab-icon.icon-entry{background:#24463b;color:#a6dbc3}
[data-theme=dark] .room-tab-icon.icon-exit{background:#4f303b;color:#f4bdc8}
[data-theme=dark] .room-tab-icon.icon-requests{background:#4c402a;color:#f0d298}
[data-theme=dark] .room-tab-icon.icon-booking{background:#284547;color:#b3dfe0}
@media(max-width:600px){
 html body dialog#modal.room-flow-dialog:has(.room-workflow){width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh!important;margin:0;inset:0!important;border:0;border-radius:0}
 #modal.room-flow-dialog .modal-head{padding:14px 16px}
 #modal.room-flow-dialog .modal-head h2{font-size:18px}
 #modal .room-workflow .rd-hero{padding:10px 16px;gap:8px 16px}
 #modal .room-workflow .rd-hero .summary-row:first-child>span:first-child{display:none}
 #modal .room-workflow .room-flow-tabs{padding:8px 12px;gap:4px;scrollbar-width:none}
 #modal .room-workflow .room-flow-tabs>button{flex:0 0 auto;min-height:52px;padding:8px 12px;font-size:14px}
 #modal .room-workflow .room-flow-tabs>button.active{scroll-margin-inline:12px}
 #modal .room-workflow .room-flow-editor{padding:16px 12px calc(24px + env(safe-area-inset-bottom))}
 #modal .room-workflow .rd-section,#modal .room-workflow .rd-svc,#modal .room-workflow #rs-inline,#modal .room-workflow #rs-form{padding:14px}
 #modal .room-workflow .room-flow-panel{gap:12px}
 #modal .room-workflow .room-flow-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #modal .room-workflow .room-flow-actions .btn{white-space:normal;font-size:14px;min-width:0;min-height:46px;padding:8px}
 #modal .room-workflow :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;min-width:0;max-width:100%}
 #modal .room-workflow .summary-row{font-size:14px;gap:10px}
 #modal .room-workflow .room-request-item{gap:8px;font-size:14px;flex-wrap:wrap}
 #modal .room-workflow .room-request-item .badge{font-size:11px}
 .room-exit-steps{grid-template-columns:1fr;gap:8px}
 #modal .room-workflow .rd-svc-row{flex-wrap:wrap;gap:8px}
 #modal .room-workflow .rd-svc-row{padding:10px 0}
 #modal .room-workflow .rd-svc-txt{min-width:100px}
 #modal .room-workflow .rd-svc-btn,#modal .room-workflow .rd-svc-link{min-height:44px;font-size:13px}
}
@media print{
 body:has(.lease-document)>:not(#modal){display:none!important}
 body:has(.lease-document) #modal{position:static;width:100%;max-width:none;height:auto;max-height:none;border:0;overflow:visible;margin:0;padding:0;box-shadow:none;background:white;color:black}
 body:has(.lease-document) #modal::backdrop{display:none}
 body:has(.lease-document) #modal-content{padding:0!important;background:white!important}
 body:has(.lease-document) .modal-head,body:has(.lease-document) .lease-print-actions{display:none!important}
 .lease-document{color:black!important;background:white!important;box-shadow:none!important;border:0!important}
}
.pwa-settings-tab{display:none!important}
/* Task-first mobile layout for housekeeping and maintenance. */
.wk-status-options,.wk-assignee-value{display:none}
.wk-cost-details>summary{display:none}
.wk-cost-details{display:contents}
@media(max-width:600px){
 body:is([data-role=staff],[data-role=tech]) #app{padding-bottom:100px}
 body:is([data-role=staff],[data-role=tech]) #mnav{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}
 body[data-role=tech] #mnav{grid-template-columns:repeat(3,minmax(0,1fr))}
 body:is([data-role=staff],[data-role=tech]) #mnav button{min-height:56px;font-size:13px;font-weight:600;gap:3px}
 body:is([data-role=staff],[data-role=tech]) #mnav button span{display:flex;justify-content:center}
 body:is([data-role=staff],[data-role=tech]) #mnav button svg{width:24px;height:24px}
 body:is([data-role=staff],[data-role=tech]) :is(#app,#modal) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important;max-width:100%;min-width:0;min-height:46px}
 body:is([data-role=staff],[data-role=tech]) :is(#app,#modal) .btn{min-height:46px}
 #app .worker-app{color:var(--ui-ink);min-width:0}
 #app .wk-intro{display:flex;align-items:center;gap:9px;margin-bottom:18px}
 #app .wk-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ui-selected);color:var(--ui-accent);font-size:17px;font-weight:700;flex:none}
 #app .wk-intro strong{font-size:14px;line-height:1.5}
 #app .wk-intro small{display:block;font-size:12px;color:var(--ui-muted);margin:2px 0 0;line-height:1.6}
 #app .wk-date{margin-left:auto;flex:none;font-size:12px;color:var(--ui-muted)}
 #app .wk-heading{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:12px}
 #app .wk-heading h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 #app .wk-heading:not(:has(.btn)){height:0;margin:0}
 #app .wk-heading .btn{font-size:14px;padding:8px 13px;min-height:44px}
 #app .wk-segment{display:flex;padding:4px;gap:3px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-subtle);margin-bottom:12px}
 #app .wk-segment button{flex:1;min-width:0;min-height:46px;padding:7px 3px;border:1px solid transparent;border-radius:9px;font:inherit;font-size:14px;background:transparent;color:var(--ui-muted);white-space:nowrap}
 #app .wk-segment button.active{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-accent);font-weight:700;box-shadow:0 1px 3px #25324708}
 #app .wk-segment b{font-size:12px;margin-left:3px}
 #app .wk-tools{display:flex;gap:8px;margin-bottom:18px;align-items:stretch}
 #app .wk-search{display:flex;align-items:center;gap:7px;flex:1;min-width:0;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);padding:0 10px;color:var(--ui-muted)}
 #app .wk-search>span{font-size:22px}
 #app .wk-search input{width:100%;min-width:0;border:0!important;background:transparent!important;padding:8px 0;box-shadow:none!important}
 #app .wk-filters{position:relative;flex:none}
 #app .wk-filters>summary{display:flex;align-items:center;justify-content:center;gap:5px;height:100%;min-height:48px;padding:8px 10px;list-style:none;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);color:var(--ui-accent);font-size:13px;cursor:pointer}
 #app .wk-filters>summary::-webkit-details-marker{display:none}
 #app .wk-filters svg{width:18px;height:18px}
 #app .wk-filters>div{position:absolute;right:0;top:calc(100% + 6px);z-index:9;display:grid;gap:10px;width:min(270px,calc(100vw - 40px));padding:14px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);box-shadow:0 8px 28px #14294018}
 #app .wk-filters label{display:grid;gap:5px;font-size:13px;color:var(--ui-muted)}
 #app .wk-filters select{width:100%}
 #app .wk-result-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
 #app .wk-result-head strong{font-size:16px;color:var(--ui-ink)}
 #app .wk-result-head strong span{font-size:13px;color:var(--ui-muted);font-weight:400;margin-left:4px}
 #app .wk-result-head small{font-size:11px;color:var(--ui-muted);line-height:1.4}
 #app .wk-list{display:grid;gap:9px}
 #app .wk-job{width:100%;min-width:0;display:grid;gap:6px;text-align:left;font:inherit;padding:14px;background:var(--ui-surface)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line);border-radius:12px;box-shadow:0 2px 6px #25324704}
 #app .wk-job-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
 #app .wk-job-top>strong{font-size:17px;color:var(--ui-ink)}
 #app .wk-status{display:inline-block;font-size:12px;line-height:1.5;background:var(--ui-selected);color:var(--ui-accent);padding:4px 8px;border-radius:7px}
 #app .wk-status.is-done{background:#e8f3ee;color:#28654e}
 #app .wk-status.is-urgent{background:#f9ecee;color:#a13f50}
 html[data-theme=dark] #app .wk-status.is-done{background:#293f37;color:#b4dbc7}
 html[data-theme=dark] #app .wk-status.is-urgent{background:#4e303b;color:#efb2c0}
 #app .wk-job-title{font-size:15px;line-height:1.6;overflow-wrap:anywhere}
 #app .wk-job-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--ui-muted)}
 #app .wk-job-bottom i,#app .wk-room-top i{font-size:22px;font-style:normal;line-height:20px;color:var(--ui-muted)}
 #app .wk-assignee{font-size:12px;color:var(--ui-muted);margin:0;line-height:1.5}
 #app .wk-empty{padding:30px 14px;text-align:center;background:var(--ui-surface);border:1px dashed var(--ui-line);border-radius:12px;color:var(--ui-muted);grid-column:1/-1}
 #app .wk-empty small{display:block;font-size:12px;margin-top:8px}
 #app .wk-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #app .wk-room{display:flex;flex-direction:column;gap:5px;min-height:110px;padding:12px;text-align:left;font:inherit;background:var(--ui-surface)!important;color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:11px}
 #app .wk-room-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
 #app .wk-room-top strong{font-size:19px;color:var(--ui-ink)}
 #app .wk-room-status{font-size:14px;color:var(--ui-accent);font-weight:600}
 #app .wk-room small{font-size:12px;color:var(--ui-muted);line-height:1.5;overflow-wrap:anywhere;margin:0}
 #app .wk-room-note{border-top:1px solid var(--ui-line);padding-top:5px;margin-top:2px;font-size:12px;line-height:1.6;color:var(--ui-muted)}
 #app .wk-room-note.has-job{color:var(--ui-accent)}
 #app .wk-more{margin-top:12px}
 body:is([data-role=staff],[data-role=tech]) :is(button,summary):focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
 #modal.worker-dialog{padding:0!important;border-radius:16px!important;max-height:calc(100dvh - 28px)!important}
 #modal.worker-dialog #modal-content{padding:16px!important}
 #modal.worker-dialog .modal-head{position:sticky;top:-16px;z-index:6;background:var(--ui-surface)!important;padding:12px 0;border-bottom:1px solid var(--ui-line);border-radius:0;margin-bottom:16px}
 #modal.worker-dialog .close{min-width:44px;min-height:44px}
 #modal.worker-dialog .summary-row{font-size:14px;gap:10px;line-height:1.6;align-items:start}
 #modal.worker-dialog .summary-row>span{min-width:0;overflow-wrap:anywhere}
 #modal.worker-dialog .repair-title{font-size:19px;color:var(--ui-ink);line-height:1.5}
 #modal.worker-dialog .field{margin-top:16px;margin-bottom:14px}
 #modal.worker-dialog .field>label{font-size:14px;color:var(--ui-ink)}
 #modal.worker-dialog :is(#rd-status,#rd-assignee){display:none}
 #modal.worker-dialog .wk-status-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #modal.worker-dialog .wk-status-options button{min-height:48px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-size:15px}
 #modal.worker-dialog .wk-status-options button.active{border-color:var(--ui-accent);background:var(--ui-selected);color:var(--ui-accent);font-weight:700}
 #modal.worker-dialog .wk-assignee-value{display:block;padding:11px 12px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-subtle);color:var(--ui-muted);font-size:14px}
 #modal.worker-dialog .wk-cost-details{display:block;margin:14px 0;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface)}
 #modal.worker-dialog .wk-cost-details>summary{display:list-item;padding:13px;font-size:14px;min-height:48px;color:var(--ui-accent);cursor:pointer}
 #modal.worker-dialog .wk-cost-details .cost-box{border:0!important;margin:0;padding:12px;background:var(--ui-surface)!important}
 #modal.worker-dialog .cost-row{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;max-width:100%;padding:10px 0}
 #modal.worker-dialog .cost-row .rc-item{grid-column:1/-1;width:100%}
 #modal.worker-dialog .cost-head{display:none}
 #modal.worker-dialog .wk-save-actions{position:sticky;bottom:-16px;z-index:7;display:grid;grid-template-columns:1fr;gap:8px;background:var(--ui-surface)!important;border-top:1px solid var(--ui-line);padding:12px 0 16px;margin:16px 0 0}
 #modal.worker-dialog .wk-save-actions .btn{width:100%;min-height:48px;font-size:15px}
 #modal.worker-dialog .wk-save-actions>.btn:not(.primary){order:-1;min-height:44px;background:var(--ui-subtle)}
 body:is([data-role=staff],[data-role=tech]) #app .pk-stats{margin-bottom:12px}
 body[data-role=staff] #app[data-view=parking]>.tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;overflow:visible;padding:4px;max-width:100%}
 body[data-role=staff] #app[data-view=parking]>.tabs .tab{min-width:0;min-height:48px;padding:6px 3px;font-size:13px;white-space:normal;display:flex;justify-content:center;gap:4px;line-height:1.4}
 body[data-role=staff] #app[data-view=parking]>.tabs .count{font-size:11px;padding:1px 4px}
 html body[data-role=staff] #app .wk-parking-reg tbody tr{display:grid!important;grid-template-columns:1fr auto;gap:5px 10px;padding:12px!important;min-height:112px;align-items:center}
 html body[data-role=staff] #app .wk-parking-reg tbody td{padding:0!important;border:0;min-width:0;display:block!important;font-size:13px}
 html body[data-role=staff] #app .wk-parking-reg tbody td:before{display:none!important}
 html body[data-role=staff] #app .wk-parking-reg tbody td:nth-child(3){grid-column:1;grid-row:1;font-size:17px}
 html body[data-role=staff] #app .wk-parking-reg tbody td:nth-child(1){grid-column:2;grid-row:1;text-align:right}
 html body[data-role=staff] #app .wk-parking-reg .room-no{min-height:44px;min-width:52px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-selected);color:var(--ui-accent);padding:5px}
 html body[data-role=staff] #app .wk-parking-reg tbody td:nth-child(2){grid-column:1/-1;color:var(--ui-ink)}
 html body[data-role=staff] #app .wk-parking-reg tbody :is(td:nth-child(4),td:nth-child(5)){font-size:12px;color:var(--ui-muted)}
 html body[data-role=staff] #app .wk-parking-reg tbody td:nth-child(5){text-align:right}
 html body[data-role=staff] #app .wk-parking-reg .pk-plate-inline b{font-size:17px}
 @media(max-width:360px){#app .wk-date{display:none}#app .wk-intro small{font-size:11px}#app .wk-segment button{font-size:13px}#app .wk-result-head{align-items:start}#app .wk-result-head small{max-width:105px}#app .wk-status{font-size:11px}}
}
.sms-menu,.sms-row-summary,.sms-room-search,.sms-fold-toggle{display:none}
.sms-lease-actions{display:contents}
.sms-check-option>span{display:none}
@media(max-width:600px){
 html body #app:is([data-view=settings],[data-view=users])>.property-settings-tabs{display:none!important}
 #app .sms-menu{display:block;margin-bottom:14px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface)}
 #app .sms-menu>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:12px 14px;cursor:pointer;list-style:none;color:var(--ui-ink)}
 #app .sms-menu>summary::-webkit-details-marker{display:none}
 #app .sms-menu>summary small{font-size:12px;color:var(--ui-muted);margin:0}
 #app .sms-menu>summary strong{display:block;font-size:17px;line-height:1.5}
 #app .sms-menu-change{flex:none;font-size:12px;color:var(--ui-accent)}
 #app .sms-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px 12px}
 #app .sms-menu-item{min-height:48px;padding:10px 8px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-subtle);color:var(--ui-ink);font-size:14px;line-height:1.5;text-align:left;white-space:normal}
 #app .sms-menu-item.active{background:var(--ui-selected);border-color:var(--ui-accent);color:var(--ui-accent);font-weight:700}
 #app .sms-menu-item .count{display:none}
 html body #app:is([data-view=settings],[data-view=users]) :is(.form-grid,.di-addr,.di-acc-grid,.svc-grid,.oa-steps){grid-template-columns:minmax(0,1fr)!important;gap:10px;min-width:0}
 html body #app:is([data-view=settings],[data-view=users]) :is(.card.padded,.di-card,.lease-editor,.ai-card){padding:16px}
 html body #app:is([data-view=settings],[data-view=users]) .setting-row{background:var(--ui-surface)!important;color:var(--ui-ink);border:1px solid var(--ui-line)!important;border-radius:10px;box-shadow:none;padding:14px;gap:10px;margin-bottom:10px}
 html body #app:is([data-view=settings],[data-view=users]) .setting-row>label strong{color:var(--ui-ink);font-size:15px}
 html body #app:is([data-view=settings],[data-view=users]) .setting-row small{color:var(--ui-muted);font-size:13px;line-height:1.6}
 html body #app:is([data-view=settings],[data-view=users]) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important;min-height:46px;max-width:100%}
 html body #app:is([data-view=settings],[data-view=users]) .unit-input{background:var(--ui-surface);border-color:var(--ui-line);border-radius:8px;width:100%;max-width:100%}
 html body #app:is([data-view=settings],[data-view=users]) .unit-input input{font-size:20px!important;color:var(--ui-ink);background:var(--ui-surface);min-width:0}
 html body #app:is([data-view=settings],[data-view=users]) .unit-input>span{background:var(--ui-subtle);color:var(--ui-muted);font-size:13px;white-space:nowrap;padding:10px}
 html body #settings-form:is([data-stab=svc],[data-stab=other]) .svc-grid{padding:0;grid-template-columns:minmax(0,1fr)}
 html body #settings-form:is([data-stab=svc],[data-stab=other]) .svc-card .setting-row{margin:0;border:0!important;border-bottom:1px solid var(--ui-line)!important;border-radius:0}
 html body #settings-form:is([data-stab=svc],[data-stab=other]) .svc-head .svc-ic{background:var(--ui-selected)!important;color:var(--ui-accent)}
 html body #app:is([data-view=settings],[data-view=users]) .settings-checkbox{background:var(--ui-subtle);color:var(--ui-ink);min-height:44px}
 #app .sms-row-summary{display:block!important;grid-column:1/-1!important;order:-1;padding:0!important;border:0!important}
 #app .sms-row-summary::before{display:none!important}
 #app .sms-row-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:60px;padding:0;text-align:left;border:0;background:transparent;color:var(--ui-ink)}
 #app .sms-row-button strong{display:block;font-size:16px;color:var(--ui-ink)}
 #app .sms-row-button small{display:block;font-size:12px;color:var(--ui-muted);line-height:1.5;margin-top:3px}
 #app .sms-row-action{flex:none;font-size:12px;color:var(--ui-accent)}
 html body #app[data-view=settings] table.stack tbody tr.sms-edit-row{padding:10px 12px!important;gap:10px;background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;box-shadow:none!important}
 html body #app[data-view=settings] .sms-edit-row:not(.sms-row-open)>td:not(.sms-row-summary){display:none!important}
 html body #app[data-view=settings] .sms-edit-row[data-sms-filtered=true]{display:none!important}
 html body #app[data-view=settings] .floor-sep[data-sms-filtered=true]{display:none!important}
 #app .sms-room-search{display:block;margin:12px 0}
 #app .sms-room-search label{font-size:13px;color:var(--ui-muted);display:grid;gap:6px}
 #app .sms-room-search p{font-size:12px;margin-top:6px;color:var(--ui-muted)}
 #app .sms-fold{border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);margin-bottom:10px;overflow:hidden}
 #app .sms-fold-toggle{display:flex;align-items:center;min-height:56px;text-align:left;padding:14px;width:100%;font-size:15px;font-weight:600;color:var(--ui-ink);border:0;background:var(--ui-surface)}
 #app .sms-fold:not(.sms-fold-open)>.di-card{display:none}
 html body #app .sms-fold>.di-card{border:0!important;border-radius:0;margin:0;border-top:1px solid var(--ui-line)!important}
 #app .sms-fold>.di-card>h2{display:none}
 html body #app:is([data-view=settings],[data-view=users]) :is(.settings-actions,.sms-lease-actions){display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));z-index:5;background:var(--ui-surface)!important;border:1px solid var(--ui-line);border-radius:10px;box-shadow:0 -3px 12px #25324708;margin-top:14px}
 #app:is([data-view=settings],[data-view=users]) .settings-actions p{grid-column:1/-1;min-width:0;margin:0;font-size:13px;overflow-wrap:anywhere}
 #app:is([data-view=settings],[data-view=users]) .settings-actions p:empty{display:none}
 html body #app:is([data-view=settings],[data-view=users]) :is(.settings-actions,.sms-lease-actions)>.btn{min-width:0;min-height:46px;font-size:13px;padding:9px 6px}
 #app .lease-preview-controls{display:contents}
 #app .lease-preview-controls label{display:grid;gap:6px;min-width:0;margin-top:18px;font-size:13px;color:var(--ui-muted)}
 #app .lease-tokens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #app .lease-tokens .btn{min-height:42px;font-size:12px;padding:6px 4px}
 #app .lease-heading{flex-wrap:wrap;margin-bottom:14px}
 #app .lease-heading .badge{display:none}
 #app #lease-body{min-height:280px;max-height:50dvh}
 #app .ai-test{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 #app .ai-test .field{width:100%;min-width:0;margin:8px 0}
 #app .ai-onoff{align-items:start;line-height:1.6}
 #app .oa-link{flex-wrap:wrap;overflow-wrap:anywhere}
 #app .oa-url{min-width:0;overflow-wrap:anywhere;white-space:normal}
 #app :is(.notify-table,.perm-table){display:block;min-width:0;width:100%}
 #app :is(.notify-table,.perm-table)>thead{display:none}
 #app :is(.notify-table,.perm-table)>tbody{display:grid;gap:10px;padding:12px}
 #app :is(.notify-table,.perm-table)>tbody>tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface)}
 #app :is(.notify-table,.perm-table) td{padding:0;border:0;min-width:0;font-size:13px}
 #app :is(.notify-table,.perm-table) td:first-child{grid-column:1/-1;font-size:15px}
 #app :is(.notify-table,.perm-table) td:first-child small{font-size:12px;line-height:1.6}
 #app :is(.notify-table,.perm-table) td:first-child :is(strong,small){display:block}
 #app :is(.notify-table,.perm-table) .sms-option-cell{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;background:var(--ui-subtle);padding:8px;border-radius:7px}
 #app :is(.notify-table,.perm-table) .sms-option-cell:before{content:attr(data-sms-label);font-size:12px;color:var(--ui-muted)}
 #app :is(.notify-table,.perm-table) .sms-option-cell:has(.sms-check-option):before{display:none}
 #app .sms-check-option{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:28px;cursor:pointer;font-size:12px;color:var(--ui-muted)}
 #app .sms-check-option>span{display:block}
 #app .notify-table td:nth-child(2){grid-column:1/-1}
 #app :is(.notify-table,.perm-table) input[type=checkbox]{width:20px;height:20px;margin:0;flex:none}
 #app .notify-table .switch input{width:100%;height:100%}
 #app[data-view=users] .setting-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
 #app[data-view=users] .setting-row>.unit-input,#app .quiet-times{grid-column:1/-1;order:2;width:100%;min-width:0}
 #app .quiet-times{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px}
 #app:is([data-view=settings],[data-view=users]) .card-head{padding:14px;flex-wrap:wrap;gap:10px}
 #app:is([data-view=settings],[data-view=users]) .card-head p{font-size:13px;line-height:1.6}
 html body #app:is([data-view=settings],[data-view=users]) .setting-row strong{color:var(--ui-ink)!important}
 html body #app:is([data-view=settings],[data-view=users]) .bld-seg button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;box-shadow:none}
 #app[data-view=settings]>.attention{background:var(--ui-subtle)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important}
}
#app .pwa-install-card{max-width:560px;padding:24px}
.pwa-app{display:flex;gap:16px;align-items:center}
.pwa-app img{border-radius:14px;flex-shrink:0}
#app .pwa-app h2{font-size:20px;margin:0}
#app .pwa-app p{font-size:13px;color:var(--ui-muted)!important;margin:4px 0 0}
#app .pwa-intro{margin:20px 0 16px;font-size:15px;color:var(--ui-ink)!important}
.pwa-install-button{width:100%;min-height:48px}
.pwa-install-card details{border-bottom:1px solid var(--ui-line);padding:14px 0}
.pwa-install-card summary{cursor:pointer;font-size:15px;font-weight:600;min-height:32px;display:list-item;align-content:center;color:var(--ui-accent)}
.pwa-install-card ol{padding-left:24px;margin:12px 0 0;font-size:14px;line-height:1.8}
.pwa-install-card li+li{margin-top:8px}
#app .pwa-note{color:var(--ui-muted)!important;font-size:13px;line-height:1.7;margin:16px 0 0}
.pwa-status{background:var(--ui-selected);padding:12px;border-radius:8px;margin-top:20px;color:var(--ui-accent);font-weight:600}
@media(max-width:600px){#app .pwa-settings-tab{display:block!important}#app .pwa-install-card{padding:18px}.pwa-app{gap:12px}#app .pwa-app h2{font-size:19px}}
:root{--ui-page:#f5f6f8;--ui-surface:#fff;--ui-subtle:#f8f9fb;--ui-line:#e2e6ec;--ui-ink:#253247;--ui-muted:#5e6b7d;--ui-accent:#24446a;--ui-selected:#edf2f8;--ui-shadow:0 2px 8px #25324705;--blue:var(--ui-accent);--text:var(--ui-ink);--muted:var(--ui-muted);--border:var(--ui-line)}
html[data-theme=dark]{--ui-page:#151d29;--ui-surface:#202b3a;--ui-subtle:#263242;--ui-line:#3a485b;--ui-ink:#e6edf6;--ui-muted:#b2bfd0;--ui-accent:#a8c4eb;--ui-selected:#304461;--ui-shadow:none;color-scheme:dark}
html,body,body .shell{background:var(--ui-page)!important;color:var(--ui-ink)}
body{line-height:1.6}
#app{background:transparent;color:var(--ui-ink)}
#app :is(h1,h2,h3,h4){color:var(--ui-ink)!important;letter-spacing:0}
#app h1{font-size:27px;font-weight:700;line-height:1.4}
#app :is(.page-heading p,.hint,.muted,.desktop-filter-result,.desktop-table-bar span,.rph-floor-head>span,.rp-menu-label,.tenant-stat>span){color:var(--ui-muted)!important}
#app .page-heading{margin-bottom:24px;align-items:center}
#app .page-heading p{margin-top:5px;font-size:14px}
#app :is(.card,.stat,.tenant-stat,.room-plan-stat,.bp-stat,.rph-stat,.rp-side){background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:12px;box-shadow:var(--ui-shadow)!important}
#app :is(.card-head,.desktop-table-bar,.rph-floor-head,.tenant-list-heading){background:var(--ui-surface)!important;border-bottom:1px solid var(--ui-line);padding:16px 20px}
#app .card-head h2{font-size:18px;font-weight:650}
#app .card-head p{font-size:13px;color:var(--ui-muted)}
#app :is(.stat,.tenant-stat,.bp-stat){border-top-width:1px!important}
#app :is(.stat-value,.tenant-stat strong,.bp-stat strong,.rph-stat strong){color:var(--ui-ink);font-variant-numeric:tabular-nums}
#app :is(.filters,.desktop-filter-toolbar,.billing-cycle,.period-inline,.rph-search){background:var(--ui-surface)!important;border-color:var(--ui-line)!important;box-shadow:none!important}
#app .desktop-filter-toolbar{padding:16px 18px;border-radius:12px;margin-bottom:16px}
#app :is(.desktop-filter-field>span,.desktop-filter-search>span,.field>label){font-size:13px;color:var(--ui-muted)!important;font-weight:500}
#app :is(input:not([type=checkbox]):not([type=radio]),select,textarea),#modal :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background-color:var(--ui-surface)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important;border-radius:8px;font-size:15px;min-height:42px;box-shadow:none}
input::placeholder,textarea::placeholder{color:var(--ui-muted);opacity:.85}
#app :is(input,select,textarea):focus,#modal :is(input,select,textarea):focus{outline:2px solid #8da7c7;outline-offset:2px}
#app .btn,#modal .btn{background:var(--ui-surface);color:var(--ui-accent);border-color:var(--ui-line);border-radius:8px;box-shadow:none;font-weight:600}
#app .btn.primary,#modal .btn.primary{background:#24446a!important;border-color:#24446a!important;color:#fff!important;box-shadow:none!important}
#app .btn.line,#modal .btn.line{background:#15704e;color:#fff;border-color:#15704e}
#app .btn.danger,#modal .btn.danger{background:#fff1f2;color:#a13d49;border-color:#efd6da}
#app .btn:disabled,#modal .btn:disabled{opacity:.48}
#app .text-btn{color:var(--ui-accent)}
#app :is(.tabs,.view-toggle){background:transparent!important;border-color:var(--ui-line)!important;box-shadow:none}
#app .tabs{gap:4px;padding:0;border-radius:0;border-bottom:1px solid var(--ui-line);margin-bottom:20px}
#app .tabs .tab{background:transparent!important;color:var(--ui-muted)!important;border:0;border-bottom:2px solid transparent!important;border-radius:0!important;padding:12px 16px;font-weight:500}
#app .tabs .tab.active{background:transparent!important;color:var(--ui-accent)!important;border-bottom-color:var(--ui-accent)!important;font-weight:700;box-shadow:none!important}
#app .view-toggle button{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-muted)}
#app .view-toggle button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
#app .count.gray{background:var(--ui-selected);color:var(--ui-muted)!important}
#app :is(.desktop-list,.room-table,.rp-table,.compact-table) thead,#app table thead th{background:var(--ui-subtle)!important;color:var(--ui-muted)!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:none}
#app thead .desktop-sort{color:var(--ui-muted)!important;font-size:13px;font-weight:600}
#app table tbody td{color:var(--ui-ink);border-bottom-color:var(--ui-line);font-size:15px;vertical-align:middle}
#app table tbody tr{background:var(--ui-surface)}
#app table tbody tr:nth-child(even){background:var(--ui-subtle)}
#app table tbody tr:hover{background:var(--ui-selected)}
#app table :is(th,td){padding-top:14px;padding-bottom:14px}
#app :is(.room-no,.tenant-room-number){color:var(--ui-accent);font-weight:700}
#app .manage-btn{background:var(--ui-selected);color:var(--ui-accent);border:1px solid var(--ui-line);box-shadow:none}
#app :is(.rp-menu-group,.di-acc,.tenant-building,.rd-extra){background:var(--ui-subtle);border-color:var(--ui-line)}
#app .rp-menu-btn{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line);box-shadow:none}
#app .rp-menu-btn.active{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-accent);box-shadow:none}
#app .tenant-stat.is-active,#app .tenant-stat.active{background:var(--ui-selected)!important;border-color:var(--ui-accent)!important;box-shadow:none!important}
#app .tenant-toolbar{border-color:var(--ui-line)}
#app .tenant-view{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-line)}
/* Room tiles use labelled states rather than large blocks of saturated colour. */
#app .rph-q{flex:1;max-width:560px}
#app .rph-q-box{border-color:var(--ui-line);background:var(--ui-surface)}
#app .rph-search{padding:14px 18px}
#app .rph-stat{padding:14px 18px}
#app .rph-stat strong{font-size:24px;font-weight:700}
#app .rph-stat.is-active{background:var(--ui-selected)!important;border-color:var(--ui-accent)!important;box-shadow:none!important}
#app .rph-stat i{width:38px;height:38px;font-size:18px}
#app .rph-stat.c-green i{background:#e7f3ed;color:#287257}
#app .rph-stat.c-amber i{background:#fcf1df;color:#936320}
#app .rph-stat.c-red i{background:#fae9ec;color:#a24a58}
#app .rph-stat.c-blue i{background:#edf2f8;color:#345880}
/* Parking overview follows the room-plan summary, in one continuous row. */
#app .pk-overview-stats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-bottom:16px}
#app .pk-overview-stats .pk-stat{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:118px;padding:14px 16px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-shadow)}
#app .pk-overview-stats .pk-stat-copy{min-width:0}
#app .pk-overview-stats strong{font-size:24px;font-weight:700;line-height:1.3;color:var(--ui-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
#app .pk-overview-stats span{display:block;font-size:13px;color:var(--ui-muted);line-height:1.5;margin-top:5px}
#app .pk-overview-stats small{font-size:12px;line-height:1.5;margin-top:3px;color:var(--ui-muted)}
#app .pk-overview-stats .c-gray strong{font-size:21px}
#app .pk-overview-stats i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ui-selected);color:var(--ui-accent)}
#app .pk-overview-stats i svg{width:20px;height:20px}
#app .pk-overview-stats .c-green i{background:#e7f3ed;color:#287257}
#app .pk-overview-stats .c-red i{background:#fae9ec;color:#a24a58}
#app .pk-overview-stats .c-amber i{background:#fcf1df;color:#936320}
html[data-theme=dark] #app .pk-overview-stats .c-green i{background:#293f37;color:#b4dbc7}
html[data-theme=dark] #app .pk-overview-stats .c-red i{background:#482f39;color:#efbcc9}
html[data-theme=dark] #app .pk-overview-stats .c-amber i{background:#3c3429;color:#e6cf9e}
@media(max-width:1100px){
 #app .pk-overview-stats{grid-auto-columns:220px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}
 #app .pk-overview-stats .pk-stat{scroll-snap-align:start}
}
#app .rph-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:16px 18px}
#app .rph-room{min-width:0;gap:0;text-align:left}
#app .rph-box{aspect-ratio:auto;min-height:105px;align-items:flex-start;justify-content:flex-start;padding:12px;gap:5px;border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink);box-shadow:none}
#app .rph-box.has-person.st-occupied{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
#app .rph-box.st-vacant{background:#f3f8f5;color:#2b6652;border-color:#cee1d7}
#app .rph-box.st-booking{background:#fffbf3;color:#815b22;border-color:#eadcc1}
#app .rph-box.st-repair{background:var(--ui-subtle);color:var(--ui-muted);border-color:var(--ui-line)}
#app .rph-box.has-person.st-overdue{background:#fff7f8;color:#963d4b;border-color:#eccdd3}
#app .rph-tile-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px}
#app .rph-box .rph-no{font-size:21px;font-weight:750;color:inherit;line-height:1.2}
#app .rph-box .person-ic{width:22px;height:25px;color:#71869d}
#app .rph-room-state{font-size:12px;display:flex;align-items:center;gap:5px;color:inherit}
#app .rph-room-state:before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}
#app .rph-box :is(small,.rph-room-type){font-size:12px!important;color:var(--ui-muted)!important;font-weight:400;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#app .rph-box .rph-room-note{font-weight:600;color:inherit!important}
#app .rph-room:hover .rph-box{transform:none;border-color:#8ca4bf;box-shadow:0 2px 6px #2532470a}
#modal{background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);box-shadow:0 20px 80px #16243730}
#modal .modal-head{background:var(--ui-subtle)!important;color:var(--ui-ink)!important;border:0;border-bottom:1px solid var(--ui-line);border-radius:8px;padding:14px 16px}
#modal .modal-head h2{color:var(--ui-ink)!important;font-size:20px}
#modal .close{background:var(--ui-selected);color:var(--ui-accent);min-width:40px;min-height:40px}
#modal :is(.rd-section,.rd-hero,.rd-manage,.rd-extra){background:var(--ui-subtle);border-color:var(--ui-line);color:var(--ui-ink)}
#modal-content :is(p,.hint,.muted,.field>label){color:var(--ui-muted)!important}
body .gs-bar{background:transparent!important}
body .gsearch{background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:9px;box-shadow:none!important}
body .gsearch input{background:transparent;color:var(--ui-ink)}
@media(min-width:601px){
 :root{--topbar-h:56px;--menubar-h:64px}
 body .shell>header{background:var(--ui-surface)!important;color:var(--ui-ink)!important;border-bottom:1px solid var(--ui-line)!important}
 body .shell>header :is(.breadcrumb,.breadcrumb b,.today,.icon-btn){color:var(--ui-muted)!important}
 body .shell>header .icon-btn:hover{background:var(--ui-selected)!important}
 body aside{background:var(--ui-surface)!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:none!important}
 body aside .brand{color:var(--ui-accent)!important;letter-spacing:.2px}
 body aside .brand .koko-wordmark{color:var(--ui-accent)!important}
 body aside nav#nav{gap:2px;padding:0 10px!important}
 body aside nav#nav button{color:var(--ui-muted)!important;min-width:76px;gap:5px!important;padding:8px 12px!important;font-weight:500}
 body aside nav#nav button:hover{background:var(--ui-subtle)!important;color:var(--ui-accent)!important}
 body aside nav#nav button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-bottom-color:var(--ui-accent)!important}
 body aside nav#nav button .count{background:#b45865}
 body .shell>main#app{padding:24px 32px 36px;max-width:1360px}
 body .shell>.gs-bar{padding:18px 32px 0;max-width:1360px}
 body .shell>footer{max-width:1360px;margin:auto;padding:20px 32px;color:var(--ui-muted)}
}
@media(min-width:601px) and (max-width:900px){body .shell>header .today{display:none}body .shell>header{padding-left:170px!important}}
@media(max-width:600px){
 body .shell>header{background:var(--ui-surface)!important;color:var(--ui-ink)!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:none!important}
 body .shell>header :is(.breadcrumb,.breadcrumb-property,.icon-btn){color:var(--ui-accent)!important}
 #app{padding:16px 14px 100px!important}
 #mnav{background:var(--ui-surface)!important;border-color:var(--ui-line)!important;box-shadow:0 -2px 10px #25324706!important}
 #mnav button{color:var(--ui-muted)!important}
 #mnav button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important}
}
@media(max-width:600px){
 #app :is(.card-head,.rph-floor-head){padding:13px 14px}
 #app :is(.tabs,.view-toggle){background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:10px;padding:3px;gap:3px}
 #app .tabs .tab{min-height:44px;padding:8px 6px;border-radius:7px!important;border-bottom:0!important;font-size:14px}
 #app .tabs .tab.active{background:var(--ui-selected)!important;border-bottom:0!important}
 #app :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:44px;font-size:16px!important}
 #app :is(.mbl-summary-card,.mbl-card,.mbl-search,.mbl-filter>summary,.tenant-mobile-card,.mh-stats button,.home-tasks button){background:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-ink);box-shadow:var(--ui-shadow)!important}
 #app .mbl-tabs{background:var(--ui-subtle);border-color:var(--ui-line)}
 #app .mbl-tab{color:var(--ui-muted);font-size:13px}
 #app .mbl-tab.active{background:#24446a;color:#fff}
 #app .mbl-card-copy>small,#app .mbl-card-status{font-size:12px}
 #app .mbl-card-copy>small{color:var(--ui-muted)!important}
 #app .mbl-summary-amount{font-size:22px;color:var(--ui-ink)}
 #app .mbl-card-value>strong{font-size:19px;color:var(--ui-ink)}
 #app .mop-reading>span{background:var(--ui-subtle);border-color:var(--ui-line)}
 #app .mop-reading .mop-current{background:var(--ui-selected)}
 #app .mh-stats strong{color:var(--ui-ink)!important}
 #app .rph-search{padding:12px}
 #app .rph-search-row{flex-wrap:nowrap;align-items:center;gap:8px}
 #app .rph-q>span:first-child{display:none}
 #app .rph-q-box{width:100%;min-width:0}
 #app .rph-filter-btn{padding:8px;font-size:12px;min-height:44px;flex:none}
 #app .rph-filters{display:grid;grid-template-columns:1fr 1fr}
 #app .rph-filters select{min-width:0;width:100%}
 #app .rph-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
 #app .rph-box{padding:9px;min-height:104px;gap:6px}
 #app .rph-box .rph-no{font-size:19px}
 #app .rph-box .person-ic{width:16px;height:20px}
 #app .rph-stat{padding:11px 12px;gap:6px}
 #app .rph-stat strong{font-size:20px}
 #app .rph-stat span{font-size:12px}
 #app .rph-stat i{width:30px;height:30px}
 #modal .app-menu-item{background:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-ink)!important;box-shadow:none!important}
 #modal .app-menu-item.is-current{background:var(--ui-selected)!important;border-color:var(--ui-accent)!important}
 #modal .app-menu-icon{background:var(--ui-selected)!important;color:var(--ui-accent)!important}
 #modal .app-menu-item.is-current small{color:var(--ui-muted)!important}
}
/* Electricity retains the requested soft rose accent within the same layout. */
body:has(#app .kind-electric.is-active) .shell{background:#faf5f6!important}
#app:has(.kind-electric.is-active) table thead th{background:#fbf0f2!important;color:#7c4750!important}
#app:has(.kind-electric.is-active) .btn.primary{background:#9e5260!important;border-color:#9e5260!important;color:white!important}
#app:has(.kind-electric.is-active) .tabs .tab.active{color:#8f4654!important;border-bottom-color:#b47783!important}
#app:has(.kind-electric.is-active) .mop-current{background:#fff0f2;border-color:#e8cbd1}
html[data-theme=dark] body:has(#app .kind-electric.is-active) .shell{background:var(--ui-page)!important}
@media(max-width:350px){#app .rph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .mbl-card-copy>small,#app .mbl-card-status{font-size:11px}#app .mbl-card-value>strong{font-size:17px}}
/* Building and billing controls share the same understated selection style. */
body aside .brand .koko-wordmark :is(b,span){color:var(--ui-accent)!important}
#app .room-plan-buildings button{background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);box-shadow:none}
#app .room-plan-buildings button[aria-pressed=true]{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-accent)}
#app .bp-building{background:var(--ui-surface);border-color:var(--ui-line);border-radius:12px}
#app .bp-bhead{background:var(--ui-surface);color:var(--ui-ink);border-bottom:1px solid var(--ui-line);padding:14px 18px}
#app .bp-bhead>span{color:var(--ui-muted)}
#app .bp-bhead h2 span{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-line)}
#app .bp-floor{background:var(--ui-surface);border-color:var(--ui-line)}
#app .bp-floor h3{font-size:17px;font-weight:650;border-right-width:1px;border-right-color:var(--ui-line)}
#app .bp-tile{background:var(--ui-surface);border:1px solid var(--ui-line);color:var(--ui-ink);align-items:flex-start;padding:12px;text-align:left;min-height:96px;box-shadow:none}
#app .bp-tile strong{font-size:22px;font-weight:700}
#app .bp-state{background:var(--bg);color:var(--c);padding:2px 7px;font-weight:500}
#app .bp-amt{color:var(--ui-ink);font-size:14px;font-variant-numeric:tabular-nums}
#app .bp-tile.st-overdue{border-color:#e5bcc4;background:#fff9fa;color:#953b4c}
#app .bp-tile:hover{filter:none;border-color:#8ca4bf;box-shadow:none}
#app .bp-stat.is-active{border-color:var(--ui-accent)!important;background:var(--ui-selected)!important}
#app .rp-menu button{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-ink)}
#app .rp-menu button.active{background:var(--ui-selected);border-color:var(--ui-accent);color:var(--ui-accent);box-shadow:none}
#app .rp-menu button .rp-menu-icon{background:var(--ui-subtle);color:var(--ui-muted)}
#app .rp-menu button.active .rp-menu-icon{background:var(--ui-selected);color:var(--ui-accent)}
#app .meter-kind-tabs{background:var(--ui-surface);border-color:var(--ui-line);box-shadow:none}
#app .meter-kind-button.kind-water.is-active{background:#24446a;color:#fff;border-color:#24446a;box-shadow:none}
#app .filters .btn.active,#app .filter-chip.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
#app .ms-floor-head{background:var(--ui-subtle);border-color:var(--ui-line)}
#app .ms-floor-head>span{color:var(--ui-muted)}
#app .ms-input{border-color:var(--ui-line);background:var(--ui-surface)}
#app .ms-input>span{background:var(--ui-selected);color:var(--ui-accent)}
#app .ms-savebar{background:var(--ui-surface);border-color:var(--ui-line);box-shadow:0 3px 12px #2532470d}
#app .ms-savebar #ms-changed{color:var(--ui-muted)}
#modal .room-section-tabs{background:var(--ui-subtle);border:1px solid var(--ui-line);padding:4px;border-radius:10px}
#modal .room-section-tabs button{background:transparent;color:var(--ui-muted);min-height:44px;font-weight:500}
#modal .room-section-tabs button.active{background:var(--ui-selected);color:var(--ui-accent);box-shadow:none;font-weight:650}
#modal .summary-row>span:first-child{color:var(--ui-muted)}
@media(max-width:600px){
 #app .ms-savebar{flex-wrap:nowrap;gap:7px;padding:9px 10px;bottom:76px}
 #app .ms-savebar #ms-changed{font-size:12px;line-height:1.4;min-width:0;flex:1}
 #app .ms-savebar .btn{font-size:12px;padding:8px;min-height:44px;white-space:nowrap}
 #app .ms-savebar #ms-save{min-width:88px}
 #app .ms-savebar:has(#ms-error:not(:empty)){flex-wrap:wrap}
 #app .tenant-building>button{background:transparent;color:var(--ui-muted)}
 #app .tenant-building>button.active,#app .tenant-building>button[aria-pressed=true]{background:var(--ui-selected);color:var(--ui-accent);box-shadow:none}
 #app .tenant-mobile-open{color:var(--ui-ink)}
 #app .tenant-mobile-room{background:var(--ui-selected)}
 #app .tenant-list-card{background:transparent!important}
 #app .tenant-list-heading{background:transparent!important}
}
html[data-theme=dark] #app :is(label,.rph-stat span,.ms-old,.bp-head,.rp-menu-label,.tenant-mobile-open,.stat-label,.work-tenant,.setting-row small){color:var(--ui-muted)!important}
html[data-theme=dark] #app .rph-box.st-vacant{background:#233d34;color:#b6dfcb;border-color:#446654}
html[data-theme=dark] #app .rph-box.st-booking{background:#40382a;color:#ead2a4;border-color:#746044}
html[data-theme=dark] #app .rph-box.has-person.st-overdue,html[data-theme=dark] #app .bp-tile.st-overdue{background:#422e38;color:#efbbc8;border-color:#754451}
html[data-theme=dark] #app .tenant-line-help{background:var(--ui-subtle);border-color:var(--ui-line);color:var(--ui-ink)}
html[data-theme=dark] #modal :is(.summary-row,.rd-rent,.rd-section h3){color:var(--ui-ink)}
/* Visual room plan: the reference's search / four summaries / floor layout. */
.shell:has(#app[data-view=rooms])>.gs-bar{display:none}
#app .rph-overview{margin-bottom:16px;overflow:hidden}
#app .rph-overview .rph-search{padding:20px 22px;margin:0;border-bottom:1px solid var(--ui-line)}
#app .rph-overview .rph-search-row{gap:12px;align-items:flex-end}
#app .rph-overview .rph-q{flex:0 1 320px;max-width:320px}
#app .rph-q-box{min-height:44px}
#app .rph-q-box i{display:grid;place-items:center;align-self:stretch;padding:0;width:38px;flex:none;background:var(--ui-subtle);border-right:1px solid var(--ui-line)}
#app .rph-q-box svg{width:17px;height:17px}
#app .rph-q-box input{padding-left:10px;font-weight:400}
#app .rph-filter-btn{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:44px}
#app .rph-filter-btn svg{width:17px;height:17px;flex:none}
#app .rph-book-button{margin-left:auto;min-height:44px}
#app .rph-filters[hidden]{display:none!important}
#app .rph-overview .rph-stats{padding:18px 22px;margin:0;gap:12px;background:var(--ui-subtle)}
#app .rph-overview .rph-stat{min-height:94px;padding:16px 18px;border-radius:9px}
#app .rph-overview .rph-stat strong{font-size:25px;font-weight:750;line-height:1.3}
#app .rph-overview .rph-stat span{font-size:13px}
#app .rph-overview .rph-stat i{width:48px;height:48px}
#app .rph-overview .rph-stat i svg{width:23px;height:23px}
#app .rph-results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
#app .rph-results-head p{margin:0;font-size:13px;color:var(--ui-muted)}
#app .rph-floor .rph-floor-head{padding:13px 20px;background:var(--ui-subtle)!important}
#app .rph-floor-head h3{display:flex;align-items:center;gap:10px;font-size:17px}
#app .rph-building-label{padding:2px 8px;border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:5px;font-size:12px;font-weight:500;color:var(--ui-muted)}
#app .rph-floor .rph-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px;padding:18px 20px 22px;align-items:stretch}
#app .rph-floor .rph-room{gap:8px;align-items:stretch;text-align:center;height:100%}
#app .rph-floor .rph-no{font-size:17px;font-weight:750;color:var(--ui-ink);line-height:1.3;text-align:center}
#app .rph-floor .rph-box{flex:1;min-height:152px;padding:0;gap:0;justify-content:flex-start;align-items:stretch;border-radius:8px;overflow:hidden;position:relative;background:var(--ui-subtle);color:var(--ui-muted);border-color:var(--ui-line)}
#app .rph-floor .rph-box.has-person.st-occupied{background:#e3f0e8;color:#317351;border-color:#c4dbc9}
#app .rph-floor .rph-box.has-person.st-overdue{background:#f9e9ed;color:#9c4558;border-color:#e8c5cf}
#app .rph-floor .rph-box.st-booking{background:var(--ui-subtle);color:var(--ui-muted);border-color:#d4cfe5}
#app .rph-floor .rph-box.st-vacant,#app .rph-floor .rph-box.st-repair{background:var(--ui-subtle);color:var(--ui-muted);border-color:var(--ui-line)}
#app .rph-room-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:108px;flex:1;padding:10px}
#app .rph-floor .rph-box .person-ic{width:58px;height:64px;max-width:none;color:inherit}
#app .rph-room-visual>svg:not(.person-ic){width:38px;height:38px;color:inherit}
#app .rph-floor .rph-room-state{font-size:13px;line-height:1.4;justify-content:center;font-weight:500}
#app .rph-floor .rph-room-state:before{display:none}
#app .rph-floor .rph-box.st-vacant .rph-room-state,#app .rph-floor .rph-box.st-booking .rph-room-state{font-size:19px;font-weight:650}
#app .rph-floor .rph-box .rph-room-type{display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px;border-top:1px solid #2532470d;background:#ffffff4d;color:var(--ui-muted)!important;font-size:12px!important;line-height:1.35;overflow-wrap:anywhere}
#app .rph-reservation{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px;padding:5px 6px;background:var(--ui-surface);border-bottom:1px solid var(--ui-line);line-height:1.35}
#app .rph-reservation b{font-size:11px;font-weight:600;padding:2px 4px;border-radius:3px;background:#eee8f6;color:#735391}
#app .rph-reservation.daily b{background:#fbe9ef;color:#a24866}
#app .rph-floor .rph-reservation small{font-size:11px!important;line-height:1.35;color:var(--ui-muted)!important}
#app .rph-floor .rph-box.has-booking .rph-room-visual{min-height:83px}
#app .rph-floor .rph-box .rph-room-note{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:5px;background:#ffffff4d;font-size:11px!important;line-height:1.35;color:inherit!important;border-top:1px solid #2532470d}
#app .rph-repair-mark{display:inline-flex;align-items:center;gap:4px}
#app .rph-repair-mark svg{width:13px;height:13px}
#app .rph-repair-mark>span{font-size:10px;font-weight:500}
#app .rph-room:hover .rph-box{box-shadow:0 3px 10px #2532470c;transform:translateY(-1px)}
html[data-theme=dark] #app .rph-floor .rph-box.has-person.st-occupied{background:#284737;color:#b7dbc7;border-color:#416551}
html[data-theme=dark] #app .rph-floor .rph-box.has-person.st-overdue{background:#482f39;color:#efbcc9;border-color:#714553}
html[data-theme=dark] #app .rph-floor .rph-box .rph-room-type,html[data-theme=dark] #app .rph-floor .rph-box .rph-room-note{background:#0002;border-top-color:#ffffff0d}
@media(max-width:850px){#app .rph-overview .rph-stat{padding:12px}#app .rph-overview .rph-stat strong{font-size:21px}#app .rph-overview .rph-stat i{width:36px;height:36px}}
@media(max-width:600px){
 #app .rph-overview .rph-search{padding:12px}
 #app .rph-overview .rph-search-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:8px}
 #app .rph-overview .rph-q{max-width:none;width:100%;min-width:0}
 #app .rph-filter-btn{width:44px;padding:8px}
 #app .rph-filter-btn>span{display:none}
 #app .rph-filter-btn svg{width:20px;height:20px}
 #app .rph-book-button{grid-column:1/-1;margin:0;width:100%;font-size:14px}
 #app .rph-overview .rph-stats{padding:12px;grid-template-columns:1fr 1fr;gap:8px}
 #app .rph-overview .rph-stat{min-height:78px;padding:10px}
 #app .rph-overview .rph-stat strong{font-size:20px}
 #app .rph-overview .rph-stat span{font-size:12px}
 #app .rph-overview .rph-stat i{width:34px;height:34px}
 #app .rph-overview .rph-stat i svg{width:18px;height:18px}
 #app .rph-results-head{align-items:flex-start}
 #app .rph-results-head p{font-size:12px}
 #app .rph-results-head .text-btn{font-size:12px;white-space:nowrap}
 #app .rph-floor .rph-floor-head{padding:12px}
 #app .rph-floor .rph-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;gap:12px 8px}
 #app .rph-floor .rph-box{min-height:140px}
 #app .rph-floor .rph-no{font-size:16px}
 #app .rph-floor .rph-box .person-ic{width:48px;height:54px}
 #app .rph-room-visual{padding:8px 5px;min-height:96px}
 #app .rph-floor .rph-box.st-vacant .rph-room-state,#app .rph-floor .rph-box.st-booking .rph-room-state{font-size:17px}
 #app .rph-floor .rph-box .rph-room-type{min-height:40px;font-size:11px!important;padding:5px}
 #app .rph-reservation{justify-content:center;padding:4px;gap:2px}
 #app .rph-reservation b{font-size:10px}
}
@media(max-width:350px){#app .rph-floor .rph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .rph-overview .rph-stat i{display:none}#app .rph-overview .rph-stat strong{white-space:nowrap}#app .rph-overview .rph-stat{min-height:82px}}
/* Mobile uses the current desktop palette and card hierarchy, with touch sizing. */
@media(max-width:600px){
 html body{font-family:'Manrope','Sarabun',sans-serif;font-size:15px;line-height:1.6}
 html body .shell>header{height:58px;padding:0 14px!important}
 html body .shell>header .header-right{gap:8px}
 html body .shell>header .icon-btn{min-width:40px;min-height:44px}
 html body .shell>header .breadcrumb-property{font-size:16px;font-weight:700;letter-spacing:0}
 html body #mnav{border-top:1px solid var(--ui-line)!important;padding:5px 5px calc(5px + env(safe-area-inset-bottom))!important}
 html body #mnav button{color:var(--ui-muted)!important;font-size:12px!important;min-height:56px;border-radius:8px!important}
 html body #mnav button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important}
 #app .btn{min-height:44px;font-size:14px;border-radius:8px;white-space:normal;line-height:1.5}
 #app .view-toggle button.active,#app .meter-kind-button.kind-water.is-active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
 #app :is(.filters .btn.active,.filter-chip.active,.mobile-filter-chips .btn.active,.mobile-filter-chips .active){background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
 #app :is(.tenant-building,.mbl-tabs,.meter-kind-tabs){background:var(--ui-subtle)!important;border-color:var(--ui-line)!important}
 #app .tenant-building>button{min-height:44px;font-size:14px}
 #app .tenant-building>button.active,#app .tenant-building>button[aria-pressed=true],#app .mbl-tab.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;box-shadow:none!important;font-weight:700}
 #app :is(.tenant-mobile-filter>summary,.mbl-filter>summary,.mbl-pagination>.btn,.tenant-mobile-pagination>.btn){background:var(--ui-surface)!important;color:var(--ui-accent)!important;border-color:var(--ui-line)!important}
 #app :is(.tenant-mobile-filter,.mbl-filter)>div{background:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-ink);box-shadow:0 6px 20px #25324715}
 #app :is(.tenant-mobile-filter,.mbl-filter)[open]>summary{background:var(--ui-selected)!important;border-color:var(--ui-accent)!important}
 #app :is(.tenant-mobile-filter,.mbl-filter)>summary>i{background:var(--ui-accent)}
 #app :is(.mbl-summary-card,.mbl-card,.tenant-mobile-card,.mh-stats button){border-radius:12px;box-shadow:var(--ui-shadow)!important}
 #app .mbl-summary-card{min-height:84px;padding:12px}
 #app .mbl-summary-card>span:not(.mbl-summary-icon){font-size:13px;color:var(--ui-muted)}
 #app .mbl-card{padding:var(--mobile-card-padding);min-height:var(--mobile-card-height);gap:var(--mobile-card-gap);grid-template-columns:var(--mobile-card-columns)}
 #app .mbl-card-copy>strong{font-size:17px;color:var(--ui-ink)}
 #app .mbl-card-copy>small{font-size:12px;white-space:normal;line-height:1.5}
 #app .mbl-card-status{font-size:12px;font-weight:500;white-space:normal;text-align:center}
 #app .mbl-list-heading h2{font-size:18px}
 #app .mbl-chevron{color:var(--ui-muted)}
 #app :is(.mop-reading small,.mop-meter-foot,.mop-room-card .mbl-card-value>small){font-size:12px;color:var(--ui-muted)}
 #app .mop-reading>span{padding:9px 10px}
 #app .mop-reading strong{font-size:21px;color:var(--ui-ink)}
 #app .mop-note{font-size:12px!important}
 html body #app table.stack tbody tr{background:var(--ui-surface)!important;border-color:var(--ui-line)!important;box-shadow:var(--ui-shadow)!important}
 html body #app table.stack td{color:var(--ui-ink)}
 #app table.stack td[data-label]::before{color:var(--ui-muted)}
 #app[data-view=meters] .ms-savebar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px;bottom:calc(76px + env(safe-area-inset-bottom))}
 #app[data-view=meters] .ms-savebar #ms-changed{grid-column:1/-1;margin:0;font-size:13px;font-weight:400;line-height:1.5}
 #app[data-view=meters] .ms-savebar #ms-error{grid-column:1/-1;order:3;white-space:normal;font-size:13px}
 #app[data-view=meters] .ms-savebar #ms-error:empty{display:none}
 #app[data-view=meters] .ms-savebar .btn{width:100%;min-width:0;font-size:14px;white-space:nowrap}
 #app[data-view=meters] .ms-tools{font-size:14px;line-height:1.6}
 #app .tenant-mobile-phone{color:var(--ui-accent)}
 #app .tenant-mobile-contract>small,#app .tenant-stat>span.tenant-stat-mobile-label{font-size:12px;color:var(--ui-muted)}
 #app .rph-overview .rph-stats{padding:12px;gap:10px}
 #app .rph-overview .rph-stat{min-height:84px;padding:12px;gap:8px}
 #app .rph-overview .rph-stat strong{font-size:22px}
 #app .rph-overview .rph-stat span{font-size:13px;line-height:1.5}
 #app .rph-overview .rph-search-row{grid-template-columns:44px minmax(0,1fr)!important;gap:10px}
 #app .rph-search-row .rph-q{grid-column:1/-1;margin:0!important}
 #app .rph-search-row .rph-bld{grid-column:2;min-width:0}
 #app .rph-filter-btn.on{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-accent)}
 #app .rph-floor .rph-grid{padding:12px;gap:12px 8px}
 #app .rph-floor .rph-no{font-size:18px}
 #app .rph-floor .rph-box{min-height:144px}
 #app .rph-floor .rph-room-state{font-size:14px}
 #app .rph-floor .rph-box .rph-room-type{font-size:12px!important;min-height:44px;padding:6px 4px}
 #app .rph-floor .rph-box .rph-room-note{font-size:12px!important}
 #app .rph-floor .rph-reservation small{font-size:12px!important}
 #app .rph-results-head p{font-size:13px}
 #modal:has(.mobile-menu-body){background:var(--ui-page);border-color:var(--ui-line)}
 #modal .app-menu-property>span,#modal .app-menu-role{background:var(--ui-selected);border-color:var(--ui-line);color:var(--ui-accent)}
 #modal :is(.app-menu-section h3,.app-menu-property strong,.app-menu-role strong){color:var(--ui-ink)}
 #modal .app-menu-check,#modal .app-menu-chevron{color:var(--ui-accent)}
 #app:has(.kind-electric.is-active) .meter-kind-button.kind-electric.is-active{background:#fae9ec!important;color:#8f4654!important;border-color:#cf9ca7!important}
 #app:has(.kind-electric.is-active) .mbl-tabs{background:#fbf0f2!important;border-color:#e8cbd1!important}
 #app:has(.kind-electric.is-active) .mbl-tab.active{background:#fae9ec!important;color:#8f4654!important}
 #app:has(.kind-electric.is-active) .mop-current{background:#fff0f2!important;border-color:#e8cbd1!important}
 html[data-theme=dark] #app:has(.kind-electric.is-active) .meter-kind-button.kind-electric.is-active,
 html[data-theme=dark] #app:has(.kind-electric.is-active) .mbl-tab.active{background:#482f39!important;color:#efbcc9!important;border-color:#714553!important}
 html[data-theme=dark] #app:has(.kind-electric.is-active) :is(.mbl-tabs,.mop-current){background:#342a33!important;border-color:#714553!important}
 html[data-theme=dark] #app:has(.kind-electric.is-active) .tabs .tab.active,
 html[data-theme=dark] #app:has(.kind-electric.is-active) .filters .btn.active,
 html[data-theme=dark] #app:has(.kind-electric.is-active) .btn.primary,
 html[data-theme=dark] #app:has(.kind-electric.is-active) .mc-chip.active{background:#482f39!important;color:#efbcc9!important;border-color:#714553!important}
 html[data-theme=dark] #app:has(.kind-electric.is-active) .btn:not(.primary),
 html[data-theme=dark] #app:has(.kind-electric.is-active) .mc-chip{background:var(--ui-surface)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important}
 html[data-theme=dark] #app:has(.kind-electric.is-active) :is(.filters,.desktop-filter-toolbar){background:var(--ui-surface)!important;border-color:var(--ui-line)!important}
}
@media(max-width:350px){
 #app .rph-overview .rph-stat{padding:10px;min-height:84px}
 #app .rph-overview .rph-stat strong{font-size:21px}
 #app .mbl-card{padding:var(--mobile-card-padding);gap:var(--mobile-card-gap)}
 #app .mbl-card-copy>strong{font-size:16px}
 #app .mbl-card-value>strong{font-size:17px}
 #app .mbl-summary-amount{font-size:20px}
}
.veh-mobile,.veh-mobile-label,.veh-mobile-filters{display:none}
@media(max-width:600px){
 #app[data-view=vehicles]>.page-heading,#app[data-view=vehicles]>.veh-desktop{display:none!important}
 #app .veh-mobile{display:block}
 #app .veh-mobile-label{display:inline}
 #app .veh-desktop-label{display:none}
 #app .veh-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:12px}
 #app .veh-tabs .tab{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;white-space:nowrap;min-height:46px;font-size:14px}
 #app .veh-tabs .count{font-size:12px;padding:1px 6px}
 #app .veh-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px;margin:0 0 16px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px}
 #app .veh-toolbar .veh-search{order:-1;width:100%;max-width:none;margin:0;min-height:46px}
 #app .veh-toolbar .bld-seg{display:flex;width:100%;padding:3px;min-width:0}
 #app .veh-toolbar .bld-seg button{flex:1;min-width:0;min-height:44px;padding:6px;white-space:nowrap}
 #app .veh-mobile-filters{display:block;margin:0 0 8px}
 #app[data-view=vehicles]:has(.veh-mobile-filters)>.veh-tabs{display:none!important}
 html body #app[data-view=vehicles]:has(.veh-mobile-filters)>.veh-toolbar{gap:10px;padding:0!important;margin:0 0 16px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important}
 #app[data-view=vehicles]:has(.veh-mobile-filters) .veh-toolbar .bld-seg{order:-1;margin:0;min-height:46px}
 #app[data-view=vehicles]:has(.veh-mobile-filters) .veh-toolbar .veh-search{order:0;font-size:16px;background-color:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
 #app .vhm-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
 #app .vhm-list-head h2{font-size:18px}
 #app .vhm-list-head h2>span{font-size:13px;font-weight:400;margin-left:5px;color:var(--ui-muted)}
 #app .vhm-list-head .text-btn{min-height:44px;padding:6px 8px;font-size:13px;background:var(--ui-surface)!important;color:var(--ui-accent)!important;border:1px solid var(--ui-line);border-radius:8px}
 #app .vhm-list{display:grid;gap:12px}
 #app .vhm-card{min-width:0;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-shadow);overflow:hidden}
 #app .vhm-top{display:flex;align-items:center;gap:10px;padding:14px 14px 0}
 #app .vhm-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--ui-selected);color:var(--ui-accent)}
 #app .vhm-icon svg{width:25px;height:25px}
 #app .vhm-identity{flex:1;min-width:0;display:grid;gap:2px}
 #app .vhm-identity>small{margin:0;font-size:12px;line-height:1.4;color:var(--ui-muted)}
 #app .vhm-plate{font-size:19px;line-height:1.5;overflow-wrap:anywhere;color:var(--ui-ink);font-weight:700}
 #app .vhm-room{align-self:flex-start;flex:none;padding:4px 7px;border-radius:6px;background:var(--ui-selected);color:var(--ui-accent);font-size:14px;font-weight:700}
 #app .vhm-person{display:grid;gap:3px;padding:10px 14px}
 #app .vhm-person strong{font-size:15px;color:var(--ui-ink);font-weight:600;overflow-wrap:anywhere}
 #app .vhm-person>span{font-size:13px;color:var(--ui-muted);overflow-wrap:anywhere}
 #app .vhm-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:0 14px 12px;font-size:12px;color:var(--ui-muted)}
 #app .vhm-parking{padding:3px 7px;border-radius:5px;background:var(--ui-subtle);color:var(--ui-muted)}
 #app .vhm-parking.has-parking{background:#e7f3ed;color:#287257}
 #app .vhm-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;border-top:1px solid var(--ui-line);padding:6px 10px}
 #app .vhm-details{grid-column:1/-1;grid-row:1;min-width:0}
 #app .vhm-details summary{display:flex;align-items:center;gap:7px;min-height:44px;padding:7px 85px 7px 4px;cursor:pointer;list-style:none;font-size:14px;color:var(--ui-accent)}
 #app .vhm-details summary::-webkit-details-marker{display:none}
 #app .vhm-details summary:before{content:'›';font-size:21px;line-height:1;transition:transform .15s}
 #app .vhm-details[open] summary:before{transform:rotate(90deg)}
 #app .vhm-detail-body{padding:6px 4px 10px;border-top:1px solid var(--ui-line)}
 #app .vhm-detail-body dl{display:grid;gap:9px;margin:6px 0}
 #app .vhm-detail-body dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;font-size:13px}
 #app .vhm-detail-body dt{color:var(--ui-muted)}
 #app .vhm-detail-body dd{margin:0;color:var(--ui-ink);overflow-wrap:anywhere}
 #app .vhm-detail-body img{display:block;max-width:100%;max-height:220px;object-fit:contain;border-radius:8px;margin-top:12px}
 #app .vhm-detail-body .hint{font-size:13px}
 #app .vhm-edit{grid-column:2;grid-row:1;z-index:1;min-width:70px;padding:7px 12px;background:var(--ui-selected);color:var(--ui-accent)}
 #app .vhm-empty{text-align:center;padding:26px 14px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px}
 #app .vhm-empty p{font-size:14px;color:var(--ui-muted);margin:6px 0 14px}
 #app .vhm-pagination{display:grid;gap:8px;margin-top:14px;text-align:center}
 #app .vhm-pagination>small{font-size:13px;color:var(--ui-muted)}
 #app .vhm-pagination .btn{width:100%;min-height:46px}
 #app .vhm-details summary:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px;border-radius:6px}
 html[data-theme=dark] #app .vhm-parking.has-parking{background:#284737;color:#b7dbc7}
 #modal:has(#veh-form) .form-grid{grid-template-columns:1fr}
}
@media(max-width:350px){#app .vhm-top{gap:8px;padding:12px 12px 0}#app .vhm-icon{width:32px;height:34px}#app .vhm-plate{font-size:17px}#app .vhm-room{font-size:13px}#app .veh-tabs .tab{font-size:13px}}
@media print{.veh-mobile{display:none!important}.veh-desktop{display:block!important}#app table thead th{background:#f4f4f4!important;color:#333!important}}

/* Repair notifications share the mobile bill card's compact dimensions. */
@media(max-width:600px){
 html body #app[data-view=repairs] section.card:has(#repair-rows){border:0!important;background:transparent!important;box-shadow:none!important}
 html body #app[data-view=repairs] table.stack tbody{padding:0!important;gap:0}
 html body #app[data-view=repairs] table.stack tbody tr.has-mobile-list{margin:0 0 8px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
 html body #app[data-view=repairs] .mobile-list-card.ml-repair{display:grid;grid-template-columns:var(--mobile-card-columns);align-items:center;gap:var(--mobile-card-gap);min-height:var(--mobile-card-height);padding:var(--mobile-card-padding);border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface)!important;color:var(--ui-ink);box-shadow:var(--ui-shadow)}
 #app .ml-repair .ml-repair-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
 #app .ml-repair .ml-repair-copy>strong{font-size:17px;line-height:1.4;color:var(--ui-ink);white-space:nowrap}
 #app .ml-repair .ml-repair-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.4;color:var(--ui-ink)}
 #app .ml-repair .ml-repair-copy>small{margin:0;font-size:12px;line-height:1.5;color:var(--ui-muted);white-space:nowrap}
 #app .ml-repair .ml-repair-symbol{width:36px;min-width:0;height:36px;border-radius:50%;background:var(--ui-selected)!important;color:var(--ui-accent)!important;font-size:22px}
 #app .ml-repair .ml-repair-badges{display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:96px}
 #app .ml-repair .ml-repair-badges .badge{padding:3px 7px;border-radius:6px;font-size:12px;line-height:1.5;font-weight:500;white-space:normal;text-align:center}
 #app .ml-repair-chevron{font-size:22px;color:var(--ui-muted)}
 #app .ml-repair:focus-visible{outline:3px solid #8da7c7;outline-offset:2px}
}
@media(max-width:350px){
 html body #app[data-view=repairs] .mobile-list-card.ml-repair{grid-template-columns:var(--mobile-card-columns);padding:var(--mobile-card-padding);gap:var(--mobile-card-gap)}
 #app .ml-repair .ml-repair-symbol{width:28px;height:28px;font-size:19px}
 #app .ml-repair .ml-repair-copy>strong{font-size:16px}
}

/* Excel export stays available on desktop only. */
@media(max-width:600px){html body [data-export="excel"]{display:none!important}}

/* One compact size for billing, notification and meter list cards. */
@media(max-width:600px){
 :root{--mobile-card-height:96px;--mobile-card-padding:14px 12px;--mobile-card-gap:10px;--mobile-card-columns:36px minmax(0,1fr) auto 10px}
 #app[data-view=meters]:has(.mop-meters)>:is(.ms-tools,.ms-savebar,section.card){display:none!important}
 #app .mop-meter-card .mbl-card-copy{gap:2px}
 #app .mop-meter-card .mbl-card-copy>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #app .mop-meter-card .mbl-card-copy>small>b{font-weight:600;color:var(--ui-ink)}
 #app .mop-meter-card .mbl-card-value{gap:5px}
 #app .mop-meter-card .mop-usage>small{display:inline!important;margin:0;font-size:11px;font-weight:400;color:var(--ui-muted)}
}
@media(max-width:350px){:root{--mobile-card-padding:12px 9px;--mobile-card-gap:6px;--mobile-card-columns:28px minmax(0,1fr) auto 7px}}

#app .sm-sheet-name{display:block;font-size:12px;color:var(--ui-muted);margin-top:3px}
@media(max-width:600px){
 #app[data-view=meters]:has([data-mop-staff])>.staff-meter-filters,#app[data-view=meters]:has(.mop-staff-note)>.staff-meter-filters{display:none!important}
 #app .mop-meter-card .mbl-card-copy>strong{overflow:hidden;text-overflow:ellipsis}
 #app .mop-staff-note{font-size:12px;color:var(--ui-muted);margin:12px 0}
}

#modal #sm-form .meter-prog{background:var(--ui-subtle);color:var(--ui-muted);border-color:var(--ui-line)}
#modal #sm-form .meter-title,#modal #sm-form .meter-title>span{color:var(--ui-ink)}
#modal #sm-form .meter-title>span{color:var(--ui-muted)}
#modal #sm-form .upload .btn{background:var(--ui-surface)!important;color:var(--ui-accent)!important;border-color:var(--ui-line)!important}
#sm-preview:empty{display:none}
@media(max-width:600px){
 #modal:has(#sm-form){height:100dvh;max-height:100dvh!important;width:100%;max-width:100%;border-radius:0;padding:0;background:var(--ui-surface)!important}
 #modal:has(#sm-form) .modal-head{position:sticky;top:0;z-index:4;margin:0;padding:16px}
 #sm-form{padding:16px}
 #sm-form>p:first-child{font-size:14px;margin:0 0 12px}
 #sm-form .meter-title{padding:14px 14px 0;background:var(--ui-subtle);margin:16px 0 0;border:1px solid var(--ui-line);border-bottom:0;border-radius:12px 12px 0 0;font-size:14px}
 #sm-form .meter-title+.field{padding:12px 14px;background:var(--ui-subtle);margin:0;border:1px solid var(--ui-line);border-top:0}
 #sm-form .field input{font-size:24px!important;min-height:54px}
 #sm-form .upload{border:1px solid var(--ui-line);margin:0;padding:10px 14px 14px;border-radius:12px}
 #sm-form .meter-actions{position:sticky;bottom:0;background:var(--ui-surface)!important;padding:12px 0;display:flex;flex-direction:column;z-index:2}
 #sm-form .meter-actions .btn{width:100%;min-height:46px;font-size:14px}
 #sm-form .meter-prog{margin-top:16px}
}
html[data-theme=dark] body #modal:has(#sm-form){background:var(--ui-surface)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important}
html[data-theme=dark] body:has(#app .kind-electric.is-active) #modal:has(#sm-form) .btn.primary{background:#482f39!important;color:#efbcc9!important;border-color:#714553!important}

html[data-theme=dark] body #modal:has(#sm-form) .btn:not(.primary){background:var(--ui-surface)!important;color:var(--ui-accent)!important;border-color:var(--ui-line)!important}

#app[data-view=meters]>.meter-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Keep a complete mobile segment border; legacy tabs remove only its bottom edge. */
@media(max-width:600px){
 #app[data-view=meters]>.meter-tabs{align-items:stretch;padding:4px;gap:4px;border:1px solid var(--ui-line)!important;border-radius:10px;overflow:visible}
 #app[data-view=meters]>.meter-tabs .tab{min-height:44px;margin:0;border:1px solid transparent!important;border-radius:7px!important;flex-direction:row;box-shadow:none!important}
 #app[data-view=meters]>.meter-tabs .tab.active{border:1px solid currentColor!important}
}

.admin-mobile{display:none}
#modal .amp-detail dl{display:grid;gap:10px;margin:16px 0}
#modal .amp-detail dl>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-line)}
#modal .amp-detail dt{color:var(--ui-muted)}
#modal .amp-detail dd{margin:0;overflow-wrap:anywhere}
#modal .nmp-body{white-space:pre-wrap;line-height:1.8;overflow-wrap:anywhere}
#modal .amp-detail summary{min-height:44px;padding:10px 0;cursor:pointer;color:var(--ui-accent)}
#modal .amp-detail-actions{display:grid;gap:8px}
@media(max-width:600px){
 #app .admin-mobile{display:block}
 #app[data-view=leaves]:has(.smp-directory)>.card:has(.staff-table),#app[data-view=leaves]:has(.smp-contracts)>.card,#app .table-wrap:has(.pay-table),#app .news-desktop{display:none!important}
 #app .smp-payroll{padding:12px}
 #app .amp-list{display:grid;gap:8px}
 #app .amp-list-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 10px}
 #app .amp-list-heading h2{font-size:17px;margin:0}
 #app .amp-list-heading>span{color:var(--ui-muted);font-size:13px}
 #app .amp-card{margin:0;padding:0;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);box-shadow:var(--ui-shadow);overflow:hidden;min-width:0;text-align:left;font:inherit}
 #app .amp-open{display:grid;grid-template-columns:32px minmax(0,1fr) auto 8px;align-items:center;gap:9px;width:100%;min-height:96px;padding:13px 12px;background:var(--ui-surface);color:var(--ui-ink);border:0;text-align:left;font:inherit;cursor:pointer}
 #app button.amp-card{border:1px solid var(--ui-line)}
 #app .amp-icon,#app .amp-news-icon{display:flex;align-items:center;justify-content:center;width:32px;height:36px;border-radius:10px;background:var(--ui-selected);color:var(--ui-accent);font-size:23px}
 #app .amp-icon svg{width:22px;height:22px}
 #app .amp-copy{display:grid;gap:3px;min-width:0}
 #app .amp-copy>strong{font-size:16px;line-height:1.4;color:var(--ui-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #app .amp-copy>small{font-size:12px;line-height:1.4;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #app .amp-side{display:grid;justify-items:end;gap:5px;max-width:104px}
 #app .amp-side>strong{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
 #app .amp-badge{display:inline-block;border-radius:6px;padding:3px 6px;font-size:11px;line-height:1.4;white-space:normal;background:var(--ui-subtle);color:var(--ui-muted)}
 #app .amp-badge.is-good{background:#e6f1ed;color:#2d6553}
 #app .amp-chevron{font-size:25px;color:var(--ui-muted)}
 #app .amp-card-foot{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--ui-line)}
 #app .amp-card-foot>*{flex:1;min-height:44px;text-align:center}
 #app .amp-card-foot :is(.btn,.text-btn){background:var(--ui-surface)!important;color:var(--ui-accent)!important;border:1px solid var(--ui-line);border-radius:8px}
 #app .amp-contract-head{display:flex;align-items:start;justify-content:space-between;gap:10px;padding:14px 12px 0}
 #app .amp-contract-head>strong{font-size:16px}
 #app .smp-contracts .amp-card>p{margin:6px 12px;font-size:14px}
 #app .smp-contracts .amp-card>small{display:block;margin:0 12px 12px;color:var(--ui-muted);font-size:12px}
 #app .amp-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
 #app .amp-summary>div{display:grid;gap:6px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;padding:12px}
 #app .amp-summary span{font-size:13px;color:var(--ui-muted)}
 #app .amp-summary strong{font-size:23px;line-height:1.2}
 #app .amp-summary strong small{display:inline!important;font-size:12px;font-weight:400}
 #app .amp-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-subtle);margin-bottom:12px}
 #app .amp-tabs button{flex:1;min-width:0;min-height:44px;font:inherit;font-size:13px;border:0;border-radius:7px;background:transparent;color:var(--ui-muted)}
 #app .amp-tabs button[aria-pressed=true]{background:var(--ui-selected);color:var(--ui-accent);font-weight:700}
 #app .amp-search{display:flex;align-items:center;gap:8px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:10px;padding:0 12px}
 #app .amp-search>span{font-size:24px;color:var(--ui-muted)}
 #app .amp-search input{min-width:0;min-height:46px;border:0!important;background:transparent!important;outline-offset:0!important;padding:8px 0;font-size:16px}
 #app .amp-empty{padding:24px 12px;text-align:center;color:var(--ui-muted);border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface)}
 #app .nmp-card{grid-template-columns:32px minmax(0,1fr) 8px}
 #app[data-view=news]>.page-heading .actions,#app[data-view=leaves]>.page-heading .actions{width:100%}
 #app[data-view=news]>.page-heading .btn{width:100%;min-height:48px}
 #app[data-view=leaves]>.staff-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px}
 #app[data-view=leaves]>.staff-tabs .tab{font-size:14px;min-height:46px}
 #app[data-view=leaves]>.staff-tabs .tab:before{display:none}
 #app[data-view=leaves] .pay-foot{padding:12px;gap:12px;flex-direction:column;align-items:stretch}
 #app[data-view=leaves] .pay-total{display:grid;gap:8px}
 #app[data-view=leaves] .pay-total>span{display:flex;justify-content:space-between;gap:8px;font-size:14px}
 #app[data-view=leaves] .pay-foot .btn{width:100%}
 #app[data-view=leaves] .payroll-intro details{margin-bottom:14px}
 #app[data-view=leaves] .payroll-intro{background:var(--ui-subtle)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important}
 #app[data-view=leaves] .payroll-intro p{color:var(--ui-muted)!important}
 #app[data-view=leaves] .payroll-intro summary,#app[data-view=leaves] .pay-total b{color:var(--ui-accent)!important}
 #app[data-view=leaves] .leave-overview{margin-bottom:16px!important}
 #app[data-view=leaves] .leave-overview .card-head{padding:14px}
 #app[data-view=billing] :is(.bp-review-head,.review-launch){display:none!important}
 #modal #veh-form .veh-type-field{display:none}
 #modal :is(#emp-form,#nw-form,#ct-form) .form-grid{grid-template-columns:1fr;gap:12px}
 #modal:has(.amp-detail) .modal-head h2{white-space:normal;font-size:18px;line-height:1.4;overflow-wrap:anywhere}
 html[data-theme=dark] #app .amp-badge.is-good{background:#29483f;color:#b8ddce}
}
@media(max-width:350px){#app .amp-open{grid-template-columns:28px minmax(0,1fr) auto 7px;gap:6px;padding:12px 9px}#app .nmp-card{grid-template-columns:28px minmax(0,1fr) 7px}#app .amp-icon,#app .amp-news-icon{width:28px}#app .amp-copy>strong,#app .amp-side>strong{font-size:15px}}

#modal .meter-previous-reading small{display:inline;font-size:inherit;margin-right:6px}
#modal .meter-previous-reading b{color:var(--ui-ink);font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:600px){
 #modal :is(#meter-form,#sm-form) .meter-title{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 #modal :is(#meter-form,#sm-form) .meter-previous-reading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface)!important;color:var(--ui-ink)!important;line-height:1.3}
 #modal :is(#meter-form,#sm-form) .meter-previous-reading small{font-size:14px;color:var(--ui-ink)!important;margin:0}
 #modal :is(#meter-form,#sm-form) .meter-previous-reading b{font-size:28px;color:var(--ui-ink)!important;line-height:1.2}
 #app .mop-meter-card .mbl-card-copy>strong{line-height:1.25}
 #app .mop-meter-card .mbl-card-copy>.mop-previous{line-height:20px;color:var(--ui-ink)}
 #app .mop-meter-card .mop-previous>b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
}

/* Mobile daily-room calendar: nightly availability and a selected-day action. */
#modal .dmc{--dmc-free-bg:#e8f2ee;--dmc-free-ink:#2d6654;--dmc-book-bg:#edf1f8;--dmc-book-ink:#294c76;color:var(--ui-ink)}
#modal .dmc-room{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;font-size:13px;color:var(--ui-muted)}
#modal .dmc-room strong{color:var(--ui-ink);font-size:17px;white-space:nowrap}
#modal .dmc-room small{display:inline;font-size:12px;font-weight:400}
#modal .dmc-month-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin-bottom:12px}
#modal .dmc-month-nav button{height:44px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);color:var(--ui-accent);font:inherit;font-size:26px;cursor:pointer}
#modal .dmc-month-nav h3{margin:0;text-align:center;font-size:18px;line-height:1.4;color:var(--ui-ink)}
#modal :is(.dmc-week,.dmc-days){display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#modal .dmc-week{margin-bottom:6px;color:var(--ui-muted);text-align:center;font-size:12px}
#modal .dmc-day{min-width:0;height:49px;padding:3px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--ui-line);border-radius:8px;font:inherit;cursor:pointer;background:var(--ui-surface);color:var(--ui-ink)}
#modal .dmc-day b{font-size:16px;line-height:1.3;font-variant-numeric:tabular-nums}
#modal .dmc-day small{font-size:9px;line-height:1.4;white-space:nowrap}
#modal .dmc :is(.is-free){background:var(--dmc-free-bg);color:var(--dmc-free-ink)}
#modal .dmc :is(.is-booked){background:var(--dmc-book-bg);color:var(--dmc-book-ink)}
#modal .dmc :is(.is-past,.is-closed){background:var(--ui-subtle);color:var(--ui-muted)}
#modal .dmc-day.is-today b{text-decoration:underline;text-underline-offset:3px}
#modal .dmc-day[aria-pressed=true]{border:2px solid var(--ui-accent);box-shadow:0 0 0 1px var(--ui-surface)}
#modal .dmc :is(button,summary):focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
#modal .dmc-legend{display:flex;flex-wrap:wrap;gap:12px;margin:13px 0 8px;font-size:11px;color:var(--ui-muted)}
#modal .dmc-legend span{display:flex;align-items:center;gap:5px}
#modal .dmc-legend i{width:11px;height:11px;border:1px solid var(--ui-line);border-radius:3px}
#modal .dmc-count{margin:8px 0 12px;font-size:12px;color:var(--ui-muted)}
#modal .dmc-selected{padding:14px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface)}
#modal .dmc-selected h4{margin:0 0 10px;font-size:15px;color:var(--ui-ink)}
#modal .dmc-status{display:inline-block;padding:4px 8px;border-radius:6px;font-size:12px}
#modal .dmc-guest{display:block;margin:10px 0 4px;font-size:16px;overflow-wrap:anywhere}
#modal .dmc-selected p{margin:4px 0 12px;font-size:13px;color:var(--ui-muted)}
#modal .dmc-book{display:block;width:100%;min-height:44px;margin-top:12px}
#modal .dmc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#modal .dmc-actions .btn{flex:1;min-height:44px;font-size:13px}
#modal .dmc-note{font-size:11px;line-height:1.5;margin:10px 0 16px;color:var(--ui-muted)}
#modal .dmc-history{border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);padding:0 2px}
#modal .dmc-history summary{padding:12px 0;cursor:pointer;font-size:14px;color:var(--ui-accent)}
#modal .dmc-history-row{padding:12px 0;border-top:1px solid var(--ui-line);font-size:14px}
#modal .dmc-history-row :is(strong,small,span){display:block}
#modal .dmc-history-row :is(small,span){font-size:12px;color:var(--ui-muted)}
#modal .dmc-repairs{width:100%;margin-top:12px;min-height:44px}
html[data-theme=dark] #modal .dmc{--dmc-free-bg:#29483f;--dmc-free-ink:#b8ddce;--dmc-book-bg:#304461;--dmc-book-ink:#d0e1fa}
@media(max-width:350px){#modal .dmc-day small{font-size:8px}#modal .dmc-month-nav h3{font-size:16px}#modal .dmc-legend{gap:8px;font-size:10px}}

@media(max-width:600px){
 #modal .bk-one[data-mode=day]>.bk-col>.bk-dates,#modal .dbr-native-dates{display:none!important}
 #modal .dbr{margin:0 0 18px;padding:12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface)}
 #modal .dbr-room-label{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ui-ink)}
 #modal .dbr-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 #modal .dbr-range button{display:grid;gap:3px;padding:9px 8px;min-height:58px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-surface);color:var(--ui-ink);font:inherit;text-align:left}
 #modal .dbr-range button small{font-size:12px;color:var(--ui-muted)}
 #modal .dbr-range button strong{font-size:14px}
 #modal .dbr-range button[aria-pressed=true]{border-color:var(--ui-accent);background:var(--ui-selected)}
 #modal .dbr .dbr-in-range{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-accent)}
 #modal .dbr .dmc-day[aria-pressed=true]{background:#24446a!important;color:#fff!important;border-color:#24446a!important}
 #modal .dbr .dmc-day:disabled{cursor:default;opacity:.7}
 #modal .dbr-error{color:#a13d49;font-size:13px;line-height:1.5;margin:8px 0}
 html[data-theme=dark] #modal .dbr-error{color:#f4afb7}
 #modal .dbr .dmc-legend{gap:8px;font-size:10px}
 #modal .dbr .dmc-day small{font-size:8px}
 #modal #dy-form .form-grid{grid-template-columns:1fr}
}

/* Thai reservation labels fit alongside the move-in date. */
#app .rph-cal{width:54px}
#app .rph-cal i{font-size:10px;line-height:16px;letter-spacing:0;white-space:nowrap}
#app .rph-cal b{font-size:11px;line-height:20px;white-space:nowrap}
#app .rph-floor .rph-reservation.rph-bk{gap:3px;padding-left:5px;padding-right:5px}
#app .rph-bk-date{font-size:11px;gap:3px}
#app .rph-bk-date svg{width:12px;height:12px}
@media(max-width:600px){#app .rph-floor .rph-reservation.rph-bk{flex-wrap:wrap;row-gap:2px}#app .rph-cal{margin-left:auto}}

/* Shared daily-room calendar on desktop; mobile keeps its vertical flow. */
#modal .dmc-room-calendar .dmc-history{margin-top:16px}
@media(min-width:601px){
 dialog#modal:has(.dmc-room-calendar){width:min(920px,92vw)!important;max-width:92vw!important}
 #modal .dmc-room-calendar .dmc-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:24px;align-items:start}
 #modal .dmc-room-calendar .dmc-room{font-size:14px;margin-bottom:20px}
 #modal .dmc-room-calendar .dmc-room strong{font-size:20px}
 #modal .dmc-room-calendar .dmc-month-nav h3{font-size:21px}
 #modal .dmc-room-calendar .dmc-week{font-size:13px}
 #modal .dmc-room-calendar .dmc-days{gap:6px}
 #modal .dmc-room-calendar .dmc-day{height:64px;gap:3px}
 #modal .dmc-room-calendar .dmc-day b{font-size:20px}
 #modal .dmc-room-calendar .dmc-day small{font-size:11px}
 #modal .dmc-room-calendar .dmc-legend{font-size:12px;gap:14px}
 #modal .dmc-room-calendar .dmc-selected{padding:18px}
 #modal .dmc-room-calendar .dmc-selected h4{font-size:17px}
 #modal .dmc-room-calendar .dmc-guest{font-size:18px}
}
@media(min-width:601px) and (max-width:800px){#modal .dmc-room-calendar .dmc-layout{grid-template-columns:1fr}#modal .dmc-room-calendar .dmc-sidebar{max-width:none}}

/* Reservation payment belongs to the reservation shown on the room card. */
#app .rph-floor .rph-booking-pay{display:inline-flex;align-items:center;justify-content:center;gap:4px;max-width:100%;padding:4px 7px;border-radius:6px;font-size:12px;line-height:1.4;font-weight:600;white-space:normal}
#app .rph-floor .rph-booking-pay.is-paid{background:#e6f1ed;color:#2d6553}
#app .rph-floor .rph-booking-pay.is-unpaid{background:#fff1dc;color:#895719}
html[data-theme=dark] #app .rph-floor .rph-booking-pay.is-paid{background:#29483f;color:#b8ddce}
html[data-theme=dark] #app .rph-floor .rph-booking-pay.is-unpaid{background:#4a3b27;color:#f0d0a2}
@media(max-width:600px){#app .rph-floor .rph-booking-pay{font-size:11px;padding:3px 5px}}

/* Compact mobile notification filters; desktop keeps the existing toolbar. */
#app .repair-mobile-filters,#app .repair-tab-mobile{display:none}
@media(max-width:600px){
 #app[data-view=repairs] .repair-legacy-filters{display:none!important}
 #app[data-view=repairs] .repair-tab-desktop{display:none}
 #app[data-view=repairs] .repair-tab-mobile{display:inline}
 #app[data-view=repairs]>.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 12px;border:1px solid var(--ui-line)!important;border-radius:10px;background:var(--ui-surface)!important}
 #app[data-view=repairs]>.tabs .tab{min-height:44px;font-size:14px;padding:8px;border-radius:7px!important;border-bottom:0!important;white-space:nowrap}
 #app[data-view=repairs]>.tabs .tab.active{background:var(--ui-selected)!important;border-bottom:0!important}
 #app[data-view=repairs] .repair-mobile-filters{display:grid;gap:12px;margin:0 0 14px;padding:12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);box-shadow:var(--ui-shadow)}
 #app .rmf-search{display:flex;align-items:center;gap:8px;border:1px solid var(--ui-line);border-radius:8px;padding:0 10px;background:var(--ui-surface);min-width:0}
 #app .rmf-search>span{font-size:24px;color:var(--ui-muted)}
 #app .rmf-search input{flex:1;min-width:0;min-height:44px;font-size:16px;padding:8px 0;border:0!important;background:transparent!important}
 #app .repair-mobile-filters>.bld-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;gap:4px;background:var(--ui-subtle)!important;border:1px solid var(--ui-line);border-radius:8px;margin:0!important;width:100%}
 #app .repair-mobile-filters>.bld-seg button{min-width:0;min-height:40px;font-size:14px;padding:6px;border:0;border-radius:6px;background:transparent!important;color:var(--ui-muted)!important}
 #app .repair-mobile-filters>.bld-seg button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;font-weight:700}
 #app .rmf-fields{display:grid;grid-template-columns:1fr;gap:8px}
 #app .rmf-fields label{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px;min-width:0}
 #app .rmf-fields label>span{font-size:12px;color:var(--ui-muted)}
 #app .rmf-fields select{width:100%;min-width:0;min-height:44px;font-size:16px!important;padding:8px 26px 8px 9px;text-overflow:ellipsis}
 #app .rmf-result-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ui-muted);margin-top:-4px}
 #app .rmf-result-row .text-btn{min-height:32px;padding:3px 0;background:transparent;color:var(--ui-accent);font-size:12px}
 #app[data-view=meters]>.meter-tabs .count{display:none!important}
}

@media(max-width:350px){
 #app .rmf-fields{grid-template-columns:1fr;gap:8px}
 #app .rmf-fields label{grid-template-columns:60px minmax(0,1fr);align-items:center;gap:8px}
}

/* Mobile enquiries: quiet, compact rows; full information on tap. */
@media(max-width:600px){
 #app .mop-meter-row{position:relative;min-width:0}
 #app .mop-meter-row .mop-meter-card{width:100%;text-align:left}
 #app .mop-meter-row.has-camera .mop-meter-card{grid-template-columns:36px minmax(0,1fr) auto 10px}
 #app .mop-meter-row .mop-meter-camera{position:absolute;left:8px;top:50%;transform:translateY(-50%);margin:0;width:44px;height:44px;min-width:44px;display:grid;place-items:center;font-size:22px;line-height:1;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-subtle)!important;color:var(--ui-accent);cursor:pointer}
 #app .mop-meter-camera:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
 #app:has(.kind-electric.is-active) .mop-meter-row .mop-meter-camera{background:#fff0f2!important;border-color:#e6c8d0}
 html[data-theme=dark] #app:has(.kind-electric.is-active) .mop-meter-row .mop-meter-camera{background:#482f39!important;border-color:#714553}
}
#modal #meter-form .ms-ai-note{display:block;font-size:13px;line-height:1.6;white-space:normal;margin-top:8px;overflow-wrap:anywhere}
#modal #meter-form .ms-ai-note.ok{color:#2d6553}
#modal #meter-form .ms-ai-note.bad{color:#a13d49}
html[data-theme=dark] #modal #meter-form .ms-ai-note.ok{color:#b8ddce}
html[data-theme=dark] #modal #meter-form .ms-ai-note.bad{color:#f4afb9}
@media(max-width:600px){
 #app .rph-floor .rph-floor-head{padding:9px 10px}
 #app .rph-floor .rph-floor-head h3{font-size:15px;gap:8px}
 #app .rph-floor .rph-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px;gap:8px 6px}
 #app .rph-floor .rph-room{gap:3px;min-height:0}
 #app .rph-floor .rph-no{font-size:16px;line-height:1.3}
 #app .rph-floor .rph-box{min-height:72px;flex:1;gap:0}
 #app .rph-floor .rph-room-visual{flex-direction:row;flex-wrap:wrap;gap:3px;min-height:36px;padding:6px 4px;align-content:center}
 #app .rph-floor .rph-box .person-ic{width:14px;height:18px;flex-shrink:0}
 #app .rph-floor .rph-room-visual>svg:not(.person-ic){width:16px;height:16px;flex-shrink:0}
 #app .rph-floor .rph-room-state,#app .rph-floor .rph-box.st-vacant .rph-room-state,#app .rph-floor .rph-box.st-booking .rph-room-state{font-size:14px;font-weight:600;line-height:1.4}
 #app .rph-floor .rph-box .rph-room-type{min-height:32px;padding:4px 3px;font-size:11px!important;line-height:1.3}
 #app .rph-floor .rph-box .rph-room-note{font-size:11px!important;padding:4px 3px;gap:3px}
 #app .rph-floor .rph-box.has-booking .rph-room-visual{min-height:44px;padding:6px 4px;gap:4px}
 #app .rph-floor .rph-reservation.rph-bk{min-height:24px;padding:3px 4px;align-items:center;justify-content:space-between;gap:2px}
 #app .rph-floor .rph-bk-date{font-size:10px;line-height:16px}
 #app .rph-floor .rph-bk-date svg{display:none}
 #app .rph-floor .rph-cal{width:auto;min-width:0;margin:0;background:transparent;box-shadow:none;border-radius:0}
 #app .rph-floor .rph-cal i{display:none}
 #app .rph-floor .rph-reservation.rph-bk .rph-cal b{font-size:10px;line-height:16px;background:transparent!important;color:#fff!important;padding:0!important}
 #app .rph-floor .rph-booking-pay{padding:2px 3px;gap:2px;font-size:11px;line-height:1.35}
 #app .rph-room:hover .rph-box{transform:none;box-shadow:none}
}
.lead-mobile-list,.lead-mobile-label{display:none}
#modal .lead-mobile-detail{color:var(--ui-ink)}
#modal .lmd-back{min-height:44px;padding:0;font-size:14px;background:transparent;color:var(--ui-accent)}
#modal .lmd-person{display:flex;align-items:start;justify-content:space-between;gap:12px;margin:12px 0 6px}
#modal .lmd-person h3{margin:0;font-size:18px;line-height:1.5;overflow-wrap:anywhere;color:var(--ui-ink)!important}
#modal .lmd-phone{display:inline-flex;align-items:center;min-height:40px;color:var(--ui-accent);font-size:15px;text-decoration:none}
#modal .lmd-info{margin:16px 0;border-block:1px solid var(--ui-line);padding:10px 0}
#modal .lmd-info>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:8px 0}
#modal .lmd-info dt{font-size:13px;color:var(--ui-muted)}
#modal .lmd-info dd{margin:0;font-size:14px;color:var(--ui-ink);overflow-wrap:anywhere;white-space:pre-wrap}
#modal .lmd-book{display:grid;gap:10px;background:var(--ui-subtle);border:1px solid var(--ui-line);border-radius:10px;padding:14px;margin-bottom:16px}
#modal .lmd-book h4{margin:0;font-size:15px;color:var(--ui-ink)!important}
#modal .lmd-book label{font-size:13px;color:var(--ui-muted)}
#modal .lmd-book select{width:100%;min-width:0;font-size:16px}
#modal .lmd-book p,#modal .lmd-booked{margin:0;color:var(--ui-muted)!important;font-size:14px}
#modal .lmd-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#modal .lmd-actions .btn{min-height:44px;padding:8px;font-size:14px}
#modal .lmr-status{display:inline-flex;align-items:center;border-radius:5px;padding:3px 6px;font-size:11px;font-weight:500;white-space:nowrap;color:var(--ui-muted);background:var(--ui-selected);line-height:1.5}
#modal .lmr-status.status-new{background:var(--ui-selected);color:var(--ui-accent)}
#modal .lmr-status.status-contacted{background:#f4eee3;color:#846329}
#modal .lmr-status.status-booked{background:#e8f1ec;color:#426755}
html[data-theme=dark] #modal .lmr-status.status-contacted{background:#3c3429;color:#e6cf9e}
html[data-theme=dark] #modal .lmr-status.status-booked{background:#293f37;color:#b4dbc7}
@media(max-width:600px){
 #modal .lead-desktop-label,#modal .lead-desktop-list{display:none!important}
 #modal .lead-mobile-label{display:inline}
 #modal .lead-mobile-list{display:grid;gap:8px}
 #modal .leads .lead-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:12px;background:var(--ui-subtle);box-shadow:none}
 #modal .leads .lead-tab{justify-content:center;min-height:42px;padding:6px;font-size:14px;gap:7px;box-shadow:none}
 #modal .leads .lead-tab i{display:none}
 #modal .leads .lead-tab.active{background:var(--ui-surface);border-color:var(--ui-line)}
 #modal .leads .lead-tab span{background:var(--ui-selected);color:var(--ui-muted);padding:0 5px}
 #modal .leads .lead-head{flex-wrap:nowrap;gap:8px;margin-bottom:8px}
 #modal .leads .lead-head h3{font-size:14px;color:var(--ui-ink)!important;margin:0}
 #modal .leads .lead-head .btn{min-height:40px;font-size:13px;padding:7px 10px}
 #modal .leads .lead-all{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:12px;color:var(--ui-muted)!important;min-height:36px}
 #modal .leads .lead-all input{width:18px;height:18px;margin:0;flex-shrink:0}
 #modal .lead-mobile-row{display:grid;gap:6px;width:100%;text-align:left;font:inherit;padding:12px;background:var(--ui-surface)!important;color:var(--ui-ink)!important;border:1px solid var(--ui-line);border-radius:10px;box-shadow:none;cursor:pointer;min-height:104px}
 #modal .lead-mobile-row:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
 #modal .lmr-top{display:flex;align-items:start;justify-content:space-between;gap:8px;min-width:0}
 #modal .lmr-top strong{font-size:15px;font-weight:600;line-height:1.5;color:var(--ui-ink)!important;overflow-wrap:anywhere}
 #modal .lmr-meta{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;font-size:12px;color:var(--ui-muted)!important;line-height:1.6}
 #modal .lmr-bottom{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;color:var(--ui-muted)!important;line-height:1.5}
 #modal .lmr-chevron{font-size:20px;line-height:18px;color:var(--ui-muted)}
}

.pk-mobile-filters{display:none}
@media(max-width:600px){
 #app .pk-mobile-filters{display:block;margin:12px 0}
 html body #app[data-view=parking]:has(.pk-mobile-filters)>.tabs{display:none!important}
 #app .pk-mobile-select{margin-bottom:8px}
 html body #app .pk-mobile-filters .pk-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 6px;padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important}
 html body #app .pk-mobile-filters .pk-bar[hidden]{display:none!important}
 #app .pk-mobile-filters .pk-bar .bld-seg{order:-1;display:flex;width:100%;margin:0;padding:3px}
 #app .pk-mobile-filters .pk-bar .bld-seg button{flex:1;min-width:0;min-height:44px;padding:6px;white-space:nowrap}
 #app .pk-mobile-filters .pk-bar input{order:0;width:100%;max-width:none;min-width:0;margin:0;min-height:44px;font-size:16px;background-color:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
 html body #app .pk-mobile-filters .pk-overview-stats{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;gap:8px;overflow:visible;margin:0 0 12px;padding:0;scroll-snap-type:none}
 #app .pk-mobile-filters .pk-stat{min-height:74px;padding:12px;border-radius:10px}
 #app .pk-mobile-filters .pk-stat strong{font-size:19px;white-space:normal}
 #app .pk-mobile-filters .pk-stat span{font-size:13px;margin-top:3px}
 #app .pk-mobile-filters .pk-rates{margin:0;font-size:14px;color:var(--ui-muted);line-height:1.6}
 #app .pk-mobile-filters .pk-rates .text-btn{min-height:44px;font-size:13px;white-space:normal}
 #app .pk-mobile-filters .mbl-extra{margin:0}
 html body #app .pk-mobile-filters .mbl-select-row{gap:8px;padding-inline:10px}
 html body #app .pk-mobile-filters .mbl-select-row>select{max-width:none;font-size:15px}
}

/* Compact mobile meter filters and a month picker with explicit confirmation. */
@media(max-width:600px){
 html body #app[data-view=meters]:has(.mop-meters) .period-inline{display:none!important}
 body:has(#mop-period-dialog[open]){overflow:hidden}
 #app .mop-period-row{width:100%;border:0;border-radius:0;background:transparent;text-align:left;font-family:inherit;cursor:pointer}
 #app .mop-period-row>strong{margin-left:auto;min-width:0;font-size:16px;font-weight:500;text-align:right;color:var(--ui-ink)}
 #app .mop-period-row>span:last-child{color:var(--ui-muted);font-size:18px}
 #app .mop-period-row:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-3px}
 #app .mop-meter-extra .mbl-search{min-height:44px}
 #app .mop-meter-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
 #app .mop-meter-filters>label{display:grid;gap:4px;min-width:0;color:var(--ui-muted);font-size:13px}
 #app .mop-meter-filters>label:only-child{grid-column:1/-1}
 #app .mop-meter-filters select{width:100%;min-height:44px;font-size:15px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line)}
 html body #mop-period-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto!important;width:calc(100% - 32px)!important;max-width:400px!important;max-height:calc(100dvh - 64px);padding:0;border:1px solid var(--ui-line);border-radius:18px!important;background:var(--ui-surface);color:var(--ui-ink);box-shadow:0 20px 64px #0004;overflow:hidden}
 #mop-period-dialog::backdrop{background:#16233780}
 #mop-period-dialog form{margin:0;padding:0;display:flex;flex-direction:column;max-height:calc(100dvh - 66px)}
 #mop-period-title{flex:none;margin:0;padding:20px;font-size:20px;line-height:1.5;border-bottom:1px solid var(--ui-line);color:var(--ui-ink)}
 #mop-period-dialog .mop-period-options{position:relative;overflow-y:auto;overscroll-behavior:contain;min-height:0;max-height:330px;padding:6px 12px}
 #mop-period-dialog .mop-period-option{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;margin:0;border-radius:9px;color:var(--ui-ink);font-size:17px;cursor:pointer}
 #mop-period-dialog .mop-period-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
 #mop-period-dialog .mop-period-option b{margin-left:auto;visibility:hidden;color:var(--ui-accent);font-size:22px}
 #mop-period-dialog .mop-period-option:has(input:checked){background:var(--ui-selected);color:var(--ui-accent);font-weight:600}
 #mop-period-dialog .mop-period-option:has(input:checked) b{visibility:visible}
 #mop-period-dialog .mop-period-option:has(input:focus-visible){outline:2px solid var(--ui-accent);outline-offset:-2px}
 #mop-period-dialog .mop-period-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none;padding:14px 20px;border-top:1px solid var(--ui-line);background:var(--ui-surface)}
 #mop-period-dialog .mop-period-actions .btn{min-height:46px;font-size:16px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);box-shadow:none}
 #mop-period-dialog .mop-period-actions .btn.primary{background:#24446a;color:#fff;border-color:#24446a}
 html[data-theme=dark] #mop-period-dialog .mop-period-actions .btn.primary{background:#abc5e6;color:#18263a;border-color:#abc5e6}
}
@media(max-width:350px){
 #app .mop-period-row{gap:6px;padding-left:10px;padding-right:10px;font-size:14px}
 #app .mop-period-row>strong{font-size:15px}
}

/* Room summary shortcuts stay on one row on phones. */
@media(max-width:600px){
 #app .rph-overview .rph-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px;background:var(--ui-subtle)}
 #app .rph-overview .rph-stat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;min-height:106px;padding:10px 3px;text-align:center;border-radius:10px}
 #app .rph-overview .rph-stat>div{display:grid;gap:4px;width:100%;min-width:0}
 #app .rph-overview .rph-stat strong{display:block;font-size:16px;line-height:1.3;white-space:nowrap}
 #app .rph-overview .rph-stat span{display:block;margin:0;font-size:12px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
 #app .rph-overview .rph-stat i{display:grid!important;place-items:center;order:-1;flex:none;width:24px;height:24px;border-radius:0;background:transparent!important;color:var(--ui-accent)!important}
 #app .rph-overview .rph-stat i svg{width:23px;height:23px}
}

/* Interested-room lists, details and forms open as full mobile pages. */
@media(max-width:600px){
 body:has(#modal[open].lead-page-dialog){overflow:hidden}
 html body dialog#modal.lead-page-dialog{position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;border:0;border-radius:0!important;background:var(--ui-surface);color:var(--ui-ink)}
 #modal.lead-page-dialog #modal-content{padding:0;min-height:100%;background:var(--ui-surface)}
 #modal.lead-page-dialog .modal-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:12px 16px;border-radius:0;border-bottom:1px solid var(--ui-line);background:var(--ui-surface)}
 #modal.lead-page-dialog .modal-head h2{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.5;color:var(--ui-ink)}
 #modal.lead-page-dialog .modal-head .close{display:none!important}
 #modal.lead-page-dialog .lead-page-back{display:grid;place-items:center;flex:none;width:42px;min-height:44px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--ui-ink)}
 #modal.lead-page-dialog .lead-page-back svg{width:24px;height:24px}
 #modal.lead-page-dialog .lead-page-back:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
 #modal.lead-page-dialog :is(.leads,.lead-mobile-detail,.lead-sheet,#lead-form){padding:16px;margin:0;min-width:0}
 #modal.lead-page-dialog .lmd-back{display:none!important}
 #modal.lead-page-dialog #lead-form .form-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 #modal.lead-page-dialog #lead-form :is(input,select,textarea){min-width:0;max-width:100%;font-size:16px}
 #modal.lead-page-dialog #lead-form :is(input,select){min-height:46px}
 #modal.lead-page-dialog .btn{min-height:44px}
 #modal.lead-page-dialog .lead-form-actions{position:sticky;bottom:0;display:grid;grid-template-columns:minmax(0,1fr);margin:16px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ui-line);background:var(--ui-surface);z-index:5}
 #modal.lead-page-dialog .lead-form-actions>button[type=button]{display:none!important}
 #modal.lead-page-dialog .lead-sheet>.btn{width:100%;margin-bottom:8px;font-size:15px}
}

/* Parking inspection is a full mobile page with one scrolling surface. */
.pkl-mobile{display:none}
@media(max-width:600px){
 #app .pkl-mobile{display:block;margin:0 0 16px}
 html body #app[data-view=parking]:has(.pkl-mobile)>.pk-main{display:none!important}
 #app .pkl-card{min-height:90px}
 #app .pkl-card .mbl-card-copy>strong{font-size:16px;overflow:hidden;text-overflow:ellipsis}
 #app .pkl-card .mbl-card-copy>small{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis}
 #app .pkl-card .mbl-card-value>strong{font-size:16px}
 #app .pkl-card .mbl-card-status{max-width:100%;font-size:11px}
 #app .pkl-card.state-registered .mbl-card-status{background:var(--ui-selected)!important;color:var(--ui-accent)!important}
 #modal.pk-page-dialog #pk-list-detail{padding:0 16px 16px;margin:0}
 #modal.pk-page-dialog #pk-list-detail .summary-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-size:15px;line-height:1.6}
 #modal.pk-page-dialog #pk-list-detail .summary-row>strong{max-width:65%;text-align:right;white-space:normal;overflow-wrap:anywhere;color:var(--ui-ink)}
}
@media(max-width:600px){
 body:has(#modal[open].pk-page-dialog){overflow:hidden}
 html body dialog#modal.pk-page-dialog{position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;border:0;border-radius:0!important;background:var(--ui-surface);color:var(--ui-ink)}
 #modal.pk-page-dialog #modal-content{padding:0;min-height:100%;background:var(--ui-surface)}
 #modal.pk-page-dialog .modal-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:12px 16px;border-radius:0;border-bottom:1px solid var(--ui-line);background:var(--ui-surface)}
 #modal.pk-page-dialog .modal-head h2{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.5;color:var(--ui-ink)}
 #modal.pk-page-dialog .modal-head .close{display:none!important}
 #modal.pk-page-dialog .pk-page-back{display:grid;place-items:center;flex:none;width:42px;min-height:44px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--ui-ink)}
 #modal.pk-page-dialog .pk-page-back svg{width:24px;height:24px}
 #modal.pk-page-dialog .pk-page-back:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
 #modal.pk-page-dialog .pk-check{display:flex;flex-direction:column;min-height:calc(100dvh - 69px);padding:16px;margin:0;box-sizing:border-box}
 #modal.pk-page-dialog .pk-check>.hint{margin:0 0 12px;font-size:14px;line-height:1.65}
 #modal.pk-page-dialog .ck-add{min-width:0;margin:0;gap:8px}
 #modal.pk-page-dialog .ck-add input{min-width:0;width:100%;min-height:48px;font-size:16px;letter-spacing:0}
 #modal.pk-page-dialog .ck-add .btn{flex:none;min-height:48px;font-size:16px}
 #modal.pk-page-dialog .ck-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 14px;font-size:13px;line-height:1.55}
 #modal.pk-page-dialog .ck-sum>span{padding:10px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-subtle);color:var(--ui-muted)}
 #modal.pk-page-dialog .ck-sum b{font-size:16px}
 #modal.pk-page-dialog .ck-list{flex:1;max-height:none;overflow:visible;align-content:start;gap:10px;margin:0 0 16px}
 #modal.pk-page-dialog .ck-item{position:relative;grid-template-columns:minmax(0,1fr);align-items:start;align-self:start;padding:14px;gap:10px;background:var(--ui-surface)!important}
 #modal.pk-page-dialog .ck-plate{min-width:0;padding-right:40px;gap:8px}
 #modal.pk-page-dialog .ck-plate b{font-size:18px;line-height:1.5}
 #modal.pk-page-dialog .ck-plate .badge{background:var(--ui-subtle)!important;color:var(--ui-muted)!important;font-size:12px}
 #modal.pk-page-dialog .ck-res{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
 #modal.pk-page-dialog .ck-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:4px}
 #modal.pk-page-dialog .ck-act .btn{min-height:46px;padding:8px 6px;font-size:14px;white-space:normal;line-height:1.5}
 #modal.pk-page-dialog .ck-act .text-btn{position:absolute;top:8px;right:6px;min-width:44px;min-height:44px;padding:8px;font-size:13px;background:transparent!important;border:0;box-shadow:none}
 #modal.pk-page-dialog .pk-check>.empty{flex:1;display:grid;place-items:center;min-height:160px;padding:24px 12px;font-size:15px;color:var(--ui-muted)}
 #modal.pk-page-dialog .ck-foot{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 1.6fr;gap:10px;flex:none;margin:auto -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ui-line);background:var(--ui-surface)}
 #modal.pk-page-dialog .ck-foot .btn{min-height:48px;font-size:16px}
 #modal.pk-page-dialog #pk-pay{padding:16px;margin:0}
 #modal.pk-page-dialog #modal-content>:not(.modal-head,.pk-check,#pk-pay,#pk-list-detail){margin:16px}
 #modal.pk-page-dialog .form-grid{grid-template-columns:minmax(0,1fr)}
 #modal.pk-page-dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-width:0;max-width:100%;font-size:16px}
 #modal.pk-page-dialog :is(input:not([type=checkbox]):not([type=radio]),select){min-height:46px}
 #modal.pk-page-dialog .actions>[data-pk-back]{display:none!important}
 #modal.pk-page-dialog .mobile-save-bar{background:var(--ui-surface);border-color:var(--ui-line)}
}

/* Worker screens share the admin launcher, compact cards and full-page forms. */
@media(max-width:600px){
 html body:is([data-role=staff],[data-role=tech]) #mnav{grid-template-columns:repeat(5,minmax(0,1fr))}
 html body:is([data-role=staff],[data-role=tech]) #mnav button{font-size:11px;font-weight:500;min-height:56px}
 #app .wk-home-counts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #app .wk-home-counts button{padding:8px 0}
 #app .wk-launcher .mhl-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 body[data-role=tech] #app .wk-launcher .mhl-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #app .worker-app .wk-intro{display:none}
 html body #app .worker-app .wk-heading:has(.btn){display:block;margin:0 0 12px}
 #app .worker-app .wk-heading .btn{width:100%;font-size:15px;min-height:46px}
 #app .worker-app .wk-tools{margin-bottom:14px}
 #app .wk-buildings{margin:0 0 10px}
 html body #app .wk-job.mbl-card{display:grid;grid-template-columns:32px minmax(0,1fr) auto 10px;gap:8px;min-height:96px;padding:12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface)!important;color:var(--ui-ink)!important}
 #app .wk-job .mbl-room-icon{width:32px;height:32px;background:var(--ui-selected)!important;color:var(--ui-accent)!important}
 #app .wk-job .mbl-room-icon svg{width:21px;height:21px}
 #app .wk-job .mbl-card-copy{display:grid;gap:2px;min-width:0}
 #app .wk-job .mbl-card-copy>strong{font-size:16px;line-height:1.5;white-space:nowrap}
 #app .wk-job .mbl-card-copy>small{font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
 #app .wk-job-state{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0;max-width:88px}
 #app .wk-job .wk-status{font-size:11px;white-space:normal;text-align:center;padding:3px 6px;max-width:100%}
 #app .wk-room-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px}
 #app .wk-room{min-height:100px;padding:9px 7px;gap:4px}
 #app .wk-room-top strong{font-size:16px}
 #app .wk-room-status{font-size:14px}
 #app .wk-room small{font-size:11px}
 #app .wk-room-note{font-size:11px;line-height:1.5}
 body:has(#modal[open].worker-dialog){overflow:hidden}
 html body #modal.worker-dialog{position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;border:0;border-radius:0!important;padding:0!important;overflow-x:hidden;overflow-y:auto;background:var(--ui-surface);color:var(--ui-ink)}
 html body #modal.worker-dialog #modal-content{padding:16px!important;min-height:100%;box-sizing:border-box;background:var(--ui-surface)}
 html body #modal.worker-dialog .modal-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;position:sticky;top:0;min-height:64px;margin:-16px -16px 16px;padding:10px 12px;border-radius:0;background:var(--ui-surface)!important;z-index:10}
 #modal.worker-dialog .modal-head h2{margin:0;font-size:17px}
 html body #modal.worker-dialog .wk-page-back{position:static;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0!important;border-radius:10px;background:transparent!important;box-shadow:none!important;color:var(--ui-ink)}
 #modal.worker-dialog .wk-page-back svg{width:24px;height:24px}
 #modal.worker-dialog .summary-row{font-size:15px;line-height:1.6;padding:12px 0}
 #modal.worker-dialog .wk-save-actions{bottom:-16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:359px){#app .wk-launcher .mhl-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Personal account pages use the same full-screen mobile frame as room menus. */
@media(max-width:600px){
 body:has(#modal[open] :is(.mobile-profile-page,.mobile-profile-switch)){overflow:hidden}
 html body #modal:has(.mobile-profile-page,.mobile-profile-switch){position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;border:0;border-radius:0!important;overflow-x:hidden;overflow-y:auto;background:var(--ui-surface);color:var(--ui-ink)}
 html body #modal:has(.mobile-profile-page,.mobile-profile-switch) #modal-content{padding:0!important;min-height:100%;background:var(--ui-surface)}
 #modal:has(.mobile-profile-page,.mobile-profile-switch) .modal-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:64px;margin:0;padding:10px 14px;border-radius:0;background:var(--ui-surface);border-bottom:1px solid var(--ui-line)}
 #modal:has(.mobile-profile-page,.mobile-profile-switch) .modal-head h2{margin:0;font-size:17px}
 html body #modal:has(.mobile-profile-page,.mobile-profile-switch) .modal-head .mp-page-back{position:static;display:grid;place-items:center;flex:none;width:44px;height:44px;padding:10px;border:0!important;border-radius:10px;background:transparent!important;box-shadow:none!important;color:var(--ui-ink)}
 #modal .mp-page-back svg{width:24px;height:24px}
 #modal .mobile-profile-page{padding:20px 16px calc(24px + env(safe-area-inset-bottom))}
 #modal .mp-person{display:flex;align-items:center;gap:14px;padding:4px 0 24px}
 #modal .mp-avatar{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--ui-selected);color:var(--ui-accent);font-size:25px;font-weight:600}
 #modal .mp-person>div{min-width:0}
 #modal .mp-person h2{margin:0;font-size:21px;line-height:1.5;color:var(--ui-ink);overflow-wrap:anywhere}
 #modal .mp-person p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ui-muted)}
 #modal .mp-section-title{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ui-ink)}
 #modal .mp-info{margin:0 0 24px;border:1px solid var(--ui-line);border-radius:12px;overflow:hidden;background:var(--ui-surface)}
 #modal .mp-info>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:54px;padding:14px 12px;border-bottom:1px solid var(--ui-line);font-size:16px;line-height:1.6}
 #modal .mp-info>div:last-child{border-bottom:0}
 #modal .mp-info dt{flex:none;font-size:14px;color:var(--ui-muted)}
 #modal .mp-info dd{margin:0;min-width:0;text-align:right;overflow-wrap:anywhere;color:var(--ui-ink)}
 #modal .mp-switch{display:flex;align-items:center;gap:12px;width:100%;min-height:80px;padding:14px 12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);text-align:left;font:inherit;cursor:pointer}
 #modal .mp-switch-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ui-selected);color:var(--ui-accent)}
 #modal .mp-switch-icon svg{width:24px;height:24px}
 #modal .mp-switch>span:nth-child(2){min-width:0;flex:1}
 #modal .mp-switch strong{display:block;font-size:16px;font-weight:500;line-height:1.5}
 #modal .mp-switch small{display:block;margin-top:3px;font-size:12px;line-height:1.6;color:var(--ui-muted)}
 #modal .mp-chevron{flex:none;font-size:24px;color:var(--ui-muted)}
 #modal .mobile-profile-switch{padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
 #modal .mobile-profile-switch>.hint{margin:0 0 14px;font-size:14px;color:var(--ui-muted)}
 #modal .mobile-profile-switch .role-list{display:grid;gap:10px}
 #modal .mobile-profile-switch .role-option{width:100%;min-height:92px;gap:12px;padding:16px 12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);text-align:left}
 #modal .mobile-profile-switch .role-option.active{background:var(--ui-selected);border-color:var(--ui-accent)}
 #modal .mobile-profile-switch .role-option strong{font-size:16px;color:var(--ui-ink)}
 #modal .mobile-profile-switch .role-option small{margin-top:5px;font-size:13px;line-height:1.6;white-space:normal;color:var(--ui-muted)}
 #modal .mobile-profile-switch .sa-box{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 16px;padding:14px 12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-subtle)!important;color:var(--ui-ink)}
 #modal .mobile-profile-switch .sa-box strong{font-size:16px;line-height:1.5;color:var(--ui-ink)!important}
 #modal .mobile-profile-switch .sa-box small{font-size:13px;line-height:1.6;white-space:normal;color:var(--ui-muted)!important}
 #modal .mobile-profile-switch .sa-box .btn{grid-column:1/-1;width:100%;min-height:46px;font-size:15px}
 #modal :is(.mp-switch,.mp-page-back):focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
}

/* Keep every interested-room status accessible without a horizontal strip. */
.lead-mobile-filter{display:none}
@media (max-width:600px){
 #modal .leads .lead-native-filter{display:none!important}
 #modal .leads .lead-mobile-filter{display:flex;align-items:center;gap:12px;min-height:56px;margin:0 0 14px;padding:4px 12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);font-size:15px}
 #modal .lead-mobile-filter>span{flex:none}
 html body #modal .lead-mobile-filter>select{flex:1;min-width:0;width:0;min-height:46px;padding:8px 22px 8px 4px;border:0;border-radius:6px;background-color:transparent;color:var(--ui-ink);box-shadow:none;font:inherit;font-size:16px;text-align:right}
 #modal .lead-mobile-filter option{background:var(--ui-surface);color:var(--ui-ink)}
 #modal .lead-mobile-filter>select:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
}

/* Booking starts on a full mobile page, using the existing picker and form. */
.mobile-booking-save{display:contents}
@media (max-width:600px){
 body:has(#modal[open].booking-page-dialog){overflow:hidden}
 html body dialog#modal.booking-page-dialog{position:fixed;inset:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;border:0;border-radius:0!important;background:var(--ui-surface);color:var(--ui-ink)}
 #modal.booking-page-dialog #modal-content{padding:0;min-height:100%;background:var(--ui-surface)}
 #modal.booking-page-dialog .modal-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:12px 16px;border-radius:0;border-bottom:1px solid var(--ui-line);background:var(--ui-surface)}
 #modal.booking-page-dialog .modal-head h2{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.5;color:var(--ui-ink)}
 html body #modal.booking-page-dialog .modal-head .booking-page-back{order:-1;display:grid;place-items:center;flex:none;width:42px;min-height:44px;padding:8px;border:0!important;border-radius:10px;background:transparent!important;color:var(--ui-ink);box-shadow:none!important}
 #modal.booking-page-dialog .booking-page-back svg{width:24px;height:24px}
 #modal.booking-page-dialog .booking-page-back:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
 #modal.booking-page-dialog .bk-one{grid-template-columns:minmax(0,1fr);gap:24px;padding:16px;margin:0;min-width:0}
 #modal.booking-page-dialog .form-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 #modal.booking-page-dialog :is(input,select,textarea){max-width:100%;min-width:0;font-size:16px}
 #modal.booking-page-dialog :is(input:not([type=radio]):not([type=checkbox]),select){min-height:46px}
 #modal.booking-page-dialog .btn{min-height:44px}
 #modal.booking-page-dialog .mobile-booking-save{display:block;position:sticky;bottom:0;margin:16px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ui-line);background:var(--ui-surface);z-index:5}
 #modal.booking-page-dialog .mobile-booking-save #rs-save{width:100%;min-height:48px;margin:0;font-size:16px}
}