/* ============================================================
   XDreemB52 — نظام الواجهة الموحّد
   يستعمله: /setup و /settings و /admin
   كل الأزرار والبطاقات والقوائم المطويّة تُعرَّف هنا مرة واحدة،
   فيظهر الموقع بشكل واحد متناسق في كل صفحاته.
   ============================================================ */

:root{
  --primary:#F59E0B; --primary-dark:#D97706; --secondary:#EA580C;
  --bg:#0F0F0F; --bg2:#1A1A1A; --bg3:#252525; --bg4:#2E2E2E;
  --border:rgba(245,158,11,0.2); --border-strong:rgba(245,158,11,0.5);
  --text:#F5F5F5; --muted:#A3A3A3;
  --success:#22C55E; --danger:#EF4444; --info:#38BDF8; --warn:#F59E0B;
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);
  min-height:100vh;direction:rtl;padding-bottom:3.5rem;
}
.num{font-family:'JetBrains Mono',monospace}
.hidden{display:none !important}
.spacer{flex:1}

/* ---------- الشريط العلوي ---------- */
.top{
  background:linear-gradient(135deg,#1A1200,#1A0A00);border-bottom:2px solid var(--primary);
  padding:13px 1.3rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  position:sticky;top:0;z-index:60;box-shadow:0 4px 30px rgba(245,158,11,0.15);
}
.top h1{font-size:1.02rem;font-weight:900;display:flex;align-items:center;gap:8px}
.top h1 b{color:var(--primary)}
.top .site{font-size:.72rem;font-weight:900;color:var(--muted)}

.wrap{max-width:1180px;margin:0 auto;padding:1.3rem}

/* ---------- الشرائح ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:0.74rem;font-weight:900;border:1.5px solid var(--border);background:var(--bg3);color:var(--muted);
}
.chip.on{color:var(--success);border-color:rgba(34,197,94,0.45);background:rgba(34,197,94,0.08)}
.chip.off{color:var(--danger);border-color:rgba(239,68,68,0.45);background:rgba(239,68,68,0.08)}
.chip.warn{color:var(--warn);border-color:rgba(245,158,11,0.45);background:rgba(245,158,11,0.08)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.chip.on .dot{animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:0.25}}

/* ---------- الأزرار: شكل واحد لكل الموقع ---------- */
.btn{
  font-family:'Cairo',sans-serif;font-weight:900;font-size:0.84rem;padding:10px 16px;border-radius:11px;
  border:1.5px solid var(--border-strong);background:var(--bg3);color:var(--text);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s;
  text-decoration:none;white-space:nowrap;line-height:1.2;
}
.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--primary)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-main{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent;color:#1A0A00}
.btn-go{background:linear-gradient(135deg,var(--success),#15803D);border-color:transparent;color:#fff}
.btn-stop{background:linear-gradient(135deg,var(--danger),#B91C1C);border-color:transparent;color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)}
.btn-ghost:hover:not(:disabled){color:var(--text)}
.btn-sm{padding:6px 11px;font-size:0.73rem;border-radius:9px}
.btn-lg{padding:14px 22px;font-size:0.95rem;border-radius:13px}
.btn-block{width:100%}

/* زر التشغيل/الإيقاف الموحّد — نفس المقاس في تيك توك ويوتيوب وأي خدمة */
.btn-power{min-width:104px;font-size:0.78rem;padding:8px 14px;border-radius:10px}

/* ---------- الألواح ---------- */
.panel{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:1.05rem}
.panel h2{font-size:0.95rem;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--primary);flex-wrap:wrap}
.hint{color:var(--muted);font-weight:700;font-size:0.72rem}

/* ---------- القوائم المطويّة (مقفلة، تنفتح بالضغط) ---------- */
.acc{
  background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);
  margin-bottom:.75rem;overflow:hidden;transition:border-color .18s;
}
.acc.open{border-color:var(--border-strong)}
.acc-head{
  width:100%;background:none;border:none;cursor:pointer;color:var(--text);
  font-family:'Cairo',sans-serif;display:flex;align-items:center;gap:11px;
  padding:14px 16px;text-align:right;transition:background .18s;
}
.acc-head:hover{background:rgba(245,158,11,.05)}
.acc-head:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.acc-ico{font-size:1.15rem;flex-shrink:0;line-height:1}
.acc-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.acc-title{font-size:0.92rem;font-weight:900}
.acc-sub{font-size:0.7rem;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* الحالة الحيّة تظهر على رأس القائمة حتى وهي مقفلة */
.acc-live{font-size:0.7rem;font-weight:900;color:var(--muted);white-space:nowrap;flex-shrink:0}
.acc-live.on{color:var(--success)}
.acc-live.off{color:var(--danger)}
.acc-live.warn{color:var(--warn)}
.acc-arrow{flex-shrink:0;color:var(--primary);transition:transform .22s;font-size:.8rem}
.acc.open .acc-arrow{transform:rotate(180deg)}
.acc-body{display:none;padding:0 16px 16px;border-top:1px solid var(--border)}
.acc.open .acc-body{display:block;animation:accIn .22s ease-out}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .acc.open .acc-body{animation:none}
  .acc-arrow{transition:none}
  .btn:hover:not(:disabled){transform:none}
}

/* ---------- الحقول ---------- */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:0.74rem;color:var(--muted);font-weight:900}
input[type=text],input[type=number],input[type=password],select{
  font-family:'Cairo',sans-serif;background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;
  padding:9px 12px;color:var(--text);font-size:0.84rem;font-weight:700;
}
input:focus,select:focus{outline:none;border-color:var(--primary)}
.switch{display:flex;align-items:center;gap:9px;font-size:0.8rem;font-weight:700;cursor:pointer;padding-top:12px}
.switch input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}

.linkrow{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bg3);
  border:1px dashed var(--border-strong);border-radius:11px;padding:10px 12px;font-size:0.78rem;
}
.linkrow code{font-family:'JetBrains Mono',monospace;color:var(--primary);word-break:break-all}
.note{margin-top:9px;font-size:.73rem;opacity:.6;line-height:1.75}

/* ---------- النوافذ ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:300;padding:1rem}
.overlay.show{display:flex}
.card{background:var(--bg2);border:1.5px solid var(--border-strong);border-radius:18px;padding:26px;max-width:430px;width:100%}
.card h3{font-size:1.05rem;margin-bottom:8px}
.card p{font-size:0.82rem;color:var(--muted);margin-bottom:14px;line-height:1.7}
.card input{width:100%;padding:12px 14px;font-size:0.9rem;margin-bottom:12px;border-radius:11px}
.card .err{color:var(--danger);font-size:0.78rem;font-weight:700;margin-bottom:10px;display:none}
.card .err.show{display:block}
.card-actions{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap}

/* ---------- التنبيه ---------- */
.toast{
  position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%) translateY(90px);background:var(--bg3);
  border:1.5px solid var(--border-strong);border-radius:12px;padding:12px 22px;font-size:0.85rem;font-weight:900;
  color:var(--primary);z-index:500;transition:transform .3s;pointer-events:none;max-width:92vw;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.bad{color:var(--danger);border-color:rgba(239,68,68,.6)}

/* ---------- شريط التنقّل بين صفحات الأدمن ---------- */
.navpills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.1rem}
.navpill{
  flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg2);
  color:var(--text);font-family:'Cairo',sans-serif;font-weight:900;font-size:0.85rem;
  cursor:pointer;text-decoration:none;transition:.18s;
}
.navpill:hover{border-color:var(--primary);transform:translateY(-1px)}
.navpill.active{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent;color:#1A0A00}

@media(max-width:640px){
  .wrap{padding:1rem .8rem}
  .top{padding:11px .9rem;gap:8px}
  .top h1{font-size:.92rem}
  .acc-sub{display:none}
}