:root {
  --ink: #17332f;
  --muted: #75817e;
  --line: #dfe7e4;
  --paper: #fff;
  --canvas: #f3f6f4;
  --green: #174b43;
  --green-2: #296a5f;
  --mint: #d9ebe5;
  --cream: #fff8ec;
  --gold: #c7953e;
  --danger: #c44f4f;
  --shadow: 0 24px 70px rgba(27, 55, 49, .11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: "IBM Plex Sans Arabic", "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[dir="ltr"] body { font-family: "Manrope", "IBM Plex Sans Arabic", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.ambient { position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; opacity: .65; z-index: -1; }
.ambient-one { width: 460px; height: 460px; top: 110px; right: -240px; background: radial-gradient(circle, #d7ebe4, transparent 70%); }
.ambient-two { width: 600px; height: 600px; top: 700px; left: -380px; background: radial-gradient(circle, #f5e8cf, transparent 70%); }

.topbar {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: auto;
  padding: 0 38px;
  border-bottom: 1px solid rgba(23, 51, 47, .08);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px;
  color: white; background: var(--green); font-size: 25px; font-weight: 700; box-shadow: 0 8px 18px rgba(23,75,67,.22);
}
.brand strong, .brand small { display: block; line-height: 1.25; }
.brand strong { font-size: 19px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.icon-button, .language-button {
  border: 1px solid var(--line); background: rgba(255,255,255,.78); color: var(--ink);
  height: 42px; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
}
.icon-button b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--mint); font-size: 11px; }
.button-icon { font-size: 20px; }
.language-button { direction: rtl; font-size: 12px; font-weight: 700; }
.language-button i { display: block; width: 28px; height: 16px; border-radius: 10px; background: var(--green); position: relative; }
.language-button i::after { content:""; position:absolute; width: 10px; height:10px; border-radius:50%; background:white; top:3px; right:3px; transition:.25s; }
html[dir="ltr"] .language-button i::after { right: 15px; }

.shell { max-width: 1440px; margin: auto; padding: 0 38px 70px; }
.hero { min-height: 285px; display: flex; align-items: center; justify-content: space-between; padding: 42px 4.5% 32px; }
.eyebrow, .step-label { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { margin: 10px 0 13px; font-size: clamp(40px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -.045em; }
.hero h1 em { color: var(--green-2); font-style: normal; }
.hero p { margin: 0; max-width: 570px; color: var(--muted); font-size: 16px; }
.hero-stat {
  min-width: 210px; padding: 26px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(223,237,232,.8)); box-shadow: 0 16px 40px rgba(30,66,58,.08);
}
.hero-stat span { display: grid; place-items:center; width: 50px; height: 50px; border-radius: 15px; background: var(--green); color:white; font-weight:700; font-size: 13px; margin-bottom: 16px; }
.hero-stat strong, .hero-stat small { display:block; }
.hero-stat strong { font-size: 15px; }
.hero-stat small { color: var(--muted); margin-top:4px; font-size: 11px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 26px; align-items: start; }
.form-panel, .preview-panel {
  border: 1px solid rgba(219,229,225,.9); border-radius: 26px; background: rgba(255,255,255,.9); box-shadow: var(--shadow);
  min-width: 0;
}
.form-panel { padding: 30px; }
.form-toolbar { display:flex; justify-content:space-between; align-items:center; padding-bottom:23px; }
.form-toolbar h2, .modal-card h2 { margin:3px 0 0; font-size: 28px; letter-spacing: -.02em; }
.save-status { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.save-status > span:first-child, .live-dot { width:7px; height:7px; border-radius:50%; background:#54a889; box-shadow: 0 0 0 5px rgba(84,168,137,.11); }
.save-status.saving > span:first-child { background: var(--gold); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.35; } }

.section-card { border-top:1px solid var(--line); padding: 27px 0 29px; }
.section-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:21px; }
.section-number { display:grid; place-items:center; min-width:35px; height:35px; border-radius:11px; background:var(--mint); color:var(--green); font:700 10px "Manrope",sans-serif; }
.section-heading h3 { margin:0; font-size:17px; }
.section-heading p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px 16px; }
.span-2 { grid-column: span 2; }
.field { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; color:#354b47; }
.field small { color:#99a5a2; font-weight:400; margin-inline-start:4px; }
input, textarea {
  width:100%; border:1px solid var(--line); border-radius:11px; background:#fbfcfc; color:var(--ink);
  padding:11px 13px; outline:none; transition:.2s; font-size:13px;
}
input { height:43px; }
textarea { resize:vertical; min-height:78px; }
input:focus, textarea:focus { border-color:#6a9e92; box-shadow:0 0 0 3px rgba(67,126,113,.1); background:white; }
input::placeholder, textarea::placeholder { color:#afb9b7; }
.input-suffix { position:relative; }
.input-suffix input { padding-inline-end:35px; }
.input-suffix b { position:absolute; inset-inline-end:13px; top:12px; color:var(--muted); }
.choice-field { margin:0; padding:0; border:0; display:flex; gap:9px; flex-wrap:wrap; }
.choice-field legend { width:100%; margin-bottom:7px; color:#354b47; font-size:12px; font-weight:600; }
.choice-field label { flex:1; min-width:80px; }
.choice-field input { position:absolute; opacity:0; pointer-events:none; }
.choice-field label span {
  display:flex; align-items:center; justify-content:center; height:43px; padding:0 12px;
  border:1px solid var(--line); border-radius:11px; background:#fbfcfc; font-size:12px; color:var(--muted); transition:.2s;
}
.choice-field input:checked + span { color:var(--green); border-color:#78a79c; background:#edf6f3; font-weight:700; box-shadow:inset 0 0 0 1px #a9c9c1; }
.text-button { border:0; background:transparent; color:var(--green-2); padding:15px 0 0; display:flex; gap:6px; font-size:11px; font-weight:700; }
.items-heading { justify-content:space-between; align-items:center; }
.heading-copy { display:flex; gap:12px; align-items:flex-start; }
.add-button { border:0; border-radius:10px; height:38px; padding:0 13px; display:flex; align-items:center; gap:5px; background:var(--green); color:white; font-size:11px; font-weight:700; }
.items-list { display:flex; flex-direction:column; gap:12px; }
.item-row {
  position:relative; display:grid; grid-template-columns:minmax(0,2fr) minmax(64px,.65fr) minmax(78px,.8fr) minmax(78px,.8fr) 30px; gap:9px; align-items:end;
  padding:15px; border:1px solid var(--line); border-radius:14px; background:#fbfcfc;
}
.item-row .field { font-size:10px; }
.item-total { height:43px; display:flex; align-items:center; padding:0 8px; color:var(--green); font:700 11px "Manrope",sans-serif; white-space:nowrap; }
.remove-item { width:30px; height:30px; margin-bottom:6px; border:0; border-radius:9px; background:#fff0f0; color:var(--danger); font-size:17px; }
.form-actions { display:flex; gap:12px; justify-content:space-between; padding-top:23px; border-top:1px solid var(--line); }
.primary-button, .secondary-button, .download-button {
  border:0; min-height:50px; border-radius:13px; padding:0 19px; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:12px;
}
.primary-button { flex:1; color:white; background:linear-gradient(135deg,var(--green),#22665b); box-shadow:0 12px 22px rgba(23,75,67,.18); }
.secondary-button { color:var(--green); background:#edf3f1; }

.preview-panel { position:sticky; top:20px; padding:22px; background:#e8eeeb; overflow:hidden; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; color:#546763; font-size:11px; font-weight:600; }
.preview-toolbar > div { display:flex; align-items:center; gap:9px; }
.preview-toolbar button { border:0; background:rgba(255,255,255,.8); color:var(--green); border-radius:8px; width:31px; height:31px; }
.paper-wrap { background:#dce5e1; border-radius:15px; padding:20px; max-height:740px; overflow:auto; scrollbar-width:thin; }
.invoice-paper {
  width:100%; aspect-ratio: 210 / 297; min-height:620px; background:white; color:#27332f;
  box-shadow:0 12px 30px rgba(30,56,50,.13); padding:7.5%; font-family:"Manrope","IBM Plex Sans Arabic",sans-serif; font-size:clamp(6px,.58vw,9px);
}
.download-button { width:100%; margin-top:17px; color:white; background:var(--green); justify-content:flex-start; padding:11px 17px; }
.download-button .download-icon { display:grid; place-items:center; width:33px; height:33px; border-radius:9px; background:rgba(255,255,255,.13); font-size:20px; }
.download-button span:nth-child(2) { text-align:start; }
.download-button strong, .download-button small { display:block; }
.download-button small { color:#bcd2cc; font-size:9px; font-weight:400; margin-top:2px; }
.download-button.loading { opacity:.65; pointer-events:none; }

/* Invoice */
.inv-head { display:flex; justify-content:space-between; gap:20px; }
.inv-company { max-width:58%; line-height:1.55; color:#53605d; }
.inv-company strong { display:block; color:#1f2b28; font-size:1.45em; line-height:1.25; margin-bottom:5px; text-transform:uppercase; }
.inv-title { text-align:end; }
.inv-title h2 { margin:0; font-size:3.8em; line-height:1; font-weight:500; color:#111; letter-spacing:-.055em; }
.inv-title p { margin:8px 0 0; font-weight:700; }
.inv-balance { margin-top:24px; }
.inv-balance span, .inv-balance b { display:block; }
.inv-balance b { font-size:1.45em; margin-top:2px; }
.inv-meta { margin-top:14%; display:grid; grid-template-columns:1fr 1.1fr; gap:25px; }
.bill-to span { color:#798581; }
.bill-to strong { display:block; margin-top:4px; font-size:1.25em; text-transform:uppercase; }
.meta-lines div { display:grid; grid-template-columns:1fr 1fr; padding:3px 0; }
.meta-lines span:first-child { color:#52605d; font-weight:600; }
.meta-lines span:last-child { text-align:end; }
.inv-table { width:100%; border-collapse:collapse; margin-top:26px; }
.inv-table th { background:#2d3532; color:#fff; text-align:start; padding:8px 9px; font-weight:600; }
.inv-table td { padding:8px 9px; border-bottom:1px solid #d8dddb; }
.inv-table th:not(:nth-child(2)), .inv-table td:not(:nth-child(2)) { text-align:center; }
.inv-table th:last-child, .inv-table td:last-child { text-align:end; }
.inv-summary { width:46%; margin-inline-start:auto; margin-top:7px; }
.inv-summary div { display:flex; justify-content:space-between; padding:6px 10px; }
.inv-summary .total { font-weight:700; font-size:1.12em; padding-top:9px; border-top:1px solid #e3e6e5; }
.inv-summary .balance { background:#f4f5f4; font-weight:700; }
.inv-summary .tax { color:#51605c; }
.inv-notes { margin-top:10%; }
.inv-notes section { margin-top:22px; }
.inv-notes h4 { margin:0 0 6px; font-size:1.08em; font-weight:500; }
.inv-notes p { margin:0; color:#596661; white-space:pre-wrap; line-height:1.6; }
.inv-bank { margin-top:8%; padding:12px 14px; background:#f5f8f7; border-inline-start:3px solid #2b665b; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.inv-bank span, .inv-bank strong { display:block; }
.inv-bank span { color:#7b8784; font-size:.85em; }
.inv-bank strong { margin-top:3px; font-size:.9em; overflow-wrap:anywhere; }
.inv-footer { margin-top:7%; padding-top:10px; border-top:1px solid #e1e6e4; display:flex; justify-content:space-between; color:#87918f; }

.modal { position:fixed; inset:0; z-index:50; display:none; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(13,31,27,.5); backdrop-filter:blur(5px); }
.modal-card { position:absolute; top:0; bottom:0; inset-inline-end:0; width:min(520px,92vw); background:#f7f9f8; padding:30px; box-shadow:-20px 0 60px rgba(9,29,24,.2); overflow:auto; }
.modal-card header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:25px; }
.modal-card header button, .close-preview { border:0; background:#e6eeeb; color:var(--ink); width:38px; height:38px; border-radius:12px; font-size:23px; }
.history-list { display:flex; flex-direction:column; gap:11px; }
.history-empty { text-align:center; color:var(--muted); padding:70px 20px; }
.history-entry { border:1px solid var(--line); background:white; border-radius:14px; padding:15px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.history-entry strong, .history-entry small { display:block; }
.history-entry small { color:var(--muted); margin-top:4px; }
.history-entry-actions { display:flex; gap:5px; }
.history-entry-actions button { border:0; border-radius:8px; background:#edf3f1; color:var(--green); padding:7px 9px; font-size:10px; }
.history-entry-actions button.delete { color:var(--danger); background:#fff0f0; }
.preview-modal-card { position:relative; width:min(840px,94vw); height:94vh; margin:3vh auto; background:#dfe7e4; border-radius:20px; padding:28px; overflow:auto; }
.preview-modal-card .invoice-paper { font-size:11px; min-height:auto; }
.close-preview { position:absolute; top:10px; inset-inline-end:10px; z-index:2; }
.toast { position:fixed; z-index:100; bottom:25px; left:50%; transform:translate(-50%,30px); background:#173f38; color:white; border-radius:12px; padding:11px 18px; font-size:12px; opacity:0; pointer-events:none; transition:.3s; box-shadow:0 12px 30px rgba(13,40,34,.2); }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:1050px) {
  .workspace { grid-template-columns:1fr; }
  .preview-panel { position:relative; top:0; }
  .paper-wrap { max-height:none; }
  .invoice-paper { font-size:clamp(7px,1.2vw,11px); }
}
@media (max-width:700px) {
  .topbar { height:72px; padding:0 18px; }
  .brand small, .icon-button > span:not(.button-icon) { display:none; }
  .shell { padding:0 13px 40px; }
  .hero { min-height:230px; padding:32px 5px 25px; }
  .hero h1 { font-size:39px; }
  .hero p { font-size:14px; }
  .hero-stat { display:none; }
  .form-panel, .preview-panel { border-radius:18px; }
  .form-panel { padding:20px 16px; }
  .fields-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:span 1; }
  .item-row { grid-template-columns:1fr 1fr; }
  .item-row .field:first-child { grid-column:span 2; }
  .remove-item { position:absolute; top:9px; inset-inline-end:9px; }
  .form-actions { flex-direction:column-reverse; }
  .paper-wrap { padding:8px; }
  .preview-panel { padding:13px; }
  .invoice-paper { font-size:clamp(5px,1.45vw,8px); padding:6%; }
}

@media print {
  body * { visibility:hidden; }
  #invoicePaper, #invoicePaper * { visibility:visible; }
  #invoicePaper { position:absolute; inset:0; width:210mm; height:297mm; box-shadow:none; }
}