/* Base */
*{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth}
body{font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto;background:#fbfcfe;color:#0f172a;line-height:1.6}
a{color:var(--primary,#0ea5e9);text-decoration:none} img{max-width:100%;display:block}
:root{--primary:#0ea5e9;--accent:#1f2937;--card-bg:#fff;--border:#e5e7eb;--muted:#64748b;--shadow-sm:0 4px 16px rgba(0,0,0,.04);--shadow-md:0 8px 24px rgba(0,0,0,.06)}
/* Public */
.app-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.app-header .title{font-weight:800;letter-spacing:.2px} .socials{display:flex;gap:8px}
.social-btn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-size:14px;font-weight:700;box-shadow:var(--shadow-sm);opacity:.96;transition:transform .2s,opacity .2s}
.social-btn:hover{transform:translateY(-2px);opacity:1}
.hero-ad{display:block;padding:10px 16px;animation:adPulse 1s ease-in-out 1}@keyframes adPulse{0%{opacity:.2;transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 16px}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;gap:8px;align-items:center;justify-content:center;flex-direction:column;min-height:120px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}
.card .icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(14,165,233,.09);animation:float 3s ease-in-out infinite}
.card .title{font-weight:700;color:#111;text-align:center}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#dbeafe}
.card:active{transform:scale(.985)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* Admin */
.admin .topbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--border);padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.admin .topbar .brand{font-weight:800}
.admin .topbar .nav-actions a{display:inline-block;margin-inline-start:10px;padding:8px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;color:#0f172a}
.admin .topbar .nav-actions a:hover{background:#eef2ff;border-color:#c7d2fe}
.admin-container{padding:16px}
/* Flash */
.flash{padding:12px 14px;border-radius:12px;margin:10px 0;border:1px solid transparent}
.flash-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.flash-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.flash-info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
/* Cards/Tables/Forms */
.cards{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)} .stat-card strong{font-size:22px}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.table th,.table td{border-bottom:1px solid #f1f5f9;padding:10px 12px;text-align:right} .table thead th{background:#f8fafc;font-weight:800}
.table tr:last-child td{border-bottom:0}
.form{max-width:720px} label{display:block;font-weight:600;margin:6px 0 6px}
.form input,.form select,.form textarea{width:100%;padding:12px;margin:6px 0 12px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#0f172a}
.form button,.btn{display:inline-block;padding:10px 14px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-weight:800}
.btn{background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0} .btn:hover{background:#e2e8f0}
.btn.danger,button.danger{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}
.toolbar{margin:10px 0} .auth-card{max-width:420px;margin:40px auto;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow-md);background:#fff}
.auth-card input{width:100%} .auth-card button{width:100%} .mb-2{margin-bottom:8px} .muted{color:var(--muted);font-size:13px} .inline{display:inline}
@media (min-width:960px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} .cards{grid-template-columns:repeat(4,minmax(0,1fr))} }
.icon-fallback{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,165,233,.09);font-weight:800;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.social-btn i{font-size:16px;line-height:1}
/* ====== News Ticker (LTR, start immediately, loop) ====== */
.ticker{
  background: var(--accent);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.ticker-viewport{
  overflow: hidden;
  position: relative;
  padding: 6px 0;
}

/* نخلي ترتيب العناصر داخل المسار يسار→يمين ليتوافق مع اتجاه الحركة */
.ticker-track{
  direction: ltr;                 /* مهم لعرض العناصر بالترتيب يسار→يمين */
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  transform: translateX(0);       /* يظهر فورًا من اليسار */
  animation: ticker-ltr var(--ticker-duration, 18s) linear infinite;
  animation-delay: 0s;            /* بلا تأخير */
}

.ticker:hover .ticker-track{ animation-play-state: paused; }

.tick-item{ display:inline-block; margin:0 14px; font-weight:600; }
.tick-item a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.tick-sep{ opacity:.7; margin:0 6px; }

/* الحركة: من اليسار (0) إلى خارج يمين الإطار */
.ticker-track{ transform: translateX(-100%); animation: ticker-ltr 18s linear infinite; }
@keyframes ticker-ltr{
  0%   { transform: translateX(-100%); } /* خارج يسار */
  100% { transform: translateX(100%);  } /* خارج يمين */
}


/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; transform:none; }
}

/* ===== Greeter / Online widget ===== */
.greeter-widget{
  position: fixed;
  bottom: 12px;
  left: 12px;          /* غيّرها لـ right:12px; لو تفضّل يمين */
  z-index: 70;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  color: #0f172a;
  backdrop-filter: blur(6px);
}

.greeter-avatar{ width: 44px; height: 44px; object-fit: contain; display: block; }
.greeter-avatar-emoji{ font-size: 34px; line-height: 1; }
.greeter-text{ display: flex; flex-direction: column; }
.greeter-hello{ font-weight: 800; margin-bottom: 2px; }
.greeter-online{ font-size: 13px; color: var(--muted); }

@media (max-width: 480px){
  .greeter-widget{ left: 10px; right: 10px; justify-content: center; }
}

/* ===== Hand wave animation for greeter ===== */
.greeter-avatar-emoji{
  position: relative;
  display: inline-block;
  font-size: 40px;           /* نفس المقاس السابق */
  line-height: 1;
  transform-origin: 70% 70%; /* محور الدوران عند "المعصم" تقريباً */
  animation: hand-wave 2.2s ease-in-out infinite;
}




/* إيقاف التأثير إذا فضّل المستخدم تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .greeter-avatar-emoji{ animation: none; }
  .greeter-avatar-emoji::after{ animation: none; opacity: 0; }
}