*{box-sizing:border-box} :root{--ink:#101010;--muted:#656565;--line:#d6d6d6;--soft:#f5f5f5;--paper:#fff}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#f0f1f3}
button,input,select,textarea{font:inherit} button{cursor:pointer}
.sidebar{position:fixed;inset:0 auto 0 0;width:230px;background:#111;color:#fff;padding:22px 14px;z-index:3}
.brand-mini{display:flex;gap:10px;align-items:center;padding:0 6px 22px;border-bottom:1px solid #333;margin-bottom:15px}
.brand-mini img{width:64px;height:50px;object-fit:contain;filter:grayscale(1) brightness(3)}
.brand-mini strong{display:block}.brand-mini small{color:#bbb}
.nav{width:100%;border:0;border-radius:8px;background:transparent;color:#ddd;text-align:left;padding:12px;margin:4px 0}
.nav.active,.nav:hover{background:#fff;color:#111}
.main{margin-left:230px;min-height:100vh}.page{display:none}.page.active{display:block}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;background:#fff;border-bottom:1px solid var(--line)}
.topbar h1{margin:0 0 5px;font-size:24px}.topbar p{margin:0;color:var(--muted)}
.top-actions{display:flex;gap:8px}.btn{border:1px solid #222;background:#fff;color:#111;border-radius:8px;padding:10px 14px}
.btn.dark{background:#111;color:#fff}.btn.small{padding:7px 10px;font-size:13px}.btn.ghost{border-color:#aaa}
.workspace{display:grid;grid-template-columns:minmax(420px,1fr) minmax(520px,1.05fr);gap:18px;padding:18px;align-items:start}
.editor,.preview-wrap{min-width:0}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.card h2{font-size:16px;margin:0 0 14px}.card-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grid{display:grid;gap:12px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}
label{display:block;font-size:12px;font-weight:700;color:#333}input,select,textarea{width:100%;margin-top:6px;border:1px solid #c8c8c8;border-radius:7px;padding:10px;background:#fff}
label small,.muted{font-weight:400;color:var(--muted)}
.period-box{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
.period-box>div{border:1px solid #bbb;background:#fafafa;border-radius:8px;padding:10px}
.period-box span{display:block;font-size:11px;color:#666;margin-bottom:4px}.period-box strong{font-size:13px}
.notice{margin-top:10px;padding:10px;border:1px dashed #777;border-radius:8px;background:#fafafa;font-size:13px}
.item-row,.offer-rule-row,.service-row{display:grid;gap:8px;align-items:center;margin:8px 0}
.item-row{grid-template-columns:2fr .6fr .8fr 40px}.offer-rule-row{grid-template-columns:1.4fr .7fr .7fr .7fr 40px}
.service-row{grid-template-columns:2fr 1fr 40px}.icon-btn{border:1px solid #bbb;background:#fff;border-radius:7px;height:38px;font-size:20px}
.preview-wrap{position:sticky;top:12px}.preview-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700}
.invoice-sheet{background:#fff;border:1px solid #bdbdbd;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:28px;min-height:760px}
.invoice-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #111;padding-bottom:14px}
.company-block{display:flex;gap:14px;align-items:flex-start}.invoice-logo{width:120px;height:72px;object-fit:contain;filter:grayscale(1) contrast(1.5)}
.company-block h2{margin:0 0 5px}.company-block p{margin:3px 0;font-size:12px}.invoice-title{text-align:right}.invoice-title h1{margin:0 0 8px;font-size:28px}
.invoice-no{border:1px solid #111;border-radius:5px;padding:7px 10px;font-weight:700;font-size:12px}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:16px 0}.meta-grid p{font-size:12px;margin:5px 0}
.offer-banner{border:1px dashed #111;padding:10px;margin:0 0 12px;text-align:center}.hidden{display:none}
.invoice-table{width:100%;border-collapse:collapse;font-size:12px}.invoice-table th{background:#111;color:#fff}.invoice-table th,.invoice-table td{border:1px solid #777;padding:8px;text-align:left}.invoice-table th:nth-child(1),.invoice-table td:nth-child(1){width:44px;text-align:center}
.invoice-table th:nth-child(3),.invoice-table th:nth-child(4),.invoice-table th:nth-child(5),.invoice-table td:nth-child(3),.invoice-table td:nth-child(4),.invoice-table td:nth-child(5){text-align:right}
.desc-sub{display:block;font-size:10px;color:#555;margin-top:3px}.free-row td{font-style:italic}
.totals{display:grid;grid-template-columns:1fr 260px;gap:18px;margin-top:12px}.words{border:1px solid #777;padding:10px;font-size:11px;align-self:end}.sum>div{display:flex;justify-content:space-between;padding:6px;border-bottom:1px solid #ddd;font-size:12px}.sum .grand{background:#111;color:#fff;font-size:15px}
.invoice-footer{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid #777;margin-top:20px;padding-top:16px;font-size:11px}.signature{min-width:170px;text-align:center;border-top:1px solid #111;padding-top:5px}
.admin-grid{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.help ul{line-height:1.8}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}.preview-wrap{position:static}.admin-grid{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{position:static;width:auto;display:flex;gap:6px;align-items:center;padding:10px;overflow:auto}.brand-mini{display:none}.nav{width:auto;white-space:nowrap}.main{margin-left:0}.topbar{padding:16px;align-items:flex-start;gap:10px}.workspace{padding:10px}.grid.two,.grid.three,.period-box{grid-template-columns:1fr}.invoice-sheet{padding:16px}.invoice-head,.company-block{flex-direction:column}.invoice-title{text-align:left}.meta-grid{grid-template-columns:1fr}.totals{grid-template-columns:1fr}.admin-grid{padding:10px}.top-actions{flex-direction:column}}
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff}
  .sidebar,.topbar,.editor,.preview-actions,#page-admin,#page-help{display:none!important}
  .main{margin:0}.page{display:block!important}.workspace{display:block;padding:0}.preview-wrap{position:static}
  .invoice-sheet{border:0;box-shadow:none;padding:0;min-height:auto;width:100%;filter:grayscale(1)}
  .invoice-logo{filter:grayscale(1) contrast(2)}
  .invoice-table th,.sum .grand{background:#000!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.signature{min-width:190px;text-align:center;border-top:1px solid #111;padding-top:4px;display:flex;flex-direction:column;align-items:center;gap:3px}
.signature-img{max-width:155px;max-height:58px;object-fit:contain;margin-top:-64px;margin-bottom:2px}
.signature-admin-preview{min-height:80px;border:1px dashed #aaa;border-radius:8px;margin:10px 0;display:flex;align-items:center;justify-content:center;background:#fafafa}
.signature-admin-preview img{max-width:220px;max-height:80px;object-fit:contain}
.pdf-generating .invoice-sheet{box-shadow:none}
.pdf-generating .signature-img{filter:none}
@media print{.signature-img{filter:grayscale(1) contrast(1.35)!important}}

.btn.whatsapp{
  background:#128C3B;
  border-color:#128C3B;
  color:#fff;
  font-weight:700;
}
.full-paid-stamp{
  width:180px;
  margin:18px auto 2px;
  transform:rotate(-8deg);
  color:#168a36;
  font-weight:800;
}
.stamp-ring{
  width:180px;
  height:180px;
  border:5px double #168a36;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  text-align:center;
  letter-spacing:.5px;
}
.stamp-ring:before,.stamp-ring:after{
  content:"★  ★  ★";
  position:absolute;
  left:0;right:0;
  font-size:16px;
}
.stamp-ring:before{top:42px}
.stamp-ring:after{bottom:40px}
.stamp-ring strong{
  border:4px solid #168a36;
  padding:7px 10px;
  font-size:25px;
  line-height:1;
  background:#fff;
}
.stamp-top{font-size:15px;margin-bottom:28px}
.stamp-bottom{font-size:11px;margin-top:28px}
@media print{
  .full-paid-stamp{
    color:#000!important;
    filter:grayscale(1) contrast(1.3);
  }
  .stamp-ring,.stamp-ring strong{border-color:#000!important}
}