:root{--void:#0B1220;--surface:#121A2E;--raised:#182238;--hairline:#243044;--text:#E8EEF8;--muted:#8B97AD;--cyan:#22D3EE;--violet:#8B5CF6;--amber:#FBBF24;--emerald:#34D399;--rose:#FB7185;--cta:#3B82F6;--radius:16px;--sidebar:240px;--shadow:0 18px 50px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{margin:0;background:var(--void);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}h1,h2,h3{margin:0;letter-spacing:-.03em}
.mkt{min-height:100vh;background:radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.22),transparent 55%),radial-gradient(900px 500px at 0% 100%,rgba(34,211,238,.08),transparent 50%),var(--void)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 48px;border-bottom:1px solid var(--hairline)}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}.mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--violet),var(--cyan))}
.hero{max-width:1100px;margin:0 auto;padding:72px 24px 40px}.hero h1{font-size:64px;line-height:1.02;max-width:16ch}.hero p{color:var(--muted);font-size:18px;max-width:46ch;margin:18px 0 28px}
.row{display:flex;gap:12px;flex-wrap:wrap}.btn{border:0;border-radius:12px;padding:12px 16px;background:var(--cta);color:#fff;font-weight:600;cursor:pointer}.btn.ghost{background:transparent;border:1px solid var(--hairline);color:var(--text)}.btn.violet{background:var(--violet)}
.preview{margin:40px auto 80px;max-width:1180px;background:var(--surface);border:1px solid var(--hairline);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);min-height:420px}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}.card{width:min(440px,100%);background:var(--surface);border:1px solid var(--hairline);border-radius:24px;padding:32px;box-shadow:var(--shadow)}.card h1{font-size:28px;margin:8px 0 6px}.card p{color:var(--muted);margin:0 0 22px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field span{color:var(--muted);font-size:12px}.field input,.field select{background:var(--void);border:1px solid var(--hairline);border-radius:12px;padding:12px 14px;color:var(--text)}.steps{display:flex;gap:8px;margin:0 0 18px}.steps i{flex:1;height:4px;border-radius:99px;background:var(--hairline)}.steps i.on{background:var(--violet)}
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}.rail{border-right:1px solid var(--hairline);padding:20px 14px;background:#0E1626}.rail nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--muted);margin-bottom:4px}.rail nav a.on,.rail nav a:hover{background:var(--raised);color:var(--text)}.rail nav a.on{box-shadow:inset 0 0 0 1px var(--hairline)}
.main{padding:22px 28px 40px}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.top h1{font-size:28px}.search{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:10px 12px;color:var(--text);min-width:240px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.kpi{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px}.kpi b{display:block;font-size:26px;margin:8px 0 4px}.kpi span{color:var(--muted);font-size:12px}.up{color:var(--emerald)}.down{color:var(--rose)}
.grid{display:grid;grid-template-columns:1.5fr .9fr;gap:14px}.panel{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px}.panel h2{font-size:15px;margin-bottom:12px}
.bars{display:flex;flex-direction:column;gap:10px}.bar{display:grid;grid-template-columns:110px 1fr 70px;gap:10px;align-items:center;color:var(--muted);font-size:12px}.bar i{height:8px;border-radius:99px;background:var(--void);overflow:hidden}.bar i em{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;color:var(--muted);font-weight:500;padding:10px 8px;border-bottom:1px solid var(--hairline)}.table td{padding:11px 8px;border-bottom:1px solid #1A2436}.pill{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600}.Paid{background:rgba(52,211,153,.12);color:var(--emerald)}.Due{background:rgba(251,191,36,.12);color:var(--amber)}.Overdue{background:rgba(251,113,133,.12);color:var(--rose)}.Draft{background:rgba(139,151,173,.12);color:var(--muted)}
.filters{display:flex;gap:8px;margin:0 0 14px}.chip{border:1px solid var(--hairline);background:transparent;color:var(--muted);border-radius:999px;padding:6px 10px;cursor:pointer}.chip.on{color:var(--text);background:var(--raised)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#334155,var(--violet))}
.note{color:var(--muted);font-size:12px}
@media(max-width:960px){.app{grid-template-columns:1fr}.rail{display:none}.kpis,.grid{grid-template-columns:1fr}.hero h1{font-size:40px}}