/* bedek-kal — mobile app shell.
   Layout: mobile app shell — sticky header + room rail, content views (plan / list / export), fixed bottom tab bar; finding detail is a full-screen page with photo carousel and prev/next footer */
:root{
  --bg:#eef1f4; --surface:#ffffff; --surface2:#f5f7f9; --ink:#132029; --ink2:#5d6c77; --ink3:#8b98a1; --line:#e2e7ec;
  --accent:#0b7a6e; --accentSoft:#dcf0ec; --accentInk:#ffffff;
  --wall:#2b3a45; --room:#ffffff; --roomHi:#e2f3ef;
  --open:#d0601f; --openBg:#fdeee4; --fixed:#2e8540; --fixedBg:#e3f3e5; --notfixed:#c62e25; --notfixedBg:#fbe4e2; --partial:#a77400; --partialBg:#f9efd2;
  --shadow:0 1px 2px rgba(18,32,41,.05),0 6px 20px rgba(18,32,41,.07);
  --scrim:rgba(12,20,26,.5);
  --f-head:"Rubik","Heebo",system-ui,-apple-system,sans-serif;
  --f-body:"Heebo","Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:18px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1317; --surface:#162027; --surface2:#1c2830; --ink:#e6eef2; --ink2:#9aaab4; --ink3:#6f7f89; --line:#25323b;
  --accent:#45c0ae; --accentSoft:#14332e; --accentInk:#06201c;
  --wall:#8798a3; --room:#1a252c; --roomHi:#1b3833;
  --open:#f28c4f; --openBg:#3a2418; --fixed:#6fcb7c; --fixedBg:#183020; --notfixed:#f2786e; --notfixedBg:#3a1c1a; --partial:#e6b84a; --partialBg:#342a12;
  --shadow:0 1px 2px rgba(0,0,0,.3); --scrim:rgba(0,0,0,.65); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1317; --surface:#162027; --surface2:#1c2830; --ink:#e6eef2; --ink2:#9aaab4; --ink3:#6f7f89; --line:#25323b;
  --accent:#45c0ae; --accentSoft:#14332e; --accentInk:#06201c;
  --wall:#8798a3; --room:#1a252c; --roomHi:#1b3833;
  --open:#f28c4f; --openBg:#3a2418; --fixed:#6fcb7c; --fixedBg:#183020; --notfixed:#f2786e; --notfixedBg:#3a1c1a; --partial:#e6b84a; --partialBg:#342a12;
  --shadow:0 1px 2px rgba(0,0,0,.3); --scrim:rgba(0,0,0,.65); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{direction:rtl}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--f-body);-webkit-tap-highlight-color:transparent;
  padding-top:env(safe-area-inset-top,0px);min-height:100vh;min-height:100dvh}
body.in-app{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:860px;margin:0 auto}
h1,h2,h3{font-family:var(--f-head);margin:0;text-wrap:balance}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hrow{display:flex;align-items:center;gap:14px;padding-block:14px 8px}
.hrow .tt{flex:1;min-width:0}
.hrow h1{font-size:22px;font-weight:700;letter-spacing:-.01em}
.hrow p{margin:0;font-size:13px;color:var(--ink2)}
.ring{position:relative;width:52px;height:52px;flex:none}
.ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;font:600 12px var(--f-head)}
.rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:4px 12px;scroll-padding-inline:16px}
.rail::-webkit-scrollbar{display:none}
.rchip{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px 7px 8px;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:var(--shadow)}
.rchip .c{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font:600 12px var(--f-head);color:#fff}
.rchip[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* cards */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.section{display:grid;gap:14px;padding-block:6px 20px}
.planhead{display:flex;align-items:center;gap:8px;padding:12px 14px}
.planhead h2{flex:1;min-width:0;font-size:18px;font-weight:600}
.planhead small{display:block;font:400 13px var(--f-body);color:var(--ink2)}
.ibtn{width:38px;height:38px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;flex:none}
.ibtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ibtn[aria-pressed="true"]{background:var(--accentSoft);color:var(--accent)}
.ibtn:disabled{opacity:.35}
svg.plan{display:block;width:100%;height:auto;user-select:none;background:var(--surface2)}
.room{cursor:pointer}
.room .fill{fill:var(--room);transition:fill .2s}
.room:hover .fill,.room.sel .fill{fill:var(--roomHi)}
.room text{fill:var(--ink2);font-family:var(--f-head);pointer-events:none}
.room.dim{opacity:.4}
.walls{fill:none;stroke:var(--wall);stroke-width:12;stroke-linejoin:round}
.badge text,.pin text{fill:#fff;font-family:var(--f-head);font-weight:600;pointer-events:none}
.badge circle,.pin circle{stroke:var(--surface);stroke-width:4}
.pin{cursor:pointer}
.underlay{opacity:0;transition:opacity .25s}
.show-plan .underlay{opacity:.85}
.show-plan .room .fill{fill-opacity:.15}
.show-plan .walls{stroke-opacity:.12}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px 12px;font-size:12.5px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}

.shead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-inline:2px}
.shead h3{font-size:17px;font-weight:600}
.shead span{font-size:13px;color:var(--ink2)}

/* room grid (overview) */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rcard{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;text-align:right;display:grid;gap:8px}
.rcard b{font:600 15px var(--f-head)}
.rcard .bar{height:6px;border-radius:3px;background:var(--surface2);overflow:hidden;display:flex}
.rcard .bar i{height:100%}
.rcard .meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2)}

/* finding rows */
.list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.frow{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:10px;text-align:right;width:100%}
.frow .th{width:64px;height:64px;border-radius:12px;background:var(--surface2) center/cover no-repeat;display:grid;place-items:center;color:var(--ink3);font:600 13px var(--f-head)}
.frow .bd{min-width:0;display:grid;gap:3px}
.frow .l1{display:flex;align-items:center;gap:8px}
.frow .id{font:600 12px var(--f-head);color:var(--accent);background:var(--accentSoft);border-radius:7px;padding:1px 7px}
.frow .t{font-weight:600;font-size:15px;line-height:1.3}
.frow .l3{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink2)}
.pill{font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.s-open{background:var(--openBg);color:var(--open)} .s-fixed{background:var(--fixedBg);color:var(--fixed)}
.s-notfixed{background:var(--notfixedBg);color:var(--notfixed)} .s-partial{background:var(--partialBg);color:var(--partial)}
.sev-safety{color:var(--notfixed);font-weight:600}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none;border-radius:999px;padding:7px 14px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:500}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.ghead{font:600 13px var(--f-head);color:var(--ink2);margin:8px 2px 0}

/* tab bar */
.tabbar{position:fixed;inset:auto 0 0;z-index:25;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);
  padding:6px max(16px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.tabbar .in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.tabbar button{display:grid;justify-items:center;gap:2px;padding:6px 0;font-size:12px;font-weight:500;color:var(--ink3)}
.tabbar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-current="true"]{color:var(--accent)}

/* detail page */
.detail{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
.dtop{display:flex;align-items:center;gap:10px;padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px;background:var(--bg)}
.dtop .crumb{flex:1;min-width:0;font-size:13px;color:var(--ink2);text-align:center}
.dtop .crumb b{display:block;color:var(--ink);font:600 15px var(--f-head)}
.dscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hero{position:relative;margin:0 auto;max-width:860px}
.car{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0;background:#0b1013}
.car::-webkit-scrollbar{display:none}
.car img{flex:none;width:100%;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:center;cursor:zoom-in;max-width:100%}
.car .none{width:100%;aspect-ratio:4/3;display:grid;place-items:center;color:#9aa8b0;font-size:14px}
.hero .cnt{position:absolute;bottom:12px;left:12px;background:rgba(10,16,20,.7);color:#fff;border-radius:999px;padding:3px 10px;font:600 12px var(--f-head)}
.hero .dots{position:absolute;bottom:14px;right:0;left:0;display:flex;justify-content:center;gap:5px;pointer-events:none}
.hero .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}
.hero .dots i.on{background:#fff}
.dbody{display:grid;gap:16px;padding-block:16px 24px}
.dtitle{display:grid;gap:8px}
.dtitle h2{font-size:22px;font-weight:600;line-height:1.3}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12.5px;border-radius:8px;padding:3px 9px;background:var(--surface);border:1px solid var(--line);color:var(--ink2)}
.tag.id{background:var(--accentSoft);color:var(--accent);border-color:transparent;font-weight:600}
.tag.safety{background:var(--notfixedBg);color:var(--notfixed);border-color:transparent;font-weight:600}
.dbody p{margin:0;font-size:16px;line-height:1.65}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:14px;padding:11px 16px;font-weight:600;font-size:14.5px;background:var(--surface);box-shadow:var(--shadow)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--accent);color:var(--accentInk)}
.blk{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.lbl{display:block;font:600 13px var(--f-head);color:var(--ink2);margin-bottom:10px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--surface2);border-radius:14px;padding:4px}
.seg button{border-radius:11px;padding:10px 2px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.seg button[aria-pressed="true"]{box-shadow:var(--shadow)}
.seg .b-open[aria-pressed="true"]{background:var(--openBg);color:var(--open)}
.seg .b-notfixed[aria-pressed="true"]{background:var(--notfixedBg);color:var(--notfixed)}
.seg .b-partial[aria-pressed="true"]{background:var(--partialBg);color:var(--partial)}
.seg .b-fixed[aria-pressed="true"]{background:var(--fixedBg);color:var(--fixed)}
textarea{width:100%;min-height:76px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);padding:10px 12px;font:15px/1.5 var(--f-body);resize:vertical;margin-top:12px}
details.orig summary{font:600 14px var(--f-head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.orig summary::after{content:"+";font-size:20px;color:var(--ink3)}
details.orig[open] summary::after{content:"–"}
details.orig dl{margin:8px 0 0}
details.orig dt{font:600 12.5px var(--f-head);color:var(--ink2);margin-top:10px}
details.orig dd{margin:2px 0 0}
.also{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink2)}
.also button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:13px;color:var(--ink)}
.dfoot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;background:var(--surface);border-top:1px solid var(--line);
  padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.dfoot button{display:flex;align-items:center;gap:6px;border-radius:14px;padding:11px 12px;font-weight:600;font-size:14px;background:var(--surface2);min-width:0}
.dfoot button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfoot button.next{justify-content:flex-start;flex-direction:row}
.dfoot button.prev{justify-content:flex-end}
.dfoot button.go{background:var(--accent);color:var(--accentInk)}
.dfoot svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none;stroke-linecap:round;stroke-linejoin:round}
.dfoot .pos{font:600 13px var(--f-head);color:var(--ink2);text-align:center}
.dfoot button:disabled{opacity:.35}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:#070a0c;color:#eef3f5;display:flex;flex-direction:column}
.lb-top{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));font-size:13.5px}
.lb-top .cap{flex:1;min-width:0}
.lb-top button,.lb-nav button{background:#1e272c;border-radius:12px;padding:8px 14px;color:#eef3f5;font-weight:600}
.lb-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain}
.lb-stage.zoom{display:block}
.lb-stage.zoom img{max-width:none;max-height:none;width:230%}
.lb-nav{display:flex;align-items:center;gap:10px;padding:10px max(14px,env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px))}
.lb-nav button{flex:1;padding:12px}
.lb-nav span{min-width:4.5em;text-align:center;font:600 13px var(--f-head)}

/* export */
.exbox{width:100%;min-height:240px;margin-top:0;font-size:14px}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;z-index:60;box-shadow:var(--shadow)}
.muted{color:var(--ink2);font-size:13.5px;margin:0 0 10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- auth, picker, messages ---------- */
.center{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.authcard{width:100%;max-width:400px;background:var(--surface);border-radius:24px;box-shadow:var(--shadow);padding:28px 22px;display:grid;gap:14px}
.logo{width:64px;height:64px;border-radius:18px;background:var(--accent);display:grid;place-items:center}
.logo svg{width:38px;height:38px;stroke:var(--accentInk);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.authcard h1{font-size:26px}
.authcard p{margin:0;color:var(--ink2)}
.authcard form{display:grid;gap:10px}
.field label,.authcard label{font:600 13px var(--f-head);color:var(--ink2)}
input[type=email],input[type=text],input[inputmode=numeric],select{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--surface2);color:var(--ink);padding:13px 14px;font:16px var(--f-body)}
#code{font:600 24px var(--f-head);letter-spacing:.3em;text-align:center}
.btn.wide{width:100%;justify-content:center;padding:14px}
.btn[disabled]{opacity:.55}
.link{color:var(--accent);font-weight:600;font-size:14px;justify-self:center;padding:6px}
.err{color:var(--notfixed);background:var(--notfixedBg);border-radius:12px;padding:10px 12px;margin:0;font-size:14px}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.picker{max-width:560px;margin:0 auto;padding-block:24px;display:grid;gap:12px}
.picker h1{font-size:24px}
.acard{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:16px;text-align:right;display:grid;gap:2px;width:100%}
.acard b{font:600 17px var(--f-head)}
.acard span{font-size:13.5px;color:var(--ink2)}
/* ---------- more tab ---------- */
.people{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.people li{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:12px;padding:9px 12px;font-size:14px}
.people li .e{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right}
.row2{display:grid;grid-template-columns:1fr auto;gap:8px}
.tip{background:var(--accentSoft);color:var(--ink);border-radius:14px;padding:12px 14px;font-size:14px}
/* ---------- handover photos ---------- */
.uph{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.uph img{width:76px;height:76px;object-fit:cover;border-radius:12px;flex:none;cursor:zoom-in;background:var(--surface2)}
.uph .add{width:76px;height:76px;border-radius:12px;border:1.5px dashed var(--ink3);display:grid;place-items:center;flex:none;color:var(--ink2);cursor:pointer;font-size:12px;text-align:center;line-height:1.2;position:relative}
.uph .add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.uph .add svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 3px}
.lb-top .danger{background:#5a1f1b}
.offline{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:70;background:var(--notfixed);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px}