/* Global Link live demo v3 · additions: big menu, styles, grids, e-commerce, documents, website preview, sign-in steps */
.chk { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--pm); }
.chk input { width: 18px; height: 18px; accent-color: var(--brand); }

/* wizard style step */
.stys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sty { border: 1px solid var(--pl); background: var(--card); border-radius: 14px; padding: 10px; display: grid; gap: 4px; text-align: start; }
.sty[aria-pressed="true"] { border-color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.sty b { font-size: 14px; } .sty small { color: var(--pm); font-size: 12px; }
.mini { display: grid; grid-template-columns: 26% 1fr; height: 104px; border-radius: 9px; overflow: hidden; border: 1px solid var(--pl); background: #F4F5F8; margin-bottom: 6px; }
.sty.sharp .mini, .sty.sharp .mk u { border-radius: 2px; }
.ms { background: #0F1729; display: grid; align-content: start; gap: 5px; padding: 8px 6px; }
.sk-light .ms { background: #fff; border-inline-end: 1px solid var(--pl); } .sk-brand .ms { background: var(--c); }
.ms em { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); } .sk-light .ms em { background: #E1E5EC; }
.ms em:first-child { background: var(--c); } .sk-brand .ms em:first-child { background: #fff; }
.mm { padding: 7px; display: grid; gap: 6px; grid-template-rows: auto 1fr; }
.st-2 .mm { background: color-mix(in srgb, var(--c) 5%, #fff); }
.mk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mk u { text-decoration: none; background: #fff; border: 1px solid #E6E9EF; border-radius: 5px; font: 600 10.5px/1 var(--f-d); padding: 6px 4px; color: #0F1729; }
.st-3 .mk u:first-child { background: var(--c); color: #fff; border-color: var(--c); }
.st-2 .mk u { border-radius: 8px; border-color: transparent; box-shadow: 0 2px 6px rgba(15, 23, 41, .07); }
.mb { display: flex; align-items: flex-end; gap: 3px; background: #fff; border: 1px solid #E6E9EF; border-radius: 5px; padding: 5px; }
.mb i { flex: 1; background: var(--c); border-radius: 2px 2px 0 0; opacity: .85; transition: height .4s; }
.sty-more { display: flex; justify-content: space-between; align-items: center; }

/* sign-in steps */
.si-steps { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--pm); }
.si-steps li { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 99px; background: #EEF0F4; }
.si-steps i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--f-b); font-style: normal; background: #fff; }
.si-steps .now { background: var(--brand-2); color: var(--brand); font-weight: 600; } .si-steps .now i { background: var(--brand); color: var(--brand-ink); }
.si-steps .done i { background: var(--ok); color: #fff; }
.si-r .pin { justify-content: flex-start; }

/* big menu */
.msearch { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, .07); color: #9AA5BB; }
.skin-light .msearch { background: #F2F4F7; color: var(--pm); }
.msearch svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.msearch input { border: 0; background: none; color: inherit; font: inherit; font-size: 14px; width: 100%; outline: none; }
.sys { border-radius: 10px; }
.sys-h { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: rgba(255, 255, 255, .06); color: #fff; font: 600 13.5px/1.2 var(--f-d); padding: 10px; border-radius: 9px; margin-top: 8px; text-align: start; }
.skin-light .sys-h { background: #F2F4F7; color: var(--pf); }
.skin-brand .sys-h { background: rgba(255, 255, 255, .1); }
.sys-h svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.sys-h span { flex: 1; } .sys-h em { font: 600 11px/1 var(--f-m); font-style: normal; opacity: .65; }
.sys-h i { font-style: normal; transition: transform .2s; opacity: .7; } .sys:not(.open) .sys-h i { transform: rotate(-90deg); }
.sys:not(.open) .sys-b { display: none; }
.mi { position: relative; display: flex; align-items: center; }
.mi > button:first-child { flex: 1; min-width: 0; }
.side nav .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .cnt { font: 600 11px/1 var(--f-m); padding: 3px 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); color: #C9D1E0; }
.skin-light .side .cnt { background: #EEF0F4; color: var(--pm); }
.side nav button[aria-current="true"] .cnt { background: rgba(255, 255, 255, .22); color: inherit; }
.side nav .fav { width: 26px !important; flex: none; padding: 0 !important; justify-content: center; opacity: 0; color: #6F7B93 !important; font-size: 13px !important; }
.mi:hover .fav, .fav:focus-visible, .fav[aria-pressed="true"] { opacity: 1; }
.fav[aria-pressed="true"] { color: #F59E0B !important; }
.side .badge { margin-inline-start: 0; }
.top .allm, .top .ico { display: inline-flex; align-items: center; gap: 7px; }
.top .allm svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.dotc { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--brand) 0 50%, #F59E0B 0 75%, #0E9F6E 0); display: inline-block; }
.seg.per button { padding: 6px 10px; }
.seg.wide { display: flex; flex-wrap: wrap; width: 100%; } .seg.wide button { flex: 1; white-space: nowrap; }
.mega-m .box { max-width: 1080px; }
.mega-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mega-h h3 { flex: 1; }
.mega { display: grid; gap: 18px; }
.mega h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 8px; }
.mega h4 svg { width: 18px; height: 18px; stroke: var(--brand); fill: none; stroke-width: 1.8; }
.mega-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.mt { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; text-align: start; padding: 10px; border: 1px solid var(--pl); border-radius: 11px; background: #fff; }
.mt:hover { border-color: var(--brand); background: var(--brand-2); }
.mt i { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; background: var(--brand-2); display: grid; place-items: center; }
.mt i svg { width: 17px; height: 17px; stroke: var(--brand); fill: none; stroke-width: 1.9; }
.mt b { font-size: 13.5px; } .mt small { color: var(--pm); font-size: 12px; }

/* skins and styles inside the app */
.skin-brand .side { background: var(--brand); }
.skin-brand .side nav button { color: rgba(255, 255, 255, .82); }
.skin-brand .side nav button[aria-current="true"] { background: #fff; color: var(--brand); }
.skin-brand .side .sgroup, .skin-brand .co span { color: rgba(255, 255, 255, .7); }
.skin-brand .side .foot button, .skin-brand .side .foot a, .skin-brand .side .made { color: rgba(255, 255, 255, .75); }
.skin-brand .co .lg .ph { background: rgba(255, 255, 255, .2); }
.st-2 .main { background: color-mix(in srgb, var(--brand) 4%, #F7F8FA); }
.st-2 .card, .st-2 .kpi { border-color: transparent; box-shadow: 0 1px 2px rgba(15, 23, 41, .04), 0 10px 30px -18px rgba(15, 23, 41, .25); }
.st-2 { --r: 18px; }
.st-2 .kpi .t i { border-radius: 50%; }
.st-3 .kpis .kpi:first-child { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.st-3 .kpis .kpi:first-child .t, .st-3 .kpis .kpi:first-child small { color: inherit; opacity: .85; }
.st-3 .kpis .kpi:first-child .t i { background: rgba(255, 255, 255, .18); } .st-3 .kpis .kpi:first-child .t i svg { stroke: currentColor; }
.st-3 .top { border-bottom: 2px solid var(--brand); }
.st-3 .ph h1 { font-size: 30px; letter-spacing: -0.025em; }
.sharp { --r: 4px; } .sharp .btn, .sharp .seg, .sharp .seg button, .sharp .pill, .sharp .side nav button { border-radius: 4px; }
.dense .view { gap: 14px; padding-top: 18px; } .dense .card { padding: 13px 15px; } .dense .kpi { padding: 11px 14px; } .dense .kpi b { font-size: 21px; }
.dense td, .dense th { padding-top: 7px !important; padding-bottom: 7px !important; }
.dense .side nav button { padding: 6px 10px; font-size: 13.5px; }

/* drawers */
.modal.drawer { place-items: stretch end; padding: 0; }
.modal.drawer .box { max-width: 460px; height: 100%; max-height: none; border-radius: 0; align-content: start; animation: slidein .22s ease-out; }
[dir="rtl"] .modal.drawer { place-items: stretch start; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.look-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.box h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--pm); margin-top: 4px; }
:lang(ar) .box h4 { text-transform: none; letter-spacing: 0; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.presets button { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--pl); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; text-align: start; }
.presets button[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.presets span { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.presets .pk { width: 8px; background: #0F1729; margin-inline-start: -10px; border-radius: 0 5px 5px 0; } .presets .pk.sk-light { background: #E1E5EC; } .presets .pk.sk-brand { background: rgba(255, 255, 255, .5); }
.cpick { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--pm); display: grid; place-items: center; color: var(--pm); font-weight: 700; cursor: pointer; overflow: hidden; }
.cpick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 14px; } .kv span { color: var(--pm); } .kv b { font-weight: 600; text-align: end; }
.dimg { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: #EEF0F4; }

/* grids */
.gbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 12px; }
.gbar .sp { flex: 1; }
.gsearch { display: flex; align-items: center; gap: 6px; border: 1px solid var(--pl); border-radius: 9px; padding: 6px 10px; background: #F7F8FA; min-width: 180px; }
.gsearch svg { width: 14px; height: 14px; stroke: var(--pm); fill: none; stroke-width: 2; }
.gsearch input { border: 0; background: none; outline: none; font: inherit; font-size: 14px; width: 100%; }
.gbar select, .pdfbar select { border: 1px solid var(--pl); border-radius: 9px; padding: 7px 10px; background: #fff; font: inherit; font-size: 13.5px; color: var(--pf); }
.gcount { font-size: 13px; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--brand-2); }
.gform { display: grid; gap: 12px; }
.thumb { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; background: #EEF0F4; flex: none; }
.thumb.sm { width: 30px; height: 30px; border-radius: 7px; }
.item .thumb { margin-inline-end: 2px; }

/* e-commerce */
.shop-hero { border-radius: var(--r); min-height: 210px; padding: 28px; display: grid; align-content: end; gap: 6px; color: #fff; background-size: cover; background-position: center; }
.shop-hero h2 { font-size: 30px; max-width: 460px; } .shop-hero p { opacity: .9; } .shop-hero .eyebrow { color: rgba(255, 255, 255, .8); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1px solid var(--pl); background: #fff; border-radius: 99px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--pf); }
.chips button[aria-pressed="true"] { background: var(--pf); color: #fff; border-color: var(--pf); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pcard { background: var(--card); border: 1px solid var(--pl); border-radius: var(--r); padding: 10px; display: grid; gap: 4px; align-content: start; }
.pimg { position: relative; aspect-ratio: 1; border-radius: calc(var(--r) - 4px); overflow: hidden; background: #EEF0F4; margin-bottom: 6px; }
.pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .pcard:hover .pimg img { transform: scale(1.04); }
.pimg .tag { position: absolute; top: 8px; inset-inline-start: 8px; background: #0F1729; color: #fff; font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; } .pimg .tag.warn { background: #F59E0B; color: #1F1300; }
.pcard .pr { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; } .pcard .pr span { font: 600 16px/1 var(--f-d); }
.tabby { font-size: 12px; color: #2F7D5B; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kcol { background: #EEF0F4; border-radius: var(--r); padding: 10px; display: grid; gap: 8px; align-content: start; }
.kcol h4 { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.kc { background: #fff; border-radius: 10px; padding: 10px; display: grid; gap: 5px; box-shadow: 0 1px 2px rgba(15, 23, 41, .06); }
.kc small { font-size: 12.5px; } .kc-t { display: flex; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.kc-i { display: flex; gap: 4px; } .kc-a { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl li { position: relative; padding: 0 0 18px 28px; display: grid; } [dir="rtl"] .tl li { padding: 0 28px 18px 0; }
.tl li::before { content: ""; position: absolute; inset-inline-start: 6px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #D5DAE3; }
.tl li::after { content: ""; position: absolute; inset-inline-start: 11px; top: 18px; bottom: 0; width: 2px; background: #E1E5EC; } .tl li:last-child::after { display: none; }
.tl li.done::before { background: var(--ok); } .tl li.now::before { background: var(--brand); box-shadow: 0 0 0 5px var(--brand-2); }
.tl small { color: var(--pm); font-size: 12.5px; }
.list button.item[aria-current="true"] { border-color: var(--brand); background: var(--brand-2); }

/* combined overview */
.combo { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card.cb { padding: 0; overflow: hidden; display: grid; }
.cb-h { height: 120px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 14px 16px; color: #fff; font: 600 18px/1.2 var(--f-d); }
.cb-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 16px 6px; gap: 8px; }
.cb-k small { display: block; color: var(--pm); font-size: 12px; } .cb-k b { font: 600 18px/1.3 var(--f-d); }
.cb-l { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 16px; }

/* documents */
.pdfbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #F4F5F8; font-size: 13.5px; color: var(--pm); }
.pdfbar span { margin-inline-end: auto; font-weight: 600; }
.stu-g { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.stu { display: grid; gap: 10px; } .stu h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--pm); } :lang(ar) .stu h3 { text-transform: none; letter-spacing: 0; }
.pdwrap { background: #E6E9EF; border-radius: var(--r); padding: 22px; }
.pdoc { --pc: var(--brand); background: #fff; max-width: 720px; margin: 0 auto; padding: 34px 36px; box-shadow: 0 20px 50px -30px rgba(15, 23, 41, .5); font-size: 13.5px; color: #17112B; display: grid; gap: 18px; }
.pdoc .ar { font-family: var(--f-ar); color: #6B6585; font-weight: 500; margin-inline-start: 4px; }
.pd-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.pd-h .lg { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #F4F5F8; }
.pd-h .lg img { width: 100%; height: 100%; object-fit: contain; } .pd-h .lg .ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--pc); color: #fff; font: 600 20px/1 var(--f-d); }
.pd-h .co b { font: 600 16px/1.2 var(--f-d); display: block; } .pd-h .co small { color: #6B6585; font-size: 12px; }
.pd-h .tt { text-align: end; } .pd-h h2 { font-size: 19px; color: var(--pc); } .pd-h .tt small { color: #6B6585; font-family: var(--f-m); font-size: 12px; }
.pd-m { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; padding: 12px 14px; border: 1px solid #E6E1F2; border-radius: 8px; background: #FAF9FD; }
.pd-m small { display: block; color: #6B6585; font-size: 11.5px; } .pd-m b { font-size: 13.5px; }
.pd-t { width: 100%; border-collapse: collapse; } .pd-t th { text-align: start; font-size: 11.5px; padding: 8px; border-top: 2px solid var(--pc); border-bottom: 1px solid #DDD8EA; background: #F6F4FB; } .pd-t td { padding: 8px; border-bottom: 1px solid #EEEAF5; } .pd-t .r { text-align: end; }
.pd-tot { justify-self: end; min-width: 280px; display: grid; gap: 4px; } .pd-tot div { display: flex; justify-content: space-between; gap: 20px; padding: 4px 8px; } .pd-tot .g { border-top: 2px solid var(--pc); border-bottom: 2px solid var(--pc); font: 600 16px/1.3 var(--f-d); color: var(--pc); padding: 8px; }
.pd-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #6B6585; font-size: 12px; border-top: 1px solid #EEEAF5; padding-top: 12px; }
.pd-f .qr img, .pd-f .qr canvas { width: 76px !important; height: 76px !important; }
.ds-band .pd-h { background: var(--pc); color: #fff; margin: -34px -36px 0; padding: 24px 36px; } .ds-band .pd-h h2, .ds-band .pd-h small, .ds-band .pd-h .co small { color: #fff; } .ds-band .pd-h .lg { background: #fff; }
.ds-band .pd-t th { background: var(--pc); color: #fff; border: 0; } .ds-band .pd-m { border: 0; background: color-mix(in srgb, var(--pc) 7%, #fff); }
.ds-minimal { font-family: var(--f-b); } .ds-minimal .pd-h h2 { color: #17112B; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 15px; }
.ds-minimal .pd-m { background: none; border: 0; border-bottom: 1px solid #E6E1F2; border-radius: 0; padding: 0 0 12px; } .ds-minimal .pd-t th { background: none; border-top: 0; border-bottom: 1px solid #17112B; } .ds-minimal .pd-tot .g { color: #17112B; border-bottom: 0; border-top-width: 1px; }
.pdoc[dir="rtl"] { font-family: var(--f-ar); } .pdoc[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

/* website preview */
.sitepv { border-radius: 14px; overflow: hidden; border: 1px solid var(--pl); background: #fff; box-shadow: 0 30px 60px -40px rgba(15, 23, 41, .5); margin: 0 auto; width: 100%; transition: max-width .3s; }
.sitepv.dev-phone { max-width: 390px; border-radius: 30px; border: 10px solid #0F1729; }
.sbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEF0F4; } .sbar i { width: 10px; height: 10px; border-radius: 50%; background: #D0D5DE; }
.sbar span { margin-inline-start: 10px; background: #fff; border-radius: 6px; padding: 4px 12px; font: 12px/1 var(--f-m); color: var(--pm); flex: 1; max-width: 340px; }
.dev-phone .sbar i { display: none; } .dev-phone .sbar span { margin: 0; text-align: center; max-width: none; }
.sn { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid #EEF0F4; }
.sn .sl { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--brand); color: #fff; font: 600 13px/1 var(--f-d); }
.sn .sl img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .sn .sl .ph { color: #fff; }
.sn nav { display: flex; gap: 18px; margin-inline-start: auto; font-size: 14px; color: #3A4458; } .sn .lng { font-family: var(--f-ar); font-size: 13px; border: 1px solid var(--pl); border-radius: 6px; padding: 3px 8px; }
.sh { min-height: 330px; display: grid; align-content: center; gap: 12px; padding: 40px; color: #fff; background-size: cover; background-position: center; }
.sh h1 { font-size: 38px; max-width: 560px; line-height: 1.1; } .sh p { max-width: 480px; opacity: .9; }
.sbtn { justify-self: start; background: var(--brand); color: var(--brand-ink); font-weight: 600; padding: 11px 18px; border-radius: 10px; font-size: 14px; }
.sh.split { grid-template-columns: 1fr 1fr; color: var(--pf); padding: 0; gap: 0; background: color-mix(in srgb, var(--brand) 6%, #fff); }
.sh.split > div { padding: 40px; display: grid; gap: 12px; align-content: center; } .sh.split img { width: 100%; height: 100%; object-fit: cover; min-height: 330px; } .sh.split p { color: var(--pm); }
.sh.bold h1 { font-size: 46px; text-transform: none; } .lay-3 .sn { background: #0B1322; color: #fff; border: 0; } .lay-3 .sn nav { color: #B9C2D4; } .lay-3 .sn .lng { border-color: #33415C; }
.ss { padding: 34px 22px; display: grid; gap: 16px; } .ss h2 { font-size: 24px; text-align: center; }
.sg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc { border: 1px solid #EEF0F4; border-radius: 14px; padding: 18px; display: grid; gap: 6px; } .sc i { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-2); display: grid; place-items: center; } .sc i svg { width: 19px; height: 19px; stroke: var(--brand); fill: none; stroke-width: 2; } .sc p { color: var(--pm); font-size: 13.5px; }
.lay-2 .sc { background: color-mix(in srgb, var(--brand) 4%, #fff); border: 0; } .lay-3 .sc { border-radius: 4px; border-top: 3px solid var(--brand); }
.sp4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .spc { display: grid; gap: 4px; font-size: 13.5px; } .spc img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; } .spc em { font-style: normal; color: var(--brand); font-weight: 600; font-size: 13px; }
.sq { text-align: center; background: #F7F8FA; } .sq p { font: 500 19px/1.5 var(--f-d); max-width: 560px; margin: 0 auto; }
.scta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 22px 22px; padding: 20px; border-radius: 14px; background: var(--brand); color: var(--brand-ink); } .scta .sbtn { background: #25D366; color: #0B2E17; }
.sf { padding: 16px 22px; font-size: 12.5px; color: var(--pm); border-top: 1px solid #EEF0F4; }
.dev-phone .sn nav { display: none; } .dev-phone .sh { min-height: 260px; padding: 26px 20px; } .dev-phone .sh h1 { font-size: 27px; } .dev-phone .sh.split { grid-template-columns: 1fr; } .dev-phone .sh.split img { min-height: 180px; height: 180px; }
.dev-phone .sg, .dev-phone .sp4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dev-phone .sg { grid-template-columns: 1fr; }

/* security */
.tog { width: 44px; height: 26px; border-radius: 99px; border: 0; background: #D0D5DE; position: relative; flex: none; padding: 0; transition: background .2s; }
.tog i { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.tog[aria-checked="true"] { background: var(--ok); } .tog[aria-checked="true"] i { inset-inline-start: 21px; }
.feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .feat p { font-size: 13.5px; margin-top: 2px; }

@media (max-width: 1150px) { .top .ico span, .top .allm span { display: none; } }
@media (max-width: 960px) { .stu-g { grid-template-columns: minmax(0, 1fr); } .top .per { display: none; } .kanban { grid-template-columns: repeat(4, 240px); } }
@media (max-width: 620px) {
  .stys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .sty { padding: 6px; } .mini { height: 74px; } .mk u { font-size: 8.5px; padding: 4px 2px; } .sty small { display: none; }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pdwrap { padding: 8px; } .pdoc { padding: 20px 16px; } .ds-band .pd-h { margin: -20px -16px 0; padding: 18px 16px; } .pd-h { grid-template-columns: auto minmax(0, 1fr); } .pd-h .tt { grid-column: 1 / -1; text-align: start; } .pd-m { grid-template-columns: 1fr 1fr; } .pd-tot { min-width: 0; width: 100%; }
  .sh { padding: 24px 18px; } .sh h1 { font-size: 26px; } .sh.split { grid-template-columns: 1fr; } .sg, .sp4 { grid-template-columns: 1fr 1fr; } .sg { grid-template-columns: 1fr; }
  .shop-hero h2 { font-size: 23px; } .gsearch { min-width: 0; flex: 1 1 100%; } .top .bell { display: none; }
}
#otp { gap: 6px; } #otp input { width: 44px; height: 54px; font-size: 20px; }
@media (max-width: 420px) { #otp input { width: 38px; height: 48px; } }
.ds-band .pd-h .ar, .ds-band .pd-t th .ar { color: rgba(255, 255, 255, .82); }

/* part 2: assistant, chat, tasks, WhatsApp, QR, integrations */
.chat { display: grid; gap: 12px; padding: 0; overflow: hidden; }
.chat .msgs, .tm .msgs { max-height: 460px; min-height: 300px; overflow-y: auto; padding: 18px 20px; display: grid; gap: 12px; align-content: start; background: color-mix(in srgb, var(--brand) 3%, #fff); }
.bub { display: flex; gap: 10px; max-width: 82%; } .bub > div { padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--pl); font-size: 14.5px; }
.bub ul { margin: 6px 0; padding-inline-start: 18px; } .bub li { margin: 3px 0; }
.bub i { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; flex: none; } .bub i svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; }
.bub.me { justify-self: end; } .bub.me > div { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.wa-q { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #DCF8C6; color: #13361F; border-inline-start: 3px solid #25D366; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; }
.sugg button { border: 1px solid var(--pl); background: #fff; border-radius: 99px; padding: 7px 13px; font-size: 13.5px; color: var(--pf); } .sugg button:hover { border-color: var(--brand); color: var(--brand); }
.ask { display: flex; gap: 8px; padding: 0 20px 20px; } .ask input { flex: 1; min-width: 0; border: 1px solid var(--pl); border-radius: 10px; padding: 11px 14px; font: inherit; }
.typing { display: inline-flex; gap: 4px; } .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--pm); animation: blink 1s infinite; } .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }
.tchat { display: grid; grid-template-columns: 250px minmax(0, 1fr); padding: 0; overflow: hidden; }
.tg { border-inline-end: 1px solid var(--pl); display: grid; align-content: start; padding: 8px; gap: 4px; }
.tg button { text-align: start; border: 0; background: none; padding: 10px; border-radius: 9px; display: grid; gap: 2px; } .tg button small { color: var(--pm); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg button[aria-current="true"] { background: var(--brand-2); color: var(--brand); }
.tm { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; } .tm-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--pl); }
.tmsg { display: flex; gap: 10px; align-items: flex-start; } .tmsg p { margin: 2px 0 0; } .tmsg small { color: var(--pm); font-size: 12px; } .tmsg .btn { opacity: 0; } .tmsg:hover .btn, .tmsg .btn:focus-visible { opacity: 1; }
.tm .ask { padding: 14px 20px; border-top: 1px solid var(--pl); }
.av.sm { width: 24px; height: 24px; font-size: 10px; }
.kanban.k3 { grid-template-columns: repeat(3, minmax(230px, 1fr)); } .kc .who { display: flex; align-items: center; gap: 7px; } .late { color: var(--bad); font-weight: 600; }
.phone.wa .pt { background: #075E54; } .wab { background: #ECE5DD; display: grid; gap: 8px; align-content: start; min-height: 360px; }
.wam { justify-self: start; max-width: 88%; background: #fff; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; display: grid; gap: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); } .wam small { justify-self: end; color: #667781; font-size: 11px; }
.wam.you { justify-self: end; background: #DCF8C6; } .waf { background: #F3F6F6; border-radius: 6px; padding: 7px 9px; font-size: 13px; }
.linkish { border: 0; background: none; text-align: start; padding: 0; display: grid; gap: 2px; } .linkish small { color: var(--brand); font-size: 12.5px; } .linkish[aria-current="true"] b { color: var(--brand); }
.qrbig { display: grid; justify-items: center; gap: 10px; padding: 16px; } .qrbig .qr { padding: 12px; background: #fff; border: 1px solid var(--pl); border-radius: 14px; min-width: 210px; min-height: 210px; }
.note-card.xl i { background: #E2F6EE; color: #107C41; font: 700 10.5px/1 var(--f-m); font-style: normal; }
.integ { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card.ig { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .card.ig .grow { display: grid; gap: 2px; min-width: 0; } .card.ig small { font-size: 12.5px; }
.igl { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-2); color: var(--brand); display: grid; place-items: center; font: 700 13px/1 var(--f-d); flex: none; }
@media (max-width: 960px) { .tchat { grid-template-columns: minmax(0, 1fr); } .tg { grid-auto-flow: column; grid-auto-columns: 160px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--pl); } .kanban.k3 { grid-template-columns: repeat(3, 240px); } .bub { max-width: 94%; } }
.card.ig .grow { flex: 1; }

/* part 3: services, HR, stock, construction, scrap yards */
.shop-hero.sm { min-height: 150px; padding: 22px 26px; } .shop-hero.sm h2 { font-size: 24px; }
.cal { display: grid; min-width: 720px; font-size: 13px; }
.cal .ch { position: sticky; top: 0; background: #F7F8FA; padding: 10px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--pl); } .cal .ch small { display: block; color: var(--pm); font-size: 11.5px; }
.cal .ct { padding: 8px; color: var(--pm); font: 500 12px/1 var(--f-m); border-bottom: 1px solid #F0F2F5; }
.cs { margin: 3px; padding: 6px 8px; border-radius: 8px; border-inline-start: 3px solid var(--brand); background: var(--brand-2); display: grid; gap: 1px; position: relative; min-height: 46px; }
.cs small { color: var(--pm); font-size: 11.5px; } .cs.st-wait { border-color: #F59E0B; background: #FEF6E4; } .cs.st-done { border-color: #94A3B8; background: #F1F3F6; opacity: .75; } .cs.st-in { box-shadow: inset 0 0 0 1.5px var(--brand); }
.cs em { position: absolute; top: 5px; inset-inline-end: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--brand-ink); background: var(--brand); padding: 2px 6px; border-radius: 99px; }
.cs.free { border: 1px dashed var(--pl); background: none; color: var(--pm); font-size: 12px; opacity: 0; } .cs.free:hover, .cs.free:focus-visible { opacity: 1; color: var(--brand); border-color: var(--brand); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; }
.svc-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .card.svc { padding: 10px; display: grid; gap: 6px; } .svc-i { aspect-ratio: 16/10; border-radius: calc(var(--r) - 4px); background: #EEF0F4 center/cover; } .svc .pr { display: flex; justify-content: space-between; align-items: center; } .svc .pr span { font: 600 16px/1 var(--f-d); }
.posg { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .posg button { border: 1px solid var(--pl); background: #fff; border-radius: 12px; padding: 14px 10px; display: grid; gap: 4px; text-align: start; } .posg button:hover { border-color: var(--brand); background: var(--brand-2); } .posg span { color: var(--brand); font-weight: 600; }
.appimg { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; background: #EEF0F4; }
.slots { display: flex; gap: 6px; flex-wrap: wrap; } .slots span { border: 1px solid var(--pl); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; } .slots .on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.prog { display: block; position: relative; height: 7px; border-radius: 5px; background: #EEF0F4; margin-top: 7px; overflow: visible; } .prog em { display: block; height: 100%; border-radius: 5px; background: var(--brand); } .prog u { position: absolute; top: -3px; width: 2px; height: 13px; background: #0F1729; }
.prog.sm { display: inline-block; width: 70px; vertical-align: middle; margin: 0 6px 0 0; }
.datebox { width: 46px; text-align: center; border-radius: 10px; background: var(--brand-2); color: var(--brand); padding: 6px 0; flex: none; } .datebox b { display: block; font: 600 18px/1 var(--f-d); } .datebox small { font-size: 11px; }
.lmap { width: 100%; height: auto; border-radius: 10px; display: block; } .mapcard { padding: 8px; } .mpin { cursor: pointer; }
.scanbox { aspect-ratio: 1; border-radius: 14px; background: #0F1729; position: relative; overflow: hidden; } .scanbox::before { content: ""; position: absolute; inset: 22%; border: 2px solid #34C38F; border-radius: 10px; } .scanbox i { position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: #34C38F; box-shadow: 0 0 12px #34C38F; animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: 25%; } to { top: 75%; } }
.diaryimg { aspect-ratio: 16/8; border-radius: 10px; background: #EEF0F4 center/cover; }
.stars { color: #F59E0B; letter-spacing: 1px; font-size: 13px; } .stars i { color: #D5DAE3; font-style: normal; }
.card.yard { padding: 0; overflow: hidden; display: grid; align-content: start; } .yimg { position: relative; aspect-ratio: 16/8; background: #EEF0F4 center/cover; } .yimg .tag { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 6px; } .yimg .tag.warn { background: #F59E0B; color: #1F1300; }
.yb { padding: 16px; display: grid; gap: 10px; } .yb > b { font: 600 18px/1.2 var(--f-d); } .yb > small { color: var(--pm); }
.mtags { display: flex; flex-wrap: wrap; gap: 6px; } .mtags span, .mtags button { font-size: 12.5px; padding: 4px 10px; border-radius: 99px; background: #EEF0F4; border: 0; color: var(--pf); } .mtags button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.pricegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .card.pz { display: grid; gap: 4px; } .pz small { color: var(--pm); } .pz b { font: 600 24px/1.2 var(--f-d); } .pz b i { font: 400 13px/1 var(--f-b); color: var(--pm); font-style: normal; } .pz .up { color: var(--ok); font-size: 12.5px; } .pz .dn { color: var(--bad); font-size: 12.5px; }
.pboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .card.plan { display: grid; gap: 10px; align-content: start; } .card.plan.hot { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .plan .pp { font: 600 28px/1.1 var(--f-d); } .plan .pp small { font: 400 14px/1 var(--f-b); color: var(--pm); } .plan ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 14px; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* v3.1: setup "select all", financial statements, payroll, invoices and statements */
.opt.allpk { width: 100%; margin-top: 2px; border-style: dashed; } .opt.allpk[aria-pressed="true"] { border-style: solid; }
.fsc { padding: 28px 32px; max-width: 980px; }
.fs-h { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 2px solid var(--pf); margin-bottom: 4px; }
.fs-h .lg { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #F4F5F8; } .fs-h .lg img { width: 100%; height: 100%; object-fit: contain; } .fs-h .lg .ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 600 19px/1 var(--f-d); }
.fs-h b { font-size: 13px; color: var(--pm); text-transform: uppercase; letter-spacing: .06em; } :lang(ar) .fs-h b { text-transform: none; letter-spacing: 0; } .fs-h h2 { font-size: 22px; margin: 2px 0; } .fs-h small { color: var(--pm); }
table.fs { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.fs th { font-size: 12px; color: var(--pm); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--pl); text-align: start; } .fs th.r, .fs td.r { text-align: end; width: 150px; white-space: nowrap; } .fs .nt { width: 56px; text-align: center; color: var(--pm); font-size: 12px; }
.fs td { padding: 6px 8px; } .fs tr.sub td { font-weight: 600; border-top: 1px solid var(--pf); } .fs tr.tot td { font-weight: 700; border-top: 1px solid var(--pf); border-bottom: 3px double var(--pf); font-size: 15px; }
.fs tr.grp td { font: 600 15px/1.3 var(--f-d); padding-top: 18px; color: var(--brand); } .fs tr.sg td { font-weight: 600; font-style: italic; color: var(--pm); padding-top: 12px; font-size: 13px; }
.fs-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .fs-k div { background: #F7F8FA; border-radius: 10px; padding: 10px 12px; } .fs-k small { display: block; color: var(--pm); font-size: 12px; } .fs-k b { font: 600 18px/1.3 var(--f-d); }
.fs-n { color: var(--pm); font-size: 12px; margin-top: 14px; }
.fsc.pb { page-break-before: always; }
.stat-r { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .stat-r .card { padding: 12px 14px; } .stat-r small { color: var(--pm); font-size: 12.5px; display: block; } .stat-r b { font: 600 22px/1.2 var(--f-d); }
.paytabs { margin-bottom: 0; } table.preg { font-size: 13.5px; font-variant-numeric: tabular-nums; } .preg tfoot td { font-weight: 700; background: #F7F8FA; }
.eosk { margin: 6px 0 12px; } .eos-big { background: var(--brand); color: var(--brand-ink); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; margin-bottom: 8px; } .eos-big b { font: 600 26px/1.2 var(--f-d); }
.card.linkcard { display: flex; align-items: center; gap: 14px; } .linkcard .grow p { margin: 2px 0 0; font-size: 13.5px; }
/* payslip */
.ps { display: grid; gap: 14px; font-size: 13.5px; } .ps-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--brand); }
.ps-h .lg { width: 50px; height: 50px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; background: #F4F5F8; } .ps-h .lg img { width: 100%; height: 100%; object-fit: contain; } .ps-h .lg .ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 600 18px/1 var(--f-d); }
.ps-h b { font: 600 16px/1.2 var(--f-d); display: block; } .ps-h small { color: var(--pm); } .ps-t { text-align: end; } .ps-t h2 { font-size: 20px; color: var(--brand); }
.ps-m, .ps-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; background: #F7F8FA; border-radius: 10px; padding: 12px 14px; } .ps-m small, .ps-f small { display: block; color: var(--pm); font-size: 11.5px; } .ps-m b, .ps-f b { font-size: 13.5px; }
.ps-t2 { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ps-t2 th { background: var(--brand); color: var(--brand-ink); text-align: start; padding: 8px 10px; font-size: 12.5px; } .ps-t2 td { padding: 7px 10px; border-bottom: 1px solid #EEF0F4; } .ps-t2 .r { text-align: end; } .ps-t2 tfoot td { font-weight: 700; border-top: 1.5px solid var(--pf); }
.ps-net { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1.5px solid var(--brand); border-radius: 12px; padding: 12px 16px; } .ps-net small { display: block; color: var(--pm); font-size: 12px; } .ps-net b { font: 600 24px/1.3 var(--f-d); color: var(--brand); } .ps-net .qr img, .ps-net .qr canvas { width: 72px !important; height: 72px !important; }
.ps-note { color: var(--pm); font-size: 11.5px; margin: 0; }
/* professional invoice and statement */
.pinv { background: #fff; display: grid; gap: 16px; font-size: 13.5px; color: #17112B; }
.pdwrap .pinv { max-width: 860px; margin: 0 auto; padding: 30px 32px; box-shadow: 0 20px 50px -30px rgba(15, 23, 41, .5); }
.pi-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--brand); }
.pi-co { display: flex; gap: 12px; align-items: center; } .pi-co .lg { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #F4F5F8; flex: none; } .pi-co .lg img { width: 100%; height: 100%; object-fit: contain; } .pi-co .lg .ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 600 20px/1 var(--f-d); }
.pi-co b { font: 600 16px/1.2 var(--f-d); display: block; } .pi-co small { color: #6B6585; font-size: 12px; } .pi-t { text-align: end; display: grid; gap: 4px; justify-items: end; } .pi-t h2 { font-size: 21px; color: var(--brand); } .pi-t small { color: #6B6585; }
.pi-m { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .pi-to { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: #FAF9FD; border: 1px solid #ECE8F5; } .pi-to small { color: #6B6585; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; } .pi-to span { color: #4B4466; font-size: 13px; }
.pi-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; align-content: start; } .pi-kv span { color: #6B6585; font-size: 12.5px; } .pi-kv b { text-align: end; font-size: 13px; }
.pi-tb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; } .pi-tb th { background: #F3F0FA; color: #2A1660; padding: 8px; text-align: start; font-size: 11.5px; border-top: 2px solid var(--brand); white-space: nowrap; } .pi-tb td { padding: 8px; border-bottom: 1px solid #EEEAF5; } .pi-tb .r { text-align: end; white-space: nowrap; } .pi-tb tfoot td { font-weight: 700; border-top: 1.5px solid #17112B; } .pi-tb tr.ob td { background: #FAF9FD; }
.pi-b { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .pi-pay { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #ECE8F5; border-radius: 10px; font-size: 12.5px; color: #4B4466; } .pi-pay b { color: #17112B; } .pi-pay small { color: #6B6585; margin-top: 4px; }
.pi-tot { display: grid; gap: 2px; font-variant-numeric: tabular-nums; } .pi-tot div { display: flex; justify-content: space-between; padding: 5px 8px; } .pi-tot .g { border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); color: var(--brand); font: 600 16px/1.3 var(--f-d); padding: 9px 8px; } .pi-tot .g2 { background: #F3F0FA; font-weight: 700; }
.pi-w { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px; background: #FAF9FD; border-radius: 8px; font-style: italic; color: #4B4466; } .pi-w small { font-style: normal; color: #6B6585; }
.pi-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: end; border-top: 1px solid #EEEAF5; padding-top: 14px; } .pi-f small { color: #6B6585; font-size: 12px; display: block; } .pi-sig { display: grid; gap: 4px; justify-items: center; min-width: 170px; } .pi-sig i { width: 100%; border-bottom: 1px solid #17112B; height: 32px; }
.pi-f .qr img, .pi-f .qr canvas { width: 80px !important; height: 80px !important; }
.aging { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #ECE8F5; border-radius: 10px; overflow: hidden; } .aging div { padding: 10px 12px; border-inline-end: 1px solid #ECE8F5; } .aging div:last-child { border: 0; } .aging small { display: block; color: #6B6585; font-size: 11.5px; } .aging b { font-variant-numeric: tabular-nums; } .aging .t { background: var(--brand); color: var(--brand-ink); } .aging .t small { color: inherit; opacity: .85; }
.soa-bar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .soa-bar .field { min-width: 260px; } .soa-bar .sp { flex: 1; }
@media (max-width: 960px) { .stat-r { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fs-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pi-b, .pi-m { grid-template-columns: minmax(0, 1fr); } .ps-m, .ps-f { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fsc { padding: 16px 12px; } .fs { font-size: 12.5px; } .fs th.r, .fs td.r { width: auto; } .fs .nt { display: none; } .pdwrap .pinv { padding: 16px 12px; } .pi-h { flex-direction: column; } .pi-t { text-align: start; justify-items: start; } .aging { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pi-f { grid-template-columns: minmax(0, 1fr); } .ps-h { grid-template-columns: auto minmax(0, 1fr); } .ps-t { grid-column: 1 / -1; text-align: start; } }
@media print { .noprint { display: none !important; } .fsc { max-width: none; border: 0; box-shadow: none; padding: 0; } }
.box.wide:has(.pinv), .box.wide:has(.ps) { max-width: 980px; } .pi-tb td.mono { white-space: nowrap; }
.side { scrollbar-width: thin; } .side nav button { min-width: 0; } .side .cnt, .side .badge { flex: none; } .side nav .fav { width: 22px !important; }

/* v3.2: full website preview */
.sitectl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sitectl .pages { flex-wrap: wrap; }
.sitepv2 { border-radius: 14px; overflow: hidden; border: 1px solid var(--pl); background: #fff; box-shadow: 0 30px 70px -40px rgba(15, 23, 41, .55); margin: 0 auto; width: 100%; transition: max-width .3s; }
.sitepv2.dev-phone { max-width: 400px; border-radius: 34px; border: 10px solid #0F1729; }
.sitepv2 .sbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEF0F4; } .sitepv2 .sbar i { width: 10px; height: 10px; border-radius: 50%; background: #D0D5DE; } .sitepv2 .sbar span { margin-inline-start: 10px; background: #fff; border-radius: 6px; padding: 5px 12px; font: 12px/1 var(--f-m); color: var(--pm); flex: 1; max-width: 420px; }
.dev-phone .sbar i { display: none; } .dev-phone .sbar span { margin: 0; text-align: center; max-width: none; }
.sframe { height: 74vh; min-height: 520px; overflow-y: auto; overflow-x: hidden; container-type: inline-size; scroll-behavior: smooth; }
.dev-phone .sframe { height: 720px; }
.sitepv2.full { position: fixed; inset: 0; z-index: 80; max-width: none; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.sitepv2.full .sframe { height: auto; flex: 1; } .sitepv2.full.dev-phone { inset: 10px calc(50% - 200px); border-radius: 34px; border: 10px solid #0F1729; } .sitepv2.full .sbar .btn { margin-inline-start: auto; }
html.noscroll { overflow: hidden; }

.wsite { --wbg: #fff; --walt: #F5F7FA; --wfg: #0F1729; --wmut: #5E687C; --wcard: #fff; --wline: #E6E9EF; --wr: 14px; --whf: var(--f-d); --whw: 600; position: relative; background: var(--wbg); color: var(--wfg); font: 400 15.5px/1.6 var(--f-b); }
.wsite.wl-2 { --wbg: #FFFCF7; --walt: color-mix(in srgb, var(--brand) 6%, #FFFCF7); --wcard: #fff; --wline: #EFE8DD; --wr: 26px; --whf: "Instrument Serif", Georgia, serif; --whw: 400; }
.wsite.wl-3 { --wbg: #0A0F1C; --walt: #0E1526; --wfg: #EEF1F7; --wmut: #9AA5BB; --wcard: #121A2B; --wline: #1E2A42; --wr: 6px; }
:lang(ar) .wsite { font-family: var(--f-ar); } :lang(ar) .wsite { --whf: var(--f-ar); --whw: 600; }
.wsite .wc { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.wsite h1, .wsite h2 { font-family: var(--whf); font-weight: var(--whw); letter-spacing: -0.02em; line-height: 1.08; } .wl-2 h1, .wl-2 h2 { letter-spacing: 0; }
.wsite a { cursor: pointer; } .wsite img { display: block; max-width: 100%; }
.wb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--wline); background: var(--wcard); color: var(--wfg); font: 600 14.5px/1 var(--f-b); padding: 13px 20px; border-radius: calc(var(--wr) * .6); cursor: pointer; }
.wb.pri { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .wb.wa { background: #25D366; border-color: #25D366; color: #08311A; } .wb.inv { background: #fff; color: #0F1729; border-color: #fff; } .wb.sm { padding: 9px 14px; font-size: 13.5px; }
.wl-2 .wb { border-radius: 99px; } .wb:hover { filter: brightness(1.06); }
.we { font: 600 12px/1.3 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); } .wl-3 .we { color: color-mix(in srgb, var(--brand) 55%, #fff); } :lang(ar) .we { font-family: var(--f-ar); letter-spacing: 0; }
.wnav { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--wbg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wline); }
.wnav .wc { display: flex; align-items: center; gap: 22px; height: 70px; } .wnav nav { display: flex; gap: 22px; font-size: 14.5px; } .wnav nav a { color: var(--wmut); } .wnav nav a[aria-current] { color: var(--wfg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); padding-bottom: 4px; }
.wlogo { display: flex; align-items: center; gap: 10px; color: var(--wfg); } .wlogo .sl { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--brand); } .wlogo .sl img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .wlogo .sl .ph { color: #fff; font: 600 14px/1 var(--f-d); } .wlogo b { font: 600 17px/1.1 var(--f-d); }
.wsp { flex: 1; } .wlang { border: 1px solid var(--wline); background: none; color: var(--wfg); border-radius: 8px; padding: 6px 10px; font-family: var(--f-ar); font-size: 13px; }
.wcartb { position: relative; border: 0; background: none; color: var(--wfg); padding: 6px; } .wcartb svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; } .wcartb em { position: absolute; top: -2px; inset-inline-end: -4px; background: var(--brand); color: var(--brand-ink); font: 700 10px/1 var(--f-b); padding: 3px 5px; border-radius: 99px; font-style: normal; }
.wburger { display: none; border: 1px solid var(--wline); background: none; color: var(--wfg); border-radius: 8px; padding: 6px 10px; font-size: 16px; }
.wmob { display: none; } .menu-open .wmob { display: grid; position: sticky; top: 70px; z-index: 4; background: var(--wbg); border-bottom: 1px solid var(--wline); padding: 8px 20px 14px; } .wmob a { padding: 10px 0; border-bottom: 1px solid var(--wline); }
.whero { position: relative; overflow: hidden; } .whero .wtxt { display: grid; gap: 18px; align-content: center; } .whero h1 { font-size: 58px; } .whero p { font-size: 18px; max-width: 560px; } .wcta { display: flex; flex-wrap: wrap; gap: 10px; }
.whero.cover { color: #fff; background-size: cover; background-position: center; } .whero.cover .wc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 40px; padding-top: 96px; padding-bottom: 96px; } .whero.cover p { color: rgba(255, 255, 255, .88); }
.wbadges { display: flex; flex-wrap: wrap; gap: 8px; } .wbadges span { font-size: 12.5px; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); } .split .wbadges span { background: var(--wcard); border-color: var(--wline); color: var(--wmut); }
.wquick { align-self: center; background: #fff; color: #0F1729; border-radius: var(--wr); padding: 22px; display: grid; gap: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); } .wquick b { font: 600 18px/1.2 var(--f-d); } .wquick select, .wquick input, .wformx input, .wformx select, .wformx textarea, .wnews input { border: 1px solid #E1E5EC; border-radius: 9px; padding: 11px 12px; font: inherit; font-size: 14.5px; background: #fff; color: #0F1729; width: 100%; } .wquick small { color: #5E687C; }
.whero.split { background: var(--walt); } .whero.split .wc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 70px; padding-bottom: 70px; } .wl-2 .whero h1 { font-size: 66px; line-height: 1; } .whero.split p { color: var(--wmut); }
.wimg { position: relative; } .wimg img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; border-radius: var(--wr); } .wfloat { position: absolute; bottom: 24px; inset-inline-start: -20px; background: var(--wcard); border-radius: 16px; padding: 14px 18px; box-shadow: 0 20px 40px -20px rgba(15, 23, 41, .4); display: grid; } .wfloat b { font: 600 26px/1.1 var(--f-d); color: var(--brand); } .wfloat small { color: var(--wmut); } .wfloat.b2 { bottom: auto; top: 28px; inset-inline: auto -16px; }
.whero.bold { color: #fff; background: #070B15; } .whero.bold::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 21, .55), #070B15 92%), var(--hi) center/cover; opacity: .9; } .whero.bold .wc { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 40px; padding-top: 110px; padding-bottom: 100px; } .whero.bold h1 { font-size: 70px; text-transform: none; } .whero.bold p { color: #B9C2D4; }
.wglow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 65%); inset-inline-end: -120px; top: -160px; opacity: .55; pointer-events: none; }
.wtrust { border-bottom: 1px solid var(--wline); } .wtrust .wc { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; } .wtrust small { color: var(--wmut); } .wtrust div { display: flex; flex-wrap: wrap; gap: 26px; } .wtrust span { font: 700 15px/1 var(--f-d); color: var(--wmut); opacity: .75; letter-spacing: -.01em; }
.wstats { background: var(--brand); color: var(--brand-ink); } .wstats .wc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 34px; padding-bottom: 34px; } .wstats b { display: block; font: 600 34px/1.1 var(--f-d); } .wstats span { opacity: .85; font-size: 14px; }
.wl-3 .wstats { background: var(--walt); color: var(--wfg); border-block: 1px solid var(--wline); } .wl-3 .wstats b { color: color-mix(in srgb, var(--brand) 60%, #fff); }
.ws { padding: 80px 0; } .ws:nth-of-type(even) { background: var(--walt); } .wh { display: grid; gap: 10px; margin-bottom: 34px; max-width: 640px; } .wh h2 { font-size: 40px; } .wl-2 .wh h2 { font-size: 46px; } .wh p { color: var(--wmut); font-size: 16.5px; }
.wgrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .wgrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wcard { background: var(--wcard); border: 1px solid var(--wline); border-radius: var(--wr); padding: 22px; display: grid; gap: 10px; align-content: start; } .wci { aspect-ratio: 16/9; border-radius: calc(var(--wr) * .7); background: #EEF0F4 center/cover; margin: -8px -8px 6px; } .wcard i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, transparent); } .wcard i svg { width: 22px; height: 22px; stroke: var(--brand); fill: none; stroke-width: 1.9; } .wl-3 .wcard i svg { stroke: color-mix(in srgb, var(--brand) 55%, #fff); }
.wcard b { font: 600 18px/1.25 var(--f-d); } .wcard p { color: var(--wmut); font-size: 14.5px; margin: 0; } .wlink { color: var(--brand); font-weight: 600; font-size: 14px; } .wl-3 .wlink { color: color-mix(in srgb, var(--brand) 55%, #fff); }
.wl-2 .wcard { border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -26px rgba(60, 40, 10, .35); } .wl-3 .wcard:hover { border-color: var(--brand); }
.wstep { display: grid; gap: 8px; padding: 26px; border-radius: var(--wr); border: 1px solid var(--wline); background: var(--wcard); } .wstep em { font: 600 44px/1 var(--f-d); font-style: normal; color: var(--brand); opacity: .9; } .wstep b { font: 600 19px/1.2 var(--f-d); } .wstep p { color: var(--wmut); margin: 0; }
.wsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .wsplit > img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--wr); } .wsplit.narrow { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.wcheck { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; } .wcheck li { padding-inline-start: 30px; position: relative; } .wcheck li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 12px; display: grid; place-items: center; }
.wchips { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 22px; } .wchips span { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--wline); font-size: 13.5px; } .wchips .on { background: var(--wfg); color: var(--wbg); border-color: var(--wfg); }
.wprod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .wprod.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wprod article { display: grid; gap: 6px; align-content: start; } .wprod small { color: var(--wmut); font-size: 12.5px; } .wprod b { font: 600 16px/1.3 var(--f-d); }
.wpi { position: relative; aspect-ratio: 1; border-radius: var(--wr); overflow: hidden; background: #EEF0F4; } .wprop .wpi { aspect-ratio: 16/10; } .wpi img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .wprod article:hover .wpi img { transform: scale(1.05); }
.wpi > span { position: absolute; top: 12px; inset-inline-start: 12px; background: #0F1729; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; } .wpi > span.s { background: #DC2626; } .wheart { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: #0F1729; font-size: 16px; }
.wpr { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 16px/1 var(--f-d); } .wpr small { font: 400 13px/1 var(--f-b); color: var(--wmut); margin-inline-end: auto; } .wtab { color: #2F7D5B !important; } .wmeta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--wmut); font-size: 13.5px; }
.wbanner { border-radius: var(--wr); min-height: 260px; padding: 40px; display: grid; align-content: center; gap: 12px; color: #fff; background-size: cover; background-position: center; } .wbanner h2 { font-size: 40px; } .wbanner p { color: rgba(255, 255, 255, .85); } .wbanner .wb { justify-self: start; }
.wplan { position: relative; display: grid; gap: 12px; align-content: start; padding: 24px; border: 1px solid var(--wline); border-radius: var(--wr); background: var(--wcard); } .wplan.hot { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .wplan b { font: 600 17px/1.3 var(--f-d); } .wpp { font: 600 28px/1.1 var(--f-d); } .wpp small { font: 400 13px/1 var(--f-b); color: var(--wmut); } .wplan .wcheck { margin: 0; font-size: 14px; } .wtag { position: absolute; top: -11px; inset-inline-start: 20px; background: var(--brand); color: var(--brand-ink); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.wml { display: grid; gap: 4px; } .wml > div:not(.wcta) { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--wline); } .wml span { display: grid; } .wml span small { color: var(--wmut); font-size: 12.5px; } .wml i { flex: 1; } .wml > div > span.ltr { font: 600 16px/1 var(--f-d); color: var(--brand); } .wml .wcta { margin-top: 18px; }
.wprice { padding: 20px; border-radius: var(--wr); border: 1px solid var(--wline); background: var(--wcard); display: grid; gap: 4px; } .wprice small { color: var(--wmut); } .wprice b { font: 600 28px/1.2 var(--f-d); } .wprice b i { font: 400 13px/1 var(--f-b); color: var(--wmut); font-style: normal; } .wprice .up { color: #0E9F6E; font-size: 13px; } .wprice .dn { color: #DC2626; font-size: 13px; }
.wq { margin: 0; padding: 26px; border-radius: var(--wr); background: var(--wcard); border: 1px solid var(--wline); display: grid; gap: 14px; align-content: space-between; } .wst { color: #F59E0B; letter-spacing: 2px; } .wq blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; } .wl-2 .wq blockquote { font: 400 22px/1.35 var(--whf); } .wq figcaption { display: flex; align-items: center; gap: 12px; } .wq img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .wq figcaption span { display: grid; } .wq small { color: var(--wmut); }
.wmas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 12px; } .wmas figure { margin: 0; border-radius: var(--wr); overflow: hidden; background: #EEF0F4; } .wmas img { width: 100%; height: 100%; object-fit: cover; } .wmas .g0 { grid-column: span 2; grid-row: span 2; } .wmas .g3 { grid-column: span 2; }
.wband { background: var(--brand); color: var(--brand-ink); } .wl-3 .wband { background: linear-gradient(120deg, var(--brand), #0A0F1C); } .wband .wc { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 56px; } .wband h2 { font-size: 38px; } .wband p { opacity: .9; margin: 6px 0 0; }
.wacc { display: grid; gap: 10px; } .wacc details { border: 1px solid var(--wline); border-radius: calc(var(--wr) * .7); background: var(--wcard); padding: 16px 18px; } .wacc summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; } .wacc summary::after { content: "+"; color: var(--brand); font-size: 20px; line-height: 1; } .wacc details[open] summary::after { content: "−"; } .wacc p { color: var(--wmut); margin: 10px 0 0; }
.wmem { margin: 0; display: grid; gap: 4px; } .wmem img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--wr); margin-bottom: 8px; } .wmem small { color: var(--wmut); }
.wlead { font-size: 18px; color: var(--wmut); } .wvals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .wvals span { padding: 8px 14px; border-radius: 99px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-weight: 600; font-size: 14px; } .wl-3 .wvals span { color: #fff; }
.wtl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .wtl li { border-top: 3px solid var(--brand); padding-top: 14px; display: grid; gap: 4px; } .wtl b { font: 600 26px/1 var(--f-d); }
.wpage { padding: 70px 0 30px; background: var(--walt); } .wpage .wc { display: grid; gap: 10px; } .wpage h1 { font-size: 52px; }
.wformx { display: grid; gap: 12px; } .wformx label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--wmut); } .w2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wformx .wb { justify-self: start; } .wformx .wh { margin-bottom: 10px; }
.winfo { display: grid; gap: 16px; } .wmap svg { width: 100%; border-radius: var(--wr); display: block; } .wci2 { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .wci2 li { display: flex; gap: 12px; align-items: center; } .wci2 svg { width: 20px; height: 20px; stroke: var(--brand); fill: none; stroke-width: 1.9; flex: none; }
.wfoot { background: #0B1120; color: #B9C2D4; padding-top: 60px; font-size: 14px; } .wl-3 .wfoot { background: #05080F; border-top: 1px solid var(--wline); } .wfoot .wc:first-child { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 40px; } .wfoot b { color: #fff; display: block; margin-bottom: 10px; } .wfoot a { display: block; color: #B9C2D4; padding: 3px 0; } .wfoot .wlogo b { margin: 0; } .wfoot p { color: #8E99AF; margin: 12px 0; }
.wsoc { display: flex; gap: 8px; } .wsoc span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #263248; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; } .wnews div { display: flex; gap: 6px; } .wnews input { background: #121A2B; border-color: #263248; color: #fff; }
.wf2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid #1C2638; font-size: 12.5px; color: #7D889E; } .wpay { display: flex; gap: 6px; } .wpay i { font-style: normal; font-weight: 700; font-size: 11px; padding: 4px 7px; border-radius: 5px; background: #fff; color: #0F1729; }
.wfab { position: sticky; bottom: 18px; float: right; margin: -76px 18px 18px 0; width: 54px; height: 54px; border-radius: 50%; border: 0; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4); z-index: 6; } [dir="rtl"] .wfab { float: left; margin: -76px 0 18px 18px; } .wfab svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; }

@container (max-width: 980px) {
  .wsite .wnav nav { display: none; } .wsite .wburger { display: inline-flex; } .wsite .hidem { display: none; }
  .whero.cover .wc, .whero.bold .wc, .whero.split .wc { grid-template-columns: minmax(0, 1fr); } .wsite .whero h1 { font-size: 44px; } .wsite.wl-2 .whero h1 { font-size: 50px; }
  .wsite .wgrid3, .wsite .wgrid4, .wsite .wprod { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wsite .wsplit, .wsite .wsplit.narrow { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wsite .wfoot .wc:first-child { grid-template-columns: 1fr 1fr; } .wsite .wtl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .wsite .wc { padding: 0 18px; } .wsite .ws { padding: 52px 0; } .wsite .wh h2, .wsite.wl-2 .wh h2 { font-size: 30px; } .wsite .whero h1, .wsite.wl-2 .whero h1, .wsite .whero.bold h1 { font-size: 34px; } .wsite .whero p { font-size: 16px; }
  .whero.cover .wc, .whero.bold .wc { padding-top: 56px; padding-bottom: 56px; } .whero.split .wc { padding-top: 40px; padding-bottom: 40px; } .wfloat { inset-inline-start: 10px; } .wfloat.b2 { inset-inline-end: 10px; }
  .wsite .wgrid3, .wsite .wgrid4, .wsite .wprod.two { grid-template-columns: minmax(0, 1fr); } .wsite .wprod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wsite .wstats .wc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wsite .wstats b { font-size: 26px; } .wsite .wmas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; } .wsite .wmas .g3 { grid-column: span 1; }
  .wsite .wfoot .wc:first-child { grid-template-columns: minmax(0, 1fr); } .wsite .w2 { grid-template-columns: minmax(0, 1fr); } .wsite .wband h2, .wsite .wbanner h2, .wsite .wpage h1 { font-size: 30px; } .wsite .wbanner { padding: 24px; } .wsite .wtrust div { gap: 14px; } .wsite .wlogo b { font-size: 15px; }
}
@media (max-width: 620px) { .sframe { height: 70vh; min-height: 460px; } .sitepv2.dev-phone { border-width: 6px; } .sitepv2.full.dev-phone { inset: 0; border-radius: 0; border: 0; } }

/* ============ v3.3 ============ */
/* QR codes: one size, one place, with a label */
.qr[data-l] { display: grid; justify-items: center; gap: 4px; flex: none; }
.qr[data-l]::after { content: attr(data-l); font: 500 10.5px/1.2 var(--f-b); color: #6B6585; text-align: center; }
.pinv .qr img, .pinv .qr canvas, .pd-f .qr img, .pd-f .qr canvas, .ps-net .qr img, .ps-net .qr canvas, .doc .qr img, .doc .qr canvas { width: 84px !important; height: 84px !important; }
.pi-f { grid-template-columns: minmax(0, 1fr) auto 96px; } .pi-f .qr { justify-self: end; } .ps-net .qr, .pd-f .qr { margin-inline-start: auto; }
.qr img { display: block; } .qr canvas { display: none !important; }
.qrbig .qr[data-l]::after { font-size: 12.5px; }
.pi-einv { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; background: #E2F6EE; color: #08734F; } .pi-einv span svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; } .pi-einv b { display: block; font-size: 13px; } .pi-einv small { color: #2F6F55; font-size: 12px; }
/* top bar: search, role, bell */
.gsrch { position: relative; flex: 1; max-width: 360px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--pl); border-radius: 9px; background: #F7F8FA; color: var(--pm); }
.gsrch svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; } .gsrch input { border: 0; background: none; outline: none; font: inherit; font-size: 14px; width: 100%; color: var(--pf); }
.gres { position: absolute; top: calc(100% + 6px); inset-inline: 0; min-width: 300px; z-index: 30; background: var(--card); border: 1px solid var(--pl); border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(15, 23, 41, .35); padding: 6px; display: grid; max-height: 60vh; overflow: auto; }
.gres .gh { padding: 8px 8px 2px; color: var(--pm); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; } .gres button { border: 0; background: none; text-align: start; padding: 8px; border-radius: 8px; display: grid; } .gres button:hover { background: var(--brand-2); } .gres button span { color: var(--pm); font-size: 12.5px; } .gres p { padding: 10px; margin: 0; }
.rolesel { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pm); } .rolesel select { border: 1px solid var(--pl); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; background: var(--card); color: var(--pf); }
.top button.bell { border: 1px solid var(--pl); cursor: pointer; }
.rolebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13.5px; } .rolebar svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } .rolebar span { flex: 1; }
/* guided tour */
.guide { position: fixed; z-index: 45; inset-inline-start: calc(268px + 16px); bottom: 16px; width: 320px; background: var(--ink); color: var(--fg); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(5, 9, 18, .6); overflow: hidden; }
.guide-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: none; color: inherit; text-align: start; } .guide-h small { display: block; color: var(--muted); font-size: 12px; } .guide-h i { margin-inline-start: auto; font-style: normal; opacity: .7; }
.ring { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); } .ring b { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; font: 700 11.5px/1 var(--f-b); }
.guide ol { list-style: none; margin: 0; padding: 0 8px 10px; display: grid; gap: 2px; } .guide li button { width: 100%; display: flex; gap: 10px; align-items: center; border: 0; background: none; color: #DDE3EE; text-align: start; padding: 8px; border-radius: 8px; font-size: 13.5px; } .guide li button:hover { background: rgba(255, 255, 255, .07); }
.guide li i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #46536C; flex: none; display: grid; place-items: center; font-style: normal; font-size: 11px; } .guide li.ok i { background: var(--ok); border-color: var(--ok); color: #fff; } .guide li.ok button { color: #8E99AF; text-decoration: line-through; }
.tour ~ .guide { display: none; }
/* talk to us + phone bottom nav */
.talkfab { position: fixed; z-index: 44; inset-inline-end: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; border: 0; background: #25D366; color: #08311A; font-weight: 700; font-size: 14px; padding: 12px 16px; border-radius: 99px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); } .talkfab svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.tour ~ .talkfab { bottom: 210px; }
.mnav { display: none; }
@media (max-width: 960px) {
  .guide { inset-inline-start: 12px; bottom: 76px; width: min(320px, calc(100% - 24px)); } .talkfab { bottom: 78px; inset-inline-end: 12px; padding: 11px; } .talkfab span { display: none; }
  .mnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--pl); }
  .mnav button { position: relative; border: 0; background: none; display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--pm); padding: 4px 0; } .mnav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; } .mnav em { position: absolute; top: 0; inset-inline-end: 22%; background: var(--bad); color: #fff; font: 700 9.5px/1 var(--f-b); font-style: normal; padding: 2px 5px; border-radius: 99px; }
  .view { padding-bottom: 96px; } .gsrch { display: none; } .rolesel span { display: none; } .top .allm { display: none; } .top .bell { display: none; }
}
/* app-style phone */
.phone.app .scr { display: flex; flex-direction: column; }
.phone.app .sb { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 4px; font-size: 12px; } .phone.app .isl { width: 84px; height: 22px; border-radius: 99px; background: #0B1322; } .phone.app .sig i { display: inline-block; width: 20px; height: 9px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; vertical-align: middle; } .phone.app .sig i::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: currentColor; border-radius: 1px; }
.phone.app .pt { align-items: center; } .phone.app .pt small { display: block; opacity: .85; font-size: 12px; } .phone.app .pbell { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; } .phone.app .pbell svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.phone.app .pb { flex: 1; } .phone.app .tabs { border-top: 1px solid #EEF0F4; background: #fff; } .phone.app .tabs button[aria-pressed="true"] { color: var(--brand); }
.phone.app .hb { display: block; width: 120px; height: 5px; border-radius: 9px; background: #0B1322; margin: 6px auto 8px; opacity: .85; }
.ap-hero { background: var(--brand); color: var(--brand-ink); border-radius: 16px; padding: 14px; display: grid; gap: 2px; } .ap-hero b { font: 600 20px/1.2 var(--f-d); } .ap-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; } .ap-k div { background: rgba(255, 255, 255, .16); border-radius: 10px; padding: 8px; } .ap-k b { font-size: 16px; display: block; } .ap-k small { font-size: 10.5px; opacity: .9; }
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ap-grid button { border: 1px solid #EEF0F4; background: #fff; border-radius: 14px; padding: 12px 6px; display: grid; justify-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--pf); } .ap-grid i { width: 36px; height: 36px; border-radius: 12px; background: var(--brand-2); display: grid; place-items: center; } .ap-grid svg { width: 18px; height: 18px; stroke: var(--brand); fill: none; stroke-width: 2; }
.ap-card { border: 1px solid #EEF0F4; border-radius: 14px; padding: 12px; display: grid; gap: 2px; } .ap-card small { color: var(--pm); }
/* approval chains */
.flows { display: grid; gap: 12px; } .card.fl { display: grid; gap: 12px; } .fl-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .fl-h small { display: block; color: var(--pm); font-size: 13px; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .chain li { position: relative; display: grid; justify-items: center; gap: 4px; font-size: 12.5px; color: var(--pm); text-align: center; }
.chain li::before { content: ""; position: absolute; top: 13px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--pl); z-index: 0; } .chain li:first-child::before { display: none; } .chain li.ok::before, .chain li.now::before { background: var(--ok); }
.chain i { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--card); border: 2px solid var(--pl); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; } .chain li.ok i { background: var(--ok); border-color: var(--ok); color: #fff; } .chain li.now i { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-2); } .chain li.now span { color: var(--pf); font-weight: 600; }
.fl-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fl-a span { margin-inline-end: auto; font-size: 13.5px; }
tr.me td { background: color-mix(in srgb, var(--brand) 6%, transparent); }
/* leave calendar */
.calbar { display: flex; justify-content: flex-end; gap: 6px; margin: -40px 0 10px; } .calg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .cw { font-size: 11.5px; color: var(--pm); text-align: center; padding: 4px 0; }
.cd { min-height: 78px; border: 1px solid var(--pl); border-radius: 8px; padding: 5px; display: grid; align-content: start; gap: 3px; font-size: 11px; background: var(--card); } .cd.x { border: 0; background: none; } .cd.wkd { background: #F7F8FA; } .cd.hol { background: #FEF6E4; border-color: #F5D9A3; } .cd b { font-size: 12px; } .cd em { font-style: normal; color: var(--warn); font-size: 10.5px; }
.cd span { border-radius: 4px; padding: 1px 4px; background: var(--brand-2); color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd .lv-sick { background: #FEF3C7; color: #B45309; } .cd .lv-mat, .cd .lv-hajj { background: #E2F6EE; color: #08734F; } .cd .lv-unpaid { background: #EEF0F4; color: var(--pm); }
.progline { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; } .progline .prog { flex: 1; margin: 0; }
.item.chk2 { width: 100%; text-align: start; } .item.chk2 i { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--pl); flex: none; display: grid; place-items: center; font-style: normal; font-size: 12px; } .item.chk2.ok i { background: var(--ok); border-color: var(--ok); color: #fff; } .item.chk2.ok .grow { color: var(--pm); text-decoration: line-through; }
/* org chart */
.orgc { display: grid; justify-items: center; gap: 0; overflow-x: auto; } .ob { display: grid; justify-items: center; gap: 4px; padding: 12px 14px; border: 1px solid var(--pl); border-radius: 12px; background: var(--card); min-width: 150px; text-align: center; } .ob small { color: var(--pm); font-size: 12px; } .ob.top { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ol { width: 2px; height: 22px; background: var(--pl); } .orow { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; padding-top: 14px; border-top: 2px solid var(--pl); width: 100%; } .ocol { display: grid; gap: 8px; align-content: start; justify-items: stretch; } .ob.sm { grid-auto-flow: column; justify-content: start; text-align: start; padding: 8px 10px; min-width: 0; } .ob.sm b { font-size: 12.5px; display: block; }
/* accounting + summary */
.acmode { margin-bottom: 4px; } .card.acm { text-align: start; display: grid; gap: 4px; cursor: pointer; } .card.acm small { color: var(--pm); } .card.acm.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pinv.sum h3, .pinv.letter h3 { font-size: 15px; margin-bottom: 8px; } .sum-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .sum-k div { background: #F7F8FA; border-radius: 10px; padding: 10px 12px; } .sum-k small { display: block; color: #6B6585; font-size: 11.5px; } .sum-k b { font: 600 16px/1.3 var(--f-d); }
.sum-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .sum-g ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; color: #4B4466; } .sum-tl { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .sum-tl li { border-top: 3px solid var(--brand); padding-top: 8px; display: grid; gap: 2px; font-size: 13px; }
.pinv.letter p { margin: 0; line-height: 1.7; }
@media (max-width: 960px) { .orow { grid-template-columns: repeat(5, 170px); } .sum-k { grid-template-columns: 1fr 1fr; } .sum-tl { grid-template-columns: 1fr 1fr; } .chain li span { font-size: 11px; } .calbar { margin-top: 0; } .cd { min-height: 56px; } }
/* dark mode */
.shell.dark { --bg: #0A0F1C; --card: #111A2C; --pl: #1F2B42; --pf: #E8ECF4; --pm: #9AA5BB; --brand-2: color-mix(in srgb, var(--brand) 22%, #111A2C); --ok-bg: rgba(14, 159, 110, .16); --warn-bg: rgba(245, 158, 11, .14); --bad-bg: rgba(192, 38, 45, .18); --info-bg: rgba(36, 87, 197, .2); color: var(--pf); }
.shell.dark .main, .shell.dark.st-2 .main { background: var(--bg); } .shell.dark .top { background: rgba(10, 15, 28, .92); border-color: var(--pl); } .shell.dark .gsrch, .shell.dark .gsearch, .shell.dark .msearch { background: #0E1626; }
.shell.dark .kc, .shell.dark .mt, .shell.dark .chips button, .shell.dark .posg button, .shell.dark .seg button[aria-pressed="true"], .shell.dark .opt, .shell.dark .ap-grid button { background: #18233A; color: var(--pf); } .shell.dark .seg, .shell.dark .kcol, .shell.dark .cd.wkd, .shell.dark .fs-k div, .shell.dark .ps-m, .shell.dark .ps-f { background: #0E1626; }
.shell.dark th { color: var(--pm); } .shell.dark td, .shell.dark th { border-color: var(--pl); } .shell.dark .btn-l { background: #18233A; color: var(--pf); border-color: var(--pl); } .shell.dark select, .shell.dark input, .shell.dark textarea { background: #0E1626; color: var(--pf); border-color: var(--pl); }
.shell.dark .p-gray { background: #1C273D; } .shell.dark .tbl tfoot td, .shell.dark .preg tfoot td { background: #0E1626; } .shell.dark .fsc, .shell.dark .fs-h { color: var(--pf); } .shell.dark .fs tr.sub td, .shell.dark .fs tr.tot td { border-color: var(--pf); }
.shell.dark .pdwrap { background: #070B15; } .shell.dark .phone .scr { color: #0F1729; }
@media (max-width: 620px) { .top { gap: 6px; } .top .rolesel select { max-width: 104px; } .top [data-core="shuffle"], .top [data-core="look"], .top .me { display: none; } }
@media (max-width: 420px) { .pdwrap { overflow-x: auto; } .seg.wide button { white-space: normal; } .pd-t th, .pd-t td { padding: 6px 4px; font-size: 12px; } }

.gsrch { min-width: 190px; } @media (max-width: 1500px) { .rolesel span { display: none; } } @media (max-width: 1280px) { .top .per { display: none; } }
.shell.dark thead th, .shell.dark .tbl th { background: #0E1626; } .shell.dark .top .bell, .shell.dark .top button.bell { background: #18233A; } .shell.dark .top .bell svg { stroke: var(--pf); } .shell.dark .side { border-color: var(--pl); }
.guide:not(.open) { width: auto; } .guide:not(.open) .guide-h small { display: none; }
@media (max-width: 960px) { .top { flex-wrap: wrap; } .top .gsrch { display: flex; order: 9; flex-basis: 100%; max-width: none; min-width: 0; } .gres { min-width: 0; } }
.gres[hidden] { display: none !important; }