/* Osama Industry app — petrol + teal brand, Cairo for headings, IBM Plex Sans Arabic for text */
:root{
  --deep:#0B3B45; --deep2:#072C33; --teal:#2ABFC1; --teal7:#0B7477; --teal1:#E6F3F3;
  --ink:#111A1C; --body:#24323A; --mut:#5F7074; --line:#D7E4E5; --line2:#E9F0F1; --bg:#F3F7F7; --card:#FFFFFF;
  --ok:#1E8E5A; --okbg:#E3F4EB; --warn:#A86A00; --warnbg:#FFF2D9; --bad:#C0392B; --badbg:#FBE7E4; --info:#0B6E8A; --infobg:#E2F2F7; --gray:#6B7A7E; --graybg:#EEF2F3;
  --r:14px; --r2:10px; --sh:0 1px 2px rgba(11,59,69,.06),0 6px 18px rgba(11,59,69,.06);
  --head:"Cairo",Tahoma,sans-serif; --text:"IBM Plex Sans Arabic",Tahoma,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--body);font-family:var(--text);font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);margin:0;line-height:1.3;text-wrap:balance}
p{margin:0}
a{color:var(--teal7);text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
td.ltr,dd.ltr{display:table-cell;text-align:right}
dd.ltr{display:block}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}
.small{font-size:13px}
[hidden]{display:none!important}
.boot{min-height:100vh;display:grid;place-items:center;background:var(--deep)}

/* ---------- shell ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--deep);color:#fff;padding-top:var(--safe-t)}
.top .in{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));max-width:1280px;margin:0 auto}
.top .logo{height:26px;width:auto}
.top .sp{flex:1}
.top .who{display:flex;align-items:center;gap:10px;font-size:13px;color:#CFE3E4}
.top .who b{display:block;color:#fff;font-family:var(--head);font-size:14px;line-height:1.2}
.top .av{width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--deep);display:grid;place-items:center;font-family:var(--head);font-weight:800}
.top .tbtn{background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font-family:var(--head);font-weight:700;font-size:14px}
.top .tbtn:hover{background:rgba(255,255,255,.18)}
.top .tbtn.pri{background:var(--teal);color:var(--deep)}
.top .tbtn{white-space:nowrap}
.top .tbtn .sm{display:none}
.top .tbtn.site{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.top .tbtn.site svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
@media (max-width:520px){.top .in{gap:8px}.top .logo{height:21px}.top .tbtn.site{padding:8px 9px}.top .tbtn.site span,.top .tbtn .lg{display:none}.top .tbtn .sm{display:inline}}

.shell{display:grid;grid-template-columns:230px 1fr;max-width:1280px;margin:0 auto;min-height:calc(100vh - 58px)}
.side{border-inline-start:0;border-inline-end:1px solid var(--line);background:#fff;padding:16px 10px;position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto}
.side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--body);font-family:var(--head);font-weight:700;font-size:15px}
.side a svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.side a:hover{background:var(--bg)}
.side a.on{background:var(--teal1);color:var(--teal7)}
.side .grp{font-size:12px;color:var(--mut);padding:14px 12px 4px;font-family:var(--text)}
.main{min-width:0;padding:22px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.bnav{display:none}

@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .main{padding-bottom:calc(86px + var(--safe-b))}
  .top .who .txt{display:none}
  .bnav{display:flex;position:fixed;inset:auto 0 0 0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + var(--safe-b)) max(6px,env(safe-area-inset-left,0px));justify-content:space-around}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mut);font-size:11.5px;font-family:var(--head);font-weight:700;padding:4px 2px;border-radius:10px;min-width:0}
  .bnav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
  .bnav a.on{color:var(--teal7)}
  .bnav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ---------- page parts ---------- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{font-size:24px}
.ph .sub{color:var(--mut);font-size:14px;margin-top:2px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--mut);margin-bottom:4px}
.crumb a{color:var(--mut)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card h2{font-size:17px;margin-bottom:12px}
.card .ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card .ch h2{margin:0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.kpi .l{font-size:13px;color:var(--mut)}
.kpi .v{font-family:var(--head);font-weight:800;font-size:24px;color:var(--ink);line-height:1.25;font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.kpi .s{font-size:12.5px;color:var(--mut)}
.kpi.dark{background:var(--deep);border-color:var(--deep)}
.kpi.dark .l,.kpi.dark .s{color:#A9C6C8}.kpi.dark .v{color:#fff}
.kpi.good .v{color:var(--ok)}.kpi.badv .v{color:var(--bad)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 14px;cursor:pointer;font-family:var(--head);font-weight:700;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--teal);color:var(--teal7)}
.btn:focus-visible,.side a:focus-visible,.bnav a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(42,191,193,.45);outline-offset:1px}
.btn.pri{background:var(--deep);border-color:var(--deep);color:#fff}
.btn.pri:hover{background:#0E4A57;color:#fff}
.btn.teal{background:var(--teal);border-color:var(--teal);color:var(--deep2)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{color:var(--bad);border-color:#F0C9C3}
.btn.ghost{background:transparent;border-color:transparent;color:var(--teal7)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.lbl{font-size:13px;color:var(--mut);font-weight:500}
.field .hint{font-size:12px;color:var(--mut)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=tel],select,textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px;font-size:15px;min-width:0}
textarea{min-height:84px;resize:vertical}
input[type=number]{direction:ltr;text-align:right}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.row>.field{flex:1 1 160px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:8px 12px;cursor:pointer;font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--mut)}
.seg button.on{background:var(--deep);color:#fff}
.search{position:relative;flex:1 1 220px}
.search input{padding-inline-start:36px}
.search svg{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--mut);fill:none;stroke-width:2}

/* ---------- tables & lists ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{background:#F7FAFA;color:var(--mut);font-weight:600;font-size:12.5px;text-align:right;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:#F8FBFB}
table.t td.n,table.t th.n{text-align:left;direction:ltr;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t tfoot td{font-weight:700;background:#F7FAFA}
.list{display:grid;gap:10px}
.li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:center;cursor:pointer;min-width:0}
.li:hover{border-color:var(--teal)}
.li .m{flex:1;min-width:0}
.li .t1{font-family:var(--head);font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .t2{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .e{text-align:left;flex:none}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:28px 18px;text-align:center;color:var(--mut);background:#fff}
.empty b{display:block;font-family:var(--head);color:var(--ink);font-size:16px;margin-bottom:4px}
.empty .btn{margin-top:12px}

.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 10px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--graybg);color:var(--gray)}
.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.draft{background:var(--graybg);color:var(--gray)}
.pill.sent,.pill.production,.pill.parts,.pill.manufacturing,.pill.testing{background:var(--infobg);color:var(--info)}
.pill.accepted,.pill.delivered,.pill.ready{background:var(--okbg);color:var(--ok)}
.pill.rejected,.pill.cancelled{background:var(--badbg);color:var(--bad)}
.pill.invoiced{background:var(--teal1);color:var(--teal7)}
.pill.issued{background:var(--warnbg);color:var(--warn)}
.tag{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:0 7px;font-size:12px;color:var(--mut);direction:ltr}

/* ---------- doc editor ---------- */
.items{display:grid;gap:10px}
.it{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;display:grid;grid-template-columns:minmax(0,1fr) 80px 120px 130px 120px auto;gap:10px;align-items:start}
.it .fixed{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;direction:ltr;text-align:right;background:#F7FAFA;font-variant-numeric:tabular-nums}
.was{display:block;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#C0563B;color:var(--mut);font-weight:500;font-size:.85em}
.it.opt{background:#FBFDFD;border-style:dashed}
.it .nm{font-family:var(--head);font-weight:700;color:var(--ink)}
.it .sp{font-size:12.5px;color:var(--mut);white-space:pre-line}
.it .lt{font-family:var(--head);font-weight:800;direction:ltr;text-align:right;padding-top:30px;font-variant-numeric:tabular-nums}
.it .x{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
@media (max-width:760px){.it{grid-template-columns:1fr 1fr 1fr}.it>:first-child{grid-column:1/-1}.it .lt{padding-top:0}.it .x{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}
.addbar{display:flex;flex-wrap:wrap;gap:8px}
.addbar .btn small{font-family:var(--text);font-weight:500;color:var(--mut);direction:ltr}
.totals{display:grid;gap:6px;max-width:380px;margin-inline-start:auto}
.totals div{display:flex;justify-content:space-between;gap:12px}
.totals .g{font-family:var(--head);font-weight:800;font-size:20px;color:var(--deep);border-top:1px solid var(--line);padding-top:8px}
.totals span:last-child{direction:ltr;font-variant-numeric:tabular-nums}

.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.dl dt{color:var(--mut)}
.dl dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}

/* stages */
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{flex:1 1 110px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;font-size:13px;color:var(--mut);display:flex;align-items:center;gap:8px;cursor:default}
.step i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--graybg);font-weight:700;font-size:12px;flex:none}
.step.done{color:var(--ok)}.step.done i{background:var(--okbg)}
.step.cur{border-color:var(--teal);color:var(--teal7);background:var(--teal1)}.step.cur i{background:var(--teal);color:var(--deep2)}
button.step{cursor:pointer;font:inherit;text-align:right}
button.step:hover{border-color:var(--teal)}
.board{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.col{background:#EAF1F1;border-radius:var(--r);padding:10px;min-height:120px}
.col h3{font-size:14px;display:flex;justify-content:space-between;margin:2px 4px 10px}
.col .li{flex-direction:column;align-items:stretch;gap:4px}
@media (max-width:860px){.board{grid-template-columns:1fr;overflow:visible}.col{min-height:0}}

/* ---------- public app ---------- */
.hero{background:var(--deep);color:#DCE8E8;border-radius:18px;padding:26px 22px;display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center;overflow:hidden;position:relative}
.hero h1{color:#fff;font-size:28px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p{color:#BFD6D7;margin:8px 0 16px}
.hero img{border-radius:14px;background:#0F5F76}
@media (max-width:700px){.hero{grid-template-columns:1fr}.hero h1{font-size:23px}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;min-width:0}
.pcard:hover{border-color:var(--teal)}
.pcard .im{background:#0F5F76;aspect-ratio:4/3}
.pcard .im img{width:100%;height:100%;object-fit:cover}
.pcard .b{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .code{font-family:var(--head);font-weight:800;color:var(--teal7);direction:ltr;text-align:right}
.pcard .nm{font-family:var(--head);font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.4}
.pcard .sh{font-size:13px;color:var(--mut)}
.specs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.specs li{display:flex;gap:8px;align-items:flex-start}
.specs li:before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--teal);transform:rotate(45deg)}
.contact{display:grid;gap:10px}
.contact a.c{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink)}
.contact a.c b{font-family:var(--head);direction:ltr}

/* ---------- auth ---------- */
.auth{max-width:420px;margin:30px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 22px;display:grid;gap:14px}
.auth h1{font-size:22px}
.auth .err{background:var(--badbg);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:14px}
.auth .note{background:var(--teal1);color:var(--teal7);border-radius:10px;padding:10px 12px;font-size:14px}

/* ---------- modal & toast ---------- */
.modal{position:fixed;inset:0;z-index:80;background:rgba(7,44,51,.55);display:grid;place-items:center;padding:16px}
.modal .box{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:20px;display:grid;gap:14px}
.modal .box h2{font-size:19px}
.modal .acts{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap}
#toast{position:fixed;inset-inline:0;bottom:calc(96px + var(--safe-b));display:flex;justify-content:center;pointer-events:none;z-index:90}
#toast .tm{background:var(--ink);color:#fff;border-radius:12px;padding:10px 16px;font-size:14px;box-shadow:var(--sh);max-width:min(520px,calc(100vw - 32px))}
#toast .tm.bad{background:var(--bad)}
@media (min-width:861px){#toast{bottom:24px}}
.pwbox{direction:ltr;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:2px;background:var(--teal1);color:var(--deep);border-radius:12px;padding:14px;text-align:center;user-select:all}
.install{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--teal1);border:1px solid #BFE3E3;border-radius:12px;padding:10px 14px;margin-bottom:16px;flex-wrap:wrap}

/* ---------- bars chart ---------- */
.bars svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
.hbar{display:grid;gap:8px}
.hbar .r{display:grid;grid-template-columns:120px 1fr 90px;gap:8px;align-items:center;font-size:13px}
.hbar .tr{background:var(--line2);border-radius:6px;height:12px;overflow:hidden}
.hbar .fl{background:var(--teal7);height:100%;border-radius:6px}
.hbar .vv{direction:ltr;text-align:left;font-variant-numeric:tabular-nums}

/* ---------- printable quote / invoice (A4) ---------- */
#print-root{background:#56676B;padding:0 0 24px;min-height:100vh}
.printbar{position:sticky;top:0;z-index:5;background:var(--deep);padding:10px 16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pp{width:210mm;height:297mm;margin:16px auto;background:#fff;color:#14232A;font-family:var(--text);font-size:9.6pt;line-height:1.55;display:flex;flex-direction:column;padding:12mm 15mm 0;box-shadow:0 6px 24px rgba(0,0,0,.25);overflow:hidden;position:relative}
.pp:before{content:"";position:absolute;top:0;bottom:0;right:0;width:3.4mm;background:linear-gradient(#2ABFC1 0,#2ABFC1 54mm,#0B3B45 54mm,#0B3B45 100%)}
.pp:after{content:"";position:absolute;top:0;left:15mm;width:36mm;height:2.8mm;background:linear-gradient(90deg,#0B3B45 0,#0B3B45 62%,#2ABFC1 62%,#2ABFC1 100%)}
.pp .ph .ref{position:relative;z-index:1}
.pp.flow{height:auto;min-height:297mm;overflow:visible;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pp .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.pp .ph{display:flex;justify-content:space-between;align-items:flex-end;gap:10mm;padding-bottom:4mm}
.pp .ph img{height:10.5mm;width:auto}
.pp .ph .ref{text-align:left;font-size:8.4pt;color:#5B6B6E;line-height:1.45}
.pp .ph .ref b{font-family:var(--head);font-weight:800;font-size:9.6pt;color:#0B3B45;direction:ltr;unicode-bidi:isolate}
.pp .rule{height:1px;background:#0B3B45;position:relative;margin-bottom:9mm}
.pp .rule:before{content:"";position:absolute;right:0;top:-1.5px;height:4px;width:42mm;background:#2ABFC1}
.pp .rule:after{content:"";position:absolute;right:43.5mm;top:-1.5px;height:4px;width:4px;background:#2ABFC1;border-radius:50%}
.pp .kick{font-family:var(--head);font-weight:700;color:#0B7477;font-size:9.6pt}
.pp .to{font-family:var(--head);font-weight:800;font-size:24pt;color:#0B3B45;line-height:1.25;margin:.5mm 0 1.5mm}
.pp .sub{font-size:10.4pt;color:#24323A}
.pp .sub b{font-family:var(--head);font-weight:800;color:#0B3B45;direction:ltr;unicode-bidi:isolate}
.pp .hero{margin-top:7mm;height:100mm;background:#0F5F76;border-radius:0 0 0 16mm;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.pp .hero img{max-height:92%;max-width:92%;object-fit:contain}
.pp .hero .tagopt{position:absolute;top:4mm;right:4mm;background:#fff;color:#0B7477;font-family:var(--head);font-weight:700;font-size:8pt;border-radius:99px;padding:.6mm 3mm}
.pp .stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #DCE7E8}
.pp .stats>div{padding:5mm 4mm 4mm;border-left:1px solid #DCE7E8}
.pp .stats>div:last-child{border-left:0}
.pp .stats b{display:block;font-family:var(--head);font-weight:800;font-size:19pt;color:#0B3B45;line-height:1.2}
.pp .stats span{font-size:8.4pt;color:#5B6B6E}
.pp .meta{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;margin-top:7mm}
.pp .meta span{display:block;font-size:8pt;color:#5B6B6E}
.pp .meta b{font-family:var(--head);font-weight:800;font-size:9.8pt;color:#0B3B45}
.pp .half{margin-top:6mm}
.pp .half+.half{margin-top:7mm}
.pp .half .hn{display:flex;align-items:baseline;gap:3mm;font-size:10pt;color:#24323A}
.pp .half .hn b{font-family:var(--head);font-weight:800;font-size:13pt;color:#0B3B45}
.pp .half .hero{height:66mm;margin-top:3mm;border-radius:0 0 0 12mm}
.pp .half .stats>div{padding:3.5mm 4mm 3mm}
.pp .half .stats b{font-size:15pt}
.pp h2.t{font-family:var(--head);font-weight:800;font-size:22pt;color:#0B3B45;line-height:1.2}
.pp .lead{color:#5B6B6E;font-size:9.2pt;margin:1mm 0 5mm}
.pp table.pt{width:100%;border-collapse:collapse}
.pp table.pt th{font-size:8.2pt;color:#5B6B6E;font-weight:600;text-align:right;padding:0 0 2.4mm;border-bottom:1.5px solid #0B3B45}
.pp table.pt th.c,.pp table.pt td.c{text-align:center}
.pp table.pt th.l,.pp table.pt td.l{text-align:left}
.pp table.pt td{padding:3mm 0;border-bottom:1px solid #E3ECED;vertical-align:top}
.pp table.pt td.c{width:16mm;font-family:var(--head);font-weight:700;color:#0B3B45;padding-top:3.6mm}
.pp table.pt td.l{width:33mm;padding-top:3.6mm}
.pp table.pt tr,.pp table.mt tr{break-inside:avoid}
.pp .nm{font-family:var(--head);font-weight:800;font-size:11pt;color:#0B3B45}
.pp .bd{display:inline-block;border:1px solid #2ABFC1;color:#0B7477;border-radius:99px;font-size:7.2pt;font-weight:700;padding:0 2.2mm;margin-right:2mm;vertical-align:2px;line-height:1.7}
.pp .bd.gift{background:#2ABFC1;color:#fff}
.pp .ds{font-size:8.5pt;color:#5B6B6E;white-space:pre-line;margin-top:.5mm}
.pp .nt{font-size:8.5pt;color:#0B7477;margin-top:.5mm}
.pp .was{display:block;font-size:8.8pt;color:#8A9799;text-decoration:line-through;text-decoration-color:#C0563B;text-decoration-thickness:1.3px;direction:ltr}
.pp .np{display:block;font-family:var(--head);font-weight:800;font-size:12.5pt;color:#0B3B45;direction:ltr;line-height:1.3}
.pp .un{display:block;font-size:7.6pt;color:#5B6B6E}
.pp .free{font-family:var(--head);font-weight:800;color:#0B7477;font-size:11pt}
.pp .excl{font-size:7.8pt;color:#5B6B6E}
.pp .total{break-inside:avoid;margin-top:5mm;background:#0B3B45;color:#fff;border-radius:0 0 0 9mm;display:flex;justify-content:space-between;align-items:center;gap:8mm;padding:5mm 7mm}
.pp .total .tl{font-size:9pt;color:#CFEFF0}
.pp .total .tl b{display:block;font-family:var(--head);font-weight:800;font-size:11.5pt;color:#fff}
.pp .total .tl em{display:block;font-style:normal;color:#2ABFC1;font-weight:700}
.pp .total .tv{font-family:var(--head);font-weight:800;font-size:21pt;direction:ltr;white-space:nowrap}
.pp .two{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin-top:7mm;break-inside:avoid}
.pp h3{font-family:var(--head);font-weight:800;font-size:11pt;color:#0B3B45;margin:0 0 1.5mm}
.pp ul.inc{list-style:none;padding:0;margin:0}
.pp ul.inc li{padding:2.1mm 5mm 2.1mm 0;border-bottom:1px dotted #C9D9DA;position:relative;font-size:9pt}
.pp ul.inc li:before{content:"";position:absolute;right:0;top:3.9mm;width:2.2mm;height:2.2mm;background:#2ABFC1}
.pp .terms .r{display:flex;justify-content:space-between;gap:5mm;padding:2.1mm 0;border-bottom:1px dotted #C9D9DA;font-size:8.8pt}
.pp .terms .r span{color:#5B6B6E;flex:none}
.pp .terms .r b{color:#0B3B45;text-align:left;font-weight:700}
.pp .tnote{font-size:8.4pt;color:#5B6B6E;margin-top:2mm}
.pp .sg{margin-top:auto;display:flex;justify-content:space-between;gap:18mm;padding:11mm 0 4mm;break-inside:avoid}
.pp .sg div{flex:1;border-top:1px solid #0B3B45;padding-top:2mm;font-size:8.4pt;color:#5B6B6E}
.pp .pf{break-inside:avoid;border-top:1px solid #DCE7E8;padding:3.5mm 0 7mm;display:flex;justify-content:space-between;gap:6mm;font-size:8pt;color:#5B6B6E}
.pp.flow .sg{margin-top:7mm}
.pp.flow .pf{margin-top:auto}
.pp .cust{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;margin:5mm 0 8mm;padding:4mm 0;border-top:1px solid #DCE7E8;border-bottom:1px solid #DCE7E8}
.pp .cust span{display:block;font-size:8pt;color:#5B6B6E}
.pp .cust b{font-weight:700;font-size:9.4pt;color:#0B3B45}
.pp table.mt{width:100%;border-collapse:collapse;margin-top:2mm;font-size:9pt}
.pp table.mt th{background:#F1F8F9;color:#0B7477;font-weight:700;text-align:right;padding:2mm 3mm;font-size:8.4pt}
.pp table.mt td{padding:2.2mm 3mm;border-bottom:1px solid #E3ECED}
.pp .sec{margin-top:7mm;break-inside:avoid}
.pp h3,.pp h2.t{break-after:avoid}
/* customer statement */
.pp.st .rule{margin-bottom:6mm}
.pp.st .to{font-size:18pt!important}
.pp.st .cust{margin:3mm 0 5mm}
.pp.st h2.t{font-size:14pt!important;margin-top:5mm!important}
.pp.st .lead{margin:.5mm 0 3mm}
.pp.st table.pt td{padding:2.4mm 0}
.pp.st .sg{margin-top:4mm;padding:8mm 0 3mm}
.pp.st table.lg td{padding:2mm 3mm}
.pp.st .pf{padding-bottom:6mm}
.pp .sum{display:grid;grid-template-columns:repeat(3,1fr);gap:0 6mm;background:#F1F8F9;border-radius:0 0 0 9mm;padding:4mm 6mm 3mm;break-inside:avoid}
.pp .sum>div>span{display:block;font-size:8.2pt;color:#5B6B6E}
.pp .sum>div b{display:block;font-family:var(--head);font-weight:800;font-size:17pt;color:#0B3B45;line-height:1.3}
.pp .sum>div.ok b{color:#0B7477}
.pp .sum>div.due b{color:#B5462F}
.pp .sum .bar{grid-column:1/-1;height:2.2mm;background:#DCE7E8;border-radius:99px;margin-top:3.5mm;overflow:hidden;direction:rtl}
.pp .sum .bar i{display:block;height:100%;background:#2ABFC1;border-radius:99px}
.pp .sum p{grid-column:1/-1;font-size:8pt;color:#5B6B6E;margin-top:1.5mm}
.pp table.ag td.l{width:36mm}
.pp ul.its{list-style:none;padding:0;margin:2mm 0 0}
.pp ul.its li{display:flex;justify-content:space-between;gap:6mm;font-size:8.8pt;padding:1.2mm 0;border-bottom:1px dotted #DCE7E8;color:#24323A}
.pp ul.its li:last-child{border-bottom:0}
.pp ul.its li em{font-style:normal;color:#0B7477;font-size:8pt}
.pp ul.its li b{font-weight:700;color:#0B3B45;white-space:nowrap}
.pp .tm{display:flex;flex-wrap:wrap;gap:1mm 6mm;margin-top:2mm;font-size:8.2pt;color:#5B6B6E}
.pp .tm b{color:#0B3B45;font-weight:700}
.pp table.lg{width:100%;border-collapse:collapse;font-size:8.8pt}
.pp table.lg th{background:#0B3B45;color:#fff;font-weight:700;text-align:right;padding:2.2mm 3mm;font-size:8.2pt}
.pp table.lg th.l,.pp table.lg td.l{text-align:left}
.pp table.lg td{padding:2.4mm 3mm;border-bottom:1px solid #E3ECED;vertical-align:top}
.pp table.lg td:first-child{white-space:nowrap;color:#5B6B6E;width:22mm}
.pp table.lg td b{font-weight:700;color:#0B3B45}
.pp table.lg td small{display:block;font-size:7.8pt;color:#5B6B6E;margin-top:.4mm}
.pp table.lg tr.payment td.l:nth-child(4){color:#0B7477;font-weight:700}
.pp table.lg td.bal{font-family:var(--head);font-weight:800;color:#0B3B45}
.pp table.lg tbody tr:nth-child(even){background:#FAFCFC}
.pp table.lg tr{break-inside:avoid}
.pp table.lg tfoot td{border-top:1.5px solid #0B3B45;border-bottom:0;font-family:var(--head);font-weight:800;color:#0B3B45;padding-top:3mm}
@media (max-width:840px){.pp{zoom:.46;margin:10px auto}}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff}
  body.printing #app,body.printing #toast,body.printing .printbar{display:none!important}
  body.printing #print-root{display:block!important;background:#fff;padding:0;min-height:0}
  .pp{margin:0;box-shadow:none;zoom:1;page-break-after:always;break-after:page}
  .pp:last-child{page-break-after:auto;break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.li .thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 52px;background:#EEF4F4}
.li .thumb.pdf{display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:12px;color:#B5462F;background:#FBEDEA}
.fu .ch a{color:var(--ink);text-decoration:none}
.li .t1,.li .t2{display:block}
@media (max-width:600px){.krow{grid-template-columns:1fr 1fr}.krow>:first-child{grid-column:1/-1}.krow .kpi .v{font-size:20px}}
@media (max-width:600px){
.grid.mini{grid-template-columns:1fr 1fr}
table.t.rsp{min-width:0}
table.t.rsp thead{display:none}
table.t.rsp,table.t.rsp tbody,table.t.rsp tfoot{display:block;width:100%}
table.t.rsp tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;padding:12px;border-bottom:1px solid var(--line)}
table.t.rsp tbody td{display:block;border:0;padding:0;text-align:right}
table.t.rsp tbody td:first-child{display:none}
table.t.rsp tbody td:nth-child(2){grid-column:1/-1}
table.t.rsp td[data-l]:before{content:attr(data-l);display:block;font-size:11.5px;color:var(--mut);font-family:var(--text);font-weight:500}
table.t.rsp tfoot tr{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}
table.t.rsp tfoot td{border:0;padding:0}
}
.li>svg{width:22px;height:22px;flex:none;stroke:var(--teal7);fill:none;stroke-width:1.8}
.mob-only{display:none}
@media (max-width:600px){.desk-only{display:none}.mob-only{display:grid}}
@media (max-width:600px){.seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}.seg button{white-space:nowrap;flex:none}}
.isteps{margin:0;padding:0 22px 0 0;display:grid;gap:8px;font-size:15px}
.isteps li{padding-right:4px}
.btn.big{width:100%;justify-content:center;padding:14px 18px;font-size:17px}
.li.ucard{cursor:default;align-items:flex-start}
.li.ucard .ua{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.li.ucard .ua select{max-width:100%;padding:6px 8px;font-size:13px}
.it .mrow{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,160px)) 1fr;gap:10px;align-items:end;border-top:1px dashed var(--line);padding-top:10px}
.it .mrow .mtot{align-self:center}
@media (max-width:760px){.it .mrow{grid-template-columns:1fr 1fr}.it .mrow .mtot{grid-column:1/-1}}
.pdfwait{position:fixed;inset:0;z-index:9999;background:rgba(11,59,69,.55);display:grid;place-items:center}
.pdfwait div{background:#fff;color:var(--ink);font-family:var(--head);font-weight:700;padding:16px 22px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
body.pdfshot .pp{zoom:1!important;margin:0!important;box-shadow:none!important}
body.pdfshot .pp .bd{vertical-align:middle;line-height:1.35;padding:.5mm 2.4mm .9mm}