@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Hebrew:wght@400;600;700;800&display=swap");

/* Shared design system (from the approved demo, docs/demo.html). Square corners, Manrope.
   Layout: demo bar on top, then either the tourist booking flow (form + sticky summary) or the owner panel (side nav + work area). Square corners everywhere. */
:root{
  --bg:#f3f6f7; --surface:#ffffff; --sunk:#e9eef1; --ink:#0d1b24; --muted:#56666f; --line:#d3dce1;
  --accent:#0a6a85; --accent-soft:#e2f0f4; --on-accent:#ffffff;
  --ok:#22744a; --ok-soft:#e3f2ea; --warn:#9a5b06; --warn-soft:#fbefd9; --bad:#b42318; --bad-soft:#fbe6e4;
  --f-display:"Manrope","Noto Sans Hebrew","Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"Manrope","Noto Sans Hebrew","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Manrope","Noto Sans Hebrew","Segoe UI",Roboto,Arial,sans-serif;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s1-soft:#e6f0fb; --s2-soft:#fdeee7; --s3-soft:#e3f6ee;
  --grid:#e4eaee; --hatch:repeating-linear-gradient(135deg,var(--sunk) 0 6px,var(--line) 6px 7px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a1318; --surface:#101d24; --sunk:#0d181e; --ink:#e4edf1; --muted:#8ea2ac; --line:#21333d;
  --accent:#43b2d1; --accent-soft:#12303a; --on-accent:#03202a;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s1-soft:#13263a; --s2-soft:#331a10; --s3-soft:#0f2a20; --grid:#1b2b34;
  --ok:#5cc58c; --ok-soft:#10291c; --warn:#e3a54a; --warn-soft:#2c210c; --bad:#f08077; --bad-soft:#331512; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a1318; --surface:#101d24; --sunk:#0d181e; --ink:#e4edf1; --muted:#8ea2ac; --line:#21333d;
  --accent:#43b2d1; --accent-soft:#12303a; --on-accent:#03202a;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s1-soft:#13263a; --s2-soft:#331a10; --s3-soft:#0f2a20; --grid:#1b2b34;
  --ok:#5cc58c; --ok-soft:#10291c; --warn:#e3a54a; --warn-soft:#2c210c; --bad:#f08077; --bad-soft:#331512; color-scheme:dark}
*{box-sizing:border-box;border-radius:0!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:1.75rem;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.2rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-variant-numeric:tabular-nums;font-weight:600}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:1120px;margin:0 auto}
.label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}

/* demo bar */
.demobar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-block:14px;border-bottom:1px solid var(--line);margin-bottom:24px}
.demobar .tag{font-family:var(--f-mono);font-size:.75rem;background:var(--ink);color:var(--bg);padding:3px 8px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--surface)}
.seg button{border:0;background:none;padding:8px 14px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

/* business header */
.biz{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.langs{display:flex;gap:4px;flex-wrap:wrap}
.langs button{border:1px solid var(--line);background:var(--surface);padding:4px 9px;font-family:var(--f-mono);font-size:.78rem}
.langs button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}

/* stepper */
.steps{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--line);background:var(--surface);overflow-x:auto}
.steps div{flex:1 0 auto;padding:10px 14px;font-size:.85rem;font-weight:600;color:var(--muted);border-inline-end:1px solid var(--line);white-space:nowrap}
.steps div:last-child{border-inline-end:0}
.steps .on{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.steps .done{color:var(--ok)}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media (max-width:860px){.grid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:18px;min-width:0}
.summary{position:sticky;top:16px}

/* type tabs */
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--line)}
.types button{border:0;border-inline-end:1px solid var(--line);background:var(--surface);padding:16px 14px;text-align:left;display:flex;flex-direction:column;gap:4px}
.types button:last-child{border-inline-end:0}
.types .k{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.types b{font-family:var(--f-display);font-size:1.1rem}
.types span{font-size:.85rem;color:var(--muted)}
.types .fr{margin-top:6px;font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:.95rem}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.mod{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.mod .mh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.mod .mb{padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.mod.off{opacity:.55}
.mod .it{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.mod .it:last-child{border-bottom:0}
.switch{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600}
.switch input{accent-color:var(--accent);width:18px;height:18px}
.types button[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 3px 0 var(--accent)}
@media (max-width:520px){.types{grid-template-columns:1fr}.types button{border-right:0;border-bottom:1px solid var(--line)}.types button:last-child{border-bottom:0}}

/* choice cards */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.choice{border:1px solid var(--line);background:var(--surface);padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px}
.choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.choice[disabled]{opacity:.45;cursor:not-allowed}
.choice .t{font-family:var(--f-display);font-weight:700}
.choice .p{font-family:var(--f-display);font-weight:700;font-size:1.1rem}
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:2px 7px;text-transform:uppercase}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.info{background:var(--accent-soft);color:var(--accent)}
.pill.neutral{background:var(--sunk);color:var(--muted)}

.row{display:flex;flex-wrap:wrap;gap:14px}
.field{display:flex;flex-direction:column;gap:5px;flex:1 1 180px;min-width:0}
.field label{font-size:.85rem;font-weight:600}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  border:1px solid var(--line);background:var(--surface);padding:9px 10px;width:100%;min-width:0}
textarea{font-family:var(--f-mono);font-size:.82rem;line-height:1.55;min-height:340px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);background:var(--surface)}
.check input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.check .r{margin-inline-start:auto;font-weight:600;white-space:nowrap}

.btn{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);padding:11px 18px;font-weight:700;font-family:var(--f-display)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.btn.small{padding:6px 10px;font-size:.85rem}
.actions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}

/* summary */
.sumlist{display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.sumlist div{display:flex;justify-content:space-between;gap:12px}
.sumlist div span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.total{border-top:1px solid var(--line);padding-top:10px;font-weight:700}
.deposit{background:var(--ink);color:var(--bg);padding:12px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.deposit b{font-family:var(--f-display);font-size:1.35rem;font-variant-numeric:tabular-nums}

/* contract */
.contract{border:1px solid var(--line);background:var(--sunk);padding:22px;max-height:440px;overflow:auto;font-size:.92rem}
.contract .doc{max-width:64ch;display:flex;flex-direction:column;gap:10px}
.contract h3{font-size:.95rem;margin-top:6px}
.contract .head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:10px}
.contract mark{background:var(--accent-soft);color:var(--ink);padding:0 3px}
.note{font-size:.88rem;padding:10px 12px;border-inline-start:3px solid var(--accent);background:var(--accent-soft)}

/* pay methods */
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}

/* done */
.done-box{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:24px;align-items:start}
@media (max-width:640px){.done-box{grid-template-columns:minmax(0,1fr)}}
.mail{border:1px solid var(--line);background:var(--surface)}
.mail .h{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.85rem;display:flex;flex-direction:column;gap:2px}
.mail .b{padding:14px;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.att{display:flex;gap:8px;flex-wrap:wrap}
.att span{border:1px solid var(--line);padding:5px 9px;font-size:.8rem;font-family:var(--f-mono);background:var(--sunk)}
.qr{width:160px;max-width:100%;aspect-ratio:1;background:var(--surface);border:1px solid var(--line);padding:8px}

/* owner panel */
.owner{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:760px){.owner{grid-template-columns:minmax(0,1fr)}}
.nav{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface)}
@media (max-width:760px){.nav{flex-direction:row;overflow-x:auto}}
.nav button{border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:11px 14px;font-weight:600;white-space:nowrap}
.nav button:last-child{border-bottom:0}
.nav button[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{border:1px solid var(--line);background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:4px}
.stat b{font-family:var(--f-display);font-size:1.6rem;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunk)}
tr.new td{background:var(--ok-soft)}
.dep{border:1px solid var(--line);background:var(--surface)}
.dep .top{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.dep .man{padding:10px 14px;font-size:.88rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 18px}
.confirmbox{border:2px solid var(--bad);background:var(--bad-soft);padding:14px;display:flex;flex-direction:column;gap:10px}
.toggles{display:flex;flex-direction:column;gap:8px}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:12px 16px;font-weight:600;max-width:calc(100% - 32px);z-index:20}
.tplbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags code{font-family:var(--f-mono);font-size:.75rem;border:1px solid var(--line);padding:2px 6px;background:var(--sunk)}

.owner{grid-template-columns:220px minmax(0,1fr)}
@media (max-width:760px){.owner{grid-template-columns:minmax(0,1fr)}}
.navsec{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--muted);padding:12px 14px 4px;border-bottom:0}
@media (max-width:760px){.navsec{display:none}}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.box{border:1px solid var(--line);background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:.9rem;flex-wrap:wrap}
.li:last-child{border-bottom:0;padding-bottom:0}
.wx{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wx div{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);padding:10px;font-size:.88rem}
.delta{font-size:.78rem;font-weight:700}.delta.up{color:var(--ok)}.delta.down{color:var(--warn)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;display:inline-block}
.legend i.dash{border:2px dashed var(--muted);width:14px;height:12px}
.chart{width:100%;overflow-x:auto}.chart svg{width:100%;min-width:420px;height:auto;display:block}
.ax{font-family:var(--f-body);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart rect[data-tip]:hover{opacity:.82}
.hbars{display:flex;flex-direction:column;gap:9px}
.hb{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:.88rem}
.hb .tr{height:12px;background:var(--sunk)}.hb .tr div{height:100%}
.hb b{text-align:right}
.tt{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;background:var(--ts);color:var(--ink);box-shadow:inset 3px 0 0 var(--tc)}
.calbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.calwrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
.cal{display:grid;min-width:980px}
.ch{padding:9px 8px;font-size:.78rem;font-weight:800;letter-spacing:.04em;background:var(--sunk);border-bottom:1px solid var(--line);border-right:1px solid var(--line);cursor:pointer}
.ch:first-child{cursor:default}
.ch.now{background:var(--accent-soft);color:var(--accent)}
.cr{padding:9px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:.85rem;background:var(--surface)}
.cr .muted{font-size:.74rem}
.cc{padding:5px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-height:64px}
.cc.now{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.cc.off,.lane.off{background:var(--hatch);align-items:center;justify-content:center}
.bk{border:0;background:var(--ts);box-shadow:inset 3px 0 0 var(--tc);text-align:left;padding:4px 6px 4px 9px;font-size:.74rem;line-height:1.25;display:flex;flex-direction:column;gap:1px;width:100%;color:var(--ink)}
.bk span:first-child{font-weight:800}
.bk span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk.pend{outline:2px dashed var(--tc);outline-offset:-2px}
.bk.sel{outline:2px solid var(--ink);outline-offset:-2px}
.tl{min-width:900px}
.tlh,.tlr{display:grid;grid-template-columns:150px minmax(0,1fr)}
.hrs{display:grid;grid-template-columns:repeat(14,1fr);background:var(--sunk);border-bottom:1px solid var(--line)}
.hrs span{font-size:.74rem;font-weight:700;padding:8px 4px;border-left:1px solid var(--line);color:var(--muted)}
.tlh>span{background:var(--sunk);border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.lane{position:relative;border-bottom:1px solid var(--line);min-height:58px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/14 - 1px),var(--grid) calc(100%/14 - 1px),var(--grid) calc(100%/14))}
.tb{position:absolute;top:6px;bottom:6px;display:flex;padding-right:2px}
.tb .bk{height:100%}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.fcard{border:1px solid var(--line);background:var(--surface);padding:14px;text-align:left;display:flex;flex-direction:column;gap:8px}
.fcard.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.util{height:8px;background:var(--sunk);display:block}.util span{display:block;height:100%;background:var(--accent)}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filters .field{flex:1 1 160px}
.codebox{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--sunk);padding:10px 12px;flex-wrap:wrap}
.codebox code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;overflow-wrap:anywhere;flex:1 1 240px;min-width:0}
.linkbtn{border:0;background:none;padding:0;font-weight:800;color:var(--accent);text-align:left}
.linkbtn:hover{text-decoration:underline}
.tip{position:fixed;z-index:30;background:var(--ink);color:var(--bg);padding:6px 9px;font-size:.8rem;font-weight:600;pointer-events:none;max-width:260px}
.stat .delta{margin-top:2px}
@media (prefers-reduced-motion:no-preference){.fade{animation:f .25s ease-out}@keyframes f{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* ---- app additions ---- */
a{color:var(--accent)}
.wrap-wide{max-width:1280px;margin:0 auto}
.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-block:12px;border-bottom:1px solid var(--line);margin-bottom:20px}
.brand{font-family:var(--f-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.flash{padding:10px 14px;border:1px solid var(--line);background:var(--surface);margin-bottom:14px;font-weight:600}
.flash.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.flash.err{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.flash.info{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.err-text{color:var(--bad);font-size:.85rem}
.empty{border:1px dashed var(--line);padding:24px;text-align:center;color:var(--muted)}
.inline-form{display:inline}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.auth-box{max-width:420px;margin:8vh auto;display:flex;flex-direction:column;gap:16px}
.pager{display:flex;gap:6px;flex-wrap:wrap}
.pager a,.pager span{border:1px solid var(--line);padding:5px 10px;text-decoration:none;color:var(--ink);background:var(--surface)}
.pager .cur{background:var(--ink);color:var(--bg)}
.imp-bar{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);padding:8px 12px;font-weight:700;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
dialog.confirm{border:2px solid var(--ink);background:var(--surface);color:var(--ink);padding:20px;max-width:420px}
dialog.confirm::backdrop{background:rgba(0,0,0,.35)}