:root{
  --ink:#14201A; --ink-2:#3C4A42; --muted:#6F7A72; --hair:#E2E5DE; --paper:#F7F8F4; --card:#FFFFFF;
  --forest:#1E6E52; --forest-deep:#0E3B2E; --sea:#3FA6D9; --sky:#A9D3EE; --gold:#C9A443; --sand:#F2DE8C; --leaf:#9CC57A;
  --danger:#B23B3B; --warn:#B5641F; --ok:#1E6E52;
  --display:'Noto Kufi Arabic',system-ui,sans-serif; --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit;font-size:inherit}
a{color:var(--forest)}
.boot{min-height:100vh;display:grid;place-items:center;align-content:center;gap:10px;color:var(--forest);font-family:var(--display);font-weight:800;letter-spacing:2px}
.boot img{width:110px;opacity:.9}

/* ---------- صفحة الدخول ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-brand{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#1E6E52 0%,#0E3B2E 55%,#082A20 100%);color:#fff;padding:56px 56px 48px;display:flex;flex-direction:column;justify-content:space-between}
.auth-brand .waves{position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none}
.auth-brand .mark{display:flex;align-items:center;gap:14px;position:relative}
.auth-brand .mark img{height:54px;background:#fff;border-radius:12px;padding:6px 10px}
.auth-brand .mark b{font-family:var(--display);font-size:28px;letter-spacing:3px}
.auth-brand h1{position:relative;font-family:var(--display);font-size:34px;line-height:1.6;margin:40px 0 14px;max-width:520px}
.auth-brand p{position:relative;color:rgba(255,255,255,.82);line-height:2;max-width:480px;margin:0}
.auth-brand .foot{position:relative;font-size:12.5px;color:rgba(255,255,255,.6)}
.auth-form{display:grid;place-items:center;padding:40px 24px}
.auth-card{width:100%;max-width:400px}
.auth-card h2{font-family:var(--display);font-size:24px;margin:0 0 6px}
.auth-card .sub{color:var(--muted);margin:0 0 26px;line-height:1.8}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#ECEFE8;border-radius:12px;padding:4px;margin-bottom:22px}
.seg button{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:600;color:var(--ink-2);cursor:pointer}
.seg button.on{background:#fff;color:var(--forest-deep);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field input,.field select{border:1.5px solid var(--hair);background:#fff;border-radius:10px;padding:12px 14px;outline:none;transition:border-color .15s}
.field input:focus,.field select:focus{border-color:var(--forest)}
.field input[type=email]{direction:ltr;text-align:right}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;transition:transform .05s,filter .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--forest);color:#fff;width:100%}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary[disabled]{opacity:.6;cursor:wait}
.btn-ghost{background:transparent;border:1.5px solid var(--hair);color:var(--ink-2);padding:8px 14px;font-weight:600}
.btn-ghost:hover{border-color:var(--forest);color:var(--forest)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.msg{border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.8;margin-bottom:14px}
.msg.err{background:#FBECEC;color:var(--danger)}
.msg.ok{background:#E6F2EC;color:var(--forest-deep)}
.hint{font-size:12.5px;color:var(--muted);line-height:1.8;margin-top:16px}

/* ---------- الهيكل الداخلي ---------- */
.shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.side{background:var(--forest-deep);color:#fff;padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.side .brand img{height:34px;background:#fff;border-radius:8px;padding:3px 6px}
.side .brand b{font-family:var(--display);letter-spacing:2px;font-size:19px}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:rgba(255,255,255,.78);cursor:pointer;font-weight:500;border:0;background:transparent;text-align:right;width:100%}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.on{background:rgba(201,164,67,.16);color:#fff;box-shadow:inset -3px 0 0 var(--gold)}
.nav-item .soon{margin-right:auto;font-size:10.5px;background:rgba(255,255,255,.1);padding:2px 7px;border-radius:20px;color:rgba(255,255,255,.6)}
.nav-sep{font-size:11px;color:rgba(255,255,255,.4);padding:14px 12px 4px}
.side .me{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:14px 8px 0;font-size:13px}
.side .me b{display:block;font-size:14px}
.side .me span{color:rgba(255,255,255,.6)}
.side .me button{margin-top:10px;color:#fff;border-color:rgba(255,255,255,.25);width:100%}
.main{padding:30px 36px 60px;min-width:0}
.topbar{display:none}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-h h1{font-family:var(--display);font-size:24px;margin:0}
.page-h p{margin:6px 0 0;color:var(--muted)}

.hero{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(135deg,#0E3B2E,#1E6E52);color:#fff;padding:30px 30px 34px;margin-bottom:22px}
.hero .waves{position:absolute;left:0;right:0;bottom:-6px;height:90px;opacity:.9}
.hero h2{position:relative;font-family:var(--display);font-size:24px;margin:0 0 8px}
.hero p{position:relative;margin:0;color:rgba(255,255,255,.85);line-height:1.9}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:30px;background:rgba(201,164,67,.2);color:#F3DC97;position:relative;margin-bottom:12px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.mod{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:18px;position:relative}
.mod .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;margin-bottom:12px}
.mod h3{margin:0 0 6px;font-size:15.5px}
.mod p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.mod .tag{position:absolute;top:16px;left:16px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:#EFF1EB;color:var(--muted)}
.mod .tag.live{background:#E6F2EC;color:var(--forest)}

.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.card-h{padding:16px 18px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card-h h3{margin:0;font-size:15.5px}
table{width:100%;border-collapse:collapse}
th{font-size:12px;color:var(--muted);font-weight:600;text-align:right;padding:11px 14px;background:#FAFBF8;border-bottom:1px solid var(--hair)}
td{padding:12px 14px;border-bottom:1px solid #F0F2EC;font-size:13.5px;vertical-align:middle}
tr:last-child td{border-bottom:0}
td .em{direction:ltr;text-align:right;color:var(--ink-2);font-size:12.5px}
td select{border:1.5px solid var(--hair);border-radius:8px;padding:6px 8px;background:#fff;max-width:150px}
.st{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.st-active{background:#E6F2EC;color:var(--forest)}
.st-pending{background:#FDF1E3;color:var(--warn)}
.st-invited{background:#EAF4FB;color:#1F6E9C}
.st-disabled{background:#F3F3F1;color:var(--muted)}
.table-wrap{overflow-x:auto}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form input,.inline-form select{border:1.5px solid var(--hair);border-radius:8px;padding:8px 10px;background:#fff}
.inline-form input{direction:ltr;min-width:220px}
.btn-forest{background:var(--forest);color:#fff}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.2);max-width:90vw}
.empty{padding:28px;text-align:center;color:var(--muted)}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-brand{padding:28px 22px 120px;min-height:auto}
  .auth-brand h1{font-size:24px;margin-top:24px}
  .auth-brand .foot{display:none}
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 0 0 auto;width:260px;transform:translateX(100%);transition:transform .2s;z-index:50}
  .side.open{transform:none;box-shadow:-20px 0 40px rgba(0,0,0,.25)}
  .topbar{display:flex;align-items:center;justify-content:space-between;background:var(--forest-deep);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:40}
  .topbar b{font-family:var(--display);letter-spacing:2px}
  .topbar button{background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}
  .main{padding:20px 16px 50px}
}