/* ═══════════════════════════════════════════════════════════════════════
   Tailor — واجهة النظام الداخلية
   نفس هوية الواجهة التسويقية: فحمي وذهبي (البدلة وخيطها)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0b0e13;
  --bg-2:#11151d;
  --card:#161b23;
  --card-2:#1a2029;
  --line:#232a35;
  --line-soft:#1c222b;
  --text:#e9edf4;
  --muted:#8b93a7;
  --muted-2:#666e80;

  --gold:#c9a227;
  --gold-2:#e3c14b;
  --gold-soft:rgba(201,162,39,.12);
  --gold-line:rgba(201,162,39,.32);

  --ok:#3fb96f;   --ok-soft:rgba(63,185,111,.12);
  --bad:#e5534b;  --bad-soft:rgba(229,83,75,.12);
  --info:#4f8ff7; --info-soft:rgba(79,143,247,.12);

  --r:12px; --r-lg:16px;
  --sidebar:248px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px}
body{
  font-family:'Cairo',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100svh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:var(--gold-soft)}

/* ─────────────── الهيكل ─────────────── */
.app{display:flex;min-height:100svh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:26px 28px;flex:1;max-width:1280px;width:100%;margin-inline:auto}

/* ─────────────── الشريط الجانبي ─────────────── */
.sidebar{
  width:var(--sidebar);flex-shrink:0;background:var(--bg-2);
  border-inline-start:none;border-inline-end:1px solid var(--line-soft);
  display:flex;flex-direction:column;position:sticky;top:0;height:100svh;
  overflow-y:auto;scrollbar-width:thin;
}
.brand{
  display:flex;align-items:center;gap:10px;padding:20px 22px 16px;
  font-weight:900;font-size:18px;letter-spacing:.2px;
}
.brand .mk{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),#8f7418);color:#0b0e13;font-size:16px;
}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:1px}

.nav{padding:4px 12px 20px;display:flex;flex-direction:column;gap:2px}
.nav .sec-title{
  font-size:10.5px;font-weight:800;color:var(--muted-2);letter-spacing:.8px;
  padding:16px 12px 6px;
}
.nav a,.nav .soon{
  display:flex;align-items:center;gap:11px;padding:9.5px 12px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--muted);
  transition:background .15s,color .15s;
}
.nav a:hover{background:var(--card);color:var(--text)}
.nav a.on{background:var(--gold-soft);color:var(--gold-2)}
.nav a.on i{color:var(--gold-2)}
.nav i{font-style:normal;width:20px;text-align:center;font-size:15px;flex-shrink:0}
.nav .soon{cursor:default;opacity:.45}
.nav .soon b{
  margin-inline-start:auto;font-size:9.5px;font-weight:800;color:var(--muted);
  border:1px solid var(--line);padding:1px 7px;border-radius:99px;
}

/* ─────────────── الشريط العلوي ─────────────── */
.topbar{
  display:flex;align-items:center;gap:14px;padding:14px 28px;
  border-bottom:1px solid var(--line-soft);background:var(--bg-2);
  position:sticky;top:0;z-index:40;
}
.topbar .burger{display:none;background:none;border:none;color:var(--text);font-size:20px}
.topbar h1{font-size:16px;font-weight:800}
.topbar .grow{flex:1}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:4px 12px;border-radius:99px;border:1px solid var(--line);color:var(--muted);
}
.chip.gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-2)}
.chip.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.chip.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.userbox{display:flex;align-items:center;gap:10px}
.userbox .av{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--line);font-weight:800;font-size:13px;color:var(--gold-2);
}
.userbox .nm{line-height:1.25}
.userbox .nm b{display:block;font-size:12.5px}
.userbox .nm span{font-size:10.5px;color:var(--muted)}
.iconbtn{
  background:none;border:1px solid var(--line);color:var(--muted);width:34px;height:34px;
  border-radius:10px;display:grid;place-items:center;font-size:15px;transition:.15s;
}
.iconbtn:hover{color:var(--bad);border-color:var(--bad)}

/* ─────────────── البطاقات والشبكات ─────────────── */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;
}
.card h3{font-size:14px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3 .hint{font-size:11px;color:var(--muted);font-weight:600;margin-inline-start:auto}

.stat{display:flex;flex-direction:column;gap:4px}
.stat .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;
  background:var(--gold-soft);margin-bottom:10px;
}
.stat b{font-size:26px;font-weight:900;line-height:1}
.stat span{font-size:12px;color:var(--muted);font-weight:600}

/* ─────────────── الجداول ─────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  text-align:right;font-size:11px;font-weight:800;color:var(--muted-2);
  letter-spacing:.4px;padding:10px 14px;border-bottom:1px solid var(--line);
}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr{transition:background .12s;cursor:pointer}
.tbl tbody tr:hover{background:var(--card-2)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .sub{font-size:11.5px;color:var(--muted)}

/* ─────────────── الأزرار ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 18px;border-radius:10px;font-size:13px;font-weight:800;
  border:1px solid transparent;transition:.15s;
}
.btn-gold{background:var(--gold);color:#14100a}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{border-color:var(--line);color:var(--muted);background:none}
.btn-ghost:hover{color:var(--text);border-color:var(--muted-2)}
.btn-danger{background:var(--bad-soft);color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ─────────────── النماذج ─────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:700;color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;font-size:13.5px;color:var(--text);outline:none;transition:border-color .15s;
  width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-line)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.switch{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .tk{
  width:38px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:.2s;flex-shrink:0;
}
.switch .tk::after{
  content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;
  border-radius:50%;background:var(--muted);transition:.2s;
}
.switch input:checked+.tk{background:var(--gold)}
.switch input:checked+.tk::after{background:#14100a;inset-inline-start:19px}

/* ─────────────── المودال ─────────────── */
.modal-bk{
  position:fixed;inset:0;background:rgba(4,6,10,.72);backdrop-filter:blur(3px);
  display:none;place-items:center;z-index:90;padding:20px;
}
.modal-bk.open{display:grid}
.modal{
  width:100%;max-width:560px;max-height:90svh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;animation:pop .18s ease;
}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal h2{font-size:16px;font-weight:900;margin-bottom:4px}
.modal .sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.modal .x{
  float:left;background:none;border:none;color:var(--muted);font-size:18px;
  margin:-4px 0 0 -6px;
}
.modal .x:hover{color:var(--bad)}
.modal .foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* ─────────────── تنبيهات ─────────────── */
.flash{
  padding:12px 16px;border-radius:var(--r);font-size:13px;font-weight:700;margin-bottom:18px;
}
.flash.ok{background:var(--ok-soft);color:var(--ok)}
.flash.err{background:var(--bad-soft);color:var(--bad)}
.flash ul{margin:4px 18px 0 0}

/* ─────────────── متفرقات ─────────────── */
.empty{
  text-align:center;color:var(--muted);padding:40px 20px;font-size:13.5px;
}
.empty i{font-style:normal;font-size:30px;display:block;margin-bottom:10px;opacity:.6}
.pagehead{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pagehead h2{font-size:19px;font-weight:900}
.pagehead p{font-size:12.5px;color:var(--muted);margin-top:2px}
.pagehead .grow{flex:1}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.ok{background:var(--ok)}
.dot.off{background:var(--muted-2)}

/* ─────────────── الاستجابة ─────────────── */
@media(max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .sidebar{
    position:fixed;inset-inline-end:0;top:0;z-index:80;transform:translateX(-100%);
    transition:transform .25s;box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:none !important}
  .topbar .burger{display:block}
  .content{padding:18px 16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .userbox .nm{display:none}
}

/* بطاقة ترقية الباقة — للباقة المجانية */
.mud-upsell{display:block;margin:10px 12px;padding:11px 12px 12px;border-radius:15px;background:linear-gradient(155deg,#3a332a,#221e18);box-shadow:0 8px 20px rgba(40,32,22,.28);transition:.2s;text-decoration:none}
.mud-upsell:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(40,32,22,.36)}
.mud-upsell .ul{display:block;color:#d9cdb4;font-size:10.5px;font-weight:800;margin-bottom:8px;text-align:center}
.mud-upsell .ub{display:block;background:linear-gradient(135deg,#f3ece0,#ddd2bd);color:#3a2f20;border-radius:100px;padding:8px 10px;font-size:12px;font-weight:900;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}