/* ==========================================================================
   Crypto News 11 — الطبقة الفاخرة (أسود + ذهبي)
   تُحمَّل بعد bundle.css / lite.css / الأنماط المضمّنة، فتعيد تلوين كل الصفحات.
   لحذفها بالكامل: أزل سطر luxe.css وسطر luxe.js من الصفحات.
   ========================================================================== */

/* ---------- 1) المتغيرات: تغيير الهوية من الأزرق إلى الذهبي ---------- */
:root {
  --lx-gold: #22d3ee;
  --lx-gold-soft: #a5f3fc;
  --lx-gold-deep: #8b5cf6;
  --lx-ink: #070b14;
  --lx-ease: cubic-bezier(.22, .9, .3, 1);

  --accent: #22d3ee;
  --gold: #22d3ee;
  --gold2: #a5f3fc;
  --bg: #070b14;
  --panel: #0d1526;
  --panel2: #121c33;
  --line: rgba(34, 211, 238, .16);
  --text: #e8f0ff;
  --muted: #8fa3c4;
  --glass: rgba(18, 28, 51, .6);
  --glassBorder: rgba(34, 211, 238, .14);
}

html { scroll-behavior: smooth; }

body {
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif !important;
  background: var(--lx-ink) !important;
  background-image:
    radial-gradient(900px 480px at 85% -10%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(700px 420px at -8% 8%, rgba(139, 92, 246, .08), transparent 60%) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(34, 211, 238, .35) !important; color: #fff; }
::-webkit-scrollbar-thumb { background: #24335c !important; }

/* حلقة التركيز الواضحة للوحة المفاتيح */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--lx-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 2) الكرات الضوئية الخلفية ---------- */
.orb.a { background: #22d3ee !important; opacity: .20 !important; }
.orb.b { background: #6d4fd8 !important; opacity: .22 !important; }
.orb.c { background: #a5f3fc !important; opacity: .07 !important; }

/* ---------- 3) الهيدر ---------- */
header {
  background: rgba(7, 11, 20, .72) !important;
  border-bottom: 1px solid rgba(34, 211, 238, .20) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.logo, header > a { color: var(--lx-gold) !important; font-weight: 800; letter-spacing: .3px; }
.logo span { color: var(--lx-gold-soft) !important; }
nav a { color: #a9b8d6 !important; font-weight: 600; transition: color .25s var(--lx-ease); }
nav a:hover, nav a.active { color: var(--lx-gold) !important; }
nav a::after { background: linear-gradient(90deg, var(--lx-gold), var(--lx-gold-soft)) !important; }
header nav a { color: #a9b8d6; }
.search, .lang {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(34, 211, 238, .22) !important;
  color: var(--text) !important;
  font-family: inherit;
}
.search:focus { border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, .16) !important; }
#liveClock { border-color: rgba(34, 211, 238, .22) !important; background: rgba(255, 255, 255, .03) !important; color: var(--lx-gold-soft) !important; }
.sDrop { background: #0b1222 !important; border-color: rgba(34, 211, 238, .22) !important; }
.sDrop a { border-bottom-color: rgba(34, 211, 238, .10) !important; color: var(--text) !important; }
.sDrop a:hover { background: rgba(34, 211, 238, .08) !important; color: var(--lx-gold) !important; }

/* ---------- 4) شريط الأسعار ---------- */
.ticker { background: #03060d !important; border-bottom: 1px solid rgba(34, 211, 238, .16) !important; }
.ticker-item b { color: var(--lx-gold) !important; }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- 5) الواجهة الرئيسية (Hero) ---------- */
.hero {
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(34, 211, 238, .16), transparent 70%),
    linear-gradient(180deg, rgba(34, 211, 238, .05), transparent 80%) !important;
  border-bottom: 1px solid rgba(34, 211, 238, .14) !important;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lx-gold), transparent);
  opacity: .55;
}
.hero h1, .page-hero h1 {
  background: linear-gradient(100deg, #fff 0%, var(--lx-gold-soft) 38%, var(--lx-gold) 70%, #fff 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  animation: lxSheen 7s linear infinite;
}
@keyframes lxSheen { to { background-position: -220% center; } }
.hero-badge {
  background: rgba(34, 211, 238, .08) !important;
  border-color: rgba(34, 211, 238, .35) !important;
  color: var(--lx-gold-soft) !important;
}

/* ---------- 6) الأزرار (لمعة ذهبية تمر على الزر) ---------- */
.btn-primary, .btn, .nl-form button, .coin-tabs button.active {
  background: linear-gradient(135deg, var(--lx-gold-soft), var(--lx-gold) 55%, var(--lx-gold-deep)) !important;
  color: #06101f !important;
  border: 0 !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 28px rgba(34, 211, 238, .22) !important;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary::after, .nl-form button::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); z-index: -1;
  animation: lxShine 4.5s ease-in-out infinite;
}
@keyframes lxShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.btn-primary:hover, .btn:hover { box-shadow: 0 14px 34px rgba(34, 211, 238, .34) !important; }
.btn-ghost {
  border: 1px solid rgba(34, 211, 238, .38) !important;
  color: var(--lx-gold-soft) !important;
  background: rgba(34, 211, 238, .04) !important;
}
.btn-ghost:hover { background: rgba(34, 211, 238, .12) !important; border-color: var(--lx-gold) !important; color: #fff !important; }

/* ---------- 7) العناوين ---------- */
h2.section { border-bottom: 1px solid rgba(34, 211, 238, .14) !important; }
h2.section::after { background: linear-gradient(90deg, var(--lx-gold), transparent) !important; width: 100% !important; }
.page-hero p { color: var(--muted); }

/* ---------- 8) البطاقات: زجاج داكن + حدود ذهبية + توهج يتبع المؤشر ---------- */
.widget, .article, .coin, .card, aside .box, .sec-card, .tool, .box, .t, .related a, .cards a, .alert-item, .watch-item {
  background: linear-gradient(180deg, rgba(18, 28, 51, .85), rgba(11, 18, 34, .92)) !important;
  border: 1px solid rgba(34, 211, 238, .14) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45) !important;
  transition: transform .35s var(--lx-ease), border-color .3s, box-shadow .35s var(--lx-ease) !important;
  position: relative;
}
.coin, .sec-card, .card, .article, .related a, .cards a { overflow: hidden; }
.coin::before, .sec-card::before, .card::before, .related a::before, .cards a::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, .16), transparent 60%);
  transition: opacity .3s;
}
.coin:hover::before, .sec-card:hover::before, .card:hover::before, .related a:hover::before, .cards a:hover::before { opacity: 1; }
.coin:hover, .sec-card:hover, .card:hover, .article:hover, .related a:hover, .cards a:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, .45) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 211, 238, .18) !important;
}
.sec-card b, .tool h3, .two-col h3, .coin-tabs button:not(.active):hover { color: var(--lx-gold) !important; }
.sec-card span, .coin .name, .card p, .cards span { color: var(--muted) !important; }
.tag { background: rgba(34, 211, 238, .10) !important; color: var(--lx-gold) !important; }
.coin .price { font-variant-numeric: tabular-nums; }

/* أرقام السوق تظهر بنعومة عند وصول البيانات */
.lx-pop { animation: lxPop .7s var(--lx-ease) both; }
@keyframes lxPop { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- 9) جدول العملات ---------- */
.widget { padding: 10px !important; }
table.coins th { color: var(--muted) !important; border-bottom-color: rgba(34, 211, 238, .16) !important; }
table.coins td { border-bottom-color: rgba(34, 211, 238, .08) !important; }
table.coins tr.row { transition: background .25s; }
table.coins tr.row:hover { background: rgba(34, 211, 238, .07) !important; }
table.coins tr.row td:first-child { color: var(--lx-gold) !important; }
.lx-flash-up { animation: lxUp 1.2s ease-out; }
.lx-flash-down { animation: lxDown 1.2s ease-out; }
@keyframes lxUp   { 0% { background: rgba(22, 199, 132, .38); } 100% { background: transparent; } }
@keyframes lxDown { 0% { background: rgba(234, 57, 67, .38); }  100% { background: transparent; } }

/* ---------- 10) الحقول والنماذج ---------- */
.inp, .t input, .t select, .nl-form input[type="email"], input, select, textarea {
  background: rgba(255, 255, 255, .03) !important;
  border-color: rgba(34, 211, 238, .22) !important;
  color: var(--text) !important;
  font-family: inherit;
}
.inp:focus, .t input:focus, .t select:focus, .nl-form input:focus { border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, .14); outline: none; }
.t button.sec { background: rgba(34, 211, 238, .12) !important; color: var(--lx-gold-soft) !important; box-shadow: none !important; }
.res { background: rgba(34, 211, 238, .05) !important; border: 1px solid rgba(34, 211, 238, .14); }
.res b, .calc-out b, .mstats b { color: var(--lx-gold-soft) !important; }
.mstats div { background: rgba(255, 255, 255, .03) !important; border-color: rgba(34, 211, 238, .10) !important; }
.tt th, .tt td { border-bottom-color: rgba(34, 211, 238, .10) !important; }

/* ---------- 11) صفحات المقالات ---------- */
main h1 { color: var(--lx-gold) !important; }
main h2 { color: var(--lx-gold) !important; position: relative; padding-inline-start: 14px; }
main h2::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .35em; bottom: .35em; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--lx-gold-soft), var(--lx-gold-deep));
}
.article-body, main p, main li, dd { color: #c9d6ef; }
.meta { color: var(--muted) !important; }
dt { color: var(--lx-gold) !important; }
.warn {
  background: rgba(34, 211, 238, .06) !important;
  border-inline-start: 4px solid var(--lx-gold) !important;
  color: #c9d6ef !important;
}
main a:not([class]) { color: var(--lx-gold-soft); text-decoration: underline; text-decoration-color: rgba(34, 211, 238, .4); text-underline-offset: 3px; }
main a:not([class]):hover { color: #fff; }
.article summary::after { color: var(--lx-gold) !important; }

/* ---------- 12) الأسعار والتغيّر ---------- */
.up { color: #19d38e; text-shadow: 0 0 14px rgba(25, 211, 142, .28); }
.down { color: #ff4d57; text-shadow: 0 0 14px rgba(255, 77, 87, .26); }

/* ---------- 13) التذييل وموافقة الكوكيز ---------- */
footer { background: linear-gradient(180deg, transparent, #03060d 60%) !important; border-top: 1px solid rgba(34, 211, 238, .16) !important; }
footer a:hover { color: var(--lx-gold) !important; }
#cn11-consent { border-color: rgba(34, 211, 238, .3) !important; background: #0b1222 !important; }
#cn11-consent a { color: var(--lx-gold) !important; }
#cn11-consent button { background: linear-gradient(135deg, var(--lx-gold-soft), var(--lx-gold)) !important; color: #06101f !important; }

/* ---------- 14) شريط تقدّم القراءة ---------- */
#lx-progress {
  position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 200; pointer-events: none;
  transform-origin: 100% 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--lx-gold-deep), var(--lx-gold), var(--lx-gold-soft));
  box-shadow: 0 0 12px rgba(34, 211, 238, .6);
}
html[dir="ltr"] #lx-progress { transform-origin: 0 50%; }

/* ---------- 15) الظهور التدريجي عند التمرير ---------- */
.lx-js .lx-rv { opacity: 0; transform: translateY(26px) scale(.985); }
.lx-js .lx-rv.lx-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--lx-ease), transform .8s var(--lx-ease);
  transition-delay: var(--lx-d, 0s);
}
/* البطاقات لا تستخدم transform لحركة التمرير بعد الظهور، حتى لا يتعارض مع ارتفاعها عند المرور */
.lx-js .lx-rv.lx-done { transition: transform .35s var(--lx-ease), border-color .3s, box-shadow .35s var(--lx-ease) !important; }

/* ---------- 16) زر قائمة الجوال الموجود أصلاً في الموقع (.nav-toggle): نلوّنه بالذهبي ---------- */
.nav-toggle { border-color: rgba(34, 211, 238, .35) !important; background: rgba(34, 211, 238, .06) !important; }
.nav-toggle span { background: var(--lx-gold) !important; }
nav.open a { background: rgba(34, 211, 238, .06) !important; border: 1px solid rgba(34, 211, 238, .12); }
@media (max-width: 820px) { .hero h1 { font-size: 1.55rem !important; } }

/* ---------- 17) احترام من يفضّل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .lx-js .lx-rv { opacity: 1 !important; transform: none !important; }
  .ticker-track { animation: none !important; }
}

/* الأنيميشن القديم لعناصر .page يتعارض مع الظهور التدريجي: نعطّله لها */
.lx-js .page > .lx-rv { animation: none !important; }

/* ---------- 18) إصلاحات: بقايا الأزرق في الثيم القديم ---------- */
/* أزرار الإرسال (كانت تأخذ تدرجاً أزرق بأولوية أعلى) */
button[type="submit"], .nl-form button {
  background: linear-gradient(135deg, var(--lx-gold-soft), var(--lx-gold) 55%, var(--lx-gold-deep)) !important;
  color: #06101f !important;
  box-shadow: 0 10px 28px rgba(34, 211, 238, .22) !important;
}
button[type="submit"]:hover { box-shadow: 0 14px 34px rgba(34, 211, 238, .34) !important; }

/* توهج أسفل بطاقات الأقسام */
.sec-card::after { background: radial-gradient(circle, rgba(34, 211, 238, .16), transparent 70%) !important; }
.sec-card:hover { border-color: rgba(34, 211, 238, .45) !important; box-shadow: 0 22px 50px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(34, 211, 238, .22) !important; }

/* القائمة العلوية */
nav a:hover { background: rgba(34, 211, 238, .08) !important; }
nav a.active { background: rgba(34, 211, 238, .14) !important; color: var(--lx-gold) !important; }

/* حواف وتمرير */
.lang:hover, .coin-tabs button:hover { border-color: rgba(34, 211, 238, .5) !important; }
.coin-tabs button { background: rgba(255, 255, 255, .03); border-color: rgba(34, 211, 238, .18); }
table.coins tbody tr:hover { background: rgba(34, 211, 238, .07) !important; }
.hero h1 { -webkit-text-fill-color: transparent !important; }
.breaking { background: linear-gradient(90deg, var(--lx-gold-deep), var(--lx-gold-soft)) !important; color: #06101f !important; }

/* أيقونة الشعار: ذهبية بدل الزرقاء */
.logo-mark circle { fill: transparent !important; }
.logo-mark path { stroke: #fff !important; }
@property --lx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.logo-mark {
  border-radius: 11px 5px 11px 5px;
  background: conic-gradient(from var(--lx-a), #22d3ee, #8b5cf6, #22d3ee);
  box-shadow: 0 0 18px rgba(34, 211, 238, .35);
  animation: lxSpin 9s linear infinite, lxGlow 3.2s ease-in-out infinite;
}
@keyframes lxSpin { to { transform: rotate(360deg); } }
@keyframes lxCounter { to { transform: rotate(-360deg); } }
.logo-mark path { transform-box: fill-box; transform-origin: center; animation: lxCounter 9s linear infinite; }
@keyframes lxGlow { 50% { box-shadow: 0 0 26px rgba(139, 92, 246, .55); } }
@media (prefers-reduced-motion: reduce) { .logo-mark, .logo-mark path { animation: none; } }

/* عناوين الأقسام في الصفحة الرئيسية: لا نضيف شريط المقالات عليها */
main h2.section { padding-inline-start: 0 !important; }
main h2.section::before { content: none !important; }

/* ---------- الجوال: البحث كأيقونة + شعار أصغر قليلاً ---------- */
.logo-mark { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; margin-inline: 5px; }
.lx-sbtn { display: none; }
@media (max-width: 820px) {
  header { gap: 8px 8px !important; }
  header .sWrap { display: none !important; }
  header.lx-s-open .sWrap { display: block !important; order: 9; flex: 1 1 100%; }
  header { padding-inline: 12px !important; }
  .logo { font-size: 1rem !important; gap: 6px !important; }
  .nav-toggle { width: 38px !important; }
  header .lang { width: 74px !important; padding-inline: 6px !important; font-size: .8rem !important; }
  .lx-sbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(34, 211, 238, .22); background: rgba(255, 255, 255, .03); color: var(--text); cursor: pointer; }
}