:root { --ink:#17221f; --muted:#73807c; --line:#e5ebe7; --paper:#f7f8f4; --card:#fff; --green:#1c735b; --green-dark:#12503e; --mint:#d8eee4; --amber:#b87925; --red:#bd574a; --shadow:0 18px 48px rgba(23,34,31,.08); }
.danger { color:#fff; background:var(--red); }.danger:hover { background:#963f37; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color:inherit; text-decoration:none; } button, input, select { font:inherit; } button { cursor:pointer; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 12% 5%, #d9eee4 0, transparent 34%), radial-gradient(circle at 90% 88%, #f5e5c9 0, transparent 27%), var(--paper); } .auth-shell { width:min(440px,100%); } .brand-mark { display:flex; align-items:center; gap:12px; margin:0 0 28px 4px; } .brand-mark > span { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--green); color:#fff; font-weight:800; letter-spacing:-1px; } .brand-mark strong, .brand-mark small { display:block; } .brand-mark small { color:var(--muted); margin-top:3px; font-size:12px; }.auth-card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:36px; box-shadow:var(--shadow); } .eyebrow { color:var(--green); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; font-weight:800; } h1 { font-size:34px; line-height:1.08; letter-spacing:-1.4px; margin:12px 0; } h2 { letter-spacing:-.7px; } .muted { color:var(--muted); line-height:1.55; } label { display:block; font-size:13px; font-weight:700; margin:20px 0 8px; } input, select { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px 13px; color:var(--ink); background:#fff; outline:none; } input:focus, select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(28,115,91,.1); }.button { border:0; border-radius:9px; padding:12px 16px; font-weight:800; transition:transform .18s, background .18s; } .button:hover { transform:translateY(-1px); }.primary { color:#fff; background:var(--green); }.primary:hover { background:var(--green-dark); }.secondary { background:var(--mint); color:var(--green-dark); }.full { width:100%; margin-top:24px; display:flex; justify-content:space-between; }.alert { padding:12px 14px; border-radius:9px; margin:18px 0; font-size:13px; }.success { background:#e5f5ec; color:#216147; }.error { background:#fbe9e7; color:#963f37; }.demo-details { border-top:1px solid var(--line); margin-top:24px; padding-top:16px; color:var(--muted); font-size:13px; line-height:1.45; }.demo-details p { margin:8px 0; }.tiny { color:#9aa39f; font-size:11px; line-height:1.5; margin-top:22px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:244px 1fr; }.sidebar { background:#15352c; color:#fff; padding:28px 20px; display:flex; flex-direction:column; }.sidebar .brand-mark { margin:0 8px 60px; }.sidebar .brand-mark > span { background:#d6eee3; color:var(--green-dark); }.sidebar .brand-mark small { color:#98b7ab; }.nav-label { color:#7fa99b; font-size:10px; text-transform:uppercase; font-weight:800; letter-spacing:1.4px; margin:0 12px 12px; }.nav-link { display:flex; gap:12px; align-items:center; padding:12px; border-radius:8px; color:#a9c6bb; font-size:14px; margin:4px 0; }.nav-link.active, .nav-link:hover { color:#fff; background:rgba(255,255,255,.1); }.sidebar-footer { margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding:20px 8px 0; color:#9bb9ae; font-size:12px; }.sidebar-footer strong { color:#fff; display:block; margin-bottom:4px; }.content { min-width:0; }.topbar { height:82px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 5.5%; }.topbar h2 { font-size:18px; margin:0; }.user-menu { display:flex; align-items:center; gap:12px; font-size:13px; }.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#f2d4a2; color:#694715; font-weight:800; }.logout { color:var(--muted); margin-left:16px; }.main { max-width:1180px; margin:0 auto; padding:44px 5.5%; }.welcome { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; }.welcome h1 { font-size:36px; margin:8px 0 0; }.date { color:var(--muted); font-size:13px; }.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px; }.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; }.stat-label { color:var(--muted); font-size:12px; }.stat-value { display:block; font-size:28px; letter-spacing:-1px; font-weight:800; margin-top:12px; }.stat-note { font-size:11px; color:var(--green); margin-top:10px; display:block; }.panel { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.panel-header { padding:20px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.panel-header h2 { font-size:17px; margin:0; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:670px; } th, td { text-align:left; padding:16px 22px; border-bottom:1px solid var(--line); font-size:13px; white-space:nowrap; } th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.7px; background:#fbfcfa; } tbody tr:last-child td { border-bottom:0; }.invoice-main { font-weight:800; }.invoice-sub { color:var(--muted); font-size:11px; margin-top:4px; }.badge { display:inline-block; border-radius:30px; padding:6px 9px; font-size:11px; font-weight:800; }.badge.open { color:#8a5a16; background:#fff0d5; }.badge.paid { color:#216147; background:#e3f4ea; }.badge.overdue { color:#a04239; background:#fbe5e1; }.progress { width:110px; height:6px; background:#edf0ed; border-radius:4px; overflow:hidden; }.progress span { display:block; height:100%; background:var(--green); }.empty { padding:36px; color:var(--muted); text-align:center; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 18px; padding:22px; }.form-grid label { margin-top:0; }.form-grid .wide { grid-column:1/-1; }.form-actions { padding:0 22px 22px; }.section-gap { margin-top:28px; }.payment-form { display:flex; gap:8px; align-items:center; }.payment-form input { width:110px; padding:8px 10px; }.small-button { padding:8px 11px; font-size:12px; }.notice { background:#f8f2e7; color:#795522; padding:12px 15px; border-radius:9px; font-size:12px; margin-bottom:22px; }
@media (max-width:820px) { .app-shell { grid-template-columns:1fr; }.sidebar { padding:14px 18px; flex-direction:row; align-items:center; gap:18px; }.sidebar .brand-mark { margin:0; }.sidebar .brand-mark small, .sidebar .nav-label, .sidebar-footer { display:none; }.sidebar nav { display:flex; gap:3px; }.nav-link { padding:9px; }.nav-link span:last-child { display:none; }.topbar { height:68px; padding:0 18px; }.main { padding:30px 18px; }.stat-grid { grid-template-columns:1fr; }.welcome { align-items:flex-start; flex-direction:column; gap:10px; }.welcome h1 { font-size:30px; }.auth-card { padding:28px 22px; } }
.quick-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }.quick-nav a { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:13px; font-weight:700; color:var(--green-dark); }.quick-nav a:hover { background:var(--mint); border-color:var(--mint); }
.table-toolbar { margin-bottom:12px; }.table-toolbar .table-filter { max-width:320px; }
.invoice-sheet { padding:36px; }.invoice-sheet-header { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:26px; }.invoice-sheet-header h1 { margin:6px 0 0; }.invoice-sheet-total { text-align:right; }.invoice-sheet-total strong { display:block; font-size:26px; margin-top:6px; }.invoice-sheet-details { padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:26px; }.invoice-sheet-details .form-grid { margin-bottom:0; }.invoice-sheet-details .form-actions { margin-top:16px; }.invoice-sheet-items { border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:26px; }.invoice-sheet-items table { width:100%; border-collapse:collapse; }.invoice-sheet-items thead tr { background:var(--paper); }.invoice-sheet-items th { text-align:left; padding:12px 16px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-weight:800; }.invoice-sheet-items tbody tr { border-top:1px solid var(--line); }.invoice-sheet-items tbody tr:hover { background:#fafbf9; }.invoice-sheet-items td { padding:10px 16px; }.invoice-sheet-items input { margin:0; border-color:transparent; background:transparent; padding:8px 10px; }.invoice-sheet-items input:hover { border-color:var(--line); }.invoice-sheet-items input:focus { background:#fff; border-color:var(--green); }.invoice-sheet-items .price-input { max-width:130px; }.invoice-sheet-actions { white-space:nowrap; text-align:right; }.invoice-sheet-add { background:var(--paper); }.invoice-sheet-add input { background:#fff; }.invoice-sheet-summary { display:flex; justify-content:flex-end; margin:26px 0 8px; padding-right:90px; }.invoice-sheet-summary-card { width:min(320px,100%); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:6px 20px; }.invoice-sheet-summary-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; font-size:14px; }.invoice-sheet-summary-row + .invoice-sheet-summary-row { border-top:1px solid var(--line); }.invoice-sheet-summary-row span { color:var(--muted); }.invoice-sheet-summary-row strong { font-size:16px; }.invoice-sheet-summary-row.balance { font-size:15px; }.invoice-sheet-summary-row.balance span { color:var(--ink); font-weight:700; }.invoice-sheet-summary-row.balance strong { font-size:22px; color:var(--green-dark); }