:root{
  --bg:#060b14; --panel:#0d1626; --panel2:#111d31; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --acc:#4fd2ff; --acc-rgb:79,210,255; --txt:#e8f1fb; --muted:#8696ab;
  --ok:#31d98b; --warn:#ffb545; --bad:#ff5470; --idle:#7c8899;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Cairo",system-ui,sans-serif;background:radial-gradient(1000px 500px at 80% -100px,rgba(var(--acc-rgb),.1),transparent 70%),var(--bg);
  color:var(--txt);min-height:100vh;font-size:14.5px}
[hidden]{display:none!important}
input,select,textarea,button{font:inherit;color:inherit}
small{color:var(--muted);font-size:11.5px;font-weight:400}

/* أزرار */
.btn{border:1px solid rgba(var(--acc-rgb),.3);background:rgba(var(--acc-rgb),.1);color:var(--acc);padding:8px 15px;border-radius:10px;cursor:pointer;
  font-weight:600;transition:.15s;white-space:nowrap}
.btn:hover{background:rgba(var(--acc-rgb),.2)}
.btn.primary{background:linear-gradient(145deg,var(--acc),#1d7fa8);color:#04121d;border-color:transparent;font-weight:800}
.btn.ghost{background:transparent;color:var(--muted);border-color:var(--line2)}
.btn.ghost:hover{color:var(--txt)}
.btn.danger{color:var(--bad);border-color:rgba(255,84,112,.35);background:rgba(255,84,112,.07)}
.btn.sm{padding:5px 11px;font-size:12.5px}

/* الدخول */
.gate{min-height:100vh;display:grid;place-items:center;padding:20px}
.gate-card{width:min(380px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:32px 28px;text-align:center;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.gate-card h1{font-size:20px}
.gate-card p{color:var(--muted);font-size:12.5px;margin-top:-6px}
.logo{width:56px;height:56px;margin:0 auto 4px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(145deg,rgba(var(--acc-rgb),.25),rgba(var(--acc-rgb),.05));border:1px solid rgba(var(--acc-rgb),.35)}
.logo.sm{width:40px;height:40px;font-size:18px;margin:0;border-radius:12px}
.gate-card input,.form input,.form select,.form textarea,.bar input,.bar select{width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line2);background:rgba(0,0,0,.25);outline:none}
.gate-card input:focus,.form input:focus,.form textarea:focus,.bar input:focus{border-color:var(--acc)}
.err{color:var(--bad);font-size:12.5px;min-height:16px}
.ok{color:var(--ok);font-size:12.5px}

/* الترويسة */
.app{max-width:1280px;margin:0 auto;padding:16px 20px 50px}
.top{display:flex;align-items:center;gap:16px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-bottom:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand b{display:block;font-size:15px}
.brand span{font-size:11px;color:var(--muted)}
.tabs{display:flex;gap:4px;margin-inline-start:auto;background:rgba(0,0,0,.2);padding:4px;border-radius:11px}
.tabs button{border:0;background:none;padding:7px 14px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:600}
.tabs button.on{background:rgba(var(--acc-rgb),.15);color:var(--acc)}

/* الإحصائيات */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stat small{display:block}
.stat b{font-size:22px;font-weight:800}
.stat.ok b{color:var(--ok)} .stat.warn b{color:var(--warn)} .stat.bad b{color:var(--bad)} .stat.acc b{color:var(--acc)}

/* العملاء */
.bar{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.bar input{flex:1;min-width:200px}
.bar select{width:auto}
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.cl{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative}
.cl::before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--idle)}
.cl.active::before{background:var(--ok)} .cl.expiring::before{background:var(--warn)} .cl.expired::before,.cl.suspended::before{background:var(--bad)}
.cl-h{display:flex;align-items:flex-start;gap:10px}
.cl-h h3{font-size:15.5px;flex:1}
.cl-h h3 small{display:block;margin-top:2px}
.badge{font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;border:1px solid;white-space:nowrap}
.badge.active{color:var(--ok);border-color:rgba(49,217,139,.35);background:rgba(49,217,139,.08)}
.badge.expiring{color:var(--warn);border-color:rgba(255,181,69,.35);background:rgba(255,181,69,.08)}
.badge.expired,.badge.suspended{color:var(--bad);border-color:rgba(255,84,112,.35);background:rgba(255,84,112,.08)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px}
.kv span{color:var(--muted)}
.kv b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);border:1px dashed rgba(var(--acc-rgb),.3);border-radius:10px;padding:7px 10px}
.key code{flex:1;direction:ltr;text-align:left;font-size:12.5px;color:var(--acc);font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis}
.seen{font-size:11.5px;color:var(--muted)}
.seen.bad{color:var(--bad)}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px;background:var(--panel);border:1px dashed var(--line2);border-radius:16px}

/* الجداول والإعدادات */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{color:var(--muted);text-align:start;font-weight:600;padding:8px;border-bottom:1px solid var(--line2)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}
.form h3{font-size:14px;color:var(--acc);margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.form h3:first-child{border:0;padding:0;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.w50{max-width:50%}
.chk{flex-direction:row!important;align-items:center;gap:8px!important;color:var(--txt)!important}
.chk input{width:auto}
.lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.disc{display:flex;flex-direction:column;gap:6px}
.disc-row{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.disc-row input{width:90px}
.row-end{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.pem{direction:ltr;text-align:left;font-size:11px;color:var(--muted);background:rgba(0,0,0,.3);padding:10px;border-radius:10px;white-space:pre-wrap}
.quote{background:rgba(var(--acc-rgb),.06);border:1px solid rgba(var(--acc-rgb),.2);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.9}
.quote b{color:var(--acc);font-size:16px}
.muted{color:var(--muted)}

/* النوافذ */
.modal{position:fixed;inset:0;background:rgba(2,6,14,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;z-index:50}
.box{width:min(620px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.6)}
.box-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.box-h h2{font-size:16px}
.x{background:none;border:0;color:var(--muted);font-size:17px;cursor:pointer}
.box-b{padding:16px 18px;overflow-y:auto}
.box-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.toast{position:fixed;bottom:18px;left:18px;background:var(--panel2);border:1px solid rgba(var(--acc-rgb),.35);padding:10px 16px;border-radius:12px;z-index:80}

@media(max-width:720px){
  .grid2,.grid3{grid-template-columns:1fr}
  .w50{max-width:none}
  .clients{grid-template-columns:1fr}
  .tabs{margin:0;width:100%;justify-content:space-between}
}

/* ═════ التفاصيل والمالية ═════ */
.box.xl{width:min(980px,100%)}
.box-h-end{display:flex;align-items:center;gap:10px}
.box-h small{color:var(--muted)}
.box-f.split{justify-content:space-between;flex-wrap:wrap;gap:8px}
.subtabs{display:flex;gap:4px;padding:8px 18px 0;border-bottom:1px solid var(--line)}
.subtabs button{border:0;background:none;padding:9px 14px;cursor:pointer;color:var(--muted);font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs button.on{color:var(--acc);border-bottom-color:var(--acc)}
.card-s{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.card-s h4{font-size:13px;color:var(--acc);margin-bottom:8px}
.span2{grid-column:1/-1}
.info{gap:12px}
h4.sec{font-size:13px;color:var(--acc);margin:14px 0 6px}
.stats.sm{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-bottom:12px}
.stat b.sm{font-size:17px}
.cl-h{cursor:pointer}
.cl-h:hover h3{color:var(--acc)}
.due{color:var(--bad)!important}
.panel{margin-bottom:14px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.panel-h h3{font-size:14px;color:var(--acc)}
.panel-tools{display:flex;gap:8px;flex-wrap:wrap}
.panel-tools input,.panel-tools select{padding:7px 10px;border-radius:9px;border:1px solid var(--line2);background:rgba(0,0,0,.25)}
.tbl a{color:var(--acc);text-decoration:none}
.tbl td small{color:var(--muted)}
.row-acts{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
a.btn{text-decoration:none;display:inline-block}
.badge.inv-paid{color:var(--ok);border-color:rgba(49,217,139,.35);background:rgba(49,217,139,.08)}
.badge.inv-unpaid{color:var(--warn);border-color:rgba(255,181,69,.35);background:rgba(255,181,69,.08)}
.badge.inv-overdue{color:var(--bad);border-color:rgba(255,84,112,.35);background:rgba(255,84,112,.08)}
.badge.inv-void{color:var(--idle);border-color:var(--line2);text-decoration:line-through}
.form h3{font-size:13.5px}
@media(max-width:720px){.subtabs{overflow-x:auto}.row-acts{justify-content:flex-start}}

/* ═════ مستخدمو الشركة ═════ */
.u-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.u-head small{color:var(--muted)}
.u-add{background:rgba(var(--acc-rgb),.05);border:1px solid rgba(var(--acc-rgb),.2);border-radius:14px;padding:12px 14px}
.u-add-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tmp-pw{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;margin-inline-end:6px}
.tmp-pw code{font-family:ui-monospace,monospace;color:var(--acc);background:rgba(0,0,0,.3);padding:2px 8px;border-radius:6px;font-size:13px}

.pw-field{display:block;margin:4px 0 10px}
.pw-field small{color:var(--muted);font-weight:400}
.pw-row{display:flex;gap:6px;align-items:center;margin-top:4px}
.pw-row input{flex:1}

/* ═════ الوضع الإنجليزي ═════ */
[dir=ltr] .toast{left:auto;right:18px}

.pw-field select{margin-top:4px}

/* ═════ الطلبات والإشعارات ═════ */
.tab-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad,#ff5a76);color:#fff;font-size:11px;font-weight:800;margin-inline-start:4px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toolbar input,.toolbar select{flex:1;min-width:160px}
.leads-t td{vertical-align:top}
.leads-t tr.is-new td{background:rgba(var(--acc-rgb),.05)}
.leads-t select{min-width:120px}
.lead-note{margin-top:6px;width:100%;font-size:12.5px}
.wa-link{display:inline-block;margin-inline-start:6px;font-size:11.5px;font-weight:700;color:#25d366}
.lt-demo{color:var(--acc)}.lt-meeting{color:#f0b85a}.lt-purchase{color:#31d98b}
.hint{font-size:12.5px;color:var(--muted);line-height:1.8}
.hint code,.key-show{font-family:ui-monospace,monospace;font-size:12px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.25);color:var(--acc)}
.key-show{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.row-end.start{justify-content:flex-start;gap:8px;align-items:center}
.span2{grid-column:span 2}.span3{grid-column:1/-1}
small.ok,.ok{color:#31d98b}
.toolbar input,.toolbar select,.leads-t select,.lead-note{padding:9px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--txt)}
.toolbar input:focus,.toolbar select:focus,.leads-t select:focus,.lead-note:focus{outline:none;border-color:var(--acc)}