/* =========================================================
   RukJao — App design system (mobile-first)
   Palette: deep wine + champagne gold on warm cream
   ========================================================= */
:root{
  --wine-950:#1d0713; --wine-900:#2a0a1c; --wine-800:#3d0f27; --wine-700:#5b1a3a; --wine-600:#7a2550; --wine-500:#9b3566;
  --wine-100:#f6e7ee; --wine-50:#fbf3f6;
  --gold-600:#b8862a; --gold-500:#d4a03a; --gold-400:#e7bd62; --gold-200:#f5dfa8; --gold-100:#fbf1db;
  --cream:#faf5ee; --cream-2:#f4ece1; --paper:#fff;
  --ink:#23151c; --ink-2:#4a3942; --muted:#8a7680; --line:#eadfd3; --line-2:#f3ebe1;
  --ok:#1d8656; --ok-bg:#e5f4ec; --warn:#bf7410; --warn-bg:#fcefd7; --bad:#c03148; --bad-bg:#fbe6e9;
  --occ:#7a2550; --occ-bg:#f7e5ee; --due:#c2491a; --due-bg:#fde9df; --dirty:#8a5a2b; --dirty-bg:#f4e9dc; --blk:#5f6670; --blk-bg:#eceef1;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(42,10,28,.06),0 2px 8px rgba(42,10,28,.05);
  --sh-2:0 8px 28px rgba(42,10,28,.10),0 2px 6px rgba(42,10,28,.06);
  --font:'Manrope','Mukta',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sb-w:262px; --tb-h:62px; --bn-h:66px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
a{color:var(--wine-700);text-decoration:none}
a:hover{color:var(--wine-600)}
h1,h2,h3,h4{margin:0;line-height:1.2;color:var(--ink)}
h2{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:-.01em}
h3{font-size:1.02rem;font-weight:700}
p{margin:.3rem 0 .8rem}
img{max-width:100%}
.ic{width:20px;height:20px;flex:none}
.muted{color:var(--muted)} .small{font-size:.84rem} .tiny{font-size:.75rem}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.money{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.mt0{margin-top:0}.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}
.hstack{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.grow{flex:1}
.hide{display:none!important}
.ok-t{color:var(--ok)} .bad-t{color:var(--bad)} .warn-t{color:var(--warn)}

/* ---------- Sidebar ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);background:linear-gradient(180deg,var(--wine-800) 0%,var(--wine-900) 100%);color:#f3e6ec;display:flex;flex-direction:column;z-index:60;transform:translateX(-102%);transition:transform .25s ease;box-shadow:var(--sh-2)}
.sidebar::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 50% at 0% 0%,rgba(231,189,98,.16),transparent 60%);pointer-events:none}
body.sb-open .sidebar{transform:none}
.sb-backdrop{position:fixed;inset:0;background:rgba(29,7,19,.45);backdrop-filter:blur(2px);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
body.sb-open .sb-backdrop{opacity:1;pointer-events:auto}
.sb-brand{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1.1rem .9rem;color:#fff;position:relative}
.sb-brand b{display:block;font-family:var(--serif);font-weight:600;font-size:1.06rem;line-height:1.15;color:#fff}
.sb-brand small{display:block;font-size:.7rem;color:var(--gold-400);letter-spacing:.04em;text-transform:uppercase}
.sb-logo-img{width:38px;height:38px;border-radius:10px;object-fit:cover;background:#fff}
.sb-nav{flex:1;overflow-y:auto;padding:.2rem .7rem 1rem;position:relative;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.sb-grp{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,230,236,.45);padding:.9rem .6rem .35rem;font-weight:700}
.sb-nav a{display:flex;align-items:center;gap:.7rem;padding:.58rem .7rem;border-radius:10px;color:rgba(243,230,236,.86);font-weight:600;font-size:.92rem;position:relative}
.sb-nav a .ic{width:19px;height:19px;opacity:.85}
.sb-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-nav a.on{background:linear-gradient(90deg,rgba(231,189,98,.22),rgba(231,189,98,.06));color:#fff}
.sb-nav a.on::before{content:"";position:absolute;left:-.7rem;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--gold-400)}
.sb-nav a.on .ic{color:var(--gold-400);opacity:1}
.sb-count{margin-left:auto;font-style:normal;background:var(--gold-500);color:var(--wine-900);font-size:.7rem;font-weight:800;border-radius:99px;padding:.05rem .45rem}
.sb-foot{padding:.8rem;border-top:1px solid rgba(255,255,255,.08);position:relative}
.sb-plan{display:flex;gap:.6rem;align-items:center;padding:.6rem .7rem;border-radius:12px;background:rgba(231,189,98,.12);color:var(--gold-200);font-weight:700;font-size:.85rem;margin-bottom:.6rem}
.sb-plan small{display:block;font-weight:500;color:rgba(245,223,168,.75);font-size:.74rem}
.sb-user{display:flex;align-items:center;gap:.55rem}
.sb-user > span:nth-child(2){flex:1;min-width:0}
.sb-user b{display:block;color:#fff;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user small{color:rgba(243,230,236,.55);font-size:.74rem}
.sb-user a{color:rgba(243,230,236,.7);padding:.35rem;border-radius:8px;display:flex}
.sb-user a:hover{background:rgba(255,255,255,.08);color:#fff}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:var(--wine-900);font-weight:800;font-size:.8rem;flex:none}

/* ---------- Main / topbar ---------- */
.main{min-height:100vh;display:flex;flex-direction:column;padding-bottom:calc(var(--bn-h) + env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:40;height:var(--tb-h);display:flex;align-items:center;gap:.6rem;padding:0 .9rem;background:rgba(250,245,238,.86);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.tb-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;flex:none}
.tb-title{flex:1;min-width:0}
.tb-title h1{font-family:var(--serif);font-weight:600;font-size:1.18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.tb-title small{display:block;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-actions{display:flex;gap:.45rem;align-items:center}
.content{padding:1rem .9rem 1.5rem;width:100%;max-width:1320px;margin:0 auto;flex:1}
.app-foot{text-align:center;font-size:.74rem;color:var(--muted);padding:.8rem 1rem 1.2rem}
.banner{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.75rem .9rem 0;padding:.6rem .85rem;border-radius:12px;background:var(--gold-100);color:#6a4a0e;font-size:.86rem;border:1px solid var(--gold-200)}
.banner .ic{width:18px;height:18px;flex:none}
.banner > span{flex:1;min-width:0}
html,body{overflow-x:hidden}
.banner a{font-weight:700;color:var(--wine-700);text-decoration:underline}
.banner-dark{background:var(--wine-800);color:#fff;border-color:var(--wine-800)} .banner-dark a{color:var(--gold-400)}
.banner-gold{background:linear-gradient(90deg,var(--gold-100),#fff8e8)}

/* ---------- Bottom nav (mobile) ---------- */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(var(--bn-h) + env(safe-area-inset-bottom));padding:0 .4rem env(safe-area-inset-bottom);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around}
.bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:700;color:var(--muted);background:none;border:0;font-family:inherit;cursor:pointer;padding:.3rem 0}
.bnav a .ic,.bnav button .ic{width:22px;height:22px}
.bnav a:hover{color:var(--wine-700)}
.bnav .bnav-plus{flex:none;width:56px;height:56px;margin-top:-26px;border-radius:18px;background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:var(--wine-900);box-shadow:0 8px 20px rgba(184,134,42,.45),0 0 0 5px var(--cream);justify-content:center}
.bnav .bnav-plus .ic{width:26px;height:26px;stroke-width:2.4}
.sheet{position:fixed;inset:0;z-index:70;background:rgba(29,7,19,.45);display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.sheet-card{width:100%;background:var(--paper);border-radius:22px 22px 0 0;padding:.6rem .8rem calc(1rem + env(safe-area-inset-bottom));animation:up .22s ease}
.sheet-grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:.2rem auto .7rem}
.sheet-item{display:flex;gap:.8rem;align-items:center;padding:.75rem .5rem;border-radius:14px;color:var(--ink)}
.sheet-item:hover{background:var(--cream)}
.sheet-item b{display:block}.sheet-item small{color:var(--muted)}
.si-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--wine-100);color:var(--wine-700);flex:none}
.si-ic.gold{background:var(--gold-100);color:var(--gold-600)}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}

@media (min-width:980px){
  .sidebar{transform:none}
  .sb-backdrop,.tb-menu,.bnav,.sheet{display:none!important}
  .main{margin-left:var(--sb-w);padding-bottom:0}
  .topbar{padding:0 1.6rem}
  .content{padding:1.4rem 1.6rem 2rem}
  .banner{margin:.9rem 1.6rem 0}
  .hide-d{display:none!important}
}
@media (max-width:979px){ .hide-m{display:none!important} }

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.62rem 1rem;border-radius:12px;border:1px solid transparent;background:var(--wine-700);color:#fff;font:700 .9rem/1.1 var(--font);cursor:pointer;white-space:nowrap;transition:transform .08s,box-shadow .15s,background .15s;text-decoration:none}
.btn:hover{background:var(--wine-600);color:#fff;box-shadow:0 6px 16px rgba(91,26,58,.22)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:18px;height:18px}
.btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));color:var(--wine-900)}
.btn-gold:hover{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:var(--wine-950);box-shadow:0 6px 16px rgba(184,134,42,.3)}
.btn-ghost{background:transparent;color:var(--wine-700);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper);color:var(--wine-700);box-shadow:var(--sh-1)}
.btn-white{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-white:hover{background:var(--paper);color:var(--wine-700);box-shadow:var(--sh-1)}
.btn-ok{background:var(--ok)} .btn-ok:hover{background:#176f47}
.btn-danger{background:var(--paper);color:var(--bad);border-color:#f0c9d0} .btn-danger:hover{background:var(--bad);color:#fff}
.btn-sm{padding:.45rem .72rem;font-size:.82rem;border-radius:10px}
.btn-lg{padding:.85rem 1.3rem;font-size:1rem;border-radius:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer}
.icon-btn:hover{color:var(--wine-700);border-color:var(--wine-100)}
.icon-btn .ic{width:18px;height:18px}

/* ---------- Cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:1rem;margin-bottom:1rem}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
.card-h h3{display:flex;align-items:center;gap:.45rem}
.card-h h3 .ic{color:var(--gold-600)}
.card.flush{padding:0;overflow:hidden}
.card.flush .card-h{padding:1rem 1rem 0}
.grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.grid > *{min-width:0}
@media(min-width:760px){ .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-side{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} }
@media(min-width:1100px){ .g4{grid-template-columns:repeat(4,1fr)} }
.section-t{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin:.4rem 0 .8rem}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}
@media(min-width:760px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.kpis{grid-template-columns:repeat(6,1fr)}}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.85rem .9rem;box-shadow:var(--sh-1);position:relative;overflow:hidden;color:var(--ink)}
a.kpi:hover{border-color:var(--gold-200);color:var(--ink)}
.kpi small{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.kpi small .ic{width:15px;height:15px;color:var(--gold-600)}
.kpi b{display:block;font-family:var(--serif);font-size:1.65rem;font-weight:600;letter-spacing:-.02em;margin-top:.2rem;line-height:1.1}
.kpi span{font-size:.78rem;color:var(--muted)}
.kpi.hero{background:linear-gradient(140deg,var(--wine-700),var(--wine-900));color:#fff;border-color:var(--wine-800)}
.kpi.hero small{color:rgba(255,255,255,.65)} .kpi.hero small .ic{color:var(--gold-400)} .kpi.hero span{color:rgba(255,255,255,.7)}
.kpi.hero b{color:#fff}
.ring{--p:0;width:54px;height:54px;border-radius:50%;background:conic-gradient(var(--gold-400) calc(var(--p)*1%),rgba(255,255,255,.14) 0);display:grid;place-items:center;position:absolute;right:.8rem;top:50%;transform:translateY(-50%)}
.ring::after{content:"";width:40px;height:40px;border-radius:50%;background:var(--wine-800)}

/* ---------- Room board ---------- */
.legend{display:flex;gap:.4rem .9rem;flex-wrap:wrap;font-size:.78rem;color:var(--ink-2);font-weight:600}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem;vertical-align:-1px}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem}
@media(min-width:760px){.room-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}
.room{position:relative;display:flex;flex-direction:column;gap:.15rem;min-height:96px;padding:.6rem .65rem;border-radius:13px;border:1px solid var(--line);background:var(--paper);color:var(--ink);transition:transform .1s,box-shadow .15s;overflow:hidden}
.room:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--ink)}
.room::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--ok))}
.room .rn{font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1}
.room .rt{font-size:.7rem;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room .rg{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto}
.room .rs{position:absolute;top:.55rem;right:.55rem;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:.12rem .4rem;border-radius:99px;background:var(--bg,var(--ok-bg));color:var(--c,var(--ok))}
.room.s-vacant{--c:var(--ok);--bg:var(--ok-bg)}
.room.s-occupied{--c:var(--occ);--bg:var(--occ-bg);background:linear-gradient(180deg,#fff,var(--wine-50))}
.room.s-dueout{--c:var(--due);--bg:var(--due-bg);background:linear-gradient(180deg,#fff,#fff6f1)}
.room.s-arriving{--c:var(--warn);--bg:var(--warn-bg)}
.room.s-dirty{--c:var(--dirty);--bg:var(--dirty-bg);background:repeating-linear-gradient(135deg,#fff,#fff 8px,#fbf6f0 8px,#fbf6f0 16px)}
.room.s-blocked{--c:var(--blk);--bg:var(--blk-bg);background:#f6f7f8;color:var(--blk)}
.lg-vacant{background:var(--ok)}.lg-occupied{background:var(--occ)}.lg-dueout{background:var(--due)}.lg-arriving{background:var(--warn)}.lg-dirty{background:var(--dirty)}.lg-blocked{background:var(--blk)}

/* ---------- Lists ---------- */
.list{display:flex;flex-direction:column}
.li{display:flex;gap:.75rem;align-items:center;padding:.75rem 0;border-top:1px solid var(--line-2);color:var(--ink)}
.li:first-child{border-top:0}
a.li:hover{color:var(--ink);background:linear-gradient(90deg,transparent,var(--cream),transparent)}
.li .li-main{flex:1;min-width:0}
.li .li-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .li-main small{display:block;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .li-end{text-align:right;flex:none}
.li .li-end small{display:block;color:var(--muted);font-size:.76rem}
.room-chip{min-width:46px;height:46px;padding:0 .4rem;border-radius:12px;display:grid;place-items:center;background:var(--wine-100);color:var(--wine-700);font-family:var(--serif);font-weight:700;font-size:.95rem;flex:none;text-align:center;line-height:1}
.room-chip.gold{background:var(--gold-100);color:var(--gold-600)}
.room-chip.ok{background:var(--ok-bg);color:var(--ok)}
.room-chip small{display:block;font-family:var(--font);font-size:.58rem;font-weight:700;opacity:.8}

/* ---------- Badges / chips / tabs ---------- */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.16rem .55rem;border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.02em;background:var(--cream-2);color:var(--ink-2);white-space:nowrap}
.st-request{background:#ede7fb;color:#5b3fb0}.st-reserved{background:var(--warn-bg);color:var(--warn)}.st-checked_in{background:var(--occ-bg);color:var(--occ)}
.st-checked_out{background:var(--ok-bg);color:var(--ok)}.st-cancelled{background:var(--bad-bg);color:var(--bad)}.st-no_show{background:var(--blk-bg);color:var(--blk)}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-bad{background:var(--bad-bg);color:var(--bad)}.b-warn{background:var(--warn-bg);color:var(--warn)}.b-gold{background:var(--gold-100);color:var(--gold-600)}.b-wine{background:var(--wine-100);color:var(--wine-700)}
.tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.2rem;margin-bottom:1rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{flex:none;display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font:700 .84rem var(--font);cursor:pointer}
.tabs a.on,.tabs button.on{background:var(--wine-700);border-color:var(--wine-700);color:#fff}
.tabs em{font-style:normal;font-size:.72rem;padding:.02rem .42rem;border-radius:99px;background:var(--cream-2);color:var(--ink-2)}
.tabs a.on em{background:rgba(255,255,255,.2);color:#fff}

/* ---------- Forms ---------- */
.f-grid{display:grid;gap:.8rem}
@media(min-width:640px){.f2{grid-template-columns:1fr 1fr}.f3{grid-template-columns:repeat(3,1fr)}.f4{grid-template-columns:repeat(4,1fr)}}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field.span2{grid-column:1/-1}
label,.lbl{font-size:.78rem;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
label .req{color:var(--bad)}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],input[type=password],input[type=search],input[type=time],input:not([type]),select,textarea{
  width:100%;padding:.68rem .8rem;border:1px solid var(--line);border-radius:11px;background:#fff;font:500 .95rem var(--font);color:var(--ink);transition:border .15s,box-shadow .15s;min-height:44px}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(212,160,58,.18)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7680' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.hint{font-size:.76rem;color:var(--muted)}
.input-group{display:flex;gap:.5rem}
.input-group > *:first-child{flex:1}
.check{display:flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--wine-700)}
.fieldset{border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin:0 0 1rem;background:var(--paper)}
.fieldset > .legend-t{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:600;font-size:1.05rem;margin:0 0 .9rem}
.fieldset > .legend-t .num{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--gold-100);color:var(--gold-600);font:800 .8rem var(--font)}
.sticky-bar{position:sticky;bottom:calc(var(--bn-h) + env(safe-area-inset-bottom));z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;padding:.7rem .8rem;box-shadow:var(--sh-2);display:flex;align-items:center;gap:.7rem}
@media(min-width:980px){.sticky-bar{bottom:1rem}}
.sticky-bar .sb-total{flex:1;min-width:0}
.sticky-bar .sb-total small{display:block;color:var(--muted);font-size:.74rem;font-weight:700}
.sticky-bar .sb-total b{font-family:var(--serif);font-size:1.3rem}
.seg{display:inline-flex;background:var(--cream-2);border-radius:12px;padding:3px;gap:2px}
.seg label{cursor:pointer;padding:.42rem .8rem;border-radius:9px;font-size:.84rem;font-weight:700;color:var(--ink-2)}
.seg input{display:none}
.seg input:checked + span{color:var(--wine-700)}
.seg label:has(input:checked){background:#fff;box-shadow:var(--sh-1);color:var(--wine-700)}

/* ---------- Room picker (booking form) ---------- */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.pick{border:1.5px solid var(--line);border-radius:13px;padding:.6rem .7rem;background:#fff;cursor:pointer;position:relative;transition:border .15s,background .15s}
.pick input[type=checkbox]{position:absolute;opacity:0}
.pick .pk-top{display:flex;justify-content:space-between;align-items:baseline}
.pick .pk-no{font-family:var(--serif);font-weight:700;font-size:1.15rem}
.pick .pk-type{font-size:.72rem;color:var(--muted);font-weight:600}
.pick .pk-rate{display:none;margin-top:.45rem;gap:.35rem}
.pick .pk-rate input{min-height:36px;padding:.4rem .5rem;font-size:.86rem}
.pick.sel{border-color:var(--gold-500);background:var(--gold-100)}
.pick.sel .pk-rate{display:grid;grid-template-columns:1fr 64px}
.pick.sel::after{content:"✓";position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--wine-700);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:800}
.pick.na{opacity:.45;cursor:not-allowed;background:var(--cream)}
.pick.na .pk-type::after{content:" · Booked";color:var(--bad)}
.pick.blk .pk-type::after{content:" · Maintenance";color:var(--blk)}
.type-h{font-size:.8rem;font-weight:800;color:var(--ink-2);margin:.8rem 0 .45rem;display:flex;gap:.5rem;align-items:center}
.type-h span{color:var(--muted);font-weight:600}

/* ---------- Tables (cards on mobile) ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;padding:.6rem .7rem;border-bottom:1px solid var(--line);background:var(--cream);white-space:nowrap}
.tbl td{padding:.65rem .7rem;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tfoot td{font-weight:800;background:var(--cream);border-top:1px solid var(--line)}
.tbl .r{text-align:right}
.tbl tbody tr:hover td{background:#fffcf7}
@media(max-width:700px){
  table.tbl.rsp thead{display:none}
  table.tbl.rsp, .tbl.rsp tbody, .tbl.rsp tr, .tbl.rsp td{display:block;width:100%}
  .tbl.rsp tr{border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;padding:.4rem .2rem;background:#fff}
  .tbl.rsp td{border:0;padding:.28rem .7rem;display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);column-gap:1rem;text-align:right;align-items:start}
  .tbl.rsp td::before{content:attr(data-l);font-weight:700;color:var(--muted);font-size:.76rem;text-align:left;grid-column:1;grid-row:1 / span 6}
  .tbl.rsp td > *{grid-column:2}
  .tbl.rsp td.r{text-align:right}
  .tbl.rsp tfoot tr{background:var(--cream)}
}

/* ---------- Folio summary ---------- */
.sum-rows{display:flex;flex-direction:column;gap:.35rem;font-size:.92rem}
.sum-rows > div{display:flex;justify-content:space-between;gap:1rem}
.sum-rows .tot{border-top:1px dashed var(--line);padding-top:.55rem;margin-top:.25rem;font-weight:800;font-size:1.05rem}
.sum-rows .bal{font-family:var(--serif);font-size:1.35rem;font-weight:700}
.bal-box{border-radius:14px;padding:.9rem 1rem;background:linear-gradient(135deg,var(--wine-700),var(--wine-900));color:#fff;display:flex;justify-content:space-between;align-items:center;margin-top:.8rem}
.bal-box small{color:rgba(255,255,255,.7);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.bal-box b{font-family:var(--serif);font-size:1.5rem}
.bal-box.clear{background:linear-gradient(135deg,#1d8656,#146140)}

/* ---------- Guest header ---------- */
.ghead{display:flex;gap:.9rem;align-items:flex-start}
.ghead .av-lg{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--wine-600),var(--wine-800));color:var(--gold-200);font-family:var(--serif);font-weight:700;font-size:1.3rem;flex:none}
.ghead h2{font-size:1.3rem}
.meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;color:var(--ink-2);font-size:.86rem;margin-top:.3rem}
.meta span{display:inline-flex;align-items:center;gap:.3rem}
.meta .ic{width:15px;height:15px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.stay-strip{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;margin-top:.9rem}
.stay-strip small{display:block;font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stay-strip b{font-family:var(--serif);font-size:1.05rem}
.stay-strip .nn{text-align:center;font-size:.78rem;font-weight:800;color:var(--wine-700);background:#fff;border:1px solid var(--line);border-radius:99px;padding:.2rem .6rem}
.stay-strip > div:last-child{text-align:right}

/* ---------- Calendar (tape chart) ---------- */
.cal-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;max-height:72vh}
table.cal{border-collapse:separate;border-spacing:0;font-size:.8rem;min-width:100%}
.cal th,.cal td{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);height:46px;min-width:64px;padding:0;text-align:center}
.cal thead th{position:sticky;top:0;background:var(--cream);z-index:2;font-weight:700;padding:.35rem .2rem;line-height:1.15}
.cal thead th small{display:block;color:var(--muted);font-weight:600;font-size:.68rem}
.cal thead th.today{background:var(--gold-100);color:var(--gold-600)}
.cal .rcol{position:sticky;left:0;background:#fff;z-index:1;min-width:76px;text-align:left;padding:.3rem .55rem;font-family:var(--serif);font-weight:700;font-size:.95rem}
.cal .rcol small{display:block;font-family:var(--font);font-weight:600;font-size:.66rem;color:var(--muted)}
.cal thead .rcol{z-index:3;background:var(--cream)}
.cal td.free a{display:block;height:100%;width:100%}
.cal td.free a:hover{background:var(--gold-100)}
.cal td.wk{background:#fdfaf5}
.cal td.bar{padding:3px}
.cal .bk{display:flex;align-items:center;height:38px;padding:0 .5rem;border-radius:9px;font-weight:700;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-align:left}
.cal .bk-reserved{background:linear-gradient(90deg,#d9921f,#e9ad45);color:#3b2604}
.cal .bk-checked_in{background:linear-gradient(90deg,var(--wine-700),var(--wine-500))}
.cal .bk-checked_out{background:#d8d0c7;color:#4a3942}
.cal .bk:hover{filter:brightness(1.06)}

/* ---------- Toast / empty / modal ---------- */
.toast{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-radius:12px;margin-bottom:.9rem;font-weight:600;font-size:.9rem;border:1px solid;animation:up .25s ease}
.toast-ok{background:var(--ok-bg);color:#145c3c;border-color:#bfe3cf}
.toast-err{background:var(--bad-bg);color:#8e1d32;border-color:#f2c4cc}
.toast span{flex:1}
.toast button{background:none;border:0;color:inherit;opacity:.6;cursor:pointer;display:flex}
.empty{text-align:center;padding:2.2rem 1rem;color:var(--muted)}
.empty .empty-ic{width:64px;height:64px;border-radius:20px;margin:0 auto .8rem;display:grid;place-items:center;background:var(--gold-100);color:var(--gold-600)}
.empty .empty-ic .ic{width:30px;height:30px}
.empty h3{color:var(--ink);margin-bottom:.3rem}
dialog.modal{border:0;padding:0;border-radius:20px;width:min(520px,calc(100vw - 1.4rem));max-height:calc(100vh - 2rem);box-shadow:0 30px 80px rgba(29,7,19,.35);color:var(--ink)}
dialog.modal::backdrop{background:rgba(29,7,19,.5);backdrop-filter:blur(3px)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .5rem}
.modal-h h3{font-family:var(--serif);font-size:1.2rem;font-weight:600}
.modal-b{padding:.4rem 1.1rem 1.1rem}
.modal-f{display:flex;gap:.6rem;justify-content:flex-end;padding:0 1.1rem 1.1rem}
@media(max-width:640px){dialog.modal{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:22px 22px 0 0}}

/* ---------- Mini bar chart ---------- */
.bars{display:flex;align-items:flex-end;gap:.45rem;height:120px;padding-top:.5rem}
.bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;height:100%;justify-content:flex-end}
.bars .bar i{display:block;width:100%;max-width:34px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--gold-400),var(--gold-600));min-height:3px}
.bars .bar.t i{background:linear-gradient(180deg,var(--wine-500),var(--wine-700))}
.bars .bar small{font-size:.66rem;color:var(--muted);font-weight:700}
.bars .bar em{font-style:normal;font-size:.62rem;color:var(--ink-2);font-weight:700}

.eg-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;align-items:end;margin-bottom:.7rem;padding-bottom:.7rem;border-bottom:1px dashed var(--line)}
.eg-row .field:first-child{grid-column:1/-1}
@media(min-width:760px){.eg-row{grid-template-columns:2fr 1fr .8fr 1.4fr 1.6fr auto;border-bottom:0;padding-bottom:0}.eg-row .field:first-child{grid-column:auto}}
details > summary{list-style:none} details > summary::-webkit-details-marker{display:none}
details > summary.lbl{color:var(--wine-700)}
.photo-thumb{width:100%;max-width:220px;border-radius:12px;border:1px solid var(--line);display:block}
.id-preview{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.id-preview img{width:96px;height:66px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.pager{display:flex;gap:.4rem;justify-content:center;margin-top:1rem}
.stat-line{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px dashed var(--line-2);font-size:.9rem}
.stat-line:last-child{border-bottom:0}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--cream-2);padding:.1rem .4rem;border-radius:6px;font-size:.82rem}

/* ---------- Auth pages ---------- */
body.auth{min-height:100vh;display:grid;background:var(--wine-900)}
@media(min-width:900px){body.auth{grid-template-columns:1.05fr 1fr}}
.auth-art{display:none;position:relative;overflow:hidden;background:radial-gradient(80% 60% at 20% 10%,rgba(231,189,98,.25),transparent 60%),linear-gradient(160deg,var(--wine-700),var(--wine-950));color:#fff;padding:3rem}
@media(min-width:900px){.auth-art{display:flex;flex-direction:column;justify-content:space-between}}
.auth-art h2{font-family:var(--serif);font-size:2.6rem;line-height:1.05;color:#fff;font-weight:600;letter-spacing:-.02em;max-width:12ch}
.auth-art h2 em{color:var(--gold-400);font-style:italic}
.auth-art p{color:rgba(255,255,255,.72);max-width:38ch}
.auth-keys{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.auth-keys span{border:1px solid rgba(231,189,98,.35);color:var(--gold-200);border-radius:99px;padding:.3rem .75rem;font-size:.8rem;font-weight:600}
.auth-box{background:var(--cream);display:flex;align-items:center;justify-content:center;padding:2rem 1.2rem}
.auth-card{width:100%;max-width:420px}
.auth-card .brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;color:var(--ink)}
.auth-card .brand b{font-family:var(--serif);font-size:1.5rem;font-weight:700}
.auth-card h1{font-family:var(--serif);font-size:1.9rem;font-weight:600;letter-spacing:-.02em}
.auth-card .sub{color:var(--muted);margin:.3rem 0 1.4rem}
.auth-alt{text-align:center;margin-top:1.2rem;font-size:.9rem;color:var(--muted)}
.demo-box{margin-top:1rem;padding:.8rem .9rem;border-radius:14px;border:1px dashed var(--gold-500);background:var(--gold-100);font-size:.86rem;color:#6a4a0e}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.bnav,.sheet,.app-foot,.banner,.no-print,.toast{display:none!important}
  .main{margin:0!important;padding:0!important}
  .content{padding:0!important;max-width:none}
  body{background:#fff}
  .card{box-shadow:none;border:0;padding:0}
}

/* ---- Online (RukJao network) ---- */
.badge.b-online{background:#fde9e3;color:#a62c17}
.badge.b-online .ic{width:12px;height:12px}
.online-strip{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;padding:.7rem .9rem;border-radius:12px;background:linear-gradient(90deg,#fff3ee,#fff9ef);border:1px solid #f6d5c8;font-size:.84rem;color:var(--ink-2)}
.online-strip span{display:inline-flex;gap:.35rem;align-items:center}
.online-strip .ic{width:15px;height:15px;color:#e5482e}
.sb-count.hot{background:#e5482e}
.listing-hero{background:linear-gradient(135deg,#e5482e,#a62c17 60%,#4a1f14);color:#fff;border:0}
.listing-hero h2,.listing-hero h3{color:#fff}
.lst-status{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:99px;font-weight:800;font-size:.8rem;background:rgba(255,255,255,.16)}
.lst-status i{width:9px;height:9px;border-radius:50%;background:#ccc}
.lst-status.live i{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.25)}
.lst-status.pending i{background:#fbbf24}
.lst-status.hidden i,.lst-status.off i{background:#d1d5db}
.checklist{display:grid;gap:.45rem;margin:.6rem 0 0;padding:0;list-style:none}
.checklist li{display:flex;gap:.5rem;align-items:center;font-weight:600;font-size:.9rem}
.checklist li .ic{width:18px;height:18px;padding:2px;border-radius:50%}
.checklist li.ok .ic{background:#dcfce7;color:#15803d}
.checklist li.no .ic{background:#fee2e2;color:#b91c1c}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.photo-grid .ph{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--cream-2)}
.photo-grid .ph img{width:100%;height:100%;object-fit:cover}
.photo-grid .ph .cover-tag{position:absolute;left:.4rem;top:.4rem;background:#e5482e;color:#fff;font-size:.66rem;font-weight:800;padding:.12rem .45rem;border-radius:99px}
.photo-grid .ph .ph-act{position:absolute;right:.35rem;bottom:.35rem;display:flex;gap:.3rem}
.photo-grid .ph .ph-act button{width:30px;height:30px;border-radius:9px;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.photo-grid .ph .ph-act button .ic{width:15px;height:15px}
.photo-grid .ph .ph-act button.del{color:#b91c1c}
.amen-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.45rem}
.amen-pick label{display:flex;gap:.5rem;align-items:center;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:.88rem;cursor:pointer;background:#fff}
.amen-pick label:has(input:checked){border-color:#e5482e;background:#fff5f1}
.amen-pick input{accent-color:#e5482e;width:17px;height:17px}
.rt-photo{display:flex;gap:.8rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--line)}
.rt-photo:first-of-type{border-top:0}
.rt-photo .thumb{width:84px;height:63px;border-radius:10px;overflow:hidden;background:var(--cream-2);flex:none;display:grid;place-items:center;color:var(--muted)}
.rt-photo .thumb img{width:100%;height:100%;object-fit:cover}
.ops-list{display:grid;gap:.8rem}
.ops-card{background:#fff;border:1px solid var(--line);border-left:5px solid #f6a623;border-radius:14px;padding:.9rem 1rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ops-card.ok{border-left-color:#15803d}
.ops-card.late{border-left-color:#c0262d}
.ops-top{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}
.ops-top > div:first-child{min-width:0}
.ops-date{text-align:center;background:var(--cream-2);border-radius:12px;padding:.35rem .6rem;flex:none}
.ops-date b{display:block;font-size:1.05rem}
.ops-date span{font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase}
.ops-date.today{background:#e5482e;color:#fff}.ops-date.today span{color:#fff}
.ops-mid{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.6rem 0;color:var(--ink-2)}
.ops-mid span{display:inline-flex;gap:.35rem;align-items:center}
.ops-mid .ic{width:15px;height:15px;color:var(--muted)}
.ops-act{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ops-act .btn .ic{width:15px;height:15px}
.ops-f{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-left:auto}
.ops-f input[name=note]{min-width:180px;padding:.4rem .6rem;min-height:36px}
@media(max-width:640px){.ops-f{margin-left:0;width:100%}.ops-f input[name=note]{flex:1;min-width:0}}
/* ---- Team onboarding form ---- */
.onb{max-width:860px}
.onb-s h3{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.onb-s h3 i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e5482e,#a62c17);color:#fff;font-size:.9rem;font-family:var(--font)}
.onb-s h3 .hint{font-family:var(--font);font-size:.78rem;font-weight:600}
.rt-row{display:grid;grid-template-columns:1.4fr 1fr .8fr .8fr;gap:.6rem;padding:.6rem 0;border-bottom:1px dashed var(--line)}
@media(max-width:640px){.rt-row{grid-template-columns:1fr 1fr}.rt-row .field:first-child{grid-column:1/-1}}
.photo-drop{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.4rem 1rem;border:2px dashed #f0b9a8;border-radius:16px;background:#fff7f3;cursor:pointer;text-align:center;color:#a62c17}
.photo-drop input{position:absolute;opacity:0;width:1px;height:1px}
.photo-drop .ic{width:34px;height:34px}
.photo-drop span{font-size:.82rem;color:var(--muted)}
.photo-prev{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.4rem;margin-top:.7rem}
.photo-prev img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.photo-prev img.cv{outline:3px solid #e5482e;outline-offset:-3px}
.model-pick{display:grid;gap:.6rem}
@media(min-width:700px){.model-pick{grid-template-columns:1fr 1fr}}
.model-pick label{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:#fff}
.model-pick label:has(input:checked){border-color:#e5482e;background:#fff5f1}
.model-pick input{margin-top:3px;accent-color:#e5482e;width:18px;height:18px;flex:none}
.model-pick b{display:block}
.model-pick small{color:var(--muted);font-size:.82rem;line-height:1.4}
.onb-foot{position:sticky;bottom:0;z-index:5;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;margin:1rem 0 2rem;box-shadow:0 -6px 24px rgba(0,0,0,.06)}
@media(max-width:640px){.onb-foot .btn{width:100%}}