:root{ --bg:#f4f6f8; --card:#ffffff; --text:#0f172a; --muted:#6b7280; --brand:#111827; --accent:#0ea5e9; }
:root.dark{ --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --brand:#e5e7eb; --accent:#38bdf8; }
*{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
a{ color:var(--accent); text-decoration:none } .container{ max-width:1100px; margin:0 auto; padding:16px; }
.topbar{ position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,.6); border-bottom:1px solid #e5e7eb; }
:root.dark .topbar{ background:rgba(15,23,42,.6); border-color:#1f2937 } .topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; gap:8px; }
.brand{ font-weight:800; }
.btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:12px; background:var(--brand); color:white; border:none; cursor:pointer; font-weight:600 }
.btn.secondary{ background:#334155 } .btn.danger{ background:#dc2626 } .btn.ghost{ background:transparent; color:var(--text); border:1px solid #cbd5e1 }
.input, select, textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #cbd5e1; background:var(--card); color:var(--text) }
.card{ background:var(--card); border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:16px }
.grid{ display:grid; gap:16px } .grid-2{ grid-template-columns:1fr 1fr } .grid-3{ grid-template-columns:repeat(3,1fr) }
.table{ width:100%; border-collapse:collapse; font-size:14px } .table th,.table td{ padding:10px; border-bottom:1px solid #e5e7eb; vertical-align:top }
:root.dark .table th,:root.dark .table td{ border-color:#334155 } .badge{ padding:2px 8px; border-radius:999px; font-size:12px; background:#e5e7eb; color:#111827 }
:root.dark .badge{ background:#1f2937; color:#e5e7eb }
.flex{ display:flex; gap:8px; align-items:center } .flex-wrap{ flex-wrap:wrap } .flex-between{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.center{ display:grid; place-items:center; min-height:60vh } .mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mt-4{ margin-top:16px } .mb-2{ margin-bottom:8px }
.invoice{ max-width:800px; margin:0 auto; background:white; color:#111827; padding:24px; border-radius:12px }
.print-hide{ display:block } @media print { .print-hide{ display:none } body{ background:white } .invoice{ box-shadow:none } }
.logo{ height:48px } .toggle{ background:#111827; color:white; padding:8px 10px; border-radius:10px; border:none; cursor:pointer }
@media (max-width: 860px){ .container{ padding:12px } .topbar-inner{ flex-wrap:wrap } .grid-2, .grid-3{ grid-template-columns:1fr } .table{ font-size:13px } .btn{ padding:9px 12px; border-radius:10px } }