:root{
  --accent:#0d6efd; --danger:#d9534f; --bg:#f6f8fa; --text:#222; --muted:#666; --border:#ddd;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app-header{background:#fff;border-bottom:1px solid var(--border);padding:12px 16px;display:flex;gap:16px;align-items:center}
.app-header h1{font-size:1.25rem;margin:0}
nav{display:flex;gap:8px}
.tab-btn{padding:8px 12px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer}
.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
main{max-width:1200px;margin:18px auto;padding:0 16px}
.tab{display:none}
.tab.active{display:block}
fieldset{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:16px;background:#fff}
legend{padding:0 8px;color:var(--muted)}
label{display:flex;flex-direction:column;gap:6px;font-size:0.9rem;margin-bottom:12px}
input,select,button{font:inherit}
input,select{padding:8px;border:1px solid var(--border);border-radius:8px;background:#fff}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.actions{display:flex;gap:10px;margin-top:8px}
button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer}
button:hover{filter:brightness(0.98)}
button.danger{background:#fff;border-color:var(--danger);color:#c00}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:8px;background:#fff}
#cnmt-table{width:100%;border-collapse:collapse}
#cnmt-table th,#cnmt-table td{border-bottom:1px solid var(--border);padding:6px;text-align:left}
#cnmt-table thead th{position:sticky;top:0;background:#f0f3f6}
.remove-row{color:#c00}
.print-area{background:#fff;border:1px solid var(--border);border-radius:12px;min-height:50vh;padding:10mm;display:flex;justify-content:center;align-items:flex-start}
.bill{width:297mm;height:210mm; /* A4 landscape content box */
      padding:8mm;}
.bill *{line-height:1.2}
.bill-header{display:flex;gap:10px;align-items:center;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:6px}
.bill-header img{max-height:24mm}
.bill-title{font-size:1.2rem;font-weight:700}
.bill-company{font-size:1rem;font-weight:600}
.small{color:#555;font-size:0.85rem}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4mm}
.kv{display:flex;gap:6px}
.kv b{min-width:80px}
.bill-table{width:100%;border-collapse:collapse;margin-top:4mm;font-size:0.85rem}
.bill-table th,.bill-table td{border:1px solid #000;padding:2mm}
.totals{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4mm}
.signature{display:flex;justify-content:flex-end;margin-top:8mm}
.ai-assist{margin-top:12px}
.note{color:#777}
.records-controls{display:flex;gap:10px;margin-bottom:8px}
#records-table{width:100%;border-collapse:collapse;background:#fff}
#records-table th,#records-table td{border:1px solid var(--border);padding:6px}
.app-footer{padding:12px 16px;color:#777}