/* Shared Oak palette: loaded last on every production page. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');
:root {
  --leaf:#8b6f4a; --leaf-dark:#6e5438; --leaf-soft:#f5efe7; --leaf-line:#dfceb7;
  --ink:#302820; --ink-2:#554a3e; --muted:#7c7063;
  --paper:#faf7f2; --surface:#fff; --line:#e6ddd1;
  --shadow:0 1px 2px #3028200a,0 8px 24px -16px #30282035;
}
body { color:var(--ink); background:var(--paper); font-family:'IBM Plex Sans Thai',system-ui,sans-serif; }
.num,.price { font-family:inherit!important; font-variant-numeric:tabular-nums; }
.btn-primary { background:var(--leaf)!important; color:#fff!important; border-color:var(--leaf)!important; }
.btn-primary:hover:not(:disabled) { background:var(--leaf-dark)!important; }
.btn-soft { background:var(--leaf-soft);color:var(--leaf-dark);border-color:var(--leaf-line); }
.btn-ghost { color:var(--ink-2); }
input,select,textarea { accent-color:var(--leaf); }
.input:focus,.select:focus,.textarea:focus { border-color:var(--leaf); box-shadow:0 0 0 3px #8b6f4a20; }
.site-header .brand { color:var(--ink)!important; }
.site-header .brand:first-letter { color:var(--leaf)!important; }
.rooms-hero,.detail-hero { background:linear-gradient(120deg,#eee2d2,#faf7f2 65%,#fff)!important; }
.rooms-hero:after { background:#8b6f4a10!important; }
.room-photo,.detail-photo { background:#eee7de; }
.amenity { color:var(--leaf-dark)!important;border-color:var(--leaf-line)!important;background:#faf6ef!important; }
.hero { background-color:#211a14!important;background-image:linear-gradient(90deg,#f5efe7fa 0%,#f5efe7ec 43%,#18120cb8 72%,#18120ce6),url('https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?auto=format&fit=crop&w=1800&q=85')!important;background-size:cover!important;background-position:center!important; }
.hero-rule { background:var(--leaf); }
footer { background:#211a14!important; }
footer,footer p,footer ul,footer a { color:#d6c8b8!important; }
.text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800 { color:var(--leaf-dark)!important; }
.bg-blue-600,.bg-blue-500 { background-color:var(--leaf)!important; }
.bg-blue-50 { background-color:var(--leaf-soft)!important; }
.border-blue-200,.border-blue-300 { border-color:var(--leaf-line)!important; }
.hover\:bg-blue-700:hover { background-color:var(--leaf-dark)!important; }
.hover\:bg-blue-50:hover { background-color:var(--leaf-soft)!important; }
.hover\:border-blue-400:hover { border-color:var(--leaf)!important; }
.focus\:ring-blue-500:focus { --tw-ring-color:#8b6f4a55!important; }
/* Marketing highlights use Oak; payment/repair status colours remain distinct. */
.rooms-hero .text-emerald-700,.detail-hero .text-emerald-700,#price.text-emerald-700 { color:var(--leaf-dark)!important; }
.detail-list .text-emerald-700 { color:var(--leaf)!important; }
.room-card,.detail-card { box-shadow:0 5px 22px -14px #4b392650; }
@media print { body { background:#fff!important;color:#000!important; } }

/* Critical visibility works even when the utility CDN is unavailable. */
[hidden], .hidden { display: none !important; }
/* Shared Oak UI — bundled to avoid missing stylesheet deployments. */
/* Oak UI refresh. Presentation only; payment and permission rules stay in app.js. */
:root {
  --leaf: #816442;
  --leaf-dark: #634a30;
  --leaf-soft: #f3ece2;
  --leaf-line: #ddcfbd;
  --ink: #29241e;
  --ink-2: #514a41;
  --muted: #746b60;
  --paper: #f7f5f1;
  --surface: #fff;
  --line: #e9e3db;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 2px 8px rgb(41 36 30 / .025);
}
body { background:var(--paper); color:var(--ink); line-height:1.65; }
h1,h2,h3 { letter-spacing:-.02em; }
.card { box-shadow:var(--shadow); }
.card-title { font-size:17px; font-weight:600; }
.card-sub,.page-sub { line-height:1.7; }
.card-head { padding:20px 24px; }
.card-body { padding:24px; }
.btn { min-height:44px; border-radius:10px; font-weight:600; }
.btn-sm { min-height:36px; }
.btn-primary { box-shadow:0 2px 4px rgb(62 44 26 / .08); }
.btn-soft:hover:not(:disabled) { background:#e9dfd0; }
.btn-dark:hover:not(:disabled) { background:#423729; }
.input,.select,.textarea { min-height:44px; border-color:var(--line); }
.input::placeholder,.textarea::placeholder { color:#8a8278; }
.tbl thead th { background:#fbfaf8; font-weight:500; font-size:12px; }
.tbl tbody td { padding-top:17px; padding-bottom:17px; }
.tbl tbody tr:hover { background:#faf8f4; }
.badge { font-size:11px; padding:4px 9px; font-weight:500; }
.badge-green { background:#edf6ef; color:#286344; border-color:#cfe5d6; }
.stat { padding:22px; border-radius:16px; }
.stat-value { font-size:30px; font-variant-numeric:tabular-nums; }
.page-head { margin-bottom:28px; align-items:center; }
.page-title { font-size:26px; letter-spacing:-.035em; }
.page-sub { margin-top:6px; }
.sidebar { background:#fdfcf9; }
.side-link { min-height:43px; border-radius:10px; }
.side-link.active { background:var(--leaf-dark); color:#fff; }
.side-link:hover:not(.active) { background:#eee8df; }
.side-group { font-size:11px; padding-top:22px; }
.side-link.active .side-count { background:#fff; color:var(--rose); }
.room-chip { background:#393127; font-size:12px; border-radius:7px; }
.modal-panel { box-shadow:0 24px 80px rgb(20 15 10 / .18); }
.modal-head,.modal-body { padding:24px; }
.demo-header { background:rgb(253 252 249 / .95); border-color:var(--line); }
.demo-hero h1 { font-size:clamp(2.25rem,4.7vw,4.25rem); line-height:1.18; letter-spacing:-.04em; }
.demo-hero .demo-muted { color:#635b50; }
.demo-search { border-color:rgb(255 255 255 / .65); padding:28px; box-shadow:0 20px 64px rgb(24 18 12 / .12); }
.demo-search>p { font-size:20px; margin-bottom:20px; }
.demo-search .demo-chip { border:0; background:var(--leaf-soft); }
.demo-room { border-color:var(--line); box-shadow:0 2px 8px rgb(41 36 30 / .04); }
.demo-room:hover { box-shadow:0 12px 30px rgb(41 36 30 / .09); transform:translateY(-2px); }
.demo-room .demo-photo { background:#ece7df; }
.demo-room .demo-chip { padding:4px 8px; border-radius:6px; background:#f6f3ee; border-color:transparent; font-size:11px; }
.demo-room .btn-primary { background:var(--leaf-soft)!important; color:var(--leaf-dark)!important; border-color:var(--leaf-line)!important; box-shadow:none; }
.demo-room .btn-primary:hover { background:#e8ddcd!important; }
.demo-muted { color:var(--muted); }
.demo-benefits .demo-muted { color:#c4b9a9; }
.room-card,.detail-card { box-shadow:var(--shadow); }
.amenity { border-color:transparent!important; background:var(--leaf-soft)!important; }
.rooms-hero,.detail-hero { border-bottom:1px solid var(--line); }
.tenant-page { justify-content:flex-start; padding:28px 20px 48px; }
.tenant-shell { max-width:1180px; }
.tenant-frame { background:transparent; border:0; box-shadow:none; overflow:visible; }
.tenant-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 24px; border-bottom:1px solid var(--line); background:transparent; }
.tenant-topbar .tenant-brand { display:flex; align-items:center; gap:9px; color:var(--leaf-dark); font-size:18px; }
.tenant-topbar .tenant-brand svg { width:23px; height:23px; }
.tenant-brand span { font-weight:600; }
.tenant-brand small { display:block; font-size:11px; color:var(--muted); font-weight:400; }
.tenant-topbar-links { display:flex; align-items:center; gap:16px; font-size:12px; color:var(--muted); }
.tenant-content { padding:30px 0 0; }
.tenant-dashboard { display:flex; flex-direction:column; gap:26px; }
.tenant-greeting { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.tenant-eyebrow { font-size:12px; color:var(--muted); }
.tenant-name { font-size:clamp(22px,3vw,30px); font-weight:600; color:var(--ink); line-height:1.5; overflow-wrap:anywhere; margin:4px 0; }
.tenant-room-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.tenant-room-meta .tenant-status { background:var(--leaf-soft); color:var(--leaf-dark); border-radius:6px; padding:3px 8px; }
.tenant-actions { display:flex; flex-wrap:wrap; gap:8px; }
.tenant-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:13px; color:var(--ink-2); }
.tenant-summary { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; }
.tenant-balance { background:#342b22; color:#fff; border-radius:18px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; }
.tenant-balance-label { font-size:13px; color:#dfd1c0; }
.tenant-balance-amount { font-size:clamp(32px,4vw,44px); line-height:1.3; letter-spacing:-.035em; font-weight:600; font-variant-numeric:tabular-nums; margin-top:10px; overflow-wrap:anywhere; }
.tenant-balance-amount small { font-size:18px; color:#d7c5af; font-weight:400; margin-left:6px; }
.tenant-balance-note { font-size:12px; color:#dfd1c0; margin-top:10px; }
.tenant-balance-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:18px; border-top:1px solid #5b4a38; }
.tenant-balance-bottom p { font-size:12px; color:#dfd1c0; }
.tenant-pay { min-height:42px; background:#f4e9d9; color:#493521; padding:9px 18px; border-radius:10px; font-size:13px; font-weight:600; white-space:nowrap; }
.tenant-pay:hover:not(:disabled) { background:#fff5e6; }
.tenant-pay:disabled { opacity:.6; cursor:not-allowed; }
.tenant-facts { display:flex; flex-direction:column; background:white; border:1px solid var(--line); border-radius:18px; padding:8px 24px; }
.tenant-fact { padding:18px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.tenant-fact:last-child { border-bottom:0; }
.tenant-fact-label { color:var(--muted); font-size:12px; }
.tenant-fact-value { font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.tenant-fact small { display:block; margin-top:4px; font-size:11px; color:var(--muted); }
.tenant-columns { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:22px; }
.tenant-panel { border:1px solid var(--line); border-radius:16px; background:white; overflow:hidden; min-width:0; }
.tenant-panel-heading { padding:20px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.tenant-panel-heading h2 { font-size:16px; font-weight:600; color:var(--ink); }
.tenant-panel-heading p { font-size:11px; color:var(--muted); margin-top:6px; line-height:1.7; }
.tenant-inline-action { font-size:12px; font-weight:500; color:var(--leaf-dark); white-space:nowrap; padding:3px 0; }
.tenant-panel .border-slate-100 { border-color:var(--line); }
.tenant-panel .text-slate-800,.tenant-panel .text-slate-900 { color:var(--ink); }
.tenant-panel .text-slate-500,.tenant-panel .text-slate-400 { color:var(--muted); }
.tenant-panel table { font-variant-numeric:tabular-nums; }
.tenant-panel table thead { background:#faf8f4; }
.tenant-panel table th { font-weight:500; }
.tenant-panel table td { padding-top:17px; padding-bottom:17px; }
.tenant-contract-body { padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:24px 16px; }
.tenant-contract-body p { font-size:11px; color:var(--muted); }
.tenant-contract-body strong { display:block; margin-top:6px; font-size:13px; font-weight:500; color:var(--ink); }
.tenant-empty { padding:40px 24px; text-align:center; color:var(--muted); font-size:13px; }
.tenant-preview-note { background:#fff8e9; color:#775319; border:1px solid #eddbb7; border-radius:10px; padding:12px 16px; font-size:12px; margin-bottom:20px; }
.tenant-page .meter span { background:var(--leaf); }
.tenant-page .meter.warn span { background:#b88627; }
.tenant-page .meter.danger span { background:#a8323a; }
@media(max-width:800px) {
  .tenant-summary,.tenant-columns { grid-template-columns:1fr; }
  .tenant-greeting { gap:16px; }
  .tenant-facts { padding:4px 20px; }
  .tenant-balance { padding:24px; }
}
@media(max-width:520px) {
  .tenant-page { padding:18px 14px 32px; }
  .tenant-topbar { padding-bottom:18px; gap:8px; }
  .tenant-brand span { font-size:16px; }
  .tenant-topbar-links { gap:10px; font-size:11px; }
  .tenant-brand small { display:none; }
  .tenant-content { padding-top:24px; }
  .tenant-dashboard { gap:20px; }
  .tenant-panel-heading { padding:18px; }
  .tenant-panel-heading p { font-size:11px; }
  .tenant-contract-body { padding:18px; }
  .demo-search { padding:22px; }
  .page-title { font-size:23px; }
  .card-head,.card-body { padding:18px; }
  .tenant-fact-value { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .demo-room:hover { transform:none; }
}
@media print {
  body { background:#fff; }
  .tenant-actions,.tenant-pay,.tenant-topbar-links { display:none; }
  .tenant-balance { background:#fff; color:#000; border:1px solid #aaa; }
  .tenant-balance * { color:#000; }
  .tenant-summary,.tenant-columns { display:block; }
  .tenant-panel,.tenant-facts { break-inside:avoid; margin-top:16px; }
}
/* Shared Thai typography: natural glyph/word spacing, enough room for Thai marks. */
:root { --font-ui:'IBM Plex Sans Thai',system-ui,-apple-system,sans-serif; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { font-family:var(--font-ui); font-size:15px; line-height:1.65; letter-spacing:normal; word-spacing:normal; }
button,input,select,textarea { font-family:var(--font-ui); letter-spacing:normal; word-spacing:normal; }
h1,h2,h3,h4,h5,h6,.page-title,.card-title,.pricing-card-title,.demo-hero h1 { letter-spacing:normal; line-height:1.45; }
p,label,.hint,.muted,.page-sub,.card-sub { letter-spacing:normal; word-spacing:normal; }
.label { display:block; line-height:1.55; margin-bottom:6px; }
.input,.select,.textarea { line-height:1.55; min-height:44px; }
.btn,.side-link,.tenant-secondary,.tenant-pay { line-height:1.5; }
.badge,.side-group,.room-chip { line-height:1.5; }
.num,.price,.stat-value,.tenant-balance-amount { letter-spacing:normal; word-spacing:normal; font-variant-numeric:tabular-nums; }
.tbl td,.tbl th,.bw-table td,.bw-table th { line-height:1.6; }