/* Baltana catalog — design system (2026-10 c). Light by default; Dark / Auto from the menu. */
/* R14: self-hosted fonts (no Google Fonts). Same family names the rest of the CSS uses ("Inter", "Manrope"). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/manrope-latin-800-normal.woff2") format("woff2")}
:root{
  --bg:#F7F7F5; --surface:#FFFFFF; --surface-2:#F2F2EF; --surface-3:#E6E6E1;
  --ink:#0F0F10; --ink-2:#3B3B40; --muted:#6B6B72; --line:#E3E3DE; --line-2:#EDEDE8;
  --accent:#111111; --accent-ink:#000000; --accent-soft:#EFEFEB; --on-accent:#FFFFFF;
  --brand:#8A6420; --brand-soft:#F6EFE1; --sale:#B42318;
  --olive:#3F6212; --olive-soft:#ECF3DF; --sand:#8A6420; --sand-soft:#F6EFE1;
  --danger:#B42318; --danger-soft:#FDECEA; --ok:#15803D; --ok-soft:#E3F4E8;
  --overlay:rgba(15,15,16,.42);
  --shadow-1:0 1px 2px rgba(15,15,16,.05);
  --shadow-2:0 1px 2px rgba(15,15,16,.04),0 12px 28px -12px rgba(15,15,16,.18);
  --shadow-3:0 24px 60px -18px rgba(15,15,16,.35);
  color-scheme:light;
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-pill:999px;
  --font-head:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif; /* r30: Hindi = the phone's own Noto (local name, no URL) */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;
  --tap:48px; --ease:cubic-bezier(.2,.8,.2,1);
  --placeholder:rgba(107,107,114,.45); /* lighter hint text in inputs (BRIEF-v2 §1.18) */
}
:root[data-theme="dark"]{
  --bg:#0C0C0D; --surface:#161618; --surface-2:#1E1E21; --surface-3:#29292D;
  --ink:#F4F4F2; --ink-2:#D2D2D6; --muted:#9C9CA4; --line:#2C2C31; --line-2:#222226;
  --accent:#F4F4F2; --accent-ink:#FFFFFF; --accent-soft:#26262A; --on-accent:#0C0C0D;
  --brand:#D7AF6A; --brand-soft:#2B2416; --sale:#F97066;
  --olive:#A3C46B; --olive-soft:#1F2A14; --sand:#D7AF6A; --sand-soft:#2B2416;
  --danger:#F97066; --danger-soft:#3A1A17; --ok:#6CD496; --ok-soft:#14301F;
  --overlay:rgba(0,0,0,.6);
  --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 12px 28px -12px rgba(0,0,0,.7); --shadow-3:0 24px 60px -18px rgba(0,0,0,.85);
  --placeholder:rgba(156,156,164,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
  --bg:#0C0C0D; --surface:#161618; --surface-2:#1E1E21; --surface-3:#29292D;
  --ink:#F4F4F2; --ink-2:#D2D2D6; --muted:#9C9CA4; --line:#2C2C31; --line-2:#222226;
  --accent:#F4F4F2; --accent-ink:#FFFFFF; --accent-soft:#26262A; --on-accent:#0C0C0D;
  --brand:#D7AF6A; --brand-soft:#2B2416; --sale:#F97066;
  --olive:#A3C46B; --olive-soft:#1F2A14; --sand:#D7AF6A; --sand-soft:#2B2416;
  --danger:#F97066; --danger-soft:#3A1A17; --ok:#6CD496; --ok-soft:#14301F;
  --overlay:rgba(0,0,0,.6);
  --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 12px 28px -12px rgba(0,0,0,.7); --shadow-3:0 24px 60px -18px rgba(0,0,0,.85);
  --placeholder:rgba(156,156,164,.45);
  color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;min-height:100dvh}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;letter-spacing:-.01em;line-height:1.2}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--accent-ink)}
img{display:block;max-width:100%}
.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.sm{width:16px;height:16px}
.i.lg{width:24px;height:24px}
:focus-visible{outline:3px solid var(--muted);outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}

/* ---------- Inputs ---------- */
.field{display:block;margin:0 0 14px}
.field>span:first-child,.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.field>span:first-child em,.lbl em{font-style:normal;font-weight:400;color:var(--muted)}
.input,.field input,.field select,.field textarea{width:100%;min-height:var(--tap);padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s;appearance:none}
.field textarea{min-height:88px;resize:vertical;line-height:1.45}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.field input::placeholder,.field textarea::placeholder,.input::placeholder,input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}
.field .hint,.hint{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.hint.ok{color:var(--ok)} .hint.err,.err-text{color:var(--danger)}
.field.bad input{border-color:var(--danger)}
.pw{position:relative}
.pw button{position:absolute;right:2px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;padding:0 12px;min-width:56px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.pw input{padding-right:64px}
.money{position:relative}
/* C19 + r19 (rule M): no currency sign in front of an amount box — the hint shows the code */
.money input{padding-left:14px} /* r19: codes only, no rupee sign */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
@media (max-width:560px){.grid3{grid-template-columns:1fr 1fr}.grid3>.field:first-child{grid-column:1/-1}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  border:1.5px solid transparent;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .08s,opacity .15s;user-select:none}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 18px -10px rgba(15,15,16,.55)}
.btn.primary:hover{background:var(--accent-ink)}
.btn.secondary{background:var(--accent-soft);color:var(--accent-ink)}
.btn.secondary:hover{background:var(--surface-3);background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 12%)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.plain{background:none;color:var(--ink-2);padding:10px 12px}
.btn.lg{min-height:var(--tap);padding:12px 22px;font-size:16px}
.btn.block{width:100%}
.btn.icon{width:44px;padding:0}
.btn .spin{width:18px;height:18px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 16px 6px;margin:0 -16px;scroll-padding:16px}
.chips.scroll::-webkit-scrollbar{display:none}
@media (min-width:900px){.chips.scroll{flex-wrap:wrap;overflow-x:visible}} /* r32 M2 (the desk PC, Chrome 109, a mouse): every filter chip visible, no sideways scroller */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 15px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;transition:all .15s}
.chip:hover{border-color:var(--muted);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip .n{font-size:12px;opacity:.6;font-weight:600}
.chip.add{border-style:dashed;color:var(--ink-2)}
.chip.pill{min-height:34px;padding:5px 8px 5px 13px;background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);font-weight:600}
.chip.pill .x{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-3);background:color-mix(in srgb,var(--accent) 18%,transparent)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1.4;
  background:var(--surface-2);color:var(--ink-2)}
.badge.accent{background:var(--accent-soft);color:var(--accent-ink)}
.badge.olive{background:var(--olive-soft);color:var(--olive)}
.badge.sand{background:var(--sand-soft);color:var(--sand);color:color-mix(in srgb,var(--sand) 70%,var(--ink))}
.badge.dark{background:rgba(15,15,16,.72);color:#fff;backdrop-filter:blur(6px)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}

/* ---------- Login ---------- */
.login{min-height:100dvh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--bg)}
.login .hero{position:relative;margin:16px;border-radius:28px;overflow:hidden;background:#18181B center/cover no-repeat;min-height:320px}
.login .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(20,14,8,.78))}
.login .hero .cap{position:absolute;left:32px;right:32px;bottom:32px;z-index:1;color:#fff}
.login .hero .cap .wm{font:800 28px/1 var(--font-head);letter-spacing:.18em}
.login .hero .cap .sub{font-size:11px;letter-spacing:.42em;text-transform:uppercase;opacity:.8;margin-top:8px}
.login .hero .cap h2{font-size:30px;font-weight:700;margin-top:22px;max-width:14ch;color:#fff}
.login .panel{display:flex;align-items:center;justify-content:center;padding:32px 24px}
.login form{width:100%;max-width:380px}
.login .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.login h1{font-size:34px;margin:8px 0 6px}
.login p.lead{color:var(--muted);margin:0 0 26px}
.login .note{background:var(--sand-soft);color:var(--ink-2);border-radius:var(--r-sm);padding:12px 14px;margin:0 0 16px;font-size:14px}
/* R12-1 (BRIEF-r12): a warning on the sign-in screen is red — alert icon, bold first sentence */
.login .note.danger{background:var(--danger-soft);color:var(--danger);display:flex;gap:10px;align-items:flex-start;font-weight:500}
.login .note.danger b{font-weight:700}
.login .note.danger .i{flex:none;width:18px;height:18px;margin-top:1px}
.login .foot{margin-top:28px;font-size:12px;color:var(--muted);text-align:center;letter-spacing:.04em}
@media (max-width:820px){
  .login{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login .hero{min-height:34dvh;margin:12px 12px 0;border-radius:24px}
  .login .hero .cap{left:22px;bottom:22px}
  .login .hero .cap h2{display:none}
  .login .panel{align-items:flex-start;padding:24px 20px 32px}
  .login h1{font-size:28px}
}
.login.overlay{position:fixed;inset:0;z-index:200;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-width:820px){.login.overlay .hero{min-height:22dvh}}

/* ---------- App shell ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line-2)}
/* Manager C1 (2026-10-09): one bar — brand | search (grows) | filter icon | avatar; the search row is no longer a second line */
.top .bar{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 16px}
.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto;text-decoration:none;color:var(--ink);flex:none}
.brand b{font:800 19px/1 var(--font-head);letter-spacing:.2em}
.brand small{font-size:9px;letter-spacing:.38em;text-transform:uppercase;color:var(--brand);margin-top:5px;font-weight:600}
@media (max-width:599px){.brand b{font-size:17px;letter-spacing:.14em}.brand small{display:none}} /* compact mark: "AVILO" only, the search box gets the width */
/* Round 8 fix (phone-ux): under 400 px even the compact mark leaves the search box ~60 px of text while typing, so on the
   Products view the mark goes (the Products tab is the home link); the bar is search | filter | avatar there. */
@media (max-width:399px){body[data-view="products"] .brand{display:none}}
.avatar{width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font:700 14px/1 var(--font-head);display:grid;place-items:center;flex:none}
.tools{flex:1;min-width:0}
.search{display:flex;gap:8px;align-items:center}
.search .fbtn{flex:none;width:46px;min-height:46px;border-radius:50%} /* icon-only Filters; the count dot sits on its corner */
/* min-width:0 on the box AND the input: a flex item's automatic minimum is its min-content width, and a text input's is
   its intrinsic size (~20 characters + padding ≈ 250 px) — without it the box cannot shrink, the Filters button is pushed
   over the avatar and every phone gets a horizontal scroll (round 8 fix). */
.search .sbox{position:relative;flex:1;min-width:0}
.search .sbox .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search .sbox input{min-width:0;padding-left:44px;border-radius:var(--r-pill);background:var(--surface);min-height:46px}
.search .sbox button{position:absolute;right:1px;top:50%;transform:translateY(-50%);border:0;background:radial-gradient(circle,var(--surface-2) 0 15.5px,transparent 16.5px);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;color:var(--ink-2)}
.search .sbox input{padding-right:48px}
.fbtn{position:relative}
.fbtn .dot{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;display:grid;place-items:center}
.active-row{display:flex;gap:8px;flex-wrap:wrap}
main{max-width:1320px;margin:0 auto;padding:6px 16px 120px}
/* The #fab sits 78–134 px from the bottom on phones: room under the last card so its price / badges are never under it */
@media (max-width:899px){body[data-view="products"] main{padding-bottom:150px}}
.countline{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;margin:4px 0 12px}

/* ---------- Banner + toast ---------- */
.banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--danger-soft);color:var(--danger);margin:0 0 14px;font-size:14px}
.banner.info{background:var(--sand-soft);color:var(--ink-2)}
.banner .grow{flex:1}
/* "From Today: <card>" on Orders / Factory / Dispatch when a Today card opened the screen (BRIEF-v3 L1) */
.todaybar{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 8px 8px 12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);font-size:14px}
.todaybar .grow{flex:1;min-width:0}
.todaybar .n{font-weight:700;margin-left:2px}
.todaybar small{display:block}
.todaybar .tdfrom{font-size:12px;color:var(--muted)}
.todaybar .btn{flex:none;min-height:40px;padding:6px 10px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:300;
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:var(--r-pill);font-weight:600;font-size:14px;box-shadow:var(--shadow-3);
  transition:all .25s var(--ease);pointer-events:none;max-width:calc(100vw - 32px);display:flex;gap:8px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--danger);color:var(--surface)}
.toast.on{pointer-events:auto}
.toast .tact{margin-left:6px;border:0;background:rgba(255,255,255,.18);color:inherit;font-weight:700;border-radius:999px;padding:6px 12px;font-size:13.5px}
.toast .tact{flex:none;white-space:nowrap}.toast .tact+.tact{margin-left:0} /* two actions (L4: Undo · Tell client) */
.toast{width:max-content} /* left:50% alone lets a toast use only half the phone width, so text wrapped word by word */

/* ---------- Grid + cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
@media (max-width:620px){.grid{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:340px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1);border:1px solid var(--line-2);cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);display:flex;flex-direction:column;text-align:left;padding:0}
@media (hover:hover){.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}
.card .pic{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover}
.card .pic .tl{position:absolute;left:8px;top:8px;display:flex;gap:6px;flex-wrap:wrap}
.card .pic .tr{position:absolute;right:8px;top:8px}
.card .pic .bl{position:absolute;left:8px;bottom:8px}
.card .body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
.card .eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .price{margin-top:auto;padding-top:6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-weight:700;font-size:15px}
.card .price s{color:var(--muted);font-weight:500;font-size:13px}
.card .price .pend{font-size:12.5px;font-weight:600;color:var(--brand)}
.card.sold .pic img{filter:grayscale(.85) opacity(.75)}
.card.new{animation:pulse 2.4s var(--ease)}
@keyframes pulse{0%,40%{box-shadow:0 0 0 4px var(--accent),var(--shadow-2)}100%{box-shadow:var(--shadow-1)}}
.noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 10px,var(--surface-3) 10px,var(--surface-3) 11px)}
.noimg span{background:var(--surface);padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sh 1.2s infinite linear;border-radius:var(--r)}
@keyframes sh{to{background-position:-200% 0}}
.empty{text-align:center;padding:64px 16px;color:var(--muted)}
.empty .big{font:700 20px var(--font-head);color:var(--ink);margin:12px 0 6px}
.empty.roomempty{padding-top:20px}
.empty .emptyacts{display:flex;flex-direction:column;gap:8px;max-width:320px;margin:14px auto 0}
.empty .emptyacts .btn{min-height:48px;justify-content:center}

/* ---------- FAB (manager C3, 2026-10-09): the round "Add product" button, editors only, Products view only ---------- */
.fab{position:fixed;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:34;height:56px;border:0;border-radius:28px;padding:0 20px 0 16px;
  background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;gap:8px;font:700 16px/1 var(--font-head);box-shadow:0 14px 30px -10px rgba(15,15,16,.6)}
.fab .i{width:24px;height:24px;stroke-width:2.4}
.fab span{white-space:nowrap} /* r30 audit: "+ Add product" in words, not a bare "+" */
.fab:active{transform:scale(.96)}
@media (max-width:899px){.fab{bottom:calc(78px + env(safe-area-inset-bottom))}} /* clear of the bottom bar */
body:not([data-view="products"]) .fab,.selecting .fab{display:none}
/* above the Sale basket button (sales.css) while it shows — body.has-salfab is set by sales.js drawFab (a class, not :has(),
   so Android WebViews / Chrome < 105 lift it too) */
body.has-salfab .fab{bottom:calc(142px + env(safe-area-inset-bottom))}
@media (min-width:900px){body.has-salfab .fab{bottom:90px}}

/* ---------- Sheets (bottom sheet on phone, dialog on desktop) ---------- */
.scrim{position:fixed;inset:0;z-index:100;background:var(--overlay);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease}
.sheet{position:relative;background:var(--surface);width:100%;max-width:640px;max-height:94dvh;border-radius:26px 26px 0 0;display:flex;flex-direction:column;
  box-shadow:var(--shadow-3);animation:up .28s var(--ease);overflow:hidden}
.sheet.full{max-height:100dvh;height:100dvh;border-radius:0}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0;flex:none}
.sheet .head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 20px;flex:none;border-bottom:1px solid var(--line-2)}
.sheet .head h2{font-size:18px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .head .sub{font-size:12.5px;color:var(--muted);font-weight:500;display:block;font-family:var(--font);letter-spacing:0;white-space:normal} /* r30 audit: a long sub wraps at 360 px (the h2 keeps its own ellipsis) */
.sheet .x{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface-2);display:grid;place-items:center;flex:none}
.sheet .bd{overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 24px;flex:1;-webkit-overflow-scrolling:touch}
.sheet .ft{flex:none;display:flex;gap:10px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);background:var(--surface)}
.sheet .ft .msg{flex:1;font-size:13.5px;line-height:1.35}
@media (min-width:760px){
  .scrim{align-items:center;padding:24px}
  .sheet{border-radius:26px;max-height:min(880px,92dvh)}
  .sheet.full{height:auto;max-height:min(880px,92dvh);border-radius:26px}
  .sheet.wide{max-width:1040px}
  .sheet .grab{display:none}
}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Product detail ---------- */
.detail{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:760px){.detail{grid-template-columns:1.1fr 1fr;gap:28px}}
.gallery{position:relative;margin:-18px -20px 0}
@media (min-width:760px){.gallery{margin:0}}
.gallery .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--surface-2)}
@media (min-width:760px){.gallery .track{border-radius:var(--r)}}
.gallery .track::-webkit-scrollbar{display:none}
.gallery .track>*{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3}
.gallery .track img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gallery .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.gallery .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.gallery .dots i.on{background:#fff;width:18px;border-radius:4px}
.gallery .count{position:absolute;right:12px;top:12px}
.info .eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.info h2{font-size:26px;margin:6px 0 4px}
.info .meta{color:var(--muted);font-size:14px}
.info .tags{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.pricebox{margin:18px 0 0;background:var(--surface-2);border-radius:var(--r);padding:14px 16px}
.pricebox .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;align-items:baseline}
.pricebox .row+.row{border-top:1px dashed var(--line)}
.pricebox .k{color:var(--ink-2);font-size:14px}
.pricebox .v{font-weight:700;font-size:17px;text-align:right}
.pricebox .v small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.pricebox .v.sale{color:var(--sale);font-size:20px}
.pricebox .v.strike{text-decoration:line-through;color:var(--muted);font-weight:600}
.pricebox .note{font-size:13px;color:var(--muted);white-space:pre-line}
.sec{margin-top:20px}
.sec h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font);font-weight:700;margin:0 0 8px}
.sec p{margin:0;white-space:pre-line;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500;word-break:break-word}
.kv dd img{width:84px;height:84px;object-fit:cover;border-radius:var(--r-sm);cursor:zoom-in}
.sibs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.sibs button{flex:none;width:96px;border:0;background:none;padding:0;text-align:left}
.sibs .ph{width:96px;height:72px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);border:2px solid transparent}
.sibs .ph img{width:100%;height:100%;object-fit:cover}
.sibs span{display:block;font-size:12.5px;font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.updated{margin-top:22px;font-size:12px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.actions .btn{flex:1 1 auto}

/* ---------- Form ---------- */
.fsec{padding:4px 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.fsec:last-child{border-bottom:0;margin-bottom:0}
.fsec>h3{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.fsec>h3 .req{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:2px 8px;border-radius:var(--r-pill);font-family:var(--font)}
.fsec>h3 .opt{font-size:12px;font-weight:500;color:var(--muted);font-family:var(--font)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-bottom:12px}
.photos:empty{display:none}
.ph-tile{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}
.ph-tile img{width:100%;height:100%;object-fit:cover}
.ph-tile .rm{position:absolute;top:5px;right:5px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(15,15,16,.7);color:#fff;display:grid;place-items:center}
.ph-tile .cover{position:absolute;left:5px;bottom:5px}
.ph-tile .st{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,15,16,.45);color:#fff;font-size:12px;font-weight:700;text-align:center;padding:6px}
.ph-tile .st .spin{width:26px;height:26px;border:3px solid #fff;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.ph-tile.err .st{background:rgba(180,35,24,.78)}
/* r38: a PDF / Word file (Ritika's order form) among the photos — a tile that opens the file */
.ph-tile.file{display:block;border:1px dashed var(--line);color:inherit;text-decoration:none}
.ph-tile.file .ph-file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;padding:6px;text-align:center}
.ph-tile.file .ph-file b{font-size:13px;letter-spacing:.04em}
.ph-tile.file .ph-file small{font-size:10px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted,#888)}
.photo-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo-btns label{cursor:pointer}
.big-cam{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;border:2px dashed var(--line);
  border-radius:var(--r);background:var(--brand-soft);color:var(--ink);font-weight:700;cursor:pointer;margin-bottom:10px;text-align:center}
.big-cam small{font-weight:500;color:var(--ink-2)}
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.typegrid .tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;padding:8px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;text-align:center;line-height:1.2}
.typegrid .tile .i{width:26px;height:26px;color:var(--brand)}
.typegrid .tile.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.typegrid .tile.on .i{color:var(--bg)}
.more{border:1.5px solid var(--line);border-radius:var(--r-sm);margin-top:4px}
.more>summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"+";font-size:20px;color:var(--muted)}
.more[open]>summary::after{content:"–"}
.more>div{padding:4px 14px 6px}
.restore{display:flex;gap:10px;align-items:center;background:var(--sand-soft);border-radius:var(--r-sm);padding:10px 12px;margin:0 0 16px;font-size:14px}
.restore .grow{flex:1}
.fieldphoto{display:flex;gap:10px;align-items:center}
.fieldphoto img{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover}
.subtle{color:var(--muted);font-size:13.5px}
.lock{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);font-weight:600}

/* ---------- Lists (menu, users, types) ---------- */
.list{display:flex;flex-direction:column;gap:2px}
.list .item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:var(--r-sm);border:0;background:none;text-align:left;width:100%;font-size:15px}
.list .item:hover{background:var(--surface-2)}
.list .item .grow{flex:1;min-width:0}
.list .item small{display:block;color:var(--muted);font-size:13px}
.list .item .spin{flex:none;width:20px;height:20px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.list .item[disabled]{opacity:.6;pointer-events:none}
.ucard{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px}
.ucard .grow{flex:1;min-width:0}
.ucard b{display:block}
.ucard small{color:var(--muted)}
.box{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px;background:var(--surface)}
.trow{display:flex;gap:6px;align-items:center;margin:0 0 8px}
.trow .chip{flex:1;justify-content:flex-start;border-radius:var(--r-sm)}
.switch{display:flex;align-items:center;gap:12px;min-height:var(--tap);cursor:pointer;font-weight:500}
.switch input{appearance:none;width:46px;height:28px;border-radius:14px;background:var(--surface-3);position:relative;transition:background .2s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform .2s var(--ease)}
.switch input:checked::after{background:var(--on-accent)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(18px)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;animation:fade .2s}
.lightbox img{max-width:100vw;max-height:100dvh;object-fit:contain}
.lightbox button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:48px;height:48px;border-radius:50%;display:grid;place-items:center}
.lightbox .close{top:calc(14px + env(safe-area-inset-top));right:14px}
.lightbox .prev{left:12px;top:50%}
.lightbox .next{right:12px;top:50%}

/* ---------- Fabrics + cover (2026-10 b) ---------- */
.fabric{background:var(--surface-2);border-color:transparent}
.fabric-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.fabric-h b{font-family:var(--font-head);font-size:15px}
.ph-tile .mkcover{position:absolute;left:5px;bottom:5px;border:0;border-radius:999px;background:rgba(15,15,16,.72);color:#fff;font-size:11px;font-weight:700;padding:5px 9px}

/* ---------- Move, select, quick actions (2026-10 c) ---------- */
.card{border-color:var(--line-2)}
.card .price span:first-child{color:var(--ink)}
.card .qbtn{position:absolute;right:8px;top:8px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;box-shadow:var(--shadow-1)}
.card .check{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:rgba(15,15,16,.35);display:grid;place-items:center;color:transparent}
.card.picked{outline:3px solid var(--accent);outline-offset:-3px}
.card.picked .check{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.card .tl .badge .i{width:13px;height:13px}
.chips.where{margin-top:-2px}
.chip.soft{background:var(--surface-2);border-color:transparent}
.chip.soft.on{background:var(--ink);color:var(--bg)}
.chips .sep{flex:none;width:1px;align-self:stretch;margin:6px 4px;background:var(--line)}
.chip.big{min-height:52px;padding:10px 20px;font-size:15.5px;font-weight:600;border-radius:var(--r-sm)}
.chip.big small{font-weight:500;opacity:.7;margin-left:2px}
.chip.cur{border-style:dashed}
.mini{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--r-sm);background:var(--surface-2);margin:0 0 16px}
.mini img{width:64px;height:48px;border-radius:8px;object-fit:cover}
.mini b{display:block}
.mini small{color:var(--muted)}
.selbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:8px;
  padding:8px 8px 8px 6px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-3);animation:up .2s var(--ease)}
.selbar .grow{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.selbar .btn{flex:none;white-space:nowrap}
/* Phones: Sell and Date become icon buttons so Move always fits next to them */
@media (max-width:430px){.selbar{gap:6px}.selbar .btn.ghost{padding-inline:12px}.selbar .btn.ghost .sb-l{display:none}}
.linkbtn{border:0;background:none;padding:0 2px;color:var(--brand);font-weight:600;font-size:13px;text-align:left;min-height:44px;display:inline-flex;align-items:center}
.selbar .grow .linkbtn{align-self:flex-start;margin:-10px 0 -12px}
.selecting main{padding-bottom:140px}
.actions{flex-direction:column}
.actions .row{display:flex;gap:8px;width:100%}
.actions .row .btn{flex:1}
.actions .row .btn.icon{flex:0 0 44px}
.countline>span:last-child{display:flex;gap:2px}
.theme-pick{display:flex;gap:8px;padding:6px 12px 12px}

/* ---------- Recent changes, undo, colours (2026-10 d) ---------- */
.sibs small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sibs small.sold{color:var(--danger);font-weight:600}
.sibs small.held{color:var(--sand);color:color-mix(in srgb,var(--sand) 80%,var(--ink));font-weight:600}
.attn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
.attn-tile{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 10px;text-align:left;display:flex;flex-direction:column;gap:2px}
.attn-tile b{font:800 24px/1 var(--font-head)}
.attn-tile span{font-size:13px;color:var(--muted);font-weight:600}
.attn-tile.warn{background:var(--brand-soft);border-color:transparent}
.attn-tile.warn b{color:var(--brand)}
.grp{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font);font-weight:700;margin:14px 4px 6px}
.rthumb{width:52px;height:40px;border-radius:8px;overflow:hidden;background:var(--surface-2);flex:none}
.rthumb img{width:100%;height:100%;object-fit:cover}
.sheet .ft{flex-wrap:wrap}
.sheet .ft .msg:empty{display:none}
.sheet .ft .msg:not(:empty){flex-basis:100%}
.sheet .ft [data-save-next]{flex:1}
.sheet .ft [data-save]{flex:1}
.card .pic .tl{right:54px;flex-wrap:nowrap;min-width:0}
.card .pic .tl .badge{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;min-width:0}
.card.sold .pic .tl,.card.picked .pic .tl{right:46px}
.card .qbtn{top:auto;bottom:8px}
.card .pic .tl{right:8px}
.selecting .card .pic .tl{right:46px}

/* ---------- Bottom bar, floors, move everywhere (2026-10 g) ---------- */
.top .toplink{display:none}
@media (min-width:900px){.top .toplink{display:inline-flex}}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:flex-end;background:var(--surface);border-top:1px solid var(--line);
  padding:4px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -22px rgba(15,15,16,.45)}
.bnav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted);padding:6px 0 2px;min-height:54px}
.bnav button .i{width:24px;height:24px}
.bnav button.on{color:var(--ink)}
.bnav button.on .i{stroke-width:2.2}
.bnav .add{color:var(--ink)}
.bnav .add .plus{width:52px;height:52px;border-radius:18px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;margin-top:-26px;box-shadow:0 10px 22px -8px rgba(15,15,16,.55);border:4px solid var(--surface)}
.bnav .add .plus .i{width:24px;height:24px;stroke-width:2.4}
@media (min-width:900px){.bnav{display:none!important}}
@media (max-width:899px){
  main{padding-bottom:150px}
  .selbar{bottom:calc(78px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom))}
}
.modebanner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--ink);color:var(--bg);margin:0 0 14px;position:sticky;top:8px;z-index:15}
.modebanner .grow{flex:1;line-height:1.3}
.modebanner small{display:block;opacity:.75;font-size:12.5px}
.modebanner .btn.ghost{background:transparent;color:var(--bg);border-color:var(--muted);border-color:color-mix(in srgb,var(--bg) 40%,transparent)}
.selecting .modebanner{display:flex}
.card .mvbtn{position:absolute;right:8px;bottom:8px;border:0;border-radius:999px;background:rgba(255,255,255,.96);color:#111;font-weight:700;font-size:12.5px;
  padding:7px 12px 7px 9px;display:flex;gap:5px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.18);min-height:34px}
.card .mvbtn .i{width:15px;height:15px}
.loccard{margin:16px 0 0;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface)}
.loc-now{display:flex;gap:10px;align-items:center}
.loc-now .i{width:22px;height:22px;color:var(--brand)}
.loc-now small,.loc-move small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.loc-now b{font-size:16.5px}
.loc-move{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.loc-move small{margin-bottom:8px}
.roomh{display:flex;align-items:center;gap:8px;font:700 17px var(--font-head);margin:6px 2px 10px}
.roomh span{font:500 13px var(--font);color:var(--muted)}
.roomh .i{color:var(--brand)}
.ftiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
@media (min-width:760px){.ftiles{grid-template-columns:repeat(3,1fr)}}
.ftile{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.ftile-main{border:0;background:none;text-align:left;padding:0;display:flex;flex-direction:column;flex:1}
.fthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;aspect-ratio:3/1.25;background:var(--surface-2);position:relative}
.fthumbs img{width:100%;height:100%;object-fit:cover}
.fthumbs .fempty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.ftile b{padding:10px 12px 0;font-size:15.5px;font-family:var(--font-head)}
.ftile span{padding:0 12px 10px;color:var(--muted);font-size:13px}
.ftile .btn{margin:0 10px 10px;min-height:44px;font-size:13px;padding:8px 10px}

/* ---------- Hold, share, bigger targets (2026-10 h) ---------- */
.badge.hold{background:#FEF3C7;color:#92400E}
:root[data-theme="dark"] .badge.hold{background:#3A2C10;color:#FCD34D}
.card .holdband{position:absolute;left:0;right:0;bottom:0;background:rgba(146,64,14,.92);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .holdband ~ .mvbtn{bottom:34px}
.card .holdband ~ .bl{bottom:34px}
.btn.plain.danger-text{color:var(--danger)}
.bnav button{position:relative}
.bnav .nb{position:absolute;top:2px;left:50%;margin-left:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center}
/* touch targets: at least 44-48px for in-store use */
.chip{min-height:44px}
.chip.pill{min-height:44px}
.card .mvbtn{min-height:44px;padding:8px 13px 8px 10px;font-size:13px}
.toast .tact{min-height:44px;padding:8px 14px;font-size:14px}
.selbar .btn,.modebanner .btn{min-height:46px}

/* ---------- Avilo shell (2026-10-08) ---------- */
body:not([data-view="products"]) #catalogTools{display:none}
.view{display:block}
.view[hidden]{display:none!important}
.toplinks{display:none;gap:4px;margin-right:6px}
@media (min-width:900px){.toplinks{display:flex}}
.toplinks .toplink{display:inline-flex;min-height:44px;padding:8px 14px;border-color:transparent;background:transparent}
.toplinks .toplink.on{background:var(--ink);color:var(--bg)}
.bnav button.on{color:var(--ink)}
.bnav button.on .i{stroke-width:2.3}
.bnav button.on::after{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--ink)}
.pick-search{margin:0 0 12px}
.pick-search input{border-radius:var(--r-pill)}
.pick-item small+small{margin-top:1px}
/* r24 item 3: the "Sell a piece" chooser — 2 small cards per row, lazy thumbnails */
.pp2-chips{margin:0 0 6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pp2-chips::-webkit-scrollbar{display:none} /* r32 M2: scrollbar-width:none alone is Chrome 121+; 109 needs this line */
.pp2-chips .chip{flex:none;min-height:36px;padding:6px 12px}
@media (min-width:900px){.pp2-chips{flex-wrap:wrap;overflow-x:visible}} /* r32 M2 */
.pp2-count{margin:4px 0 8px;font-size:13px}
.pp2-room{margin:12px 0 6px;font:700 13px/1.3 var(--font-head);color:var(--ink-2)}
.pp2-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pp2-card{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:6px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;min-height:64px;cursor:pointer;min-width:0}
.pp2-card:active{border-color:var(--ink)}
.pp2-card.off{opacity:.45;cursor:not-allowed}
.pp2-ph{width:52px;height:52px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.pp2-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pp2-tx{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:13px;line-height:1.25}
.pp2-tx b{font-size:14px}
.pp2-tx small{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp2-tx .badge{align-self:flex-start;margin-top:2px}
.pp2-code{font-weight:700;color:var(--accent-ink)}
/* shared module building blocks */
.mod-head{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.mod-head h1{font:800 24px/1.2 var(--font-head);flex:1;margin:0}
.mod-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:2px 16px 4px}
.mod-tabs::-webkit-scrollbar{display:none}
.mod-tabs .chip{flex:none}
@media (min-width:900px){.mod-tabs{flex-wrap:wrap;overflow-x:visible}} /* r32 M2: every tab visible with a mouse */
.stat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.stat.blue{background:#E0EAFF;color:#1D4ED8}.stat.amber{background:#FEF3C7;color:#92400E}.stat.green{background:#DCFCE7;color:#166534}
.stat.purple{background:#EDE9FE;color:#5B21B6}.stat.red{background:#FEE2E2;color:#B91C1C}.stat.gray{background:var(--surface-2);color:var(--muted)}
:root[data-theme="dark"] .stat.blue{background:#1E2A4A;color:#93B4FF}:root[data-theme="dark"] .stat.amber{background:#3A2C10;color:#FCD34D}
:root[data-theme="dark"] .stat.green{background:#14301F;color:#86EFAC}:root[data-theme="dark"] .stat.purple{background:#2A2145;color:#C4B5FD}
:root[data-theme="dark"] .stat.red{background:#3A1A17;color:#FCA5A5}
/* module headers: on phones the main action gets its own full-width line */
@media (max-width:560px){
  .mod-head{flex-wrap:wrap}
  .mod-head .btn.primary{order:3;flex:1 1 100%;min-height:50px}
}

/* ---------- Phase 2 shell (2026-10-08 c): storefront, prices, users, places ---------- */
/* login */
.login .keep{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.4}
.banner.info .i{color:var(--brand)}
/* catalogue head (scrolls away; only the top bar with search + Filters stays pinned) */
.cat-head{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
.active-row:empty{display:none}
.cat-head .chips.scroll{padding-bottom:2px}
.catcircles{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-padding:16px}
.catcircles::-webkit-scrollbar{display:none}
.cc{flex:none;width:76px;border:0;background:none;padding:2px 0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-height:44px}
.ccimg{width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);color:var(--brand);border:2px solid var(--line-2);transition:border-color .15s,box-shadow .15s}
.ccimg img{width:100%;height:100%;object-fit:cover}
.ccimg .i{width:26px;height:26px}
.ccl{font-size:12.5px;font-weight:600;line-height:1.15;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccn{font-size:11px;color:var(--muted);font-weight:600;line-height:1}
.cc.on .ccimg{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.cc.on .ccl{font-weight:800}
.cc.on .ccimg{background:var(--ink);color:var(--bg)} /* C2: line icons in the circles — the chosen type fills in */
.chip.salechip:not(.on){color:var(--sale);border-color:var(--sale);border-color:color-mix(in srgb,var(--sale) 35%,var(--line))}
/* product cards: photo slider, dots, ribbon, code price, badges */
.card .pic .slides{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.card .pic .slides::-webkit-scrollbar{display:none}
.card .pic .slides>*{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start}
.card .sdots{position:absolute;left:10px;bottom:12px;display:flex;gap:4px;pointer-events:none}
.card .sdots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.6);box-shadow:0 0 2px rgba(0,0,0,.35);transition:width .2s}
.card .sdots i.on{width:14px;background:#fff}
.card .holdband ~ .sdots{bottom:36px}
.card .sarr{display:none}
@media (hover:hover) and (pointer:fine){
  .card .sarr{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;box-shadow:var(--shadow-1);opacity:0;transition:opacity .15s}
  .card .sarr.prev{left:6px}.card .sarr.next{right:6px}
  .card:hover .sarr{opacity:1}
}
.ribbon{position:absolute;top:10px;right:0;z-index:2;background:var(--sale);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px 4px 10px;border-radius:7px 0 0 7px;box-shadow:0 2px 6px rgba(0,0,0,.2);pointer-events:none}
.ribbon.sm{top:6px;font-size:10px;padding:3px 7px}
.card.onsale .pic .tl{right:78px}
.selecting .card .ribbon{display:none}
.selecting .card.onsale .pic .tl{right:46px}
.card .body{position:relative}
.card .price .pc{font-size:17px;font-weight:800;letter-spacing:.02em}
.card.onsale .price .pc{color:var(--sale)}
.card .price .pcode{font-size:12px;font-weight:700;color:var(--muted)}
.price .pper{font-size:12px;font-weight:600;color:var(--muted);margin-left:3px}
.cbadges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cbadges .badge{font-size:11.5px;padding:2px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbadges .badge .i{width:13px;height:13px}
.agedot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;box-shadow:0 0 0 2px var(--surface)}
.card .body>.agedot{position:absolute;right:11px;top:13px}
.agedot.a0{background:#22C55E}.agedot.a1{background:#EAB308}.agedot.a2{background:#F97316}.agedot.a3{background:#DC2626}.agedot.a4{background:#7F1D1D}
.card .eyebrow{padding-right:16px}
/* product page */
.gcol{min-width:0}
.gallery .garr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;box-shadow:var(--shadow-1);z-index:1}
.gallery .garr.prev{left:10px}.gallery .garr.next{right:10px}
.gallery .count{z-index:1}
.gallery .ribbon{top:14px}
.gallery .count ~ .ribbon{top:50px}
.gthumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px}
.gthumbs::-webkit-scrollbar{display:none}
.gthumbs button{flex:none;width:64px;height:48px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--surface-2);opacity:.7}
.gthumbs button.on{border-color:var(--ink);opacity:1}
.gthumbs img{width:100%;height:100%;object-fit:cover}
.info .titlerow{display:flex;align-items:flex-start;gap:10px}
.info .titlerow h2{flex:1;min-width:0}
.info .titlerow .btn{flex:none;margin-top:4px}
.info .delwhy{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.info .delwhy .i{flex:none;margin-top:2px;color:var(--muted)}
.pricebox .k small{display:block;font-size:11.5px;color:var(--muted)}
.pricebox .v.last{color:var(--ink-2)}
.pend-row{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--sand-soft);color:var(--ink-2)}
.pend-row .i{color:var(--brand);margin-top:2px}
.pend-row b{display:block;font-size:14px}
.pend-row small{display:block;font-size:13px;color:var(--muted)}
.soldbox{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--danger-soft);color:var(--ink)}
.soldbox .i{color:var(--danger);margin-top:2px}
.soldbox b{display:block}
.soldbox small{display:block;color:var(--ink-2);font-size:13.5px}
.hookblock{margin-top:14px}
.simrow{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.simrow::-webkit-scrollbar{display:none}
.simcard{flex:none;width:132px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);padding:0 0 8px;text-align:left;overflow:hidden}
.simcard .ph{position:relative;aspect-ratio:4/3;background:var(--surface-2)}
.simcard .ph img{width:100%;height:100%;object-fit:cover}
.simcard .nm{display:block;font-size:13px;font-weight:700;margin:6px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simcard small{display:block;font-size:12px;color:var(--muted);margin:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* sticky action bar of the product page */
.pdetail .ft{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.pbar{display:flex;gap:6px;width:100%}
.pb{flex:1 1 0;min-width:0;min-height:56px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;font-size:12px;font-weight:700;line-height:1.1}
.pb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;text-align:center;hyphens:manual} /* r30 audit: 2 lines so "Release" / "Whats App" fit at 360 px */
@media (max-width:400px){.pb.primary{flex-grow:1.2}}
.pb.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);flex-grow:1.4}
.pb:active{transform:scale(.97)}
.pb[disabled]{opacity:.55}
@media (min-width:760px){.pb{flex-direction:row;gap:8px;font-size:14px;min-height:48px}}
.list .item.danger-text{color:var(--danger)}
/* sell sheet */
.sellrow .mini{margin-bottom:10px}
.sellrow + .sellrow{border-top:1px dashed var(--line);padding-top:14px}
/* users */
.ulist{display:flex;flex-direction:column;gap:8px}
button.ucard{width:100%;text-align:left;background:var(--surface);margin:0;min-height:64px;font:inherit;color:inherit}
button.ucard:hover{background:var(--surface-2)}
.ucard .avatar{width:40px;height:40px;font-size:13px;flex:none}
.ucard b,.ucard small{overflow-wrap:anywhere}
.ucard small{display:block;font-size:13px;line-height:1.35}
.ucard.off{opacity:.65}
.rolelist{display:grid;gap:8px}
@media (min-width:640px){.rolelist{grid-template-columns:1fr 1fr}}
.rolecard{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);min-height:56px}
.rolecard b{display:block;font-size:15px}
.rolecard small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px}
.rolecard .rbox{flex:none;width:22px;height:22px;border-radius:5px;border:2px solid var(--line);margin-top:1px;display:grid;place-items:center;color:var(--surface)} /* R16: square tick box — several jobs */
.rolecard.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.rolecard.on .rbox{border-color:var(--ink);background:var(--ink)}
.rolecard .rbox .i{width:14px;height:14px}
#ufRoleNote{margin:8px 0 0}
/* Polish 8: a role only the owner may give (Finance manager) — greyed out for other admins, with the reason */
.rolecard[disabled]{opacity:.55;cursor:not-allowed}
.rolecard .ronly{color:var(--accent);font-weight:600;font-size:12px}
.uacts{display:flex;flex-wrap:wrap;gap:8px}
.uacts .btn{flex:1 1 auto}
/* R12-3 (BRIEF-r12): user form → Phones (waiting for approval / approved phones) */
.udevs{display:flex;flex-direction:column}
.udev{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.udev:first-child{border-top:0}
.udev .grow{flex:1;min-width:0}
.udev b{display:block;overflow-wrap:anywhere}
.udev small{display:block;color:var(--muted);font-size:12.5px}
.udev .btn{padding:6px 10px;font-size:13px;flex:none}
/* Add/Edit user: one list of places — tick each, ★ marks the main one (RECHECK-v3 #6) */
.uplaces{display:grid;gap:8px}
.uplace{display:flex;flex-direction:column;gap:6px}
.uplace .uprow{display:flex;gap:8px;align-items:stretch}
/* R11-1: what they may do in THIS second place — a small chip row under the ticked place */
.uplace .uprights{padding-left:12px;gap:6px}
.uplace .uprights .chip{min-height:36px;font-size:.86rem;padding:4px 10px}
.uplace .chip{min-height:48px}
.uplace .uptick{flex:1;min-width:0;justify-content:flex-start;border-radius:var(--r-sm);text-align:left}
.uplace .uptick.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.uplace .uptick .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.uplace .ubox{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:2px solid var(--line);background:var(--surface)}
.uplace .uptick.on .ubox{border-color:var(--accent);background:var(--accent);color:#fff}
.uplace .upmain{flex:none;padding:8px 12px;font-size:13px}
.uplace .upmain:not(.on){color:var(--muted);border-style:dashed}
.pnote{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--sand-soft);font-size:13.5px;color:var(--ink-2)}
.pnote .i{color:var(--brand);margin-top:1px}
.lock{overflow-wrap:anywhere}
/* showrooms & godowns */
.locbox.off{opacity:.7;background:var(--surface-2)}
.lochead{display:flex;gap:12px;align-items:flex-start}
.lochead>.i{width:24px;height:24px;color:var(--brand);margin-top:2px}
.lochead b{display:block;font:700 17px var(--font-head)}
.lochead small{display:block;color:var(--muted);font-size:13px}
.locrow{display:flex;gap:8px;margin-top:12px}
.locrow .input{flex:1;min-width:0}
.locrow .btn{flex:none}
.locacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.locacts .btn{flex:1 1 auto}
.chip.floorchip{padding-right:4px;gap:2px;cursor:default}
.chip.floorchip .fx{border:0;background:none;color:var(--muted);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:-8px -2px -8px 0;flex:none}
.chip.floorchip .fx:hover{background:var(--surface-2);color:var(--danger)}
.row2{display:flex;gap:8px;justify-content:flex-end}
.row2 .btn{flex:1 1 auto}
@media (min-width:560px){.row2 .btn{flex:0 0 auto}}
/* top links: badges on a computer */
.toplinks .toplink{position:relative}
.toplinks .nb{margin-left:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;display:inline-grid;place-items:center}
/* the product page grid must never grow wider than the sheet (wide photos, long thumbnail rows) */
.detail{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.detail{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.detail>*{min-width:0}
/* yes / cancel questions: the question wraps (never cut off), an optional plain sentence under it */
.asksheet .head h2{white-space:normal;overflow:visible;line-height:1.3}
.asksheet .bd{padding:14px 20px 6px;flex:none}
.askdetail{margin:0;color:var(--ink-2);font-size:15px;line-height:1.45}
/* users: the role list turns red when the admin tries to save without choosing one */
.fsec.bad .rolecard{border-color:var(--danger)}
.fsec.bad>h3 .req{background:var(--danger-soft);color:var(--danger)}
/* franchises (BRIEF-v3 D5): cards, the Franchises row in Showrooms, managers list, "Which franchise?" turns red */
.fcard{width:100%;background:none;text-align:left;font:inherit;color:inherit;min-height:44px}
.fcard small{display:block}
.fcard.off{opacity:.7}
.locfr{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);text-align:left;font:inherit;color:inherit}
.locfr .grow{flex:1;min-width:0}
.locfr small{display:block;color:var(--muted);font-size:13px}
.frusers{list-style:none;margin:0 0 10px;padding:0}
.frusers li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
#ufFr.bad>span{color:var(--danger)}
.pick-code{margin-left:6px;font-size:13px;color:var(--accent)}
/* product types (v3 D6/D7): searchable type grid, Other / + New type tiles, None / Other (type it) choices, choice editor */
.tsearch{margin:0 0 10px}
.typegrid .tile.add{border-style:dashed;color:var(--ink-2)}
.typegrid .tnone{grid-column:1/-1;margin:0 0 4px}
.thint{margin:10px 0 0}
.tpicked{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tpicked .tile{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border-radius:var(--r-sm);border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:600}
.tpicked .tile .i{color:var(--bg)}
.tnote{margin:12px 0 0}
.fpen{display:inline-grid;place-items:center;width:44px;height:44px;margin:-14px -10px -14px 0;border:0;background:none;color:var(--muted);border-radius:50%;vertical-align:middle}
.fpen:hover{background:var(--surface-2);color:var(--ink)}
.otherin{margin-top:10px}
.chip.add.on{color:var(--bg);border-style:solid} /* a chosen "Other…" chip stays readable */
.orow{display:flex;gap:8px;margin:0 0 8px;align-items:center}
.orow .input{flex:1;min-width:0}
.orow .btn{flex:none}
.ocheck{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px;font-weight:600;cursor:pointer}
.ocheck input{width:22px;height:22px;flex:none;accent-color:var(--ink)}
.ocheck em{font-style:normal;font-weight:400;color:var(--muted)}
.ohint{margin:4px 0 0}
/* product add / edit form: placeholder hints even lighter than typed values (BRIEF-v2 item 18) */
.sheet.pform input::placeholder,.sheet.pform textarea::placeholder{color:var(--placeholder);color:color-mix(in srgb,var(--placeholder) 80%,transparent);font-style:italic;font-weight:400}
/* ---- D2 sold pieces stay until delivered + D8 variants (BRIEF-v3) ---- */
.vchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 8px 2px 3px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2);line-height:1.35;min-width:0}
.vchip img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--surface-3)}
.vchip>.i{width:14px;height:14px;flex:none;margin-left:4px;color:var(--muted)}
.vchip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card .cvar{display:flex;min-width:0;margin:1px 0}
.card .soldline{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--danger);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .soldline .i{width:13px;height:13px;flex:none}
.ribbon.soldrb{background:var(--danger)}
.card.sold.waiting .pic img{filter:saturate(.75)}
.soldbox .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
.soldbox a{color:inherit;font-weight:600;text-decoration:underline}
.soldbox .vline{display:flex;min-width:0}
.soldbox .vline .vchip{font-size:13px;padding:3px 10px 3px 3px}
.soldbox .vline .vchip img{width:28px;height:28px}
.soldbox .dstat{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700}
.soldbox .dstat .i{margin:0;width:15px;height:15px}
.soldbox .dstat.wait{color:var(--sand)}
.soldbox .dstat.out{color:var(--accent)}
.soldbox .dstat.done,.soldbox .dstat.done .i{color:var(--ok)}
.soldbox .hobtn{margin-top:6px;min-height:48px}
.soldbox .hobtn .i{color:inherit;margin:0}
.soldbox .hohint{font-size:12.5px}
.varsheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.chip.waitchip.on{background:var(--danger);border-color:var(--danger);color:#fff}
.sibs.varsheet{overflow:visible}
.varsheet button{width:auto;min-height:44px}
.varsheet .ph{width:100%;height:110px}
.sibs span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* ---- R13 (BRIEF-r13): 10-digit phone hint, made-where tags, Order-to-dispatch report ---- */
.ph-hint{display:inline-block;margin-top:4px;font-variant-numeric:tabular-nums}
.ph-hint.err{color:var(--danger)}
.ph-hint.ok{color:var(--ok)}
.badge.sand.ord-made,.fac-madetag{text-transform:none}
.ord-line .ord-made{margin:2px 0 4px}
.sal-cstatus{margin-top:-4px}
.rep-tick{color:var(--ok);font-weight:700}
.rep-notick{color:var(--muted)}
.rep-plan .sec h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rep-plan .sec h4 .n{font-weight:600;color:var(--muted)}
.rep-plan .rep-csv{margin-left:auto}
.rep-plan .rep-no{padding:2px 6px;min-height:0;font-weight:700;text-decoration:underline}
.rep-plan .rep-table td b+small,.rep-plan .rep-table td small{display:block;color:var(--muted);font-size:12.5px}
.rep-sel input[type=search]{border:0;background:none;font:inherit;color:inherit;min-height:42px;flex:1;min-width:0;padding:0}
.rep-sel input[type=search]:focus{outline:none}
[data-planbtns]{grid-template-columns:1fr 1fr;margin:8px 0}
/* R15 (owner 2026-10-09: "on a laptop the things show on the left side"): on wide screens the card lists switch to 2–3
   fixed columns; a lone "nothing here" box or one Today card then sat in the first column with the rest empty.
   Empty / all-clear boxes span the whole row, and Today's cards stretch to fill the row when there are only one or two. */
main :is(.td-cards,.dsp-list,.ord-grid,.sal-list,.enq-list,.fac-list,.ven-list,.grid,.cat-grid)>:is(.empty,.banner,.td-clear){grid-column:1/-1}
@media (min-width:720px){main .td-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}}
/* the "+" button follows the content edge on wide screens instead of the far screen corner */
@media (min-width:1360px){.fab{right:calc((100vw - 1320px) / 2 + 8px)}}
/* ---------- R15 (BRIEF-r15) ---------- */
/* R15-1 #1: the top bar's "☰ Menu" button (was the round initials circle) + the small path "Menu › Clients" */
.menubtn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 14px 0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 14px/1 var(--font-head);cursor:pointer}
.menubtn .i{width:20px;height:20px}
.menubtn:hover{background:var(--surface-2)}
.menubtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.crumb{flex:none;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;margin-left:-4px}
@media (max-width:899px){.crumb{display:none}}
/* small phones: the search box needs the width — the button keeps only its ☰ icon (the bottom bar also says "Menu") */
@media (max-width:599px){.menubtn{width:44px;padding:0;justify-content:center}.menubtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.sheet .head h2 .avatar{display:inline-grid;width:32px;height:32px;font-size:12px;margin-right:10px;vertical-align:middle}
/* R15-2 / R15-3: highlighted rows at the top of the menu (Install app, Update the app) */
.list .item.hot{background:var(--sand-soft);font-weight:600}
.list .item.hot:hover{background:var(--surface-3);background:color-mix(in srgb,var(--sand-soft) 80%,var(--ink) 6%)}
/* R15-1 #18: the bottom bar stays visible (and tappable) above the Menu sheet, so tapping "Menu" again closes it */
@media (max-width:899px){
  .scrim.menusheet{bottom:calc(66px + env(safe-area-inset-bottom))}
  body.menu-open .bnav{z-index:110}
  body.menu-open .toast{z-index:300}
}
/* R15-1 #11: the calm amber note for a new phone, with its buttons */
.login .note.warn{background:var(--sand-soft);color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;border:1px solid var(--sand);border:1px solid color-mix(in srgb,var(--sand) 35%,transparent)}
.login .note.warn .i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--sand)}
.login .note .note-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.login .note .note-acts .btn{min-height:40px}
/* R15-1 #12: hints under the sign-in boxes; Caps Lock warning */
.login .field .hint{margin-top:5px;font-size:12.5px}
.warn-text{color:var(--sand);font-weight:600}
.login .field .hint.warn-text{color:var(--sand)}
/* R15-2: install on the sign-in page; R15-1 #12: WhatsApp the office */
.login-install{margin-top:10px}
.login-install .i{width:20px;height:20px}
.login-apk,.login-help{display:block;text-align:center;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.login-help{color:var(--muted);font-weight:500}
.login-apk[hidden],.login-install[hidden]{display:none}
/* R15-1 #18: one clear (×) in search boxes — the browser's own is hidden, our × (#qClear etc.) stays */
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{display:none;-webkit-appearance:none;appearance:none}
input[type=search]::-ms-clear{display:none}
/* R15-1 #7: Undo toasts sit above the bottom bar wherever it shows (it shows below 900 px) */
@media (max-width:899px){.toast{bottom:calc(86px + env(safe-area-inset-bottom))}}
/* R15-1 #21: Recent changes rows start with the action */
.list .item .ract{font-weight:700}
/* r20 (owner 2026-10-11): hold date over, "Is this piece free to sell?" box, buttons inside banners */
.banner.warn{background:var(--accent-soft);color:var(--ink)}
.banner.ok{background:var(--ok-soft);color:var(--ink)}
.banner small{display:block;color:var(--muted);margin-top:2px}
.pc-acts,.hold-over-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pc-box,.hold-over,.td-holdover{align-items:flex-start}
/* ---------- Slider fix 2026-10-11 (owner: "some sliders are not working properly") ---------- */
/* a swipe past the first / last photo stays in the slider (Chrome took it as "go back" and closed the page) */
.gallery .track,.gthumbs,.simrow,.catcircles{overscroll-behavior-x:contain}
/* things lying over the photos let a swipe through to the photos (nothing in them is tapped) */
.card .pic .tl,.card .holdband,.gallery .dots,.gallery .count{pointer-events:none}
/* the Move button: a sideways swipe that starts on it is the app's (it moves the photos), not the browser's */
.card .mvbtn,.gallery .garr{touch-action:pan-y}
/* the round gallery arrows only with a mouse — on a phone they sat where a thumb starts a swipe */
.gallery .garr{display:none}
@media (hover:hover) and (pointer:fine){
  .gallery .garr{display:grid}
  .simrow,.catcircles,.gthumbs{scrollbar-width:thin}
}
/* full-screen photo: a swipeable track, the counter on top */
.lightbox{overscroll-behavior:contain}
.lightbox .lbtrack{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.lightbox .lbtrack::-webkit-scrollbar{display:none}
.lightbox .lbslide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:center}
.lightbox .lbslide img{max-width:100%;max-height:100%;object-fit:contain}
.lightbox .prev,.lightbox .next{transform:translateY(-50%)}
.lightbox button{touch-action:none} /* a swipe that starts on a button still moves the photos (the app does it) */
.lightbox .lbcount{position:absolute;top:calc(24px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);color:#fff;background:rgba(255,255,255,.14);padding:5px 12px;border-radius:999px;font-weight:700;font-size:14px}
.rc-box:empty{display:none}.rc-box{margin:-4px 0 12px}.rc-chips{flex-wrap:wrap;gap:6px}.rc-lbl{margin-bottom:4px}
.locmgr{margin:8px 0 0;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* r26: label read by screen readers only (the section title already says it) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp2-there { margin: 0 0 10px; }
.td-wkline { width: 100%; margin: 0 0 12px; }
/* r29 (owner voice 2026-10-12 3:57 PM): "See the app as <name>" — a fixed amber bar on top, above sheets, with Back to me. */
.viewas-bar{position:fixed;top:0;left:0;right:0;z-index:240;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px calc(6px) 14px;padding-top:calc(6px + env(safe-area-inset-top));
  background:#F59E0B;color:#1B1203;font-size:14px;line-height:1.3;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.viewas-bar b{font-weight:800}
.viewas-bar .btn{flex:0 0 auto;min-height:40px;background:#1B1203;color:#FFF7E6;border:0;border-radius:var(--r-pill);padding:0 16px;font-weight:700}
/* r30 fixer: two buttons (Show their tour · Back to me) — on a phone the words take the first row, the buttons share the second */
@media (max-width:600px){.viewas-bar{flex-wrap:wrap;row-gap:6px}.viewas-bar>.grow{flex:1 1 calc(100% - 40px);min-width:0}.viewas-bar .btn{flex:1 1 0;min-width:0;padding:0 10px}}
/* r33: "Use the app as <name>" (owner, full use) shares the bar; one button, 44 px tall, never over an input (body.viewing) */
.actas-bar .btn{min-height:44px}
/* r29 fixer: --vabar = the bar's real height (app.js viewAsBar measures it; it wraps on a 360 px phone) */
body.viewing{padding-top:var(--vabar,calc(52px + env(safe-area-inset-top)))}
body.viewing .top{top:var(--vabar,calc(52px + env(safe-area-inset-top)))}
body.viewing .scrim{top:var(--vabar,calc(52px + env(safe-area-inset-top)))}
body.viewing .scrim>.sheet{max-height:min(calc(94dvh - var(--vabar,52px)),100%)}
body.viewing .scrim>.sheet.full{height:100%;max-height:100%}
.uviewas{margin:0 0 6px}
.uviewas-note{margin:0 0 12px;font-size:13px}
/* r29: the Sell a piece chooser — place chips (main showroom first) and "N more in other showrooms" */
.pp2-places{margin:8px 0 2px}
.pp2-places .chip.on{font-weight:700}
.pp2-more{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 12px;margin:4px 0 8px;border-radius:var(--r-sm);background:var(--surface-2);font-size:14px}

/* ---------- r30: onboarding tour (tour.js) — coach marks on the real screens, English / हिंदी ---------- */
#tour{position:fixed;inset:0;z-index:1000;pointer-events:auto;background:transparent;-webkit-tap-highlight-color:transparent}
#tour.dim{background:rgba(0,0,0,.62)}
#tour.full{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
.tour-ring{position:fixed;border-radius:14px;box-shadow:0 0 0 3px var(--accent),0 0 0 200vmax rgba(0,0,0,.62);pointer-events:auto;cursor:pointer;transition:left .2s var(--ease),top .2s var(--ease),width .2s var(--ease),height .2s var(--ease);animation:tour-pulse 1.2s ease-out 1}
@keyframes tour-pulse{0%{box-shadow:0 0 0 3px var(--accent),0 0 0 0 rgba(255,255,255,.55),0 0 0 200vmax rgba(0,0,0,.62)}100%{box-shadow:0 0 0 3px var(--accent),0 0 0 14px rgba(255,255,255,0),0 0 0 200vmax rgba(0,0,0,.62)}}
.tour-bub{position:fixed;box-sizing:border-box;background:var(--surface);color:var(--ink);border-radius:16px;padding:14px 16px 12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);font:400 16px/1.45 var(--font);letter-spacing:0}
.tour-bub.hi,.tour-card.hi{font-size:17px;line-height:1.6;letter-spacing:0}
.tour-bub b,.tour-card b{font-weight:800}
.tour-arr{position:absolute;width:16px;height:16px;background:var(--surface);transform:translateX(-50%) rotate(45deg);border-radius:3px}
.tour-bub[data-side="below"] .tour-arr{top:-7px}
.tour-bub[data-side="above"] .tour-arr{bottom:-7px}
.tour-bub.noarr .tour-arr{display:none}
.tour-r1{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;color:var(--muted)}
.tour-n{font-weight:700;color:var(--muted)}
.tour-pv{flex:1;font-size:12px;color:var(--warn,#9A6200)}
.tour-skip{margin-left:auto;min-height:44px;min-width:56px;padding:0 6px;border:0;background:transparent;color:var(--muted);font:600 15px var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tour-tx{margin:0;position:relative}
.tour-tip{margin:6px 0 0;font-size:14px;color:var(--muted)}
.tour-bub.hi .tour-tip{font-size:15px}
.tour-r3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.tour-r3 .btn{min-height:48px;padding:0 18px;font-size:16px}
.tour-next{min-width:112px;justify-content:center}
.tour-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:22px;padding:22px 20px 18px;box-shadow:0 24px 60px -16px rgba(0,0,0,.6);text-align:center;font:400 16px/1.5 var(--font)}
.tour-ct{margin:0 0 8px;font:800 22px/1.25 var(--font-head)}
.tour-cp{margin:0 0 8px}
.tour-cs{margin:4px 0 0;color:var(--muted);font-size:14px}
.tour-cacts{display:flex;gap:10px;margin-top:16px}
.tour-cacts .btn{flex:1;min-height:52px;justify-content:center;font-size:17px}
.tour-lchip{margin-top:12px;min-height:44px}
.tour-ok .i{width:44px;height:44px;color:var(--ok,#1F7A3D)}
.tour-card.lang{position:static;transform:none;box-shadow:none;background:transparent;width:min(420px,100%);display:flex;flex-direction:column;align-items:stretch;gap:12px}
.tour-card.lang .tour-ct{font-size:26px;margin:0}
.tour-wm{font:800 22px/1 var(--font-head);letter-spacing:.2em;margin:0 0 18px;text-align:center}
.tour-lbig{min-height:64px;width:100%;justify-content:center;font:800 22px/1 var(--font-head);border-radius:16px}
.tour-lbig:first-of-type{margin-top:18px}
/* r31: the known language pre-marked on the first-login language screen (still a tap), chapter cards, "Getting ready" */
.tour-lbig.on{box-shadow:0 0 0 4px var(--surface),0 0 0 7px var(--accent);gap:10px}
.tour-lbig.on .i{width:26px;height:26px}
.tour-pn{margin:0 0 6px;font-weight:700;font-size:14px;color:var(--accent)}
.tour-chacts{flex-wrap:wrap}
.tour-chacts .btn{flex:1 1 30%;min-width:0;padding:0 10px}
.tour-chacts .tour-cback{flex:0 0 auto}
@media (max-width:400px){.tour-chacts .btn{font-size:16px}}
.tour-prep{margin:6px 0;color:var(--muted)}
[lang="hi"]{letter-spacing:0}
body.tour-on .pwa-banner{display:none}
/* sign-in page English | हिंदी + the one Hindi help line */
.li-lang{display:flex;justify-content:flex-end;gap:6px;margin:0 0 6px}
.li-lang .chip{min-height:40px}
.li-hindi{margin:12px 0 0;font-size:16px;line-height:1.6;letter-spacing:0;color:var(--ink-2,var(--ink))}
/* Menu → How to use the app */
.help-tour .help-l{margin:16px 2px 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.help-tour .help-wa{margin-top:16px}
.tour-lchips .chip{min-height:44px;min-width:96px;justify-content:center}
#ufMgrNote{display:flex;gap:6px;align-items:center;margin:10px 0 0;color:var(--warn,#9A6200);font-weight:600}
/* r32 (migrate-data): Data → Catch-up from the old sheet, and the shared desk chips (A.typeChips / A.salesPersonChips / A.dateChips).
   Chrome 109 floor: no nesting, no color-mix, plain colours only. */
.cu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 0}
.cu-head b{font-size:15px}
.cu-head .n{display:inline-block;min-width:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:12px;text-align:center;margin-left:4px}
.cu-head .btn.plain{min-height:36px;padding:6px 10px;font-size:13px}
.cu-hint{margin:0 0 4px}
.cu-rows{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0 12px}
.cu-row{align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);min-height:48px}
.cu-row:last-child{border-bottom:0}
.cu-row input{margin-top:2px}
.cu-row .grow{min-width:0}
.cu-row small{display:block;font-weight:400;color:var(--muted);font-size:13px;line-height:1.4}
.cu-row em{font-style:normal;font-weight:400;color:var(--muted)}
.cu-row .cu-would{color:var(--ink-2);font-weight:600;margin-left:6px}
.cu-row.doubt{background:var(--sand-soft);margin:0 -12px;padding-left:12px;padding-right:12px}
.cu-row .cu-flag{display:flex;align-items:center;gap:4px;color:var(--danger);font-weight:600}
.cu-sum{margin-top:12px}
.cu-runrow{margin-top:14px}
.cu-done{margin-top:12px}
.tchips .chip,.spchips .chip,.datechips .chip{min-height:48px}
.tchips .chip.more{border-style:dashed}
.spchips .chip small{font-weight:400;opacity:.7;margin-left:2px}
.datechips .datechip{position:relative;padding:0}
.datechips .datechip span{padding:8px 15px}
.datechips .datechip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:0;cursor:pointer}
.datechips .datechip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* r40 design: "Book this design" on every card (48 px tap, full width at 360 px) + "3 more orders" + the product page list */
.card .cdorders{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#2f6b3a;color:var(--ok,#2f6b3a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cdorders .i{width:13px;height:13px;flex:none}
.card .cbook{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin-top:8px;padding:8px 10px;border:1px solid #d6d6d0;border:1px solid var(--line,#d6d6d0);border-radius:12px;background:transparent;color:inherit;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cbook .i{width:15px;height:15px;flex:none}
.dsgn-orders .list .item{min-height:48px}
.dsgn-orders .btn.block{width:100%;margin-top:10px;min-height:48px}