#app .room-plan .state-all{--plan:#506479;--plan-bg:#edf1f5;--plan-border:#c9d3dd}
#app .room-plan .state-occupied{--plan:#485f73;--plan-bg:#e9eef2;--plan-border:#d3dce4;--plan-tile:#fff}
#app .room-plan .state-vacant{--plan:#2f6853;--plan-bg:#e6f1eb;--plan-border:#b7cfc0;--plan-tile:#f4f9f5}
#app .room-plan .state-booking{--plan:#7c5e2d;--plan-bg:#f8efdf;--plan-border:#ddcaa6;--plan-tile:#fffaf1}
#app .room-plan .state-repair{--plan:#60666e;--plan-bg:#eceef0;--plan-border:#d3d5d8;--plan-tile:#f5f5f6}
#app .room-plan .state-overdue{--plan:#98454c;--plan-bg:#faecee;--plan-border:#cda9ac}
#app #room-plan-results .room-plan-building{border:1px solid #d6dce1}
#app #room-plan-results .room-plan-building-head{background:#e9edf0;color:#344b5b;border-bottom:1px solid #d6dce1}
#app #room-plan-results .room-plan-building-head h2{color:#344b5b}
#app #room-plan-results .room-plan-building-head h2 span{background:#fff;border-color:#ced7de;color:#344b5b}
#app #room-plan-results .room-plan-floor{background:#f8f9fa;border-top-color:#e1e5e8}
#app #room-plan-results .room-plan-floor>h3{color:#465867;border-right-color:#d9e0e5}
#app #room-plan-results .room-plan-floor>h3>span{color:#657482}
#app .room-plan-tile{background:var(--plan-tile);border:1px solid var(--plan-border);border-radius:10px;color:#293d4e;box-shadow:inset 0 3px 0 var(--plan-border);min-height:92px;padding:10px 10px 8px;gap:4px;justify-content:center;align-items:center;text-align:center;transition:border-color .15s,box-shadow .15s}
#app .room-plan-tile:hover{filter:none;border-color:var(--plan);box-shadow:inset 0 3px 0 var(--plan-border),0 2px 6px #344b5b14}
#app .room-plan-tile-head{justify-content:center;padding-right:0;color:#293d4e}
#app .room-plan-tile-head>strong{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:.5px}
#app .room-plan-icon{display:none}
#app .room-plan-person{display:none}
#app .room-plan-state{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;align-self:center;background:var(--plan-bg);color:var(--plan);font-size:12px;padding:2px 9px}
#app .room-plan-type{color:#62717e;font-size:12px;line-height:1.35}
#app .room-plan-tile-foot{margin:4px -10px -8px;align-self:stretch;border-top:1px solid var(--plan-border);background:var(--plan-bg);color:var(--plan)}
#app .room-plan-tile-foot.is-detail{display:none}
#app .room-plan-tile.has-debt{border-color:#cda9ac;box-shadow:inset 0 3px 0 #cda9ac}
#app .room-plan-tile.has-debt:hover{border-color:#98454c;box-shadow:inset 0 3px 0 #cda9ac,0 2px 6px #344b5b14}
#app .room-plan-tile-foot.is-debt{background:#faecee;border-color:#e7cdd1;color:#98454c}
#app .room-plan-tile:focus-visible{outline:3px solid #173c65;outline-offset:3px}
@media(max-width:600px){#app .room-plan-tile{min-height:76px;padding:8px 6px 6px}#app .room-plan-tile-head>strong{font-size:24px}#app .room-plan-type{display:none}#app .room-plan-tile-foot{margin:4px -6px -6px;padding:5px 6px}}

#app .room-plan-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#app .room-plan-stat{position:relative;display:grid;grid-template-columns:1fr 44px;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:2px;padding:14px 16px;border:1px solid #e3e9f2;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1a2a4a0d;text-align:left;color:#1c3557}
#app .room-plan-stat:hover{border-color:var(--plan-border)}
#app .room-plan-stat strong{grid-column:1;grid-row:1;font-size:22px;font-weight:800;line-height:1.2;color:#1c3557}
#app .room-plan-stat strong small{display:inline!important;font-size:22px;font-weight:800}
#app .room-plan-stat>span{grid-column:1;grid-row:2;font-size:13px;font-weight:400;color:#6b7c93}
#app .room-plan-stat::after{content:"";grid-column:2;grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--plan-bg)}
#app .room-plan-stat::before{content:"";position:absolute;right:28px;top:50%;width:20px;height:20px;transform:translateY(-50%);background:var(--plan);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;z-index:1}
#app .room-plan-stat.is-active{border-color:var(--plan);box-shadow:0 0 0 2px var(--plan);background:#fff}
@media(max-width:600px){#app .room-plan-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#app .room-plan-stat{padding:10px 12px;grid-template-columns:1fr 36px}#app .room-plan-stat::after{width:36px;height:36px}#app .room-plan-stat::before{right:20px;width:17px;height:17px}#app .room-plan-stat strong,#app .room-plan-stat strong small{font-size:18px}}

#app .room-plan-stat.state-all{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V5l7-3%207%203v16M9%209h1M14%209h1M9%2013h1M14%2013h1M9%2017h1M14%2017h1%22/%3E%3C/svg%3E")}
#app .room-plan-stat.state-vacant{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2021V3H6v18M14%204l5%202v15M10%2012h.01M3%2021h18%22/%3E%3C/svg%3E")}
#app .room-plan-stat.state-occupied{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021v-1a8%208%200%200%201%2016%200v1%22/%3E%3C/svg%3E")}
#app .room-plan-stat.state-booking{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%203v4M8%203v4M4%2011h16M9%2016l2%202%204-4%22/%3E%3C/svg%3E")}
#app .room-plan-stat.state-repair{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.2L3%2017.8V21h3.2l6.3-6.3a4%204%200%200%200%205.2-5.4l-2.6%202.6-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E")}
#app .room-plan-stat.state-overdue{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.5%22/%3E%3Cpath%20d%3D%22M6%2012h.01M18%2012h.01%22/%3E%3C/svg%3E")}
#app .room-plan-stat strong{white-space:nowrap;font-size:20px}
#app .room-plan-stat strong small{font-size:15px;font-weight:600;color:#5b6f8c}
#app .room-plan-filters{display:block;padding:10px 12px}
#app .room-plan-filter-top{display:flex;gap:10px;align-items:flex-end}
#app .room-plan-filter-top .room-plan-search{flex:1;min-width:0}
#app .room-plan-filter-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;font-size:14px;white-space:nowrap}
#app .room-plan-filter-toggle::before{content:"⚲";font-size:15px;transform:rotate(-45deg)}
#app .room-plan-filters .room-plan-filter-options{display:none}
#app .room-plan-filters.is-open .room-plan-filter-options{display:grid;grid-template-columns:minmax(120px,180px) minmax(180px,320px) auto;justify-content:start;align-items:end;gap:12px;margin-top:12px}
#app .room-plan-filters.is-open .room-plan-filter-toggle{background:#2550c8;color:#fff;border-color:#2550c8}
@media(max-width:600px){#app .room-plan-filters.is-open .room-plan-filter-options{grid-template-columns:1fr 1fr}#app .room-plan-stat strong{font-size:17px}#app .room-plan-stat strong small{font-size:13px}}
#app .room-plan-help{display:none}
#app .room-plan-filters:not(.is-open){background:transparent;border:0;padding:0;margin:0}
#app .room-plan-filters:not(.is-open) .room-plan-filter-top{justify-content:flex-start}
#app .room-plan-filters:not(.is-open) .room-plan-search{display:none}
#app .room-plan-filters:not(.is-open):has(.room-plan-search input:not(:placeholder-shown)) .room-plan-search{display:block;max-width:360px}
#app .room-plan-filters:not(.is-open) .room-plan-filter-toggle{min-height:34px;padding:5px 14px;font-size:13px;border-radius:999px;background:#fff}
#app .room-plan-filter-toggle::after{content:"ค้นหา · ";order:-1}
#app .room-plan-filter-toggle::before{order:-2}
#app .room-plan-intro p{display:none}
#app .room-plan-floor{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:start}
#app .room-plan-floor>h3{flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:10px 0 0;font-size:22px;font-weight:800;color:#1c3557;line-height:1.1;border-right:3px solid #c9d7ea;min-height:80px}
#app .room-plan-floor>h3>span{margin:0;font-size:13px;font-weight:500;color:#5b6f8c}
@media(max-width:600px){#app .room-plan-floor{grid-template-columns:58px minmax(0,1fr);gap:8px}#app .room-plan-floor>h3{font-size:17px;min-height:60px}#app .room-plan-floor>h3>span{font-size:11px}}