/* BHL ERP — Bepary Holdings brand: navy blueprint, indigo mark, green BHL. Tokens first; light & dark. */
/* Colour, type and shape tokens — the one place to change the look (merged 12 Oct 2026 from the earlier v3/v10/v11 layers). */
:root {
  --paper: #f4f6fb; --panel: #ffffff; --panel-2: #f8fafd; --ink: #0e1726; --ink-2: #2f3b52; --muted: #5f6b84; --faint: #97a1b5; --line: #e1e6ef;
  --line-2: #edf1f7; --soft: #eef2f9; --brand: #1c3f99; --brand-2: #2554c7; --brand-ink: #ffffff; --brand-soft: #e9effd; --brand-line: #c3d2f6;
  --gold: #1f9d55; --accent: #1f9d55; --navy: #0b2257; --navy-2: #133a8f; --navy-ink: #e9effc; --ok: #157347; --ok-soft: #e3f4ea; --warn: #9a6200;
  --warn-soft: #fdf1dc; --bad: #b4332b; --bad-soft: #fbe6e3; --info: #2257b5; --info-soft: #e7effc; --bar: #2554c7; --bar-2: #dbe5fa; --radius: 12px;
  --radius-s: 9px; --shadow: 0 1px 2px rgba(14, 23, 38, .04), 0 6px 18px -10px rgba(14, 23, 38, .12); --shadow-l: 0 18px 44px rgba(14, 23, 38, .18);
  --font: "Hind Siliguri", "Kohinoor Bangla", "Noto Sans Bengali", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-num: "Inter", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --side-w: 252px; color-scheme: light;
  --grad-brand: linear-gradient(135deg, #18388c 0%, #2554c7 55%, #2f86d6 100%); --grad-green: linear-gradient(135deg, #14794a 0%, #2fae68 100%);
  --grad-amber: linear-gradient(135deg, #b85f0b 0%, #f0a23c 100%); --grad-violet: linear-gradient(135deg, #522e9c 0%, #8b62dc 100%);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a0f1d; --panel: #111a2e; --panel-2: #15203a; --ink: #e8edf7; --ink-2: #c4cde0; --muted: #8e9ab4; --faint: #5d6884; --line: #22304d;
    --line-2: #1a2540; --soft: #182340; --brand: #8fb3ff; --brand-2: #a9c4ff; --brand-ink: #0a1533; --brand-soft: #17264d; --brand-line: #2f4680;
    --gold: #74d394; --accent: #4cc06b; --navy: #08163a; --navy-2: #0d2258; --navy-ink: #e9effc; --ok: #86d9a6; --ok-soft: #143023; --warn: #f0c070;
    --warn-soft: #33281a; --bad: #f2a097; --bad-soft: #3a2220; --info: #9dbbe8; --info-soft: #182a46; --bar: #8fb3ff; --bar-2: #22325a; --shadow: none;
    --shadow-l: 0 12px 32px rgba(0, 0, 0, .5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a0f1d; --panel: #111a2e; --panel-2: #15203a; --ink: #e8edf7; --ink-2: #c4cde0; --muted: #8e9ab4; --faint: #5d6884; --line: #22304d;
  --line-2: #1a2540; --soft: #182340; --brand: #8fb3ff; --brand-2: #a9c4ff; --brand-ink: #0a1533; --brand-soft: #17264d; --brand-line: #2f4680;
  --gold: #74d394; --accent: #4cc06b; --navy: #08163a; --navy-2: #0d2258; --navy-ink: #e9effc; --ok: #86d9a6; --ok-soft: #143023; --warn: #f0c070;
  --warn-soft: #33281a; --bad: #f2a097; --bad-soft: #3a2220; --info: #9dbbe8; --info-soft: #182a46; --bar: #8fb3ff; --bar-2: #22325a; --shadow: none;
  --shadow-l: 0 12px 32px rgba(0, 0, 0, .5); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1 { font-size: 1.55rem; line-height: 1.3; margin: 0; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
h2 { font-size: 1.02rem; margin: 2rem 0 .7rem; font-weight: 650; display: flex; align-items: center; gap: .6rem; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; font-weight: 650; }
.boot { padding: 3rem; color: var(--muted); }
.muted { color: var(--muted); overflow-wrap: anywhere; }
.small { font-size: .84rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-num); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── shell ── */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--panel); border-right: 1px solid var(--line); padding: 1.1rem .8rem 2rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: .7rem; align-items: center; padding: .2rem .45rem 1.1rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.brand:hover { text-decoration: none; }
.mono { width: 38px; height: 38px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 600 1.05rem Georgia, "Times New Roman", serif; flex: none; }
.brand b { display: block; font-size: .95rem; line-height: 1.25; }
.brand small { display: block; color: var(--muted); font-size: .74rem; letter-spacing: .04em; }
.nav-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 1.1rem .55rem .3rem; font-weight: 600; }
.nav a { position: relative; display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem; border-radius: var(--radius-s); color: var(--ink-2); font-size: .92rem; }
.nav a svg { color: var(--faint); }
.nav a:hover { background: var(--soft); text-decoration: none; color: var(--ink); }
.nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav a.active svg { color: var(--brand); }
.nav a.active::before { content: ""; position: absolute; left: -.8rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav a .lbl { flex: 1; }
.badge { background: var(--bad); color: #fff; border-radius: 10px; padding: 0 .42rem; font-size: .7rem; min-width: 1.3rem; text-align: center; font-family: var(--font-num); line-height: 1.45; }
.badge.soft { background: var(--brand-soft); color: var(--brand); }
.main { padding: 0 2.25rem 4rem; max-width: 1320px; width: 100%; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; margin-bottom: .6rem; border-bottom: 1px solid var(--line-2); }
.crumbs { font-size: .84rem; color: var(--muted); display: flex; gap: .45rem; align-items: center; min-width: 0; }
.crumbs b { color: var(--ink); font-weight: 600; }
.user { display: flex; align-items: center; gap: .7rem; font-size: .84rem; color: var(--muted); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 600; font-size: .85rem; flex: none; }
.user .nm { color: var(--ink); font-weight: 600; display: block; line-height: 1.2; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg a { padding: .15rem .6rem; color: var(--muted); font-size: .78rem; }
.seg a.on { background: var(--brand); color: var(--brand-ink); }
.seg a:hover { text-decoration: none; }
.iconbtn { background: none; border: 1px solid var(--line); border-radius: var(--radius-s); width: 34px; height: 34px; display: inline-grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.menu-btn { display: none !important; }
.demo-flag { display: flex; gap: .6rem; align-items: center; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); padding: .45rem .8rem; border-radius: var(--radius-s); font-size: .84rem; margin: .4rem 0 1rem; }

/* ── page header ── */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 1.1rem 0 1.25rem; }
.ph .sub { color: var(--muted); font-size: .88rem; margin-top: .25rem; max-width: 760px; }
.ph .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 600; margin-bottom: .2rem; }

/* ── tiles ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: .8rem; margin: .5rem 0 1.25rem; }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem .85rem; box-shadow: var(--shadow); min-width: 0; }
.tile .k { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; padding-right: 1rem; }
.tile .v { font-size: 1.45rem; font-weight: 600; font-family: var(--font-num); font-variant-numeric: tabular-nums; margin-top: .3rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tile .s { font-size: .76rem; color: var(--muted); margin-top: .2rem; }
.tile.link { cursor: pointer; transition: border-color .15s; }
.tile.link:hover { border-color: var(--brand-line); }
.tile.link::after { content: "›"; position: absolute; right: .8rem; top: .7rem; color: var(--faint); font-size: 1.1rem; }
.tile.hero { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tile.hero .k, .tile.hero .s { color: color-mix(in srgb, var(--brand-ink) 78%, transparent); }
.tile.hero::after { color: color-mix(in srgb, var(--brand-ink) 70%, transparent); }
.tile.alert { border-left: 3px solid var(--bad); }
.tile.caution { border-left: 3px solid var(--warn); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; min-width: 0; }
.card > h3:first-child { margin-top: 0; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.card-h h3 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .38rem 1.2rem; font-size: .92rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ── tables ── */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: .89rem; }
th, td { padding: .58rem .75rem; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
th { background: var(--panel-2); font-weight: 600; font-size: .74rem; color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.click { cursor: pointer; }
tbody tr.click td:first-child { color: var(--brand); font-weight: 600; }
tfoot td { font-weight: 650; background: var(--panel-2); border-top: 1px solid var(--line); }
.empty { padding: 2rem 1rem; color: var(--muted); text-align: center; font-size: .9rem; }

/* ── pills ── */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .08rem .55rem; border-radius: 999px; font-size: .75rem; background: var(--soft); color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }

/* ── forms ── */
form.f { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem 1.1rem; align-items: end; }
form.f .full { grid-column: 1 / -1; }
label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .25rem; font-weight: 500; }
input, select, textarea { width: 100%; padding: .52rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); font: inherit; font-size: .92rem; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[readonly] { background: var(--panel-2); color: var(--muted); }
textarea { min-height: 72px; }
.req::after { content: " *"; color: var(--bad); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1rem; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--brand-line); text-decoration: none; background: var(--panel-2); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-2); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.small { padding: .26rem .65rem; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin: .25rem 0 1.1rem; flex-wrap: wrap; }
.tabs a { padding: .5rem .9rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .9rem; }
.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.note { background: var(--info-soft); color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--info) 18%, transparent); padding: .65rem .9rem; border-radius: var(--radius-s); font-size: .87rem; margin: .5rem 0 1rem; }
.note.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.note.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.note.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }

/* ── approval steps ── */
.steps { list-style: none; padding: 0; margin: .5rem 0 0; position: relative; }
.steps li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .6rem; padding: .55rem 0; position: relative; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: .62rem; top: 1.9rem; bottom: -.45rem; width: 2px; background: var(--line); }
.steps .dot { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); margin-top: .1rem; display: grid; place-items: center; font-size: .7rem; color: var(--brand-ink); }
.steps .done .dot { background: var(--ok); border-color: var(--ok); }
.steps .done .dot::after { content: "✓"; }
.steps .active .dot { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.steps .rejected .dot { background: var(--bad); border-color: var(--bad); }

/* ── units ── */
.unitgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .45rem; }
.unit { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .45rem .55rem; font-size: .78rem; background: var(--panel); line-height: 1.45; }
.unit b { display: block; font-size: .92rem; }
.unit.Available { border-top: 3px solid var(--ok); }
.unit.Reserved { border-top: 3px solid var(--warn); }
.unit.Booked, .unit.Sold { border-top: 3px solid var(--brand); background: var(--brand-soft); }
.unit.Handed { border-top: 3px solid var(--gold); }
.unit.Landowner, .unit.Retained { border-top: 3px solid var(--faint); background: var(--panel-2); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin: .2rem 0 .7rem; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.legend .l-av::before { background: var(--ok); } .legend .l-re::before { background: var(--warn); } .legend .l-bo::before { background: var(--brand); } .legend .l-ho::before { background: var(--gold); } .legend .l-lo::before { background: var(--faint); }
.bar { height: 6px; background: var(--bar-2); border-radius: 3px; overflow: hidden; min-width: 60px; }
.bar > span { display: block; height: 100%; background: var(--bar); border-radius: 3px; }

/* ── charts (single-series horizontal bars) ── */
.hbars { display: grid; gap: .55rem; }
.hbar { display: grid; grid-template-columns: minmax(90px, 170px) 1fr minmax(84px, auto); gap: .7rem; align-items: center; font-size: .84rem; }
.hbar .lab { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { display: block; height: 12px; background: var(--line-2); border-radius: 0 4px 4px 0; position: relative; }
.hbar .fill { display: block; height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar .val { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink); }
.hbar:hover .fill { background: var(--brand-2); }
#tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--paper); font-size: .8rem; padding: .35rem .6rem; border-radius: 5px; z-index: 60; display: none; white-space: nowrap; }


/* ── portal ── */
.portal-main { max-width: 980px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.portal-hero { background: #1f4e43; color: #f3efe6; border-radius: 12px; padding: 1.5rem 1.6rem; margin: 1rem 0 1.4rem; }
.portal-hero h1 { color: #fff; }
.portal-hero .sub { color: rgba(243, 239, 230, .8); }

/* ── toast & modal ── */
#toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translate(-50%, 10px); background: var(--ink); color: var(--paper); padding: .65rem 1.15rem; border-radius: var(--radius-s); font-size: .9rem; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 92vw; z-index: 70; box-shadow: var(--shadow-l); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--bad); color: #fff; }
.modal { position: fixed; inset: 0; background: rgba(18, 22, 20, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem; z-index: 40; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-box { background: var(--panel); border-radius: 12px; padding: 1.4rem 1.5rem 1.5rem; width: min(780px, 100%); border: 1px solid var(--line); box-shadow: var(--shadow-l); }
.modal-box h2 { margin-top: 0; font-size: 1.15rem; }
.modal-box h2::after { display: none; }

/* ── print ── */
.print-only { display: none; }
@media print {
  .side, .topbar, .no-print, .actions, #toast, .demo-flag { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  .print-only { display: block; }
  body { background: #fff; color: #000; font-size: 11.5px; }
  .card, .tablewrap, .tile { border: 1px solid #ccc; box-shadow: none; }
  h2::after { background: #ccc; }
}

@media (max-width: 920px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: var(--shadow-l); }
  .menu-btn { display: inline-grid !important; }
  .main { padding: 0 16px 4rem; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tile .v { font-size: 1.12rem; }
  .user .who-text { display: none; }
  .hbar { grid-template-columns: 90px 1fr 80px; }
  .crumbs .grp, .crumbs .sep { display: none; }
}

/* ═════ v3: modern refinements ═════ */
.tile { transition: border-color .15s, box-shadow .15s; }
.tile.link:hover { box-shadow: 0 4px 14px rgba(28, 33, 30, .07); }
.searchbtn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: .32rem .55rem .32rem .8rem; font: inherit; font-size: .84rem; cursor: pointer; min-width: 230px; justify-content: space-between; }
.searchbtn:hover { border-color: var(--brand-line); color: var(--ink); }
.kbd { font-family: var(--font-num); font-size: .7rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; color: var(--faint); background: var(--panel-2); }
.palette { position: fixed; inset: 0; background: rgba(18, 22, 20, .4); z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palette[hidden] { display: none; }
.palette-box { width: min(640px, 94vw); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-l); overflow: hidden; }
.palette-box input { border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1rem 1.1rem; font-size: 1rem; box-shadow: none !important; }
.palette-list { max-height: 52vh; overflow-y: auto; padding: .35rem; }
.palette-item { display: grid; grid-template-columns: 72px 1fr; gap: .7rem; align-items: center; padding: .55rem .7rem; border-radius: 8px; color: var(--ink); cursor: pointer; }
.palette-item:hover, .palette-item.sel { background: var(--brand-soft); text-decoration: none; }
.palette-item .kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.palette-item .t { font-weight: 600; font-size: .92rem; }
.palette-item .s { font-size: .8rem; color: var(--muted); }
.palette-foot { border-top: 1px solid var(--line-2); padding: .45rem .9rem; font-size: .76rem; color: var(--faint); display: flex; gap: 1rem; }
.tfilter { display: flex; gap: .6rem; align-items: center; margin: 0 0 .55rem; }
.tfilter input { max-width: 300px; padding: .38rem .6rem; font-size: .86rem; }
.tfilter .cnt { font-size: .78rem; color: var(--muted); }
th { position: sticky; top: 0; z-index: 1; }
.skel { background: linear-gradient(90deg, var(--line-2), var(--soft), var(--line-2)); background-size: 200% 100%; border-radius: 6px; height: 14px; margin: .45rem 0; }
.skel.h { height: 26px; width: 40%; margin-bottom: 1.2rem; }
.skel-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.skel-tiles div { height: 92px; border-radius: var(--radius); background: var(--line-2); }
.cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; padding-top: .6rem; border-bottom: 1px solid var(--line); }
.cols .c { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.cols .c span { display: block; background: var(--bar); border-radius: 4px 4px 0 0; min-height: 2px; }
.cols .c:hover span { background: var(--brand-2); }
.cols-x { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; font-size: .68rem; color: var(--muted); text-align: center; margin-top: .3rem; font-family: var(--font-num); }
.score { display: inline-flex; align-items: center; gap: .5rem; min-width: 120px; }
.score b { font-family: var(--font-num); min-width: 2ch; text-align: right; }
.score .bar { flex: 1; }
.score.hi .bar > span { background: var(--bad); }
.score.mid .bar > span { background: var(--warn); }
.brief { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.brief p { margin: .3rem 0; }
.brief .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 600; }
/* mobile staff app */
.mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.mbtn { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; padding: 1.1rem 1rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .95rem; min-height: 104px; }
.mbtn svg { width: 26px; height: 26px; color: var(--brand); }
.mbtn small { font-weight: 400; color: var(--muted); font-size: .78rem; }
.mbtn:hover { text-decoration: none; border-color: var(--brand-line); }
@media (max-width: 920px) { .searchbtn { min-width: 0; } .searchbtn .lbl, .searchbtn .kbd { display: none; } }

/* ═════ v4: control centre, cameras, gallery, tickets ═════ */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.gallery figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--soft); }
.gallery figcaption { padding: .45rem .65rem; font-size: .8rem; color: var(--muted); }
.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
.cam { background: #0e1110; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.cam .screen { position: relative; aspect-ratio: 16/9; background: #0e1110; }
.cam img, .cam iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.cam .live { position: absolute; top: 2.6rem; left: .6rem; background: #a33a32; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: .1rem .45rem; border-radius: 4px; }
.cam .live.off { background: #555; }
.cam .meta { padding: .55rem .8rem; background: var(--panel); display: flex; justify-content: space-between; gap: .6rem; font-size: .84rem; }
.switch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-2); }
.switch:last-child { border-bottom: none; }
.switch .t { font-weight: 600; font-size: .92rem; }
.switch .d { font-size: .8rem; color: var(--muted); }
.toggle { position: relative; width: 42px; height: 24px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: background .15s; }
.toggle span::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.toggle input:checked + span { background: var(--brand); }
.toggle input:checked + span::after { transform: translateX(18px); }
.lock { display: inline-flex; gap: .3rem; align-items: center; font-size: .74rem; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 999px; padding: 0 .5rem; }
.thread { display: grid; gap: .5rem; margin: .6rem 0; }
.msg { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: .55rem .8rem; font-size: .88rem; }
.msg.mine { background: var(--brand-soft); }
.msg.internal { border-style: dashed; background: var(--warn-soft); }
.msg .w { font-size: .74rem; color: var(--muted); margin-bottom: .15rem; }
.chainrow { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, 1fr)) 90px auto; gap: .5rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line-2); font-size: .86rem; }
.chainrow select, .chainrow input { padding: .3rem .4rem; font-size: .82rem; }
@media (max-width: 920px) { .cams { grid-template-columns: 1fr; } .chainrow { grid-template-columns: 1fr 1fr; } }

/* demo role picker */
.demo-pick { width: min(560px, 100%); margin-top: 1.4rem; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .45rem; margin-bottom: .6rem; }
.demo-user { text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: .5rem .65rem; cursor: pointer; font: inherit; display: grid; gap: .1rem; }
.demo-user:hover { border-color: var(--brand); background: var(--brand-soft); }
.demo-user b { font-size: .86rem; }
.demo-user span { font-size: .74rem; color: var(--muted); }

/* ═════ v5: Bepary Holdings brand — navy blueprint (from the company envelope), logo, CRM and procurement ═════ */
.blueprint { background-color: var(--navy); background-image: url(/blueprint.svg), linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 58%, #1d4fae 100%); background-size: cover, auto; background-position: center; }
.side { background: var(--navy); background-image: url(/blueprint.svg), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); background-size: 900px auto, auto; background-position: -260px 0, 0 0; border-right: none; color: var(--navy-ink); }
.side::-webkit-scrollbar { width: 6px; } .side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.brand { border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; padding-bottom: 1rem; }
.brand b { color: #fff; }
.brand small { color: rgba(233,239,252,.62); }
.logo-mark { height: 54px; width: auto; flex: none; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.brand .brand-name { font-family: Georgia, "Times New Roman", serif; letter-spacing: .01em; }
.nav-group { color: rgba(233,239,252,.45); }
.nav a { color: rgba(233,239,252,.84); }
.nav a svg { color: rgba(233,239,252,.55); }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.active { background: rgba(255,255,255,.12); color: #fff; }
.nav a.active svg { color: #fff; }
.nav a.active::before { background: var(--accent); }
.badge.soft { background: rgba(255,255,255,.14); color: #fff; }
.ph { position: relative; padding-left: .9rem; }
.ph::before { content: ""; position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 3px; border-radius: 2px; background: linear-gradient(var(--brand), var(--accent)); }
.unit.Handed { border-top-color: var(--ink-2); }
.legend .l-ho::before { background: var(--ink-2); }
.brief { border-left-color: var(--accent); }


/* portal */
.portal-hero { background-color: var(--navy); background-image: url(/blueprint.svg), linear-gradient(155deg, #0b2259 0%, #12378a 60%, #1d4fae 100%); background-size: cover, auto; color: var(--navy-ink); position: relative; overflow: hidden; }
.portal-hero .sub { color: rgba(233,239,252,.82); }
.portal-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--ink); }
.portal-brand img { height: 40px; width: auto; }

/* print letterhead */
.letterhead { display: none; align-items: center; gap: 14px; border-bottom: 3px solid #1a3f94; padding-bottom: 8px; margin-bottom: 14px; }
.letterhead img { height: 74px; width: auto; }
.letterhead .lh-name { font: 700 20px Georgia, "Times New Roman", serif; color: #1a3f94; }
.letterhead .lh-tag { color: #1f7f41; font-weight: 600; font-size: 12px; }
.letterhead .lh-addr { font-size: 11px; color: #444; }
@media print { .letterhead { display: flex; } }

/* CRM: pipeline board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: .7rem; overflow-x: auto; padding-bottom: .6rem; align-items: start; }
.lane { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); min-height: 220px; display: flex; flex-direction: column; }
.lane-h { padding: .6rem .75rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; position: sticky; top: 0; }
.lane-h b { font-size: .88rem; }
.lane-h span { font-size: .74rem; color: var(--muted); font-family: var(--font-num); }
.lane.Booked .lane-h { border-top: 3px solid var(--ok); } .lane.Lost .lane-h { border-top: 3px solid var(--faint); }
.lane.New .lane-h, .lane.Contacted .lane-h, .lane.Qualified .lane-h, .lane[class*="Site"] .lane-h, .lane.Negotiation .lane-h { border-top: 3px solid var(--brand); }
.lane-body { padding: .5rem; display: grid; gap: .45rem; flex: 1; align-content: start; }
.lane.over { outline: 2px dashed var(--brand); outline-offset: -4px; }
.lead-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .65rem; font-size: .8rem; cursor: grab; display: grid; gap: .2rem; }
.lead-card:hover { border-color: var(--brand-line); }
.lead-card.drag { opacity: .45; }
.lead-card .nm { font-weight: 600; font-size: .88rem; color: var(--ink); }
.lead-card .mt { color: var(--muted); display: flex; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.lead-card .hot { color: var(--bad); font-weight: 600; } .lead-card .warm { color: var(--warn); font-weight: 600; }
.lead-card .late { color: var(--bad); }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 0 .9rem; }
.filters select, .filters input { width: auto; min-width: 150px; padding: .38rem .55rem; font-size: .85rem; }

/* CRM: quick actions & timeline */
.quick { display: flex; gap: .45rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
.quick a, .quick button { display: inline-flex; align-items: center; gap: .4rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 92px 1fr; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line-2); font-size: .86rem; }
.timeline li:last-child { border-bottom: none; }
.timeline .when { color: var(--muted); font-family: var(--font-num); font-size: .76rem; }
.timeline .k { display: inline-block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-right: .4rem; }

/* CRM: calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.cal .dh { background: var(--panel-2); font-size: .74rem; color: var(--muted); padding: .4rem; text-align: center; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
.cal .day { min-height: 104px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: .3rem .35rem; font-size: .74rem; display: grid; align-content: start; gap: .18rem; min-width: 0; }
.cal .day:nth-child(7n) { border-right: none; }
.cal .day.out { background: var(--panel-2); color: var(--faint); }
.cal .day.today { box-shadow: inset 0 0 0 2px var(--brand); }
.cal .num { font-family: var(--font-num); font-weight: 600; font-size: .78rem; }
.cal .ev { display: block; border-radius: 4px; padding: .05rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); background: var(--brand-soft); }
.cal .ev.VISIT { background: var(--ok-soft); } .cal .ev.TASK { background: var(--warn-soft); } .cal .ev.HANDOVER { background: var(--info-soft); }
.cal .ev.done { text-decoration: line-through; opacity: .6; }
@media (max-width: 920px) { .cal .day { min-height: 70px; } .cal .ev { font-size: .66rem; } }

/* quotation / PO document */
.doc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow); }
.doc .doc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 3px solid var(--brand); padding-bottom: .9rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.doc .doc-h .co { display: flex; gap: .8rem; align-items: center; }
.doc .doc-h img { height: 96px; width: auto; display: block; margin-bottom: .3rem; }
.doc .doc-h .co { flex-direction: column; align-items: flex-start; gap: .2rem; }
.doc .doc-h .nm { font: 700 1.25rem Georgia, "Times New Roman", serif; color: var(--brand); }
.doc .doc-h .tg { color: var(--gold); font-weight: 600; font-size: .84rem; }
.doc .doc-h .ttl { text-align: right; }
.doc .doc-h .ttl b { display: block; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; }
.doc .big { font: 700 1.6rem var(--font-num); color: var(--brand); }
.doc .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.6rem; font-size: .84rem; color: var(--muted); }
.doc .sign div { border-top: 1px solid var(--line); padding-top: .35rem; }
@media print { .doc { border: none; box-shadow: none; padding: 0; } .doc .doc-h { border-bottom-color: #1a3f94; } }
.lines-ed { display: grid; gap: .4rem; }
.lines-ed .row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .4rem; align-items: center; }
@media (max-width: 920px) { .lines-ed .row { grid-template-columns: 1fr 1fr; } }
.lowstock { color: var(--bad); font-weight: 600; }

/* ═════ v6: night-mode switch, inquiry, cash flow, money receipt ═════ */
.themebtn svg { width: 17px; height: 17px; }
.seg.big a { padding: .4rem .9rem; font-size: .86rem; }
.doc .doc-h img, .letterhead img, .receipt .r-head img { background: #fff; border-radius: 6px; padding: 4px; }
.inq-bar { display: grid; grid-template-columns: minmax(170px, 220px) minmax(200px, 1fr) auto; gap: .6rem; align-items: end; margin-bottom: 1rem; }
.inq-bar .two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 920px) { .inq-bar { grid-template-columns: 1fr; } }
.cf-table td.grp { font-weight: 650; background: var(--panel-2); }
.cf-table td.ind { padding-left: 1.6rem; }
.quickrange { display: flex; gap: .35rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
.receipt { background: #fff; color: #131a2b; border: 1px solid var(--line); border-radius: 10px; padding: 1.6rem 1.8rem; max-width: 820px; position: relative; overflow: hidden; }
.receipt .r-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 3px solid #1a3f94; padding-bottom: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.receipt .r-head img { height: 92px; width: auto; }
.receipt .r-title { text-align: right; }
.receipt .r-title b { display: block; font-size: 1.25rem; letter-spacing: .06em; color: #1a3f94; }
.receipt .r-grid { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; font-size: .95rem; }
.receipt .r-grid dt { color: #5d6882; }
.receipt .r-grid dd { margin: 0; border-bottom: 1px dotted #c9d1e2; }
.receipt .r-amount { display: flex; gap: 1rem; align-items: center; margin: 1.2rem 0; flex-wrap: wrap; }
.receipt .r-amount .box { border: 2px solid #1a3f94; border-radius: 8px; padding: .4rem 1rem; font: 700 1.5rem var(--font-num); color: #1a3f94; }
.receipt .r-words { font-size: .95rem; }
.receipt .r-sign { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-top: 3rem; font-size: .82rem; color: #5d6882; text-align: center; }
.receipt .r-sign div { border-top: 1px solid #9aa3b8; padding-top: .3rem; }
.rp { position: relative; overflow: hidden; }      /* the party report's DUPLICATE mark is a faint diagonal stamp like the receipts' */
.receipt .wm, .rp .wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 800 4.5rem Georgia, serif; color: rgba(168, 53, 45, .12); transform: rotate(-24deg); letter-spacing: .1em; }
.receipt .r-foot { margin-top: 1.4rem; font-size: .76rem; color: #5d6882; border-top: 1px solid #e8ecf3; padding-top: .5rem; }
@media print { .receipt { border: none; padding: 0; max-width: none; } }
.rcpt-i svg.i { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }

/* ═════ v7: the owner's master logo (logo mul fail.ai), never recoloured or redrawn — on dark surfaces it sits on a white card ═════ */
.logo-card { display: inline-block; background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); line-height: 0; }
.logo-card img { display: block; width: 100%; height: auto; }
.brand { flex-direction: column; align-items: stretch; gap: .45rem; padding: .3rem .3rem 1rem; }
.brand .logo-card { width: 100%; max-width: 212px; align-self: center; }
.brand small { text-align: center; }
.enq-top .logo-card.big { padding: 12px 14px; border-radius: 14px; }
.portal-brand.logo-card { padding: 3px 6px; border-radius: 7px; box-shadow: none; border: 1px solid var(--line); }
.portal-brand.logo-card img { height: 40px; width: auto; }

/* ═════ v8 (7 Oct 2026, owner's direction): logo with no white backing; plain menu bar; the envelope's faint blueprint and
   logo only on the right side of the page; one layout for staff and portals; app-style bottom bar on phones ═════ */
.side { background: var(--panel); background-image: none; border-right: 1px solid var(--line); color: var(--ink); }
.side::-webkit-scrollbar-thumb { background: var(--line); }
.brand { flex-direction: column; align-items: center; gap: .35rem; border-bottom: 1px solid var(--line-2); color: var(--ink); padding: .2rem .3rem .9rem; }
.brand:hover { text-decoration: none; }
.brand .brand-logo { width: 100%; max-width: 168px; height: auto; display: block; }
.brand small { color: var(--muted); text-align: center; font-size: .72rem; letter-spacing: .02em; }
.nav-group { color: var(--faint); }
.nav a { color: var(--ink-2); }
.nav a svg { color: var(--faint); }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a.active { background: var(--brand-soft); color: var(--brand); }
.nav a.active svg { color: var(--brand); }
.nav a.active::before { background: var(--brand); }
.badge.soft { background: var(--brand-soft); color: var(--brand); }
.logo-card, .logo-card.big { background: none; box-shadow: none; padding: 0; border: 0; }

/* faint envelope watermark — right side only, never behind the menu */
.wm-right { position: fixed; top: 0; right: 0; bottom: 0; width: min(48vw, 820px); pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%); mask-image: linear-gradient(to right, transparent 0, #000 38%); }
.wm-right .wm-bp { position: absolute; inset: 0; background: url(/blueprint-ink.svg) no-repeat right top / cover; opacity: .5; }
.wm-right .wm-logo { position: absolute; right: 3vw; bottom: 5vh; width: min(30vw, 440px); aspect-ratio: 1.11; background: url(/brand/logo.png) no-repeat center / contain; opacity: .06; filter: saturate(.6); }
.shell { position: relative; z-index: 1; }
.main { position: relative; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm-right .wm-bp { background-image: url(/blueprint.svg); opacity: .18; } :root:not([data-theme="light"]) .wm-right .wm-logo { opacity: .07; } }
:root[data-theme="dark"] .wm-right .wm-bp { background-image: url(/blueprint.svg); opacity: .18; }
:root[data-theme="dark"] .wm-right .wm-logo { opacity: .07; }
@media print { .wm-right { display: none; } }


/* phones: the menu slides in over a scrim; a bottom tab bar makes it feel like an app */
.side-scrim { display: none; }
.bottombar { display: none; }
@media (max-width: 920px) {
  .side.open + .side-scrim { display: block; position: fixed; inset: 0; background: rgba(10, 16, 32, .38); z-index: 25; }
  .bottombar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--panel);
    border-top: 1px solid var(--line); padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(19, 26, 43, .06); }
  .bottombar a { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .68rem; color: var(--muted); padding: .25rem 0; position: relative; }
  .bottombar a svg { width: 22px; height: 22px; }
  .bottombar a.on { color: var(--brand); font-weight: 600; }
  .bottombar a:hover { text-decoration: none; }
  .bottombar .badge { position: absolute; top: 0; left: 54%; }
  .main { padding-bottom: 5.5rem; }
  .wm-right { width: 100vw; -webkit-mask-image: none; mask-image: none; }
  .wm-right .wm-logo { width: 62vw; right: 6vw; bottom: 12vh; }
}
@media (display-mode: standalone) { .topbar { padding-top: calc(.85rem + env(safe-area-inset-top)); } }

/* feed */
.feed { display: grid; gap: 1rem; max-width: 760px; }
.post { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.post.pinned { border-color: var(--brand-line); }
.post img.pi { width: 100%; max-height: 420px; object-fit: cover; display: block; background: var(--soft); }
.post .pb { padding: .9rem 1.1rem 1rem; }
.post .pm { font-size: .78rem; color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.post h3 { margin: .35rem 0 .3rem; font-size: 1.08rem; }
.post .pt { white-space: pre-line; color: var(--ink-2); font-size: .93rem; }
.post .pa { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; }
.post .liked { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.kind { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--brand); }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: .5rem 0 1.2rem; }
.qgrid a { display: flex; flex-direction: column; gap: .4rem; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font-weight: 600; font-size: .9rem; }
.qgrid a svg { width: 24px; height: 24px; color: var(--brand); }
.qgrid a:hover { text-decoration: none; border-color: var(--brand-line); }
.install-steps { line-height: 1.9; }
@media (max-width: 920px) {
  .topbar { gap: .4rem; }
  .user { gap: .35rem; }
  .user .avatar { display: none; }
  .crumbs b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
  #switchrole { padding: .2rem .45rem; font-size: .72rem; }
  .topbar #logout { white-space: nowrap; font-size: .78rem; }
  .seg a { padding: .15rem .45rem; }
}

/* ═════ simple menu: work-area tabs; portfolio; construction ═════ */
.hubtabs { display: flex; gap: .3rem; overflow-x: auto; margin: .2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.hubtabs a { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .42rem .8rem; border-radius: 999px; color: var(--ink-2); font-size: .86rem; border: 1px solid transparent; }
.hubtabs a svg { width: 15px; height: 15px; color: var(--faint); }
.hubtabs a:hover { background: var(--soft); text-decoration: none; }
.hubtabs a.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); font-weight: 600; }
.hubtabs a.on svg { color: var(--brand); }
.zonegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.zone { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; display: grid; gap: .15rem; cursor: pointer; font: inherit; color: var(--ink); }
.zone:hover { border-color: var(--brand-line); }
.zone.on { border-color: var(--brand); background: var(--brand-soft); }
.labgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.labgrid .lab { display: grid; grid-template-columns: 1fr 70px; gap: .4rem; align-items: center; font-size: .84rem; color: var(--ink-2); margin: 0; }
.labgrid .lab input { padding: .35rem .45rem; }

/* ───────── Phase 11: one person, many roles · track · business limits ───────── */
.hat { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid var(--line); background: var(--soft); color: var(--ink-2); white-space: nowrap; }
.hat-C { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.hat-I { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.hat-L { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.hat-B { background: var(--info-soft); color: var(--info); border-color: transparent; }
.hatbar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .2rem 0 .8rem; padding: .35rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.hatbar > .small { padding: 0 .4rem; }
.hatbar a { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .85rem; border-radius: 9px; color: var(--ink-2); font-size: .88rem; }
.hatbar a svg { width: 15px; height: 15px; }
.hatbar a:hover { background: var(--soft); text-decoration: none; }
.hatbar a.on { background: var(--brand); color: #fff; font-weight: 600; }
.overview { margin-bottom: .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.chips .chip { padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: .84rem; }
.chips .chip:hover { background: var(--soft); text-decoration: none; }
.chips .chip.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); font-weight: 600; }
.trackbox { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 640px; }
.trackbox input { flex: 1; font-size: 1.02rem; padding: .7rem .85rem; }
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tl { list-style: none; margin: 0 0 1.2rem; padding: 0 0 0 1rem; border-left: 2px solid var(--line); }
.tl li { position: relative; display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; padding: .45rem 0; }
.tl li::before { content: ''; position: absolute; left: calc(-1rem - 6px); top: .8rem; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--faint); }
.tl li.tl-step::before { border-color: var(--ok); }
.tl li.tl-voucher::before { border-color: var(--brand); }
.tl li.tl-create::before { background: var(--brand); border-color: var(--brand); }
.tl-at { color: var(--muted); font-size: .82rem; font-family: var(--font-num); padding-top: .1rem; }
.limits { display: grid; gap: .1rem; }
.limit { display: grid; grid-template-columns: 1fr 190px; gap: 1rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.limit label { display: grid; gap: .1rem; margin: 0; }
.limit .t { font-weight: 600; color: var(--ink); }
.limit-in { display: flex; align-items: center; gap: .4rem; }
.limit-in input { text-align: right; }
.limit-in .u { min-width: 2rem; color: var(--muted); font-size: .85rem; }
.limits .actions { padding-top: .8rem; }
@media (max-width: 640px) {
  .tl li { grid-template-columns: 1fr; gap: .1rem; }
  .limit { grid-template-columns: 1fr; gap: .4rem; }
  .trackbox { flex-direction: column; }
}

/* ═════ v9 (8 Oct 2026): app-style home page, sign-in card, splash, raised centre tab ═════ */
.splash { position: fixed; inset: 0; z-index: 100; background: #fff; display: grid; place-items: center; align-content: center; gap: 2rem; }
.splash img { width: min(240px, 58vw); height: auto; }
.splash span { position: absolute; bottom: calc(2rem + env(safe-area-inset-bottom)); font-size: .78rem; color: #5d6882; }

/* sign-in */
.auth { position: relative; min-height: 100vh; display: grid; justify-items: center; align-content: center; padding: 4.5rem 16px 2.5rem; background: var(--paper); overflow: hidden; }
.auth-bp { position: absolute; inset: 0 0 auto 0; height: 46vh; background: var(--navy) url(/blueprint.svg) center / cover; }
.auth-bp::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 60px; background: var(--paper); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.auth-top { position: absolute; top: calc(.9rem + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.auth-top .themebtn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
.auth-back { display: inline-flex; align-items: center; gap: .3rem; color: #fff; font-weight: 600; font-size: .92rem; padding: .35rem .6rem .35rem .35rem; border-radius: 8px; }
.auth-back:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.auth-card { position: relative; z-index: 1; width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 2rem 1.6rem 1.5rem; box-shadow: 0 18px 44px rgba(12, 37, 96, .18); text-align: center; }
.auth-logo { width: 190px; max-width: 70%; height: auto; display: block; margin: 0 auto 1.1rem; }
.auth-card h1 { font-size: 1.45rem; color: var(--brand); }
.auth-sub { color: var(--muted); font-size: .9rem; margin: .3rem 0 1.4rem; }
.auth-form { display: grid; gap: .8rem; text-align: left; }
.field { position: relative; display: flex; align-items: center; margin: 0; }
.field > svg.i { position: absolute; left: .9rem; color: var(--faint); pointer-events: none; }
.field input { padding: .8rem .9rem .8rem 2.7rem; border-radius: 10px; font-size: 1rem; }
.field .eye { position: absolute; right: .4rem; background: none; border: 0; color: var(--faint); padding: .4rem; cursor: pointer; border-radius: 6px; }
.field .eye:hover { color: var(--brand); }
.auth-form .btn.big { width: 100%; justify-content: center; padding: .85rem 1rem; font-size: 1rem; border-radius: 10px; margin-top: .2rem; }
.auth-help { font-size: .8rem; color: var(--muted); margin: 1.1rem 0 0; }
.auth-foot { position: relative; z-index: 1; margin-top: 1.6rem; font-size: .78rem; color: var(--faint); }
.auth .demo-pick { position: relative; z-index: 1; width: min(560px, 100%); }
:root[data-theme="dark"] .auth-bp { background-color: #08163a; }

/* raised centre tab (app look) */
.bottombar a.mid, .s-tabbar a.mid { position: relative; }
.midb { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: var(--brand); color: #fff; border: 4px solid var(--panel); box-shadow: 0 6px 16px rgba(12, 37, 96, .28); }
.midb svg.i { width: 22px; height: 22px; }
.bottombar a.mid.on { color: var(--brand); }

/* public home page */
.site { background: var(--paper); min-height: 100vh; }
.s-wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.s-head { position: sticky; top: 0; z-index: 30; background: var(--panel); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.s-bar { display: flex; align-items: center; gap: .9rem; height: 68px; }
.s-menu, .s-backbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; flex: none; }
.s-menu:hover, .s-backbtn:hover { border-color: var(--brand-line); color: var(--brand); text-decoration: none; }
.s-logo img { height: 46px; width: auto; display: block; }
.s-nav { display: flex; gap: 1.3rem; margin-left: auto; }
.s-nav a { color: var(--ink-2); font-weight: 600; font-size: .94rem; }
.s-nav a:hover { color: var(--brand); text-decoration: none; }
.s-act { display: flex; align-items: center; gap: .55rem; }
.s-login { gap: .4rem; }
.s-scrim { position: fixed; inset: 0; background: rgba(10, 16, 32, .42); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
.s-scrim.open { opacity: 1; pointer-events: auto; }
.s-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); z-index: 41; background: var(--panel); transform: translateX(-102%); transition: transform .22s ease; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
.s-drawer.open { transform: none; box-shadow: var(--shadow-l); }
.s-dhead { display: flex; align-items: center; justify-content: space-between; padding: calc(1rem + env(safe-area-inset-top)) 1rem 1rem 1.2rem; border-bottom: 3px solid var(--brand); background: var(--panel-2); }
.s-dhead img { height: 52px; width: auto; }
.s-dnav { display: grid; padding: .6rem; }
.s-dnav a { display: flex; align-items: center; gap: .9rem; padding: .78rem .8rem; border-radius: 10px; color: var(--ink); font-weight: 500; }
.s-dnav a svg { color: var(--brand); }
.s-dnav a:hover { background: var(--soft); text-decoration: none; }
.s-dact { display: grid; gap: .55rem; padding: .6rem 1.2rem 1rem; border-top: 1px solid var(--line-2); }
.s-dact .btn { justify-content: center; }
.s-hot { margin: auto 1rem 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--soft); display: grid; gap: .1rem; color: var(--ink); }
.s-hot span { font-size: .78rem; color: var(--muted); }
.s-hot b { display: flex; align-items: center; gap: .45rem; color: var(--brand); font-size: 1.05rem; font-family: var(--font-num); }
.s-hot:hover { text-decoration: none; }
.s-top { padding: 1rem 0 .4rem; }
.s-search { display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0 .9rem; margin-bottom: 1rem; }
.s-search svg { color: var(--faint); }
.s-search input { border: 0; background: none; padding: .8rem 0; font-size: 1rem; box-shadow: none; }
.s-search input:focus { outline: none; box-shadow: none; }
.s-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.s-slider { position: relative; border-radius: 16px; overflow: hidden; background: var(--soft); }
.s-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.s-slides::-webkit-scrollbar { display: none; }
.s-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 8; color: #fff; display: block; }
.s-slide:hover { text-decoration: none; }
.s-slide .art, .s-img .art, .s-pcimg .art, .s-phero .art { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-scap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.3rem 1.6rem; background: linear-gradient(transparent, rgba(8, 18, 48, .78)); display: grid; gap: .25rem; justify-items: start; }
.s-scap b { font-size: clamp(1.15rem, 2.6vw, 1.8rem); line-height: 1.25; }
.s-scap > span:last-child { display: flex; align-items: center; gap: .3rem; opacity: .9; font-size: .92rem; }
.s-scap svg { width: 15px; height: 15px; }
.s-dots { position: absolute; left: 0; right: 0; bottom: .55rem; display: flex; justify-content: center; gap: .35rem; }
.s-dots button { width: 7px; height: 7px; border-radius: 99px; border: 0; padding: 0; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .2s; }
.s-dots button.on { width: 22px; background: #fff; }
.s-intro { text-align: center; max-width: 760px; margin: 1.8rem auto .6rem; }
.s-intro h1 { font-size: clamp(1.45rem, 3.4vw, 2.4rem); line-height: 1.25; color: var(--brand); margin-bottom: .7rem; }
.s-intro p { color: var(--ink-2); font-size: 1.02rem; margin: 0; }
.s-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.3rem; }
.btn.big { padding: .75rem 1.3rem; font-size: .98rem; border-radius: 10px; }
.s-sec { padding: 3.2rem 0; }
.s-sec.s-tight { padding: 1.4rem 0; }
.s-alt { background: var(--panel-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.s-title { text-align: center; margin: 0 auto 1.8rem; max-width: 680px; }
.s-title h2, .s-about h2, .s-contact h2, .s-ctaband h2 { display: block; font-size: clamp(1.35rem, 2.6vw, 2rem); margin: 0 0 .5rem; color: var(--brand); line-height: 1.3; }
.s-title h2::after, .s-about h2::after, .s-contact h2::after, .s-ctaband h2::after, .s-h::after { display: none; }
.s-title h2 { padding-bottom: .7rem; position: relative; }
.s-title h2::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--brand); transform: translateX(-50%); }
.s-title p { color: var(--muted); margin: 0; }
.s-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.s-stat { border-radius: 14px; padding: 1.1rem 1rem; text-align: center; display: grid; justify-items: center; gap: .15rem; border: 1px solid var(--line); background: var(--panel); }
.s-sic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: .35rem; color: #fff; }
.s-stat b { font: 700 1.7rem var(--font-num); color: var(--ink); }
.s-stat > span:last-child { color: var(--muted); font-size: .88rem; }
.t-blue .s-sic { background: #2453b8; } .t-blue { background: color-mix(in srgb, #2453b8 6%, var(--panel)); }
.t-green .s-sic { background: #2b8a4b; } .t-green { background: color-mix(in srgb, #2b8a4b 6%, var(--panel)); }
.t-amber .s-sic { background: #c77a12; } .t-amber { background: color-mix(in srgb, #c77a12 7%, var(--panel)); }
.t-violet .s-sic { background: #6b3fa8; } .t-violet { background: color-mix(in srgb, #6b3fa8 6%, var(--panel)); }
.s-chips { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: 1.1rem; scrollbar-width: none; justify-content: center; flex-wrap: wrap; }
.s-chips button { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.s-chips button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; }
.s-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); }
.s-card:hover { text-decoration: none; border-color: var(--brand-line); box-shadow: 0 10px 26px rgba(19, 26, 43, .09); }
.s-card[hidden] { display: none; }
.s-img { position: relative; aspect-ratio: 16 / 10; background: var(--soft); }
.s-badge { position: absolute; top: .7rem; left: .7rem; }
.s-cb { padding: .95rem 1.05rem 1.05rem; display: grid; gap: .45rem; }
.s-cb h3 { margin: 0; font-size: 1.1rem; }
.s-loc { color: var(--muted); font-size: .88rem; display: flex; gap: .3rem; align-items: center; }
.s-loc svg, .s-specs svg, .s-meta svg { width: 15px; height: 15px; }
.s-specs { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--ink-2); font-size: .84rem; }
.s-specs span { display: inline-flex; align-items: center; gap: .3rem; }
.s-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-top: 1px solid var(--line-2); padding-top: .65rem; margin-top: .15rem; }
.s-row b { color: var(--brand); font-family: var(--font-num); }
.s-row small { font-weight: 400; color: var(--muted); }
.s-go { display: inline-flex; align-items: center; gap: .15rem; font-size: .86rem; color: var(--brand); font-weight: 600; }
.s-go svg { width: 16px; height: 16px; }
.s-empty { text-align: center; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: .4rem; padding: 2rem 0; }
.s-progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.s-pc { display: grid; grid-template-columns: 112px 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); }
.s-pc:hover { text-decoration: none; border-color: var(--brand-line); }
.s-pcimg { background: var(--soft); min-height: 104px; }
.s-pcb { padding: .85rem 1rem; display: grid; gap: .45rem; align-content: center; }
.s-pih { display: flex; justify-content: space-between; gap: .6rem; }
.s-pih span { font: 700 1rem var(--font-num); color: var(--brand); }
.s-pstage { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .84rem; }
.s-pstage svg { width: 15px; height: 15px; }
.s-row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.s-news { scroll-snap-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.s-meta { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .8rem; }
.s-body { color: var(--ink-2); font-size: .9rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-about { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
.s-about p { color: var(--ink-2); }
.s-ticks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.s-ticks li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); }
.s-ticks svg { color: #2b8a4b; margin-top: .15rem; }
.s-values { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.s-val { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem; display: grid; gap: .35rem; border-left: 3px solid var(--brand); }
.s-val svg { width: 26px; height: 26px; color: var(--brand); }
.s-val span { color: var(--muted); font-size: .86rem; }
.s-faqw { max-width: 820px; }
.s-faq { display: grid; gap: .6rem; }
.s-faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.s-faq summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary svg { color: var(--muted); transition: transform .2s; }
.s-faq details[open] summary svg { transform: rotate(180deg); }
.s-faq details[open] { border-color: var(--brand-line); }
.s-faq p { margin: 0; padding: 0 1.1rem 1.05rem; color: var(--ink-2); }
.s-ctaband { background: var(--navy) url(/blueprint.svg) center / cover; color: #fff; text-align: center; }
.s-ctaband h2 { color: #fff; }
.s-ctaband p { color: rgba(233, 239, 252, .85); max-width: 560px; margin: 0 auto 1.3rem; }
.btn.s-white { background: #fff; color: var(--navy); border-color: #fff; font-weight: 700; }
.btn.s-white:hover { background: #eef2fb; text-decoration: none; }
.s-contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.4rem; align-items: start; }
.s-kicker { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand); font-weight: 700; letter-spacing: .03em; margin-bottom: .5rem; }
.s-contact p { color: var(--ink-2); }
.s-cinfo { display: grid; gap: .6rem; margin-top: 1.2rem; }
.s-cinfo > * { display: flex; gap: .8rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; color: var(--ink); }
.s-cinfo > a:hover { text-decoration: none; border-color: var(--brand-line); }
.s-cinfo svg { width: 22px; height: 22px; color: var(--brand); }
.s-cinfo span { display: grid; }
.s-cinfo small { color: var(--muted); font-size: .76rem; }
.s-fcard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem; box-shadow: 0 8px 26px rgba(19, 26, 43, .07); }
.s-fcard h3 { margin-top: 0; }
.s-form { display: grid; gap: .85rem; }
.s-form label { display: grid; gap: .3rem; margin: 0; }
.s-form label > span { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .88rem; color: var(--ink); }
.s-form label > span svg { width: 16px; height: 16px; color: var(--brand); }
.s-form label i { color: var(--bad); font-style: normal; }
.s-form input, .s-form select, .s-form textarea { border-radius: 10px; padding: .7rem .85rem; }
.s-form .btn.big { justify-content: center; gap: .45rem; }
.s-fine { display: flex; gap: .45rem; align-items: flex-start; font-size: .78rem; color: var(--muted); background: var(--soft); border-radius: 10px; padding: .6rem .75rem; margin: 0; }
.s-fine svg { width: 15px; height: 15px; margin-top: .15rem; }
.s-done { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: 1.4rem 0; }
.s-done svg { width: 44px; height: 44px; color: #2b8a4b; }
.s-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.s-foot { background: var(--panel); border-top: 1px solid var(--line); padding: 2.6rem 0 1rem; }
.s-fgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.s-flogo { height: 54px; width: auto; display: block; margin-bottom: .6rem; }
.s-foot h4 { margin: 0 0 .6rem; font-size: .95rem; }
.s-foot p { margin: 0 0 .45rem; color: var(--ink-2); font-size: .9rem; display: flex; gap: .45rem; align-items: flex-start; }
.s-foot p svg { width: 16px; height: 16px; color: var(--brand); margin-top: .2rem; }
.s-copy { border-top: 1px solid var(--line-2); margin-top: 1.8rem; padding-top: 1rem; font-size: .8rem; color: var(--muted); }
.s-float { position: fixed; right: 16px; bottom: 24px; z-index: 25; display: grid; gap: .55rem; }
.s-float a { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; box-shadow: 0 6px 16px rgba(12, 37, 96, .25); }
.s-float a svg { width: 22px; height: 22px; }
.s-float .f-call { background: var(--brand-2); }
.s-float .f-wa { background: #25a35a; }
.s-tabbar { display: none; }
.s-phero { position: relative; height: clamp(240px, 42vw, 440px); background: var(--soft); color: #fff; }
.s-phcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 16px 1.4rem; background: linear-gradient(transparent, rgba(8, 18, 48, .8)); width: auto; display: grid; gap: .35rem; justify-items: start; }
.s-phcap h1 { font-size: clamp(1.5rem, 3.6vw, 2.5rem); color: #fff; }
.s-phcap p { margin: 0; display: flex; align-items: center; gap: .3rem; opacity: .9; }
.s-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
.s-side { position: sticky; top: 88px; }
.s-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.s-facts > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; display: grid; gap: .1rem; }
.s-facts svg { color: var(--brand); margin-bottom: .2rem; }
.s-facts span { color: var(--muted); font-size: .8rem; }
.s-facts b { font-family: var(--font-num); }
.s-h { display: block; color: var(--ink); font-size: 1.12rem; margin: 1.8rem 0 .8rem; }
.s-spec { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; }
.s-spec li { display: flex; gap: .45rem; align-items: flex-start; color: var(--ink-2); }
.s-spec svg { width: 17px; height: 17px; color: #2b8a4b; margin-top: .2rem; }
.s-steps { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--line); display: grid; gap: .7rem; }
.s-steps li { position: relative; display: grid; }
.s-steps li::before { content: ""; position: absolute; left: calc(-1.2rem - 7px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--faint); }
.s-steps li.done::before { background: #2b8a4b; border-color: #2b8a4b; }
.s-steps li.now::before { border-color: var(--brand); background: var(--brand-soft); }
.s-steps span { color: var(--muted); font-size: .84rem; font-family: var(--font-num); }
@media (max-width: 920px) {
  .s-nav, .s-act .seg, .s-login span { display: none; }
  .s-act { margin-left: auto; }
  .s-login { padding: .5rem; }
  .s-bar { height: 60px; gap: .6rem; }
  .s-logo img { height: 38px; }
  .s-slide { aspect-ratio: 16 / 9; }
  .s-stats { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .s-chips { justify-content: flex-start; flex-wrap: nowrap; }
  .s-grid { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
  .s-grid .s-card { scroll-snap-align: start; }
  .s-progs { grid-template-columns: 1fr; }
  .s-row-scroll { grid-auto-columns: 82%; }
  .s-about, .s-contact, .s-pgrid { grid-template-columns: 1fr; gap: 1.4rem; }
  .s-values { grid-template-columns: 1fr 1fr; }
  .s-fgrid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .s-facts { grid-template-columns: 1fr 1fr; }
  .s-spec { grid-template-columns: 1fr; }
  .s-side { position: static; }
  .s-sec { padding: 2.4rem 0; }
  .site { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .s-float { bottom: calc(90px + env(safe-area-inset-bottom)); right: 12px; }
  .s-float a { width: 46px; height: 46px; }
  .s-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel); border-top: 1px solid var(--line);
    padding: .35rem .2rem calc(.35rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(19, 26, 43, .06); }
  .s-tabbar a { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .68rem; color: var(--muted); }
  .s-tabbar a svg { width: 22px; height: 22px; }
  .s-tabbar a.on { color: var(--brand); font-weight: 600; }
  .s-tabbar a:hover { text-decoration: none; }
}
@media (max-width: 420px) { .s-fgrid { grid-template-columns: 1fr; } .s-val { padding: .9rem; } }
.s-empty[hidden] { display: none; }
/* portal home: quick actions */
.qa { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin: -.4rem 0 1.4rem; }
.qa a { display: grid; justify-items: center; gap: .35rem; text-align: center; padding: .85rem .4rem .75rem; border-radius: 14px; border: 1px solid var(--line); color: var(--ink); font-size: .84rem; }
.qa a:hover { text-decoration: none; border-color: var(--brand-line); }
.qa .s-sic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; }
.qa b { font-weight: 600; line-height: 1.25; }
@media (max-width: 920px) { .qa { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .s-slide { aspect-ratio: 16 / 11; } }
@media (min-width: 921px) { .s-slide { aspect-ratio: auto; height: clamp(320px, 34vw, 440px); } .s-logo img { height: 54px; } .s-bar { height: 76px; } }

/* ═════ Phase 12: monthly party reports, investor project accounts ═════ */
.rp { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; max-width: 980px; }
.rp-head { display: flex; gap: 1.2rem; align-items: center; border-bottom: 3px solid var(--brand); padding-bottom: 1rem; margin-bottom: .6rem; }
.rp-head img { height: 64px; width: auto; }
.rp-head h1 { color: var(--brand); }
.rp-sec { padding-top: .4rem; }
.rp-sec + .rp-sec { border-top: 1px dashed var(--line); margin-top: 1rem; }
.rp-prog { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .35rem; }
.rp-pct { font: 700 1.4rem var(--font-num); color: var(--brand); }
.rp-est { border: 1px solid var(--brand-line); background: var(--brand-soft); border-radius: 12px; padding: .2rem 1rem .8rem; margin: .8rem 0 1.2rem; }
.rp-est h3 { color: var(--brand); }
.rp-steps { margin: .8rem 0; }
.rp-foot { border-top: 1px solid var(--line); margin-top: 1.4rem; padding-top: .8rem; color: var(--muted); font-size: .82rem; }
.rp-public { min-height: 100vh; background: var(--paper); padding: 1rem 16px 3rem; display: grid; justify-items: center; align-content: start; gap: 1rem; }
.rp-public .rp { width: 100%; }
.rp-tools { display: flex; gap: .5rem; justify-content: space-between; width: min(980px, 100%); }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-bottom: .4rem; }
.send-row label { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.send-row input[type=checkbox] { width: auto; }
@media (max-width: 640px) { .rp { padding: 1rem; } .rp-head { flex-direction: column; align-items: flex-start; } .rp-head img { height: 52px; } }
@media print { .rp { border: 0; padding: 0; max-width: none; } .rp-public { padding: 0; } }

/* ═════ forgery protection on printed papers ═════ */
/* against copying (owner, 3 Nov 2026: "nokol thekate backgrounder moddhe halka kore architecture", then "aro choto choto and aro shundor"):
   ONE sketch of the owner's reference picture over the whole sheet ("puro pade aktai": floating garden, villas, pool, long house, cars,
   road, lake, mountains, annotation leaders) and beside it the second picture's full-height tower, in hair-thin lines
   (paper-art-*.jpg, pencil sketches of the owner's own pictures made by devtools/gen_paper_sketch.py), under the micro-text BEPARY HOLDINGS ORIGINAL / BHL VERIFIED PAPER and the logo mark; a photocopy loses or muddies them */
.receipt, .rp { --paper-art: url("/paper-art-receipt.jpg"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='60'%3E%3Ctext x='0' y='20' font-family='Arial' font-size='9' fill='%231a3f94' fill-opacity='.032' transform='rotate(-12 90 30)'%3EBEPARY HOLDINGS ORIGINAL BHL%3C/text%3E%3Ctext x='40' y='52' font-family='Arial' font-size='9' fill='%231a3f94' fill-opacity='.032' transform='rotate(-12 90 30)'%3EBHL VERIFIED PAPER%3C/text%3E%3C/svg%3E"), var(--paper-art);
  background-repeat: repeat, no-repeat; background-size: auto, cover; background-position: 0 0, center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; isolation: isolate; }      /* isolate: the logo below (z-index -1) sits over the drawing, under the writing */
/* a different picture for each kind of paper (owner, 4 Nov 2026: "akek kagoje akek rokomer background", "oi chobi gulori sketch ta boshbe"), made by devtools/gen_paper_sketch.py */
.receipt.mr { --paper-art: url("/paper-art-mr.jpg"); }      /* the money receipt: the finest drawing (owner, 4 Nov 2026) */
.receipt.vch, .receipt.dbv { --paper-art: url("/paper-art-voucher.jpg"); }
.receipt.letter { --paper-art: url("/paper-art-letter.jpg"); }
.receipt.pad { background-image: none; }      /* the blank pad for handwriting: only the logo, no drawing (owner, 4 Nov 2026) */
.receipt.po, .receipt.wo { --paper-art: url("/paper-art-order.jpg"); }
.receipt.cert { --paper-art: url("/paper-art-cert.jpg"); }
.rp { --paper-art: url("/paper-art-report.jpg"); }
.vbox { display: flex; gap: 1rem; align-items: center; margin-top: 1.2rem; padding: .8rem 1rem; border: 1px dashed #b4c5ea; border-radius: 10px; background: rgba(231, 237, 249, .55); color: #131a2b; }
.vqr { width: 92px; height: 92px; flex: none; background: #fff; padding: 4px; border-radius: 6px; }
.vqr svg { width: 100%; height: 100%; display: block; }
.vtext { display: grid; gap: .2rem; font-size: .82rem; }
.vtext b { font-size: .9rem; }
.vcode { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: #1a3f94; }
.vcopy { font-weight: 600; color: #2b7448; }
.receipt .wm.wm-dup { color: rgba(168, 53, 45, .1); font-size: 5rem; }
.vpage { min-height: 100vh; background: var(--paper); display: grid; justify-items: center; align-content: start; gap: 1rem; padding: 2rem 16px; }
.vlogo img { height: 64px; width: auto; }
.vcard { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow); }
.vcard h1 { color: var(--brand); }
.vform { display: flex; gap: .5rem; margin: 1rem 0; }
.vform input { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 1.05rem; }
.vres { border-radius: 12px; padding: 1rem; border: 1px solid; }
.vres.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.vres.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.vstat { display: flex; gap: .5rem; align-items: center; font-size: 1.05rem; margin-bottom: .6rem; }
.vres.ok .vstat { color: var(--ok); } .vres.bad .vstat { color: var(--bad); }
@media (max-width: 560px) { .vbox { flex-direction: column; align-items: flex-start; } .vform { flex-direction: column; } }
/* go-live checklist */
.golive { display: grid; gap: .5rem; margin: 1rem 0 1.4rem; }
.gl { display: grid; grid-template-columns: 34px 1fr auto; gap: .8rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; }
.gl-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); }
.gl.ok .gl-i { background: var(--ok-soft); color: var(--ok); }

/* ═════ v10 (8 Oct 2026): a calmer, more modern colour system and type — Hind Siliguri for Bangla, Inter for figures ═════ */
html, body { font-size: 15.5px; letter-spacing: .005em; }
h1 { font-weight: 700; letter-spacing: -.015em; }
.topbar { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.side { background: var(--panel); }
.nav a { border-radius: 10px; padding: .48rem .65rem; }
.nav a:hover { background: var(--soft); text-decoration: none; }
.nav-group { letter-spacing: .06em; }
.tile { border-color: var(--line-2); }
.tile.link:hover { border-color: var(--brand-line); box-shadow: 0 10px 24px -14px rgba(28, 63, 153, .35); }
.tile .v { font-weight: 700; }
.tile.hero { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); border-color: transparent; color: #fff; }
.tile.hero .k, .tile.hero .s { color: rgba(255, 255, 255, .82); }
.card, .tablewrap { border-color: var(--line-2); }
th { background: var(--panel-2); color: var(--muted); }
tr.click:hover td { background: var(--brand-soft); }
.btn { border-radius: 10px; font-weight: 600; }
.btn.primary { box-shadow: 0 1px 2px rgba(28, 63, 153, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
input, select, textarea { border-radius: 10px; border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.pill { font-weight: 600; }
.portal-hero { border-radius: 16px; }
.hubtabs a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.hubtabs a.on svg { color: #fff; }
.num, .tile .v, .rp-pct, .s-stat b { font-family: var(--font-num); }

/* signatures and seal on issued papers */
.sg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.4rem; margin-top: 1.6rem; align-items: end; }
.sg { display: grid; gap: .1rem; text-align: center; font-size: .78rem; color: #3b4660; position: relative; }
.sg-img { height: 64px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.sg-img img:not(.sg-seal) { max-height: 64px; max-width: 100%; object-fit: contain; position: relative; z-index: 2; }
.sg-seal { position: absolute; right: -6px; bottom: -14px; width: 92px; height: 92px; object-fit: contain; opacity: .78; transform: rotate(-12deg); z-index: 1; mix-blend-mode: multiply; }
.sg-line { border-top: 1px solid #8a94aa; margin: .15rem 0 .25rem; }
.sg b { color: #131a2b; font-size: .82rem; }
.sg-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .62rem; color: #1a3f94; letter-spacing: .04em; }
.receipt .r-sign.sg-row { border-top: 0; }
.sig-pad { width: 100%; max-width: 560px; height: 180px; border: 1.5px dashed var(--brand-line); border-radius: 12px; background: #fff; touch-action: none; display: block; margin-bottom: .5rem; }
.sig-cur { display: flex; align-items: center; gap: 1rem; margin: .4rem 0 .8rem; }
.sig-cur img, .sig-prev img { max-height: 70px; max-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.sig-dark[hidden] { display: none; }
.sched-ed .sched-t td { padding: .25rem .4rem; } .sched-ed .sched-t input, .sched-ed .sched-t select { min-width: 0; padding: .3rem .4rem; }      /* instalment editor (KB-115) */
.sched-ed [hidden] { display: none !important; } .sched-ed .sched-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem .8rem; }
.sched-ed .sched-sum { margin-left: auto; font-size: .85rem; } .sched-ed .sched-sum .bad { color: var(--bad, #c0392b); }
.sig-dark:not([hidden]) { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.sig-prev img { background: #fff repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,.025) 8px 16px); }
.sig-tabs { margin: .4rem 0 .8rem; }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.sig-card { display: grid; gap: .35rem; }
.sig-card img { height: 70px; width: 100%; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }

/* ═════ v11 (8 Oct 2026): colour and motion — gentle, purposeful, and off for anyone who asks for reduced motion ═════ */
.btn.primary { background: var(--grad-brand); border-color: transparent; }
.btn.primary:hover { background: var(--grad-brand); filter: brightness(1.08); }
.tile.hero, .midb { background: var(--grad-brand); }
.t-blue .s-sic { background: var(--grad-brand); } .t-green .s-sic { background: var(--grad-green); } .t-amber .s-sic { background: var(--grad-amber); } .t-violet .s-sic { background: var(--grad-violet); }
.s-sic { box-shadow: 0 6px 14px -6px rgba(14, 23, 38, .35); }
.bar span { background: linear-gradient(90deg, #2554c7, #2f86d6); }
.nav a.active::before { background: linear-gradient(#2554c7, #2fae68); }
.hubtabs a.on, .hatbar a.on, .s-chips button.on { background: var(--grad-brand); border-color: transparent; }
.portal-hero { background-image: url(/blueprint.svg), linear-gradient(135deg, #0b2259 0%, #18388c 45%, #2554c7 80%, #2f86d6 100%); }
.ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none; transform: scale(0); animation: ripple .6s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(26); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .motion .mi { animation: miUp .55s var(--ease) both; animation-delay: calc(var(--d, 0) * 45ms); }
  @keyframes miUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .motion .rv { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
  .motion .rv.in { opacity: 1; transform: none; }
  .bar span { transition: width 1.1s var(--ease); }
  .tile, .s-card, .qa a, .s-pc, .s-val, .s-stat, .sig-card, .gl, .s-cinfo > * { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
  .tile.link:hover, .s-card:hover, .qa a:hover, .s-pc:hover, .s-val:hover, .s-stat:hover, .s-cinfo > a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(28, 63, 153, .45); }
  .btn { transition: transform .12s, filter .2s, background .2s, border-color .2s; }
  .btn:active { transform: scale(.97); }
  .nav a { transition: background .2s, color .2s; }
  .nav a.active::before { animation: growY .35s var(--ease); }
  @keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .hubtabs a, .hatbar a, .s-chips button, .chips .chip { transition: background .25s, color .25s, box-shadow .25s; }
  .modal:not([hidden]) { animation: fadeIn .2s ease both; }
  .modal:not([hidden]) .modal-box { animation: popIn .32s cubic-bezier(.2, .9, .3, 1.15) both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
  #toast { transition: opacity .25s, transform .4s cubic-bezier(.2, .9, .3, 1.35); }
  .skel, .skel-tiles div { background: linear-gradient(90deg, var(--line-2) 0%, var(--soft) 40%, var(--line-2) 80%); background-size: 220% 100%; animation: shimmer 1.15s linear infinite; }
  @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
  .portal-hero::before, .tile.hero::before, .s-ctaband::before { content: ""; position: absolute; inset: -60%; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .14), transparent 38%); animation: drift 16s ease-in-out infinite alternate; }
  .tile.hero, .s-ctaband { position: relative; overflow: hidden; }
  @keyframes drift { from { transform: translate(-6%, -4%); } to { transform: translate(18%, 12%); } }
  .s-slide .art { animation: kenburns 14s ease-in-out infinite alternate; transform-origin: 60% 50%; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
  .s-dots button { transition: width .35s var(--ease), background .35s; }
  .s-float a { animation: floatIn .6s cubic-bezier(.2, .9, .3, 1.3) both; }
  .s-float a:nth-child(2) { animation-delay: .12s; }
  @keyframes floatIn { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; transform: none; } }
  .midb { transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), box-shadow .25s; }
  .bottombar a.mid:active .midb, .s-tabbar a.mid:active .midb { transform: scale(.92); }
  .bottombar a.mid.on .midb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 16%, transparent), 0 6px 16px rgba(12, 37, 96, .28); }
  .bottombar a svg, .s-tabbar a svg { transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
  .bottombar a.on:not(.mid) svg, .s-tabbar a.on:not(.mid) svg { transform: translateY(-2px) scale(1.08); }
  .splash img { animation: logoIn .8s cubic-bezier(.2, .9, .3, 1.2) both; }
  .splash { animation: splashOut .35s ease .8s forwards; }
  @keyframes logoIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
  @keyframes splashOut { to { opacity: 0; visibility: hidden; } }
  .auth-bp { animation: bpDrift 30s linear infinite alternate; }
  @keyframes bpDrift { from { background-position: 0 0; } to { background-position: 60px 30px; } }
  .vres { animation: popIn .4s cubic-bezier(.2, .9, .3, 1.15) both; }
  .s-drawer .s-dnav a { transition: background .2s, transform .2s; }
  .s-drawer.open .s-dnav a { animation: miUp .4s var(--ease) both; }
  .s-drawer.open .s-dnav a:nth-child(2) { animation-delay: .03s; } .s-drawer.open .s-dnav a:nth-child(3) { animation-delay: .06s; } .s-drawer.open .s-dnav a:nth-child(4) { animation-delay: .09s; }
  .s-drawer.open .s-dnav a:nth-child(5) { animation-delay: .12s; } .s-drawer.open .s-dnav a:nth-child(6) { animation-delay: .15s; } .s-drawer.open .s-dnav a:nth-child(7) { animation-delay: .18s; } .s-drawer.open .s-dnav a:nth-child(8) { animation-delay: .21s; }
}
@media print { .mi, .rv { animation: none !important; opacity: 1 !important; transform: none !important; } .ripple { display: none; } }
.portal-hero > *, .tile.hero > *, .s-ctaband > * { position: relative; z-index: 1; }
/* in-app dialogs (replace the browser's prompt / confirm) */
.ask { position: fixed; inset: 0; z-index: 90; background: rgba(10, 16, 32, .45); display: grid; place-items: center; padding: 16px; }
.ask-box { width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.3rem 1.1rem; box-shadow: var(--shadow-l); }
.ask-box form { display: grid; gap: .7rem; }
.ask-q { font-weight: 600; color: var(--ink); margin: 0; }
.ask-box .actions { justify-content: flex-end; margin-top: .3rem; }
@media (prefers-reduced-motion: no-preference) { .ask { animation: fadeIn .18s ease both; } .ask-box { animation: popIn .3s cubic-bezier(.2, .9, .3, 1.15) both; } }

/* home page photos */
.s-aimg { margin: 0 0 1rem; border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 16 / 9; background: var(--soft); }
.s-aimg img, .s-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-aimg figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1rem .8rem; color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(8, 18, 48, .72)); }
.s-band { position: relative; margin: 0 0 1.2rem; border-radius: 16px; overflow: hidden; height: clamp(160px, 26vw, 300px); background: var(--soft); }
.s-band figcaption { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font-weight: 600; font-size: .9rem; }
.s-ctaband.s-photo { background: linear-gradient(rgba(11, 34, 87, .82), rgba(11, 34, 87, .88)), url(/site-img/dhaka.jpg) center / cover; position: relative; }
.s-credit { position: absolute; right: .8rem; bottom: .5rem; font-size: .66rem; color: rgba(255, 255, 255, .6); z-index: 1; }
.s-credit:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) { .s-band img { animation: kenburns 16s ease-in-out infinite alternate; } .s-aimg img { transition: transform .6s var(--ease); } .s-aimg:hover img { transform: scale(1.04); } }
:root[data-theme="dark"] .s-band figcaption { background: rgba(17, 26, 46, .9); color: var(--ink); }
.s-slide .art, .s-img .art, .s-phero .art { object-position: center 72%; }

/* ═════ 12 Oct 2026: sign-in code (OTP) and after-sale ═════ */
.otp-form { text-align: left; }
.otp-badge { width: 52px; height: 52px; margin: 0 auto .4rem; border-radius: 16px; display: grid; place-items: center; background: var(--grad-brand, var(--brand)); color: #fff; box-shadow: 0 8px 22px -10px rgba(28, 63, 153, .7); }
.otp-badge .i { width: 26px; height: 26px; }
.otp-note { font-size: .92rem; color: var(--ink-2); line-height: 1.55; margin: .2rem 0 .6rem; text-align: center; }
.otp-demo { text-align: center; background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-s); padding: .45rem; margin-bottom: .6rem; }
.otp-demo b { font-family: var(--font-num); letter-spacing: .25em; font-size: 1.15rem; }
.otp-input { font-family: var(--font-num); letter-spacing: .5em; font-size: 1.25rem; text-align: center; }
.otp-form .chk { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; color: var(--muted); margin: .2rem 0 .8rem; }
.otp-form .chk input { width: auto; margin-top: .2rem; }
.otp-back { display: block; text-align: center; margin-top: .7rem; font-size: .88rem; }

.as-sec { margin-top: 1.6rem; padding-top: .4rem; border-top: 1px dashed var(--line); }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.as-head h2 { margin: .6rem 0; }
.as-head .actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.owners { list-style: none; margin: .2rem 0 .6rem; padding: 0; display: grid; gap: .55rem; }
.owners li { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel-2); }
.owners li > span:nth-child(2) { flex: 1; min-width: 0; }
.avatar.sm { width: 34px; height: 34px; font-size: .78rem; }
.case-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: .45rem; border-radius: 8px; background: var(--brand-soft); color: var(--brand); vertical-align: middle; }
.case-ic .i { width: 15px; height: 15px; }
.seg.filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .9rem; }
.seg.filters a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .88rem; background: var(--panel); }
.seg.filters a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.bad-t { color: var(--bad); }
.filters-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 1rem; }
.filters-row select, .filters-row input { width: auto; min-width: 180px; }
.recon-diff { font-family: var(--font-num); font-size: 1.35rem; font-weight: 700; padding: .35rem 0; }
.recon-diff.ok { color: var(--ok); } .recon-diff.bad { color: var(--bad); }
.staff-qa { margin: .2rem 0 .9rem; }
.today { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .7rem .8rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.today-h { font-size: .9rem; margin-right: .3rem; }
.today-i { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem .35rem .4rem; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: .88rem; text-decoration: none; font-weight: 600; }
.today-i:hover { text-decoration: none; filter: brightness(.97); }
.today-i .n { min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px; display: inline-grid; place-items: center; background: var(--warn); color: #fff; font-family: var(--font-num); font-size: .8rem; }
.today-i.bad { background: var(--bad-soft); color: var(--bad); } .today-i.bad .n { background: var(--bad); }
.today-i.info { background: var(--info-soft); color: var(--info); } .today-i.info .n { background: var(--info); }
:root[data-theme="dark"] .today-i .n { color: #0a0f1d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .today-i .n { color: #0a0f1d; } }
.today-ok { display: flex; align-items: center; gap: .5rem; color: var(--ok); font-size: .9rem; margin: 0 0 1rem; }

/* ═════ scanning papers (scan.js): source tabs, page strip, camera and corner editor ═════ */
.src-tabs { margin: 0 0 .7rem; }
.src-tabs a { display: inline-flex; align-items: center; gap: .35rem; }
.src-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.src-actions select { width: auto; }
.src-actions label.btn { cursor: pointer; }
.scan-pages { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; padding: .6rem; border: 1px dashed var(--brand-line); border-radius: var(--radius); background: var(--panel-2); }
.scan-pages figure { margin: 0; position: relative; width: 96px; }
.scan-pages img { width: 96px; height: 124px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; display: block; }
.scan-pages figcaption { position: absolute; left: 4px; top: 4px; background: var(--brand); color: #fff; border-radius: 999px; font-size: .7rem; min-width: 1.3rem; text-align: center; font-family: var(--font-num); }
.sp-a { display: flex; justify-content: center; gap: .2rem; margin-top: .25rem; }
.sp-a button { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 6px; width: 26px; height: 24px; cursor: pointer; font-size: .8rem; padding: 0; }
.sp-note { align-self: center; font-size: .85rem; color: var(--muted); }
.scan-ov { position: fixed; inset: 0; z-index: 2000; background: #0b0f1a; color: #fff; display: flex; flex-direction: column; }
.scan-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 1rem; font-size: .92rem; }
.scan-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; }
.scan-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-guide { position: absolute; inset: 7% 9%; border: 2px dashed rgba(255, 255, 255, .55); border-radius: 10px; pointer-events: none; }
.scan-img { position: absolute; }
.scan-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scan-svg polygon { fill: rgba(47, 134, 214, .18); stroke: #4ea3ff; stroke-width: 2; }
.scan-h { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(78, 163, 255, .35); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); cursor: grab; touch-action: none; }
.scan-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .04); }
.scan-bar .btn { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.scan-bar .btn.primary { background: var(--grad-brand, #2554c7); border-color: transparent; }
.scan-modes { display: inline-flex; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 3px; }
.scan-modes a { color: #dfe7f7; padding: .3rem .75rem; border-radius: 999px; text-decoration: none; font-size: .85rem; }
.scan-modes a.on { background: #fff; color: #0b2257; }
.cam-shot { width: 70px; height: 70px; border-radius: 50%; border: 5px solid #fff; background: radial-gradient(circle, #fff 55%, transparent 57%); cursor: pointer; }
.cam-shot:active { transform: scale(.94); }
.scan-pages[hidden], [data-pane][hidden] { display: none; }

/* ═════ document cabinet: office / project / personal papers ═════ */
.doc-tabs a { display: inline-flex; align-items: center; gap: .35rem; }
.doc-tabs .cnt { font-family: var(--font-num); font-size: .75rem; background: var(--soft); color: var(--muted); border-radius: 999px; padding: 0 .45rem; }
.doc-tabs a.active .cnt { background: var(--brand-soft); color: var(--brand); }
.doc-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin: .6rem 0 .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips a { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: .85rem; text-decoration: none; }
.chips a .i { width: 14px; height: 14px; }
.chips a span { font-family: var(--font-num); color: var(--muted); font-size: .75rem; }
.chips a.on { background: var(--brand); border-color: var(--brand); color: #fff; } .chips a.on span { color: rgba(255, 255, 255, .8); }
.dq { display: flex; gap: .35rem; } .dq input { width: 240px; max-width: 60vw; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.doc-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s var(--ease, ease), box-shadow .15s; }
.doc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(28, 63, 153, .45); }
.doc-th { position: relative; height: 150px; background: var(--panel-2); display: grid; place-items: center; border-bottom: 1px solid var(--line-2); }
.doc-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.doc-ext { font-family: var(--font-num); font-weight: 700; color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: .5rem .8rem; letter-spacing: .05em; }
.doc-pages { position: absolute; right: 6px; bottom: 6px; background: rgba(11, 34, 87, .82); color: #fff; font-size: .7rem; border-radius: 999px; padding: .05rem .5rem; }
.doc-lock { position: absolute; left: 6px; top: 6px; background: var(--warn); color: #fff; border-radius: 8px; padding: 3px 4px; display: grid; }
.doc-lock .i { width: 14px; height: 14px; }
.doc-b { padding: .55rem .7rem .2rem; display: grid; gap: .15rem; } .doc-b b { font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; }
.doc-a { display: flex; gap: .35rem; padding: .5rem .7rem .7rem; margin-top: auto; }
.scope-pick { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .3rem; }
.scope-pick a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-size: .88rem; }
.scope-pick a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
#uf [data-only][hidden] { display: none; }
.scan-q { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; } .scan-q[hidden] { display: none; } .scan-q select { width: auto; }
.scan-loupe { position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .6); pointer-events: none; background: #000; }
.scan-loupe[hidden] { display: none; }

/* ═════ papers open inside the app (docview.js) ═════ */
.dv { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .dv { grid-template-columns: 1fr; } }
.dv-main { padding: .6rem; min-height: 300px; }
.dv-bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.dv-zoom { display: flex; gap: .3rem; }
.dv-pages { display: grid; gap: .9rem; justify-items: center; overflow-x: auto; background: var(--panel-2); border-radius: var(--radius-s); padding: .8rem; }
.dv-wrap { position: relative; }
.dv-page { display: block; background: #fff; box-shadow: 0 2px 10px rgba(14, 23, 38, .18); border-radius: 3px; max-width: none; }
.dv-n { position: absolute; right: 8px; bottom: 8px; background: rgba(11, 34, 87, .75); color: #fff; font-size: .72rem; border-radius: 999px; padding: .05rem .5rem; font-family: var(--font-num); }
.dv-img { width: 100%; max-width: none; background: #fff; box-shadow: 0 2px 10px rgba(14, 23, 38, .18); cursor: zoom-in; }
.dv-other { display: grid; justify-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; }
.dv-other .i { width: 48px; height: 48px; color: var(--brand); }
.dv-side .kv { margin: 0; }
@media print {
  .dv { display: block; } .dv-main { border: 0; box-shadow: none; padding: 0; }
  .dv-pages { background: none; padding: 0; gap: 0; }
  .dv-page { box-shadow: none; width: 100% !important; height: auto !important; page-break-after: always; }
}
.cam-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cam-svg polygon { fill: rgba(78, 163, 255, .14); stroke: #4ea3ff; stroke-width: 3; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.cam-svg polygon.ok { fill: rgba(47, 174, 104, .2); stroke: #3ddc84; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: camflash .35s ease-out; }
@keyframes camflash { from { opacity: .85; } to { opacity: 0; } }
.cam-shot span { display: block; width: 100%; height: 100%; }
.cam-last { position: relative; width: 52px; height: 64px; }
.cam-last img { width: 52px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid #fff; background: #fff; }
.cam-last b { position: absolute; right: -8px; top: -8px; background: #3ddc84; color: #0b2257; border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: .75rem; font-family: var(--font-num); }
.sp-wait { width: 96px; height: 124px; border-radius: 6px; border: 1px dashed var(--brand-line); display: grid; place-items: center; position: relative; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--brand-soft); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cam-flash.go, .spin { animation: none; } }
/* access, auto-delete and printing papers */
.doc-share, .doc-del { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: .2rem; background: rgba(11, 34, 87, .82); color: #fff; font-size: .7rem; border-radius: 999px; padding: .1rem .45rem; }
.doc-del { left: auto; right: 6px; top: 6px; bottom: auto; background: var(--warn); }
.doc-share .i, .doc-del .i { width: 12px; height: 12px; }
.dv-share { border-top: 1px solid var(--line-2); margin-top: .8rem; padding-top: .6rem; }
.dv-share h3 { display: flex; align-items: center; gap: .4rem; margin-top: 0; }
.share-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .4rem; }
.share-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.share-list li > span { display: grid; }
.share-pick { display: grid; gap: .35rem; max-height: 320px; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: .5rem; }
#print-area { display: none; }
@media print {
  body.printing-doc > *:not(#print-area) { display: none !important; }
  body.printing-doc #print-area { display: block !important; }
  #print-area img { display: block; width: 100%; height: auto; page-break-after: always; break-after: page; }
  #print-area img:last-child { page-break-after: auto; break-after: auto; }
}

/* ───────────── posts & permissions, recovery, security log (13 Oct 2026) ───────────── */
.auth-forgot { display: block; text-align: center; margin: .9rem 0 .2rem; font-weight: 600; font-size: .92rem; }
.otp-badge.ok { color: var(--ok); }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.role-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; color: var(--ink); box-shadow: var(--shadow); text-decoration: none; }
.role-card:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.role-card.off { opacity: .6; }
.role-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.role-meta { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.role-people { margin-top: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem; }
.perm-group { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .5rem .8rem .7rem; margin: 0; min-width: 0; }
.perm-group legend { font-weight: 700; padding: 0 .35rem; font-size: .92rem; }
.perm-all { font-weight: 400; font-size: .78rem; }
.perm { display: flex; gap: .5rem; align-items: flex-start; padding: .32rem .25rem; border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1.35; }
.perm input { width: auto; margin-top: .15rem; flex: none; }
.perm.on { background: var(--ok-soft); }
.perm3 { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .35rem .3rem; border-bottom: 1px dashed var(--line-2); font-size: .88rem; }
.perm3 select { width: auto; max-width: 48%; font-size: .82rem; padding: .25rem .4rem; }
.perm3.on > span { font-weight: 600; }
.sticky-save { position: sticky; bottom: 0; background: var(--paper); padding: .7rem 0; border-top: 1px solid var(--line); z-index: 5; }
a.chip { display: inline-block; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; margin: .15rem; font-size: .85rem; background: var(--panel-2); }
@media (max-width: 600px) { .perm-grid { grid-template-columns: 1fr; } .perm3 { flex-direction: column; align-items: stretch; } .perm3 select { max-width: 100%; } }
.otp-input::placeholder { letter-spacing: normal; }

/* ───────────── charts (charts.js, 13 Oct 2026) ───────────── */
:root { --c1: #1c3f99; --c2: #1f9d55; --c3: #d39b0a; --c4: #0f8b8d; --c5: #d64545; --c6: #7b4fc9; --c7: #3a86d1; --c8: #8a94a8; --c9: #e07b24; --c10: #9b1c1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c1: #7fa6ff; --c2: #4cc47a; --c3: #f0c050; --c4: #3cc7c0; --c5: #f07a72; --c6: #b593f0; --c7: #6fb6f2; --c8: #8e9ab4; --c9: #f5a25a; --c10: #ff4d4d; } }
:root[data-theme="dark"] { --c1: #7fa6ff; --c2: #4cc47a; --c3: #f0c050; --c4: #3cc7c0; --c5: #f07a72; --c6: #b593f0; --c7: #6fb6f2; --c8: #8e9ab4; --c9: #f5a25a; --c10: #ff4d4d; }
.chart-card .card-h { margin-bottom: .4rem; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.chart-grid > .card { margin-bottom: 0; }
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.2rem; }
.donut { width: 150px; height: 150px; flex: none; overflow: visible; }
.donut .track, .ring .track { fill: none; stroke: var(--line-2); stroke-width: 15; }
.donut .seg { fill: none; stroke-width: 15; cursor: pointer; transition: stroke-width .15s; }
.donut .seg:hover { stroke-width: 19; }
.donut .d-c, .ring .d-c { text-anchor: middle; font-weight: 700; font-size: 15px; fill: var(--ink); }
.donut .d-s, .ring .d-s { text-anchor: middle; font-size: 9px; fill: var(--muted); }
.legend-list { list-style: none; margin: 0; padding: 0; flex: 1 1 230px; min-width: 0; display: grid; gap: .32rem; font-size: .86rem; }
.legend-list li { display: grid; grid-template-columns: 12px minmax(80px, 1fr) auto auto; gap: .5rem; align-items: center; padding: .12rem .2rem; border-radius: 6px; }
.legend-list li.link { cursor: pointer; }
.legend-list li.link:hover { background: var(--soft); }
.legend-list i, .legend-inline i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.lg-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.lg-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-p { color: var(--muted); font-size: .78rem; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.legend-inline { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .5rem 0 0; padding: 0; font-size: .84rem; color: var(--ink-2); }
.legend-inline li { display: inline-flex; gap: .4rem; align-items: center; }
.ring-wrap { text-align: center; flex: 1 1 140px; max-width: 240px; min-width: 0; }
.ring { width: 132px; height: 132px; }
.ring .arc { fill: none; stroke-width: 15; stroke-linecap: round; }
.ring-l { font-weight: 600; margin-top: .2rem; font-size: .92rem; overflow-wrap: anywhere; }
.ring-s { font-size: .82rem; color: var(--muted); }
.rings { display: flex; flex-wrap: wrap; gap: 1.2rem 1rem; justify-content: space-around; align-items: flex-start; }
.linechart { width: 100%; height: 230px; display: block; }
.linechart .grid { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.linechart .ax { font-size: 11px; fill: var(--muted); }
.linechart .line { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.linechart .area { opacity: .1; }
.linechart .dot { stroke: var(--panel); stroke-width: 1.5; cursor: pointer; }
.linechart .dot:hover { r: 5.5; }
.sharebar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.sharebar span { display: block; height: 100%; }
.sharebar span + span { box-shadow: -1px 0 0 var(--panel); }
.sharerows { display: grid; gap: .7rem; }
.sharerow .sr-h { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; margin-bottom: .25rem; }
.sharerow .sr-h b { font-weight: 600; }
.chart-empty { color: var(--muted); font-size: .88rem; padding: 1.4rem 0; text-align: center; }
.motion .donut .seg { animation: seg-in .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms); }
.motion .ring .arc { animation: seg-in 1s cubic-bezier(.2, .7, .2, 1) both; }
.motion .linechart .line { stroke-dasharray: 1; animation: line-in 1.1s ease-out both; }
.motion .sharebar span { animation: grow-x .8s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
@keyframes seg-in { from { stroke-dasharray: 0 400; } }
@keyframes line-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@media (max-width: 600px) {
  .chart-grid { grid-template-columns: 1fr; }
  .donut { width: 170px; height: 170px; }
  .linechart { height: 200px; }
  .ring { width: 116px; height: 116px; }
}
@media print { .donut .seg, .ring .arc, .linechart .line, .sharebar span { animation: none !important; } }

/* ───────────── handover (handover.js, 13 Oct 2026) ───────────── */
.hsteps { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1rem; counter-reset: s; }
.hsteps li { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); font-size: .88rem; color: var(--muted); min-width: 0; }
.hsteps .hs-n { width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--soft); color: var(--muted); }
.hsteps li.done { color: var(--ink-2); }
.hsteps li.done .hs-n { background: var(--ok); color: #fff; }
.hsteps li.now { border-color: var(--brand); color: var(--ink); font-weight: 600; background: var(--brand-soft); }
.hsteps li.now .hs-n { background: var(--brand); color: var(--brand-ink); }
.hsteps.bad li.now { border-color: var(--bad); }
.hchecks { display: grid; gap: .45rem; }
.hcheck { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: start; padding: .5rem .6rem; border: 1px solid var(--line-2); border-radius: var(--radius-s); cursor: pointer; }
.hcheck.on { background: var(--ok-soft); border-color: transparent; }
.hcheck input[type=checkbox] { width: auto; margin-top: .25rem; }
.hcheck .hc-note, .hcheck > .small { grid-column: 2; font-size: .85rem; }
.req-tag { font-size: .72rem; color: var(--warn); border: 1px solid currentColor; border-radius: 999px; padding: 0 .4rem; margin-left: .3rem; white-space: nowrap; }
.snags { display: grid; gap: .35rem; margin-bottom: .5rem; }
.snag { display: flex; gap: .5rem; align-items: center; }
.snag .sg-fixed { width: auto; flex: none; }
.meters { margin: 0; }
.hdocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .3rem .8rem; }
.hdocs label { display: flex; gap: .4rem; align-items: center; font-size: .9rem; }
.hdocs input { width: auto; }
.receipt.letter p { line-height: 1.7; }
@media (max-width: 600px) { .hsteps { flex-direction: column; } }
/* signature rows: only the signing line is drawn (before, every nested box drew its own line) */
.receipt .r-sign.sg-row .sg, .receipt .r-sign.sg-row .sg-img, .receipt .r-sign.sg-row .sg div:not(.sg-line) { border-top: 0; padding-top: 0; }
.receipt .r-sign.sg-row.sg-one { grid-template-columns: minmax(170px, 1fr) 2fr; margin-top: 2.2rem; }

/* ───────────── attendance, my leave (more.js) ───────────── */
.seg.att { flex-wrap: wrap; border-radius: var(--radius-s); }
.seg.att label { padding: .3rem .55rem; font-size: .8rem; cursor: pointer; border-right: 1px solid var(--line); }
.seg.att label:last-child { border-right: 0; }
.seg.att input { display: none; }
.seg.att label.on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.attcal { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.attcal .ac { width: 3rem; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: .25rem 0; font-size: .75rem; color: var(--muted); }
.attcal .ac b { display: block; font-size: .95rem; color: var(--ink); }
.attcal .ac-P { background: var(--ok-soft); }
.attcal .ac-A, .attcal .ac-U { background: color-mix(in srgb, var(--c5) 18%, transparent); }
.attcal .ac-H, .attcal .ac-L { background: color-mix(in srgb, var(--c3) 20%, transparent); }

/* ───────────── punches, site attendance, wage sheet (workforce.js) ───────────── */
.punch-cam { display: grid; place-items: center; background: #0b1120; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; max-width: 360px; margin: 0 auto .8rem; }
.punch-cam video, .punch-cam img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.punch-cam img { transform: none; }
.punch .actions { justify-content: center; }
.sitelist { display: grid; gap: .5rem; }
.siterow { display: grid; grid-template-columns: minmax(150px, 1.4fr) auto 6.5rem auto auto; gap: .6rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .55rem .7rem; transition: background .3s; }
.siterow.saved { background: var(--ok-soft); }
.siterow .sr-who { display: grid; }
.siterow .ot { width: 100%; }
.siterow .cam { cursor: pointer; }
.sigbox { display: inline-block; width: 7rem; height: 1.6rem; border-bottom: 1px solid #9aa3b8; }
@media (max-width: 640px) { .siterow { grid-template-columns: 1fr auto; } .siterow .seg { grid-column: 1 / -1; } }

/* ───────────── face attendance screen and enrolment (face.js) ───────────── */
.kiosk { position: relative; background: #050a16; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; max-width: 760px; margin: 0 auto 1rem; display: grid; place-items: center; }
.kiosk.small { max-width: 420px; }
.kiosk video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.kiosk .k-frame { position: absolute; inset: 14% 24%; border: 3px solid rgba(255, 255, 255, .55); border-radius: 46% 46% 42% 42%; pointer-events: none; }
.kiosk .k-msg { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem; text-align: center; font-size: 1.15rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.kiosk .k-msg.ok { background: rgba(21, 115, 71, .92); }
.kiosk .k-msg.bad { background: rgba(176, 42, 42, .9); }
.kiosk .k-msg.wait { background: rgba(28, 63, 153, .85); }
.kiosk .k-log { position: absolute; top: .5rem; right: .5rem; max-height: 40%; overflow: hidden; font-size: .78rem; color: #fff; text-align: right; text-shadow: 0 1px 2px #000; }
.kiosk:fullscreen { max-width: none; border-radius: 0; aspect-ratio: auto; }
.kiosk:fullscreen .k-msg { font-size: 2rem; }
.enrol-dots { display: flex; justify-content: center; gap: .5rem; margin: .4rem 0 .8rem; }
.enrol-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.enrol-dots i.on { background: var(--ok); }
.punch-or { text-align: center; margin: .8rem 0; color: var(--muted); font-size: .85rem; }

/* ───────────── phone punch: the changing code, steps ───────────── */
.punch .punch-steps { margin-bottom: .8rem; line-height: 1.6; }
.punch .code-field { max-width: 420px; margin: 0 auto .8rem; }
.punch-or { text-align: center; color: var(--muted); margin: .6rem 0; font-size: .9rem; }
.shake { animation: shake .45s; border-color: var(--bad, #b02a2a) !important; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
.pcode { text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 auto 1rem; max-width: 760px; }
.kiosk .pcode { position: absolute; top: .6rem; right: .6rem; margin: 0; padding: .5rem .8rem; background: rgba(5, 10, 22, .78); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.pcode .pc-l { font-size: .85rem; opacity: .8; }
.pcode .pc-code { font-family: var(--font-num); font-size: 2rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; }
.pcode.big { padding: 2rem 1rem; }
.pcode.big .pc-code { font-size: clamp(3rem, 16vw, 8rem); }
.pcode.big:fullscreen { display: grid; place-content: center; max-width: none; border-radius: 0; }
.pcode .pc-bar { height: 4px; background: rgba(127, 127, 127, .25); border-radius: 2px; margin-top: .4rem; overflow: hidden; }
.pcode .pc-bar span { display: block; height: 100%; background: var(--c1, #1c3f99); transition: width .3s linear; }

/* ───────────── who was where: the radar, the check bar ───────────── */
.radar-wrap { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; }
@media (max-width: 640px) { .radar-wrap { grid-template-columns: 1fr; } }
.radar { width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.radar .rd-ring { fill: none; stroke: var(--line); stroke-dasharray: 3 4; }
.radar .rd-ok { fill: rgba(21, 115, 71, .12); stroke: #157347; }
.radar .rd-ax { stroke: var(--line); }
.radar .rd-l { font-size: 10px; fill: var(--muted); }
.radar .rd-home { fill: var(--c1, #1c3f99); }
.radar .rd-in { fill: #157347; }
.radar .rd-far { fill: #b02a2a; }
.radar .rd-flag { fill: #d97706; }
.chkbar { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 60; background: #b02a2a; color: #fff; padding: .7rem 1rem; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); text-decoration: none; font-weight: 600; max-width: calc(100% - 32px); text-align: center; }
.check-banner { margin-bottom: .8rem; }
.ph-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.my-ids { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .2rem 0 1rem; }
.id-chip { display: inline-flex; gap: .4rem; align-items: baseline; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; background: var(--panel); font-size: .85rem; }
.id-chip span { color: var(--muted); }
.id-chip b { font-family: var(--font-num); letter-spacing: .02em; }

/* ───────────── the AI assistant ───────────── */
.ai-fab { position: fixed; right: 16px; bottom: 84px; z-index: 55; display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--c1, #1c3f99); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); cursor: pointer; }
.ai-fab svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .ai-fab { bottom: 24px; } }
.ai-panel { position: fixed; right: 16px; bottom: 16px; top: 72px; width: min(440px, calc(100vw - 32px)); z-index: 70; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); display: flex; overflow: hidden; }
@media (max-width: 640px) { .ai-panel { inset: 0; width: auto; border-radius: 0; } }
.ai { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.ai.full { height: calc(100vh - 170px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
#modal .ai.full { height: auto; min-height: 0; border: 0; }
.ai-head { display: flex; align-items: center; gap: .4rem; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.ai-head .ai-t { font-weight: 700; display: inline-flex; gap: .35rem; align-items: center; margin-right: auto; }
.ai-head .ai-hist { max-width: 150px; font-size: .85rem; padding: .25rem .4rem; }
.ai-body { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.ai-msg { display: flex; }
.ai-msg.me { justify-content: flex-end; }
.ai-msg .ai-b { max-width: 88%; padding: .55rem .8rem; border-radius: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ai-msg.me .ai-b { background: var(--c1, #1c3f99); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.ai .ai-b { background: rgba(127, 127, 127, .1); border-bottom-left-radius: 4px; }
.ai-msg.tool .ai-b { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.ai-b p { margin: 0 0 .5rem; } .ai-b p:last-child { margin-bottom: 0; }
.ai-b ul, .ai-b ol { margin: .2rem 0 .5rem 1.1rem; padding: 0; }
.ai-b code { font-family: var(--font-num); background: rgba(127, 127, 127, .15); padding: 0 .25rem; border-radius: 4px; }
.ai-msg.me .ai-b a { color: #fff; }
.ai-wait { color: var(--muted); }
.ai-table { margin: .4rem 0; } .ai-table table { font-size: .85rem; } .ai-table .btn { margin-top: .3rem; }
.ai-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; background: var(--panel); }
.ai-card.wait { border-color: var(--c1, #1c3f99); box-shadow: 0 0 0 1px var(--c1, #1c3f99) inset; }
.ai-card-h { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.ai-card-s { margin-bottom: .4rem; }
.ai-card .actions { margin: .5rem 0 .3rem; }
.ai-kv { font-size: .85rem; margin-top: .3rem; } .ai-kv td:first-child { color: var(--muted); padding-right: .8rem; white-space: nowrap; }
.ai-hello p { margin-top: 0; }
.ai-sugg { display: flex; flex-wrap: wrap; gap: .4rem; }
.ai-sugg .chip { cursor: pointer; text-align: left; }
.ai-files { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .7rem; }
.ai-file { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; }
.ai-file button { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; display: inline-flex; }
.ai-file svg { width: 13px; height: 13px; }
.ai-in { display: flex; gap: .4rem; align-items: flex-end; padding: .6rem .7rem; border-top: 1px solid var(--line); }
.ai-in textarea { flex: 1; resize: none; min-height: 42px; max-height: 160px; }
.ai-ic { padding: .5rem .6rem; flex: none; }
.ai-ic.on { background: #b02a2a; color: #fff; }
.ai-foot { padding: 0 .7rem .5rem; }
body:has(#modal:not([hidden])) .ai-fab { display: none; }

/* ═════ printed papers, redesigned (owner, 14 Oct 2026): money receipt, allotment letter, certificate, demand letter,
   handover letter, monthly report. A small QR alone in the top corner; a quiet frame, a two-tone brand edge, a faint logo. ═════ */
.receipt, .rp { position: relative; isolation: isolate; }
.receipt { border: 1px solid #d6ddeb; border-radius: 8px; padding: 2rem 2.2rem 1.6rem; box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 8px rgba(26, 63, 148, .18); }
.receipt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #1a3f94 0 72%, #1f7f41 72% 100%); border-radius: 8px 8px 0 0; }
.receipt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); background: url("/brand/logo.png") center / contain no-repeat; opacity: .03; z-index: -1; pointer-events: none; }
.receipt .r-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.4rem; border-bottom: 3px double #1a3f94; padding-bottom: .9rem; margin-bottom: 1.2rem; align-items: end; }
.receipt .r-head > div:first-child .small { max-width: 34ch; line-height: 1.45; }
.receipt .r-head img { height: 84px; }
.receipt .r-title { line-height: 1.55; font-size: .86rem; color: #3b4660; font-variant-numeric: tabular-nums; }
.receipt .r-title b:first-child { font-family: var(--font); font-weight: 700; font-size: 1.45rem; letter-spacing: 0; color: #1a3f94; margin-bottom: .35rem; }
.receipt .r-grid { gap: 0 1.4rem; font-size: .93rem; }
.receipt .r-grid dt, .receipt .r-grid dd { padding: .42rem 0; border-bottom: 1px solid #edf0f6; }
.receipt .r-grid dt { color: #66708a; font-size: .84rem; }
.receipt .r-grid dd { color: #131a2b; font-weight: 500; }
.receipt .r-amount { background: #f4f7fc; border-left: 4px solid #1a3f94; border-radius: 6px; padding: .8rem 1rem; gap: 1.2rem; }
.receipt .r-amount .box { border: 0; padding: 0; font-size: 1.7rem; letter-spacing: .01em; }
.receipt .r-words { line-height: 1.5; }
.receipt h3 { color: #1a3f94; font-size: .95rem; letter-spacing: .04em; border-bottom: 1px solid #dfe5f1; padding-bottom: .3rem; margin: 1.3rem 0 .6rem; }
.receipt .r-foot { text-align: center; color: #66708a; border-top: 1px solid #dfe5f1; margin-top: 1.6rem; padding-top: .6rem; }
.receipt.cert { border-color: #c9d3e8; box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 9px rgba(26, 63, 148, .35), inset 0 0 0 12px #fff, inset 0 0 0 13px rgba(31, 127, 65, .35); padding: 2.4rem 2.6rem 2rem; }
.receipt.cert .r-title { text-align: center; }
.receipt.cert > p:first-of-type { font-size: 1.02rem; line-height: 1.8; text-align: center; margin: .4rem 1rem 1rem; }
.receipt.cert .r-amount { justify-content: center; text-align: center; border-left: 0; border-top: 2px solid #1a3f94; border-bottom: 2px solid #1a3f94; border-radius: 0; background: transparent; }
/* the QR alone in the corner */
.vqr-corner { position: absolute; top: 14px; right: 14px; width: 62px; height: 62px; padding: 3px; background: #fff; border-radius: 4px; z-index: 2; }
.vqr-corner svg { width: 100%; height: 100%; display: block; }
.vqr-code { position: absolute; left: -6px; right: -6px; top: 100%; padding: 1px 0; background: #fff; color: #2d3550; text-align: center; white-space: nowrap; font: 600 7px/1.15 ui-monospace, Menlo, Consolas, "Courier New", monospace; letter-spacing: 0; }
.receipt:has(.vqr-corner) .r-head, .rp:has(.vqr-corner) .rp-head { padding-right: 80px; }
.receipt.cert:has(.vqr-corner) .r-head { padding-right: 80px; }
.rp:has(.vqr-corner) .vqr-corner { top: 1.2rem; right: 1.3rem; }
@media print {
  .receipt { border: 0; box-shadow: none; padding: 6mm 0 0; }
  .receipt::before { border-radius: 0; }
  .receipt.cert { border: 1.2mm double #1a3f94; padding: 9mm 10mm 8mm; }
  .vqr-corner { width: 17mm; height: 17mm; top: 3mm; right: 0; padding: 0; }
  .vqr-code { left: -1.5mm; right: -1.5mm; padding-top: .5mm; font-size: 5.4pt; }
  .receipt:has(.vqr-corner) .r-head, .rp:has(.vqr-corner) .rp-head { padding-right: 21mm; }
}
@media (max-width: 640px) {
  .receipt { padding: 1.6rem 1.1rem 1.2rem; }
  .vqr-corner { width: 52px; height: 52px; top: 12px; right: 10px; }
  .vqr-code { font-size: 6px; left: -4px; right: -4px; }
  .receipt:has(.vqr-corner) .r-head { padding-right: 62px; }
  .receipt .r-head img { height: 64px; }
  .receipt .r-head { grid-template-columns: 1fr; row-gap: .6rem; }
  .receipt .r-title { text-align: left; }
}
/* the certificate: everything centred, like a certificate */
.receipt.cert .r-head { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: .8rem; padding-left: 80px; }
.receipt.cert .r-head > div:first-child { display: grid; justify-items: center; }
.receipt.cert .r-head > div:first-child .small { max-width: none; }
.receipt.cert .r-title b:first-child { font-size: 1.9rem; letter-spacing: 0; }
html[lang="en"] .receipt .r-title b:first-child { letter-spacing: .12em; }      /* spacing only for Latin capitals: it breaks Bangla conjuncts */
@media print { .receipt.cert .r-head { padding-left: 21mm; } }
@media (max-width: 640px) { .receipt.cert .r-head { padding-left: 0; } }

/* ── opening a paper from its QR (verify.js) ── */
.palette-q { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.palette-q input { flex: 1; border-bottom: none; }
.palette-q .btn { margin-right: .6rem; white-space: nowrap; }
.qrcam { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: .6rem auto; border-radius: 12px; overflow: hidden; background: #0d1220; }
.qrcam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qrcam .qrframe { position: absolute; inset: 22%; border: 2px solid rgba(255,255,255,.85); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); pointer-events: none; }
.trackbox [data-qrscan] { white-space: nowrap; }

/* ── debit voucher (phase8.js): the old office pad's table and signatures ── */
.receipt :is(.dbv-lines, .p-lines) { width: 100%; border-collapse: collapse; margin: .9rem 0; font-size: .95rem; }
.receipt :is(.dbv-lines, .p-lines) th, .receipt :is(.dbv-lines, .p-lines) td { border: 1px solid #cdd6e8; padding: .45rem .65rem; text-align: left; }
.receipt :is(.dbv-lines, .p-lines) th { background: #f4f7fc; color: #1a3f94; font-weight: 600; }
.receipt :is(.dbv-lines, .p-lines) .num { text-align: right; width: 34%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt :is(.dbv-lines, .p-lines) td:first-child { min-height: 2.2rem; }
.receipt :is(.dbv-lines, .p-lines) tfoot td { font-weight: 700; background: #f4f7fc; }
.receipt .dbv-sign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 1rem; align-items: start; margin-top: 1.4rem; }
.receipt .dbv-sign .r-sign { align-items: start; }
.receipt .dbv-sign .r-sign { margin-top: 0; }
.receipt .dbv-recv { text-align: center; }
@media (max-width: 640px) { .receipt .dbv-sign { grid-template-columns: 1fr; } }

/* ── the shared paper kit (papers.js) ── */
.receipt .p-lines .num { width: auto; min-width: 7.5rem; }
.receipt .p-lines td:first-child:not(.num) { white-space: normal; }
.receipt .p-body { line-height: 1.8; margin: .8rem 0; }
.receipt .p-terms { color: #3b4458; line-height: 1.6; padding-left: 1.2rem; margin: .8rem 0; }
.receipt details { margin: .6rem 0; }
@media print { .receipt .p-lines { font-size: 10pt; } .receipt .p-lines th, .receipt .p-lines td { padding: 1.4mm 2mm; } }
@media (max-width: 640px) {
  .receipt .p-lines { font-size: .8rem; table-layout: auto; }
  .receipt :is(.dbv-lines, .p-lines) th, .receipt :is(.dbv-lines, .p-lines) td { padding: .35rem .4rem; }
  .receipt .p-lines .num { min-width: 0; white-space: normal; }
}

/* ── the head of every paper and the office letterhead (papers.js), after the company's printed pads ── */
.receipt .r-head .pb-brand { display: flex; align-items: center; gap: .75rem; }
.receipt .r-head .pb-brand img { height: 66px; width: auto; padding: 0; background: none; border-radius: 0; }
.pb-brand .pb-bn { display: block; color: #2e3192; font-size: 1.42rem; line-height: 1.2; font-weight: 700; }
.pb-brand .pb-en { display: block; color: #4a5290; font-size: 1.02rem; line-height: 1.25; font-weight: 700; }
.pb-brand .pb-addr { display: block; color: #5d6882; font-size: .78rem; line-height: 1.4; margin-top: .2rem; max-width: 40ch; }
.receipt.lh { padding-top: 3.4rem; padding-bottom: 0; box-shadow: none; border-color: #e1e6f0; }
.receipt.lh::before { display: none; }
.receipt.lh::after { background-image: url("/brand/logo.png"); }
.receipt.lh .pb-addr { display: none; }
.receipt.lh .r-head { border-bottom: 1px solid #2e3192; }
.receipt.lh .vqr-corner { top: 46px; }
.lh-band { display: block; width: 100%; height: 36px; }
.lh-top { position: absolute; top: 0; left: 0; right: 0; }
.lh-foot { margin: 1.8rem -2.2rem 0; }
.lh-foot span { display: block; text-align: right; color: #3d4682; font-size: .8rem; padding: 0 2.2rem .35rem; }
.receipt .copy-tag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: .72rem; color: #1a3f94; border: 1px solid #1a3f94; border-radius: 999px; padding: .05rem .7rem; background: #fff; }
.receipt.lh .copy-tag { top: 40px; }
.office-copy { display: none; }
.ltr-meta { display: flex; justify-content: space-between; color: #3d4682; font-size: .9rem; margin: .2rem 0 1.2rem; }
.ltr-to { line-height: 1.6; margin-bottom: 1rem; }
.ltr-sub { margin: .4rem 0 1rem; }
.ltr-body p { line-height: 1.85; margin: 0 0 .9rem; text-align: justify; }
.ltr-sign .sg-row { grid-template-columns: minmax(170px, 240px); justify-content: end; margin-top: 2rem; }
.ltr-cc { margin-top: 1.4rem; color: #3b4458; line-height: 1.6; }
.pad .pad-space { min-height: 520px; }
@media print {
  .receipt.lh { padding-top: 15mm; }
  .lh-foot { margin: 8mm 0 0; }
  .lh-foot span { padding: 0 0 1.5mm; }
  .office-copy { display: block; break-before: page; }
  .pad .pad-space { min-height: 160mm; }      /* the pad fills one A4 sheet and no more (was 205mm: the foot spilled onto a second sheet) */
}
@media (max-width: 640px) {
  .receipt .r-head .pb-brand img { height: 52px; }
  .pb-brand .pb-bn { font-size: 1.15rem; }
  .pb-brand .pb-en { font-size: .88rem; }
  .lh-foot { margin-left: -1.1rem; margin-right: -1.1rem; }
}

/* ── Bangla typing switch (bangla.js) and the writer (writer.js) ── */
.bn-toggle { min-width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 700; font-size: .95rem; cursor: pointer; }
.bn-toggle.on { background: #2e3192; border-color: #2e3192; color: #fff; }
.bn-chart { border-collapse: collapse; width: 100%; font-size: .88rem; }
.bn-chart td { border-bottom: 1px solid var(--line); padding: .3rem .4rem; }
.bn-chart code { font-size: .85rem; }
.wr-top { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.wr-title { flex: 1 1 260px; font-size: 1.25rem; font-weight: 700; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: .4rem .1rem; box-shadow: none !important; }
.wr-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.wr-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .4rem; margin-bottom: .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.wr-t { min-width: 2.1rem; height: 2.1rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; font-size: .95rem; }
.wr-t:hover { background: var(--soft, rgba(46, 49, 146, .08)); border-color: var(--line); }
.wr-sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .2rem; }
.wr-bar select { width: auto; height: 2.1rem; padding: 0 .4rem; font-size: .88rem; }
.wr-status { margin-left: auto; }
.wr-body { min-height: 360px; outline: none; line-height: 1.85; font-size: 1rem; color: #131a2b; }
.wr-body:empty::before { content: attr(data-placeholder); color: #98a1b5; }
.wr-body h1 { font-size: 1.45rem; margin: .4rem 0 .6rem; }
.wr-body h2 { font-size: 1.15rem; margin: .4rem 0 .5rem; }
.wr-body p { margin: 0 0 .8rem; }
.wr-body table { border-collapse: collapse; width: 100%; margin: .6rem 0; }
.wr-body td, .wr-body th { border: 1px solid #b9c2d6; padding: .35rem .5rem; vertical-align: top; min-width: 3rem; }
.wr-body font[size="2"] { font-size: .85em; } .wr-body font[size="4"] { font-size: 1.2em; } .wr-body font[size="5"] { font-size: 1.45em; }
.wr-a4 { position: relative; background: #fff; color: #131a2b; max-width: 820px; min-height: 1060px; padding: 3.2rem 3rem; border: 1px solid #e1e6f0; border-radius: 6px; }
.wr-a4 .ltr-meta { color: #3d4682; }
.wr-paper .ltr-sign { margin-top: 1rem; }
@media print {
  .wr-a4 { border: 0; padding: 0; min-height: 0; max-width: none; }
  .wr-body { min-height: 0; }
}
@media (max-width: 640px) { .wr-a4 { padding: 1.4rem 1.1rem; min-height: 0; } }

/* ── where the staff are (staffmap.js) ── */
.sm-map { height: 460px; border-radius: 10px; overflow: hidden; background: #eef1f7; }
.sm-pick { height: 240px; border-radius: 8px; overflow: hidden; margin-bottom: .6rem; background: #eef1f7; }
.sm-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .5rem; }
.sm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.sm-legend i.sq { border: 3px solid #2e3192; background: #fff; width: 8px; height: 8px; }
.sm-legend i.dest { border: 3px solid #c27c0e; background: #fff; width: 8px; height: 8px; }
.sm-acts { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.sm-duty .actions { margin-top: .4rem; }
.dutybar { background: #2e3192; }
.leaflet-container { font: inherit; }
@media (max-width: 640px) { .sm-map { height: 340px; } }
.sm-nomap { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 500; background: rgba(255, 255, 255, .94); border: 1px solid #e3c98c; color: #6b4a07; border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; }
.dutybar.out { background: #8a5a06; }
.sm-follow { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.vw-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.vw-row input { width: auto; }
.pp-q { display: flex; gap: .4rem; }
.pp-q input { flex: 1; }
.pp-res { display: grid; gap: .3rem; margin: .4rem 0; }
.pp-item { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: .4rem .6rem; cursor: pointer; display: grid; gap: .1rem; color: var(--ink); }
.pp-item span { font-size: .78rem; color: var(--muted); }
.pp-item:hover { border-color: #2e3192; }

/* ── papers in by a photo or a scan; the other side's signature in the app (intake.js) ── */
.receipt .dbv-sign.office-only { grid-template-columns: 1fr; }
.receipt .dbv-sign.office-only > .dbv-recv { display: none; }
.receipt.office-copy .dbv-sign.office-only { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.receipt.office-copy .dbv-sign.office-only > .dbv-recv { display: grid; }
.in-box { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.in-box #inwork { flex-basis: 100%; }
.in-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: .6rem; }
.in-thumb { width: 160px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.in-cands { display: grid; gap: .4rem; margin: .6rem 0; }
.in-cand { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; cursor: pointer; }
.in-cand input { width: auto; margin-top: .25rem; }
.receipt .party-ack { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; padding-top: .6rem; border-top: 1px dashed #c9d1e2; font-size: .82rem; color: #3b4458; }
.receipt .party-ack img { height: 52px; max-width: 180px; object-fit: contain; }
.receipt .party-ack div { display: grid; gap: .1rem; }
.ack-card { max-width: 820px; margin-top: 1rem; }
@media (max-width: 640px) { .in-row { grid-template-columns: 1fr; } .in-thumb { width: 120px; } }

/* ── the community group (community.js), like a channel ── */
.com-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.com-head > div { display: flex; gap: .7rem; align-items: center; }
.com-head img { height: 48px; width: auto; }
.com-head b { display: block; font-size: 1.15rem; }
.com-compose { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.com-feed, .com-pins, .com-livebar { display: grid; gap: .7rem; max-width: 720px; }
.com-pins { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--line); }
.com-livebar { margin-bottom: .9rem; }
.com-msg { background: var(--panel); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: .8rem .9rem; }
.com-msg h3 { margin: .25rem 0 .35rem; font-size: 1.05rem; }
.com-msg.k-greeting h3 { font-size: 1.3rem; color: #2e3192; }
.com-msg.k-notice { border-left: 4px solid #2e3192; }
.com-msg.k-offer { border-left: 4px solid #1f7f41; }
.com-msg.k-live { border-left: 4px solid #b3261e; }
.com-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.com-img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 10px; margin: .3rem 0; }
.com-body { white-space: normal; line-height: 1.7; margin: .3rem 0; }
.com-ev { font-weight: 600; margin: .3rem 0; }
.com-video { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; margin: .4rem 0; }
.com-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.com-acts { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .5rem; }
.com-time { margin-left: auto; font-size: .75rem; color: var(--muted); }
.com-day { text-align: center; font-size: .75rem; color: var(--muted); margin: .4rem 0; }
.com-live { display: inline-block; background: #b3261e; color: #fff; font-weight: 700; font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; }
.com-note { max-width: 720px; text-align: center; margin-top: 1rem; }
.comlivebar { background: #b3261e; }

/* ── signatures, small, at the foot and to the right (sign.js, 15 Oct 2026) ── */
.receipt .r-sign.sg-row, .sg-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: .9rem 1.4rem; margin-top: 1.3rem; text-align: center; }
.receipt .r-sign.sg-row.sg-one { display: flex; }
.sg-row .sg { width: 148px; gap: 0; font-size: .7rem; color: #4a5370; }
.sg-row .sg-img { height: 44px; }
.sg-row .sg-img img:not(.sg-seal) { max-height: 44px; }
.sg-row .sg-seal { width: 62px; height: 62px; right: -14px; bottom: -8px; }
.sg-row .sg-line { margin: .1rem 0 .15rem; border-top-color: #9aa3b8; }
.sg-row .sg b { font-size: .74rem; font-weight: 600; }
.sg-row .sg span { line-height: 1.35; }
.sg-row .sg .sg-date { color: #7a839a; font-size: .66rem; }
.receipt .dbv-sign { grid-template-columns: 148px minmax(0, 1fr); align-items: end; gap: 1rem; }
.receipt .dbv-sign .dbv-recv { width: 148px; font-size: .7rem; }
.receipt .dbv-sign .dbv-recv .sg-img { height: 44px; }
.receipt .dbv-sign .dbv-recv .sg-img img { max-height: 44px; max-width: 100%; }
.receipt .dbv-sign.office-only { grid-template-columns: 1fr; }
.receipt.office-copy .dbv-sign.office-only { grid-template-columns: 148px minmax(0, 1fr); }
.ltr-sign .sg-row { justify-content: flex-end; }
.receipt .party-ack img { height: 40px; }
@media print {
  .sg-row .sg, .receipt .dbv-sign .dbv-recv { width: 36mm; }
  .sg-row .sg-img, .receipt .dbv-sign .dbv-recv .sg-img { height: 11mm; }
  .sg-row .sg-img img:not(.sg-seal), .receipt .dbv-sign .dbv-recv .sg-img img { max-height: 11mm; }
  .sg-row .sg-seal { width: 16mm; height: 16mm; }
  .receipt .dbv-sign { grid-template-columns: 36mm minmax(0, 1fr); }
}
@media (max-width: 640px) { .sg-row { justify-content: center; } .receipt .dbv-sign, .receipt.office-copy .dbv-sign.office-only { grid-template-columns: 1fr; } }

/* ── one sign-in page; staff devices (devices.js) ── */
.dev-steps { list-style: none; padding: 0; margin: .4rem 0 .8rem; display: grid; gap: .35rem; text-align: left; }
.dev-steps li { padding-left: 1.6rem; position: relative; color: var(--muted); }
.dev-steps li::before { content: ""; position: absolute; left: .2rem; top: .45rem; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--line); }
.dev-steps li.done { color: var(--ink); }
.dev-steps li.done::before { background: #1f7f41; border-color: #1f7f41; }
.dev-steps li.now { color: var(--ink); font-weight: 600; }
.dev-steps li.now::before { border-color: #c27c0e; }
.dev-req { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
/* website messages (webenq.js) */
.wenq-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.wenq-dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: .7rem 0 0; font-size: .9rem; }
.wenq-dl dt { color: var(--ink-2); }
.wenq-dl dd { margin: 0; }
.wenq-msg { white-space: pre-line; margin: .6rem 0 0; }
.auth-new { text-align: center; margin: .2rem 0 .4rem; font-size: .9rem; color: var(--ink-2); }
.auth-new a { font-weight: 600; }
/* video calls in the community group (call.js) — the stage stays dark in both themes, like any video app */
.call-pre { max-width: 520px; margin: 2rem auto; text-align: center; }
.call-pre img { width: 64px; height: 64px; }
.call-pre h1 { margin: .6rem 0 .3rem; }
.call-over h3 { margin-top: 0; }
.call { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 170px); background: #0d1424; color: #e8edf7; border-radius: var(--radius); overflow: hidden; }
.call-top { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid #1f2a44; }
.call-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-live { background: #b3261e; color: #fff; font-weight: 700; font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; }
.call-count { font-size: .82rem; color: #9aa6c1; white-space: nowrap; }
.call-grid { flex: 1; display: grid; gap: .5rem; padding: .6rem; grid-template-columns: 1fr; align-content: center; }
.call-grid[data-n="2"] { grid-template-columns: 1fr 1fr; }
.call-grid[data-n="3"], .call-grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
.call-grid[data-n="5"], .call-grid[data-n="6"], .call-grid[data-n="7"], .call-grid[data-n="8"], .call-grid[data-n="9"] { grid-template-columns: repeat(3, 1fr); }
.ctile { position: relative; aspect-ratio: 16 / 10; background: #18223a; border-radius: 10px; overflow: hidden; display: grid; place-items: center; border: 2px solid transparent; }
.ctile.talking { border-color: #6f9cff; }
.ctile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctile.screen video { object-fit: contain; background: #000; }
.cav { width: 72px; height: 72px; border-radius: 50%; background: #2a3a63; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; }
.cname { position: absolute; left: .5rem; bottom: .45rem; font-size: .8rem; background: rgba(8, 12, 22, .72); padding: .12rem .5rem; border-radius: 6px; }
.call-wait { text-align: center; color: #9aa6c1; }
.call-note { margin: 0 .6rem .4rem; padding: .5rem .8rem; background: #2a3a63; border-radius: 8px; text-align: center; cursor: pointer; }
.call-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; padding: .7rem; border-top: 1px solid #1f2a44; }
.cbtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 64px; padding: .45rem .55rem; background: #1f2b47; color: #e8edf7; border: 0; border-radius: 10px; font: inherit; font-size: .74rem; cursor: pointer; }
.cbtn .ico { width: 20px; height: 20px; }
.cbtn[hidden], .call-people[hidden], .call-note[hidden] { display: none; }
.cbtn.off { background: #3a2230; color: #f2b8b5; }
.cbtn.on { background: #6f9cff; color: #0d1424; }
.cbtn.leave { background: #2a3350; }
.cbtn.end { background: #b3261e; color: #fff; }
.cbadge { position: absolute; top: 2px; right: 6px; background: #f2c14e; color: #1d1600; border-radius: 999px; font-size: .68rem; padding: 0 .35rem; }
.call-people { position: absolute; top: 46px; right: 0; bottom: 64px; width: min(340px, 100%); background: #121b30; border-left: 1px solid #1f2a44; overflow: auto; padding: .7rem; }
.cp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.cp-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem .3rem; border-bottom: 1px solid #1f2a44; }
.cp-row.hand { background: #2b2614; border-radius: 6px; }
.call-people .muted, .call-people .small { color: #9aa6c1; }
.call-spk input[type=search] { margin-bottom: .4rem; }
.call-spk-list { max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; }
.com-msg.k-call.on { border-color: #b3261e; }
body:has(.call) .ai-fab, body:has(.call) #comlivebar { display: none; }      /* nothing floats over a call */
/* on a phone the call takes the whole screen, like any call app; "Leave" brings the app back */
@media (max-width: 600px) { .call { position: fixed; inset: 0; z-index: 80; min-height: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .call-bar { flex-wrap: nowrap; gap: .3rem; padding: .55rem .4rem; } .cbtn { flex: 1 1 0; min-width: 0; max-width: 72px; padding: .45rem .2rem; font-size: .68rem; } .cbtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .call-grid[data-n="5"], .call-grid[data-n="6"], .call-grid[data-n="7"], .call-grid[data-n="8"], .call-grid[data-n="9"] { grid-template-columns: 1fr 1fr; } }

.auth-back[hidden] { display: none; }
/* the sign-in page's menu (what the old home page's menu had) */
.auth-menubtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); color: #fff; cursor: pointer; }
.auth-menubtn .ico { width: 20px; height: 20px; }
.auth-menu { position: fixed; inset: 0; z-index: 70; background: rgba(8, 12, 22, .45); }
.auth-menu[hidden] { display: none; }
.am-sheet { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); background: var(--panel); color: var(--ink); padding: calc(.9rem + env(safe-area-inset-top)) .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; overflow: auto; }
.am-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.am-head img { height: 44px; }
.am-x { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); cursor: pointer; }
.am-sheet a { display: flex; align-items: center; gap: .7rem; padding: .7rem .6rem; border-radius: 8px; color: var(--ink); font-weight: 600; }
.am-sheet a:hover { background: var(--soft); text-decoration: none; }
.am-sheet a .ico { width: 20px; height: 20px; color: var(--brand); flex: none; }
/* the back button on every page */
.back-btn { margin-left: .15rem; }
.vback { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; margin-bottom: .6rem; }
.vback .i { width: 18px; height: 18px; }
.auth-tools { display: inline-flex; align-items: center; gap: .5rem; }
.auth-lang { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.auth-lang a { color: #fff; }
.auth-lang a.on { background: #fff; color: var(--brand); }
.sg .sg-stamp { display: block; max-width: 100%; max-height: 13mm; margin: 2px auto 0; }
@media print { .sg .sg-stamp { max-height: 10mm; } }

/* ═══ The website's look (owner, 21 Oct 2026: "erp er colour design gulo website theke dekhe … premium"): logo navy,
   midnight, champagne gold and pearl paper, the website's fonts (Anek Bangla, Manrope, Tiro Bangla for page titles).
   Only tokens change here; status colours (green / amber / red) keep their meaning. ═══ */
:root {
  --paper: #f5f6fa; --panel: #ffffff; --panel-2: #fafbfd; --ink: #17192f; --ink-2: #33354f; --muted: #676779; --faint: #9b9aa8;
  --line: #e3e5ef; --line-2: #eef0f6; --soft: #f1f2f8; --brand: #2e3192; --brand-2: #3b3fa8; --brand-ink: #ffffff; --brand-soft: #ecebf7;
  --brand-line: #cfcfeb; --gold: #b8955c; --accent: #b8955c; --navy: #10123d; --navy-2: #1d2060; --navy-ink: #f7f4ed; --bar: #2e3192; --bar-2: #e5e3f3;
  --info: #2e3192; --info-soft: #ecebf7; --radius: 14px; --radius-s: 10px;
  --shadow: 0 1px 2px rgba(11, 13, 46, .04), 0 12px 32px -14px rgba(11, 13, 46, .16); --shadow-l: 0 30px 60px -24px rgba(11, 13, 46, .3);
  --grad-brand: linear-gradient(135deg, #10123d 0%, #2e3192 100%); --grad-green: linear-gradient(135deg, #0b6b47 0%, #21a06a 100%);
  --grad-violet: linear-gradient(135deg, #3c2387 0%, #6d4fd0 100%); --grad-amber: linear-gradient(135deg, #9a5b12 0%, #d98c2b 100%);   /* two colours, like the website: navy and gold */
  --font: "Anek Bangla", "Manrope", "Hind Siliguri", "Noto Sans Bengali", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-num: "Manrope", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-title: "Tiro Bangla", "Cormorant Garamond", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c0f2c; --panel: #141840; --panel-2: #181c4a; --ink: #e9e9f4; --ink-2: #c9c9dd; --muted: #a5a8c8; --faint: #6f7298; --line: #262a5a;
    --line-2: #1f2350; --soft: #1a1e4a; --brand: #b4b6f2; --brand-2: #c9cbf7; --brand-ink: #10123d; --brand-soft: #22265a; --brand-line: #3a3f80;
    --gold: #d6b984; --accent: #d6b984; --navy: #070920; --navy-2: #10123d; --bar: #b4b6f2; --bar-2: #262a5a; --info: #b4b6f2; --info-soft: #22265a;
  }
}
:root[data-theme="dark"] {
  --paper: #0c0f2c; --panel: #141840; --panel-2: #181c4a; --ink: #e9e9f4; --ink-2: #c9c9dd; --muted: #a5a8c8; --faint: #6f7298; --line: #262a5a;
  --line-2: #1f2350; --soft: #1a1e4a; --brand: #b4b6f2; --brand-2: #c9cbf7; --brand-ink: #10123d; --brand-soft: #22265a; --brand-line: #3a3f80;
  --gold: #d6b984; --accent: #d6b984; --navy: #070920; --navy-2: #10123d; --bar: #b4b6f2; --bar-2: #262a5a; --info: #b4b6f2; --info-soft: #22265a;
}
body { font-family: var(--font); }
.ph h1, .auth-card h1, .call-pre h1 { font-family: var(--font-title); font-weight: 400; }
.btn.primary { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: var(--navy-2); }
html[lang="bn"] .eyebrow, html[lang="bn"] .ph .eyebrow, html[lang="bn"] .brief .eyebrow { letter-spacing: 0; text-transform: none; }   /* no letter-spacing on Bangla */
.rescue-sheet { border: 1px dashed var(--line); border-radius: var(--radius-s); padding: .8rem 1rem; margin-top: .6rem; }
.rescue-sheet ol { columns: 2; margin: .4rem 0; } .rescue-sheet code { font-size: 1.05rem; letter-spacing: .06em; }
@media print { body:has(.rescue-sheet) .shell > *:not(main), body:has(.rescue-sheet) #content > *:not(#myrescue) { display: none !important; } }

/* ═══ Premium navy (owner, 22 Oct 2026: the website's navy, "erp te emon hobe"; white paper again, gold only as a fine
   accent; the page that is open stands out in the menu). Navy surfaces carry the website's fine vertical lines. ═══ */
:root { --navy-surface: repeating-linear-gradient(118deg, transparent 0 25px, rgba(150, 160, 255, .075) 25px 26px), linear-gradient(180deg, #060818 0%, #0b0e2c 40%, #161b55 100%); }   /* the owner's picture: deep navy, fine diagonal lines */
.side { background: var(--navy-surface) !important; border-right: 0 !important; color: #e9e9f4; }
.side .brand small { color: rgba(233, 233, 244, .7); }
.side .brand-logo { background: #fff; border-radius: 12px; padding: 6px; }
.side .nav-group { color: rgba(214, 185, 132, .75); }
.side .nav a { color: rgba(233, 233, 244, .82); }
.side .nav a svg { color: rgba(233, 233, 244, .55); }
.side .nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side .nav a.active { background: linear-gradient(90deg, rgba(184, 149, 92, .28), rgba(184, 149, 92, .08)); color: #fff; font-weight: 600; }
.side .nav a.active svg { color: #e4cf9f; }
.side .nav a.active::before { background: #d6b984; }
.side .nav a .badge, .side .nav a .nb { background: #d6b984; color: #10123d; }
.ph { background: var(--navy-surface); color: #fff; border-radius: var(--radius); padding: 1.15rem 1.3rem; margin-bottom: 1rem; box-shadow: var(--shadow-l); }
.ph::before { display: none !important; }
.ph h1 { color: #fff; }
.ph .sub, .ph .sub * { color: rgba(233, 233, 244, .8); }
.ph .eyebrow { color: #d6b984; }
.ph .actions .btn:not(.primary) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.ph .actions .btn.primary { background: #fff; color: #10123d; border-color: #fff; }
.ph a:not(.btn) { color: #e4cf9f; }
.bottombar { background: linear-gradient(180deg, #10123d, #0b0d2e) !important; border-top: 0 !important; }
.bottombar a { color: rgba(233, 233, 244, .7) !important; }
.bottombar a.on, .bottombar a.active, .bottombar a[aria-current] { color: #e4cf9f !important; }
.hubtabs a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.hubtabs a.on svg { color: #fff; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #10123d; border-color: #10123d; }
.topbar { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 120px; background: linear-gradient(90deg, #b8955c, transparent); }
.card { border-color: var(--line); box-shadow: var(--shadow); }
:root[data-theme="dark"] .ph, :root[data-theme="dark"] .side { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0b0e2a; --panel: #121640; --panel-2: #161a4a; --line: #242a5c; --line-2: #1c2152; --soft: #191d4c; } }
:root[data-theme="dark"] { --paper: #0b0e2a; --panel: #121640; --panel-2: #161a4a; --line: #242a5c; --line-2: #1c2152; --soft: #191d4c; }
.side .brand-logo { width: 116px; height: auto; display: block; }
.qa a, .qa .mi, .qa > * { background: var(--panel) !important; border-color: var(--line) !important; }   /* quick actions: white cards, navy icons */
.qa a:hover { border-color: var(--brand-line) !important; box-shadow: var(--shadow); }

/* each quick action its own colour, by what it does (owner, 22 Oct 2026: "icon gulo shob ak color ba aki digine na diye") */
.qa a[href^="#/documents"] .s-sic, .qa a[href^="#/documents"] svg.ico-bg { background: linear-gradient(135deg, #10123d, #2e3192); }
.qa a[href^="#/collection"] .s-sic { background: linear-gradient(135deg, #0b6b47, #21a06a); }
.qa a[href^="#/payables"] .s-sic, .qa a[href^="#/payment"] .s-sic { background: linear-gradient(135deg, #9a5b12, #d98c2b); }
.qa a[href^="#/booking"] .s-sic { background: linear-gradient(135deg, #3c2387, #6d4fd0); }
.qa a[href^="#/lead"] .s-sic { background: linear-gradient(135deg, #0b5e7a, #1e98c0); }
.qa a[href^="#/banking"] .s-sic { background: linear-gradient(135deg, #8a6a36, #c4a066); }
.qa .s-sic { box-shadow: 0 8px 18px -10px rgba(16, 18, 61, .55); }
.badge[hidden] { display: none !important; }

/* ═══ clearer reading (owner, 22 Oct 2026: "lekha gulo halka bujha jay aro sposto koro") and a colour for every menu icon ═══ */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { --ink: #111327; --ink-2: #23253f; --muted: #4c4e66; --faint: #767890; }
}
:root[data-theme="light"] { --ink: #111327; --ink-2: #23253f; --muted: #4c4e66; --faint: #767890; }
html[lang="bn"] body { font-weight: 450; }
td, .card p, .muted, .small { color: inherit; }
.muted { color: var(--muted); }
.side .nav a { color: rgba(255, 255, 255, .94); font-weight: 500; }
.side .nav-group { color: rgba(228, 207, 159, .85); }
.side .nav a.active { background: linear-gradient(90deg, #c9a66b, #a9844a); color: #10123d; font-weight: 700; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.side .nav a.active svg { color: #10123d !important; }
.side .nav a.active::before { background: #fff; }
.side .nav a.active .badge { background: #10123d; color: #fff; }
.ph .sub, .ph .sub * { color: rgba(255, 255, 255, .92); }
.ph .eyebrow { color: #e4cf9f; }
.hubtabs a { color: var(--ink); font-weight: 500; font-size: .9rem; }
.hubtabs a.on { font-weight: 700; }
/* menu icons: each its own light jewel tone on the navy */
.side .nav a:nth-child(8n+1) svg { color: #f2cf86; }
.side .nav a:nth-child(8n+2) svg { color: #7fd8b4; }
.side .nav a:nth-child(8n+3) svg { color: #8fc1ff; }
.side .nav a:nth-child(8n+4) svg { color: #f5a98a; }
.side .nav a:nth-child(8n+5) svg { color: #c2a8ff; }
.side .nav a:nth-child(8n+6) svg { color: #79d3e6; }
.side .nav a:nth-child(8n+7) svg { color: #f39fbe; }
.side .nav a:nth-child(8n+8) svg { color: #b9e07f; }
/* the tabs on each page: icons in deeper versions of the same tones */
.hubtabs a:nth-child(8n+1) svg { color: #a77b22; }
.hubtabs a:nth-child(8n+2) svg { color: #0d8a5c; }
.hubtabs a:nth-child(8n+3) svg { color: #2563c9; }
.hubtabs a:nth-child(8n+4) svg { color: #c4532b; }
.hubtabs a:nth-child(8n+5) svg { color: #6a43c9; }
.hubtabs a:nth-child(8n+6) svg { color: #0e7f97; }
.hubtabs a:nth-child(8n+7) svg { color: #b8336a; }
.hubtabs a:nth-child(8n+8) svg { color: #5d8a12; }
.hubtabs a.on svg { color: #fff !important; }

/* ═══ the community as a WhatsApp group (owner, 22 Oct 2026: "sem WhatsApp group er moto hobe") ═══ */
.wa { display: flex; flex-direction: column; height: calc(100dvh - 150px); min-height: 460px; max-width: 900px; margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #f3f4f7; box-shadow: var(--shadow); }
.wa-top { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; background: var(--navy-surface, #10123d); background-color: #10123d; color: #fff; }
.wa-top img { width: 42px; height: 42px; border-radius: 50%; background: #fff; object-fit: contain; padding: 4px; }
.wa-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wa-title b { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-title span { font-size: .8rem; color: rgba(255, 255, 255, .78); }
.wa-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; flex: none; }
.wa-top .wa-ic:hover { background: rgba(255, 255, 255, .12); }
.wa-ic svg { width: 22px; height: 22px; }
.wa-chat { flex: 1; overflow-y: auto; padding: .8rem .7rem 1rem; display: flex; flex-direction: column; gap: .3rem;
  background-color: #f3f4f7; background-image: radial-gradient(rgba(16, 18, 61, .06) 1px, transparent 1px); background-size: 18px 18px; }
.wa-pinbar { padding: .5rem .7rem; background: #fff; border-bottom: 1px solid var(--line); }
.wa-pinbar .wa-row { justify-content: stretch; } .wa-pinbar .wa-b { max-width: 100%; width: 100%; box-shadow: none; }
.wa-day { text-align: center; margin: .5rem 0 .3rem; }
.wa-day span { display: inline-block; background: #fff; color: #54656f; font-size: .76rem; padding: .2rem .7rem; border-radius: 8px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.wa-row { display: flex; }
.wa-row.me { justify-content: flex-end; }
.com-msg.wa-b { position: relative; max-width: min(82%, 560px); background: #fff; border: 0; border-left: 0; border-radius: 0 10px 10px 10px; padding: .4rem .6rem 1.15rem; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); color: #111b21; }
.wa-row.me .com-msg.wa-b { background: #d9fdd3; border-radius: 10px 0 10px 10px; }
.wa-b::before { content: ""; position: absolute; top: 0; left: -7px; width: 0; height: 0; border-top: 8px solid #fff; border-left: 7px solid transparent; }
.wa-row.me .wa-b::before { left: auto; right: -7px; border-top-color: #d9fdd3; border-left: 0; border-right: 7px solid transparent; }
.wa-pinbar .wa-b::before { display: none; }
:root[data-theme="dark"] .wa-b::before { border-top-color: #202c33; } :root[data-theme="dark"] .wa-row.me .wa-b::before { border-top-color: #005c4b; }
.wa-who { display: block; font-size: .82rem; margin-bottom: .1rem; }
.wa-kind { display: inline-block; font-size: .72rem; font-weight: 600; color: #2e3192; background: #ecebf7; border-radius: 6px; padding: .05rem .45rem; }
.wa-b h3 { font-size: 1rem; margin: .25rem 0 .2rem; }
.wa-b.k-greeting h3 { font-size: 1.2rem; color: #2e3192; }
.wa-b .com-body { margin: .15rem 0; line-height: 1.55; padding-right: 2.4rem; }
.wa-b .com-img { border-radius: 8px; margin: .2rem 0; max-height: 360px; }
.wa-time { position: absolute; right: .55rem; bottom: .25rem; font-size: .7rem; color: #667781; display: inline-flex; align-items: center; gap: .2rem; }
.wa-time svg { width: 11px; height: 11px; }
.wa-tick { color: #8696a0; letter-spacing: -.3em; margin-left: .15rem; font-size: .72rem; }
.wa-tick.seen { color: #53bdeb; }
.wa-more { position: absolute; top: .2rem; right: .2rem; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: #8696a0; cursor: pointer; opacity: .55; display: grid; place-items: center; }
.wa-more svg { width: 16px; height: 16px; } .wa-b:hover .wa-more { opacity: 1; }
.wa-react { position: absolute; left: .5rem; bottom: -.7rem; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .05rem .4rem; font-size: .72rem; display: inline-flex; gap: .2rem; align-items: center; cursor: pointer; color: #8696a0; }
.wa-react svg { width: 13px; height: 13px; } .wa-react.on { color: #c2334d; border-color: #f2c6cf; }
.wa-row:has(.wa-react) { margin-bottom: .6rem; }
.wa-call { display: flex; gap: .6rem; align-items: center; padding-right: 1.4rem; }
.wa-call .small { display: block; color: #667781; }
.wa-callic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2e3192; color: #fff; flex: none; }
.wa-b.k-call.on .wa-callic { background: #1f8a4c; }
.wa-b .com-acts { margin-top: .4rem; }
.wa-bar { display: flex; align-items: flex-end; gap: .35rem; padding: .5rem .6rem; background: #f0f2f5; border-top: 1px solid #e3e5ef; }
.wa-bar .wa-ic { color: #54656f; }
.wa-bar textarea { flex: 1; resize: none; border: 0; border-radius: 22px; padding: .6rem .9rem; font: inherit; background: #fff; max-height: 140px; line-height: 1.4; min-height: 42px; outline: none; color: #111b21; }
.wa-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #2e3192; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.wa-send svg { width: 20px; height: 20px; } .wa-send:disabled { opacity: .5; }
.wa-only { justify-content: center; text-align: center; font-size: .84rem; color: #54656f; padding: .8rem; }
.wa-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-top: .6rem; }
.wa-sheet .btn { justify-content: flex-start; }
@media (max-width: 760px) { .wa { height: calc(100dvh - 205px); border-radius: 12px; margin: 0 -.3rem; } }
:root[data-theme="dark"] .wa, :root[data-theme="dark"] .wa-chat { background-color: #0b141a; }
:root[data-theme="dark"] .com-msg.wa-b { background: #202c33; color: #e9edef; }
:root[data-theme="dark"] .wa-row.me .com-msg.wa-b { background: #005c4b; }
:root[data-theme="dark"] .wa-bar { background: #202c33; } :root[data-theme="dark"] .wa-bar textarea { background: #2a3942; color: #e9edef; }
body:has(.wa) .ai-fab { display: none; }
.ph .pill, .ph .sub .pill { background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .32) !important; color: #fff !important; }

/* ═══ motion, richer (owner, 22 Oct 2026: "age jemon animation akare silo… aro shundor kore") ═══ */
#pgbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; pointer-events: none; opacity: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #b8955c, #e4cf9f, #b8955c); }
#pgbar.run { opacity: 1; width: 72%; transition: width 2.4s cubic-bezier(.08, .7, .2, 1); }
#pgbar.done { opacity: 0; width: 100%; transition: width .25s ease, opacity .35s ease .2s; }
@media (prefers-reduced-motion: no-preference) {
  .motion #content.pg-in { animation: pgIn .45s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .motion .rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--rd, 0) * 70ms); }
  .motion .rv.in { opacity: 1; transform: none; }
  .topbar { transition: box-shadow .3s ease, background .3s ease; }
  .totop { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
  .tile .v, .s-stat b { font-variant-numeric: tabular-nums; }
}
html.scrolled .topbar { box-shadow: 0 10px 24px -18px rgba(11, 13, 46, .55); }
.totop { position: fixed; right: 18px; bottom: 92px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(184, 149, 92, .5); cursor: pointer;
  background: #10123d; color: #e4cf9f; display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; box-shadow: 0 10px 22px -12px rgba(11, 13, 46, .7); }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { width: 20px; height: 20px; transform: rotate(180deg); }
@media (max-width: 760px) { .totop { bottom: 142px; right: 14px; } }
@media print { #pgbar, .totop { display: none; } }

/* ═══ day mode is white, nowhere cream or gold-tinted (owner, 22 Oct 2026: "diner alote jeta sheta shada hobe shonali na") ═══ */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { --paper: #ffffff; --panel-2: #fbfbfc; --soft: #f4f5f8; --warn-soft: #ffffff; --line: #e2e4ec; }
:root:not([data-theme="dark"]) body { background: #ffffff; }
:root:not([data-theme="dark"]) .note, :root:not([data-theme="dark"]) .note.warn, :root:not([data-theme="dark"]) .demo-flag, :root:not([data-theme="dark"]) .today-i {
  background: #ffffff !important; border: 1px solid var(--line) !important; border-left: 3px solid #c08a2a !important; }
:root:not([data-theme="dark"]) .note.info, :root:not([data-theme="dark"]) .note.ok { border-left-color: #2e3192 !important; }
:root:not([data-theme="dark"]) .note.bad { border-left-color: #b4332b !important; }
:root:not([data-theme="dark"]) .pill.warn { background: #ffffff; border: 1px solid rgba(154, 98, 0, .45); }
:root:not([data-theme="dark"]) .tile, :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .qa a { border-color: var(--line) !important; box-shadow: 0 1px 2px rgba(16, 18, 61, .05), 0 8px 22px -16px rgba(16, 18, 61, .22); }
:root:not([data-theme="dark"]) .topbar { background: rgba(255, 255, 255, .94); }
}
:root[data-theme="light"] { --paper: #ffffff; --panel-2: #fbfbfc; --soft: #f4f5f8; --warn-soft: #ffffff; --line: #e2e4ec; }
:root[data-theme="light"] body { background: #ffffff; }
:root[data-theme="light"] .note, :root[data-theme="light"] .note.warn, :root[data-theme="light"] .demo-flag, :root[data-theme="light"] .today-i {
  background: #ffffff !important; border: 1px solid var(--line) !important; border-left: 3px solid #c08a2a !important; }
:root[data-theme="light"] .note.info, :root[data-theme="light"] .note.ok { border-left-color: #2e3192 !important; }
:root[data-theme="light"] .note.bad { border-left-color: #b4332b !important; }
:root[data-theme="light"] .pill.warn { background: #ffffff; border: 1px solid rgba(154, 98, 0, .45); }
:root[data-theme="light"] .tile, :root[data-theme="light"] .card, :root[data-theme="light"] .qa a { border-color: var(--line) !important; box-shadow: 0 1px 2px rgba(16, 18, 61, .05), 0 8px 22px -16px rgba(16, 18, 61, .22); }
:root[data-theme="light"] .topbar { background: rgba(255, 255, 255, .94); }
.warn-t { color: var(--warn, #9a6200); }


/* ═══ owner, 22 Oct 2026: tidier top bar, typing switch on the box, header gradient with a building, buttons pop, logo animates ═══ */
.topbar .user { gap: .45rem; }
.me-wrap { position: relative; display: inline-flex; }
.me-btn { border: 0; cursor: pointer; width: 36px; height: 36px; background: linear-gradient(135deg, #10123d, #2e3192); color: #fff; font-weight: 700; box-shadow: 0 6px 14px -8px rgba(16, 18, 61, .7); }
.user .me-btn, .user .me-wrap .avatar { display: grid !important; }
.me-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-l); padding: .4rem; z-index: 80; }
.me-menu[hidden] { display: none; }
.me-head { display: flex; gap: .6rem; align-items: center; padding: .55rem .6rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.me-head b { display: block; font-size: .95rem; } .me-head small { color: var(--muted); font-size: .78rem; display: block; line-height: 1.35; }
.me-head .avatar { background: linear-gradient(135deg, #10123d, #2e3192); color: #fff; }
.me-menu a, .me-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .6rem; border-radius: 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; text-decoration: none; }
.me-menu a:hover, .me-menu button:hover { background: var(--soft); text-decoration: none; }
.me-menu svg { width: 17px; height: 17px; color: var(--muted); }
.me-menu .me-out { color: var(--bad); } .me-menu .me-out svg { color: var(--bad); }
.bn-chip { position: fixed; z-index: 120; min-width: 26px; height: 26px; padding: 0 6px; font-size: .82rem; border-radius: 8px; box-shadow: 0 4px 10px -6px rgba(16, 18, 61, .5); }
.bn-chip[hidden] { display: none; }
input.bn-pad, textarea.bn-pad { padding-right: 38px; }

/* page headers: deep navy on the left warming to royal blue on the right, a quiet building on the right (the owner's picture) */
:root { --hero-surface: repeating-linear-gradient(118deg, transparent 0 25px, rgba(150, 160, 255, .075) 25px 26px), linear-gradient(90deg, #060818 0%, #0b0e2c 35%, #151a52 70%, #22287a 100%); }   /* the same diagonal lines, deep on the left growing brighter to the right (owner) */
.ph, .ph.hero, .portal-hero, .s-hero { background: var(--hero-surface) !important; }
.ph { overflow: hidden; position: relative; }

/* buttons pop (and settle with a small bounce) */
@media (prefers-reduced-motion: no-preference) {
  .btn, .iconbtn, .searchbtn, .themebtn, .bn-toggle, .me-btn, .qa a, .hubtabs a, .seg a, .wa-send, .wa-ic, .totop {
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease !important; }
  .btn:hover, .iconbtn:hover, .searchbtn:hover, .themebtn:hover, .me-btn:hover, .hubtabs a:hover, .wa-send:hover { transform: translateY(-2px) scale(1.03); }
  .qa a:hover { transform: translateY(-4px) scale(1.02); }
  .btn:active, .iconbtn:active, .searchbtn:active, .themebtn:active, .bn-toggle:active, .me-btn:active, .qa a:active, .hubtabs a:active, .seg a:active, .wa-send:active, .wa-ic:active, .totop:active {
    transform: scale(.92) !important; transition-duration: .08s !important; }
  .btn.primary:hover { box-shadow: 0 10px 22px -12px rgba(46, 49, 146, .8); }
  .qa a:hover .s-sic { animation: icoPop .5s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes icoPop { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
  .me-menu:not([hidden]), .bn-chip:not([hidden]) { animation: popIn .26s cubic-bezier(.34, 1.56, .64, 1) both; }

  /* the logo: rises in, a slow shine passes over it now and then, lifts a little when pointed at */
  .side .brand { position: relative; overflow: hidden; border-radius: 14px; }
  .side .brand-logo { animation: logoRise .9s cubic-bezier(.2, .9, .3, 1.2) both; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .side .brand:hover .brand-logo { transform: translateY(-3px) scale(1.04); }
  .side .brand::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: logoShine 7s ease-in-out 1.2s infinite; }
  @keyframes logoRise { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
  @keyframes logoShine { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }
  .auth-logo, .login-logo, .auth-card img:first-child { animation: logoRise .9s cubic-bezier(.2, .9, .3, 1.2) both; }
}
.me-menu a, .me-menu button, .me-menu #switchrole { font-size: .92rem !important; font-weight: 500; }
.modal-box, .ask-box { position: relative; }

/* my profile: photo, birthday, delivery address */
.prof-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.prof-face { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #10123d, #2e3192); color: #fff; font-size: 1.7rem; font-weight: 700; box-shadow: 0 10px 24px -14px rgba(16, 18, 61, .8); border: 3px solid #fff; }
.prof-face img, .avatar img.face { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar:has(img.face) { padding: 0; overflow: hidden; }

/* the pad: seal by the logo, name stamp beside the signature, small reference and date, the office address at the foot */
.wr-paper { position: relative; }
.wr-paper .ltr-seal { position: absolute; top: 6px; left: 60px; width: 64px; height: auto; opacity: .85; transform: rotate(-12deg); mix-blend-mode: multiply; pointer-events: none; z-index: 2; }
.wr-paper .wr-meta { font-size: .78rem; opacity: .85; }
.wr-paper .ltr-foot { margin-top: 2.2rem; padding-top: .55rem; border-top: 1px solid #e3e5ef; text-align: center; font-size: .72rem; color: #8a8ca0; letter-spacing: 0; }
.sg-img.sg-beside { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.sg-img.sg-beside .sg-stamp { max-height: 40px; width: auto; max-width: 150px; margin: 0; }
.sg-row .sg.sg-st { width: auto; min-width: 148px; }               /* signature + name stamp: as wide as both need */
.sg-row { align-items: flex-start !important; }                     /* every signature on one line, whatever is written under it */
.ltr-sign .sg-row { justify-content: flex-end; }
/* the editor */
.wr-body { position: relative; }
#wre { min-height: 420px; }
#wre > div[style*="absolute"] { outline: 1px dashed #9aa0d8; outline-offset: 2px; padding: 16px 6px 6px; resize: horizontal; overflow: hidden; background: rgba(255, 255, 255, .6); }
#wre > div[style*="absolute"]::before { content: "⠿ ধরে সরান"; position: absolute; top: 0; left: 0; right: 0; height: 14px; font-size: 10px; line-height: 14px; color: #6b70c8; background: #eef0fb; cursor: move; padding-left: 4px; }
.wr-body > div[style*="absolute"] { padding-top: 0; }
.wr-bar select { height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: .82rem; padding: 0 .3rem; max-width: 9.5rem; }
.wr-color { position: relative; cursor: pointer; }
.wr-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media print { #wre > div[style*="absolute"] { outline: 0; background: none; } #wre > div[style*="absolute"]::before { display: none; } .wr-paper .ltr-foot { position: fixed; bottom: 8mm; left: 0; right: 0; border: 0; } }
.lh-foot > span:first-child { color: #9a9cb0 !important; font-size: .74rem !important; font-weight: 400 !important; }   /* the office address, faint at the foot of every paper (owner) */

/* designing a paper (paperdesign.js) */
.receipt.pd-on * { cursor: pointer; }
.receipt.pd-on .pd-sel { outline: 2px solid #2e3192 !important; outline-offset: 2px; cursor: move; }
.receipt.pd-on *:hover { outline: 1px dashed #9aa0d8; }
.receipt.pd-on .pd-hidden { opacity: .25; outline: 1px dashed #b4332b; }
.receipt:not(.pd-on) .pd-hidden { display: none !important; }
.pd-panel { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 150; width: min(760px, calc(100% - 20px)); background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-l); padding: .7rem .8rem; display: grid; gap: .55rem; }
.pd-msg { font-size: .85rem; color: var(--muted); }
.pd-tools { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pd-tools button, .pd-tools select, .pd-col { height: 34px; min-width: 34px; padding: 0 .55rem; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; position: relative; }
.pd-col input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pd-act { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
@media print { .pd-panel { display: none !important; } }

/* a signature on its name stamp (owner, 22 Oct 2026): the signature over the stamp's name line, the date small beside it */
.sg-row .sg.sg-st { width: auto; min-width: 150px; }
.sg-stack { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.sg-sigrow { position: relative; z-index: 3; display: flex; align-items: flex-end; gap: .35rem; margin-bottom: -16px; transform: translateX(14%); }
.sg-sigrow img { max-height: 46px; max-width: 150px; object-fit: contain; filter: brightness(0); }      /* signatures in black, the ones given earlier in blue too (owner, 4 Nov 2026) */
#mysig .sig-cur img, #sigprev img { filter: brightness(0); }
.sg-sigrow .sg-date { font-size: .6rem; color: #7a839a; white-space: nowrap; padding-bottom: 14px; }
.sg-stack .sg-stamp { position: relative; z-index: 1; max-height: 50px; max-width: 190px; width: auto; margin: 0; }
.sg-stack .sg-seal { right: -18px; bottom: -6px; }
@media print { .sg-sigrow img { max-height: 12mm; } .sg-stack .sg-stamp { max-height: 13mm; } }
.sg-stack .sg-date-under { display: block; margin-top: .15rem; font-size: .6rem; color: #7a839a; }   /* the date under the signed stamp (owner) */
.sg-stack .sg-sigrow { margin-bottom: 0; }                          /* signature, then its date, then the stamp */
.sg-stack .sg-date-under { margin: -2px 0 2px; line-height: 1.1; }
.sg-stack .sg-sigrow { transform: none; }

/* balanced signature row (owner, 22 Oct 2026): equal columns spread across the paper, every signature on one line, a clear date close under it */
.receipt .r-sign.sg-row, .sg-row { justify-content: space-evenly !important; align-items: flex-start !important; }
.ltr-sign .sg-row { justify-content: flex-end !important; }
.receipt.letter .sg-row:has(> .sg:only-child) { justify-content: flex-end !important; padding-right: 4%; }      /* one signer on a letter: at the right, as on a letter (4 Nov 2026) */
.sg-row .sg, .sg-row .sg.sg-st { width: 190px; min-width: 0; }
.sg-stack { padding-top: 0; }
.sg-stack .sg-sigrow { height: 46px; align-items: flex-end; justify-content: center; }
.sg-stack .sg-sigrow img { max-height: 46px; max-width: 170px; }
.sg-stack .sg-date-under { display: block; margin: 0 0 1px; line-height: 1.15; font-size: .7rem; font-weight: 600; color: #2b3150; letter-spacing: 0; }
.sg-stack .sg-stamp { max-height: 46px; max-width: 180px; }
.sg-typed { min-height: 46px; display: flex; flex-direction: column; justify-content: center; line-height: 1.3; }
.sg-typed b { font-size: .76rem; font-weight: 700; color: #1d2340; }
.sg-typed span { font-size: .7rem; color: #4a5370; }
@media print { .sg-row .sg, .sg-row .sg.sg-st { width: 46mm; } .sg-stack .sg-sigrow { height: 12mm; } .sg-typed { min-height: 12mm; } }

/* the staged import: every cell editable, wrong rows marked */
.mg-edit td { padding: 2px 3px; }
.mg-edit input { width: 100%; min-width: 90px; border: 1px solid transparent; background: transparent; font: inherit; font-size: .82rem; padding: .25rem .3rem; border-radius: 6px; }
.mg-edit input:focus { border-color: var(--brand); background: #fff; outline: none; }
.mg-edit tr.mg-bad td { background: #fff5f4; }
.mg-edit th.mg-th { text-transform: none; letter-spacing: 0; white-space: nowrap; }

/* ── motion, 23 Oct 2026: tick, seal, dots, changed figures, "less animation", nothing on paper ── */
#toast .tk { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .5em; border-radius: 50%; background: var(--ok, #1f7a4d); color: #fff; font-size: .8em; font-weight: 700; vertical-align: -.1em; }
#toast.bad .tk { background: #fff; color: var(--bad); }
.ai-wait .dots { display: inline-flex; gap: 3px; margin-left: .35em; vertical-align: middle; }
.ai-wait .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; }
.seal-press { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 80; }
.seal-press span { font: 700 1.6rem/1 'Anek Bangla', sans-serif; letter-spacing: .04em; color: var(--ok, #1f7a4d); border: 3px solid currentColor; border-radius: 12px; padding: .5rem 1.3rem; background: color-mix(in srgb, var(--paper, #fff) 82%, transparent); transform: rotate(-8deg); opacity: 0; }
.seal-press.booked span { color: var(--gold, #b8891f); }
.tile.changed { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #b8891f) 55%, transparent); }
.wk3 h3 { margin-bottom: .5rem; }
.wk3 .tiles { margin: 0; }
.calm-row { display: flex; gap: .6rem; align-items: center; font-weight: 500; }
.calm-row input { width: 1.15rem; height: 1.15rem; }
#c4f label { display: block; margin-bottom: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .motion #toast.show .tk { animation: tk-pop .32s cubic-bezier(.2, .9, .3, 1.3) both; }
  .motion #toast.show.bad { animation: toast-shake .4s; }
  .motion .ai-wait .dots i { animation: dot 1s infinite ease-in-out; }
  .motion .ai-wait .dots i:nth-child(2) { animation-delay: .15s; }
  .motion .ai-wait .dots i:nth-child(3) { animation-delay: .3s; }
  .motion .seal-press span { animation: seal-in 1.05s cubic-bezier(.2, .9, .3, 1.2) both; }
  .motion .seal-press.booked span { animation-duration: 1.45s; }
  .motion .seal-press.booked::after { content: ''; position: absolute; width: 14rem; height: 14rem; border-radius: 50%; border: 2px solid var(--gold, #b8891f); opacity: 0; animation: ring-out 1.1s .15s ease-out both; }
  .motion .tile.changed { animation: glow-once 2.2s ease-out both; }
  .motion .lead-card { transition: transform .18s var(--ease, ease), box-shadow .18s, opacity .18s; }
  .motion .lead-card.drag { transform: rotate(1.5deg) scale(1.02); box-shadow: var(--shadow-l); opacity: .9; }
}
@keyframes toast-shake { 0%, 100% { transform: translate(-50%, 0); } 20%, 60% { transform: translate(calc(-50% - 6px), 0); } 40%, 80% { transform: translate(calc(-50% + 6px), 0); } }
@media (max-width: 920px) { body:has(.bottombar) #toast { bottom: calc(4.6rem + env(safe-area-inset-bottom)); } }
@keyframes tk-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes seal-in { 0% { opacity: 0; transform: rotate(-8deg) scale(1.9); } 28% { opacity: 1; transform: rotate(-8deg) scale(.96); } 38% { transform: rotate(-8deg) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }
@keyframes ring-out { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
@keyframes glow-once { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold, #b8891f) 70%, transparent); } 35% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold, #b8891f) 25%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* "Less animation": everything settles at once */
.calm *, .calm *::before, .calm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
/* paper and PDF: never a trace of motion */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mi, .rv, .pg-in { opacity: 1 !important; transform: none !important; }
  .seal-press, #pgbar, .totop, .ripple { display: none !important; }
}

/* searchable lists (combo.js): type to find, the closest first */
.cb { position: relative; display: block; width: 100%; }
.cb .cb-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cb .cb-in { padding-right: 2rem; text-overflow: ellipsis; cursor: pointer; }
.cb .cb-in:focus { cursor: text; }
.cb-chev { position: absolute; right: .8rem; top: 50%; width: .45rem; height: .45rem; border: solid var(--muted); border-width: 0 1.6px 1.6px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: transform .2s var(--ease, ease); }
.cb.open .cb-chev { transform: translateY(-25%) rotate(-135deg); }
.cb.bad .cb-in { border-color: var(--bad); }
.cb-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 90; max-height: min(320px, 50vh); overflow: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-l); padding: .25rem; }
.cb-opt { padding: .5rem .65rem; border-radius: 7px; cursor: pointer; font-size: .92rem; line-height: 1.35; }
.cb-opt.cur { font-weight: 600; }
.cb-opt.on, .cb-opt:hover { background: color-mix(in srgb, var(--gold, #b8891f) 16%, transparent); }
.cb-none { padding: .55rem .65rem; color: var(--muted); font-size: .9rem; }
@media (prefers-reduced-motion: no-preference) { .motion .cb.open .cb-list { animation: cb-drop .16s var(--ease, ease) both; } }
@keyframes cb-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media print { .cb .cb-chev, .cb-list { display: none !important; } }

/* papers stay paper in night mode (owner, 23 Oct 2026: "night mode dile ai jinish ta dekha jacche na"): a receipt, letter,
   certificate, quotation or voucher is always printed ink on white, so inside it the day colours are used whatever the screen */
.receipt, .doc, .wr-paper {
  --paper: #ffffff; --panel: #ffffff; --panel-2: #fafbfd; --ink: #111327; --ink-2: #23253f; --muted: #4c4e66; --faint: #767890;
  --line: #e2e4ec; --line-2: #eef0f6; --soft: #f4f5f8; --brand: #2e3192; --brand-2: #3b3fa8; --brand-ink: #ffffff; --brand-soft: #ecebf7;
  --brand-line: #cfcfeb; --gold: #b8955c; --accent: #b8955c; --navy: #10123d; --navy-2: #1d2060; --navy-ink: #f7f4ed; --bar: #2e3192; --bar-2: #e5e3f3;
  --ok: #157347; --ok-soft: #e3f4ea; --warn: #9a6200; --warn-soft: #fdf1dc; --bad: #b4332b; --bad-soft: #fbe6e3; --info: #2e3192; --info-soft: #ecebf7;
  --shadow: none; color-scheme: light; color: var(--ink);
}
.doc { background: #ffffff; }
/* night mode: the main button is light lavender there, so its words are dark navy (white was unreadable); chat times lighter */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #10123d; } :root:not([data-theme="light"]) .wa-time { color: #aebac1; } }
:root[data-theme="dark"] .btn.primary { color: #10123d; }
:root[data-theme="dark"] .wa-time { color: #aebac1; }
:root[data-theme="dark"] .ph .actions .btn.primary, :root[data-theme="dark"] .receipt .btn.primary { color: #10123d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chips a.on, :root:not([data-theme="light"]) .chip.on { color: #10123d; } }
:root[data-theme="dark"] .chips a.on, :root[data-theme="dark"] .chip.on { color: #10123d; }
/* the community chat at night: each person's name colour brighter, the "only admins write here" line readable */
:root[data-theme="dark"] .wa-who { filter: brightness(1.7) saturate(.9); } :root[data-theme="dark"] .wa-only, :root[data-theme="dark"] .wa-bar .wa-ic { color: #aebac1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-who { filter: brightness(1.7) saturate(.9); } :root:not([data-theme="light"]) .wa-only, :root:not([data-theme="light"]) .wa-bar .wa-ic { color: #aebac1; } }
.mod-off { display: none !important; }
.closed-note { max-width: 640px; }

/* sign-in, cleaner (owner, 23 Oct 2026): a line of welcome, "open an account" below a soft divider, the website at the top */
.auth-card { border-top: 4px solid var(--brand); padding-top: 1.7rem; }
.auth-card h1 { margin-bottom: 0; }
.auth-sub { margin: .25rem 0 1.3rem; line-height: 1.55; }
.auth-or { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0 .7rem; color: var(--muted); font-size: .86rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-or[hidden], .auth-signup[hidden] { display: none; }
.auth-signup { display: flex; width: 100%; justify-content: center; gap: .45rem; padding: .8rem 1rem; border-radius: 10px; font-weight: 600; border: 1.5px solid var(--brand); color: var(--brand); background: transparent; }
.auth-signup:hover { background: var(--brand-soft); text-decoration: none; }
.auth-web { display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-weight: 600; font-size: .88rem; padding: .4rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
.auth-web:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.auth-web .ico { width: 16px; height: 16px; }
.su-card { width: min(460px, 100%); }
.su-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 600; margin-bottom: .6rem; }
.su-form select { padding: .7rem .8rem; border-radius: 10px; }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.su-note { margin: 1rem 0 0; }
.su-done { text-align: center; padding: .6rem 0; }
.su-done > .ico { width: 46px; height: 46px; color: var(--ok); }
.su-done h2 { justify-content: center; margin: .6rem 0 .3rem; } .su-done h2::after { display: none; }
.pp-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line-2); }
.pp-row:last-child { border-bottom: 0; }
/* the whole receipt under its check result (verify page, no sign-in) */
.vpaper { width: min(820px, 100%); margin: 1.2rem auto 0; }
.vpaper .actions { justify-content: flex-end; margin-bottom: .6rem; }
@media print { .vpage > *:not(.vpaper) { display: none !important; } .vpaper { margin: 0; width: auto; } }
/* "open an account": a plain link-like button, no frame (owner, 23 Oct 2026) */
.auth-signup { border: 0; background: transparent; padding: .55rem 1rem; }
.auth-signup:hover { background: var(--brand-soft); }
/* chips on the navy page head (a person's customer / investor badges): glass on navy, white words, in day and night (owner, 24 Oct 2026) */
.ph .hat { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .32) !important; color: #fff !important; }
/* night: every chosen filter chip the same — light lavender with navy words (owner, 24 Oct 2026: "din rat dui ta tei dekhen") */
:root[data-theme="dark"] .chips a.on, :root[data-theme="dark"] .chip.on { background: var(--brand) !important; border-color: var(--brand) !important; color: #10123d !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chips a.on, :root:not([data-theme="light"]) .chip.on { background: var(--brand) !important; border-color: var(--brand) !important; color: #10123d !important; } }
:root[data-theme="dark"] .seg a.on, :root[data-theme="dark"] .seg button.on { color: #10123d !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg a.on, :root:not([data-theme="light"]) .seg button.on { color: #10123d !important; } }
.com-groups { margin-bottom: .7rem; flex-wrap: nowrap; overflow-x: auto; }
.com-groups a { white-space: nowrap; }
/* the small search box in front of a long row of choices */
.bsearch { display: flex; align-items: center; gap: .45rem; max-width: 340px; margin: 0 0 .55rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.bsearch .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.bsearch input { border: 0; background: transparent; padding: .45rem 0; box-shadow: none; }
.bsearch input:focus { outline: none; box-shadow: none; }
.tiles > [hidden], .chips > [hidden], .hubtabs > [hidden] { display: none !important; }
.wl-body p { margin: .7rem 0; line-height: 1.75; }
.wl-blank { display: inline-block; min-width: 14em; border-bottom: 1px dotted #888; }
.wl-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.wl-signs > div { display: grid; gap: .2rem; } .wl-signs .sg-line { border-top: 1px solid #333; margin-bottom: .3rem; }
.pay-to .pay-lines { display: grid; gap: .35rem; font-weight: 600; font-family: var(--font-num), var(--font); margin: .3rem 0 .6rem; }
/* the logo: room inside its white box so the rounded corner never clips the letters (owner, 24 Oct 2026) */
.side .brand-logo { padding: 10px 12px; }
/* the logo exactly as on the website (owner, 28 Oct 2026: "web a jemon dewa temon e kore den"): a white tile that, when pointed at,
   lifts and turns a little with a soft shadow while a white-and-gold line of light passes through it; a slow gold shine now and then */
.logo-tile { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #fff; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.3), box-shadow .5s, filter .5s; }
.side .logo-tile { width: 100%; max-width: 168px; }
.side .logo-tile .brand-logo { width: 100%; border-radius: 0; }
.auth-tile { width: fit-content; margin: 0 auto 1.1rem; }
.auth-tile .auth-logo { margin: 0; }
.logo-tile::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(201, 168, 108, .45), transparent); transform: skewX(-18deg); }
@media (prefers-reduced-motion: no-preference) {
  .logo-tile::after { animation: tileShine 7s ease-in-out 1.2s infinite; }
  .brand:hover .logo-tile, .auth-tile:hover { transform: perspective(700px) rotateY(-12deg) rotateX(4deg) translateY(-3px) scale(1.05);
    box-shadow: 0 14px 26px -10px rgba(18, 21, 74, .45); filter: brightness(1.04); }
  .brand:hover .logo-tile::after, .auth-tile:hover::after { animation: tileSweep .9s ease-out; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .85), rgba(201, 168, 108, .5), transparent); }
}
@keyframes tileShine { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }
@keyframes tileSweep { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.calm .logo-tile, .calm .logo-tile::after { animation: none !important; transform: none !important; }
/* the older shine across the whole menu head (and its lift) left a band of colour on one side: off, the tile does it now */
.side .brand::after { display: none !important; }
.side .brand:hover .brand-logo { transform: none !important; }
/* the big menu and sign-in logo (owner, 28 Oct 2026: "kharap dekhay"): a narrow, faint line of light and a gentler turn, so the
   logo is never washed out; the website's small tile can keep the wide one */
.logo-tile::after { width: 14%; background: linear-gradient(100deg, transparent, rgba(201, 168, 108, .22), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .logo-tile, .auth-tile:hover { transform: perspective(900px) rotateY(-5deg) translateY(-3px) scale(1.03); box-shadow: 0 12px 24px -12px rgba(18, 21, 74, .4); filter: none; }
  .brand:hover .logo-tile::after, .auth-tile:hover::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), rgba(201, 168, 108, .22), transparent); }
}
/* room inside the sign-in tile too: the B of the logo sits at the image's very edge, and the tile's rounded corner cut it */
.auth-tile { padding: 8px 12px; }
.auth-tile .auth-logo { width: 190px; max-width: 62vw; }
/* under the pointer or a finger only the logo moves; the white tile behind it stays still (owner, 28 Oct 2026) */
.brand:hover .logo-tile, .auth-tile:hover { transform: none !important; box-shadow: none !important; }
.logo-tile img { transition: transform .5s cubic-bezier(.2, .9, .3, 1.3), filter .5s ease; }
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .logo-tile img, .auth-tile:hover img, .brand:active .logo-tile img, .auth-tile:active img {
    transform: perspective(900px) rotateY(-6deg) translateY(-3px) scale(1.04); filter: drop-shadow(0 8px 10px rgba(18, 21, 74, .28)); }
}
.calm .logo-tile img { transform: none !important; }
.auth-logo, .side .brand-logo, .auth-card img:first-child { animation-fill-mode: backwards !important; }   /* the rise-in lets go afterwards, so the hover can move the logo */
/* the optional boxes of a short form, folded under "More" */
.f-more { border: 1px dashed var(--line); border-radius: 10px; padding: .5rem .8rem; }
.f-more > summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.f-more[open] > summary { margin-bottom: .6rem; }

/* daily cash sheet: the office's paper 'দৈনিক হিসাব' drawn like the owner's form, one A4 landscape sheet */
.ds-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-sheet { background: #fff; color: #000; min-width: 860px; padding: 10px; border-radius: 6px; }
.ds { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: #000; background: #fff; }
.ds th, .ds td { border: 1px solid #555; padding: 3px 6px; height: 26px; vertical-align: middle; background: #fff; color: #000; overflow-wrap: anywhere; }
.ds th { font-weight: 400; text-align: center; text-transform: none; letter-spacing: 0; }
.ds td.c { text-align: center; } .ds td.r { text-align: right; } .ds td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ds th.ds-co { padding: 6px 0 4px; }
.ds .ds-name { font-size: 26px; font-weight: 700; display: inline-block; border-bottom: 1px dotted #555; line-height: 1.3; }
.ds .ds-addr { font-size: 14px; margin-top: 4px; }
.ds th.ds-day { padding: 0; }
.ds th.ds-day span { display: inline-block; padding: 3px 14px; border-left: 1px solid #555; min-width: 70px; }
.ds th.ds-day span:last-child { border-right: 1px solid #555; text-align: left; min-width: 160px; }
.ds th.ds-day span:first-child { margin-left: 12%; }
.ds tr.ds-foot td { height: 30px; }
.ds tbody tr:last-child td { border-bottom: 1px solid #555; }      /* the ruled form is closed at the foot (the general table style leaves the last line open) */
@media print {
  .ds-sheet { min-width: 0; padding: 0; border-radius: 0; }
  .ds-wrap { overflow: visible; }
  .ds { font-size: 10pt; }
  .ds th, .ds td { height: 5.6mm; padding: 0 1.5mm !important; border-color: #000; line-height: 1.25; font-size: 10pt; }
  .ds tr.ds-foot td { height: 7mm; }
  .ds th { background: #fff !important; font-size: 10pt; }
  .ds .ds-name { font-size: 18pt; } .ds .ds-addr { font-size: 10.5pt; }
}

/* printing (owner, 3 Nov 2026: "the whole software page prints" / "the paper does not come out at its size"):
   every paper prints on A4; floating buttons and app bars never print; a page that holds a paper (.print-paper) prints that paper alone */
@page { size: A4; margin: 12mm; }
@media print {
  #aiFab, .ai-fab, #tip, .side-scrim, .bottombar, .hubtabs, .demo-flag, .wm-right, .crumbs, #toast, .cb-list { display: none !important; }
  /* owner, 7 Nov 2026 (daily review PDF): the live banner and the assistant chip printed as grey boxes. Whatever floats on the screen
     (live / call / duty / punch / new-version bars, assistant chip and panel, to-top, Bangla key chip, palette, scan, ask) is added
     straight to <body>; only the app, an open dialog and the print area may print */
  body > :not(#app):not(#modal):not(#print-area) { display: none !important; }
  .chkbar, .comlivebar, .dutybar, #newver, .ai-panel, .totop, #pgbar, .bn-chip, .seal-press, .pd-panel, .s-float, .s-tabbar, .s-drawer, .s-scrim, .hatbar, .viewas-bar, .palette, .ask { display: none !important; }
  /* overflow-x: hidden on html/body (line 33) turns them into scroll boxes, and the browser then cut every long page at one sheet */
  html, body { background: #fff !important; overflow: visible !important; height: auto !important; min-height: 0 !important; }
  .shell, #app, .main, #content { overflow: visible !important; height: auto !important; min-height: 0 !important; }
  .main, #content { padding: 0 !important; margin: 0 !important; max-width: none !important; }      /* the phone-width rule (max-width: 920px) also matched A4 and added side and bottom space */
  body:has(#content :is(.print-paper, .receipt, .rp, .wr-paper)) #content > *:not(:is(.print-paper, .receipt, .rp, .wr-paper)):not(:has(:is(.print-paper, .receipt, .rp, .wr-paper))) { display: none !important; }
  #content button, #content .btn { display: none !important; }
  .tile, .card, .tiles, .grid2 > *, .kv { background: #fff !important; box-shadow: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  .tablewrap { overflow: visible !important; }
  table { width: 100% !important; max-width: 100%; }
  tr, img, .tile { break-inside: avoid; }      /* not .card: a card taller than a sheet was pushed whole to the next page */
  thead { display: table-header-group; }
  /* the page title prints as plain black text, once: when the page prints its own letterhead and title, the screen title stays off paper */
  .ph { background: none !important; color: #000 !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 3mm !important; }
  .ph h1 { color: #000 !important; font-size: 15pt; } .ph .sub, .ph .eyebrow { color: #333 !important; }
  body:has(#content .letterhead) #content > .ph { display: none !important; }
  th { position: static !important; background: #f2f2f2 !important; color: #000 !important; font-size: 8.5pt; padding: 1.4mm 1.8mm !important; }
  td { padding: 1.4mm 1.8mm !important; font-size: 9pt; color: #000; }
  td.print-nowrap { white-space: nowrap; }
}

/* seeing as someone else (viewas.js): a plain bar that cannot be missed */
.viewas-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0; padding: .55rem .8rem; border-radius: var(--radius);
  background: #fff4d6; color: #5a4300; border: 1px solid #e8c766; font-size: .9rem; }
.viewas-bar span { flex: 1; min-width: 200px; }
.viewas-bar .btn { background: #5a4300; color: #fff; border-color: #5a4300; }

/* a paper fills its A4 sheet edge to edge (owner, 3 Nov 2026): the page has no margin (app.js adds @page margin 0), the paper
   keeps a printer-safe inner margin, stretches to the foot of the sheet, and its signatures and foot sit at the bottom like a
   printed form. A paper longer than a sheet keeps the inner margin on every sheet (box-decoration-break). */
@media print {
  #content .receipt:not(.cert), #content .rp, #content .wr-paper { margin: 0 !important; max-width: none !important; width: auto !important; border: 0 !important;
    border-radius: 0 !important; min-height: 296.5mm; box-sizing: border-box; padding: 10mm 12mm 8mm !important; display: flex; flex-direction: column;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  #content .receipt:not(.cert) > :is(.dbv-sign, .r-sign) { margin-top: auto; }
  #content :is(.receipt:not(.cert), .rp) > .vqr-corner { top: 9mm; right: 12mm; }      /* the QR stays inside the paper's margin, never at the cut edge */
  #content .receipt.pad > .pad-space { flex: 1; min-height: 0 !important; }
  #content .receipt:not(.cert) > .lh-foot { margin-top: auto; }      /* a letter's office line and band sit at the foot of the sheet (ssd.pdf, 4 Nov 2026) */
  [data-placeholder]::before, [data-placeholder]:empty::before { content: none !important; display: none !important; }      /* "এখানে লিখুন…" is for the screen only */
  #content .rp > .rp-foot { margin-top: auto; }
  #content .receipt.cert { margin: 8mm !important; min-height: 280mm; box-sizing: border-box; display: flex; flex-direction: column; }      /* the framed certificate fills its sheet */
  #content .receipt.cert > .r-sign { margin-top: auto; }
}

/* the logo on every paper, larger and clearer than the drawing behind it (owner, 4 Nov 2026: "pottek ta tei logo mast thakbe") */
.receipt::after, .rp::after { content: ""; position: absolute; left: 50%; top: min(52%, 150mm);      /* a paper of several sheets: on the first */ width: 58%; height: min(46%, 130mm); transform: translate(-50%, -50%);
  background: url("/brand/logo.png") center / contain no-repeat; opacity: .1; z-index: -1; pointer-events: none; }

/* A paper is paper by night too (owner, 4 Nov 2026, kklk.pdf: "night mode a dewar por onek kagoj nosto hoye jay"): every paper keeps
   the day colours on screen and in print, whatever the app's mode; and the whole page turns to day while it prints (app.js). */
:is(.receipt, .rp, .wr-paper, .print-paper, .doc) { --paper: #ffffff; --panel: #ffffff; --panel-2: #fbfbfc; --ink: #111327; --ink-2: #23253f; --muted: #4c4e66; --faint: #767890; --line: #e2e4ec; --line-2: #eef0f6; --soft: #f4f5f8; --brand: #2e3192; --brand-2: #3b3fa8; --brand-ink: #ffffff; --brand-soft: #ecebf7; --brand-line: #cfcfeb; --gold: #2e3192; --accent: #2a8a3e; --navy: #10123d; --navy-2: #1d2060; --navy-ink: #f7f4ed; --ok: #157347; --ok-soft: #e3f4ea; --warn: #9a6200; --warn-soft: #ffffff; --bad: #b4332b; --bad-soft: #fbe6e3; --info: #2e3192; --info-soft: #ecebf7; --bar: #2e3192; --bar-2: #e5e3f3; --shadow: 0 1px 2px rgba(11, 13, 46, .04), 0 12px 32px -14px rgba(11, 13, 46, .16); --shadow-l: 0 30px 60px -24px rgba(11, 13, 46, .3); --c1: #1c3f99; --c2: #1f9d55; --c3: #d39b0a; --c4: #0f8b8d; --c5: #d64545; --c6: #7b4fc9; --c7: #3a86d1; --c8: #8a94a8; --c9: #e07b24; --c10: #9b1c1c; color-scheme: light; color: var(--ink); }
@media print { :root, :root[data-theme] { --paper: #ffffff !important; --panel: #ffffff !important; --panel-2: #fbfbfc !important; --ink: #111327 !important; --ink-2: #23253f !important; --muted: #4c4e66 !important; --faint: #767890 !important; --line: #e2e4ec !important; --line-2: #eef0f6 !important; --soft: #f4f5f8 !important; --brand: #2e3192 !important; --brand-2: #3b3fa8 !important; --brand-ink: #ffffff !important; --brand-soft: #ecebf7 !important; --brand-line: #cfcfeb !important; --gold: #2e3192 !important; --accent: #2a8a3e !important; --navy: #10123d !important; --navy-2: #1d2060 !important; --navy-ink: #f7f4ed !important; --ok: #157347 !important; --ok-soft: #e3f4ea !important; --warn: #9a6200 !important; --warn-soft: #ffffff !important; --bad: #b4332b !important; --bad-soft: #fbe6e3 !important; --info: #2e3192 !important; --info-soft: #ecebf7 !important; --bar: #2e3192 !important; --bar-2: #e5e3f3 !important; --shadow: 0 1px 2px rgba(11, 13, 46, .04), 0 12px 32px -14px rgba(11, 13, 46, .16) !important; --shadow-l: 0 30px 60px -24px rgba(11, 13, 46, .3) !important; --c1: #1c3f99 !important; --c2: #1f9d55 !important; --c3: #d39b0a !important; --c4: #0f8b8d !important; --c5: #d64545 !important; --c6: #7b4fc9 !important; --c7: #3a86d1 !important; --c8: #8a94a8 !important; --c9: #e07b24 !important; --c10: #9b1c1c !important; color-scheme: light; } html, body, .shell, .main, #content { background: #fff !important; color: var(--ink) !important; } }      /* printed in day colours whatever the mode */

/* ═════════ Premium finish (KB-119; owner, 6 Nov 2026: "puro software ta aro luxurious and premium koro ... Animation o thakbe") ═════════
   Screen only: papers and print are never touched. Depth with a soft top light on every surface, a gold hairline that draws in
   on hover, calmer table headers, rows that settle in one after another, buttons with weight, a quiet blur behind dialogs.
   All motion respects "less animation" and the device's reduced-motion setting (motion.js adds .motion only then). */
:root { --hl: rgba(255, 255, 255, .75); --lift: 0 1px 2px rgba(11, 13, 46, .05), 0 10px 28px -18px rgba(11, 13, 46, .22); --lift-h: 0 2px 4px rgba(11, 13, 46, .05), 0 22px 40px -22px rgba(28, 40, 120, .38); --ease-p: cubic-bezier(.2, .8, .2, 1); }
:root[data-theme="dark"] { --hl: rgba(255, 255, 255, .05); --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7); --lift-h: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 44px -22px rgba(0, 0, 0, .8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl: rgba(255, 255, 255, .05); --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7); --lift-h: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 44px -22px rgba(0, 0, 0, .8); } }
@media screen {
  #content .tile:not(.hero), #content .card:not(.receipt):not(.rp), #content .qa > a, #content .today, #content > .tablewrap, .modal-box {
    background-image: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: inset 0 1px 0 var(--hl), var(--lift); border-color: var(--line); }
  #content .tile:not(.hero) { background-image: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 15%, transparent)), linear-gradient(180deg, var(--panel), var(--panel-2));
    background-repeat: no-repeat; background-position: 1rem calc(100% - 1px), 0 0; background-size: 0 2px, 100% 100%; transition: background-size .45s var(--ease-p), transform .22s var(--ease-p), box-shadow .25s var(--ease-p), border-color .2s; }
  #content .tile.link:not(.hero):hover { background-size: calc(100% - 2rem) 2px, 100% 100%; }      /* a gold hairline draws in under the figure */
  #content .tile .v { font-weight: 700; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
  #content .tile .k { letter-spacing: .01em; }
  #content .tile.link:hover, #content .qa > a:hover { box-shadow: inset 0 1px 0 var(--hl), var(--lift-h); border-color: var(--brand-line); }
  #content .qa > a .ico, #content .qa > a svg { transition: transform .35s var(--ease-p); }
  #content .qa > a:hover .ico, #content .qa > a:hover svg { transform: translateY(-2px) scale(1.06); }
  #content > .ph:first-child { background-image: linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 42%), linear-gradient(180deg, transparent 70%, rgba(184, 149, 92, .10)); }
  /* lists (not the tables inside a paper) */
  :is(#content, .modal-box) .tablewrap:not(:is(.receipt, .rp, .wr-paper, .print-paper, .doc) .tablewrap) thead th { background: var(--soft); color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
  :is(#content, .modal-box) .tablewrap:not(:is(.receipt, .rp, .wr-paper, .print-paper, .doc) .tablewrap) tbody tr { transition: background-color .2s ease; }
  :is(#content, .modal-box) .tablewrap:not(:is(.receipt, .rp, .wr-paper, .print-paper, .doc) .tablewrap) tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
  :is(#content, .modal-box) .tablewrap td.num, :is(#content, .modal-box) .tablewrap td.m { font-variant-numeric: tabular-nums; }
  /* buttons with weight; the main one in the brand's own deep blue */
  .btn { transition: transform .15s var(--ease-p), box-shadow .25s var(--ease-p), background-color .2s, border-color .2s, filter .2s; }
  .btn:not(.primary):not(.danger):hover { border-color: var(--brand-line); background: var(--soft); }
  .btn.primary { background-image: linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
  .btn.primary:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 24px -12px color-mix(in srgb, var(--brand) 90%, transparent); }
  input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent), 0 1px 0 var(--gold); }
  .modal { backdrop-filter: blur(5px) saturate(1.1); -webkit-backdrop-filter: blur(5px) saturate(1.1); }
  .nav a { transition: background .2s, color .2s, transform .25s var(--ease-p); }
  .nav a:not(.active):hover { transform: translateX(3px); }
  ::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .motion #content > .tablewrap tbody tr { animation: rowIn .45s var(--ease-p) both; }
  .motion #content > .tablewrap tbody tr:nth-child(2) { animation-delay: .03s; } .motion #content > .tablewrap tbody tr:nth-child(3) { animation-delay: .06s; }
  .motion #content > .tablewrap tbody tr:nth-child(4) { animation-delay: .09s; } .motion #content > .tablewrap tbody tr:nth-child(5) { animation-delay: .12s; }
  .motion #content > .tablewrap tbody tr:nth-child(6) { animation-delay: .15s; } .motion #content > .tablewrap tbody tr:nth-child(7) { animation-delay: .18s; }
  .motion #content > .tablewrap tbody tr:nth-child(8) { animation-delay: .21s; } .motion #content > .tablewrap tbody tr:nth-child(n+9) { animation-delay: .24s; }
  @keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .motion .badge:not([hidden]), .motion [data-cnt]:not([hidden]) { animation: badgeIn .5s cubic-bezier(.2, .9, .3, 1.4) both; }
  @keyframes badgeIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
}
html.calm .motion #content > .tablewrap tbody tr { animation: none; }

/* ═════════ The money receipt drawn like a real receipt (KB-121; owner, 7 Nov 2026: "amader money receipt ta atar moto kora jay ki na?
   akhon jeta ase ata money receipt mone hoy na ... backgrounde ja ja ase oi gulo sem e thakbe") ═════════
   After the realtor receipt he showed: the logo and the company in the brand navy with its address, phone and email; a thin rule
   with a gold start; whom it came from at the left and a big MONEY RECEIPT with number and date at the right; the lines under a
   solid navy bar with thin rules; the total at the right; how it was paid at the bottom left; signatures at the right; a quiet
   rule ornament at the foot. The drawing, big faint logo, QR, PROVISIONAL / DUPLICATE, seal and top band are the .receipt ones. */
.receipt.mr { display: flex; flex-direction: column; padding: 2.1rem 2.3rem 1.5rem; }
.receipt.mr .mr-top { display: flex; align-items: center; gap: .95rem; padding-right: 86px; min-height: 72px; }
.receipt.mr .mr-top img { height: 66px; width: auto; flex: none; background: none; padding: 0; }
.receipt.mr .mr-co { display: grid; gap: .08rem; min-width: 0; }
.receipt.mr .mr-bn { color: #2e3192; font-size: 1.45rem; line-height: 1.2; font-weight: 700; }
.receipt.mr .mr-en { color: #2e3192; font-size: 1rem; line-height: 1.25; font-weight: 700; letter-spacing: .02em; opacity: .88; }
.receipt.mr .mr-contact { display: flex; flex-wrap: wrap; gap: 0 .45rem; margin-top: .15rem; color: #2e3192; font-size: .78rem; line-height: 1.45; }
.receipt.mr .mr-contact i { font-style: normal; color: #2a8a3e; }
.receipt.mr .mr-rule { position: relative; height: 0; border-top: 1px solid rgba(46, 49, 146, .55); margin: 1rem 0 1.25rem; }
.receipt.mr .mr-rule::before { content: ""; position: absolute; left: 0; top: -2px; width: 72px; height: 3px; background: #2a8a3e; }
.receipt.mr .mr-k { color: #4a5470; font-size: .86rem; font-weight: 600; white-space: nowrap; }
/* owner, 12 Nov 2026: each label beside its value on one line, a dotted line under it, as on a printed money receipt */
.receipt.mr .mr-ln { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: baseline; padding: .32rem 0; border-bottom: 1px dotted #9aa1bd; }
.receipt.mr .mr-v { color: #10123d; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.receipt.mr .mr-v .mr-alt { display: block; color: #5d6882; font-size: .78rem; font-weight: 400; }
.receipt.mr .mr-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: start; }
.receipt.mr .mr-to { display: grid; gap: 0; color: #3b4660; font-size: .9rem; line-height: 1.45; align-self: end; }
.receipt.mr .mr-to .mr-name { color: #10123d; font-size: 1.08rem; font-weight: 700; }
.receipt.mr .mr-ttl { text-align: right; }
.receipt.mr .mr-h { margin: -.2rem 0 .5rem; color: #2e3192; font-size: 2.35rem; line-height: 1.05; font-weight: 800; }
html[lang="en"] .receipt.mr .mr-h { letter-spacing: .06em; }
.receipt.mr .mr-no { display: grid; grid-template-columns: auto auto; justify-content: end; gap: .12rem .75rem; margin: 0; font-size: .86rem; }
.receipt.mr .mr-no dt { color: #66708a; }
.receipt.mr .mr-no dd { margin: 0; color: #10123d; font-weight: 600; font-variant-numeric: tabular-nums; }
.receipt.mr .mr-proj { display: flex; flex-wrap: wrap; gap: .3rem 2.2rem; margin: 1.15rem 0 0; font-size: .86rem; }
.receipt.mr .mr-proj > div { display: flex; gap: .55rem; }
.receipt.mr .mr-proj dt { color: #66708a; }
.receipt.mr .mr-proj dd { margin: 0; color: #10123d; font-weight: 600; }
.receipt.mr .mr-items { width: 100%; border-collapse: collapse; margin: .8rem 0 0; font-size: .92rem; }
.receipt.mr .mr-items thead tr { background: #2e3192; }      /* the bar on the row too: no hairline seams between cells in a PDF */
.receipt.mr .mr-items thead th { background: #2e3192; color: #fff; font-weight: 600; text-align: left; padding: .55rem .8rem; border: 0; letter-spacing: .01em; }
.receipt.mr .mr-items td { padding: .62rem .8rem; border: 0; border-bottom: 1px solid #d9dcef; color: #131a2b; background: transparent; }
.receipt.mr .mr-items .num { text-align: right; white-space: nowrap; width: 30%; font-variant-numeric: tabular-nums; }
.receipt.mr .mr-items .mr-sl { width: 3.4rem; text-align: center; color: #66708a; }
.receipt.mr .mr-items thead .mr-sl { color: #fff; }
.receipt.mr .mr-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: 1.8rem; margin-top: 1rem; align-items: start; }
.receipt.mr .mr-words b { color: #10123d; font-size: .95rem; line-height: 1.45; }
.receipt.mr .mr-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem .8rem; border-top: 2px solid #2e3192; border-bottom: 2px solid #2e3192; }
.receipt.mr .mr-total span { color: #10123d; font-weight: 700; }
.receipt.mr .mr-total b { color: #2e3192; font: 800 1.45rem var(--font-num); white-space: nowrap; }
.receipt.mr .mr-acct { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .22rem .8rem; margin: .6rem 0 0; padding: 0 .8rem; color: #3b4660; font-size: .84rem; }
.receipt.mr .mr-acct dd { margin: 0; text-align: right; color: #10123d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt.mr .mr-acct dd:last-child { font-weight: 700; }
.receipt.mr > :is(.dbv-sign, .r-sign) { margin-top: 1.8rem; }
.receipt.mr .r-sign.sg-row { justify-content: flex-end !important; gap: .9rem 2.2rem; }
.receipt.mr .mr-orn { display: flex; align-items: center; gap: .7rem; width: 60%; margin: 1.3rem auto 0; }
.receipt.mr .mr-orn::before, .receipt.mr .mr-orn::after { content: ""; flex: 1; border-top: 1px solid rgba(46, 49, 146, .5); }
.receipt.mr .mr-orn i { width: 7px; height: 7px; background: #2a8a3e; transform: rotate(45deg); flex: none; }
.receipt.mr .r-foot { margin-top: .6rem; border-top: 0; padding-top: 0; }
@media (max-width: 640px) {
  .receipt.mr { padding: 1.7rem 1.1rem 1.2rem; }
  .receipt.mr .mr-top { padding-right: 60px; } .receipt.mr .mr-top img { height: 50px; } .receipt.mr .mr-bn { font-size: 1.15rem; }
  .receipt.mr .mr-mid, .receipt.mr .mr-sum { grid-template-columns: 1fr; gap: 1rem; }
  .receipt.mr .mr-ttl { text-align: left; order: -1; } .receipt.mr .mr-no { justify-content: start; } .receipt.mr .mr-h { font-size: 1.8rem; }
  .receipt.mr .r-sign.sg-row { justify-content: center !important; }
}
@media print {
  .receipt.mr .mr-top { padding-right: 21mm; }
  .receipt.mr .mr-items thead tr { background: #2e3192 !important; }
  .receipt.mr .mr-items thead th { background: #2e3192 !important; color: #fff !important; font-size: 9.5pt; padding: 2mm 3mm !important; border: 0 !important; }
  .receipt.mr .mr-items td { font-size: 10pt; padding: 2.2mm 3mm !important; border: 0 !important; border-bottom: 1px solid #d9dcef !important; }
  .receipt.mr .mr-items, .receipt.mr .mr-total, .receipt.mr .mr-rule::before, .receipt.mr .mr-orn i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* a paper printed to be signed by hand (owner, 12 Nov 2026): the hand line at the left, the accounts at the right */
.receipt.hand .sg-row { justify-content: space-between !important; }
.receipt .sg-hand .sg-img { min-height: 64px; }
.sigcopies a { font-weight: 600; }
.receipt.mr.hand .r-sign.sg-row { justify-content: space-between !important; }

/* ═══ colour by meaning, not gold everywhere (owner, 12 Nov 2026: "egulo dekha jacche gold collar e shob gulo ... jokhon jetar shathe
   jeta jay shetai hobe pottek ta jaga tei"). The work chips each wear their own colour; a plain note is the brand navy, a warning
   orange, a problem red, all fine and the training banner teal. ═══ */
:root .today-i[style*="--k"], :root:not([data-theme="dark"]) .today-i[style*="--k"], :root[data-theme="light"] .today-i[style*="--k"] {
  color: var(--k) !important; border-left: 3px solid var(--k) !important; background: color-mix(in srgb, var(--k) 6%, var(--panel)) !important; }
.today-i[style*="--k"] .n { background: var(--k) !important; color: #fff !important; }
:root[data-theme="dark"] .today-i[style*="--k"] { color: color-mix(in srgb, var(--k) 45%, #ffffff) !important; background: color-mix(in srgb, var(--k) 18%, var(--panel)) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .today-i[style*="--k"] { color: color-mix(in srgb, var(--k) 45%, #ffffff) !important; background: color-mix(in srgb, var(--k) 18%, var(--panel)) !important; } }
:root:not([data-theme="dark"]) .note, :root[data-theme="light"] .note { border-left-color: #2e3192 !important; }
:root:not([data-theme="dark"]) .note.warn, :root[data-theme="light"] .note.warn { border-left-color: #d97706 !important; }
:root:not([data-theme="dark"]) .note.bad, :root[data-theme="light"] .note.bad { border-left-color: #b4332b !important; }
:root:not([data-theme="dark"]) .note.ok, :root[data-theme="light"] .note.ok { border-left-color: #157347 !important; }
:root:not([data-theme="dark"]) .demo-flag, :root[data-theme="light"] .demo-flag { border-left-color: #0f766e !important; color: #0f5f59 !important; }
.ph .eyebrow, .brief .eyebrow { color: var(--brand); }
.brief { border-left-color: var(--brand) !important; }
.lock { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }

/* a letter on the pad, several sheets long (owner, 12 Nov 2026, aminul onghirkar nama.pdf): see brandPapers() in papers.js */
.lh-pt, .lh-pt > tbody, .lh-pt > tbody > tr, .lh-pt > tbody > tr > td { display: block; width: auto; border: 0; padding: 0; margin: 0; background: none; }
.lh-pt > thead, .lh-pt > tfoot, .lh-bg { display: none; }
@media print {
  #content .receipt.lh-paged { display: block !important; min-height: 0 !important; padding: 0 12mm !important; background-image: none !important; }
  #content .receipt.lh-paged > .lh-bg { display: block; position: fixed; inset: 0; z-index: -2; background-repeat: repeat, no-repeat; background-size: auto, cover; background-position: 0 0, center;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='60'%3E%3Ctext x='0' y='20' font-family='Arial' font-size='9' fill='%231a3f94' fill-opacity='.032' transform='rotate(-12 90 30)'%3EBEPARY HOLDINGS ORIGINAL BHL%3C/text%3E%3Ctext x='40' y='52' font-family='Arial' font-size='9' fill='%231a3f94' fill-opacity='.032' transform='rotate(-12 90 30)'%3EBHL VERIFIED PAPER%3C/text%3E%3C/svg%3E"), var(--paper-art); }
  #content .receipt.lh-paged.pad > .lh-bg { background-image: none; }
  #content .receipt.lh-paged::after { position: fixed; top: 50%; }
  #content .receipt.lh-paged > .lh-top { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 36px; }
  #content .receipt.lh-paged > .lh-foot { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 !important; padding: 0; }
  #content .receipt.lh-paged > .lh-foot > span { padding: 0 12mm 1.5mm !important; }
  #content .receipt.lh-paged > .vqr-corner { position: fixed; top: 12mm; right: 12mm; }
  #content .receipt.lh-paged > .wm { position: fixed; }
  #content .receipt.lh-paged > .lh-pt { display: table !important; width: 100% !important; border-collapse: collapse; }
  #content .receipt.lh-paged > .lh-pt > thead { display: table-header-group !important; }
  #content .receipt.lh-paged > .lh-pt > tfoot { display: table-footer-group !important; }
  #content .receipt.lh-paged > .lh-pt > tbody { display: table-row-group !important; }
  #content .receipt.lh-paged > .lh-pt > * > tr { display: table-row !important; break-inside: auto !important; }
  #content .receipt.lh-paged > .lh-pt > * > tr > td { display: table-cell !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: inherit; color: inherit; }
  .lh-sp-top { height: 40mm; } .lh-sp-bot { height: 21mm; }
  #content .receipt.lh-paged .lh-cell > :first-child { margin-top: -25mm !important; }      /* the first sheet: the head starts just under the band, beside the QR */
}

/* KB-132: one place for every cost ("কী খরচ?") and the salary entry table */
.costpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .55rem; margin-top: .6rem; }
.costpick .cp { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.costpick .cp:hover, .costpick .cp:focus-visible { border-color: var(--brand-line); background: var(--brand-soft); }
.costpick .cp b { font-weight: 600; } .costpick .cp span { font-size: .82rem; color: var(--muted); }
.sl-tab td { vertical-align: top; } .sl-tab .sl-pay { width: 7.5rem; text-align: right; }
.sl-tab select, .sl-tab .sl-why { display: block; width: 100%; min-width: 11rem; margin-bottom: .25rem; } .sl-tab [hidden] { display: none !important; }
@media (max-width: 640px) { .costpick { grid-template-columns: 1fr 1fr; } .sl-tab .sl-pay { width: 6rem; } }
/* a pad letter in print (owner, 12 Nov 2026, "সম্ভাব্য মুনাফা গ্রহণ ও সমন্বয়পত্র"): the signature went alone to a second sheet;
   tighter paragraphs on paper, and the signature never parted from the writing above it */
@media print {
  #content .wr-paper .wr-body p { margin: 0 0 2.4mm; }
  #content .wr-paper .ltr-sign { break-inside: avoid; break-before: avoid; margin-top: 4mm; }
}
/* a pad's band, QR and office foot are fixed to each printed sheet; the screen's entry motion left an (identity) transform on
   #content and the paper, which ties fixed things to that box instead of the sheet: the foot then sat above the sheet's bottom
   with white under it (12 Nov 2026). No transform or animation on paper. */
@media print {
  #content, #content .receipt, #content .wr-paper, #content .rp { transform: none !important; animation: none !important; transition: none !important; }
}
/* a pad being written (the editor's own page) printed its office foot and band 24 mm above the sheet's bottom with white under
   them (12 Nov 2026); on paper only the paper itself is shown on the writer's page, nothing else from #content */
@media print { body:has(#content .wr-paper) #content > :not(.wr-paper) { display: none !important; } }