/* DokkanPOS licence server */
:root{--bg:#f3f6f4;--fg:#14201b;--mut:#5b6b64;--line:#e3ebe6;--card:#fff;--side:#0b3d2e;--side2:#0f4a38;--acc:#0a6a4c;--acc2:#18a058;--blue:#2d6fd1;--warn:#b25f00;--bad:#b42318;--r:16px}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif;background:var(--bg);color:var(--fg);font-size:14px}
body.res{--side:#102a4c;--side2:#173a66;--acc:#1f5fa8;--acc2:#2d6fd1;--bg:#f2f5f9}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
.mut{color:var(--mut)}.good{color:#12844a}.warn{color:var(--warn)}.bad{color:var(--bad)}
small{display:block;font-size:12px;color:var(--mut)}
code{background:#eef2f0;padding:1px 5px;border-radius:5px}
.app{display:flex;min-height:100vh}
.side{width:248px;flex:none;align-self:flex-start;min-height:100vh;background:var(--side);color:#d6e8df;display:flex;flex-direction:column;padding:22px 16px;gap:6px;position:sticky;top:0;height:100vh}
body.res .side{color:#d3e0f0}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand b{display:block;color:#fff;font-size:16px}.brand small{color:#8fb8a6}
.brand.dark b{color:var(--fg)}.brand.dark small{color:var(--mut)}
.logo{width:38px;height:38px;border-radius:10px;background:#18a058;display:grid;place-items:center;color:#fff;font-weight:700}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:inherit;font-size:14px;text-decoration:none}
.side nav a:hover{background:rgba(255,255,255,.07)}
.side nav a.on{background:var(--acc2);color:#fff;font-weight:600}
.me{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--side2);margin-bottom:10px}
.me b{display:block;color:#fff;font-size:13px}.me small{color:#8fb8a6}
.av{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--side);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.av.y{background:#f0b429;color:#3d2a00}.av.big{width:48px;height:48px;font-size:16px;background:var(--acc);color:#fff}
.sidefoot{margin-top:auto}
.lo{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:0;background:transparent;color:#ffb4ad;font:inherit;cursor:pointer}
.lo:hover{background:rgba(255,255,255,.07)}
.main{flex:1;min-width:0;padding:26px 32px;display:flex;flex-direction:column;gap:18px}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top h1{margin:0;font-size:25px}.top .sub{color:var(--mut);font-size:13.5px}
.top>.btn,.top>form,.top>.credit,.top>.pills{margin-inline-start:auto}
.row{display:flex;align-items:center;gap:8px}.row.wrap{flex-wrap:wrap}
.crumb{font-size:13px;color:var(--mut)}
.flash{padding:12px 16px;border-radius:12px;background:#e3f5ec;color:#0a5a40;font-weight:600}
.flash.bad{background:#fdecec;color:var(--bad)}.flash.warn{background:#fff4e0;color:#7a5300}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.panel.np{padding:0;overflow:hidden}
.panel.dark{background:var(--side);color:#fff;border:0}.panel.dark small{color:#bfe0d1}.panel.dark .lbl{color:#9fd0bb}
.panel.dark.blue{background:#102a4c}
.ph{display:flex;align-items:center;gap:10px}.ph>svg{width:38px;height:38px;padding:9px;border-radius:11px;background:var(--acc);color:#fff;flex:none}
.ph b{display:block;font-size:16px}
.ph2{display:flex;align-items:center;gap:10px}.ph2>b:first-child{font-size:15.5px}.ph2>a,.ph2>b:not(:first-child){margin-inline-start:auto}
.ph2.pad{padding:14px 18px 6px}
.lbl{font-size:11.5px;font-weight:700;color:#6b7a73;text-transform:uppercase;letter-spacing:.04em}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i l" "v v" "s s";align-items:center;gap:8px 10px}
.kpi .ki{grid-area:i;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.kpi .kl{grid-area:l;font-size:13px;color:var(--mut);font-weight:600}
.kpi>b{grid-area:v;font-size:27px;font-family:"IBM Plex Mono",monospace}
.kpi>small{grid-area:s}
.kpi.dark{background:var(--side);color:#fff;border:0}.kpi.dark .kl{color:#a9d6c2}.kpi.dark small{color:#7ee2ab}
.kpi.warnk{background:#fff7e6;border-color:#f5dfb0}.kpi.warnk b,.kpi.warnk .kl{color:#7a5300}
.ki.g,.ic.g{background:#e3f5ec;color:#0a6a4c}.ki.b,.ic.b{background:#e8f0fb;color:#1f6fb2}.ki.o,.ic.o{background:#fff1e0;color:#b25f00}.ki.gg{background:#18a058;color:#fff}.ic.p{background:#efeafc;color:#6a4fc2}.ic.n{background:#eef1f0;color:#6b7a73}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.ic.big{width:54px;height:54px;border-radius:14px}
.g21{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.g2b{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.split{display:flex;gap:18px;align-items:flex-start}.split .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.rail{width:360px;flex:none;display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}.rail.wide{width:400px}
.split.rev{flex-direction:row}
.bars{display:flex;align-items:flex-end;gap:10px;height:200px;border-bottom:1px solid var(--line);padding-top:6px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;gap:2px}
.bar i{display:block;border-radius:4px 4px 0 0;min-height:0}.bar i.g{background:#0a6a4c;border-radius:0}.bar i.l{background:#9fd9bd}
.bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11px;color:var(--mut)}
.leg{margin-inline-start:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}.leg i{width:10px;height:10px;border-radius:3px;display:inline-block}.leg i.g{background:#0a6a4c}.leg i.l{background:#9fd9bd;margin-inline-start:8px}
.panel .bars{margin-bottom:22px}
.donutw{display:flex;align-items:center;gap:22px}
.donut{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;flex:none}
.donut>div{width:96px;height:96px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut b{font-size:22px;font-family:"IBM Plex Mono",monospace}
.dleg{display:flex;flex-direction:column;gap:10px;flex:1}.dleg span{display:flex;align-items:center;gap:8px}.dleg i{width:10px;height:10px;border-radius:3px}.dleg b{margin-inline-start:auto;font-family:"IBM Plex Mono",monospace}
.minis{display:flex;gap:8px;font-size:12.5px}.minis span{flex:1;padding:8px 10px;border-radius:10px;background:var(--bg);display:flex;justify-content:space-between}.minis span.bad{background:#fdecec}
.rrow{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;padding:4px 0}.rrow:hover{text-decoration:none;background:var(--bg);border-radius:10px}
.rrow>span:nth-child(2){flex:1}.rrow b{font-size:13.5px}
.note{padding:10px 12px;border-radius:10px;background:var(--bg);font-size:12.5px;color:#4a5752}.note.warn{background:#fff7e6;color:#7a5300}
.tblw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:11px;font-weight:700;color:#6b7a73;text-transform:uppercase;letter-spacing:.04em;text-align:start;padding:11px 14px;background:#f7faf8;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid #f0f3f1;vertical-align:middle}
.tbl tbody tr[onclick]{cursor:pointer}.tbl tbody tr[onclick]:hover{background:#f7faf8}
.tbl tr.hl{background:#fffaf0}
.tbl td.b{font-weight:600}.tbl td small{margin-top:2px}
.tbl .empty{text-align:center;color:var(--mut);padding:30px}
.panel:not(.np) .tbl th{background:transparent;padding:8px 6px}.panel:not(.np) .tbl td{padding:8px 6px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-weight:600;font-size:11.5px;white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.g{background:#e3f5ec;color:#0a6a4c}.badge.o{background:#fff1e0;color:#b25f00}.badge.r{background:#fdecec;color:#b42318}.badge.n{background:#eef1f0;color:#4a5752}
.chip{padding:2px 9px;border-radius:99px;font-weight:600;font-size:11.5px;white-space:nowrap}
.chip.b{background:#e8f0fb;color:#1f6fb2}.chip.g{background:#e3f5ec;color:#0a6a4c}.chip.o{background:#fff1e0;color:#b25f00}.chip.p{background:#efeafc;color:#6a4fc2}.chip.n{background:#eef1f0;color:#4a5752}
.panel.dark .chip,.panel.dark .badge{background:rgba(255,255,255,.14);color:#fff}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dbe4df;border-radius:10px;padding:0 12px;height:40px;color:var(--mut);min-width:260px}
.search input{border:0;outline:0;font:inherit;width:100%;background:transparent}
.seg{display:flex;gap:4px;background:#fff;border:1px solid #dbe4df;border-radius:10px;padding:4px;flex-wrap:wrap}
.seg button{border:0;border-radius:7px;padding:7px 11px;background:transparent;font:inherit;font-size:12.5px;cursor:pointer}
.seg button.on{background:var(--side);color:#fff;font-weight:600}
select,input:not([type=checkbox]):not([type=radio]),textarea{height:40px;border-radius:10px;border:1px solid #dbe4df;padding:0 10px;font:inherit;background:#fff;color:var(--fg);width:100%}
.filters select{width:auto}
input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--acc) 35%,transparent);border-color:var(--acc)}
.form{display:flex;flex-direction:column;gap:10px}
.form label,.mini label,.install label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#4a5752}
label.ck{flex-direction:row!important;align-items:center;gap:8px;font-weight:500;font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid #dbe4df;background:#fff;color:var(--fg);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none;filter:brightness(.97)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.blue{background:#2d6fd1;border-color:#2d6fd1;color:#fff}
.btn.big{height:46px;font-size:15px;border-radius:12px}
.btn.warn{color:var(--warn);border-color:#f5d7b0;background:#fff7ec}
.btn.danger{color:var(--bad);border-color:#f5c2bd;background:#fdecea}
.btn.soft{background:#effaf4;border-color:#cdebd9;color:#0a6a4c}
.btn:disabled{opacity:.5;cursor:not-allowed}
.plansel{display:grid;grid-template-columns:1fr 1fr;gap:8px}.plansel.col{grid-template-columns:1fr}
.pp{position:relative;display:flex;flex-direction:column;gap:2px;border:1px solid #dbe4df;border-radius:12px;padding:10px 12px;cursor:pointer;font-size:13px}
.plansel.col .pp{flex-direction:row;align-items:center;gap:10px}.pp .r{margin-inline-start:auto}
.pp input{position:absolute;opacity:0}
.pp:has(input:checked){border:2px solid var(--acc);padding:9px 11px;background:color-mix(in srgb,var(--acc) 7%,#fff)}
.pp.b b{color:#1f6fb2}.pp.g b{color:#0a6a4c}.pp.o b{color:#b25f00}.pp.p b{color:#6a4fc2}
.shophead{flex-direction:row;align-items:center;gap:14px}.shophead .t{font-size:20px}.shophead .acts{margin-inline-start:auto;display:flex;gap:8px}
.kbig{font-size:17px;letter-spacing:.03em}
.sp{display:flex;justify-content:space-between;font-size:13px}.sp.dash{border-bottom:1px dashed var(--line);padding-bottom:6px}
.pbar{height:6px;border-radius:99px;background:#eef2f0}.pbar i{display:block;height:100%;border-radius:99px;background:var(--acc)}
.pcrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}.pcrow.on{background:#effaf4;border:1px solid #cdebd9}.pcrow.off{opacity:.7}.pcrow>div{flex:1}
.actgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--bg)}
.inl{display:inline}
.tl{display:flex;flex-direction:column;gap:10px}.tl>div{display:flex;gap:10px}.tl i{width:10px;height:10px;border-radius:50%;background:var(--acc2);margin-top:5px;flex:none}
.plancards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;align-items:start}
.plan .price b{font-size:24px}.plan .price small{display:inline}
.plan.g{border:2px solid #0a6a4c}.plan.off{opacity:.7}
.pfoot{font-size:12.5px;color:var(--mut)}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}
details[open]>summary{margin-bottom:10px}
.pills{display:flex;gap:8px;flex-wrap:wrap}.pills span{padding:8px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:12px;color:var(--mut)}.pills b{display:block;color:var(--fg);font-family:"IBM Plex Mono",monospace;font-size:14px}.pills span.w b{color:var(--warn)}
.rcell{display:flex;align-items:center;gap:10px;color:inherit}.rcell .av{background:#e3f5ec;color:#0a6a4c}
.credit{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:#e6f0fd;color:#1f5fa8;font-size:13px;font-weight:600}
.steps{margin:0;padding-inline-start:20px;line-height:1.7}
.pem{white-space:pre-wrap;font-size:11px;background:var(--bg);padding:10px;border-radius:10px}
.small{font-size:12px}
/* login + install */
.loginb{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#d7efe3,var(--bg) 60%);padding:20px}
.login,.install{width:min(400px,100%);background:#fff;border-radius:20px;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:14px}
.install{width:min(720px,100%)}
.login h1,.install h1{margin:0;font-size:22px}.install h2{font-size:15px;margin:14px 0 6px}
.checks{display:flex;gap:8px;flex-wrap:wrap}.checks span{padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600}.checks .ok{background:#e3f5ec;color:#0a6a4c}.checks .bad{background:#fdecec;color:var(--bad)}
@media (max-width:1100px){.g21,.g2b,.g3{grid-template-columns:1fr}.split{flex-direction:column}.rail,.rail.wide{width:100%;position:static}.actgrid{grid-template-columns:1fr}}
@media (max-width:760px){.app{flex-direction:column}.side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;padding:12px}.side nav{flex-direction:row;flex-wrap:wrap}.side nav a{padding:8px 10px;font-size:13px}.sidefoot{margin:0;display:flex;gap:8px;align-items:center}.me{margin:0}.main{padding:16px}.g2,.plansel{grid-template-columns:1fr}.shophead{flex-wrap:wrap}.donutw{flex-direction:column}}

/* ================= 1.1 · 3D look, Arabic (RTL), documents, contact card ================= */
html[lang=ar] body{font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}
html[lang=ar] input,html[lang=ar] select,html[lang=ar] textarea,html[lang=ar] button{font-family:inherit}
html[lang=ar] .tbl,html[lang=ar] small{line-height:1.6}
html[lang=ar] .lbl,html[lang=ar] .tbl th{letter-spacing:0;text-transform:none;font-size:12px}
html[lang=ar] .mono{font-family:"IBM Plex Mono","Noto Kufi Arabic",monospace}
body{background:radial-gradient(1200px 600px at 100% -10%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
/* sidebar */
.side{background:linear-gradient(165deg,color-mix(in srgb,var(--side) 82%,#fff 0%) 0%,var(--side) 45%,color-mix(in srgb,var(--side) 80%,#000) 100%);box-shadow:6px 0 24px -10px rgba(0,0,0,.35),inset -1px 0 0 rgba(255,255,255,.06)}
html[dir=rtl] .side{box-shadow:-6px 0 24px -10px rgba(0,0,0,.35),inset 1px 0 0 rgba(255,255,255,.06)}
.logo{background:linear-gradient(145deg,#2fcf7f,#0f8a4f);box-shadow:0 4px 0 #0a5c35,0 8px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45);text-shadow:0 1px 0 rgba(0,0,0,.25)}
body.res .logo{background:linear-gradient(145deg,#5b9cff,#1f5fa8);box-shadow:0 4px 0 #123d70,0 8px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.side nav a{transition:transform .15s,background .15s,box-shadow .15s;padding:8px 10px}
.side nav a .nic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 6px rgba(0,0,0,.25)}
.side nav a:hover{transform:translateX(3px);background:rgba(255,255,255,.08)}
html[dir=rtl] .side nav a:hover{transform:translateX(-3px)}
.side nav a.on{background:linear-gradient(180deg,color-mix(in srgb,var(--acc2) 88%,#fff),var(--acc2) 55%,color-mix(in srgb,var(--acc2) 82%,#000));box-shadow:0 4px 0 color-mix(in srgb,var(--acc2) 55%,#000),0 10px 18px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-1px)}
.side nav a.on .nic{background:rgba(255,255,255,.95);color:var(--acc);box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 -2px 0 rgba(0,0,0,.08)}
.me{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px -6px rgba(0,0,0,.4)}
.av{box-shadow:0 3px 0 rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.6)}
.lo{border:1px solid rgba(255,180,173,.25);background:rgba(255,120,110,.08)}
.lo:hover{background:rgba(255,120,110,.18)}
/* language switch */
.lsw{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:12px;font-size:12.5px;font-weight:700}
.lsw svg{margin:0 4px;opacity:.7}
.lsw a{padding:5px 11px;border-radius:9px;color:inherit;text-decoration:none}
.lsw a.on{background:#fff;color:var(--side);box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 -1px 0 rgba(0,0,0,.06)}
.lsw.inside{background:rgba(0,0,0,.18);box-shadow:inset 0 2px 4px rgba(0,0,0,.25);color:#cfe3da;margin:-8px 8px 10px;align-self:flex-start}
.lsw.top{align-self:flex-end;background:var(--bg);box-shadow:inset 0 2px 4px rgba(0,0,0,.08);color:var(--mut)}
.lsw.top a.on{background:var(--acc);color:#fff}
.lsw a[lang=ar]{font-family:"Noto Kufi Arabic",Tahoma,sans-serif}
/* panels + KPIs: soft depth */
.panel,.kpi,.pills span,.seg,.search{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(16,40,30,.06),0 12px 28px -14px rgba(16,40,30,.22)}
.panel{border-color:#e6eee9}
.kpi{transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset:0 0 auto 0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);pointer-events:none}
.kpi:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 34px -14px rgba(16,40,30,.32)}
.kpi.dark{background:linear-gradient(150deg,color-mix(in srgb,var(--side) 80%,#fff),var(--side) 50%,color-mix(in srgb,var(--side) 75%,#000));box-shadow:0 14px 30px -12px color-mix(in srgb,var(--side) 70%,transparent)}
.kpi.dark::after{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}
.ki,.ic,.ph>svg,.phi,.cic{box-shadow:0 3px 0 rgba(0,0,0,.08),0 6px 12px -4px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.7)}
.ki.gg{background:linear-gradient(145deg,#2fcf7f,#0f8a4f);box-shadow:0 3px 0 #0a5c35,inset 0 1px 0 rgba(255,255,255,.45)}
.ph>svg,.phi{background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 70%,#fff),var(--acc) 60%,color-mix(in srgb,var(--acc) 80%,#000));box-shadow:0 3px 0 color-mix(in srgb,var(--acc) 55%,#000),0 8px 14px -6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.phi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.phi.d{background:linear-gradient(145deg,#ffb85c,#e07b00 60%,#b25f00);box-shadow:0 3px 0 #8a4a00,0 8px 14px -6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.panel.dark{background:linear-gradient(150deg,color-mix(in srgb,var(--side) 78%,#fff),var(--side) 50%,color-mix(in srgb,var(--side) 75%,#000));box-shadow:0 16px 32px -14px color-mix(in srgb,var(--side) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
/* buttons: raised, press down on click */
.btn{position:relative;transition:transform .08s,box-shadow .12s,filter .12s;background:linear-gradient(180deg,#fff,#f2f6f4);box-shadow:0 2px 0 #d5dfda,0 5px 10px -4px rgba(16,40,30,.18),inset 0 1px 0 #fff}
.btn:hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 3px 0 #d5dfda,0 8px 14px -5px rgba(16,40,30,.24),inset 0 1px 0 #fff}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 #d5dfda,0 2px 4px -2px rgba(16,40,30,.2),inset 0 2px 4px rgba(0,0,0,.08)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 72%,#fff),var(--acc) 55%,color-mix(in srgb,var(--acc) 85%,#000));border-color:color-mix(in srgb,var(--acc) 80%,#000);box-shadow:0 3px 0 color-mix(in srgb,var(--acc) 55%,#000),0 8px 16px -6px color-mix(in srgb,var(--acc) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.primary:hover{box-shadow:0 4px 0 color-mix(in srgb,var(--acc) 55%,#000),0 12px 20px -6px color-mix(in srgb,var(--acc) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:active{box-shadow:0 0 0 transparent,inset 0 2px 6px rgba(0,0,0,.3)}
.btn.blue{background:linear-gradient(180deg,#6aa5ff,#2d6fd1 55%,#1f56a8);border-color:#1f56a8;box-shadow:0 3px 0 #163f7c,0 8px 16px -6px rgba(45,111,209,.6),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.blue:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.btn.danger{background:linear-gradient(180deg,#fff5f4,#fde3e0);box-shadow:0 2px 0 #f0b9b3,0 5px 10px -4px rgba(180,35,24,.25),inset 0 1px 0 #fff}
.btn.warn{background:linear-gradient(180deg,#fffaf2,#ffefd8);box-shadow:0 2px 0 #efd0a6,0 5px 10px -4px rgba(178,95,0,.25),inset 0 1px 0 #fff}
.btn.soft{background:linear-gradient(180deg,#f6fdf9,#e2f5ea);box-shadow:0 2px 0 #c2e3cf,0 5px 10px -4px rgba(10,106,76,.22),inset 0 1px 0 #fff}
.btn.wa{background:linear-gradient(180deg,#4be38a,#1fae5b 55%,#178a48);border-color:#178a48;color:#fff;box-shadow:0 3px 0 #0f6a35,0 8px 14px -6px rgba(31,174,91,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.sm{height:32px;padding:0 10px;font-size:12.5px;border-radius:9px}
.btn:disabled{transform:none;box-shadow:none}
.seg button.on{background:linear-gradient(180deg,color-mix(in srgb,var(--side) 75%,#fff),var(--side));box-shadow:0 2px 0 color-mix(in srgb,var(--side) 60%,#000),inset 0 1px 0 rgba(255,255,255,.25)}
select,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea{box-shadow:inset 0 2px 3px rgba(16,40,30,.06);transition:box-shadow .15s,border-color .15s}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 2px 3px rgba(16,40,30,.05),0 0 0 4px color-mix(in srgb,var(--acc) 15%,transparent)}
textarea{height:auto;padding:8px 10px;resize:vertical}
.pp{box-shadow:0 2px 0 #e3ebe6,0 6px 12px -8px rgba(16,40,30,.2);transition:transform .12s}
.pp:hover{transform:translateY(-1px)}
.pp:has(input:checked){box-shadow:0 3px 0 color-mix(in srgb,var(--acc) 40%,#fff),0 10px 18px -8px color-mix(in srgb,var(--acc) 50%,transparent)}
.badge,.chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.06)}
.login,.install{box-shadow:0 2px 0 rgba(255,255,255,.8) inset,0 30px 60px -20px rgba(16,40,30,.35),0 8px 18px -8px rgba(16,40,30,.18)}
.login .btn.big{width:100%}
.flash{box-shadow:0 8px 18px -12px rgba(0,0,0,.3)}
/* form sections */
.rform{gap:12px}
.fsec{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:14px;background:linear-gradient(180deg,#fbfdfc,#f4f8f6);border:1px solid #e6eee9;box-shadow:inset 0 1px 0 #fff}
.fst{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.04em}
html[lang=ar] .fst{text-transform:none;letter-spacing:0;font-size:13px}
/* contact card */
.ccard{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.ccard.col{flex-direction:column}
.ci{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 0 #e6eee9,0 8px 16px -10px rgba(16,40,30,.25);min-width:0}
.ci small{font-size:11px}.ci b,.ci a{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.cic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 12%,#fff),color-mix(in srgb,var(--acc) 22%,#fff));color:var(--acc)}
.ccard .btn.wa{align-self:center}
/* documents */
.docs{display:flex;flex-direction:column;gap:10px}
.doc{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 0 #eaf0ec,0 8px 16px -12px rgba(16,40,30,.3)}
.doc.soon{border-color:#f3d39f;background:#fffbf3}.doc.expired{border-color:#f3b8b1;background:#fff6f5}
.dthumb{width:54px;height:62px;border-radius:9px;flex:none;display:grid;place-items:center;background:linear-gradient(160deg,#fff,#e9efec);border:1px solid #dbe4df;box-shadow:0 3px 0 #d5dfda,0 6px 10px -4px rgba(0,0,0,.2);overflow:hidden;color:#b42318;font-size:12px;text-decoration:none;transform:perspective(300px) rotateY(-8deg)}
html[dir=rtl] .dthumb{transform:perspective(300px) rotateY(8deg)}
.dthumb.img img{width:100%;height:100%;object-fit:cover}
.dthumb:hover{text-decoration:none;transform:none}
.dinfo{flex:1;min-width:0}.dinfo b{font-size:13.5px}.dinfo small{overflow-wrap:anywhere}
.dexpb{display:inline-block;padding:1px 8px;border-radius:99px;font-weight:700;font-size:11px;margin-inline-end:6px;background:#e3f5ec;color:#0a6a4c}
.dexpb.soon{background:#fff1e0;color:#b25f00}.dexpb.expired{background:#fdecec;color:#b42318}
.dact{display:flex;gap:6px;align-items:center}
.empty2{margin:0;padding:14px;text-align:center;border:1px dashed #d5dfda;border-radius:12px}
.docup{display:flex;flex-direction:column;gap:8px}
.docrow{display:grid;grid-template-columns:1.2fr .8fr .9fr 1.2fr;gap:6px;align-items:end;padding:8px;border-radius:12px;background:#fff;border:1px solid #e3ebe6;box-shadow:0 2px 0 #eef3f0}
.rail .docrow,.docup .docrow{grid-template-columns:1fr 1fr}
.docrow select,.docrow input{height:36px;font-size:12.5px}
.dexp{gap:2px!important;font-size:10.5px!important}
.dfile{flex-direction:row!important;align-items:center;gap:6px!important;height:36px;padding:0 10px;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--acc) 45%,#fff);background:color-mix(in srgb,var(--acc) 5%,#fff);color:var(--acc)!important;cursor:pointer;overflow:hidden;font-size:12px!important}
.dfile span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dfile input{display:none}
.upbox>summary{width:max-content}
@media (max-width:760px){.lsw.inside{margin:0}.docrow{grid-template-columns:1fr 1fr}.ccard{flex-direction:column}}
@media (max-width:560px){.doc{flex-wrap:wrap}.dact{width:100%;justify-content:flex-end}.ci{width:100%}}

/* ================= 1.2 · sign-in branding, registration, tabs ================= */
.logo.hasimg,.av.hasimg,.blogo.hasimg{background:#fff;padding:3px;overflow:hidden}
.logo.hasimg img,.av.hasimg img,.blogo.hasimg img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}
.av.hasimg{box-shadow:0 2px 0 rgba(0,0,0,.12),0 0 0 1px #e3ebe6}
.blogo{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;font-weight:700;font-size:24px;color:#fff;background:linear-gradient(145deg,#2fcf7f,#0f8a4f);box-shadow:0 5px 0 #0a5c35,0 14px 26px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45);flex:none}
body.res .blogo:not(.hasimg){background:linear-gradient(145deg,#5b9cff,#1f5fa8);box-shadow:0 5px 0 #123d70,0 14px 26px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.blogo.sm{width:54px;height:54px;border-radius:14px;font-size:17px}
.blogo.hasimg{box-shadow:0 5px 0 rgba(0,0,0,.12),0 14px 26px -10px rgba(0,0,0,.35)}
.lwrap{display:flex;width:min(900px,100%);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 2px 0 rgba(255,255,255,.8) inset,0 34px 70px -24px rgba(16,40,30,.45),0 8px 18px -8px rgba(16,40,30,.18)}
.lwrap .login{box-shadow:none;border-radius:0;flex:1;width:auto;padding:36px 34px;justify-content:center}
.lwrap.one{width:min(440px,100%)}
.lbrand{width:46%;flex:none;padding:36px 32px;display:flex;flex-direction:column;gap:12px;color:#e3f2ea;background:radial-gradient(500px 300px at 0% 0%,rgba(255,255,255,.14),transparent 60%),linear-gradient(160deg,#0f5a41,#0b3d2e 60%,#072a20)}
body.res .lbrand{color:#dbe7f7;background:radial-gradient(500px 300px at 0% 0%,rgba(255,255,255,.14),transparent 60%),linear-gradient(160deg,#1f4f8f,#102a4c 60%,#0a1d36)}
.lbrand .bt{font-size:23px;color:#fff;line-height:1.3;margin-top:6px}
.lbrand .bs{font-size:13px;opacity:.8}
.lbrand .bw{margin:4px 0 0;font-size:14px;line-height:1.7;color:inherit;opacity:.95}
.bct{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.bct>a,.bct>span{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:inherit;text-decoration:none;font-size:13.5px;overflow-wrap:anywhere}
.bct>a:hover{background:rgba(255,255,255,.15);text-decoration:none}
.bct>a.wa{background:linear-gradient(180deg,#3fd47f,#1fae5b);color:#fff;font-weight:700;box-shadow:0 3px 0 #0f6a35}
.lbrand .bf{margin-top:auto;color:inherit;opacity:.65;font-size:12px}
.lrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lnk{font-size:13px;font-weight:600}.lnk.b{color:var(--blue)}
.login .lnk{align-self:flex-start}
@media (max-width:760px){.lwrap{flex-direction:column}.lbrand{width:auto;padding:24px}.lwrap .login{padding:24px}.blogo{width:60px;height:60px}}
/* registration */
.regb{place-items:start center}
.regwrap{width:min(860px,100%);display:flex;flex-direction:column;gap:14px;padding:10px 0 40px}
.regwrap>.lsw{align-self:flex-end}
.reghead{display:flex;align-items:center;gap:16px}.reghead h1{margin:0;font-size:26px}
.hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.req{color:var(--bad);font-style:normal;font-weight:700}
.optl{display:inline;font-weight:500;color:#8a9690}
.terms{max-height:160px;overflow:auto;padding:12px;border-radius:12px;background:var(--bg);font-size:13px;line-height:1.6;border:1px solid var(--line)}
.okbox{align-items:center;text-align:center;padding:40px 24px}.okbox h2{margin:6px 0 0}.okbox p{max-width:520px;color:var(--mut)}
.phi.big{width:68px;height:68px;border-radius:20px;font-size:32px;font-weight:700;background:linear-gradient(145deg,#2fcf7f,#0f8a4f);box-shadow:0 5px 0 #0a5c35,0 14px 24px -10px rgba(0,0,0,.4)}
/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -16px rgba(16,40,30,.3);align-self:flex-start}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;color:var(--fg);font-weight:600;font-size:13.5px;text-decoration:none;transition:background .15s}
.tabs a:hover{background:var(--bg);text-decoration:none}
.tabs a b{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:1px 8px;border-radius:99px;background:var(--bg)}
.tabs a.on{background:linear-gradient(180deg,color-mix(in srgb,var(--side) 75%,#fff),var(--side));color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--side) 60%,#000),inset 0 1px 0 rgba(255,255,255,.25)}
.tabs a.on b{background:rgba(255,255,255,.2)}
.tabs a.hot b{background:#e8590c;color:#fff;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(232,89,12,.18)}}
.nbadge{margin-inline-start:auto;min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font-size:11.5px;background:#e8590c;color:#fff;box-shadow:0 2px 0 #9a3a06}
.pct{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:99px;font-size:11px;font-weight:700;background:#efeafc;color:#6a4fc2;vertical-align:1px}
.pctb{font-family:"IBM Plex Mono",monospace;color:#6a4fc2;font-size:14px}
.decide{border:2px solid #f3d39f;background:linear-gradient(180deg,#fffaf2,#fff)}
.decide .mini{background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px -12px rgba(0,0,0,.25)}
.logorow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.logorow>label:not(.ck){flex:1;min-width:180px}
.logorow .dfile{height:40px}
label.ck.big{font-size:15px;font-weight:700;padding:10px 12px;border-radius:12px;background:var(--bg)}
.rft td,.rft th{text-align:center!important}.rft td:first-child,.rft th:first-child{text-align:start!important}
.rft input[type=radio]{width:18px;height:18px;accent-color:var(--acc)}
.panel .tbl.rft td{padding:7px 6px}
.lt{display:inline}.lt small.optl{display:inline;font-size:11.5px}