:root {
  --green:#009c68;
  --dark:#0e1729;
  --border:#d4dbe5;
  --muted:#52657e;
  --paper:#fff;
  --bg:#f7f8fa;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:#10213a; font-family:Arial,Helvetica,sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; gap:26px; padding:38px 26px 50px; max-width:1180px; margin:auto; }
.invoice-wrap { flex:1; min-width:0; }
.invoice-paper { background:var(--paper); border:1px solid #d6dce4; box-shadow:2px 2px 0 rgba(0,0,0,.08); padding:24px; min-height:650px; }
.top-grid { display:grid; grid-template-columns:1fr 290px; gap:28px; }
.logo-box { width:150px; height:98px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:#48627f; cursor:pointer; margin-bottom:18px; overflow:hidden; }
.logo-box img { max-width:100%; max-height:100%; display:none; object-fit:contain; }
.field, textarea, select { border:1px solid #cdd6e2; border-radius:5px; background:#fff; color:#10213a; outline:none; }
.field:focus, textarea:focus, select:focus { border-color:#79bfa8; box-shadow:0 0 0 2px rgba(0,156,104,.08); }
.field { height:44px; padding:0 10px; width:100%; }
.from-field { max-width:278px; margin-bottom:20px; }
label { display:block; font-size:12px; margin:0 0 7px 9px; color:#193352; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.invoice-meta h1 { text-align:right; margin:3px 0 8px; font-size:34px; letter-spacing:.5px; }
.invoice-no { width:128px; display:block; margin:0 0 37px auto; }
.meta-row { display:grid; grid-template-columns:120px 125px; justify-content:end; align-items:center; gap:10px; margin:4px 0; font-size:12px; }
.meta-row .field { height:29px; padding:0 7px; }
.items-header { display:grid; grid-template-columns:minmax(0,1fr) 68px 90px 90px; gap:4px; background:var(--dark); color:white; padding:8px 10px; margin-top:20px; border-radius:5px; font-size:11px; font-weight:bold; }
.item-row { display:grid; grid-template-columns:minmax(0,1fr) 68px 90px 90px; gap:4px; align-items:center; margin-top:5px; }
.item-row input { height:30px; padding:0 9px; border:1px solid #cdd6e2; border-radius:4px; min-width:0; }
.item-row .amount { font-size:11px; padding-left:8px; white-space:nowrap; }
.remove-line { border:0; background:none; color:#b33; font-size:13px; }
.add-line { width:100%; height:28px; border:0; background:#f0f1f4; color:#153452; border-radius:5px; margin-top:5px; }
.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
textarea { width:100%; min-height:46px; resize:vertical; padding:10px; margin-bottom:22px; font-size:11px; }
.totals { padding-left:0; }
.total-row { min-height:39px; display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.total-row strong { font-weight:500; }
.tax-control { display:flex; width:110px; border:1px solid #cdd6e2; border-radius:5px; height:30px; align-items:center; overflow:hidden; }
.tax-control input { width:70px; height:100%; border:0; text-align:right; padding-right:6px; outline:0; }
.tax-control span { padding-right:7px; }
.adjustments { display:flex; gap:18px; margin:0 0 8px; }
.adjustments button,.save-default { border:0; background:none; color:var(--green); font-size:12px; padding:0; }
.adjustment-box { display:flex; justify-content:space-between; align-items:center; margin:5px 0; font-size:12px; }
.adjustment-box input { width:110px; height:30px; border:1px solid #cdd6e2; border-radius:5px; text-align:right; padding:0 8px; }
.hidden { display:none; }
.grand { border-top:1px solid #ccd4df; border-bottom:1px solid #ccd4df; font-weight:bold; }
.grand strong,.balance-row strong { font-size:14px; }
.paid-control { display:flex; border:1px solid #cdd6e2; border-radius:5px; height:30px; align-items:center; overflow:hidden; }
.paid-control span { padding:0 7px; font-size:11px; }
.paid-control input { border:0; width:85px; height:100%; text-align:right; padding:0 8px; outline:0; }
.balance-row { display:flex; justify-content:space-between; align-items:center; padding-top:14px; font-weight:bold; font-size:15px; }
.sidebar { width:146px; flex:0 0 146px; }
.save-btn { width:146px; height:34px; background:var(--green); border:0; border-radius:5px; color:white; font-size:11px; font-weight:bold; }
.download-link { display:block; border:0; background:none; color:var(--green); font-size:11px; margin:13px auto 35px; }
.settings-card { background:white; border-radius:10px; padding:10px; box-shadow:0 6px 20px rgba(0,0,0,.07); }
.settings-title { background:#f4f6f8; padding:8px 6px; font-size:11px; margin-bottom:18px; display:flex; justify-content:space-between; }
.settings-card label { margin-left:0; margin-top:12px; }
.settings-card select { width:100%; height:34px; font-size:11px; padding:0 8px; }
.settings-card hr { border:0; border-top:1px solid #e0e4e9; margin:14px 0 22px; }
.save-default { display:block; margin:auto; }
body.modern .items-header { background:#183b56; }
body.modern .invoice-paper { border-top:5px solid var(--green); }
body.minimal .items-header { background:#333; }
body.minimal .invoice-paper { box-shadow:none; }
@media (max-width:900px) {
  .app-shell { flex-direction:column; padding:15px; }
  .sidebar { width:100%; display:flex; align-items:flex-start; gap:15px; }
  .settings-card { width:180px; }
}
@media (max-width:650px) {
  .top-grid,.bottom-grid { grid-template-columns:1fr; }
  .invoice-meta h1 { text-align:left; }
  .invoice-no { margin-left:0; }
  .meta-row { justify-content:start; }
  .two-col { grid-template-columns:1fr; }
  .items-header { grid-template-columns:minmax(0,1fr) 55px 75px 75px; }
  .item-row { grid-template-columns:minmax(0,1fr) 55px 75px 75px; }
}