:root{
  --green:#007935; --green2:#006a2f; --green-dim:#eaf5ee; --green-border:#bfe3cd;
  --text:#1a1a1a; --text2:#6b6b6b; --text3:#9aa39b; --bg:#f4f5f3; --card:#fff;
  --sep:#ececec; --blue:#2563eb; --red:#c0392b; --grey:#8a8a8a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);overscroll-behavior:none;
  font-family:'Figtree','Segoe UI',-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.view{min-height:100dvh;display:flex;flex-direction:column}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer}
a{color:var(--green);text-decoration:none}

/* ── Login ── */
#login-view{align-items:center;justify-content:center;padding:24px;background:
  radial-gradient(120% 70% at 50% 0,#e7f3ec 0,var(--bg) 60%)}
.login-box{width:100%;max-width:380px;background:var(--card);border-radius:22px;
  padding:38px 26px 30px;box-shadow:0 10px 40px rgba(0,40,20,.08);text-align:center}
.login-logo{height:48px;margin-bottom:16px}
.login-box h1{margin:0 0 4px;font-size:23px;font-weight:800;letter-spacing:-.01em}
.login-sub{margin:0 0 26px;color:var(--text2);font-size:14px}
#login-form{display:flex;flex-direction:column;gap:12px}
#login-form input{width:100%;padding:15px 16px;border-radius:13px;border:1.5px solid #e3e3e3;
  background:#f8f8f8;font-size:16px;outline:none;transition:.15s;font-family:inherit}
#login-form input:focus{border-color:var(--green);background:#fff}
#lg-btn{padding:15px;border:none;border-radius:13px;background:var(--green);color:#fff;
  font-size:16px;font-weight:700;margin-top:4px;transition:.15s}
#lg-btn:hover{background:var(--green2)} #lg-btn:disabled{opacity:.6}
.err{color:var(--red);font-size:13.5px;min-height:18px;font-weight:600}
.login-foot{margin-top:24px;color:var(--text3);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:max(12px,env(safe-area-inset-top)) 14px 12px;background:#fff;
  border-bottom:1px solid var(--sep)}
.topbar-logo{height:26px}
.topbar-title{flex:1;font-size:17px;font-weight:800;letter-spacing:-.01em}
.icon-btn{width:38px;height:38px;border:none;background:var(--bg);border-radius:50%;
  font-size:18px;color:var(--text2);display:flex;align-items:center;justify-content:center}
#back-btn{font-size:26px;line-height:1}
#screen{flex:1;padding:16px 14px calc(20px + env(safe-area-inset-bottom))}

/* ── Home grid ── */
.home-hint{color:var(--text2);font-size:13px;margin:2px 2px 14px}
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app-tile{position:relative;background:var(--card);border:1px solid rgba(0,0,0,.04);
  border-radius:18px;padding:18px 8px 14px;display:flex;flex-direction:column;align-items:center;
  gap:9px;box-shadow:0 2px 10px rgba(0,40,20,.05);transition:transform .1s}
.app-tile:active{transform:scale(.96)}
.app-ic{font-size:30px;line-height:1}
.app-t{font-size:12.5px;font-weight:600;color:var(--text);text-align:center;line-height:1.2}
.app-tile.soon{opacity:.5}
.app-soon{position:absolute;top:7px;right:7px;font-size:8.5px;font-weight:800;
  background:var(--green-dim);color:var(--green);padding:2px 6px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.04em}

.loading,.empty{text-align:center;color:var(--text3);padding:40px 0;font-size:14px}

/* ── Bookings ── */
.bk-dates{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.chip{flex-shrink:0;padding:9px 16px;border-radius:30px;border:1.5px solid var(--sep);
  background:#fff;font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap}
.chip.on{background:var(--green-dim);border-color:var(--green);color:var(--green)}
.bk-list{display:flex;flex-direction:column;gap:10px}
.bk-card{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:15px;
  padding:12px 14px;box-shadow:0 2px 10px rgba(0,40,20,.05);border:1px solid rgba(0,0,0,.04)}
.bk-card:active{background:#fafafa}
.bk-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--green-border)}
.bk-av.init{background:var(--green-dim);color:var(--green);display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:18px}
.bk-mid{flex:1;min-width:0}
.bk-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-meta{font-size:12.5px;color:var(--text2);margin-top:2px}
.st{font-size:11px;font-weight:800;padding:5px 10px;border-radius:20px;white-space:nowrap}
.st-green{background:var(--green-dim);color:var(--green)}
.st-blue{background:#e8f0fe;color:var(--blue)}
.st-red{background:#fdecea;color:var(--red)}
.st-grey{background:#f0f0f0;color:var(--grey)}

/* ── Detail sheet ── */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;
  animation:fade .15s}
@keyframes fade{from{opacity:0}}
.sheet-card{width:100%;background:#fff;border-radius:22px 22px 0 0;padding:10px 20px
  calc(20px + env(safe-area-inset-bottom));animation:up .22s cubic-bezier(.2,.8,.2,1);
  max-height:92vh;overflow-y:auto}
@keyframes up{from{transform:translateY(100%)}}
.sheet-grab{width:40px;height:4px;border-radius:4px;background:#ddd;margin:2px auto 16px}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sheet-rows{display:flex;flex-direction:column}
.srow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f1f1f1;
  font-size:14px;color:var(--text2)}
.srow b{color:var(--text);font-weight:700}
.sheet-actions{display:flex;gap:8px;margin:18px 0 10px}
.act{flex:1;padding:13px;border:none;border-radius:12px;font-size:14px;font-weight:700;color:#fff}
.act-green{background:var(--green)} .act-blue{background:var(--blue)} .act-red{background:var(--red)}
.act:disabled{opacity:.5}
.sheet-close{width:100%;padding:13px;border:none;border-radius:12px;background:var(--bg);
  color:var(--text2);font-size:14px;font-weight:700}

/* ── Bookings: insights header ── */
.ins{background:var(--card);border-radius:15px;box-shadow:0 2px 10px rgba(0,40,20,.05);
  border:1px solid rgba(0,0,0,.04);margin-bottom:12px;overflow:hidden}
.ins-bar{display:flex;align-items:center;gap:7px;padding:13px 15px;cursor:pointer;font-size:13.5px;font-weight:700}
.ins-bar .mut{color:var(--text3);font-weight:600}
.ins-sep{color:#dcdcdc}
.ins-chev{margin-left:auto;color:var(--text3);transition:transform .2s;font-size:12px}
.ins.open .ins-chev{transform:rotate(180deg)}
.ins-body{display:none;padding:2px 15px 16px;border-top:1px solid #f1f1f1}
.ins.open .ins-body{display:block}
.ins-h{font-size:10.5px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 9px}
.abar{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.abar-name{width:92px;font-weight:600;white-space:nowrap}
.abar-track{flex:1;height:8px;background:#f0f0f0;border-radius:6px;overflow:hidden}
.abar-fill{height:100%;background:var(--green);border-radius:6px;min-width:2px}
.abar-val{width:28px;text-align:right;font-weight:700;font-size:12.5px}
.slots{display:flex;gap:3px;align-items:flex-end;height:52px}
.slotcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.slotcol .bar{width:100%;background:var(--green-dim);border-radius:3px 3px 0 0;min-height:3px}
.slotcol.on .bar{background:var(--green)}
.slotcol .t{font-size:7.5px;color:var(--text3);transform:rotate(-60deg);transform-origin:center;white-space:nowrap}
.slot-clear{display:inline-block;margin-top:10px;font-size:12px;color:var(--green);font-weight:700}

/* ── FAB ── */
.fab{position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));width:54px;height:54px;
  border-radius:50%;background:var(--green);color:#fff;border:none;font-size:30px;line-height:1;
  box-shadow:0 6px 20px rgba(0,121,53,.4);z-index:30;display:flex;align-items:center;justify-content:center}
.fab:active{transform:scale(.94)}

/* ── Add/Edit form ── */
.form{display:flex;flex-direction:column;gap:14px;margin:4px 0}
.f-row{display:flex;gap:10px}
.f-field{flex:1;display:flex;flex-direction:column;gap:6px}
.f-field label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.form input,.form textarea{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #e3e3e3;
  background:#f8f8f8;font-size:16px;font-family:inherit;outline:none}
.form input:focus,.form textarea:focus{border-color:var(--green);background:#fff}
.form textarea{resize:none;min-height:56px}
.chips-wrap{display:flex;gap:7px;flex-wrap:wrap}
.fchip{padding:9px 13px;border-radius:11px;border:1.5px solid #e3e3e3;background:#f8f8f8;
  font-size:13.5px;font-weight:700;color:var(--text2)}
.fchip.on{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.pax-step{display:flex;align-items:center;gap:20px;justify-content:center;padding:4px 0}
.pax-step button{width:42px;height:42px;border-radius:50%;border:1.5px solid #e3e3e3;background:#fff;font-size:22px;color:var(--green)}
.pax-step b{font-size:24px;min-width:30px;text-align:center}
.form-save{padding:15px;border:none;border-radius:13px;background:var(--green);color:#fff;font-size:16px;font-weight:700}
.form-save:disabled{opacity:.5}
.sheet-title{font-size:18px;font-weight:800;margin:2px 0 10px}
.act-edit{flex:1;padding:13px;border:1.5px solid var(--green);border-radius:12px;background:#fff;color:var(--green);font-size:14px;font-weight:700}

/* ── Bookings: simple dashboard tiles ── */
.dash{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.dtile{background:var(--card);border-radius:15px;padding:15px 16px;box-shadow:0 2px 10px rgba(0,40,20,.05);border:1px solid rgba(0,0,0,.04)}
.dtile .num{font-size:28px;font-weight:800;color:var(--green);line-height:1}
.dtile .lab{font-size:11.5px;color:var(--text2);font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:.04em}
.dwide{grid-column:1/-1}
.dwide .dh{font-size:11px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.dabar{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.dabar:last-child{margin-bottom:0}
.dabar-n{width:96px;font-weight:600;white-space:nowrap}
.dabar-t{flex:1;height:8px;background:#f0f0f0;border-radius:6px;overflow:hidden}
.dabar-f{height:100%;background:var(--green);border-radius:6px;min-width:2px}
.dabar-v{width:26px;text-align:right;font-weight:700;font-size:12.5px}
.tbars{display:flex;gap:3px;align-items:flex-end;height:48px}
.tcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.tcol .b{width:100%;background:var(--green);border-radius:3px 3px 0 0;min-height:3px}
.tcol.on .b{background:#04401f}
.tclear{text-align:center;margin-top:10px;font-size:12px;color:var(--green);font-weight:700}
.tcol .x{font-size:7.5px;color:var(--text3);transform:rotate(-60deg);white-space:nowrap}

/* ── Add/Edit: booking-page-style controls ── */
.fhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fhead .bk{width:38px;height:38px;border-radius:50%;border:none;background:var(--bg);font-size:24px;color:var(--text2);flex-shrink:0}
.fhead h2{font-size:20px;font-weight:800}
.fsec{background:var(--card);border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,40,20,.05);border:1px solid rgba(0,0,0,.04)}
.fsec-h{font-size:11px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:13px;text-align:center}
.paxs{display:flex;align-items:center;justify-content:center;gap:30px}
.paxb{width:46px;height:46px;border-radius:50%;border:2px solid var(--sep);background:#fff;color:var(--text);font-size:26px;display:flex;align-items:center;justify-content:center}
.paxb:active{border-color:var(--green);color:var(--green)}
.paxc{font-size:36px;font-weight:800;min-width:54px;text-align:center}
.dater{display:flex;align-items:center;justify-content:center;gap:16px}
.datd{text-align:center;min-width:128px}
.datday{font-size:21px;font-weight:800;line-height:1.1}
.datsub{font-size:13px;color:var(--text2);margin-top:2px}
.datar{width:42px;height:42px;border-radius:50%;border:2px solid var(--sep);background:#fff;font-size:20px;color:var(--green);display:flex;align-items:center;justify-content:center}
.datar:disabled{opacity:.3;color:var(--text3)}
.apills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.apill{padding:10px 18px;border-radius:30px;border:2px solid var(--sep);background:#f8f8f8;font-size:13.5px;font-weight:700;color:var(--text2)}
.apill.on{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sslot{padding:14px 4px;border-radius:12px;background:#f5f5f5;text-align:center;border:2px solid transparent;font-size:15px;font-weight:800;color:var(--text)}
.sslot.on{background:var(--green);color:#fff}
.finput{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #e3e3e3;background:#f8f8f8;font-size:16px;font-family:inherit;outline:none;margin-bottom:10px}
.finput:focus{border-color:var(--green);background:#fff}
.finput:last-child{margin-bottom:0}
.frow2{display:flex;gap:10px}.frow2 .finput{flex:1}
.fsave{width:100%;padding:16px;border:none;border-radius:14px;background:var(--green);color:#fff;font-size:16px;font-weight:700;margin-top:2px}
.fsave:disabled{opacity:.5}

/* ── Area distribution: stacked bar ── */
.stack{display:flex;height:15px;border-radius:8px;overflow:hidden;background:#f0f0f0;margin-bottom:13px}
.stack .seg{height:100%}
.legend{display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;gap:10px 14px;margin-top:2px}
.lg{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text2)}
.lg i{width:11px;height:11px;border-radius:3px;flex-shrink:0;display:inline-block}
.lg b{font-weight:800;color:var(--text)}

/* ── New booking: guest search/picker ── */
.s-res{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.s-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;background:#f8f8f8;border:1.5px solid #eee}
.s-card:active{background:#f0f0f0}
.s-go{color:var(--text3);font-size:20px;font-weight:700}
.s-new{width:100%;padding:15px;border:1.5px dashed var(--green-border);border-radius:14px;background:#fff;color:var(--green);font-size:15px;font-weight:700}
.gfor{display:flex;align-items:center;gap:12px}

/* ── Search result tags ── */
.s-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.s-tag{font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.s-tag.seg{background:var(--green-dim);color:var(--green)}
.s-tag.brk{background:#fdf1dc;color:#9a6b00}
.s-pref{font-size:11.5px;color:var(--text2);margin-top:5px;font-weight:600}

/* ── JAL AI chat ── */
.ai-msgs{display:flex;flex-direction:column;gap:10px;padding-bottom:84px;min-height:calc(100dvh - 200px)}
.ai-msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.ai-msg.user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:5px}
.ai-msg.ai{align-self:flex-start;background:#fff;border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 10px rgba(0,40,20,.05);border-bottom-left-radius:5px}
.ai-tbl{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px}
.ai-tbl th,.ai-tbl td{border:1px solid #eee;padding:6px 8px;text-align:left}
.ai-tbl th{background:var(--green-dim);color:var(--green);font-weight:700}
.ai-msg code{background:#f0f0f0;padding:1px 5px;border-radius:5px;font-size:13px}
.ai-h{font-weight:800;margin:7px 0 2px}
.ai-li{margin:2px 0}
.ai-err{color:var(--red);font-weight:600}
.ai-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;align-items:flex-end;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--sep)}
.ai-bar textarea{flex:1;resize:none;border:1.5px solid #e3e3e3;border-radius:18px;padding:11px 14px;
  font-size:16px;font-family:inherit;outline:none;max-height:120px;background:#f8f8f8;line-height:1.35}
.ai-bar textarea:focus{border-color:var(--green);background:#fff}
.ai-bar button{width:42px;height:42px;flex-shrink:0;border:none;border-radius:50%;background:var(--green);color:#fff;font-size:21px;font-weight:800}
.ai-bar button:disabled{opacity:.5}
.ai-empty{text-align:center;padding:46px 20px 20px;color:var(--text2)}
.ai-logo{font-size:46px}
.ai-hi{font-size:22px;font-weight:800;color:var(--text);margin-top:6px}
.ai-sub{font-size:14px;margin:8px auto 22px;max-width:300px;line-height:1.55}
.ai-sugs{display:flex;flex-direction:column;gap:8px;max-width:290px;margin:0 auto}
.ai-sug{padding:12px;border:1.5px solid var(--sep);border-radius:13px;background:#fff;font-size:14px;font-weight:600;color:var(--green)}
.ai-dots{display:inline-flex;gap:4px;padding:3px 0}
.ai-dots i{width:7px;height:7px;border-radius:50%;background:#bbb;animation:aidot 1s infinite}
.ai-dots i:nth-child(2){animation-delay:.15s} .ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,60%,100%{opacity:.3}30%{opacity:1}}