:root { --ink:#17211c; --muted:#68736d; --paper:#f4f1e9; --card:#fffdf7; --green:#1d5b43; --lime:#c8ed75; --line:#dcd9cf; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 system-ui,-apple-system,sans-serif; }
a { color:inherit; }
.topbar { height:70px; padding:0 max(24px,5vw); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font-weight:900; letter-spacing:.12em; text-decoration:none; }
.brand span { font-weight:500; letter-spacing:0; color:var(--muted); margin-left:8px; }
.account { display:flex; align-items:center; gap:16px; }
.topnav { color:var(--green); font-weight:750; text-decoration:none; }
button,.button { border:0; cursor:pointer; font:inherit; }
.account button { background:none; color:var(--muted); padding:0; }
main { width:min(1180px,90vw); margin:0 auto 60px; }
.hero { padding:56px 0 30px; display:flex; align-items:end; justify-content:space-between; gap:24px; }
h1 { font-size:clamp(2rem,5vw,4rem); line-height:1; margin:8px 0 14px; letter-spacing:-.045em; }
h2 { font-size:1.05rem; margin:0; }
.eyebrow { color:var(--green); text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:800; margin:0; }
.muted { color:var(--muted); max-width:650px; }
.primary { display:inline-block; color:white; background:var(--green); border-radius:999px; padding:12px 20px; text-decoration:none; font-weight:700; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.kpi-card,.panel,.form-card,.login-card { background:var(--card); border:1px solid var(--line); border-radius:18px; }
.kpi-card { padding:20px; }
.kpi-card p { margin:0 0 18px; color:var(--muted); }
.kpi-card strong { display:block; font-size:2rem; letter-spacing:-.04em; }
.kpi-card strong small { font-size:.9rem; margin-left:4px; color:var(--muted); }
.kpi-card span,.task small,.activity-list small { display:block; color:var(--muted); font-size:.78rem; }
.wide { grid-column:1/-1; }
.columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.panel { padding:22px; }
.panel-title { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; }
.panel-title span { color:var(--muted); font-size:.8rem; }
.task { display:grid; grid-template-columns:8px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.priority { width:7px; height:7px; border-radius:50%; background:#9da59f; margin-top:8px; }
.priority.p3 { background:#dc593e; }.priority.p2 { background:#d0a62c; }.priority.p1 { background:#68a77f; }
.activity-list div { padding:12px 0; border-bottom:1px solid var(--line); }
.integration-panel { margin-bottom:18px; }
.product-panel { margin-bottom:18px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:16px; }
.product-card { padding:18px; background:#f7f5ee; border-radius:12px; }
.product-card h3 { margin:8px 0 18px; }
.product-card > strong { display:block; font-size:1.5rem; }
.product-card > small { display:block; color:var(--muted); margin-bottom:14px; }
.product-card a { color:var(--green); font-weight:700; text-decoration:none; }
.integration-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-top:16px; }
.integration { display:flex; align-items:center; gap:10px; padding:10px; background:#f7f5ee; border-radius:12px; }
.integration small { display:block; color:var(--muted); }
.status { width:9px; height:9px; border-radius:50%; background:#a8aea9; flex:0 0 auto; }
.status.connected { background:#4b9b6a; }.status.degraded { background:#dc593e; }
.empty { color:var(--muted); padding:18px 0; }
.empty strong,.empty span { display:block; }
.login-shell,.form-page { min-height:calc(100vh - 70px); display:grid; place-items:center; padding:40px 0; }
.login-card,.form-card { width:min(500px,90vw); padding:32px; }
.form-page { display:block; max-width:600px; margin:0 auto; }
.form-page .form-card { margin-top:24px; }
.back { color:var(--muted); text-decoration:none; }
.form-stack p { display:grid; gap:6px; }
.form-stack input,.form-stack select,.form-stack textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:white; font:inherit; }
.form-stack textarea { min-height:110px; }
.error { color:#a12e23; }
.financial-header { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:34px 0 18px; padding:24px 26px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:0 10px 40px rgba(23,33,28,.04); }
.financial-heading { min-width:0; }
.financial-heading h1 { margin:9px 0 7px; font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.05; letter-spacing:-.035em; }
.financial-heading p { margin:0; color:var(--muted); font-size:.86rem; }
.financial-heading p span { display:inline-block; margin-left:10px; padding-left:10px; border-left:1px solid var(--line); }
.report-status { display:inline-flex; align-items:center; gap:7px; color:var(--green); font-size:.7rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.report-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#d1a233; box-shadow:0 0 0 4px #f6eccd; }
.report-back { flex:0 0 auto; padding:10px 14px; border:1px solid var(--line); border-radius:999px; color:var(--green); font-size:.8rem; font-weight:800; text-decoration:none; transition:background .15s,border-color .15s; }
.report-back:hover { background:#f2f5ed; border-color:#bfcbbf; }
.financial-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.financial-kpis article { min-width:0; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 8px 30px rgba(23,33,28,.035); }
.financial-kpis span,.financial-kpis small { display:block; color:var(--muted); }
.financial-kpis span { font-size:.78rem; font-weight:750; letter-spacing:.03em; }
.financial-kpis strong { display:block; margin:10px 0 5px; font-size:clamp(1.45rem,2.5vw,2.1rem); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.financial-kpis small { font-size:.72rem; }
.financial-kpis .warning { border-color:#e4c9bd; background:#fff9f5; }
.financial-kpis .warning strong { color:#963f30; }
.money-flow { margin-bottom:18px; overflow:hidden; }
.money-flow .panel-title > div p { margin:3px 0 0; color:var(--muted); font-size:.76rem; }
.sankey-scroll { width:100%; overflow-x:auto; padding:14px 0 0; scrollbar-width:thin; }
.sankey { display:block; width:100%; min-width:860px; height:auto; }
.sankey-flows path { fill:none; opacity:.78; stroke-linecap:butt; }
.sankey .neutral-flows path { opacity:.62; }
.sankey text { fill:var(--ink); font:700 12px system-ui,-apple-system,sans-serif; pointer-events:none; }
.sankey .node-value { font-weight:850; font-variant-numeric:tabular-nums; }
.sankey-revenue-node rect { fill:#68706c; }
.sankey-revenue-node text { font-size:13px; }
.sankey-gross-profit-node rect { fill:#4d9a6e; }
.sankey-gross-profit-node text { fill:#17633d; font-size:13px; }
.sankey-right-nodes .profit-label { fill:#17633d; }
.sankey-right-nodes .family-label { fill:#8a6813; }
.sankey-right-nodes .cost-label { fill:#8f3731; }
.sankey-right-nodes text { font-size:12px; }
.sankey-right-nodes .node-value { fill:currentColor; }
.sankey-legend { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.sankey-legend span { min-width:0; padding:9px 10px; border:1px solid var(--line); background:#f8f7f2; color:var(--muted); font-size:.72rem; }
.sankey-legend i { display:inline-block; width:8px; height:8px; margin-right:7px; }
.sankey-legend strong { display:block; margin:3px 0 0 15px; color:var(--ink); font-variant-numeric:tabular-nums; }
.sankey-totals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.sankey-totals span { padding:9px 10px; border-top:2px solid #d9d7d0; color:var(--muted); font-size:.72rem; }
.sankey-totals strong { display:block; margin-top:3px; color:var(--ink); font-size:.82rem; font-variant-numeric:tabular-nums; }
.chart-note { margin:0; padding-top:10px; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.statement-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:18px; margin-bottom:18px; }
.statement-grid > .statement { min-width:0; }
.statement table { width:100%; table-layout:fixed; border-collapse:collapse; margin-top:10px; }
.statement th,.statement td { vertical-align:top; padding:13px 4px; border-bottom:1px solid var(--line); }
.statement th { width:auto; padding-right:22px; text-align:left; font-weight:550; overflow-wrap:anywhere; }
.statement td { width:128px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.statement tr.total th,.statement tr.total td { border-top:2px solid var(--ink); border-bottom:3px double var(--ink); font-weight:850; }
.statement tr.subtotal th,.statement tr.subtotal td { border-top:1px solid var(--ink); font-weight:750; }
.negative { color:#a13b2c; }
.balance-sheet { margin-bottom:18px; }
.balance-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,54px); }
.balance-columns > table { min-width:0; }
.statement caption { text-align:left; color:var(--green); font-weight:800; padding:18px 4px 5px; }
.pending { display:inline-block; color:#795d16; background:#f5e8b8; padding:3px 8px; border-radius:999px; font-size:.75rem; }
.notes-panel ul { margin:16px 0 0; padding-left:20px; color:var(--muted); }
.notes-panel li { margin:8px 0; }
.freshness-panel { margin-top:18px; }
.freshness-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:16px; }
.freshness-grid div { padding:14px; border-radius:12px; background:#f7f5ee; }
.freshness-grid span { display:block; color:var(--muted); font-size:.78rem; margin-top:4px; }
@media (max-width:800px) { .kpi-grid,.columns,.integration-grid,.product-grid { grid-template-columns:1fr; } .hero { align-items:start; flex-direction:column; } .brand span { display:none; } }
@media (max-width:900px) { .financial-kpis { grid-template-columns:1fr 1fr; } }
@media (max-width:800px) { .statement-grid,.balance-columns,.freshness-grid { grid-template-columns:1fr; } .sankey-legend,.sankey-totals { grid-template-columns:1fr 1fr; } .account > span { display:none; } .financial-header { align-items:flex-start; flex-direction:column; padding:20px; } .financial-heading p span { display:block; margin:4px 0 0; padding:0; border:0; } }
@media (max-width:520px) { .financial-kpis { grid-template-columns:1fr; } .statement td { width:105px; } .statement th { padding-right:10px; } }