/* ==========================================================================
   VYRO — Neon Roadmap Skin
   طبقة تنسيق فقط: ألوان/خلفية/حواف/ظلال. لا تغيّر أي منطق أو بنية HTML.
   تُحمَّل آخر ملف حتى تتغلب على الثيمات السابقة.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* اللون الأساسي — يُغيّر من ملف سكين واحد (gold-skin.css مثلًا) */
  --accent: #fdbf2f;
  --accent-rgb: 253, 191, 47;

  --ink: #f7f2f4;
  --muted: #a89ba2;
  --line: rgba(var(--accent-rgb), 0.18);
  --surface: #14101a;
  --canvas: #08070a;

  --red: var(--accent);
  --red-dark: #b3820f;
  --red-bright: #fdcd5e;
  --red-soft: rgba(var(--accent-rgb), 0.10);
  --red-glow: rgba(var(--accent-rgb), 0.28);

  --silver: #3a3238;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  --radius: 20px;

  --neon: var(--accent);
  --neon-soft: rgba(var(--accent-rgb), 0.14);
  --neon-line: rgba(var(--accent-rgb), 0.26);
  --neon-amber: #ffb03a;
}

html,
body {
  background: #08070a !important;
  color: var(--ink);
}

/* خلفية مركّبة: شبكة سداسية خفيفة + هالات نيون + تدرّج داكن */
body {
  background-color: #08070a !important;
  background-image:
    radial-gradient(ellipse at 88% -6%, rgba(var(--accent-rgb), 0.26), transparent 42%),
    radial-gradient(ellipse at 6% 62%, rgba(179, 130, 15, 0.22), transparent 46%),
    radial-gradient(ellipse at 62% 108%, rgba(120, 91, 22, 0.24), transparent 50%),
    linear-gradient(150deg, #0a080c 0%, #100b11 46%, #08070a 100%) !important;
  background-attachment: fixed !important;
}

/* شبكة سداسية دقيقة فوق الخلفية، بدون اعتراض اللمس */
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.20;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.045) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 78%);
}

body > .demo-ribbon,
body > .auth-shell,
body > .app-shell {
  position: relative;
  z-index: 1;
}

/* ---------- البطاقات: زجاج داكن بحواف نيون ---------- */
.glass-card,
.auth-panel,
.auth-header,
.section-card,
.panel-card,
.stat-card,
.action-tile,
.modal-card,
.market-vyro,
.device-card {
  border: 1px solid var(--neon-line) !important;
  background:
    linear-gradient(180deg, rgba(28, 20, 30, 0.86), rgba(16, 12, 18, 0.92)) !important;
  border-radius: var(--radius) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 46px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- العناوين ---------- */
.brand__name,
.auth-hero h1,
.topbar-title h1,
.panel-heading h2,
.section-card h2,
.section-card h3,
h1,
h2 {
  color: #fdf8fa;
  letter-spacing: 0.01em;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.16);
}

.brand__name {
  background: linear-gradient(92deg, #ffffff 12%, #fee19e 62%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.brand__coin {
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.16) !important;
}

.brand__coin img {
  filter:
    drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.28))
    drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.12)) !important;
}

/* ---------- الشريط العلوي والقائمة ---------- */
.demo-ribbon {
  background: rgba(24, 20, 10, 0.9) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  color: #feefca !important;
  backdrop-filter: blur(8px);
}

.demo-ribbon__tag {
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: #fedd90 !important;
}

.demo-ribbon__dot {
  background: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent) !important;
}

.topbar,
.sidebar {
  background: linear-gradient(180deg, #17111a 0%, #100c13 100%) !important;
  border-color: rgba(var(--accent-rgb), 0.16) !important;
}

/* ---------- الأزرار والإدخالات ---------- */
.primary-button,
.btn--primary,
button.primary-button {
  background: linear-gradient(100deg, #b3820f, var(--accent)) !important;
  border-color: rgba(var(--accent-rgb), 0.65) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.26) !important;
}

.primary-button:hover,
.btn--primary:hover {
  filter: brightness(1.08);
}

input,
select,
textarea,
.market-vyro__input {
  background: rgba(10, 8, 13, 0.85) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.22) !important;
  color: #fdf8fa !important;
  border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.62) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14) !important;
  outline: none !important;
}

/* ---------- الفواصل والحواف الصغيرة ---------- */
hr,
.divider,
.card-divider {
  border-color: rgba(var(--accent-rgb), 0.14) !important;
}

::selection {
  background: rgba(var(--accent-rgb), 0.34);
  color: #fff;
}

/* ---------- تمرير أنيق ---------- */
* {
  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.42);
  border-radius: 999px;
}

/* ---------- نبضة خفيفة لشعار العملة ---------- */
@keyframes vyro-coin-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28); }
  50% { box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.52); }
}

.brand__coin {
  animation: vyro-coin-pulse 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .brand__coin { animation: none; }
  body { background-attachment: scroll !important; }
}

/* توهج العملة في صفحة الترحيب */
.hero__art img.coin,
.hero__art .coin {
  filter:
    drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.18))
    drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)) !important;
}

/* ===== العملة تتحرك: دوران خفيف 3D + طفو + توهج ===== */
@keyframes hero-coin-3d {
  0%   { transform: perspective(900px) translate(-50%, 0) rotate(-2deg) rotateY(0deg); }
  25%  { transform: perspective(900px) translate(-50%, -7px) rotate(1deg) rotateY(14deg); }
  50%  { transform: perspective(900px) translate(-50%, -12px) rotate(2deg) rotateY(0deg); }
  75%  { transform: perspective(900px) translate(-50%, -7px) rotate(1deg) rotateY(-14deg); }
  100% { transform: perspective(900px) translate(-50%, 0) rotate(-2deg) rotateY(0deg); }
}

@keyframes brand-coin-turn {
  0%   { transform: perspective(620px) rotateY(0deg) scale(1); }
  25%  { transform: perspective(620px) rotateY(26deg) scale(1.02); }
  50%  { transform: perspective(620px) rotateY(0deg) scale(1); }
  75%  { transform: perspective(620px) rotateY(-26deg) scale(1.02); }
  100% { transform: perspective(620px) rotateY(0deg) scale(1); }
}

.hero-art__coin {
  animation: hero-coin-3d 9s ease-in-out infinite !important;
  will-change: transform;
}

.brand__coin img {
  animation: brand-coin-turn 8s ease-in-out infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art__coin,
  .brand__coin img { animation: none !important; }
}