:root { --ink:#172028; --muted:#6a747d; --paper:#fffdf9; --warm:#f5f1ea; --line:#e5dfd5; --accent:#2463b5; --accent-dark:#174786; --gold:#e9b44c; --danger:#a44444; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--warm); font:15px/1.5 "DM Sans",sans-serif; } button,input,select { font:inherit; } button { cursor:pointer; }
.topbar { min-height:74px; padding:0 clamp(20px,5vw,76px); display:flex; align-items:center; justify-content:space-between; background:var(--paper); border-bottom:1px solid var(--line); }.brand { color:var(--ink); text-decoration:none; font-size:20px; font-weight:700; letter-spacing:-.8px; }.brand span:last-child { color:var(--accent); }.brand-mark { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:8px; border-radius:8px; color:white; background:var(--accent); font-family:"Playfair Display",serif; }.topbar-actions { display:flex; gap:9px; }
.button { border:0; border-radius:8px; padding:10px 15px; font-weight:600; transition:.2s ease; }.button:hover { transform:translateY(-1px); }.button-primary { color:#fff; background:var(--accent); box-shadow:0 5px 12px #2463b52b; }.button-primary:hover { background:var(--accent-dark); }.button-ghost { color:var(--ink); background:transparent; border:1px solid var(--line); }.app-shell { max-width:1280px; padding:48px clamp(20px,5vw,76px) 70px; margin:auto; }.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:38px; }.eyebrow { margin:0 0 7px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:1.4px; }.hero h1,h2 { margin:0; letter-spacing:-1.3px; }.hero h1 { font:700 clamp(34px,5vw,55px)/1.06 "Playfair Display",serif; }.hero h1 em { color:var(--accent); font-style:italic; }.hero-copy { max-width:310px; margin:0 0 4px; color:var(--muted); }.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:25px; }.metrics article,.panel { background:var(--paper); border:1px solid var(--line); border-radius:13px; }.metrics article { padding:20px 22px; }.metric-label { display:block; color:var(--muted); font-size:13px; }.metrics strong { display:block; margin:4px 0; font-size:25px; letter-spacing:-1px; }.metrics small { color:var(--muted); font-size:12px; }.content-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr); gap:25px; }.panel { padding:25px; }.panel-heading,.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.panel h2,.dialog h2 { font-size:22px; }.text-button { padding:4px 0; border:0; color:var(--accent); background:none; font-weight:700; }.icon-button,.close-button { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:7px; color:var(--accent); background:#e8f0fb; font-size:21px; }.close-button { color:var(--muted); background:#f1efea; font-size:25px; line-height:1; }.invoice-list,.client-list { margin-top:18px; }.invoice-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:15px; padding:15px 0; border-top:1px solid var(--line); }.invoice-row:first-child,.client-row:first-child { border-top:0; }.invoice-name { margin:0; font-weight:700; }.invoice-meta,.client-email { margin:2px 0 0; color:var(--muted); font-size:13px; }.invoice-amount { font-weight:700; }.status { display:inline-block; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; }.status-paid { color:#2463b5; background:#e3edfb; }.status-pending { color:#9c6514; background:#fff2d8; }.invoice-actions { display:flex; justify-content:flex-end; gap:8px; grid-column:2/4; }.small-button { padding:5px 8px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:white; font-size:12px; font-weight:600; }.small-button:hover { border-color:var(--accent); color:var(--accent); }.client-row { padding:13px 0; border-top:1px solid var(--line); }.client-avatar { float:left; display:grid; place-items:center; width:35px; height:35px; margin:1px 10px 6px 0; border-radius:50%; color:var(--accent); background:#e6effc; font-weight:700; }.client-name { margin:0; font-weight:700; }.empty { padding:32px 6px; color:var(--muted); text-align:center; }.empty strong { display:block; color:var(--ink); }
.dialog { width:min(520px,calc(100% - 28px)); padding:0; border:0; border-radius:14px; box-shadow:0 20px 70px #17202855; }.dialog-wide { width:min(760px,calc(100% - 28px)); }.dialog::backdrop { background:#17202880; }.form-card { padding:28px; }.form-card label { display:grid; gap:6px; margin-top:17px; color:#46515a; font-size:13px; font-weight:600; }.form-card input,.form-card select { width:100%; padding:10px 11px; border:1px solid #d9d4cb; border-radius:7px; outline-color:var(--accent); background:#fff; color:var(--ink); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; }.items-header { display:flex; align-items:center; justify-content:space-between; margin-top:25px; font-weight:700; }.item-row { display:grid; grid-template-columns:minmax(160px,1fr) 70px 100px 90px 28px; gap:8px; align-items:center; margin-top:9px; }.item-row input { margin:0; }.item-line-total { text-align:right; font-weight:700; }.remove-item { width:25px; height:25px; border:0; border-radius:5px; color:var(--danger); background:#faeaea; font-size:19px; }.totals-options { margin-top:14px; }.live-total { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding:14px; border-radius:8px; color:var(--accent-dark); background:#e8f0fb; }.live-total strong { font-size:21px; }
.print-area { display:none; } @media print { body > *:not(.print-area) { display:none !important; }.print-area { display:block !important; }.print-document { color:#172028; font:14px/1.5 Arial,sans-serif; }.print-head { display:flex; justify-content:space-between; border-bottom:2px solid #2463b5; padding-bottom:18px; }.print-head h1 { margin:0; color:#2463b5; font-size:30px; }.print-document h2 { margin:30px 0 8px; font-size:16px; }.print-document table { width:100%; border-collapse:collapse; }.print-document th,.print-document td { padding:10px 6px; text-align:left; border-bottom:1px solid #ddd; }.print-document th:last-child,.print-document td:last-child { text-align:right; }.print-totals { width:270px; margin:25px 0 0 auto; }.print-totals p { display:flex; justify-content:space-between; margin:6px 0; }.print-totals .grand { padding-top:10px; border-top:2px solid #2463b5; font-size:18px; font-weight:700; }.print-status { padding:5px 9px; color:#2463b5; background:#e3edfb; border-radius:12px; font-weight:bold; } }
@media (max-width:720px) { .topbar { min-height:66px; }.topbar-actions .button { padding:8px 10px; font-size:13px; }.app-shell { padding-top:32px; }.hero { display:block; }.hero-copy { margin-top:16px; }.metrics,.content-grid { grid-template-columns:1fr; }.metrics { gap:10px; }.metrics article { padding:15px 18px; }.invoice-row { grid-template-columns:1fr auto; }.invoice-actions { grid-column:1/3; justify-content:flex-start; }.panel { padding:20px; }.form-card { padding:22px; }.form-row { grid-template-columns:1fr; gap:0; }.item-row { grid-template-columns:1fr 62px 86px; }.item-line-total { display:none; }.remove-item { grid-column:3; justify-self:end; }.totals-options { grid-template-columns:1fr 1fr; gap:12px; }.totals-options label { margin-top:0; } }