:root { --bg:#f6f4f0; --card:#fff; --ink:#212121; --muted:#6e6e6e; --line:#e6e2dc; --brand:#212121; --brand2:#b77439; --green:#475d39; --gray:#919da9; --ok:#3f6b2f; --bad:#a33a2a; --warn:#9a5a1c; --soft:#f2efe9; --accent-soft:#f6ebdf; }
* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
body { margin:0; font:14px/1.5 "Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%; }
h1, h2, .brand, .kpi .v { font-family:"Montserrat","Manrope",sans-serif; }
a { color:var(--brand); }
#app { display:flex; min-height:100vh; }
nav.side { width:220px; background:var(--brand); color:#fff; border-right:3px solid var(--brand2); padding:16px 0; flex:none; position:sticky; top:0; height:100vh; overflow:auto; }
nav.side .brand { font-weight:700; font-size:17px; padding:0 18px 14px; letter-spacing:.2px; } nav.side .brand img { display:block; width:100%; max-width:176px; max-height:64px; object-fit:contain; margin-bottom:8px; background:#fff; padding:7px 9px; border-radius:6px; box-sizing:border-box; } /* logo on a white tile keeps its own colors on the dark menu */
nav.side .brand small { display:block; font-weight:400; opacity:.75; font-size:11px; }
nav.side a { display:block; color:#fff; text-decoration:none; padding:8px 18px; opacity:.85; }
nav.side a:hover { background:rgba(255,255,255,.08); opacity:1; } nav.side a.active { background:rgba(183,116,57,.28); opacity:1; box-shadow:inset 3px 0 0 var(--brand2); }
nav.side .sec { font-size:10px; text-transform:uppercase; letter-spacing:.12em; opacity:.7; padding:12px 18px 4px; cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; }
nav.side .sec:hover { opacity:1; }
nav.side .chev { display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; transform:rotate(-90deg); transition:transform .15s; }
nav.side .navsec.open .chev { transform:rotate(0); }
nav.side .links { display:none; } nav.side .navsec.open .links { display:block; }
.topbar { display:none; } .backdrop { display:none; }
main { flex:1; padding:22px 28px; min-width:0; }
h1 { font-size:22px; margin:0 0 14px; }
h2 { font-size:16px; margin:18px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.row > * { min-width:0; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.kpi .l { color:var(--muted); font-size:12px; }
.kpi .v { font-size:22px; font-weight:700; margin-top:2px; letter-spacing:-.2px; } .kpi.accent { border-top:3px solid var(--brand2); } .kpi.green { border-top:3px solid var(--green); } .kpi.dark { border-top:3px solid var(--brand); }
.kpi .s { color:var(--muted); font-size:12px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:var(--soft); font-weight:600; position:sticky; top:0; z-index:1; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#444; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.sub td { font-weight:600; background:#fafafa; }
tr.tot td { font-weight:700; border-top:2px solid var(--ink); }
tr.grp td { font-weight:700; color:var(--brand); padding-top:12px; }
tr.parent td { font-weight:600; }
td.indent { padding-left:26px; }
.chev2 { display:inline-block; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid var(--muted); margin-right:6px; transition:transform .15s; }
.chev2.open { transform:rotate(90deg); }
tr.click { cursor:pointer; } tr.click:hover td { background:#f3f7f8; }
.neg { color:var(--bad); }
.muted { color:var(--muted); }
.pill { display:inline-block; white-space:nowrap; padding:1px 8px; border-radius:999px; font-size:11px; background:var(--soft); }
.pill.ok { background:#dcfce7; color:var(--ok); } .pill.bad { background:#fee2e2; color:var(--bad); } .pill.warn { background:#fef3c7; color:var(--warn); }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
input, select, textarea, button { font:inherit; }
input, select, textarea { border:1px solid #cfd4da; border-radius:6px; padding:6px 8px; background:#fff; width:100%; }
input[type=number] { text-align:right; }
button { border:1px solid var(--brand); background:var(--brand); color:#fff; border-radius:6px; padding:6px 12px; cursor:pointer; font-weight:600; } button:hover { background:#333; }
button.sec { background:#fff; color:var(--brand); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.sm { padding:3px 8px; font-size:12px; }
button:disabled { opacity:.5; cursor:default; }
.field { flex:1 1 160px; }
.field.w2 { flex:2 1 260px; }
.field.s { flex:0 1 120px; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.right { margin-left:auto; }
.err { color:var(--bad); margin:8px 0; }
.ok { color:var(--ok); }
.scroll { overflow:auto; max-height:70vh; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:flex-start; justify-content:center; padding:40px 12px; z-index:50; overflow:auto; }
.modal { background:#fff; border-radius:12px; padding:20px; width:min(860px,100%); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal h2 { margin-top:0; }
.login { margin:80px auto; max-width:380px; }
.login h1 { text-align:center; }
.split-lines table td { padding:3px 4px; border:0; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.tabs a { padding:8px 12px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; }
.tabs a.active { color:var(--brand); border-color:var(--brand2); font-weight:600; }
.small { font-size:12px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px), (orientation:portrait) and (max-width:1100px) {
  #app { flex-direction:column; }
  .topbar { display:flex; align-items:center; gap:10px; background:var(--brand); color:#fff; padding:10px 12px; position:sticky; top:0; z-index:40; }
  .topbar .brand { font-weight:700; font-size:16px; } .topbar .brand .muted { color:rgba(255,255,255,.75); }
  .burger { background:transparent; border:0; color:#fff; font-size:22px; padding:2px 6px; line-height:1; }
  nav.side { position:fixed; top:0; left:0; bottom:0; width:min(280px, 85vw); height:100vh; height:100dvh; z-index:60; transform:translateX(-100%); transition:transform .2s; box-shadow:0 0 30px rgba(0,0,0,.3); }
  body.menu-open nav.side { transform:translateX(0); }
  body.menu-open .backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50; }
  main { padding:14px; } .grid2 { grid-template-columns:1fr; } .kpis { grid-template-columns:1fr 1fr; }
  .modal-bg { padding:12px; } .modal { padding:14px; }
}
@media print { nav.side, .topbar, .noprint, .toolbar, button { display:none !important; } main { padding:0; } .card { border:0; } }

/* charts + dashboard */
.charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.chart-card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; min-width:0; }
.chart-card h2 { margin:0 0 6px; font-size:14px; }
.chart-card .sub { color:var(--muted); font-size:12px; margin-bottom:8px; }
.chart-wrap { position:relative; height:240px; width:100%; }
.chart-wrap.tall { height:280px; }
.card, .chart-card, .kpi { min-width:0; }
.card table { min-width:520px; }
.card > table, .card .scroll { overflow-x:auto; display:block; max-width:100%; }
.card .scroll table, .card > table { width:100%; }
/* division picker */
.dpick { position:relative; display:inline-block; }
.dpick > button { background:#fff; color:var(--ink); border:1px solid #cfd4da; font-weight:500; min-width:180px; text-align:left; }
.dpick .menu { display:none; position:absolute; top:100%; left:0; z-index:30; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:8px 10px; min-width:240px; }
.dpick.open .menu { display:block; }
.dpick .menu label { display:flex; gap:8px; align-items:center; padding:5px 2px; font-size:13px; color:var(--ink); cursor:pointer; }
.dpick .menu input { width:auto; } .dpick .menu .sep { border-top:1px solid var(--line); margin:4px 0; } .dpick .menu label.muted { color:var(--muted); }
@media (max-width:900px) {
  .toolbar > * { max-width:100%; }
  .toolbar input, .toolbar select { width:auto; max-width:100%; flex:1 1 140px; }
  .toolbar label { flex-basis:100%; margin-bottom:-6px; }
  .modal { max-height:calc(100vh - 24px); overflow:auto; }
  .modal .row { flex-direction:column; gap:8px; }
  .field, .field.s, .field.w2 { flex:1 1 auto; width:100%; }
  .kpis { grid-template-columns:1fr 1fr; gap:10px; }
  .kpi .v { font-size:18px; }
  .charts { grid-template-columns:1fr; }
  .chart-wrap { height:220px; }
  .card table { min-width:0; }
  td, th { padding:6px 6px; }
  h1 { font-size:19px; }
  main { padding:12px 12px 40px; }
  nav.side { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .split-lines table { min-width:520px; }
}

/* phones in portrait: one column everywhere, full-width controls, sticky first column on wide tables */
@media (orientation:portrait) and (max-width:600px) {
  .kpis { grid-template-columns:1fr 1fr; }
  .toolbar { gap:8px; }
  .toolbar > input, .toolbar > select, .toolbar > .dpick, .toolbar > .dpick > button { width:100%; flex:1 1 100%; }
  .toolbar > label { flex-basis:100%; }
  .toolbar .right { margin-left:0; }
  .scroll { max-height:none; }
  .card { padding:12px; }
  .card table th:first-child, .card table td:first-child { position:sticky; left:0; background:#fff; z-index:2; box-shadow:2px 0 0 var(--line); max-width:160px; }
  .card table th:first-child { background:var(--soft); z-index:3; }
  .chart-wrap { height:210px; }
  .grid2 { grid-template-columns:1fr; }
  .tabs { flex-wrap:wrap; }
}
/* phones in landscape: short screens, keep the header out of the way and use the width */
@media (orientation:landscape) and (max-height:500px) {
  .topbar { position:static; }
  .kpis { grid-template-columns:repeat(4,1fr); }
  .charts { grid-template-columns:1fr 1fr; }
  .chart-wrap { height:190px; }
  .scroll { max-height:none; }
  .modal-bg { padding:8px; align-items:flex-start; }
  .modal { max-height:calc(100dvh - 16px); overflow:auto; }
  nav.side { height:100dvh; overflow-y:auto; }
}

/* invoice + timesheet document */
.doc { background:#fff; border:1px solid var(--line); border-radius:10px; padding:36px 40px; max-width:900px; margin:0 auto 24px; }
.doc-head { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.doc-logo { display:block; max-width:180px; max-height:70px; margin-bottom:8px; }
.doc-co { font-family:"Montserrat","Manrope",sans-serif; font-weight:700; font-size:16px; }
.doc-title { text-align:right; } .doc-h { font-family:"Montserrat","Manrope",sans-serif; font-size:26px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.doc-meta { width:auto; margin-left:auto; } .doc-meta td { border:0; padding:1px 0 1px 16px; } .doc-meta td:first-child { color:var(--muted); }
.doc-bill { margin-bottom:22px; }
.doc table th { position:static; }
.doc-lines { margin-bottom:10px; }
.doc-foot { margin-top:14px; padding:10px 12px; background:var(--soft); border-radius:6px; }
.doc-sec { margin-top:28px; border-top:1px solid var(--line); padding-top:16px; }
.doc-grp { font-weight:700; margin:16px 0 4px; }
.doc-time { margin-bottom:4px; }
@media print {
  body, #app, main { background:#fff; } .doc { border:0; padding:0; max-width:none; } .scroll { max-height:none; overflow:visible; }
  .doc table, .doc tr { page-break-inside:avoid; } th { background:#f2f2f2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Lis Consulting Group theme: matches lisconsultinggroup.com (deep navy, blue-to-cyan accent, Inter) and sign.liscg.app (navy #1d3a5f) */
.wordmark { display:flex; align-items:center; gap:10px; font-size:17px; }
.wordmark .mark, #splash .mark { flex:none; width:30px; height:30px; border-radius:7px; display:grid; place-items:center; background:linear-gradient(135deg,#00e6ff,#4a91e3); color:#0a0d1a; font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:17px; }
:root[data-theme="lcg"] { --bg:#f4f6fa; --card:#fff; --ink:#0f1b2d; --muted:#64748b; --line:#e2e8f0; --brand:#1d3a5f; --brand2:#4a91e3; --green:#14b8c4; --gray:#94a3b8; --soft:#eef2f7; --accent-soft:#e6f0fb; }
[data-theme="lcg"] body { font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
[data-theme="lcg"] h1, [data-theme="lcg"] h2, [data-theme="lcg"] .brand, [data-theme="lcg"] .kpi .v, [data-theme="lcg"] .doc-co, [data-theme="lcg"] .doc-h { font-family:"Inter",sans-serif; letter-spacing:-.3px; }
[data-theme="lcg"] nav.side { background:#0a0d1a; border-right:1px solid #242a42; }
[data-theme="lcg"] nav.side .brand img { filter:none; }
[data-theme="lcg"] nav.side a { color:#cbd5e1; }
[data-theme="lcg"] nav.side a:hover { background:#11172c; color:#fff; }
[data-theme="lcg"] nav.side a.active { background:rgba(0,230,255,.10); color:#fff; box-shadow:inset 3px 0 0 #00e6ff; }
[data-theme="lcg"] nav.side .sec { color:#94a3b8; }
[data-theme="lcg"] .topbar { background:#0a0d1a !important; }
[data-theme="lcg"] th { color:#475569; }
[data-theme="lcg"] button:hover { background:#16304f; }
[data-theme="lcg"] button.sec:hover { background:#eef2f7; }
[data-theme="lcg"] .kpi.accent { border-top-color:#4a91e3; } [data-theme="lcg"] .kpi.green { border-top-color:#14b8c4; }
[data-theme="lcg"] input:focus, [data-theme="lcg"] select:focus, [data-theme="lcg"] textarea:focus { outline:2px solid rgba(74,145,227,.35); outline-offset:0; border-color:#4a91e3; }
[data-theme="lcg"] .login h1 { color:#1d3a5f; }
/* splash (LCG instance only; markup is injected by the server) */
#splash { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 40%,#11172c 0%,#0a0d1a 70%); transition:opacity .45s ease; }
#splash.out { opacity:0; pointer-events:none; }
#splash .splash-in { display:flex; flex-direction:column; align-items:center; gap:16px; animation:splashIn .6s ease both; }
#splash .mark { width:64px; height:64px; border-radius:14px; font-size:36px; box-shadow:0 0 40px rgba(0,230,255,.25); }
#splash .splash-name { color:#fff; font:600 26px/1 "Inter",sans-serif; letter-spacing:-.4px; }
#splash .splash-bar { width:120px; height:2px; border-radius:2px; background:#242a42; overflow:hidden; position:relative; }
#splash .splash-bar::after { content:""; position:absolute; inset:0; width:40%; background:linear-gradient(90deg,#00e6ff,#4a91e3); animation:splashBar 1s ease-in-out infinite; }
@keyframes splashIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes splashBar { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
@media (prefers-reduced-motion:reduce) { #splash .splash-in, #splash .splash-bar::after { animation:none; } }

/* remittance box on invoices */
.doc-remit { margin-top:16px; border:1px solid var(--line); border-radius:8px; padding:12px 16px; page-break-inside:avoid; break-inside:avoid; }
.doc-remit-t { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); margin-bottom:8px; }
.doc-remit-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 28px; font-size:12.5px; }
.doc-remit-h { font-weight:600; margin-bottom:4px; }
.doc-remit table { width:auto; } .doc-remit td { border:0; padding:1px 14px 1px 0; } .doc-remit td:first-child { color:var(--muted); white-space:nowrap; }
.doc-head .muted.small { line-height:1.5; }
.doc.pdf { border:0; border-radius:0; padding:0; max-width:none; }
tr.excl td { color:var(--muted); }
/* Bank Feed: account tiles + refresh */
.feed-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .feed-head h1 { margin:0; }
.icon-btn { display:inline-flex; align-items:center; gap:6px; }
.icon-btn.spin svg { animation:spin .9s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.acct-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-bottom:14px; }
.acct-tile { all:unset; box-sizing:border-box; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink); }
.acct-tile:hover { border-color:var(--brand2); } .acct-tile.on { border-color:var(--brand); box-shadow:inset 0 3px 0 var(--brand2); }
.acct-tile .at-name { font-weight:600; font-size:13px; line-height:1.3; margin-bottom:2px; }
.acct-tile .at-row { display:flex; justify-content:space-between; gap:8px; } .acct-tile .at-row span { color:var(--muted); } .acct-tile .at-row b { font-variant-numeric:tabular-nums; }
.acct-tile .at-pills { display:flex; flex-wrap:wrap; gap:4px; margin:3px 0; }
.acct-tile .at-foot { color:var(--muted); font-size:11.5px; line-height:1.4; }
.acct-tile.all .at-big { font-size:26px; font-weight:700; line-height:1.1; }
@media (max-width:600px) { .acct-tiles { display:flex; overflow-x:auto; padding-bottom:4px; } .acct-tile { flex:0 0 200px; } }
/* on/off switch (Modules) */
.switch { position:relative; display:inline-block; width:40px; height:22px; margin:0; } .switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:#cbd5e1; border-radius:22px; cursor:pointer; transition:.15s; }
.switch span::before { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked + span { background:var(--brand2); } .switch input:checked + span::before { transform:translateX(18px); }
/* view-only sections: action buttons hidden (filters, print and links still work) */
body.ro main button:not(.ro-ok), body.ro .modal-bg button:not(.ro-ok) { display:none !important; }

/* document design: invoices / timesheets / report headers (Settings > Documents) */
.doc { font-family:var(--doc-font, inherit); } .doc .doc-co, .doc .doc-h { font-family:var(--doc-font, inherit); }
.doc .doc-h, .doc .doc-remit-t, .doc .doc-grp { color:var(--doc-accent, var(--brand)); }
.doc .doc-lines th, .doc .doc-time th { border-bottom:2px solid var(--doc-accent, var(--brand)); }
.doc .doc-logo { max-height:var(--doc-logo-h, 64px); max-width:260px; }
.doc.logo-right .doc-head > div:first-child { order:2; text-align:right; } .doc.logo-right .doc-head .doc-title { order:1; text-align:left; } .doc.logo-right .doc-meta { margin-left:0; } .doc.logo-right .doc-logo { margin-left:auto; }
.report-head { display:flex; align-items:center; gap:14px; padding:4px 0 12px; margin-bottom:12px; border-bottom:2px solid var(--doc-accent, var(--brand)); font-family:var(--doc-font, inherit); }
.report-head img { max-height:calc(var(--doc-logo-h, 64px) * .75); max-width:200px; } .report-head .rh-co { font-weight:700; font-size:15px; } .report-head .rh-t { font-size:13px; color:var(--doc-accent, var(--brand)); font-weight:600; } .report-head .rh-s { font-size:12px; color:var(--muted); }
@media print { .report-head { display:flex !important; } }
.card.login.clerk-login { width:auto; max-width:440px; } .clerk-login #clerk-signin { display:flex; justify-content:center; }
.logo-preview { display:flex; gap:18px; flex-wrap:wrap; margin:8px 0 12px; } .logo-preview .lp-doc { border:1px solid var(--line); border-radius:8px; padding:12px 16px; background:#fff; } .logo-preview .lp-doc img { display:block; max-height:64px; max-width:240px; }
.logo-preview .lp-nav { background:var(--brand); padding:10px; border-radius:8px; } .logo-preview .lp-nav img { display:block; max-width:176px; max-height:64px; background:#fff; padding:7px 9px; border-radius:6px; }

/* ===== App frame (QuickBooks Enterprise style): top bar, icon rail, All apps panel ===== */
:root { --frame-bg:#fff; --frame-line:#e3e6ea; --frame-ink:#393a3d; --frame-muted:#6b6c72; --frame-hover:#f0f2f4; --sel:var(--brand); --sel-ink:#fff; }
[data-theme="lcg"] { --sel:#1d3a5f; }
body.frame { background:#f4f5f8; }
body.frame #app { display:grid; grid-template-columns:76px auto minmax(0,1fr); grid-template-rows:56px minmax(0,1fr); min-height:100vh; }
.tbar { grid-column:1 / -1; grid-row:1; position:sticky; top:0; z-index:45; display:flex; align-items:center; gap:14px; height:56px; padding:0 16px 0 12px; background:var(--frame-bg); border-bottom:1px solid var(--frame-line); }
.tb-brand { text-decoration:none; display:flex; align-items:center; height:40px; padding-right:14px; border-right:1px solid var(--frame-line); }
.tb-brand img { height:34px; max-width:130px; object-fit:contain; } .tb-brand .wordmark { color:var(--ink); font-size:15px; font-weight:700; }
.tb-co { font-weight:600; color:var(--frame-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.tb-search { position:relative; flex:1; max-width:580px; margin:0 auto; } .tb-search > span { position:absolute; left:12px; top:9px; color:var(--frame-muted); }
.tb-search input { width:100%; height:38px; border-radius:20px; border:1px solid #c7cbd1; padding:0 14px 0 38px; background:#fff; }
.tb-search input:focus { outline:2px solid color-mix(in srgb, var(--brand2) 40%, transparent); border-color:var(--brand2); }
.tb-results { display:none; position:absolute; top:44px; left:0; right:0; background:#fff; border:1px solid var(--frame-line); border-radius:10px; box-shadow:0 12px 32px rgba(15,27,45,.16); max-height:420px; overflow:auto; z-index:80; padding:6px; }
.tb-results.show { display:block; } .tb-results a { display:flex; gap:10px; align-items:center; padding:7px 10px; border-radius:7px; color:var(--ink); text-decoration:none; }
.tb-results a:hover, .tb-results a.on { background:var(--frame-hover); } .tb-results .rt { flex:none; width:64px; font-size:11px; color:var(--frame-muted); text-transform:uppercase; letter-spacing:.04em; }
.tb-results .rl small { display:block; color:var(--frame-muted); font-size:11.5px; }
.tb-right { display:flex; align-items:center; gap:6px; margin-left:auto; }
.tb-icon, .tb-burger { background:transparent; border:0; color:var(--frame-ink); padding:7px; border-radius:8px; display:grid; place-items:center; } .tb-icon:hover { background:var(--frame-hover); }
.tb-burger { display:none; }
.tb-avatar { width:32px; height:32px; border-radius:50%; padding:0; border:0; background:var(--sel); color:var(--sel-ink); font-size:12px; font-weight:700; }
.rail { grid-column:1; grid-row:2; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; background:var(--frame-bg); border-right:1px solid var(--frame-line); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:2px; }
.rail-btn { display:flex; flex-direction:column; align-items:center; gap:3px; width:64px; padding:7px 0 6px; border-radius:10px; color:var(--frame-ink); text-decoration:none; font-size:11px; }
.rail-btn > svg, .rail-btn > .app-ic { width:38px; height:34px; padding:6px 8px; border-radius:9px; box-sizing:border-box; }
.rail-btn:hover > svg { background:var(--frame-hover); } .rail-btn.on > svg { background:var(--sel); color:var(--sel-ink); } .rail-btn.on > span:last-child { font-weight:700; }
.rail-btn > .app-ic { width:30px; height:30px; padding:0; border-radius:50%; } .rail-btn.on > .app-ic { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--sel); }
.rail-sec { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--frame-muted); margin:10px 0 2px; border-top:1px solid var(--frame-line); padding-top:10px; width:56px; text-align:center; }
.rail-fill { flex:1; min-height:12px; }
.app-ic { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#fff; font-size:11px; font-weight:700; flex:none; } .app-ic.sm { width:20px; height:20px; font-size:10px; margin-right:8px; }
.apps-panel { grid-column:2; grid-row:2; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; width:240px; background:var(--frame-bg); border-right:1px solid var(--frame-line); padding:8px 8px 20px; box-sizing:border-box; }
.apps-panel.closed { display:none; }
.ap-head { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 10px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--frame-muted); }
.ap-x { background:transparent; border:0; color:var(--frame-muted); padding:3px; border-radius:6px; } .ap-x:hover { background:var(--frame-hover); }
.ap-row { display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:0; color:var(--frame-ink); font-weight:600; padding:8px; border-radius:8px; text-align:left; cursor:pointer; }
.ap-row:hover { background:var(--frame-hover); } .ap-row span:not(.app-ic) { flex:1; } .ap-row i { color:var(--frame-muted); transition:transform .15s; display:grid; }
.ap-app.open .ap-row i { transform:rotate(90deg); } .ap-pages { display:none; padding:2px 0 6px 32px; } .ap-app.open .ap-pages { display:block; }
.ap-pages a { display:block; padding:7px 10px; border-radius:7px; color:var(--frame-ink); text-decoration:none; font-size:13.5px; } .ap-pages a:hover { background:var(--frame-hover); }
.ap-pages a.on { background:color-mix(in srgb, var(--sel) 12%, #fff); font-weight:600; color:var(--ink); }
body.frame main { grid-column:3; grid-row:2; padding:18px 28px 40px; min-width:0; }
.apps-panel.closed + .backdrop + main, body.frame .apps-panel.closed ~ main { grid-column:2 / 4; }
.crumbs { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--frame-muted); margin:-4px 0 6px; } .crumbs a { color:var(--frame-muted); text-decoration:none; } .crumbs a:hover { text-decoration:underline; }
.crumbs .star { background:transparent; border:0; color:#9aa0a6; padding:2px; margin-left:4px; display:grid; } .crumbs .star.on { color:#e8a317; } .crumbs .star.on svg { fill:#e8a317; }
body.frame main h1 { font-size:26px; font-weight:600; margin:0 0 16px; }
.pop { position:fixed; z-index:90; min-width:210px; max-height:70vh; overflow:auto; background:#fff; border:1px solid var(--frame-line); border-radius:10px; box-shadow:0 12px 32px rgba(15,27,45,.18); padding:6px; }
.pop .pop-h { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--frame-muted); padding:6px 10px 6px; } .pop .pop-h .muted { text-transform:none; letter-spacing:0; font-weight:400; }
.pop a { display:flex; align-items:center; padding:8px 10px; border-radius:7px; color:var(--ink); text-decoration:none; } .pop a:hover { background:var(--frame-hover); }
.pin-row { display:flex !important; align-items:center; gap:8px; padding:6px 0; color:var(--ink) !important; font-size:14px !important; }
/* Home */
h1.greet { text-align:center; font-size:30px !important; margin:6px 0 22px !important; }
.home-sec { margin-bottom:22px; } .home-sec h2 { font-size:17px; margin:0 0 10px; }
.feed-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.feed-card { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--frame-line); border-top:3px solid var(--fc); border-radius:12px; padding:14px 16px; color:var(--ink); text-decoration:none; min-height:118px; }
.feed-card:hover { box-shadow:0 6px 18px rgba(15,27,45,.10); } .feed-card b { font-size:15px; } .feed-card p { margin:0; color:var(--frame-muted); font-size:13px; flex:1; } .feed-card span { color:var(--fc); font-weight:600; font-size:13px; }
.create-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .create-row h2 { margin:0 8px 0 0 !important; }
.chip { display:inline-block; padding:7px 14px; border:1px solid #b9bec5; border-radius:999px; color:var(--ink); text-decoration:none; font-weight:600; font-size:13px; background:#fff; } .chip:hover { border-color:var(--sel); background:var(--frame-hover); }
h1.glance { font-size:19px !important; margin-top:8px !important; }
/* phones and small tablets: rail + panel become a drawer behind the menu button */
@media (max-width:900px) {
  body.frame #app { grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(0,1fr); }
  .tb-burger { display:grid; } .tb-co { display:none; } .tb-brand { border:0; padding-right:4px; } .tb-search input { font-size:16px; }
  .rail { position:fixed; top:56px; left:0; z-index:60; transform:translateX(-110%); transition:transform .2s; height:calc(100dvh - 56px); }
  .apps-panel { position:fixed; top:56px; left:76px; z-index:60; transform:translateX(-140%); transition:transform .2s; height:calc(100dvh - 56px); display:block !important; }
  body.menu-open .rail, body.menu-open .apps-panel { transform:none; }
  body.menu-open .backdrop { display:block; position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.35); z-index:55; }
  body.frame main { grid-column:1 !important; padding:14px 14px 40px; }
}
@media (max-width:520px) { .tb-search { display:none; } h1.greet { font-size:24px !important; } }
@media print { .tbar, .rail, .apps-panel, .crumbs { display:none !important; } body.frame #app { display:block; } body.frame main { padding:0; } }
/* All apps fly-out on hover (not pinned): floats over the page next to the rail */
.apps-panel.closed.fly { display:block; position:fixed; left:76px; top:56px; bottom:0; height:auto; z-index:70; box-shadow:10px 0 28px rgba(15,27,45,.16); animation:flyin .12s ease-out; }
@keyframes flyin { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { .apps-panel.fly { box-shadow:none; animation:none; } }
.acct-tile .at-name { display:flex; align-items:flex-start; gap:6px; } .acct-tile .at-name .muted { margin-right:auto; }
.acct-tile .at-sync { flex:none; display:grid; place-items:center; width:24px; height:24px; margin:-3px -4px 0 0; border-radius:6px; color:var(--muted); cursor:pointer; }
.acct-tile .at-sync:hover { background:var(--soft); color:var(--ink); } .acct-tile .at-sync svg { width:14px; height:14px; } .acct-tile .at-sync.spin svg { animation:spin .9s linear infinite; }
.rb-checks { align-items:center; } .rb-checks > label { display:flex !important; align-items:center; gap:6px; color:var(--ink) !important; font-size:13px !important; margin:0 8px 0 0 !important; } .rb-checks input[type=checkbox] { width:auto; }
table.rb th.rb-side, table.rb td.rb-side { color:var(--muted); font-size:12px; background:#fafbfc; } table.rb td.rb-side.neg { color:var(--bad); }
@media print { .rb-cfg { display:none !important; } }
.rb-checks .field.s { flex:0 1 190px; }
.crumbs .crumb-export { margin-left:auto; } .crumbs { flex-wrap:wrap; }
.rc-grp h2 { font-size:16px; margin:0 0 8px; } .rc-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0 24px; }
.rc-item { display:block; padding:8px 4px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:14px; } .rc-item:hover { color:var(--brand2); background:var(--soft); }
table.rpt tr.grp td { font-weight:700; background:#fafbfc; }
.rb-ctl { display:inline-flex; gap:2px; margin-right:8px; vertical-align:middle; } .rb-ctl button { padding:1px 6px; font-size:10px; }
.fa-tabs { margin:6px 0 14px; }
.help-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; } .help-card { padding:0; overflow:hidden; margin:0; }
.help-thumb { position:relative; aspect-ratio:16/9; background:#0a0d1a; cursor:pointer; } .help-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.help-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.92); color:#0a0d1a; display:grid; place-items:center; font-size:24px; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.help-len { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 7px; border-radius:6px; } .help-body { padding:12px 16px 14px; } .help-body h2 { margin:2px 0 4px; font-size:16px; }
.tb-icon { text-decoration:none; }

/* financial pack PDF */
.pack-print{padding:0}
.pack-print .pk-title{height:9.6in;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.pack-print .pk-title img{max-height:90px;max-width:320px;margin-bottom:28px}
.pack-print .pk-co{font-size:30px;font-weight:700;color:var(--doc-accent,#1b2a4a)}
.pack-print .pk-h{font-size:22px;margin-top:6px}
.pack-print .pk-p{font-size:14px;color:#555}
.pack-print .pk-toc{margin-top:48px;text-align:left;font-size:13px;line-height:1.9;min-width:360px;border-top:2px solid var(--doc-accent,#1b2a4a);padding-top:12px}
.pack-print .pk-toc-h{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:#777}
.pack-print .pk-foot{margin-top:60px;font-size:12px;color:#777}
.pack-print .pk-page{padding-top:4px}
.pack-print table.rpt{width:100%;min-width:0 !important;border-collapse:collapse;font-size:11px}
.pack-print .report-head img{max-height:44px}
.pack-print table.rpt th{border-bottom:1.5px solid #333;text-align:left;padding:4px 6px;white-space:normal;vertical-align:bottom}
.pack-print table.rpt td{padding:3px 6px;border-bottom:1px solid #eee}
.pack-print table.rpt .n{text-align:right;white-space:nowrap}
.pack-print table.rpt tr.grp td{font-weight:700;padding-top:8px}
.pack-print table.rpt tr.sub td{font-weight:600;border-top:1px solid #999}
.pack-print table.rpt tr.tot td{font-weight:700;border-top:1.5px solid #333;border-bottom:3px double #333}
.pk-sec h2{margin-bottom:8px}
label.chk{display:inline-flex !important;align-items:center;gap:6px;margin:0 16px 6px 0 !important;font-size:13px;width:auto !important;white-space:nowrap;text-transform:none;letter-spacing:0;color:var(--text)}
label.chk input{width:auto;margin:0}
table.rpt td:first-child{min-width:240px}

.pop.more-pop{min-width:460px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
@media (max-width:600px){.pop.more-pop{min-width:0}.more-grid{grid-template-columns:1fr}}

.tb-help{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:16px;border:1px solid var(--frame-hover, rgba(255,255,255,.25));color:var(--frame-ink);text-decoration:none;font-size:13px;font-weight:600}
.tb-help:hover{background:var(--frame-hover)}
@media (max-width:600px){.tb-help span{display:none}}
a.btn{display:inline-flex;align-items:center;padding:7px 12px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;border:1px solid #cfd4da;color:var(--ink);background:#fff}
h3.fh{margin:14px 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
table.i20{font-size:12.5px}
table.i20 th{white-space:normal;vertical-align:bottom;font-size:11.5px}
table.i20 tr.sep td{border-bottom:1.5px solid #bbb}
table.i20 tr.tot td{font-weight:700;background:rgba(0,0,0,.03)}
.i20-print h3{font-size:13px;margin:14px 0 6px}
.i20-print table.i20{width:100%;border-collapse:collapse}
.i20-print table.i20 td,.i20-print table.i20 th{border:1px solid #999;padding:3px 6px}
.i20-print table.i20 .n{text-align:center}

.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.bar{height:8px;background:rgba(0,0,0,.06);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%}
tr.sel td{background:rgba(74,145,227,.10)}