/* USL Porta CabinFlow · web app
   Layout: phone = header + scrolling content + bottom bar; wide screens = left sidebar + wider content grid.
   Two app themes (user's choice): data-skin="original" (dark green + amber) and data-skin="soft" (blue gradient, rounded). */

:root, [data-skin="soft"] {
  --bg: #F7FAFF; --surface: #FFFFFF; --surface2: #EEF4FE; --ink: #2A3768; --muted: #56658F; --line: #E1ECFB;
  --hdr: linear-gradient(150deg, #7DD6F8 0%, #6C8CF3 100%); --hdr-ink: #FFFFFF; --hdr-muted: rgba(255,255,255,.95);
  --hdr-chip: rgba(255,255,255,.22); --hdr-line: rgba(255,255,255,.7); --band: #CFE5FB;
  --primary: #4F67E0; --primary-bg: linear-gradient(90deg, #3D9AD6 0%, #4F67E0 100%); --primary-ink: #FFFFFF;
  --tile: linear-gradient(160deg, #6CC0F2 0%, #4F67E0 100%); --tile-ink: #FFFFFF;
  --tile2: linear-gradient(160deg, #FBCB8C 0%, #F29A4A 100%); --tile2-ink: #4A2604;
  --heading: #4560D6; --accent: #F5A55A; --sel-ink: #3E58C9;
  --good: #1E6F4A; --good-bg: #E2F6EC; --good-solid: #2E8B5E;
  --warn: #934808; --warn-bg: #FFF1DE;
  --bad: #A32D2D; --bad-bg: #FDE8E8; --bad-solid: #C23B3B;
  --info: #3E58C9; --info-bg: #EEF2FD;
  --r: 18px; --pill: 30px; --shadow: 0 8px 22px rgba(84,120,210,.14);
  --font: 'Montserrat', 'Noto Sans Bengali', 'Noto Sans Devanagari', system-ui, sans-serif;
  --num: 'Montserrat', system-ui, sans-serif;
  color-scheme: light;
}
[data-skin="original"] {
  --bg: #F4F5F2; --surface: #FFFFFF; --surface2: #EBEFEC; --ink: #14211C; --muted: #4A5A53; --line: #E1E6E3;
  --hdr: #14211C; --hdr-ink: #F4F5F2; --hdr-muted: #A9B8B0; --hdr-chip: #1E3029; --hdr-line: #3A5048; --band: transparent;
  --primary: #14211C; --primary-bg: #14211C; --primary-ink: #FFFFFF;
  --tile: #14211C; --tile-ink: #F4F5F2; --tile2: #F2B01E; --tile2-ink: #14211C;
  --heading: #14211C; --accent: #F2B01E; --sel-ink: #14211C;
  --good: #14532D; --good-bg: #DDF1E6; --good-solid: #1F7A4D;
  --warn: #7A4E0A; --warn-bg: #FFF2DC;
  --bad: #8A1C12; --bad-bg: #FDECEC; --bad-solid: #B42318;
  --info: #1E3A6E; --info-bg: #E3ECFB;
  --r: 14px; --pill: 14px; --shadow: none;
  --font: 'IBM Plex Sans', 'Noto Sans Bengali', 'Noto Sans Devanagari', system-ui, sans-serif;
  --num: 'IBM Plex Mono', 'IBM Plex Sans', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #F2A900; outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.shell { min-height: 100%; display: flex; }
.side { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.content { width: 100%; max-width: 1040px; margin: 0 auto; padding: 14px 16px 110px; display: flex; flex-direction: column; gap: 12px; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
.nb { border: 0; background: transparent; color: var(--muted); min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; cursor: pointer; position: relative; }
.nb[aria-current="page"] { color: var(--heading); font-weight: 700; }
.nb .dot { position: absolute; top: 6px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad-solid); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.fab { justify-self: center; width: 60px; height: 60px; margin-top: -26px; border: 0; border-radius: 18px; background: var(--tile2); color: var(--tile2-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(20,33,28,.3); }
[data-skin="soft"] .fab { border-radius: 50%; background: linear-gradient(150deg, #7DD6F8, #5A73E8); color: #fff; border: 4px solid #fff; }

@media (min-width: 960px) {
  .side { display: flex; flex-direction: column; width: 248px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; padding: 18px 12px; gap: 4px; overflow-y: auto; }
  .side .brand { padding: 4px 10px 16px; }
  .side .brand b { display: block; font-size: 11px; letter-spacing: 3px; color: var(--muted); }
  .side .brand span { font-size: 22px; font-weight: 800; color: var(--heading); }
  .side .sb { border: 0; background: transparent; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--ink); font-weight: 600; font-size: 14px; }
  .side .sb:hover { background: var(--surface2); }
  .side .sb[aria-current="page"] { background: var(--surface2); color: var(--heading); font-weight: 700; }
  .side .sb .dot { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; background: var(--bad-solid); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
  .side .sgap { height: 10px; }
  .side .slbl { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; padding: 8px 12px 4px; }
  .bottom-nav { display: none; }
  .content { padding-bottom: 40px; }
  .grid-auto { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------- header ---------- */
.hdr { position: relative; background: var(--hdr); color: var(--hdr-ink); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 18px; }
[data-skin="soft"] .hdr { border-bottom-left-radius: 60% 48px; border-bottom-right-radius: 40% 78px; box-shadow: 0 14px 0 var(--band); padding-bottom: 40px; margin-bottom: 22px; }
.hdr-in { max-width: 1040px; margin: 0 auto; position: relative; }
.hdr .decor { display: none; }
[data-skin="soft"] .hdr .decor { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.decor i { position: absolute; width: 12px; height: 12px; border: 2px solid rgba(40,60,160,.2); border-radius: 50%; }
.top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.top .ttl { flex: 1; min-width: 0; }
.hdr h1 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.hdr .sub { font-size: 13px; color: var(--hdr-muted); margin-top: 2px; }
.hdr.big h1 { font-size: 30px; font-weight: 800; letter-spacing: -.3px; }
.hdr.big .bigt { margin-top: 6px; padding-left: 2px; }
.ib { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: var(--hdr-chip); color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
[data-skin="soft"] .ib { background: transparent; }
.ib .dot { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad-solid); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.hchip { font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 14px; background: var(--hdr-chip); color: var(--hdr-ink); white-space: nowrap; }
.hseg { margin-top: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--pill); background: var(--hdr-chip); max-width: 520px; }
.hseg button { min-height: 40px; border: 0; border-radius: calc(var(--pill) - 4px); background: transparent; color: var(--hdr-ink); font-weight: 700; font-size: 13px; cursor: pointer; }
.hseg button[aria-pressed="true"] { background: #fff; color: var(--sel-ink); }
[data-skin="original"] .hseg button[aria-pressed="true"] { background: var(--accent); color: #14211C; }
.lift { position: relative; }
[data-skin="soft"] .lift { margin-top: -34px; }

/* login hero */
.hero { min-height: 300px; padding: calc(16px + env(safe-area-inset-top, 0px)) 22px 30px; }
[data-skin="soft"] .hero { border-bottom-left-radius: 60% 90px; border-bottom-right-radius: 40% 140px; margin-bottom: 30px; }
.hero .brandline { font-size: 15px; font-weight: 800; letter-spacing: 4px; }
.hero .logo { font-size: 50px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
[data-skin="original"] .hero .logo, [data-skin="original"] .hero .brandline { color: var(--accent); }
.lchip { min-width: 52px; height: 44px; padding: 0 10px; border-radius: 22px; border: 2px solid var(--hdr-line); background: transparent; color: var(--hdr-ink); font-weight: 700; cursor: pointer; }
.lchip[aria-pressed="true"] { background: #fff; color: var(--sel-ink); border-color: transparent; }
[data-skin="original"] .lchip[aria-pressed="true"] { background: var(--accent); color: #14211C; }
.login-body { max-width: 460px; margin: 0 auto; padding: 0 22px 40px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- blocks ---------- */
.card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; }
[data-skin="original"] .card { border: 1px solid var(--line); }
.card.tint-bad { background: var(--bad-bg); box-shadow: none; border-color: transparent; }
.card.tint-warn { background: var(--warn-bg); box-shadow: none; border-color: transparent; }
.card.edge-bad { outline: 2px solid var(--bad-solid); outline-offset: -2px; }
.card.edge-accent { outline: 2px dashed var(--accent); outline-offset: -2px; }
.card.dashed { border: 2px dashed var(--line); box-shadow: none; }
.card.dark { background: var(--primary-bg); color: var(--primary-ink); }
button.card, a.card { width: 100%; border: 0; text-align: left; cursor: pointer; display: block; color: inherit; text-decoration: none; font: inherit; }
[data-skin="original"] button.card { border: 1px solid var(--line); }
.list { padding: 0; overflow: hidden; }
.list > .row { padding: 12px 14px; }
.list > .row + .row { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; }
button.row { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t1 { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.t2 { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.b { font-weight: 700; }
.sec { font-size: 15px; font-weight: 700; color: var(--heading); margin: 6px 0 0; }
[data-skin="soft"] .sec { text-align: center; font-size: 17px; }
.note { font-size: 12px; color: var(--muted); }
.tc { text-align: center; }
.statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 2px; }
.statgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 4px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { font-size: 22px; font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--heading); }
.stat b.good { color: var(--good); } .stat b.warn { color: var(--warn); } .stat b.bad { color: var(--bad); }
.stat span { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; min-height: 100px; border: 0; border-radius: var(--r); background: var(--tile); color: var(--tile-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; font-weight: 700; font-size: 13px; text-align: center; cursor: pointer; }
[data-skin="soft"] .tile { box-shadow: 0 8px 18px rgba(79,103,224,.28); }
.tile.alt { background: var(--tile2); color: var(--tile2-ink); }
[data-skin="soft"] .tile.alt { box-shadow: 0 8px 18px rgba(242,154,74,.3); }
.tile .badge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: #9A4C0A; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.grid-auto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--info-bg); color: var(--info); }
[data-skin="original"] .ico { border-radius: 12px; }
.ico.good { background: var(--good-bg); color: var(--good); } .ico.warn { background: var(--warn-bg); color: var(--warn); } .ico.bad { background: var(--bad-bg); color: var(--bad); }
.pill { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 12px; white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good); } .pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); } .pill.info { background: var(--info-bg); color: var(--info); } .pill.mute { background: var(--surface2); color: var(--muted); }
.strip { display: flex; align-items: center; gap: 10px; border-radius: var(--r); padding: 11px 13px; font-size: 13px; font-weight: 600; }
.strip svg { flex-shrink: 0; }
.strip.bad { background: var(--bad-bg); color: var(--bad); } .strip.warn { background: var(--warn-bg); color: var(--warn); }
.strip.info { background: var(--info-bg); color: var(--info); } .strip.good { background: var(--good-bg); color: var(--good); }

/* controls */
.btn { min-height: 52px; border: 0; border-radius: var(--pill); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; text-align: center; cursor: pointer; line-height: 1.2; }
.btn.primary { background: var(--primary-bg); color: var(--primary-ink); }
[data-skin="soft"] .btn.primary { box-shadow: 0 10px 22px rgba(79,103,224,.28); }
.btn.cta { background: var(--tile2); color: var(--tile2-ink); }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn.danger { background: var(--surface); color: var(--bad); border: 2px solid var(--bad-solid); }
.btn.go { background: var(--good-solid); color: #fff; }
.btn.small { min-height: 40px; font-size: 13px; padding: 0 12px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.foot { position: sticky; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px; }
.foot-in { max-width: 1040px; margin: 0 auto; display: grid; gap: 10px; grid-template-columns: 1fr 2fr; }
.foot-in.one { grid-template-columns: 1fr; }
.foot-in .hint { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--muted); }
.has-nav .foot { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 960px) { .has-nav .foot { bottom: 0; } }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.inp { width: 100%; height: 50px; border-radius: var(--pill); border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; padding: 0 16px; }
[data-skin="soft"] .inp { border-color: #CFE2FA; }
textarea.inp { height: auto; min-height: 80px; padding: 12px 16px; border-radius: 14px; }
select.inp { appearance: auto; }
.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 15px; color: var(--muted); }
.search .inp { padding-left: 44px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--pill); background: var(--surface2); }
.seg button { min-height: 40px; border: 0; border-radius: calc(var(--pill) - 4px); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 0 6px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 2px 8px rgba(20,40,80,.1); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 13px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-ink); border-color: transparent; }
.stepper { display: flex; align-items: center; gap: 8px; }
.sbtn { width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--pill); border: 2px solid var(--line); background: var(--surface); color: var(--heading); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sbtn:disabled { opacity: .4; }
.sval { flex: 1; min-width: 0; height: 54px; border-radius: var(--pill); border: 0; background: var(--surface2); display: flex; align-items: center; justify-content: center; gap: 6px; cursor: text; }
.sval input { width: 100%; max-width: 140px; border: 0; background: transparent; text-align: center; font-size: 26px; font-weight: 800; font-family: var(--num); }
.stepper.compact .sbtn, .stepper.compact .sval { height: 44px; } .stepper.compact .sbtn { width: 44px; } .stepper.compact .sval input { font-size: 20px; }
.lbl-good { color: var(--good); font-size: 12px; font-weight: 700; }
.lbl-bad { color: var(--bad); font-size: 12px; font-weight: 700; }
.stepline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.stepline div { display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.stepline i { height: 6px; border-radius: 3px; background: var(--line); }
.stepline .done i { background: var(--good-solid); } .stepline .cur i { background: var(--accent); }
.stepline .done, .stepline .cur { color: var(--ink); font-weight: 700; }
.prog { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #7DD6F8, var(--primary)); }
[data-skin="original"] .prog i { background: var(--good-solid); }
.check { width: 34px; height: 34px; flex-shrink: 0; border-radius: 17px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--muted); }
.check.ok { background: var(--good-solid); border-color: transparent; color: #fff; }
.check.bad { background: var(--bad-solid); border-color: transparent; color: #fff; }
.qr { background: #fff; border-radius: 8px; padding: 4px; flex-shrink: 0; border: 1px solid var(--line); }
.qr svg { display: block; }
.av { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--info-bg); color: var(--info); }
.av i { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 6px; border: 2px solid var(--surface); }
.empty { padding: 18px; text-align: center; color: var(--muted); }
.spin { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: sp .8s linear infinite; margin: 30px auto; }
@keyframes sp { to { transform: rotate(360deg); } }
.mx-wrap { overflow-x: auto; }
.mx { border-collapse: collapse; font-size: 13px; min-width: 560px; width: 100%; }
.mx th { font-size: 11px; color: var(--muted); font-weight: 700; padding: 6px 4px; text-align: center; }
.mx th:first-child, .mx td:first-child { text-align: left; }
.mx td { padding: 2px 4px; text-align: center; border-top: 1px solid var(--line); }
.mx input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--good-solid); cursor: pointer; }
.mx select { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--surface); }
.sw { width: 56px; height: 32px; flex-shrink: 0; border: 0; border-radius: 16px; background: #C3CDD4; padding: 3px; display: flex; justify-content: flex-start; cursor: pointer; }
.sw[aria-checked="true"] { background: var(--good-solid); justify-content: flex-end; }
.sw i { display: block; width: 26px; height: 26px; border-radius: 13px; background: #fff; }
.choice { border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 10px; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; }
.choice[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.prev { height: 70px; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.prev .pb { height: 28px; } .prev .pr { display: flex; gap: 6px; padding: 8px; } .prev .pr span { flex: 1; height: 20px; border-radius: 6px; }
.lang { min-height: 104px; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--ink); }
.lang b { font-size: 28px; line-height: 1; }
.lang[aria-checked="true"] { border-color: transparent; background: var(--tile); color: var(--tile-ink); }
.lang[aria-checked="true"] .t2 { color: inherit; }
.photo { max-width: 100%; max-height: 220px; border-radius: 10px; display: block; margin-top: 6px; }

/* toast + sheet + scanner */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(560px, calc(100% - 32px));
  background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.toast.bad { background: var(--bad-solid); }
@media (min-width: 960px) { .toast { bottom: 24px; } }
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(10,20,30,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 700px) { .sheet-bg { align-items: center; } .sheet { border-radius: 20px; } }
.sheet h2 { margin: 0; font-size: 18px; }
.scan-bg { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; color: #fff; }
.scan-top { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; }
.scan-top h2 { flex: 1; margin: 0; font-size: 17px; }
.scan-top button { min-height: 44px; border: 0; background: rgba(255,255,255,.15); color: #fff; border-radius: 10px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.scan-view { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#qr-reader { width: 100%; max-width: 560px; }
#qr-reader video { width: 100% !important; height: auto !important; }
.scan-msg { position: absolute; left: 16px; right: 16px; bottom: 16px; border-radius: 12px; padding: 12px; font-weight: 700; }
.scan-msg.ok { background: var(--good-solid); } .scan-msg.no { background: var(--bad-solid); }
.scan-manual { background: #fff; color: #14211C; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; }
.scan-manual .inp { height: 48px; color: #14211C; }

/* ---------- printing ---------- */
#print-area { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; }
  .plabel { width: 50mm; height: 30mm; padding: 2mm; display: flex; gap: 2mm; align-items: center; page-break-after: always; break-after: page; overflow: hidden; font-family: Arial, sans-serif; color: #000; }
  .plabel svg { width: 24mm; height: 24mm; flex-shrink: 0; }
  .plabel .c { font-size: 8pt; font-weight: bold; } .plabel .n { font-size: 6.5pt; } .plabel .q { font-size: 9pt; font-weight: bold; } .plabel .x { font-size: 5.5pt; }
  .slip { font-family: Arial, sans-serif; color: #000; font-size: 10pt; }
  .slip table { width: 100%; border-collapse: collapse; margin-top: 8mm; }
  .slip th, .slip td { border: 1px solid #999; padding: 4px 6px; text-align: left; font-size: 9pt; }
}
.scan-manual .btn { white-space: nowrap; flex: none; }