@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Telugu:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
  :root{
    /* Saffron theme - deep saffron primary, India green accent, warm greys */
    --bg:#f7f4f0;
    --surface:#ffffff;
    --surface-2:#faf6f1;
    --ink:#1a2733;
    --ink-2:#3c4c5b;
    --ink-3:#7b8b9a;
    --line:#ece5dc;
    --line-2:#ddd2c4;
    --primary:#c05407;     /* deep saffron: white text on it passes 4.5:1 */
    --primary-2:#a9470a;
    --primary-soft:#fff0e2;
    --accent:#138808;       /* India green */
    --accent-soft:#e7f4e4;
    --warning-soft:#fff4e0;
    --danger:#e5484d;
    --danger-soft:#fdeced;
    --warning:#c26a00;
    --info:#5b53d8;         /* indigo */
    --info-soft:#ecebfb;
    --teal:#0aa2a2;
    --teal-soft:#e2f6f6;
    --purple:#8b5cf6;
    --purple-soft:#f1ebfe;
    --pink:#e8508d;
    --pink-soft:#fdeaf2;
    --green:#12a150;
    --success:#12a150;   /* used by older screens; same as --green */
    --green-soft:#e5f6ec;
    --radius:10px;
    --radius-sm:6px;
    --shadow-sm:0 1px 2px rgba(26,39,51,.06), 0 1px 3px rgba(26,39,51,.05);
    --shadow:0 6px 16px rgba(26,39,51,.08), 0 2px 5px rgba(26,39,51,.05);
    --mono:'Calibri', 'Segoe UI', ui-monospace, 'SF Mono', Menlo, monospace;
    --serif:'Calibri', 'Segoe UI', Candara, sans-serif;
    --sans:'Calibri', 'Segoe UI', Candara, -apple-system, BlinkMacSystemFont, sans-serif;
  }
  /* Dark theme - warm charcoal; variable overrides only, toggled by .dark on <body> */
  body.dark{
    --bg:#15120f;
    --surface:#211c17;
    --surface-2:#2a231c;
    --ink:#e4ebf3;
    --ink-2:#aebdcc;
    --ink-3:#7e90a3;
    --line:#3a3027;
    --line-2:#4a3d31;
    --primary:#f08a3c;
    --primary-2:#f5a060;
    --primary-soft:#3a2412;
    --accent:#4fbf4a;
    --accent-soft:#16301a;
    --warning-soft:#3a2a12;
    --danger:#ef6a6e;
    --danger-soft:#3a181a;
    --warning:#e0983a;
    --info:#8b84ec;
    --info-soft:#1e1c3a;
    --teal:#33bcbc;
    --teal-soft:#123030;
    --purple:#a684f8;
    --purple-soft:#241a3a;
    --pink:#f06fa5;
    --pink-soft:#3a1626;
    --green:#3cc072;
    --success:#3cc072;
    --green-soft:#123020;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 6px 16px rgba(0,0,0,.5);
  }
  body.dark .topbar{background:#120e0b;border-bottom-color:#000}
  body.dark table th{background:var(--surface-2)}
  body.dark input, body.dark select, body.dark textarea{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,select,textarea{font-family:inherit;font-size:13px}
  /* Top bar */
  /* ---- Top bar --------------------------------------------------------
     One row of fixed-height (32px) controls, all centred on the same axis.
     Labels never wrap (white-space:nowrap); the company and user blocks are
     the only parts allowed to shrink, and they truncate with an ellipsis.
     Below 1180px the tagline goes, below 1024px the user name and the GSTIN
     line, below 860px the bar wraps to two rows and buttons become icons. */
  .topbar{--tb-h:32px;--tb-line:rgba(255,255,255,.28);--tb-fill:rgba(255,255,255,.10);--tb-fill-hover:rgba(255,255,255,.20);
    background:linear-gradient(90deg,#a9470a 0%,#c05407 55%,#c85a08 100%);color:#fff8f0;
    display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;padding:0 20px;border-bottom:1px solid #1553ad}
  .tb-brand{display:flex;align-items:center;gap:12px;flex:none;min-width:0}
  .brand-mark{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1;letter-spacing:-.3px;color:#fff;white-space:nowrap}
  .brand-mark .dot{color:#ffd166}
  .brand-tag{font-size:10px;line-height:1;letter-spacing:1.6px;text-transform:uppercase;color:#c8ddf9;white-space:nowrap;
    border-left:1px solid var(--tb-line);padding:4px 0 4px 12px}
  .tb-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex:1 1 auto;min-width:0;font-size:12px;color:#dbe8fb}
  .tb-group{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
  .tb-group.tb-shrink{flex:0 1 auto;overflow:hidden}
  .tb-divider{width:1px;height:24px;background:var(--tb-line);flex:none}
  .tb-ico{width:16px;height:16px;flex:none;display:block}
  /* buttons and pills share one box model */
  .tb-btn,.tb-pill,.tb-select,.tb-badge{height:var(--tb-h);display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:0 12px;border-radius:8px;font:inherit;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;flex:none;box-sizing:border-box}
  .tb-btn{border:1px solid var(--tb-line);background:var(--tb-fill);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
  .tb-btn:hover{background:var(--tb-fill-hover);border-color:rgba(255,255,255,.55)}
  .tb-btn:focus-visible,.tb-seg button:focus-visible,.tb-select:focus-within{outline:2px solid #ffd166;outline-offset:2px}
  .tb-btn.tb-icon-only{width:var(--tb-h);padding:0}
  .tb-btn.tb-btn-quiet{background:transparent}
  .tb-btn.tb-btn-quiet:hover{background:rgba(255,255,255,.14)}
  .tb-pill{background:var(--tb-fill);border:1px solid transparent;color:#fff;font-weight:500}
  .tb-sync.saved{color:#d7f5e3}.tb-sync.saved .tb-ico{color:#7ee2a8}
  .tb-sync.syncing{color:#fff3c4;animation:pulse 1.2s ease infinite}
  .tb-sync.error,.tb-sync.conflict{background:rgba(255,90,90,.22);color:#ffe1e1}
  .tb-sync.local{color:#dbe8fb}
  .tb-badge{height:24px;padding:0 9px;border-radius:12px;font-size:10.5px;font-weight:700;border:1px solid transparent;cursor:default}
  button.tb-badge{cursor:pointer}
  .tb-badge.role-admin{background:#e3f0ff;color:#1565c0}.tb-badge.role-limited{background:#fff3e0;color:#e65100}
  .tb-badge.role-viewer,.tb-badge.role-member{background:#f5f5f5;color:#555}
  .tb-badge.premium{background:linear-gradient(90deg,#c9a227,#e6be4e);color:#5a3e00}
  .tb-badge.free{background:#fff3e0;color:#e65100;border-color:#ffcc80}
  /* segmented control (Founder / Accountant) */
  .tb-seg{height:var(--tb-h);display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:8px;background:rgba(0,0,0,.14);border:1px solid var(--tb-line);box-sizing:border-box;flex:none}
  .tb-seg button{height:24px;display:inline-flex;align-items:center;padding:0 12px;border:none;border-radius:6px;background:transparent;color:#dbe7ff;
    font:inherit;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
  .tb-seg button:hover{background:rgba(255,255,255,.14);color:#fff}
  .tb-seg button.on{background:#fff;color:#a9470a;box-shadow:0 1px 2px rgba(0,0,0,.15)}
  /* language picker: a pill wrapping a native select */
  .tb-select{position:relative;border:1px solid var(--tb-line);background:var(--tb-fill);color:#fff;padding:0 10px;cursor:pointer}
  .tb-select:hover{background:var(--tb-fill-hover)}
  .tb-select select{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:inherit;font:inherit;font-weight:600;
    padding:0 14px 0 0;height:100%;cursor:pointer;outline:none;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:right 4px center,right 0 center;background-size:4px 4px;background-repeat:no-repeat}
  .tb-select select option{color:#1b2333;background:#fff}
  /* company and user: the parts that shrink and truncate */
  .tb-company{display:flex;flex-direction:column;justify-content:center;min-width:96px;max-width:240px;line-height:1.25}
  .tb-company-name{font-size:12.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-company-sub{font-size:10.5px;color:#c8ddf9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.2px}
  .tb-user{display:flex;align-items:center;gap:8px;min-width:0;max-width:170px}
  .tb-avatar{width:28px;height:28px;border-radius:50%;background:#ffd166;color:#14213d;display:inline-flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;flex:none;letter-spacing:.3px}
  .tb-user-name{font-size:12px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  /* Fit levels, set by the app when the bar overflows (data-fit 1-4) */
  .topbar[data-fit="1"] .brand-tag,.topbar[data-fit="2"] .brand-tag,.topbar[data-fit="3"] .brand-tag,.topbar[data-fit="4"] .brand-tag{display:none}
  .topbar:is([data-fit="1"],[data-fit="2"],[data-fit="3"],[data-fit="4"]) :is(.tb-user-name,.tb-company-sub){display:none}
  .topbar:is([data-fit="1"],[data-fit="2"],[data-fit="3"],[data-fit="4"]) .tb-right{gap:10px}
  .topbar:is([data-fit="2"],[data-fit="3"],[data-fit="4"]) :is(.tb-btn .tb-label,.tb-sync .tb-label){display:none}
  .topbar:is([data-fit="2"],[data-fit="3"],[data-fit="4"]) :is(.tb-btn,.tb-sync){width:var(--tb-h);padding:0}
  .topbar:is([data-fit="3"],[data-fit="4"]) .tb-fy{display:none}
  .topbar[data-fit="4"]{flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}
  .topbar[data-fit="4"] .tb-right{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;row-gap:8px}
  .topbar[data-fit="4"] .tb-divider{display:none}
  .topbar[data-fit="4"] .tb-group.tb-shrink{flex:1 1 0;min-width:0}
  .topbar[data-fit="4"] .tb-company{max-width:none}
  body.dark .topbar{background:linear-gradient(90deg,#3a1d08,#5a2c0c)}
  body.dark .tb-seg button.on{background:#e6eefc;color:#123c6e}
  /* Layout - top bar + horizontal dropdown menu + main. (The old left .sidebar
     was replaced by .hmenu; its grid/off-canvas CSS is gone, not just hidden -
     it was dead weight that also mis-set the mobile breakpoints below it.) */
  .nav-section{padding:0 14px;margin-bottom:8px}
  .nav-section-title{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:8px 8px 4px}
  .nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-sm);color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer;margin-bottom:1px}
  .nav-item:hover{background:var(--surface-2);color:var(--ink)}
  .nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
  .nav-item .ico{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
  /* Horizontal dropdown menu (replaces the long left sidebar).
     NOTE: no overflow on .hmenu - an overflow-x:auto scroll container would
     force overflow-y to compute as auto and CLIP the dropdown. Buttons wrap to
     a second row on narrow screens instead of scrolling. */
  .hmenu{display:flex;flex-wrap:wrap;gap:1px;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:0 12px;position:sticky;top:0;z-index:60}
  .hmenu-group{position:relative}
  .hmenu-btn{background:transparent;border:none;color:var(--ink-2);font-size:12.5px;font-weight:600;padding:11px 13px;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;border-bottom:2px solid transparent;font-family:inherit}
  .hmenu-btn:hover{color:var(--ink);background:var(--surface-2)}
  .hmenu-btn.active{color:var(--primary);border-bottom-color:var(--primary)}
  .hmenu-btn.open{background:var(--surface-2);color:var(--ink)}
  .hmenu-caret{font-size:9px;opacity:.65}
  .hmenu-dd{position:absolute;top:100%;left:0;min-width:236px;max-height:72vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line-2);border-top:none;border-radius:0 0 10px 10px;box-shadow:var(--shadow);padding:6px;z-index:70}
  .hmenu-dd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
  .hmenu-dd-item:hover{background:var(--surface-2);color:var(--ink)}
  .hmenu-dd-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
  .hmenu-dd-item .ico{width:16px;text-align:center;flex-shrink:0}
  .main{padding:22px 28px;overflow-x:auto;display:flex;flex-direction:column;min-height:calc(100vh - 45px)}
  .main > .credit{margin-top:auto}
  /* Page header */
  .page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .page-title{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.5px}
  .page-sub{color:var(--ink-3);font-size:12px;margin-top:2px}
  .page-actions{display:flex;gap:8px}
  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);transition:all .12s}
  .btn:hover{border-color:var(--ink-3);color:var(--ink)}
  .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
  .btn-primary:hover{background:var(--primary-2);border-color:var(--primary-2);color:#fff}
  .btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
  .btn-ghost{background:transparent;border-color:transparent}
  .btn-ghost:hover{background:var(--surface-2)}
  .btn-danger{color:var(--danger);border-color:var(--line-2)}
  .btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
  .btn-sm{padding:4px 9px;font-size:11px}
  /* Cards */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  .card-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .card-title{font-weight:600;font-size:14px;color:var(--ink);margin:0;font-family:var(--serif);font-size:17px}
  .card-body{padding:18px}
  /* Stats grid - colourful tinted cards (Zoho-style dashboard) */
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);--sc:var(--primary);--scs:var(--primary-soft)}
  .stat::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--sc)}
  .stat{background:linear-gradient(180deg,var(--scs) 0%,var(--surface) 62%)}
  .stat.stat-gold{--sc:var(--accent);--scs:var(--accent-soft)}
  .stat.stat-info{--sc:var(--info);--scs:var(--info-soft)}
  .stat.stat-danger{--sc:var(--danger);--scs:var(--danger-soft)}
  .stat.stat-teal{--sc:var(--teal);--scs:var(--teal-soft)}
  .stat.stat-purple{--sc:var(--purple);--scs:var(--purple-soft)}
  .stat.stat-pink{--sc:var(--pink);--scs:var(--pink-soft)}
  .stat.stat-green{--sc:var(--green);--scs:var(--green-soft)}
  .stat-label{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:6px}
  .stat-value{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--sc);letter-spacing:-.2px;font-variant-numeric:tabular-nums}
  .stat-delta{font-size:11px;margin-top:4px;color:var(--ink-3)}
  .stat-delta.up{color:var(--green)}
  .stat-delta.down{color:var(--danger)}
  /* Table */
  .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  table{width:100%;border-collapse:collapse;font-size:12.5px}
  th{background:var(--surface-2);text-align:left;padding:9px 12px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
  td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
  tr:hover td{background:var(--surface-2)}
  tr:last-child td{border-bottom:none}
  td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  td.actions{text-align:right}
  td.bold,tr.total td{font-weight:600;color:var(--ink)}
  tr.total{background:var(--primary-soft) !important}
  tr.total td{background:var(--primary-soft);border-top:2px solid var(--primary);border-bottom:2px solid var(--primary);color:var(--primary)}
  tr.subtotal td{font-weight:600;background:var(--surface-2);color:var(--ink)}
  tr.group td{background:var(--ink);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:600;padding:7px 12px}
  /* Forms */
  .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
  .field{display:flex;flex-direction:column;gap:5px}
  .field label{font-size:11px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px}
  .field input, .field select, .field textarea{padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);outline:none;transition:border-color .12s}
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--primary)}
  .field.required label::after{content:' *';color:var(--danger)}
  /* Modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(14,42,35,.5);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;backdrop-filter:blur(2px)}
  .modal{background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 50px rgba(14,42,35,.25);width:100%;max-width:760px;border:1px solid var(--line)}
  .modal.wide{max-width:1100px}
  .modal-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .modal-title{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin:0}
  .modal-body{padding:22px}
  .modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
  /* Tabs */
  .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .tab{padding:9px 16px;font-size:12.5px;font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px}
  .tab:hover{color:var(--ink-2)}
  .tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
  /* Badges */
  .badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
  .badge-success{background:var(--primary-soft);color:var(--primary)}
  .badge-gold{background:var(--warning-soft);color:var(--warning)}
  .badge-info{background:var(--info-soft);color:var(--info)}
  .badge-danger{background:var(--danger-soft);color:var(--danger)}
  .badge-muted{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
  /* Filter bar */
  .filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
  .filter-bar .field{min-width:140px}
  /* Voucher line items */
  .lines-table{width:100%;border-collapse:collapse;margin-top:8px}
  .lines-table th{font-size:10.5px;padding:6px 8px}
  .lines-table td{padding:4px 4px;border-bottom:1px solid var(--line)}
  .lines-table input, .lines-table select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:4px;font-size:12px}
  .lines-table .row-del{color:var(--danger);cursor:pointer;padding:4px}
  /* Empty state */
  .empty{text-align:center;padding:50px 20px;color:var(--ink-3)}
  .empty .empty-ico{font-size:36px;margin-bottom:10px;opacity:.4}
  /* Toast */
  .toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:200;font-size:13px;display:flex;align-items:center;gap:10px;animation:slideUp .2s ease}
  .toast.success{background:var(--primary)}
  .toast.error{background:var(--danger)}
  @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
  /* Print/report styling */
  .report{background:#fff;padding:30px;border:1px solid var(--line);border-radius:var(--radius)}
  .report-head{text-align:center;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:18px}
  .report-head .report-logo{display:block;margin:0 auto 8px;max-height:48px;max-width:160px;object-fit:contain}
  .report-co{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}
  .report-title{font-size:14px;text-transform:uppercase;letter-spacing:2px;color:var(--ink-2);margin-top:4px}
  .report-period{font-size:11px;color:var(--ink-3);margin-top:3px}
  .report-foot{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-3);display:flex;justify-content:space-between}
  .drill-row:hover{background:var(--primary-soft)!important;cursor:pointer}
  .drill-row:hover td{color:var(--primary)!important}
  .hover-row:hover{background:var(--primary-soft)!important;cursor:pointer}
  /* Tag/chip */
  .chip-list{display:flex;flex-wrap:wrap;gap:6px}
  .chip{font-size:11px;padding:3px 9px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;color:var(--ink-2)}
  /* Wide content (line-item grids, wide report tables) scrolls inside its own
     box - the page/modal body must never scroll sideways as a whole. */
  .table-scroll{overflow-x:auto}
  /* ── Responsive ──────────────────────────────────────────────────────────
     Two breakpoints: 860px (tablet/phone-landscape - tighten spacing, let the
     top bar's secondary info wrap) and 600px (phone-portrait - the width most
     of the install base actually uses; touch targets, near-fullscreen modals,
     single-column forms). Respect the safe area on notched phones since the
     app also runs standalone (installed PWA). */
  .main{padding-left:max(28px, env(safe-area-inset-left)); padding-right:max(28px, env(safe-area-inset-right))}
  @media (max-width: 860px){
    .main{padding:16px max(14px, env(safe-area-inset-left)) 16px max(14px, env(safe-area-inset-right))}
    .topbar{padding:8px 12px;flex-wrap:wrap;row-gap:8px;column-gap:12px;
      padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right))}
    .tb-right{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;row-gap:8px;gap:8px}
    .tb-right .tb-divider{display:none}
    .tb-btn .tb-label{display:none}
    .tb-btn{width:var(--tb-h);padding:0}
    .tb-group.tb-shrink{flex:1 1 0;min-width:0}
    .tb-company{max-width:none;flex:1 1 auto}
    .page-head{flex-direction:column;align-items:flex-start;gap:10px}
    .page-title{font-size:21px}
    .page-actions{flex-wrap:wrap;width:100%}
    .page-actions .btn{flex:1 1 auto;justify-content:center}
    .stat-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
    .form-grid{grid-template-columns:1fr}
    /* Some fields set an inline gridColumn:'span 2' (Address, Notes, etc.) for
       the desktop 2-col layout. On a single explicit column that span forces
       the browser to fabricate an implicit 2nd track sized to the field's
       content, which overflows the viewport - !important is required since
       inline styles otherwise always beat a stylesheet rule. */
    .form-grid > *{grid-column:1 / -1 !important}
    .filter-bar{padding:12px 14px}
    .filter-bar .field{min-width:0;flex:1 1 140px}
    table{font-size:11.5px}
    th,td{padding:7px 8px}
    .hmenu{padding:0 8px}
    .hmenu-btn{padding:9px 10px;font-size:12px}
    .hmenu-dd{max-width:calc(100vw - 24px)}
    /* Touch targets: Apple/Android guidance is ~44px; buttons and inputs that
       drive the app (not decorative chips) get real tap height on touch. */
    .btn{min-height:38px;padding:8px 14px}
    .btn-sm{min-height:32px;padding:6px 11px}
    .field input, .field select, .field textarea{padding:10px 11px;font-size:14px}
  }
  @media (max-width: 600px){
    /* Topbar: keep brand, sync status and account controls; drop the FY pill
       and GSTIN line (visible in Company Settings) and truncate the name so
       the row never wraps past 2 lines or squeezes Sign out off-screen. */
    .tb-hide-sm{display:none !important}
    .tb-sync .tb-label{display:none}
    .tb-sync{width:var(--tb-h);padding:0}
    /* company and FY get their own last row, so the name has room to truncate */
    .topbar .tb-right .tb-group.tb-shrink{order:9;flex:1 1 100%;min-width:0}
    .tb-company{flex:1 1 auto;min-width:0;max-width:none}
    .stat-grid{grid-template-columns:1fr !important}
    .stat-value{font-size:18px}
    /* Modals become near-fullscreen sheets - the standard mobile pattern for
       data entry, instead of a small floating card fighting the keyboard. */
    .modal-overlay{padding:0;align-items:stretch}
    .modal{max-width:100%;width:100%;min-height:100dvh;border-radius:0;
      display:flex;flex-direction:column;
      padding-bottom:env(safe-area-inset-bottom)}
    .modal.wide{max-width:100%}
    .modal-head{padding:14px 16px;
      padding-top:max(14px, env(safe-area-inset-top))}
    .modal-title{font-size:17px}
    .modal-body{padding:14px 16px;flex:1;overflow-y:auto}
    .modal-foot{padding:12px 16px;flex-wrap:wrap}
    .modal-foot .btn{flex:1 1 auto;justify-content:center}
    .page-title{font-size:19px}
    .card-body{padding:14px}
    th,td{padding:6px 7px;font-size:11px}
  }
  /* Custom scrollbar */
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
  /* Indian rupee */
  .rupee{font-family:var(--mono)}
  .neg{color:var(--danger)}
  .pos{color:var(--primary)}
  /* Footer credit */
  .credit{text-align:center;padding:18px 20px 14px;font-size:10.5px;color:var(--ink-3);border-top:2px solid var(--line);background:var(--surface-2);letter-spacing:.5px;line-height:1.9}
  .credit b{color:var(--ink-2);font-weight:600}
  .credit .contact-row{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--ink-2)}
  .credit .contact-row a{color:var(--primary);text-decoration:none;font-weight:500}
  .credit .contact-row a:hover{text-decoration:underline}
  .credit .contact-sep{color:var(--line-2)}
  /* Section divider */
  .section-divider{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
  .section-divider .line{flex:1;height:1px;background:var(--line)}
  .section-divider .label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-3);font-weight:600}
  /* Voucher quick buttons */
  .voucher-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px}
  .vt-btn{padding:14px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:left;transition:all .15s}
  .vt-btn:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-1px);box-shadow:var(--shadow)}
  .vt-btn .vt-icon{font-size:18px;margin-bottom:6px;color:var(--primary)}
  .vt-btn .vt-name{font-weight:600;font-size:12.5px;color:var(--ink)}
  .vt-btn .vt-desc{font-size:11px;color:var(--ink-3);margin-top:2px}
  /* Help text */
  .help{font-size:11px;color:var(--ink-3);margin-top:4px;font-style:italic}
  /* Progress/sync animation */
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
  .syncing{animation:pulse 1.2s ease infinite}
  /* Ratio gauge */
  .gauge-track{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
  .gauge-fill{height:100%;border-radius:4px;transition:width .4s ease}
  /* MIS waterfall */
  .waterfall-bar{height:24px;border-radius:3px;min-width:2px;transition:width .3s}
  /* Code block */
  code{background:var(--surface-2);padding:2px 6px;border-radius:3px;font-family:var(--mono);font-size:11px}
  a{color:var(--primary);text-decoration:none}
  a:hover{text-decoration:underline}

  /* ── Auth Screen ─────────────────────────────────────────────────────── */
  .auth-bg{min-height:100vh;background:linear-gradient(145deg,#0b6b4f 0%,#063d2d 60%,#021a12 100%);display:flex;align-items:center;justify-content:center;padding:20px}
  .auth-card{background:var(--surface);border-radius:18px;padding:36px 32px 28px;width:100%;max-width:400px;box-shadow:0 24px 64px rgba(0,0,0,.4)}
  .auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}
  .auth-logo{width:52px;height:52px;background:var(--primary);border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:30px;font-weight:700;color:#fff;position:relative;flex-shrink:0}
  .auth-logo-dot{position:absolute;top:5px;right:5px;width:11px;height:11px;background:var(--accent);border-radius:50%}
  .auth-brand-name{font-size:22px;font-weight:700;color:var(--ink)}
  .auth-brand-tag{font-size:10.5px;color:var(--ink-3);letter-spacing:1.2px;text-transform:uppercase;margin-top:1px}
  .auth-tabs{display:flex;background:var(--surface-2);border-radius:9px;padding:4px;margin-bottom:22px;border:1px solid var(--line);gap:3px}
  .auth-tab{flex:1;border:none;background:transparent;padding:8px;border-radius:6px;font-size:13px;font-weight:500;color:var(--ink-3);cursor:pointer;transition:all .15s}
  .auth-tab.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.1)}
  .auth-form{display:flex;flex-direction:column;gap:14px}
  .auth-field{display:flex;flex-direction:column;gap:5px}
  .auth-field label{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.3px}
  .auth-field input{padding:10px 12px;border:1.5px solid var(--line-2);border-radius:8px;font-size:14px;background:var(--surface);color:var(--ink);transition:border-color .15s;outline:none;width:100%;box-sizing:border-box}
  .auth-field input:focus{border-color:var(--primary)}
  .auth-error{background:#fef2f2;color:var(--danger);border:1px solid #fecaca;border-radius:7px;padding:9px 12px;font-size:12.5px}
  .auth-btn-primary{background:var(--primary);color:#fff;border:none;border-radius:9px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;width:100%}
  .auth-btn-primary:hover{background:var(--primary-2)}
  .auth-btn-primary:disabled{opacity:.6;cursor:not-allowed}
  .auth-btn-secondary{background:transparent;color:var(--primary);border:1.5px solid var(--primary);border-radius:9px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;width:100%}
  .auth-btn-secondary:hover{background:var(--primary-soft)}
  .auth-btn-link{background:none;border:none;color:var(--ink-3);font-size:12.5px;cursor:pointer;padding:4px 0;display:block;width:100%;text-align:center;margin-top:4px}
  .auth-btn-link:hover{color:var(--primary)}
  .auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3);font-size:12px}
  .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
  .auth-btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px 14px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:all .15s}
  .auth-btn-google:hover{border-color:var(--primary);background:var(--primary-soft)}
  .auth-btn-google:disabled{opacity:.6;cursor:not-allowed}
  .auth-footer{text-align:center;margin-top:20px;font-size:11px;color:var(--ink-3);line-height:1.7}
  /* Company Selector */
  .company-card{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;transition:all .15s;text-align:left;width:100%}
  .company-card:hover{border-color:var(--primary);background:var(--primary-soft)}
  .company-arrow{color:var(--primary);font-size:16px;flex-shrink:0}
  /* Sync indicator */
  .sync-pill{font-size:11px;padding:2px 9px;border-radius:10px;font-weight:500;letter-spacing:.3px;cursor:default}
  .sync-pill.syncing{background:#fef3c7;color:#92400e;animation:pulse 1.2s ease infinite}
  .sync-pill.saved{background:var(--primary-soft);color:var(--primary)}
  .sync-pill.error{background:#fef2f2;color:var(--danger)}
  .sync-pill.local{background:var(--surface-2);color:var(--ink-3)}
  /* Loading spinner */
  .spin-ring{width:36px;height:36px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Sign-in showcase panel: desktop only. On a phone the form must come first,
     and a marketing column above it would push the fields below the fold. */
  @media (max-width: 900px){
    .auth-showcase{display:none !important}
  }
  /* The showcase panel already carries the brand on desktop, so the copy inside
     the card is redundant there. Below 900px the panel is gone and it is needed. */
  @media (min-width: 901px){
    .auth-card-brand{display:none !important}
  }

  /* ── Founder mode ─────────────────────────────────────────────────────── */
  .founder-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
  .founder-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 16px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);box-shadow:0 1px 3px rgba(14,42,35,.06);transition:transform .12s,border-color .12s,box-shadow .12s;min-height:112px}
  .founder-tile:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(14,42,35,.10);transform:translateY(-1px)}
  .founder-tile:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .founder-tile b{font-size:15px}
  .founder-tile-ico{font-size:28px;line-height:1;margin-bottom:6px}
  .founder-tile-sub{font-size:12px;color:var(--ink-3)}
  .founder-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
  .founder-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);cursor:pointer;font:inherit;font-size:12px;color:var(--ink);text-align:center}
  .founder-pick.on{border-color:var(--primary);background:var(--primary-soft);font-weight:600}
  .founder-worth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:start}
  @media (max-width: 760px){
    .founder-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .founder-tile{min-height:96px;padding:12px}
    .founder-worth{grid-template-columns:1fr}
  }

  /* Gujarati in Founder mode: a face with Gujarati glyphs first, the usual stack after */
  body.lang-gu{font-family:'Noto Sans Gujarati', 'Shruti', var(--sans)}
  body.lang-hi, body.lang-mr{font-family:'Noto Sans Devanagari', 'Mangal', var(--sans)}
  body.lang-ta{font-family:'Noto Sans Tamil', 'Latha', var(--sans)}
  body.lang-te{font-family:'Noto Sans Telugu', 'Gautami', var(--sans)}
  body.lang-bn{font-family:'Noto Sans Bengali', 'Vrinda', var(--sans)}
  :is(body.lang-gu, body.lang-hi, body.lang-mr, body.lang-ta, body.lang-te, body.lang-bn) :is(.founder-tile b, .page-title){line-height:1.35}
  /* Tamil and Telugu words run long: let tile labels wrap instead of clipping */
  :is(body.lang-ta, body.lang-te) .founder-tile b{overflow-wrap:anywhere}

  /* ---- Business health (ratios) ---- */
  .ratio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .ratio-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line-2);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
  .ratio-card.good{border-left-color:var(--success)}.ratio-card.ok{border-left-color:var(--info, #2f6fb3)}.ratio-card.watch{border-left-color:var(--warning)}
  .ratio-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .ratio-name{font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .ratio-value{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
  .ratio-explain{font-size:12.5px;color:var(--ink);line-height:1.45}
  .ratio-bench{font-size:11.5px;color:var(--ink-3)}
  .ratio-formula{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);opacity:.8}

  /* ---- Insights ---- */
  .insight-verdict{border-left:5px solid var(--line-2)}
  .insight-verdict.good{border-left-color:var(--success)}.insight-verdict.watch{border-left-color:var(--warning)}.insight-verdict.act{border-left-color:var(--danger)}
  .insight-list{display:flex;flex-direction:column;gap:8px}
  .insight-item{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .insight-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:var(--line-2)}
  .insight-item.good .insight-dot{background:var(--success)}.insight-item.ok .insight-dot{background:var(--info, #2f6fb3)}
  .insight-item.watch .insight-dot{background:var(--warning)}.insight-item.act .insight-dot{background:var(--danger)}
  .insight-item.act{border-color:color-mix(in srgb, var(--danger) 35%, var(--line))}
  .insight-title{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .insight-area{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);background:var(--surface-2);padding:2px 7px;border-radius:10px}
  .insight-text{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
  .ai-review{font-size:13px;line-height:1.55;color:var(--ink)}
  .ai-review ul,.ai-review ol{margin:4px 0 4px 20px;padding:0}.ai-review li{margin:3px 0}

  /* ---- Global search (right end of the menu bar) ---- */
  .gsearch{position:relative;margin-left:auto;align-self:center;display:flex;align-items:center;gap:6px;height:32px;min-width:220px;width:min(340px,32vw);
    padding:0 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);transition:border-color .15s,box-shadow .15s}
  .gsearch:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)}
  .gsearch-ico{font-size:15px;color:var(--ink-3);line-height:1}
  .gsearch input{flex:1;min-width:0;border:none;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--ink);padding:0;height:100%}
  .gsearch-kbd{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;white-space:nowrap}
  .gsearch-dd{position:absolute;top:calc(100% + 6px);right:0;width:min(440px,92vw);max-height:65vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line-2);
    border-radius:10px;box-shadow:var(--shadow);padding:6px;z-index:80}
  .gsearch-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
  .gsearch-item.on,.gsearch-item:hover{background:var(--primary-soft)}
  .gsearch-item-ico{width:22px;text-align:center;flex:none;color:var(--ink-3)}
  .gsearch-item-main{display:flex;flex-direction:column;min-width:0;flex:1}
  .gsearch-item-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gsearch-item-sub{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gsearch-item-kind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);flex:none}
  .gsearch-empty{padding:12px;font-size:12.5px;color:var(--ink-3)}
  @media (max-width: 860px){
    .gsearch{order:-1;flex:1 1 100%;width:auto;margin:6px 0}
    .gsearch-kbd{display:none}
  }

  /* ---- Payables ---- */
  .bill-inbox{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr);gap:16px;align-items:start}
  @media (max-width: 960px){ .bill-inbox{grid-template-columns:1fr} }
  .bill-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
  .bill-row:hover,.bill-row.on{background:var(--primary-soft)}
  .bill-row-title{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bill-row-sub{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bill-checks{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
  .bill-check{display:flex;gap:10px;align-items:flex-start;padding:5px 0;border-top:1px solid var(--line)}
  .bill-check:first-of-type{border-top:none}
.val-why ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5}
/* Data management */
.dm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:8px}
.dm-tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer}
.dm-tab:hover{background:var(--surface-2)}
.dm-tab.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.dm-grid{grid-template-columns:1fr}}
.dm-grid .card-title{margin-bottom:8px}
.dm-p{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:0 0 10px}
.dm-note{font-size:11.5px;color:var(--ink-3);margin-top:12px}
.dm-big{width:100%;justify-content:center;padding:12px 16px}
.dm-col{display:flex;flex-direction:column;gap:8px}
.dm-col .btn{justify-content:flex-start}
.dm-drop{border:2px dashed var(--line-2);border-radius:10px;padding:26px;text-align:center;cursor:pointer;color:var(--ink-3);display:flex;flex-direction:column;gap:4px;align-items:center}
.dm-drop.on,.dm-drop:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--ink-2)}
.dm-warn{background:var(--warning-soft);color:var(--ink);border-left:3px solid var(--warning);border-radius:8px;padding:10px 12px;font-size:12.5px;margin:10px 0}
.dm-warn ul{margin:6px 0 0;padding-left:18px}
.dm-kv td{padding:5px 8px;font-size:13px}
.dm-kv td:first-child{color:var(--ink-3);white-space:nowrap}
.dm-samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dm-current{font-weight:700;font-size:15px;margin:4px 0 10px}
.dm-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.dm-choice{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;cursor:pointer}
.dm-choice input{margin-top:3px}
/* User guide */
.ug-wrap{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
@media (max-width:860px){.ug-wrap{grid-template-columns:1fr}}
.ug-toc{position:sticky;top:10px;max-height:calc(100vh - 140px);overflow:auto}
.ug-part{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:10px 14px 4px}
.ug-item{display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:7px 14px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;border-left:3px solid transparent}
.ug-item:hover{background:var(--surface-2)}
.ug-item.on{background:var(--primary-soft);color:var(--ink);font-weight:600;border-left-color:var(--primary)}
.ug-body{min-height:420px}
.ug-crumb{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.ug-title{font-size:22px;margin:4px 0 10px;display:flex;gap:10px;align-items:center}
.ug-what{font-size:14.5px;line-height:1.6;color:var(--ink);margin:0 0 14px}
.ug-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.6}
.ug-tip{margin-top:16px;padding:10px 14px;background:var(--warning-soft);border-left:3px solid var(--warning);border-radius:8px;font-size:13px}
.ug-foot{display:flex;gap:8px;align-items:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.val-views{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.val-views{grid-template-columns:1fr}}
.val-view-h{font-weight:700;color:var(--primary-2);margin-bottom:6px}
.val-example{color:var(--ink-3);font-style:italic;list-style:none;margin-left:-20px}
/* Help sits beside the profile, always visible */
.tb-btn.tb-help{background:#fff;color:var(--primary-2);border-color:#fff;font-weight:700}
.tb-btn.tb-help:hover{background:var(--primary-soft);color:var(--primary-2)}
.tb-btn.tb-help.on{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
body.dark .tb-btn.tb-help{background:var(--primary);color:#1c0c03;border-color:var(--primary)}
/* Sign-in: About link under the headline (desktop) and under the logo (phone) */
.auth-about-link{display:inline-flex;align-items:center;gap:8px;margin:0 0 28px;color:#fff6ec;font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid rgba(255,200,150,.5);border-radius:999px;padding:9px 18px;background:rgba(90,40,8,.45);white-space:nowrap}
.auth-about-link:hover{background:rgba(192,84,7,.65)}
.auth-about-mini{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:#c05407;text-decoration:none}

/* Demo company: entry on the sign-in card, and a slim bar while it is open */
.auth-demo{margin-top:18px;padding-top:16px;border-top:1px dashed #e2d1bf;text-align:center}
.auth-demo-btn{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid #c05407;background:#fff7ef;color:#a9470a;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.auth-demo-btn:hover{background:#c05407;color:#fff}
.auth-demo-note{margin-top:7px;font-size:12px;color:#7a6553;line-height:1.45}
.demo-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:6px 14px;background:#138808;color:#fff;font-size:13px}
.demo-bar button{border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.demo-bar button:hover{background:rgba(255,255,255,.15)}

/* Period filter (Founder home, My business over the years) */
.period-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 4px}
.period-bar-label{font-size:12.5px;color:var(--ink-3);margin-right:4px}
.period-bar .dm-tab{padding:6px 12px;font-size:12.5px}
.period-dates{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:8px;font-size:12.5px;color:var(--ink-2)}
.period-dates input,.period-dates select{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px}
.period-note{display:flex;justify-content:space-between;gap:12px;min-height:20px;font-size:12px;color:var(--ink-3)}
.link-btn{background:none;border:0;padding:0;color:var(--primary);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.link-btn:hover{text-decoration:underline}
/* Trend chart: categorical slots validated for CVD on the light and dark surfaces */
:root{--trend-1:#2a78d6;--trend-2:#eb6834;--trend-3:#1baf7a}
body.dark{--trend-1:#3987e5;--trend-2:#d95926;--trend-3:#199e70}
.trend-s1{fill:var(--trend-1);background:var(--trend-1)}
.trend-s2{fill:var(--trend-2);background:var(--trend-2)}
.trend-s3{fill:var(--trend-3);background:var(--trend-3)}
.trend-grid{stroke:var(--line);stroke-width:1}
.trend-axis{font-size:11px;fill:var(--ink-3)}
.trend-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.trend-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.trend-table th:first-child,.trend-table td:first-child{position:sticky;left:0;background:var(--surface);min-width:170px}
.trend-table td.num,.trend-table th.num{text-align:right;white-space:nowrap}
.trend-strong td{font-weight:700}
.trend-sub td:first-child{padding-left:26px;color:var(--ink-3)}
.trend-note{font-size:12px;color:var(--ink-3);margin:6px 2px}

/* ── Bank & Credit (20d-bank) ─────────────────────────────────────────── */
.mb-id{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12.5px;white-space:nowrap}
.mb-id-label{color:var(--ink-3);font-size:11.5px}
.mb-id b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px;color:var(--ink)}
.mb-id-copy{border:none;background:var(--surface-2);border-radius:6px;cursor:pointer;padding:2px 7px;color:var(--ink-2);font:inherit}
.mb-id-big{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;font-weight:800;letter-spacing:1px;margin:4px 0;color:var(--primary)}
.bank-table-wrap{overflow-x:auto}
.bank-table td:first-child{min-width:280px}
.bank-head td{background:var(--surface-2);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-2)}
.bank-kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:13px}
.bank-kv span{color:var(--ink-3)} .bank-kv b{text-align:right;font-weight:600}
.bank-settings{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:4px 0 14px}
.bank-settings label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3)}
.bank-settings input{width:150px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.bank-docs{display:grid;gap:8px}
.bank-doc{display:flex;gap:9px;align-items:flex-start;font-size:13px}
.bank-doc em{color:var(--green);font-style:normal;font-size:12px}
.bank-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.bank-product{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.bank-product span{font-size:12px;color:var(--ink-3);line-height:1.45} .bank-product em{font-size:11.5px;color:var(--ink-2);font-style:normal}
.bank-product.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary) inset}
.bank-product .bank-product-ico{font-size:24px;line-height:1.1}
.bank-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px}
.bank-lenders{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.bank-lender{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13px}
.bank-lender.on{border-color:var(--primary);background:var(--surface-2)}
.bank-consent{margin-top:14px;padding:12px 14px;border:1px dashed var(--primary);border-radius:10px;background:var(--surface-2)}
.bank-portals{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.bank-portal{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-size:13px}
.bank-portal span{font-size:11.5px;color:var(--ink-3)} .bank-portal em{font-size:11.5px;color:var(--ink-2);font-style:normal}
.bank-portal:hover{border-color:var(--primary)} .bank-portal .bank-portal-go{color:var(--primary);font-weight:600;margin-top:2px}
.bank-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* MiyeeCredit portal */
.mc-page{min-height:100vh;background:var(--bg,#f6f2ec)}
.mc-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 20px;background:linear-gradient(90deg,#1e3a5f,#0f2742);color:#fff}
.mc-brand{display:flex;align-items:center;gap:10px} .mc-brand b{font-size:18px} .mc-brand b span{color:#fbbf24} .mc-brand small{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#c7d6ea}
.mc-logo{width:34px;height:34px;border-radius:9px;background:#fbbf24;color:#0f2742;font:700 20px Georgia,serif;display:flex;align-items:center;justify-content:center}
.mc-bar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mc-who{font-size:13px;color:#e2ebf6}
.mc-main{max-width:1200px;margin:0 auto;padding:20px 16px 40px}
.mc-row{cursor:pointer} .mc-row:hover td{background:var(--surface-2)}
.mc-search{padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:600 15px ui-monospace,Menlo,monospace;letter-spacing:1px;text-transform:uppercase;min-width:240px;background:var(--surface);color:var(--ink)}
/* Sign-in: which door */
.auth-portal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:-8px 0 16px}
.auth-portal-opt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 12px;border:1.5px solid #e2d1bf;border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:#2a1a0e}
.auth-portal-opt b{font-size:14px} .auth-portal-opt span{font-size:11.5px;color:#7a6553}
.auth-portal-opt.on{border-color:#c05407;background:#fff3e6;box-shadow:0 0 0 1px #c05407 inset}
.auth-portal-note{font-size:12px;line-height:1.55;color:#5a4636;background:#fbf4ec;border:1px solid #efe2d3;border-radius:8px;padding:9px 11px;margin:-6px 0 14px}
@media (max-width:600px){ .bank-table td:first-child{min-width:200px} .mb-id-big{font-size:21px} .bank-settings input{width:120px} }
.mc-review{margin-bottom:14px}
.mc-check{display:flex;gap:8px;font-size:12.5px;margin-bottom:6px;align-items:flex-start}
.mc-check em{font-style:normal;color:var(--ink-3);word-break:break-all}
.mc-check>span:first-child{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:12px}
.mc-check .ok{background:var(--green);color:#fff} .mc-check .warn{background:var(--warning);color:#fff} .mc-check .bad{background:var(--danger);color:#fff}
.demo-switch{display:inline-flex;gap:0;border:1px solid rgba(255,255,255,.7);border-radius:999px;overflow:hidden}
.demo-bar .demo-switch button{border:0;border-radius:0;padding:3px 10px}
.demo-bar .demo-switch button.on{background:#fff;color:#138808}