:root {
  --navy: #0f2a4a; --ink: #1d2733; --muted: #66727f; --line: #e3e8ee; --bg: #f4f6f9; --card: #fff;
  --green: #137a45; --red: #c0352b; --amber: #b7791f; --blue: #1f5fa8;
  --r: 12px; font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", "Noto Sans Telugu", "Noto Sans", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
main { max-width: 1680px; margin: 0 auto; padding: 22px 26px 40px; }
h1 { font-size: 1.25rem; margin: 6px 0 12px; } h2 { font-size: 1rem; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.tab { white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 14px; cursor: pointer; font: inherit; }
.tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.card.link { cursor: pointer; } .card.link:hover { border-color: var(--blue); }
.big { font-size: 1.45rem; font-weight: 700; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); font-size: .92rem; }
.row:first-of-type { border-top: 0; } .row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); font-size: .85rem; } .red { color: var(--red); } .green { color: var(--green); } .amber { color: var(--amber); }
.sync { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; padding: 4px 10px; border-radius: 999px; background: #e8f5ee; color: var(--green); }
.sync.old { background: #fdecea; color: var(--red); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 8px; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; font-size: .7rem; color: var(--muted); }
.bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--blue); min-height: 2px; }
.bar i.p { background: #9fb9d9; }
.legend { display: flex; gap: 12px; font-size: .78rem; color: var(--muted); margin-top: 6px; }
.legend b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0 12px; }
.tools label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: 3px; }
input, select, button.btn { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
button.btn { cursor: pointer; } button.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #f0f3f7; font-weight: 600; font-size: .82rem; color: var(--muted); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.clk { cursor: pointer; } tr.clk:hover td { background: #f7faff; }
.login { max-width: 360px; margin: 50px auto; } .login input { width: 100%; margin: 6px 0 12px; font-size: 1.1rem; }
.login .pin { letter-spacing: 8px; text-align: center; }
.err { color: var(--red); min-height: 1.2em; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.details { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; font-size: .9rem; }
.details div span { display: block; color: var(--muted); font-size: .78rem; }

/* ---- ledger statement styles (same numbers, only the look changes) ---- */
.sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; overflow-x: auto; }
.sheet .head { margin-bottom: 10px; } .sheet .head .co { font-weight: 700; font-size: 1.05rem; }
.logo { display: block; max-height: 64px; max-width: 200px; object-fit: contain; }
.logo.mono { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; letter-spacing: 1px;
  color: #fff; background: linear-gradient(135deg, var(--navy), #2563eb); }
.tally .t-head { position: relative; } .tally .t-mark { position: absolute; left: 0; top: 0; } .tally .t-mark .logo { max-height: 56px; max-width: 150px; }

/* the four professional styles share one layout: letterhead band, party + summary, table, footer */
.pro { padding: 0; overflow: hidden; color: #1f2937; font-variant-numeric: tabular-nums; }
.pro .lh { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.pro .lh-co { flex: 1; } .pro .lh-co .co { font-weight: 800; font-size: 1.2rem; } .pro .lh-co .doc { font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: .8; }
.pro .lh-per { text-align: right; font-size: .85rem; } .pro .lh-per span { opacity: .7; font-size: .75rem; }
.pro .party { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding: 14px 20px; }
.pro .p-l { font-size: .85rem; line-height: 1.45; } .pro .p-l b { display: block; font-size: 1rem; } .pro .lbl { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; }
.pro .kpis { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 8px; align-self: flex-start; }
.pro .kpi { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; text-align: right; background: #fff; color: #111827; box-shadow: none; min-height: 0; }
.pro .kpi span { display: block; font-size: .7rem; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; } .pro .kpi b { font-size: .95rem; white-space: nowrap; color: #111827; }
.pro table { width: calc(100% - 40px); margin: 4px 20px 0; border-collapse: collapse; }
.pro th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; padding: 8px; } .pro th.n { text-align: right; }
.pro td { padding: 7px 8px; border-bottom: 1px solid #eef0f3; vertical-align: top; font-size: .88rem; }
.pro td.c-part b { font-weight: 600; } .pro .narr { font-size: .78rem; color: #6b7280; font-style: italic; margin-top: 2px; }
.pro td.c-date { white-space: nowrap; } .pro td.c-no { white-space: nowrap; }
.pro tr.sum td { font-weight: 700; background: #f9fafb; } .pro tr.sum.close td { border-top: 2px solid #111827; border-bottom: 3px double #111827; }
.pro .foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px; font-size: .72rem; color: #6b7280; }

/* 1. Modern: navy letterhead band, blue table head, soft stripes */
.st-modern .lh { background: linear-gradient(120deg, #0f2a4a, #1d4ed8); color: #fff; }
.st-modern .lh .logo:not(.mono) { background: #fff; padding: 6px 8px; border-radius: 10px; }
.st-modern .lh .logo.mono { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); }
.st-modern .kpi.close { background: #eff6ff; border-color: #bfdbfe; } .st-modern .kpi.close b { color: #1d4ed8; }
.st-modern th { background: #0f2a4a; color: #fff; } .st-modern th:first-child { border-radius: 8px 0 0 8px; } .st-modern th:last-child { border-radius: 0 8px 8px 0; }
.st-modern tbody tr:nth-child(even):not(.sum) td { background: #f8fafc; }
/* 2. Bank statement: like a bank's e-statement - green band, balance column stands out */
.st-bank .lh { border-bottom: 4px solid #0f766e; }
.st-bank .lh-co .co { color: #0f766e; }
.st-bank .party { background: #f0fdfa; border-bottom: 1px solid #ccfbf1; }
.st-bank .kpi { background: #fff; } .st-bank .kpi.close { border-color: #0f766e; } .st-bank .kpi.close b { color: #0f766e; }
.st-bank th { background: #ccfbf1; color: #134e4a; }
.st-bank td.bal { font-weight: 700; color: #0f766e; background: #f0fdfa; }
/* 3. Compact: one line per voucher, more rows on a page */
.st-compact .lh { padding: 10px 16px; border-bottom: 2px solid #111827; } .st-compact .lh .logo { max-height: 40px; } .st-compact .lh .logo.mono { width: 40px; height: 40px; font-size: .95rem; }
.st-compact .lh-co .co { font-size: 1rem; } .st-compact .party { padding: 8px 16px; } .st-compact .kpi { padding: 4px 8px; }
.st-compact table { width: calc(100% - 32px); margin: 0 16px; } .st-compact td, .st-compact th { padding: 3px 6px; font-size: .78rem; }
.st-compact .narr { display: none; } .st-compact th { border-bottom: 1px solid #111827; }
/* 4. Letterhead: formal letter - centred logo and name, gold rule, signature line */
.st-letterhead .lh { flex-direction: column; text-align: center; gap: 6px; padding-top: 22px; border-bottom: 3px double #92400e; margin: 0 20px; padding-left: 0; padding-right: 0; }
.st-letterhead .lh .logo { max-height: 72px; } .st-letterhead .lh .logo.mono { background: linear-gradient(135deg, #78350f, #b45309); }
.st-letterhead .lh-co .co { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; color: #111827; } .st-letterhead .lh-co .doc { color: #92400e; }
.st-letterhead .lh-per { text-align: center; }
.st-letterhead th { border-top: 1px solid #111827; border-bottom: 1px solid #111827; color: #111827; }
.st-letterhead .kpi { border-color: #fde68a; background: #fffbeb; }
.st-letterhead .foot { padding-top: 40px; } .st-letterhead .sign { border-top: 1px solid #111827; padding-top: 4px; min-width: 180px; text-align: center; color: #111827; }

/* 5. Classic account book: cream paper, maroon serif, ruled like a bound ledger */
.st-classic { background: #fdf8ec; font-family: Georgia, "Times New Roman", serif; }
.st-classic .lh { border-bottom: 3px double #7f1d1d; margin: 0 20px; padding-left: 0; padding-right: 0; }
.st-classic .lh .logo.mono { background: linear-gradient(135deg, #7f1d1d, #b91c1c); }
.st-classic .lh-co .co { color: #7f1d1d; font-size: 1.4rem; } .st-classic .lh-co .doc { color: #92400e; }
.st-classic .kpi { background: #fffdf6; border-color: #e7d9b8; } .st-classic .kpi.close { border-color: #7f1d1d; } .st-classic .kpi.close b { color: #7f1d1d; }
.st-classic th { background: #f5ecd7; color: #7f1d1d; border-top: 2px solid #7f1d1d; border-bottom: 1px solid #7f1d1d; }
.st-classic td { border-bottom: 1px solid #e7d9b8; background: transparent; }
.st-classic td:nth-child(5), .st-classic td:nth-child(6), .st-classic td:nth-child(7) { border-left: 1px solid #f0c9c9; }
.st-classic tr.sum td { background: #f5ecd7; }
.st-classic .sign { border-top-color: #7f1d1d; color: #7f1d1d; }
/* 6. Elegant: black band with gold, quiet table */
.st-elegant .lh { background: #111827; color: #fff; }
.st-elegant .lh .logo:not(.mono) { background: #fff; padding: 6px 8px; border-radius: 10px; }
.st-elegant .lh .logo.mono { background: transparent; border: 1.5px solid #facc15; color: #facc15; }
.st-elegant .lh-co .doc { color: #facc15; opacity: 1; }
.st-elegant .kpi.close { border-color: #a16207; background: #fefce8; } .st-elegant .kpi.close b { color: #a16207; }
.st-elegant th { background: #111827; color: #facc15; }
.st-elegant tr.sum.close td { border-top-color: #a16207; border-bottom-color: #a16207; }

@media (max-width: 640px) {
  .pro .lh { flex-wrap: wrap; } .pro .kpis { grid-template-columns: repeat(2, 1fr); width: 100%; }
}
@media print { .pro { border: 0; } .pro, .pro .lh, .pro .party, .st-bank td.bal, .pro th, .pro tr.sum td, .pro .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

@media print {
  .top, .tools, .tabs, .noprint { display: none !important; }
  body, main { background: #fff; padding: 0; max-width: none; }
  .sheet { border: 0; padding: 0; }
  @page { size: A4; margin: 12mm; }
}
@media (max-width: 600px) {
  :root { font-size: 14px; } main { padding: 10px; } .hide-sm { display: none; }
}
.sheet td:first-child, .sheet td:nth-child(4) { white-space: nowrap; }
/* phone: each entry becomes a small card - date / vch no, particulars, amount / balance (print keeps the table) */
@media screen and (max-width: 600px) {
  .sheet { padding: 10px; }
  .sheet thead { display: none; }
  .sheet table, .sheet tbody, .sheet tr, .sheet td { display: block; border: 0 !important; }
  .sheet tr.sum { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line) !important; }
  .sheet tr.sum td:empty { display: none; }
  .pro tbody tr:not(.sum) { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 0; border-bottom: 1px solid var(--line) !important; }
  .sheet td { padding: 0 !important; background: none !important; }
  .sheet .c-date { grid-row: 1; grid-column: 1; color: var(--muted); font-size: .82rem; }
  .sheet .c-no { grid-row: 1; grid-column: 2; text-align: right; color: var(--muted); font-size: .82rem; }
  .sheet .c-type { display: none; }
  .sheet .c-part { grid-row: 2; grid-column: 1 / 3; font-weight: 600; }
  .sheet .c-dr:empty, .sheet .c-cr:empty { display: none; }
  .sheet .c-dr, .sheet .c-cr { grid-row: 3; grid-column: 1; text-align: left !important; }
  .sheet .c-dr::before { content: "Dr "; color: var(--muted); font-weight: 400; }
  .sheet .c-cr::before { content: "Cr "; color: var(--muted); font-weight: 400; }
  .sheet .c-bal { grid-row: 3; grid-column: 2; text-align: right; }
  .sheet .c-bal::before { content: none; }
  .sheet tr.sum td { font-weight: 700; }
  .sheet tr.sum td.c-dr::before { content: "Dr "; color: var(--muted); font-weight: 400; }
  .sheet tr.sum td.c-cr::before { content: "Cr "; color: var(--muted); font-weight: 400; }
  .sheet .narr { overflow-wrap: anywhere; }
  .pro table { width: 100%; margin: 4px 0 0; }
  .pro .lh, .pro .party { padding-left: 12px; padding-right: 12px; }
}

/* ---- dashboard v2 ---- */
.headline { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi { border-radius: 14px; padding: 14px 16px; background: #fff; color: var(--ink); display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05); border-left: 4px solid var(--line); }
.kpi span { font-size: .8rem; color: #475569; font-weight: 600; } .kpi b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kpi.k1 { border-left-color: #15803d; } .kpi.k2 { border-left-color: #2a78d6; } .kpi.k3 { border-left-color: #eb6834; } .kpi.k4 { border-left-color: #0f1f3a; }
.card { border-top: 3px solid var(--line); box-shadow: 0 1px 3px rgba(15,42,74,.05); }
.c-green { border-top-color: var(--green); } .c-blue { border-top-color: var(--blue); } .c-amber { border-top-color: var(--amber); } .c-navy { border-top-color: var(--navy); }
.attention { border-top-color: var(--red); margin-bottom: 12px; }
.attention .count { background: var(--red); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .78rem; margin-left: 4px; }
.att { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; margin: 6px 0; border-radius: 8px; border-left: 4px solid; font-size: .9rem; }
.att.red { border-color: var(--red); background: #fdf3f2; } .att.amber { border-color: var(--amber); background: #fdf8ef; } .att.info { border-color: var(--blue); background: #f2f6fc; }
.att.ok { opacity: .7; border-color: var(--green); background: #f3faf6; }
.att-r { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; display: flex; gap: 8px; align-items: center; }
.btn.sm { padding: 3px 10px; font-size: .8rem; }
.tag { font-style: normal; font-size: .72rem; background: #eef2f7; color: var(--muted); border-radius: 4px; padding: 1px 5px; }
.more { margin-top: 8px; color: var(--blue); font-size: .88rem; }
.mt { padding: 6px 0; border-top: 1px dashed var(--line); } .mt:first-of-type { border-top: 0; }
.agerow { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; align-items: center; font-size: .88rem; padding: 4px 0; }
.agebar { height: 10px; background: #eef2f7; border-radius: 5px; overflow: hidden; } .agebar i { display: block; height: 100%; }
.agebar .a0 { background: #3aa76d; } .agebar .a1 { background: #e0b03a; } .agebar .a2 { background: #e07b3a; } .agebar .a3 { background: var(--red); }
.skel { min-height: 140px; background: linear-gradient(90deg, #fff 0%, #eef2f7 50%, #fff 100%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.trades { display: grid; gap: 10px; }
.trade { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 12px; align-items: start; border-top-color: var(--green); }
.trade.unsold { border-top-color: var(--amber); } .trade.loss { border-top-color: var(--red); }
.tr-sale { padding: 4px 0 4px 10px; border-left: 2px solid var(--line); margin-bottom: 4px; }
.tr-m { text-align: right; display: flex; flex-direction: column; } .tr-m b { font-size: 1.1rem; }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } .trade { grid-template-columns: 1fr; } .tr-m { text-align: left; } }

.row.clk, .att.clk { cursor: pointer; } .row.clk:hover span:first-child { color: var(--blue); text-decoration: underline; } .att.clk:hover { filter: brightness(.97); }


/* ---- Tally's own "Ledger Account" print (owner, 2-Nov-2026) ---- */
.tally { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; padding: 18px 22px; }
.tally .t-head { text-align: center; line-height: 1.35; margin-bottom: 14px; }
.tally .t-co { font-weight: 700; font-size: 16px; }
.tally .t-led { font-weight: 700; font-size: 16px; margin-top: 10px; }
.tally .t-period { margin-top: 10px; font-size: 12px; }
.tally table { width: 100%; border-collapse: collapse; border: 0; }
.tally th, .tally td { border: 0; background: #fff; color: #000; padding: 3px 6px; vertical-align: top; }
.tally thead th { border-top: 1px solid #000; border-bottom: 1px solid #000; font-weight: 400; text-align: left; }
.tally thead th.t-part { font-weight: 700; } .tally thead th.n { font-weight: 700; text-align: right; }
.tally .t-date { white-space: nowrap; width: 72px; text-align: right; }
.tally .t-side { width: 22px; padding-right: 0; }
.tally .t-part b { display: block; font-weight: 700; }
.tally .t-part i { display: block; font-size: 12px; white-space: pre-line; }
.tally .t-type { width: 110px; } .tally .t-no { width: 110px; text-align: right; }
.tally td.n { width: 120px; text-align: right; white-space: nowrap; }
.tally tbody tr td { padding-top: 6px; }
.tally .t-tot td.n { border-top: 1px solid #000; }
.tally .t-close td { padding-top: 2px; }
.tally .t-grand td.n { border-top: 1px solid #000; border-bottom: 3px double #000; font-weight: 700; }
/* phone: each Tally entry becomes a small card - date / vch type + no, By/To particulars + narration, amount
   (print and wide screens keep Tally's own table) */
@media screen and (max-width: 600px) {
  .tally { padding: 10px; font-size: 13px; }
  .tally .t-mark { position: static; display: flex; justify-content: center; margin-bottom: 6px; }
  .tally tbody tr { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 6px; padding: 9px 0; border-bottom: 1px solid var(--line) !important; }
  .tally td { width: auto !important; }
  .tally td.t-date { grid-row: 1; grid-column: 1 / 3; text-align: left; color: var(--muted); font-size: .82rem; }
  .tally td.t-type { grid-row: 1; grid-column: 2; text-align: right; color: var(--muted); font-size: .82rem; }
  .tally td.t-type b { font-weight: 400; }
  .tally td.t-no { grid-row: 1; grid-column: 3; color: var(--muted); font-size: .82rem; }
  .tally td.t-side { grid-row: 2; grid-column: 1; color: var(--muted); }
  .tally td.t-part { grid-row: 2; grid-column: 2 / 4; }
  .tally td.t-part i { color: #555; overflow-wrap: anywhere; }
  .tally td.n:empty { display: none; }
  .tally td.n { grid-row: 3; grid-column: 1 / 4; text-align: right; font-weight: 700; font-size: .95rem; }
  .tally td.n:nth-last-child(2)::before { content: "Dr "; color: var(--muted); font-weight: 400; }
  .tally td.n:last-child::before { content: "Cr "; color: var(--muted); font-weight: 400; }
  .tally tr.t-tot, .tally tr.t-grand { display: flex; justify-content: flex-end; gap: 14px; }
  .tally tr.t-tot td:first-child, .tally tr.t-grand td:first-child { display: none; }
  .tally tr.t-tot td.n, .tally tr.t-grand td.n { border-top: 0; }
  .tally tr.t-grand { border-bottom: 3px double #000 !important; }
}
@media print { .tally { padding: 0; } }

/* ---- login (owner, 2-Nov-2026: modern and professional, with the TRUKVIA logo) ---- */
.auth { display: grid; grid-template-columns: 1.1fr 1fr; max-width: 980px; margin: 28px auto; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 42, 74, .22); background: #fff; min-height: 520px; }
.auth-hero { position: relative; padding: 40px 36px; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 85% 18%, rgba(255, 153, 51, .55), transparent 38%),
              radial-gradient(circle at 10% 95%, rgba(59, 130, 246, .45), transparent 45%),
              linear-gradient(140deg, #0b1f3a 0%, #123b7a 60%, #1d4ed8 100%); }
.auth-hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 38px; height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 36px, transparent 36px 64px); transform: rotate(-4deg); }
.hero-mark { display: inline-flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 12px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hero-mark img { height: 64px; display: block; }
.hero-mark span { font-size: 2rem; font-weight: 800; color: #f97316; letter-spacing: .5px; border-left: 2px solid #e5e7eb; padding-left: 14px; }
.auth-hero h2 { color: #fff; font-size: 1.55rem; line-height: 1.3; margin: 34px 0 18px; font-weight: 700; }
.hero-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hero-points li { padding-left: 34px; position: relative; font-size: 1rem; opacity: .95; }
.hero-points li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 181, 71, .95); color: #0b1f3a; font-weight: 800; font-size: .8rem; }
.auth-card { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.auth-card h1 { font-size: 1.7rem; margin: 0 0 4px; color: #0b1f3a; }
.auth-card > p { margin: 0 0 22px; }
.auth-card label { font-size: .85rem; font-weight: 600; color: #374151; margin: 10px 0 6px; }
.field { position: relative; display: flex; align-items: center; }
.field .ico { position: absolute; left: 12px; font-size: 1rem; opacity: .6; }
.field input { width: 100%; padding: 13px 44px 13px 40px; border: 1.5px solid #d1d5db; border-radius: 12px; font-size: 1.05rem; background: #f9fafb; transition: .15s; }
.field input:focus { outline: none; border-color: #1d4ed8; background: #fff; box-shadow: 0 0 0 4px rgba(29, 78, 216, .12); }
.field input.pin { letter-spacing: 8px; }
.field .eye { position: absolute; right: 8px; border: 0; background: transparent; cursor: pointer; font-size: 1rem; opacity: .6; padding: 6px; }
.auth-card .err { margin-top: 10px; }
.auth-card .go { margin-top: 14px; padding: 14px; border-radius: 12px; font-size: 1.05rem; font-weight: 700; border: 0;
  background: linear-gradient(90deg, #0f2a4a, #1d4ed8 60%, #f97316 140%); color: #fff; box-shadow: 0 8px 20px rgba(29, 78, 216, .3); cursor: pointer; }
.auth-card .go:hover { filter: brightness(1.08); }
.secure { margin-top: 18px; font-size: .8rem; color: #6b7280; text-align: center; }
@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; margin: 10px auto; border-radius: 18px; min-height: 0; }
  .auth-hero { padding: 26px 22px 30px; } .auth-hero::after { display: none; } .auth-hero h2 { font-size: 1.2rem; margin: 22px 0 12px; }
  .hero-mark img { height: 46px; } .hero-mark span { font-size: 1.5rem; }
  .auth-card { padding: 28px 22px; }
  .brand-logo img { height: 24px; } .brand b { font-size: 1.1rem; }
}

/* ---- sales / purchase register + invoice (owner, 3-Nov-2026: Tally's VAM/26-27/155 look) ---- */
.reg td { white-space: nowrap; } .reg td:nth-child(4) { white-space: normal; min-width: 160px; }
.reg tr.cxl td { color: var(--muted); text-decoration: line-through; } .reg tr.cxl td:first-child { text-decoration: none; }
.reg input[type=checkbox], #all { width: 18px; height: 18px; padding: 0; }
.dock { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; justify-content: flex-end; margin-top: 10px;
  padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 -4px 14px rgba(15,42,74,.08); }
.dock #cnt { margin-right: auto; align-self: center; font-weight: 600; }
.dock label, .tools label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: 3px; }
.iv { background: #fff; border: 1px solid #9ca3af; font-size: .86rem; color: #000; }
.iv.cxl { opacity: .6; }
.iv-band { background: #ccffcc; text-align: center; padding: 8px 10px 10px; }
.iv-title { font-weight: 700; font-size: .85rem; } .iv-co { font-weight: 800; font-size: 1.45rem; margin: 2px 0; }
.iv-logo { display: block; margin: 4px auto; max-height: 60px; max-width: 160px; object-fit: contain; }
.iv-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid #9ca3af; }
.iv-p { padding: 8px 10px; border-right: 1px solid #e5e7eb; line-height: 1.45; } .iv-p:last-child { border-right: 0; }
.iv-t { font-weight: 700; font-size: .78rem; color: #374151; }
.iv-e { padding: 6px 10px; border-top: 1px solid #9ca3af; background: #f0fff0; word-break: break-all; }
.iv .mono { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }
.iv-items { border-top: 1px solid #9ca3af; font-size: .84rem; }
.iv-items th { background: #ccffcc; color: #000; border-right: 1px solid #b6d8b6; } .iv-items td { border-right: 1px solid #e5e7eb; }
.iv-items td.r { text-align: right; } .iv-items tr.tot td { border-top: 1px solid #9ca3af; font-weight: 600; }
.iv-w { padding: 6px 10px; background: #ccffcc; border-top: 1px solid #9ca3af; }
.show-sm { display: none; }
@media (max-width: 600px) { .show-sm { display: block; } .reg td:nth-child(4) { min-width: 120px; } .reg td, .reg th { padding: 7px 5px; } }

/* PDF preview: the real PDF pages before download */
.pv { position: fixed; inset: 0; z-index: 50; background: #3b4252; display: flex; flex-direction: column; }
.pv-bar { display: flex; gap: 8px; align-items: center; padding: 8px; background: #fff; box-shadow: 0 1px 4px #0003; }
.pv-bar #pvn { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.pv-pages { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 8px; }
.pv-pages canvas { background: #fff; box-shadow: 0 2px 8px #0006; max-width: 100%; }

/* a new version is live: one tap reloads */
.newver { position: sticky; top: 0; z-index: 60; display: block; width: 100%; padding: 10px; border: 0; cursor: pointer;
  background: #f5a524; color: #1b2a41; font-weight: 700; font-size: .95rem; }

/* ==== the frame (owner, 3-Nov-2026): left menu, top bar, phone bottom bar; Dark (navy menu) / Light (white menu) ==== */
body { --sb-w: 252px; --sb-bg: linear-gradient(180deg, #0f1f3a 0%, #0b1730 100%); --sb-ink: #cfd8e6; --sb-mut: #66748f; --sb-hi: #fff;
  --sb-line: rgba(255, 255, 255, .08); --sb-hover: rgba(255, 255, 255, .05); --sb-card: rgba(255, 255, 255, .06); --orange: #f39c12;
  --s1: #2a78d6; --s2: #eb6834; --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05); }
body.light { --sb-bg: #fff; --sb-ink: #475569; --sb-mut: #94a3b8; --sb-hi: #0f172a; --sb-line: var(--line); --sb-hover: var(--bg); --sb-card: var(--bg); }
.side { position: fixed; inset: 0 auto 0 0; width: var(--sb-w); background: var(--sb-bg); color: var(--sb-ink); display: flex; flex-direction: column;
  padding: 16px 12px 12px; z-index: 30; border-right: 1px solid var(--sb-line); }
.shell-main { margin-left: var(--sb-w); min-width: 0; }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px; }
.sb-logo { background: #fff; border-radius: 10px; padding: 3px 8px; display: inline-flex; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.sb-logo img { height: 28px; display: block; }
.sb-brand b { font-size: 1.3rem; font-weight: 800; color: #f59e0b; letter-spacing: .4px; }
.coswitch { position: relative; margin-bottom: 12px; }
.co { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--sb-card); border: 1px solid var(--sb-line); color: inherit;
  border-radius: 12px; padding: 9px 10px; cursor: pointer; font: inherit; }
.co .av { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #fff;
  background: linear-gradient(135deg, #1d3560, #2a78d6); }
.co-t { flex: 1; min-width: 0; } .co-t b { display: block; color: var(--sb-hi); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-t small { display: flex; align-items: center; gap: 6px; color: var(--sb-mut); font-size: .72rem; white-space: nowrap; overflow: hidden; }
.co .chev { font-style: normal; color: var(--sb-mut); }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.dot.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
.co-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 6px; z-index: 40; }
.co-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--ink); }
.co-menu button:hover { background: var(--bg); } .co-menu button.on { background: #fff7eb; color: #b45309; font-weight: 700; }
.sb-nav { flex: 1; overflow-y: auto; }
.sb-grp { font-size: .64rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sb-mut); font-weight: 700; margin: 10px 10px 4px; }
.sb-nav a, .sb-out { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 10px; color: var(--sb-ink); font-size: .9rem; margin-bottom: 1px;
  border: 0; background: none; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.sb-nav a:hover, .sb-out:hover { background: var(--sb-hover); color: var(--sb-hi); }
.sb-nav a.on { background: linear-gradient(90deg, rgba(243, 156, 18, .2), rgba(243, 156, 18, .04)); color: var(--sb-hi); box-shadow: inset 3px 0 0 var(--orange); font-weight: 600; }
body.light .sb-nav a.on { background: #fff7eb; }
.sb-nav svg, .sb-out svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.badge { margin-left: auto; font-style: normal; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.sb-out { border-top: 1px solid var(--sb-line); border-radius: 0; margin-top: 8px; padding-top: 12px; color: var(--sb-mut); }
.top { position: sticky; top: 0; z-index: 20; height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 26px; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); color: var(--ink); }
.top-title { min-width: 0; margin-right: auto; } .top-title h1 { margin: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.top-title small { display: block; color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch { display: flex; align-items: center; gap: 8px; width: min(380px, 34vw); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; color: var(--muted); }
.gsearch input { flex: 1; border: 0; background: transparent; padding: 9px 0; outline: none; min-width: 0; }
.gsearch kbd { font: .7rem "Segoe UI"; border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 1px 6px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 7px 11px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; }
.iconbtn { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer;
  font-size: 1rem; color: var(--ink); flex: none; }
.iconbtn i { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font-style: normal;
  font-size: .64rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.iconbtn i[hidden] { display: none; }
.me { display: flex; align-items: center; gap: 9px; color: var(--ink); } .me .av { width: 36px; height: 36px; border-radius: 50%; background: #0f1f3a; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.me b { display: block; font-size: .84rem; line-height: 1.2; } .me small { color: var(--muted); font-size: .72rem; }
.side-bg, .bnav, .cobar, .show-m { display: none; }
body.auth-mode .side, body.auth-mode .top, body.auth-mode .bnav, body.auth-mode .cobar { display: none !important; }
body.auth-mode .shell-main { margin-left: 0; }
@media (max-width: 900px) {
  .shell-main { margin-left: 0; }
  .side { transform: translateX(-105%); transition: transform .22s ease; box-shadow: 8px 0 30px rgba(0, 0, 0, .25); }
  body.menu-open .side { transform: none; }
  body.menu-open .side-bg { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 25; }
  .show-m { display: grid; } .hide-m { display: none !important; }
  .top { padding: 0 12px; height: 56px; gap: 8px; }
  .cobar { display: block; padding: 10px 12px 0; } .cobar .co { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
  .cobar .co-t b { color: var(--ink); } .cobar .co-t small, .cobar .co .chev { color: var(--muted); }
  main { padding: 12px 12px 90px; }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(15, 23, 42, .06); }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .66rem; color: var(--muted); }
  .bnav svg { width: 22px; height: 22px; } .bnav a.on { color: #0f1f3a; font-weight: 700; } .bnav a.on svg { color: var(--orange); }
  .bnav .badge { position: absolute; top: -3px; left: 54%; margin: 0; font-size: .6rem; padding: 0 5px; }
}
@media print { .side, .top, .bnav, .cobar, .side-bg { display: none !important; } .shell-main { margin-left: 0; } }

/* ==== dashboard (owner, 3-Nov-2026: most professional, elegant, modern) ==== */
.dk { display: grid; gap: 18px; }
.dk-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.dk-card.clk { cursor: pointer; } .dk-card.clk:hover { border-color: #c7d2e3; }
.dk-card.skel { min-height: 110px; } .dk-card.skel.tall { min-height: 300px; }
.dk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dk-kpi .l { display: flex; align-items: center; gap: 8px; color: #475569; font-size: .8rem; font-weight: 600; }
.dk-kpi .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; flex: none; }
.ic-g { background: #e7f6ee; color: #15803d; } .ic-b { background: #e8f1fc; color: #1d5fae; } .ic-o { background: #fdeee6; color: #b4471c; } .ic-y { background: #fff4e0; color: #b45309; }
.dk-kpi .v { font-size: 1.55rem; font-weight: 700; margin: 10px 0 4px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kpi .s { font-size: .76rem; color: var(--muted); }
.up { color: #15803d; font-weight: 600; } .dn { color: #c2410c; font-weight: 600; }
.dk > .dk-row { display: grid; gap: 18px; }
.dk > .dk-row.r2 { grid-template-columns: 1.6fr 1fr; align-items: start; } .dk > .dk-row.r3 { grid-template-columns: repeat(3, 1fr); }
.dk-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dk-hd h3 { margin: 0; font-size: .98rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.dk-hd.sub { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.dk-hd > b { font-variant-numeric: tabular-nums; }
.lnk { border: 0; background: none; color: var(--s1); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap; }
.dk .legend { display: flex; gap: 14px; font-size: .76rem; color: #475569; margin: 0; }
.dk .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dk .legend i.s1 { background: var(--s1); } .dk .legend i.s2 { background: var(--s2); }
.dk-chart .s1 { fill: var(--s1); } .dk-chart .s2 { fill: var(--s2); }
.dk-tot { display: flex; gap: 26px; margin-bottom: 8px; flex-wrap: wrap; } .dk-tot span { display: block; font-size: .74rem; color: var(--muted); }
.dk-tot b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dk-chart { position: relative; } .dk-chart svg { display: block; } .dk-chart .grid { stroke: #eef0f4; } .dk-chart .ax { font-size: 11px; fill: #8a94a6; }
.dk-chart g.mb:hover path { opacity: .85; }
.dk-mon { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; gap: 10px; }
.dk-mon span { display: block; font-size: .72rem; color: var(--muted); } .dk-mon b { display: block; font-variant-numeric: tabular-nums; } .dk-mon small { font-size: .72rem; }
.dk-tip { position: absolute; top: 6px; background: #0f1f3a; color: #fff; font-size: .76rem; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2); line-height: 1.5; white-space: nowrap; } .dk-tip b { display: block; } .dk-tip[hidden] { display: none; }
.pill-r { background: #fde8e8; color: #b91c1c; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.dk-att { list-style: none; margin: 0; padding: 0; }
.dk-att li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dk-att li:last-child { border-bottom: 0; } .dk-att li.more { display: none; } .dk-att li.clk { cursor: pointer; } .dk-att li.clk:hover .att-t b { color: var(--s1); }
.dk-att li.ok { opacity: .75; }
.sev { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: .85rem; }
.sev-r { background: #fde8e8; color: #b91c1c; } .sev-a { background: #fff4e0; color: #b45309; } .sev-i { background: #e8f1fc; color: #1d5fae; } .sev-ok { background: #e7f6ee; color: #15803d; }
.att-t { flex: 1; min-width: 0; } .att-t b { display: block; font-size: .85rem; } .att-t span { display: block; font-size: .82rem; color: #334155; }
.att-t small { display: block; color: var(--muted); font-size: .74rem; margin-top: 1px; }
.dk-att .att-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; font-size: .84rem; font-variant-numeric: tabular-nums; }
.dk-done summary { cursor: pointer; color: var(--muted); font-size: .8rem; margin-top: 8px; }
.all-clear { color: #15803d; font-weight: 600; padding: 18px 0; }
.age { display: grid; grid-template-columns: 92px 1fr 118px; align-items: center; gap: 10px; margin: 10px 0; font-size: .82rem; }
.age .bar { height: 10px; background: #f1f3f7; border-radius: 5px; overflow: hidden; } .age .bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.age .a0 { background: #f5b78f; } .age .a1 { background: #ee9460; } .age .a2 { background: #e26f37; } .age .a3 { background: #b4471c; }
.age b { text-align: right; font-variant-numeric: tabular-nums; }
.dk-foot { color: var(--muted); font-size: .74rem; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.seg { display: flex; background: var(--bg); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; color: #475569; font: inherit; font-size: .76rem; cursor: pointer; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.dk-card .dk-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.dk-card .dk-row:last-child { border-bottom: 0; }
.dk-card .dk-row .nm { flex: 1; min-width: 0; } .dk-card .dk-row .nm small { display: block; color: var(--muted); font-size: .72rem; }
.dk-card .dk-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-card .dk-row.clk { cursor: pointer; } .dk-card .dk-row.clk:hover .nm { color: var(--s1); }
.dk-row .rk { width: 20px; color: var(--muted); font-weight: 700; flex: none; }
.mg { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.mg:last-child { border-bottom: 0; } .mg small { display: block; color: var(--muted); font-size: .74rem; } .mg > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg > b small { display: inline; }
.tblw { overflow-x: auto; }
.dk-tbl { background: transparent; } .dk-tbl th { background: transparent; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
.dk-tbl td small { display: block; color: var(--muted); font-size: .72rem; } .dk-tbl tr.clk:hover td { background: #f7faff; }
@media (max-width: 1150px) { .dk > .dk-row.r3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .dk { gap: 12px; } .dk-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dk-card { padding: 13px 14px; } .dk-kpi .v { font-size: 1.12rem; } .dk-kpi .l { font-size: .74rem; }
  .dk > .dk-row.r2, .dk > .dk-row.r3 { grid-template-columns: 1fr; gap: 12px; }
  .age { grid-template-columns: 80px 1fr 104px; }
  .dk-mon { grid-template-columns: 1fr 1fr; }
}

/* settings */
.set-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-width: 960px; }
.pick { display: flex; gap: 10px; flex-wrap: wrap; }
.pick button { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 14px; cursor: pointer; font: inherit; font-weight: 600; display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 110px; }
.pick button.on { border-color: var(--orange); background: #fff7eb; }
.th-prev { display: flex; width: 92px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.th-prev i:first-child { width: 30%; } .th-prev i:last-child { flex: 1; background: #f4f6fa; }
.th-dark i:first-child { background: #0f1f3a; } .th-light i:first-child { background: #fff; border-right: 1px solid var(--line); }
.set-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.reg td.narr-c { max-width: 320px; white-space: normal; font-size: .8rem; }

/* GST registration state (owner, 3-Nov-2026: Andhra Pradesh / Telangana kept apart) */
.st-seg { display: inline-flex; margin: 0 0 12px; }
.tag.st-AP { background: #e8f1fc; color: #1d5fae; font-weight: 700; } .tag.st-TS { background: #fdeee6; color: #b4471c; font-weight: 700; }
.dk-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dk-state { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.dk-state:hover { border-color: #c7d2e3; background: #fafcff; }
.dk-state > span:not(.tag), .dk-state > small { grid-column: 2; font-size: .82rem; color: #475569; } .dk-state > small { color: var(--muted); font-size: .74rem; }
.dk-state > span b { color: var(--ink); font-variant-numeric: tabular-nums; }
.st-seg button { padding: 7px 14px; font-size: .84rem; }

/* Day Book and Top 10 */
.seg.big button { padding: 7px 14px; font-size: .84rem; } .tools .seg.big { align-self: end; }
.pill { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; background: #eef2f7; color: #475569; }
.p-sale { background: #e8f1fc; color: #1d5fae; } .p-rec { background: #e7f6ee; color: #15803d; } .p-pur { background: #fdeee6; color: #b4471c; }
.p-pay { background: #f1effc; color: #5141b8; } .p-note { background: #fff4e0; color: #b45309; } .p-con { background: #e6f7f7; color: #0f766e; }
.reg .narr-d { font-size: .76rem; white-space: normal; max-width: 520px; }
.top-tabs { display: inline-flex; flex-wrap: wrap; margin-bottom: 12px; }
.top-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.top-row:last-child { border-bottom: 0; } .top-row .rk { font-size: 1.1rem; text-align: center; color: var(--muted); font-weight: 700; }
.top-m b { display: block; font-size: .9rem; margin-bottom: 5px; } .top-bar { display: block; height: 6px; background: #f1f3f7; border-radius: 3px; overflow: hidden; }
.top-bar i { display: block; height: 100%; background: var(--s1); border-radius: 0 3px 3px 0; }
.top-v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .top-v small { display: block; color: var(--muted); font-size: .74rem; }
@media (max-width: 600px) { .reg.db td { white-space: normal; } .reg.db td.n { white-space: nowrap; } }
.logo-box { width: 72px; height: 40px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.logo-box img { max-width: 70px; max-height: 38px; object-fit: contain; } .logo-box em { font-size: .66rem; color: var(--muted); font-style: normal; }

/* Trial Balance, Profit & Loss, Balance Sheet */
.st { padding: 0; overflow: hidden; }
.st-head { text-align: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); } .st-head b { display: block; font-size: 1.05rem; } .st-head span { color: var(--muted); font-size: .82rem; }
.st-row { display: grid; grid-template-columns: 1fr 140px 140px; gap: 8px; align-items: center; padding: 7px 16px; border-bottom: 1px solid #f1f3f7; font-size: .88rem; }
.st-side .st-row { grid-template-columns: 1fr 140px; }
.st-row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.st-row.st-th { background: #f6f8fb; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: #475569; } .st-row.st-th b { font-weight: 700; }
.st-row[data-tg], .st-row.led { cursor: pointer; } .st-row[data-tg]:hover, .st-row.led:hover { background: #f7faff; }
.st-row.lv0 .st-n { font-weight: 700; } .st-row.lv1 .st-n { padding-left: 18px; } .st-row.lv2 .st-n { padding-left: 34px; } .st-row.lv3 .st-n { padding-left: 50px; }
.st-row.lv1, .st-row.lv2, .st-row.lv3 { font-size: .83rem; color: #334155; } .st-row.led .st-n { color: #1d5fae; }
.car { display: inline-block; width: 14px; font-style: normal; color: var(--muted); transition: transform .15s; } .st-row.open .car { transform: rotate(90deg); }
.st-row.st-tot { background: #f6f8fb; border-top: 2px solid #0f1f3a; font-weight: 700; } .st-row.st-tot .st-n { font-weight: 700; } .st-row.st-tot b { font-weight: 800; }
.st-row.st-res { background: #f0faf4; } .st-row.st-res .st-n, .st-row.st-res b { color: #15803d; font-weight: 700; } .st-row.st-res.loss .st-n, .st-row.st-res.loss b { color: #c2410c; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); } .st-two .st-side + .st-side { border-left: 1px solid var(--line); }
.st-big { text-align: center; font-size: 1.3rem; font-weight: 800; padding: 12px; border-bottom: 1px solid var(--line); } .st-big small { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; }
.st-ok { padding: 10px 16px; color: #15803d; font-weight: 600; font-size: .86rem; } .st-warn { padding: 10px 16px; color: #b91c1c; font-weight: 700; font-size: .86rem; }
.st-note { padding: 8px 16px 12px; } #stOpen.on { background: #fff7eb; border-color: var(--orange); }
@media (max-width: 900px) { .st-two { grid-template-columns: 1fr; } .st-two .st-side + .st-side { border-left: 0; border-top: 1px solid var(--line); }
  .st-row { grid-template-columns: 1fr 104px 104px; padding: 7px 10px; font-size: .8rem; } .st-side .st-row { grid-template-columns: 1fr 112px; } }
@media print { .st-kids { display: block !important; } .dk-card.st { box-shadow: none; border: 0; } .car { display: none; } }