/* ==================== تم ۱: کلاسیک (پیش‌فرض) — مشکی/طلایی لاکچری ==================== */
:root, [data-theme="classic"]{
  --bg-obsidian:#0a0908;
  --bg-panel:#141210;
  --bg-panel-2:#1c1814;
  --gold-deep:#8a6a2c;
  --gold:#c9a24b;
  --gold-bright:#f0d383;
  --champagne:#f3ecd9;
  --muted:#a8987a;
  --burgundy:#3d0f14;
  --border-tint:rgba(201,162,75,0.35);
  --border-tint-soft:rgba(201,162,75,0.22);
  --up:#4ade80;
  --down:#f87171;
  --font-display:'Vazirmatn', sans-serif;
  --font-body:'Vazirmatn', sans-serif;
}

/* ==================== تم ۲: لمون — مشکی/سرمه‌ای تیره + سبز نئونی لیمویی ==================== */
[data-theme="lemon"]{
  --bg-obsidian:#0d1117;
  --bg-panel:#161c25;
  --bg-panel-2:#1c2330;
  --gold-deep:#6b9e00;
  --gold:#9ae600;
  --gold-bright:#c3ff4d;
  --champagne:#f2f5f8;
  --muted:#8a95a5;
  --burgundy:#141a24;
  --border-tint:rgba(154,230,0,0.4);
  --border-tint-soft:rgba(154,230,0,0.25);
  --up:#9ae600;
  --down:#f87171;
  --font-display:'Vazirmatn', sans-serif;
  --font-body:'Vazirmatn', sans-serif;
}

/* ==================== تم ۳: دیما — مشکی خنثی + نارنجی‌قرمز آتشین ==================== */
[data-theme="dima"]{
  --bg-obsidian:#121212;
  --bg-panel:#1c1c1c;
  --bg-panel-2:#241a16;
  --gold-deep:#c1440e;
  --gold:#ff5722;
  --gold-bright:#ff8a50;
  --champagne:#f5f0ea;
  --muted:#9a8f86;
  --burgundy:#4a1508;
  --border-tint:rgba(255,87,34,0.45);
  --border-tint-soft:rgba(255,87,34,0.28);
  --up:#4ade80;
  --down:#ffb347;
  --font-display:'Vazirmatn', sans-serif;
  --font-body:'Vazirmatn', sans-serif;
}

/* ==================== تم ۴: درخشان — روشن، رزگلد ملایم، جواهرفروشی لوکس ==================== */
[data-theme="bright"]{
  --bg-obsidian:#faf3ec;
  --bg-panel:#ffffff;
  --bg-panel-2:#f6ece1;
  --gold-deep:#a97452;
  --gold:#c98a63;
  --gold-bright:#8a5a3b;
  --champagne:#3a2a20;
  --muted:#8a7768;
  --burgundy:#caa07a;
  --border-tint:rgba(201,138,99,0.5);
  --border-tint-soft:rgba(201,138,99,0.3);
  --up:#1f9d55;
  --down:#c0392b;
  --font-display:'Noto Naskh Arabic', 'Vazirmatn', sans-serif;
  --font-body:'Vazirmatn', sans-serif;
}
[data-theme="bright"] .board-footer{ color:#3a2a20; }
[data-theme="bright"] .ticker-text{ color:#3a2a20; }

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  height:100%;
  width:100%;
  background:var(--bg-obsidian);
  color:var(--champagne);
  font-family:var(--font-body);
  overflow:hidden;
  position:relative;
}

.board{
  position:absolute;
  top:0; bottom:0; left:0;
  width:calc(100% - 2px);
  display:flex;
  flex-direction:column;
  background:var(--bg-obsidian);
  overflow:hidden;
  border:2px solid var(--border-tint);
  transition:background 0.4s;
}

/* ---------- HEADER ---------- */
.board-header{
  flex:0 0 auto;
  padding:2vh 3vw 1vh;
  text-align:center;
}
.logo-wrap{
  height:7vh;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1vh;
  overflow:hidden;
}
.logo-wrap img{ max-height:100%; max-width:70%; object-fit:contain; }
.logo-wrap .logo-fallback{
  font-family:'Lalezar', var(--font-display);
  font-size:3vh;
  color:var(--gold-bright);
  letter-spacing:1px;
  white-space:nowrap;
}
.header-line{
  width:55%;
  max-width:320px;
  height:2px;
  margin:0 auto 1.2vh;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.header-title{
  font-weight:600;
  font-size:2vh;
  color:var(--champagne);
  letter-spacing:0.5px;
}
.header-sub{
  margin-top:0.6vh;
  font-size:1.3vh;
  color:var(--muted);
}

/* ---------- MAIN ---------- */
.board-main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:1.8vh;
  padding:0 3vw;
  overflow:hidden;
  min-height:0;
  position:relative;
}

.hero-rate{
  position:relative;
  width:100%;
  max-width:640px;
  text-align:center;
  padding:2vh 3vw;
  border:1px solid var(--border-tint);
  border-radius:6px;
  background:var(--bg-panel);
  overflow:hidden;
  flex:0 0 auto;
}
.hero-label{
  font-size:1.7vh;
  color:var(--gold-bright);
  letter-spacing:1px;
  margin-bottom:0.6vh;
}
.hero-frame{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.hero-value{
  font-family:var(--font-display);
  font-weight:800;
  font-size:6.5vh;
  line-height:1;
  color:var(--gold-bright);
}
.hero-unit{
  font-size:1.5vh;
  color:var(--muted);
  display:block;
  margin-top:0.8vh;
}
.hero-buysell{
  display:flex;
  flex-direction:column;
  gap:0.6vh;
  align-items:center;
}
.hero-buy, .hero-sell{
  font-family:var(--font-display);
  font-weight:800;
  font-size:4.2vh;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.hero-buy{ color:var(--up); }
.hero-sell{ color:var(--down); }
.hero-buy b, .hero-sell b{ font-weight:800; }

.cards-grid{
  width:100%;
  max-width:720px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1vh 2vw;
  flex:0 0 auto;
  overflow:hidden;
  align-content:start;
}
.brand-banner{
  flex:1 1 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:0;
  gap:0.6vh;
}
.banner-img-wrap{
  position:relative;
  flex:1 1 auto;
  width:100%;
  min-height:0;
}
.banner-img-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.banner-img-wrap img.active{ opacity:0.95; }

/* جلوه‌های مختلف تعویض اسلاید */
[data-transition="slide"] .banner-img-wrap img{ transform:translateX(40px); }
[data-transition="slide"] .banner-img-wrap img.active{ transform:translateX(0); }
[data-transition="zoom"] .banner-img-wrap img{ transform:scale(0.85); }
[data-transition="zoom"] .banner-img-wrap img.active{ transform:scale(1); }
.banner-caption{
  flex:0 0 auto;
  text-align:center;
  max-width:90%;
}
.banner-caption-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.7vh;
  color:var(--gold-bright);
}
.banner-caption-subtitle{
  font-size:1.3vh;
  color:var(--muted);
  margin-top:0.2vh;
}
.price-card{
  background:var(--bg-panel);
  border:1px solid var(--border-tint-soft);
  border-radius:6px;
  padding:1.4vh 2vw;
  display:flex;
  flex-direction:column;
  gap:0.5vh;
  overflow:hidden;
}
.price-card .p-name{
  font-size:1.4vh;
  color:var(--muted);
}
.price-card .p-value{
  font-size:2.4vh;
  font-weight:700;
  color:var(--gold-bright);
}
.price-card .p-change{
  font-size:1.1vh;
}
.p-change.up{ color:var(--up); }
.p-change.down{ color:var(--down); }
.p-buysell{
  display:flex; flex-direction:column; gap:0.3vh;
  font-size:1.6vh;
}
.p-buysell .buy, .p-buysell .sell{ display:flex; justify-content:space-between; }
.p-buysell .buy{ color:var(--up); }
.p-buysell .sell{ color:var(--down); }
.p-buysell b{ font-weight:700; }

.status-line{
  flex:0 0 auto;
  font-size:2vh;
  color:var(--muted);
  padding-bottom:0.6vh;
}
.credit-line{
  flex:0 0 auto;
  font-size:1vh;
  color:var(--muted);
  opacity:0.7;
  text-align:center;
  padding:0.4vh 0;
  letter-spacing:0.3px;
}

/* ---------- FOOTER TICKER ---------- */
.board-footer{
  flex:0 0 auto;
  height:5.5vh;
  background:var(--burgundy);
  border-top:1px solid var(--border-tint);
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
  width:100%;
}
.ticker-track{
  width:100%;
  position:relative;
  height:100%;
  overflow:hidden;
}
.ticker-text{
  position:absolute;
  top:50%;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:1.8vh;
  color:var(--gold-bright);
  transform:translate(-100%, -50%);
  animation:ticker-ltr 30s linear infinite;
}
/* حرکت متن از چپ به راست */
@keyframes ticker-ltr{
  0%{ transform:translate(-100%, -50%); }
  100%{ transform:translate(2400px, -50%); }
}

/* ---------- حالت تبلیغ/تخفیف تمام‌صفحه ---------- */
.promo-view{
  position:absolute;
  inset:0;
  background:var(--bg-obsidian);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2vh;
  padding:4vh 5vw;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.6s ease;
  z-index:20;
}
.promo-view.active{ opacity:1; pointer-events:auto; }

/* جلوه‌های مختلف تعویض تبلیغ تمام‌صفحه */
[data-transition="slide"] .promo-view{ transform:translateX(60px); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-transition="slide"] .promo-view.active{ transform:translateX(0); }
[data-transition="zoom"] .promo-view{ transform:scale(0.9); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-transition="zoom"] .promo-view.active{ transform:scale(1); }
.promo-view img{
  max-width:100%;
  max-height:60vh;
  object-fit:contain;
  border-radius:8px;
  border:1px solid var(--border-tint);
}
.promo-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:3.4vh;
  color:var(--gold-bright);
  text-align:center;
}
.promo-subtitle{
  font-size:2vh;
  color:var(--champagne);
  text-align:center;
}

/* واکنش‌گرایی صفحه‌ی ایستاده (پرتره) در نسبت‌های خیلی عریض */
@media (min-aspect-ratio: 1/1){
  .cards-grid{ grid-template-columns:1fr 1fr 1fr; }
  .hero-value{ font-size:9vh; }
}