:root {
  --bg: #0f1117;
  --panel: #151823;
  --card: #1a1d28;
  --card-2: #202434;
  --border: #2a2d42;
  --text: #e1e3ec;
  --muted: #8890a8;
  --faint: #5f667d;
  --accent: #f59e0b;
  --accent-2: #fbbf24;
  --danger: #ef4444;
  --success: #22c55e;
  --info: #60a5fa;
  --shadow: 0 18px 50px rgba(0,0,0,.32);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(245,158,11,.12), transparent 32rem), radial-gradient(circle at 85% 15%, rgba(96,165,250,.08), transparent 28rem), var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { border-right: 1px solid var(--border); background: rgba(12,14,21,.82); backdrop-filter: blur(14px); padding: 24px 18px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.logo-mark { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #7c2d12); display: grid; place-items: center; color: #111827; font-weight: 950; box-shadow: 0 10px 28px rgba(245,158,11,.25); }
.brand h1 { font-size: 18px; margin: 0; letter-spacing: -.02em; }
.brand p { color: var(--muted); margin: 2px 0 0; font-size: 12px; }
.nav { display: grid; gap: 8px; }
.nav button { width: 100%; text-align: left; border: 1px solid transparent; color: var(--muted); background: transparent; border-radius: 12px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; }
.nav button.active, .nav button:hover { color: var(--text); background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.24); }
.nav small { color: var(--faint); }
.sidebar-card { margin-top: 24px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(26,29,40,.92), rgba(18,20,30,.92)); }
.sidebar-card strong { display: block; font-size: 13px; margin-bottom: 6px; }
.sidebar-card p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; }
main { padding: 26px; overflow-x: auto; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap: 18px; margin-bottom: 22px; }
.eyebrow { color: var(--accent-2); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; margin: 0 0 7px; }
h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.04em; }
.subhead { color: var(--muted); margin: 9px 0 0; max-width: 780px; line-height: 1.5; }
.actions { display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.btn { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 12px; padding: 10px 13px; font-weight: 750; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #d97706); color: #111827; border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.success { background: rgba(34,197,94,.11); border-color: rgba(34,197,94,.35); color: #bbf7d0; }
.grid { display:grid; gap: 16px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.card { border: 1px solid var(--border); background: rgba(26,29,40,.9); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing:.08em; font-weight: 800; }
.stat-value { font-size: 28px; font-weight: 900; margin-top: 8px; letter-spacing: -.04em; }
.stat-note { color: var(--muted); font-size: 12px; margin-top: 7px; }
.two-col { grid-template-columns: 1.1fr .9fr; align-items:start; }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-title { display:flex; justify-content:space-between; align-items:center; gap: 12px; margin-bottom: 14px; }
.section-title h3 { margin:0; font-size: 17px; }
.section-title p { margin:4px 0 0; color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align:left; border-bottom:1px solid var(--border); padding: 11px 8px; font-size: 13px; vertical-align: middle; }
th { color: var(--muted); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; }
tr:last-child td { border-bottom: 0; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--border); padding: 5px 9px; color: var(--muted); font-size: 12px; font-weight: 800; }
.pill.green { color:#bbf7d0; border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.1); }
.pill.amber { color:#fde68a; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.1); }
.pill.blue { color:#bfdbfe; border-color:rgba(96,165,250,.35); background:rgba(96,165,250,.1); }
.pill.red { color:#fecaca; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.1); }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
label { display:grid; gap:7px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform:uppercase; letter-spacing:.06em; }
input, select, textarea { width: 100%; border: 1px solid var(--border); background: #11141e; color: var(--text); border-radius: 12px; padding: 10px 11px; outline: none; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(245,158,11,.7); box-shadow:0 0 0 3px rgba(245,158,11,.11); }
.btn:focus-visible, .nav button:focus-visible { outline: 3px solid rgba(245,158,11,.55); outline-offset: 2px; }
.full { grid-column: 1 / -1; }
.upload-zone { border: 1px dashed rgba(245,158,11,.55); border-radius: 16px; padding: 18px; background: rgba(245,158,11,.07); display:grid; gap: 10px; min-height: 140px; }
.upload-preview { display:flex; align-items:center; gap: 12px; }
.preview-box { width: 78px; height: 78px; border-radius: 14px; background:#0c0f17; border:1px solid var(--border); display:grid; place-items:center; overflow:hidden; color: var(--muted); font-size: 11px; text-align:center; }
.preview-box img { width: 100%; height: 100%; object-fit: contain; background: white; }
.money { color: #bbf7d0; font-weight: 900; }
.cost { color: #fcd34d; font-weight: 900; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.view { display:none; }
.view.active { display:block; }
.quote-layout { grid-template-columns: 1.15fr .85fr; align-items:start; }
.summary-line { display:flex; justify-content:space-between; gap: 12px; padding: 10px 0; border-bottom:1px solid var(--border); }
.summary-line:last-child { border-bottom:0; }
.summary-line strong { font-size: 22px; }
.margin-good { color:#86efac; }
.kanban { display:grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap: 14px; overflow-x:auto; padding-bottom: 4px; }
.lane { border:1px solid var(--border); border-radius: 16px; background:rgba(15,17,23,.62); padding: 12px; min-height: 230px; }
.lane h4 { margin: 0 0 12px; color: var(--muted); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; }
.job-card { border:1px solid var(--border); border-radius: 14px; background: var(--card); padding: 12px; margin-bottom: 10px; }
.job-card strong { display:block; margin-bottom: 4px; }
.split-line { display:flex; justify-content:space-between; gap: 10px; }
.report-bar { height: 10px; border-radius:999px; background:#11141e; overflow:hidden; margin-top: 8px; }
.report-bar span { display:block; height:100%; background: linear-gradient(90deg, var(--accent), var(--info)); }
.notice { border:1px solid rgba(96,165,250,.35); background:rgba(96,165,250,.08); color:#bfdbfe; border-radius: 16px; padding: 13px; }
@media (max-width: 980px) { .app { grid-template-columns: 1fr; } .sidebar { position:relative; height:auto; } .stats, .two-col, .three-col, .quote-layout { grid-template-columns: 1fr; } .topbar { display:grid; } .actions { justify-content:flex-start; } }
@media print {
  body { background: white; color: #111827; }
  .sidebar, .topbar, .actions, .btn, .nav, .notice, .billing-card, #invoice > .card:not(.invoice-doc), #invoice > .grid > .card:not(.invoice-doc) { display: none !important; }
  .app { display: block; min-height: auto; }
  main { padding: 0; overflow: visible; }
  .view { display: none !important; }
  #invoice.view { display: block !important; }
  #invoice.view > .grid { display: block; }
  .invoice-doc { display: block !important; }
  .card { box-shadow: none; border-color: #d1d5db; background: white; color: #111827; }
  .muted, .small { color: #4b5563; }
  th, td, .summary-line { border-color: #d1d5db; }
  .money, .cost, .margin-good { color: #111827; }
}
.invoice-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; border-bottom:1px solid var(--border); padding-bottom:16px; margin-bottom:16px; }
.invoice-header h3 { margin:10px 0 2px; font-size:24px; }
.invoice-meta { text-align:right; display:grid; gap:6px; justify-items:end; }
.invoice-parties { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(15,17,23,.45); }
.invoice-table th, .invoice-table td { font-size:13px; }
.invoice-total { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding:16px; border-radius:14px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.25); }
.invoice-total span { color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }
.invoice-total strong { font-size:30px; color:#bbf7d0; }
.invoice-terms { margin-top:14px; color:var(--muted); font-size:12px; line-height:1.45; }
.print-logo { width:38px; height:38px; }
@media print {
  .invoice-doc { border:0; padding:0; }
  .invoice-header, .invoice-parties, .invoice-total { border-color:#d1d5db; background:white; }
  .invoice-total strong { color:#111827; }
  .invoice-terms { color:#374151; }
  .print-logo { color:#111827; box-shadow:none; }
}
.pricing-card.recommended { border-color: rgba(245,158,11,.65); box-shadow: 0 18px 60px rgba(245,158,11,.12); }
.price { display:flex; align-items:baseline; gap:8px; margin:16px 0; }
.price strong { font-size:44px; letter-spacing:-.05em; }
.price span { color:var(--muted); font-weight:800; }
.plan-list { margin:0 0 18px; padding-left:18px; color:var(--muted); line-height:1.8; }
.plan-list li::marker { color:var(--accent); }