/* ============================================
   قطار — أنماط مشتركة
   ============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --brand: #9B0D23;
  --brand-mid: #C8102E;
  --brand-light: #FFF0F2;
  --brand-border: #F5B8C0;

  --gold: #BA7517;
  --gold-light: #FAEEDA;
  --gold-mid: #EF9F27;

  --green: #27500A;
  --green-light: #EAF3DE;
  --green-mid: #4A8A1A;

  --blue: #0C447C;
  --blue-light: #E6F1FB;

  --s: #ffffff;
  --s2: #f7f7f7;
  --b: #e8e8e8;
  --b2: #d0d0d0;
  --t: #1a1a1a;
  --t2: #666666;
  --t3: #aaaaaa;

  --r: 10px;
  --rl: 16px;
}

html, body {
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  background: var(--s2);
  color: var(--t);
  direction: rtl;
}

button { font-family: inherit; }
input, textarea { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 10px; }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1a1a1a;
  color: #eee;
  padding: 9px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: all .25s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.conn-status {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 998;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.conn-status.online { background: var(--green-light); color: var(--green); }
.conn-status.offline { background: var(--brand-light); color: var(--brand); }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.conn-status.online .conn-dot { animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }