/* ===================== الثيمات الثلاثة ===================== */
/* 1) داكن VIP */
body[data-theme="dark"]{
  --bg:#090d15;
  --login-bg:radial-gradient(900px 500px at 80% -10%,rgba(233,196,106,.14),transparent 60%),
             radial-gradient(700px 500px at 10% 110%,rgba(77,163,255,.10),transparent 60%),#090d15;
  --panel:#111725; --panel2:#161d2e; --panel3:#1b2438; --input-bg:#0c111d;
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.20); --text:#e9edf7; --muted:#93a0b8;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --accent:#e9c46a; --accent-deep:#f6dfa0; --accent-soft:rgba(233,196,106,.12); --accent-line:rgba(233,196,106,.45);
  --grad:linear-gradient(135deg,#e9c46a,#c9962f); --grad-text:#241802;
  --c-blue:#4da3ff; --c-purple:#a78bfa; --c-teal:#2dd4bf; --c-orange:#fb923c; --c-green:#37d67a;
  --c-pink:#f472b6; --c-indigo:#818cf8; --c-slate:#94a3b8; --c-red:#ff5c5c; --c-amber:#ffb020;
  --t-blue:rgba(77,163,255,.15); --t-purple:rgba(167,139,250,.15); --t-teal:rgba(45,212,191,.15);
  --t-orange:rgba(251,146,60,.15); --t-green:rgba(55,214,122,.15); --t-pink:rgba(244,114,182,.15);
  --t-indigo:rgba(129,140,248,.15); --t-slate:rgba(148,163,184,.15); --t-red:rgba(255,92,92,.15);
  --t-amber:rgba(255,176,32,.15); --t-gold:rgba(233,196,106,.15);
  --b-blue:rgba(77,163,255,.35); --b-amber:rgba(255,176,32,.35); --b-green:rgba(55,214,122,.35); --b-red:rgba(255,92,92,.35);
  --banner-c:#cfe4ff;
  --nav-active-bg:rgba(233,196,106,.12); --nav-active-c:#f2d78f;
  --vip-c:#f6dfa0; --vip-border:rgba(233,196,106,.40);
  --overlay:rgba(4,6,10,.72);
}
/* 2) فاتح */
body[data-theme="light"]{
  --bg:#f2f4f9;
  --login-bg:radial-gradient(900px 500px at 85% -10%,rgba(124,58,237,.10),transparent 60%),
             radial-gradient(700px 500px at 5% 110%,rgba(37,99,235,.10),transparent 60%),
             radial-gradient(600px 400px at 50% 50%,rgba(201,150,47,.10),transparent 65%),#f2f4f9;
  --panel:#ffffff; --panel2:#f6f8fc; --panel3:#eef1f8; --input-bg:#f6f8fc;
  --line:#e6eaf3; --line-strong:#c9d0e0; --text:#1b2438; --muted:#6b7794;
  --shadow:0 1px 3px rgba(20,30,60,.06),0 10px 28px rgba(20,30,60,.06);
  --shadow-lg:0 24px 60px rgba(20,30,60,.16);
  --accent:#c9962f; --accent-deep:#a87a15; --accent-soft:#fdf6e3; --accent-line:#e5c471;
  --grad:linear-gradient(135deg,#f2cf6b,#c9962f); --grad-text:#3d2b04;
  --c-blue:#2563eb; --c-purple:#7c3aed; --c-teal:#0d9488; --c-orange:#ea580c; --c-green:#16a34a;
  --c-pink:#db2777; --c-indigo:#4f46e5; --c-slate:#5b6b85; --c-red:#dc2626; --c-amber:#d97706;
  --t-blue:#e7efff; --t-purple:#f1e9ff; --t-teal:#dff7f2; --t-orange:#ffefe0; --t-green:#e3f8ea;
  --t-pink:#fde9f1; --t-indigo:#e9ecff; --t-slate:#eceff5; --t-red:#fee2e2; --t-amber:#fff3e0; --t-gold:#fdf0d0;
  --b-blue:#c3d7fd; --b-amber:#fed7aa; --b-green:#b5e6c6; --b-red:#fecaca;
  --banner-c:#1e3a8a;
  --nav-active-bg:#fdf6e3; --nav-active-c:#a87a15;
  --vip-c:#6b4a05; --vip-border:#e5c471;
  --overlay:rgba(27,36,56,.40);
}
/* 3) كحلي / Ocean — من اختياري */
body[data-theme="ocean"]{
  --bg:#0b1a2e;
  --login-bg:radial-gradient(900px 500px at 80% -10%,rgba(34,211,238,.16),transparent 60%),
             radial-gradient(700px 500px at 10% 110%,rgba(59,130,246,.14),transparent 60%),#0b1a2e;
  --panel:#112338; --panel2:#162c45; --panel3:#1c3552; --input-bg:#0d1d30;
  --line:rgba(148,197,255,.12); --line-strong:rgba(148,197,255,.25); --text:#e8f1fb; --muted:#8fa6c2;
  --shadow:0 1px 3px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.30);
  --shadow-lg:0 24px 60px rgba(0,10,25,.50);
  --accent:#22d3ee; --accent-deep:#67e8f9; --accent-soft:rgba(34,211,238,.12); --accent-line:rgba(34,211,238,.45);
  --grad:linear-gradient(135deg,#5ee7f5,#0ea5c9); --grad-text:#062a33;
  --c-blue:#60a5fa; --c-purple:#c084fc; --c-teal:#2dd4bf; --c-orange:#fb923c; --c-green:#4ade80;
  --c-pink:#f472b6; --c-indigo:#818cf8; --c-slate:#94a3b8; --c-red:#f87171; --c-amber:#fbbf24;
  --t-blue:rgba(96,165,250,.16); --t-purple:rgba(192,132,252,.16); --t-teal:rgba(45,212,191,.16);
  --t-orange:rgba(251,146,60,.16); --t-green:rgba(74,222,128,.16); --t-pink:rgba(244,114,182,.16);
  --t-indigo:rgba(129,140,248,.16); --t-slate:rgba(148,163,184,.16); --t-red:rgba(248,113,113,.16);
  --t-amber:rgba(251,191,36,.16); --t-gold:rgba(34,211,238,.16);
  --b-blue:rgba(96,165,250,.35); --b-amber:rgba(251,191,36,.35); --b-green:rgba(74,222,128,.35); --b-red:rgba(248,113,113,.35);
  --banner-c:#b2e6f5;
  --nav-active-bg:rgba(34,211,238,.12); --nav-active-c:#67e8f9;
  --vip-c:#f6dfa0; --vip-border:rgba(233,196,106,.45);
  --overlay:rgba(4,12,25,.70);
}
/* ===================== الأساسيات ===================== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal',system-ui,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;transition:background .3s,color .3s}
button,input,select,textarea{font-family:inherit}
/* ====== شريط التنقل بين شاشات النموذج ====== */
.mockbar{height:48px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px;position:relative;z-index:50}
.mockbar .brand{font-weight:800;color:var(--accent-deep);letter-spacing:1px;margin-inline-end:14px;font-size:15px}
.mockbar .brand span{color:var(--muted);font-weight:500;font-size:12px;margin-inline-start:6px}
.tabbtn{background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 14px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:500;transition:.15s}
.tabbtn:hover{color:var(--text);background:var(--panel2)}
.tabbtn.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
.screen{display:none;height:calc(100vh - 48px)}
.screen.active{display:block}

/* ====== شاشة تسجيل الدخول ====== */
#screen-login{position:relative;background:var(--login-bg);display:none;align-items:center;justify-content:center}
#screen-login.active{display:flex}
.login-wrap{display:flex;flex-direction:column;align-items:center}
.theme-picker{display:flex;align-items:center;gap:9px;margin-bottom:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:9px 14px;box-shadow:var(--shadow)}
.tp-label{font-size:12.5px;color:var(--muted);font-weight:700}
.tp{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1.5px solid var(--line);color:var(--muted);padding:7px 13px;border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.tp:hover{color:var(--text)}
.tp.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
.sw{width:17px;height:17px;border-radius:6px;display:inline-block;border:1px solid rgba(128,138,160,.4)}
.sw-dark{background:linear-gradient(135deg,#111725 68%,#e9c46a 68%)}
.sw-light{background:linear-gradient(135deg,#ffffff 68%,#c9962f 68%)}
.sw-ocean{background:linear-gradient(135deg,#112338 68%,#22d3ee 68%)}
.login-card{width:400px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:38px 34px;box-shadow:var(--shadow-lg)}
.logo-badge{width:66px;height:66px;border-radius:19px;background:var(--grad);color:var(--grad-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;margin:0 auto 16px;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.logo-badge svg{width:60%;height:60%;display:block}
.logo-badge svg path{fill:currentColor}
.logo-badge svg .cut path{fill:var(--grad-cut,#241802)}
.login-card h1{font-size:21px;text-align:center;font-weight:800}
.login-card .sub{color:var(--muted);font-size:13px;text-align:center;margin:6px 0 24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:500}
.field .inp{display:flex;align-items:center;gap:10px;background:var(--input-bg);border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;transition:.15s}
.field .inp:focus-within{border-color:var(--accent-line);background:var(--panel)}
.field input{background:transparent;border:0;outline:0;color:var(--text);width:100%;font-size:14.5px}
.field input::placeholder{color:var(--muted);opacity:.75}
.btn-gold{width:100%;background:var(--grad);color:var(--grad-text);border:0;padding:13px;border-radius:11px;font-size:15px;font-weight:800;cursor:pointer;margin-top:8px;transition:.15s;box-shadow:0 8px 22px rgba(0,0,0,.20)}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.login-note{text-align:center;color:var(--muted);font-size:12px;margin-top:18px}
.ico{width:18px;height:18px;stroke:var(--muted);flex:none}

/* ====== هيكل اللوحة ====== */
.app{display:flex;height:100%;position:relative}
.sidebar{width:252px;flex:none;background:var(--panel);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px}
.sb-logo{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sb-logo .b{width:42px;height:42px;border-radius:13px;background:var(--grad);color:var(--grad-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.sb-logo .b svg{width:70%;height:70%;display:block}
.sb-logo .b svg path{fill:currentColor}
.sb-logo .b svg .cut path{fill:var(--grad-cut,#241802)}
.sb-logo b{font-size:16.5px;display:block}
.sb-logo small{color:var(--muted);font-size:11px}
.nav-section{position:relative;overflow-y:auto;scrollbar-width:thin}
.nav-section::before,.nav-section::after{
  content:'';position:sticky;left:0;right:0;height:18px;pointer-events:none;z-index:2;
  display:block;
}
.nav-section::before{top:0;background:linear-gradient(to bottom,var(--panel),transparent)}
.nav-section::after{bottom:0;background:linear-gradient(to top,var(--panel),transparent)}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;color:var(--muted);cursor:pointer;font-size:14px;font-weight:600;margin-bottom:3px;transition:.15s;position:relative}
.nav-item:hover{background:var(--panel2);color:var(--text)}
.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-c)}
.ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.ic svg{width:18px;height:18px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-blue{background:var(--t-blue)} .ic-blue svg{stroke:var(--c-blue)}
.ic-purple{background:var(--t-purple)} .ic-purple svg{stroke:var(--c-purple)}
.ic-teal{background:var(--t-teal)} .ic-teal svg{stroke:var(--c-teal)}
.ic-orange{background:var(--t-orange)} .ic-orange svg{stroke:var(--c-orange)}
.ic-green{background:var(--t-green)} .ic-green svg{stroke:var(--c-green)}
.ic-pink{background:var(--t-pink)} .ic-pink svg{stroke:var(--c-pink)}
.ic-indigo{background:var(--t-indigo)} .ic-indigo svg{stroke:var(--c-indigo)}
.ic-slate{background:var(--t-slate)} .ic-slate svg{stroke:var(--c-slate)}
.nav-item:hover .ic{transform:scale(1.06)}
.nav-item.active .ic svg{stroke:#fff}
.nav-item.active .ic-blue{background:var(--c-blue)} .nav-item.active .ic-purple{background:var(--c-purple)}
.nav-item.active .ic-teal{background:var(--c-teal)} .nav-item.active .ic-orange{background:var(--c-orange)}
.nav-item.active .ic-green{background:var(--c-green)} .nav-item.active .ic-pink{background:var(--c-pink)}
.nav-item.active .ic-indigo{background:var(--c-indigo)} .nav-item.active .ic-slate{background:var(--c-slate)}
.badge{margin-inline-start:auto;background:var(--t-red);color:var(--c-red);font-size:11px;font-weight:800;min-width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px;border:1px solid var(--b-red)}
.nav-item.active .badge{background:var(--accent);color:#fff;border-color:transparent}
.sb-scroll-bar{display:flex;gap:6px;justify-content:center;padding:8px 0;margin-bottom:8px;border-top:1px solid var(--line)}
.sb-scroll-btn{width:32px;height:32px;border-radius:50%;background:var(--input-bg);border:1.5px solid var(--line);color:var(--accent-deep);font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.sb-scroll-btn:hover{background:var(--accent);color:#fff;border-color:transparent;transform:translateY(-2px)}
.sb-scroll-btn:active{transform:translateY(0)}
/* Sidebar scrollbar styling */
.sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--panel2)}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:var(--panel2);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--accent-deep)}
.sb-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.sb-user{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--panel2);border-radius:12px}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#a78bfa);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.sb-user b{font-size:13.5px;display:block}
.role-chip{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px;display:inline-block;margin-top:3px}
.role-admin{background:var(--t-blue);color:var(--c-blue)}
.role-super{background:var(--accent-soft);color:var(--accent-deep)}
.role-vip{background:linear-gradient(135deg,rgba(233,196,106,.35),rgba(201,150,47,.35));color:var(--vip-c);border:1px solid var(--vip-border)}
.role-client{background:var(--t-purple);color:var(--c-purple)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;background:var(--panel);z-index:5}
.topbar h2{font-size:16.5px;font-weight:800}
.search{display:flex;align-items:center;gap:9px;background:var(--input-bg);border:1.5px solid var(--line);border-radius:11px;padding:9px 13px;width:300px;margin-inline-start:auto;transition:.15s}
.search:focus-within{border-color:var(--accent-line);background:var(--panel)}
.search input{background:transparent;border:0;outline:0;color:var(--text);width:100%;font-size:13.5px}
.search input::placeholder{color:var(--muted);opacity:.75}
.icon-btn{width:39px;height:39px;border-radius:11px;background:var(--input-bg);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:.15s}
.icon-btn:hover{border-color:var(--accent-line)}
.icon-btn svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dot{position:absolute;top:7px;inset-inline-end:8px;width:8px;height:8px;background:var(--c-red);border-radius:50%;border:2px solid var(--panel)}
.btn{border:0;border-radius:11px;padding:10px 16px;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.btn-g{background:var(--grad);color:var(--grad-text);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.btn-g:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-o{background:var(--panel);border:1.5px solid var(--line);color:var(--muted)}
.btn-o:hover{color:var(--text);border-color:var(--line-strong)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.content{flex:1;overflow-y:auto;padding:24px 26px}
.content::-webkit-scrollbar{width:9px}
.content::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px}
.view{display:none}
.view.active{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ====== الرئيسية ====== */
.hello{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.hello h3{font-size:19px;font-weight:800}
.hello p{color:var(--muted);font-size:13.5px;margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:17px 18px;box-shadow:var(--shadow)}
.stat .sico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:11px}
.stat .t{font-size:12.5px;color:var(--muted);font-weight:600}
.stat .n{font-size:27px;font-weight:800;margin-top:5px}
.stat .d{font-size:11.5px;margin-top:5px;color:var(--c-green);font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 20px;cursor:pointer;transition:.18s;position:relative;text-align:center;box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tile .tem{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:31px;margin:0 auto 13px;transition:.18s}
.tile:hover .tem{transform:scale(1.1) rotate(-4deg)}
.tile b{font-size:15px;display:block}
.tile small{color:var(--muted);font-size:12px;display:block;margin-top:5px;line-height:1.6}
.tile .tb{position:absolute;top:13px;inset-inline-end:13px;background:var(--c-red);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
/* خلفيات ملوّنة للأيقونات */
.t-blue{background:var(--t-blue)} .t-purple{background:var(--t-purple)} .t-teal{background:var(--t-teal)}
.t-orange{background:var(--t-orange)} .t-green{background:var(--t-green)} .t-pink{background:var(--t-pink)}
.t-indigo{background:var(--t-indigo)} .t-slate{background:var(--t-slate)} .t-gold{background:var(--t-gold)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-h h4{font-size:15px;font-weight:800}
.panel-h a{color:var(--accent-deep);font-size:12.5px;cursor:pointer;text-decoration:none;font-weight:700}
.plat-group{margin-bottom:14px}
.plat-group:last-child{margin-bottom:0}
.plat-group .lbl{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:9px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{background:var(--panel2);border:1.5px solid var(--line);padding:7px 14px;border-radius:10px;font-size:12.5px;font-weight:700;transition:.15s;cursor:default;display:inline-flex;align-items:center;gap:8px}
.pill:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.pill i{width:9px;height:9px;border-radius:50%;display:inline-block}
/* ====== الجداول ====== */
table{width:100%;border-collapse:collapse}
th{text-align:start;font-size:11.5px;color:var(--muted);font-weight:800;padding:11px 13px;background:var(--panel2);border-bottom:1px solid var(--line)}
th:first-child{border-start-start-radius:11px}
th:last-child{border-start-end-radius:11px}
td{padding:13px;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--panel2)}
.c-title{display:flex;align-items:center;gap:11px}
.c-title .th{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.c-title b{font-size:13.5px;display:block}
.c-title small{color:var(--muted);font-size:11.5px}
.st{font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.st::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.st-prog{background:var(--t-amber);color:var(--c-amber);border:1px solid var(--b-amber)}
.st-done{background:var(--t-green);color:var(--c-green);border:1px solid var(--b-green)}
.st-new{background:var(--t-blue);color:var(--c-blue);border:1px solid var(--b-blue)}
.mini{font-size:11.5px;color:var(--muted)}
/* ====== الطلبات ====== */
.banner{display:flex;align-items:center;gap:11px;background:var(--t-blue);border:1px solid var(--b-blue);border-radius:13px;padding:13px 16px;font-size:13.5px;color:var(--banner-c);margin-bottom:18px}
.banner svg{width:19px;height:19px;stroke:var(--c-blue);fill:none;stroke-width:1.8;flex:none}
.flow{display:flex;align-items:center;gap:0;margin-bottom:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.step{display:flex;align-items:center;gap:10px}
.step .n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.step .n1{background:var(--t-blue);color:var(--c-blue);border:2px solid var(--b-blue)}
.step .n2{background:var(--t-amber);color:var(--c-amber);border:2px solid var(--b-amber)}
.step .n3{background:var(--t-green);color:var(--c-green);border:2px solid var(--b-green)}
.step span{font-size:13px;font-weight:700}
.step small{display:block;color:var(--muted);font-size:11px;font-weight:500}
.arrow{flex:1;height:3px;background:linear-gradient(90deg,var(--line),var(--accent),var(--line));margin:0 16px;min-width:30px;border-radius:3px}
.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.chip{background:var(--panel);border:1.5px solid var(--line);color:var(--muted);padding:8px 15px;border-radius:20px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:0}
.tab{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;border-bottom:2.5px solid transparent;color:var(--muted);padding:11px 14px;margin-bottom:-1px;font-size:13.5px;font-weight:800;text-decoration:none;cursor:pointer;transition:.15s;border-radius:10px 10px 0 0}
.tab:hover{color:var(--text);background:var(--panel2)}
.tab.on{color:var(--accent-deep);border-bottom-color:var(--accent)}
.tcount{font-size:11px;font-weight:800;background:var(--panel2);color:var(--muted);min-width:22px;height:20px;padding:0 7px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.tab.on .tcount{background:var(--accent);color:#fff;border-color:transparent}
.act{background:var(--t-green);border:1.5px solid var(--b-green);color:var(--c-green);padding:7px 13px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;transition:.15s}
.act:hover{transform:translateY(-1px);filter:brightness(1.05)}
.act.dis{background:var(--panel2);border-color:var(--line);color:var(--muted);opacity:.75;cursor:not-allowed}
.act.dis:hover{transform:none;filter:none}
.note{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:7px}
/* ====== المستخدمون ====== */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.role-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow)}
.role-card.vip{border:1.5px solid var(--vip-border);background:linear-gradient(180deg,var(--accent-soft),var(--panel) 55%)}
.role-card .rc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.role-card .rc-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.role-card h5{font-size:13px;font-weight:800;letter-spacing:.3px}
.cc-gold{color:var(--accent-deep)} .cc-blue{color:var(--c-blue)} .cc-purple{color:var(--c-purple)}
.count{font-size:11px;color:var(--muted);background:var(--panel2);padding:3px 10px;border-radius:20px;font-weight:800;border:1px solid var(--line)}
.perm{font-size:11.5px;color:var(--muted);background:var(--panel2);border:1px dashed var(--line);border-radius:10px;padding:9px 11px;line-height:1.8;margin-bottom:12px}
.u{display:flex;align-items:center;gap:9px;padding:7px 5px}
.u .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex:none}
.u b{font-size:12.5px;display:block}
.u small{font-size:10.5px;color:var(--muted)}
.add-btn{width:100%;margin-top:10px;background:var(--panel2);border:1.5px dashed var(--line-strong);color:var(--muted);padding:9px;border-radius:11px;font-size:12.5px;font-weight:800;cursor:pointer;transition:.15s}
.add-btn:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft)}
.add-btn.locked{opacity:.5;cursor:not-allowed}
.add-btn.locked:hover{border-color:var(--line-strong);color:var(--muted);background:var(--panel2)}
.hint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px}
.matrix td:first-child{font-weight:700}
.yes{color:var(--c-green);font-weight:800}
.no{color:var(--muted);opacity:.6;font-weight:800}
/* ====== النافذة المنبثقة ====== */
.modal-wrap{position:absolute;inset:0;background:var(--overlay);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:30}
.modal-wrap.open{display:flex}
.modal{width:640px;max-height:92%;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid var(--line)}
.modal-h h4{font-size:16px;font-weight:800}
.modal-h p{font-size:12px;color:var(--muted);margin-top:3px}
.x{width:34px;height:34px;border-radius:10px;background:var(--panel2);border:1.5px solid var(--line);color:var(--muted);font-size:16px;cursor:pointer;transition:.15s}
.x:hover{color:var(--c-red);background:var(--t-red);border-color:var(--b-red)}
.modal-b{padding:20px 22px}
.seg{display:flex;background:var(--input-bg);border:1.5px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:18px}
.seg button{flex:1;background:transparent;border:0;color:var(--muted);padding:10px;border-radius:9px;font-size:13.5px;font-weight:800;cursor:pointer;transition:.15s}
.seg button.on{background:var(--grad);color:var(--grad-text);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.pick{display:flex;gap:11px;align-items:center;background:var(--input-bg);border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:14px}
.pick .poster{width:48px;height:66px;border-radius:9px;background:linear-gradient(160deg,#ddd6fe,#c4b5fd);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.pick b{font-size:14.5px;display:block}
.pick small{color:var(--muted);font-size:12px}
.tag{display:inline-block;font-size:10.5px;font-weight:800;background:var(--accent-soft);color:var(--accent-deep);padding:2px 10px;border-radius:20px;margin-top:5px}
.tag.blue{background:var(--t-blue);color:var(--c-blue)}
.radios{display:flex;gap:10px;margin-bottom:13px}
.radio{flex:1;background:var(--input-bg);border:1.5px solid var(--line);border-radius:12px;padding:12px;text-align:center;cursor:pointer;font-size:13.5px;font-weight:800;color:var(--muted);transition:.15s}
.radio.on{border-color:var(--accent-line);color:var(--accent-deep);background:var(--accent-soft)}
.radio small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:3px}
.eps{display:flex;flex-wrap:wrap;gap:8px;background:var(--input-bg);border:1.5px solid var(--line);border-radius:13px;padding:14px;margin-bottom:14px}
.ep{width:46px;height:38px;border-radius:9px;background:var(--panel);border:1.5px solid var(--line);color:var(--muted);font-size:13px;font-weight:800;cursor:pointer;transition:.12s}
.ep:hover{border-color:var(--accent-line);color:var(--text)}
.ep.on{background:var(--grad);border-color:transparent;color:var(--grad-text);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.eps-head{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);font-weight:800;margin-bottom:4px}
.eps-head span{color:var(--accent-deep);cursor:pointer;font-size:11.5px}
.modal-f{display:flex;align-items:center;gap:11px;padding:17px 22px;border-top:1px solid var(--line);background:var(--accent-soft)}
.modal-f .info{font-size:12px;color:var(--muted);margin-inline-end:auto;display:flex;align-items:center;gap:8px;font-weight:600}
.modal-f .info b{color:var(--c-amber)}
textarea{background:var(--input-bg);border:1.5px solid var(--line);border-radius:11px;color:var(--text);padding:11px 13px;width:100%;resize:none;outline:0;font-size:13.5px;margin-bottom:14px}
textarea:focus{border-color:var(--accent-line);background:var(--panel)}
select{background:var(--input-bg);border:1.5px solid var(--line);border-radius:11px;color:var(--text);padding:11px 13px;width:100%;outline:0;font-size:13.5px;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:14px}
.lbl-s{font-size:13px;color:var(--muted);display:block;margin-bottom:7px;font-weight:600}