:root {
  --bg: #f6f6f2;
  --surface: #ffffff;
  --surface-2: #f0f1ec;
  --ink: #18211d;
  --muted: #65706a;
  --line: #dfe3de;
  --brand: #153e35;
  --brand-2: #276756;
  --accent: #d59c53;
  --danger: #a23b3b;
  --success: #1f7a55;
  --shadow: 0 18px 50px rgba(23, 39, 32, .09);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246,246,242,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(223,227,222,.8);
}
.topbar-inner { min-height: 72px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.04em; }
.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--brand); color:#fff; }
.brand small { color:var(--muted); font-weight:600; letter-spacing:0; display:block; }
.hero { padding: 68px 0 34px; }
.eyebrow { color:var(--brand-2); font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.15rem,5vw,4.25rem); line-height:1.02; letter-spacing:-.045em; max-width:860px; margin-bottom:18px; }
h2 { font-size:clamp(1.5rem,2.5vw,2.25rem); letter-spacing:-.025em; }
.lead { font-size:clamp(1rem,1.6vw,1.2rem); color:var(--muted); max-width:760px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.form-card { padding: clamp(20px,4vw,38px); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.full { grid-column:1 / -1; }
.field label { display:block; font-size:.88rem; font-weight:750; margin-bottom:7px; }
.field .hint { color:var(--muted); font-size:.79rem; margin-top:6px; }
input, textarea, select {
  width:100%; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:12px; padding:12px 14px; outline:none; transition:.2s border,.2s box-shadow;
}
textarea { resize:vertical; min-height:110px; }
input:focus, textarea:focus, select:focus { border-color:var(--brand-2); box-shadow:0 0 0 4px rgba(39,103,86,.1); }
.section { padding:24px 0 56px; }
.section-title { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:18px; }
.stepper { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 28px; padding:0; list-style:none; }
.stepper li { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface); font-size:.82rem; font-weight:700; }
.stepper li.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.form-step { display:none; }
.form-step.active { display:block; }
.actions { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:28px; }
.btn { border:0; border-radius:12px; padding:12px 17px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-2); }
.btn-secondary { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
.btn-danger { background:#fff0f0; color:var(--danger); }
.btn-sm { padding:8px 11px; font-size:.82rem; }
.notice { border-radius:14px; padding:14px 16px; margin-bottom:20px; border:1px solid var(--line); background:var(--surface-2); }
.notice.error { background:#fff0f0; border-color:#edcaca; color:#7d2c2c; }
.notice.success { background:#edf8f2; border-color:#c8e8d7; color:#18583e; }
.summary-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.summary-box { padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.summary-box span { display:block; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.summary-box strong { display:block; margin-top:4px; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:28px 16px; }
.login-card { width:min(440px,100%); padding:30px; }
.login-card h1 { font-size:2rem; }
.dashboard { padding:30px 0 70px; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .grow { flex:1 1 260px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }
.stat { padding:18px; }
.stat small { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.stat strong { display:block; font-size:1.8rem; margin-top:4px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:880px; }
th, td { text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
tr.client-row:hover { background:#fafbf8; }
.status { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:.75rem; font-weight:800; background:var(--surface-2); }
.status.paid, .status.submitted, .status.approved, .status.completed, .status.reviewed { background:#e7f5ed; color:#176243; }
.status.pending, .status.not_sent, .status.sent, .status.scheduled { background:#fff5df; color:#7a541c; }
.status.cancelled, .status.refunded, .status.no_show { background:#feecec; color:#8a3030; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(14,24,20,.48); z-index:40; }
.drawer { position:fixed; right:0; top:0; bottom:0; width:min(680px,100%); background:var(--surface); z-index:50; overflow:auto; box-shadow:-20px 0 60px rgba(0,0,0,.18); }
.drawer-head { position:sticky; top:0; z-index:2; padding:20px; display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.drawer-body { padding:22px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail { padding:13px; border:1px solid var(--line); border-radius:12px; background:#fafbf8; }
.detail span { display:block; color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.detail strong, .detail p { display:block; margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.divider { height:1px; background:var(--line); margin:24px 0; }
.modal-backdrop { position:fixed; inset:0; background:rgba(14,24,20,.48); z-index:60; display:grid; place-items:center; padding:18px; }
.modal { width:min(640px,100%); max-height:90vh; overflow:auto; background:var(--surface); border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.22); padding:24px; }
.copy-box { display:flex; gap:8px; align-items:center; }
.copy-box input { flex:1; }
.empty { padding:48px 20px; text-align:center; color:var(--muted); }
footer { padding:34px 0 50px; color:var(--muted); font-size:.86rem; }
@media (max-width:860px) {
  .grid, .grid-3, .detail-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .summary-strip { grid-template-columns:1fr; }
  .full { grid-column:auto; }
}
@media (max-width:560px) {
  .shell { width:min(100% - 22px,1180px); }
  .topbar-inner { min-height:62px; }
  .hero { padding-top:44px; }
  .stats { grid-template-columns:1fr; }
  .actions { align-items:stretch; }
  .actions .btn { flex:1; }
}