/* صدى شات — الأنماط المشتركة */
:root, [data-theme="night"] {
  --bg: #0b0f1e; --bg2: #11162a; --panel: #161c33; --panel2: #1d2440; --line: #2a3256;
  --text: #e8ebf7; --muted: #8d95b8; --accent: #8b5cf6; --accent2: #ec4899;
  --good: #22c55e; --warn: #f59e0b; --danger: #ef4444; --gold: #f5c518;
  --grad: linear-gradient(135deg, var(--accent), var(--accent2));
  --shadow: 0 10px 30px rgba(0,0,0,.35); --radius: 16px;
  --chat-bg: radial-gradient(1200px 600px at 100% 0, rgba(139,92,246,.10), transparent 60%), var(--bg2);
}
[data-theme="light"] {
  --bg: #eef1f8; --bg2: #f7f8fc; --panel: #ffffff; --panel2: #f1f3fa; --line: #dfe3ef;
  --text: #1b2033; --muted: #6b7290; --accent: #7c3aed; --accent2: #db2777;
  --shadow: 0 8px 24px rgba(30,40,80,.10);
  --chat-bg: radial-gradient(1200px 600px at 100% 0, rgba(124,58,237,.06), transparent 60%), var(--bg2);
}
[data-theme="royal"] {
  --bg: #120a24; --bg2: #1a0f33; --panel: #231543; --panel2: #2c1b55; --line: #3d2a70;
  --text: #f1eaff; --muted: #a998d4; --accent: #a855f7; --accent2: #f472b6;
  --chat-bg: radial-gradient(900px 500px at 0 0, rgba(244,114,182,.12), transparent 60%), var(--bg2);
}
[data-theme="gold"] {
  --bg: #0c0b08; --bg2: #13110c; --panel: #1b1811; --panel2: #242016; --line: #3a321e;
  --text: #f6efd9; --muted: #b3a77f; --accent: #d4a514; --accent2: #f59e0b;
  --chat-bg: radial-gradient(900px 500px at 100% 0, rgba(212,165,20,.10), transparent 60%), var(--bg2);
}
[data-theme="ocean"] {
  --bg: #04131c; --bg2: #071c28; --panel: #0b2534; --panel2: #102f42; --line: #1b4259;
  --text: #e3f5ff; --muted: #86afc4; --accent: #0ea5e9; --accent2: #14b8a6;
  --chat-bg: radial-gradient(900px 500px at 100% 0, rgba(14,165,233,.12), transparent 60%), var(--bg2);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, sans-serif; background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* أزرار وحقول */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line);
  background: var(--panel2); padding: 9px 16px; border-radius: 12px; cursor: pointer; font-weight: 700;
  transition: transform .12s, filter .15s, background .15s; white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad); border: 0; color: #fff; box-shadow: 0 6px 18px rgba(139,92,246,.35); }
.btn.good { background: var(--good); border: 0; color: #fff; }
.btn.danger { background: var(--danger); border: 0; color: #fff; }
.btn.warn { background: var(--warn); border: 0; color: #1b1300; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; position: relative;
  flex: none;
}
.icon-btn:hover { filter: brightness(1.15); }
.icon-btn.on { background: var(--grad); border-color: transparent; color: #fff; }
.badge-dot {
  position: absolute; top: -5px; left: -5px; background: var(--danger); color: #fff; font-size: 11px; min-width: 18px;
  height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 800;
}
.input, select.input, textarea.input {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  outline: none; transition: border .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
label.f { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 5px; font-weight: 700; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.tag {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 1px 7px;
  border-radius: 7px; line-height: 1.6; vertical-align: middle; white-space: nowrap;
}
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* الرتب */
.r6 { background: #dc2626; color: #fff; }
.r5 { background: linear-gradient(90deg,#f59e0b,#ef4444); color: #fff; }
.r4 { background: #7c3aed; color: #fff; }
.r3 { background: #2563eb; color: #fff; }
.r2 { background: #0d9488; color: #fff; }
.r1 { background: var(--panel2); color: var(--muted); }
.r0 { background: transparent; color: var(--muted); border: 1px dashed var(--line); }

/* VIP */
.vip { color: #1a1300; }
.vip1 { background: linear-gradient(90deg,#b8733a,#e3a76f); color: #fff; }
.vip2 { background: linear-gradient(90deg,#94a3b8,#e2e8f0); color: #1e293b; }
.vip3 { background: linear-gradient(90deg,#d4a514,#fde68a); color: #3b2a00; }
.vip4 { background: linear-gradient(90deg,#0ea5e9,#a5f3fc); color: #062a3b; }
.vip5 { background: linear-gradient(90deg,#f43f5e,#f59e0b,#f43f5e); background-size: 200% 100%; color: #fff; animation: shine 3s linear infinite; }
.nvip1 { color: #e3a76f; } .nvip2 { color: #cbd5e1; } .nvip3 { color: #f5c518; } .nvip4 { color: #38bdf8; } .nvip5 { color: #fb7185; }
[data-theme="light"] .nvip2 { color: #64748b; } [data-theme="light"] .nvip3 { color: #b8860b; }
.rainbow-name {
  background: linear-gradient(90deg,#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#8b5cf6,#ec4899,#ef4444);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: shine 4s linear infinite;
}
@keyframes shine { to { background-position: 300% 0; } }

/* الصورة الرمزية والإطارات */
.av {
  --s: 38px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: calc(var(--s) * .52); flex: none; position: relative; user-select: none;
}
.av.fr-gold { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px #f5c518, 0 0 12px #f5c51888; }
.av.fr-neon { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px #22d3ee, 0 0 14px #22d3ee; animation: neon 1.6s ease-in-out infinite alternate; }
.av.fr-fire { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px #f97316, 0 0 16px #ef4444; animation: fire 1s ease-in-out infinite alternate; }
.av.fr-diamond { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px #a5f3fc, 0 0 18px #67e8f9, 0 0 30px #a78bfa66; }
.av.fr-diamond::after { content: '💎'; position: absolute; top: -9px; right: -6px; font-size: 13px; }
.av.fr-rainbow::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: conic-gradient(#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#8b5cf6,#ec4899,#ef4444); animation: spin 2.5s linear infinite;
}
.av.fr-rainbow { z-index: 0; box-shadow: 0 0 0 2px var(--bg2); }
@keyframes neon { to { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px #a855f7, 0 0 20px #a855f7; } }
@keyframes fire { to { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px #ef4444, 0 0 24px #f97316; } }
@keyframes spin { to { transform: rotate(360deg); } }
.av .crown { position: absolute; top: -12px; font-size: 14px; left: 50%; transform: translateX(-50%) rotate(-12deg); }

/* نافذة منبثقة */
.modal-bg {
  position: fixed; inset: 0; background: rgba(5,8,20,.65); backdrop-filter: blur(4px); z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 16px; animation: fade .15s;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px; width: 100%; max-width: 460px;
  max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: pop .18s;
}
.modal.wide { max-width: 720px; }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.modal-h h3 { margin: 0; font-size: 17px; flex: 1; }
.modal-b { padding: 16px 18px; }
.modal-f { padding: 12px 18px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.94) translateY(10px); opacity: 0; } }

/* تنبيهات */
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast {
  background: var(--panel); border: 1px solid var(--line); border-right: 4px solid var(--accent); padding: 10px 16px;
  border-radius: 12px; box-shadow: var(--shadow); font-weight: 700; animation: pop .2s; pointer-events: auto; width: 100%;
}
.toast.good { border-right-color: var(--good); } .toast.danger { border-right-color: var(--danger); } .toast.warn { border-right-color: var(--warn); }

/* جداول */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
.tbl th { color: var(--muted); font-size: 12.5px; font-weight: 800; background: var(--panel2); position: sticky; top: 0; }
.tbl tr:hover td { background: rgba(139,92,246,.05); }
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.tab { padding: 8px 16px; border-radius: 12px; cursor: pointer; font-weight: 800; color: var(--muted); border: 1px solid transparent; white-space: nowrap; background: none; }
.tab.on { background: var(--panel2); color: var(--text); border-color: var(--line); }
.chip { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-weight: 700; font-size: 13px; white-space: nowrap; }
.chip.on { background: var(--grad); color: #fff; border-color: transparent; }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.empty .big { font-size: 46px; display: block; margin-bottom: 6px; }