/* ==========================================================================
   KAHOD — Design System
   یک زبان طراحی شیشه‌ای (Glassmorphism) با پس‌زمینه‌ی تیره‌ی نیلی و
   لهجه‌های طلایی/بنفش برای حس حرفه‌ای و پریمیوم.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root{
  /* رنگ‌های تم با js/daily-theme.js هر ۲۴ ساعت عوض می‌شوند */
  --h:155; --h2:217; --h3:187;
  /* --- رنگ پایه --- */
  --bg:            hsl(var(--h) 45% 4.5%);
  --bg-soft:       hsl(var(--h) 41% 7.5%);
  --bg-elevated:   hsl(var(--h) 40% 11%);

  --gold:          hsl(var(--h) 70% 56%);
  --gold-soft:     hsl(var(--h) 67% 78%);
  --violet:        hsl(var(--h2) 100% 59%);
  --teal:          hsl(var(--h3) 85% 53%);

  --text:          hsl(var(--h) 30% 96%);
  --text-dim:      hsl(var(--h) 30% 96% / .68);
  --text-faint:    hsl(var(--h) 30% 96% / .42);

  /* --- شیشه --- */
  --glass:             rgba(255,255,255,.055);
  --glass-strong:      rgba(255,255,255,.09);
  --glass-border:      rgba(255,255,255,.12);
  --glass-border-strong: rgba(255,255,255,.22);
  --blur: 22px;

  /* --- هندسه --- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  /* --- فاصله‌گذاری --- */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  --shadow-glass: 0 8px 30px rgba(0,0,0,.35);
  --shadow-glow-gold: 0 0 0 1px hsl(var(--h) 70% 56% / .35), 0 8px 24px hsl(var(--h) 70% 56% / .18);

  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: 96px;
}
body,h1,h2,h3,h4,p,ul,figure{ margin:0; }
img,svg{ display:block; max-width:100%; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

body{
  background:
    radial-gradient(60vw 60vh at 18% -10%, var(--glow-1), transparent 60%),
    radial-gradient(50vw 50vh at 100% 10%, var(--glow-2), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.skip-link{
  position:absolute; inset-inline-start:-999px; top:auto;
}
.skip-link:focus{
  inset-inline-start: var(--space-2); top: var(--space-2);
  z-index:999; background:var(--bg-elevated); padding:.6em 1.2em;
  border-radius: var(--radius-sm); border:1px solid var(--glass-border-strong);
}

:focus-visible{
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-weight:700; letter-spacing:-.01em; }
.eyebrow{ font-weight:600; color:var(--gold-ink); font-size:.95rem; }

.h-display{
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height:1.15;
  font-weight:800;
}
.h-section{
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight:700;
  line-height:1.25;
}
.h-card{ font-size:1.25rem; font-weight:700; }

.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-dim);
  max-width: 46ch;
}
.text-dim{ color:var(--text-dim); }
.text-faint{ color:var(--text-faint); }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.section{ padding-block: var(--space-7); position:relative; }
.section-tight{ padding-block: var(--space-6); }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-1{ gap:var(--space-1); } .gap-2{ gap:var(--space-2); }
.gap-3{ gap:var(--space-3); } .gap-4{ gap:var(--space-4); }

/* ---------- Glass primitives ---------- */
.glass{
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.glass-strong{
  background: var(--glass-strong);
  border-color: var(--glass-border-strong);
}
.glass-panel{
  border-radius: var(--radius-lg);
}
.glass-card{
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
@media (hover:hover){
  .glass-card:hover{ transform: translateY(-4px); border-color: var(--glass-border-strong); }
}

/* decorative gradient orbs behind glass, purely atmospheric */
.orb{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  opacity: var(--orb-opacity);
  pointer-events:none;
  z-index:0;
}
.orb-violet{ background: var(--violet); }
.orb-teal{ background: var(--teal); }
.orb-gold{ background: var(--gold); opacity: calc(var(--orb-opacity) * .65); }

@media (prefers-reduced-motion: no-preference){
  .orb{ animation: drift 22s ease-in-out infinite; }
  .orb-b{ animation-duration: 28s; animation-direction: reverse; }
}
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(2%, 3%) scale(1.06); }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding: .95em 1.7em;
  border-radius: 999px;
  font-weight:600;
  font-size: .98rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 70%);
  color:#04140d;
  box-shadow: var(--shadow-glow-gold);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px hsl(var(--h) 70% 56% / .5), 0 12px 28px hsl(var(--h) 70% 56% / .28); }
.btn-ghost{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur));
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--glass-border-strong); transform: translateY(-2px); }
.btn-block{ width:100%; }

/* ---------- Navbar ---------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding-block: .9rem;
}
.nav-inner{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: .7rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  border-radius: 999px;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:800; font-size:1.15rem; letter-spacing:.02em;
}
.brand-mark{ width:30px; height:30px; flex-shrink:0; }

.nav-links{
  display:flex; align-items:center; gap: var(--space-4);
  font-weight:500; color: var(--text-dim);
}
.nav-links a{ transition: color .25s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--text); }

.nav-actions{ display:flex; align-items:center; gap: var(--space-2); }
.nav-toggle{
  display:none;
  width:42px; height:42px; border-radius:50%;
  align-items:center; justify-content:center;
}

.mobile-panel{
  position:fixed; inset-inline:1rem; top: 5.2rem; z-index:99;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display:flex; flex-direction:column; gap: var(--space-2);
  transform: translateY(-12px);
  opacity:0; visibility:hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobile-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-panel a{ padding:.6rem .2rem; font-weight:600; color:var(--text-dim); }
.mobile-panel a:hover{ color:var(--text); }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-block: clamp(7.5rem, 16vh, 10rem) var(--space-7);
  overflow:hidden;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; gap: var(--space-5);
  justify-content:center;
  text-align:center;
}
.hero-actions{ display:flex; gap: var(--space-2); justify-content:center; flex-wrap:wrap; }

.hero-visual{
  position:relative; z-index:1;
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.hero-visual-row{
  grid-column: span 3;
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-dim); font-size:.92rem;
}
.metric{
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-align: start;
}
.metric b{ display:block; font-size:1.7rem; font-weight:800; color:var(--text); }
.metric span{ color: var(--text-faint); font-size:.88rem; }

@media (max-width: 720px){
  .hero-visual{ grid-template-columns:1fr; }
  .hero-visual-row{ grid-column:span 1; }
}

/* ---------- Trust strip ---------- */
.trust-strip{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: var(--space-2);
}
.badge{
  display:flex; align-items:center; gap:.5em;
  padding: .6em 1.1em;
  border-radius:999px;
  font-size:.9rem; font-weight:600; color: var(--text-dim);
}
.badge svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- Bento feature grid ---------- */
.bento{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: var(--space-3);
}
.bento-item-lg{ grid-column: span 2; grid-row: span 2; }
.bento-item{ grid-column: span 1; }
.feature-icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  margin-bottom: var(--space-2);
}
.feature-icon svg{ width:22px; height:22px; color: var(--gold-ink); }
.glass-card p{ margin-top:.5rem; }

@media (max-width: 900px){
  .bento{ grid-template-columns: 1fr; }
  .bento-item-lg{ grid-column: span 1; grid-row:auto; }
}

/* ---------- Section heads ---------- */
.section-head{
  max-width: 640px;
  margin-inline:auto;
  text-align:center;
  margin-bottom: var(--space-5);
}
.section-head .lede{ margin-inline:auto; }

/* ---------- Split layout (image/text rows) ---------- */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items:center;
}
.split.reverse .split-visual{ order:-1; }
@media (max-width: 860px){
  .split{ grid-template-columns:1fr; }
  .split .split-visual{ order:-1; }
}
.split-visual{
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  min-height:280px;
  display:flex; align-items:center; justify-content:center;
}
.split ul{ display:flex; flex-direction:column; gap: var(--space-2); margin-top: var(--space-3); }
.split li{ display:flex; gap:.7em; align-items:flex-start; color: var(--text-dim); }
.split li svg{ width:20px; height:20px; flex-shrink:0; margin-top:.2em; color: var(--teal-ink); }

/* ---------- CTA banner ---------- */
.cta-banner{
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-4);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner .h-section{ margin-bottom: var(--space-2); }
.cta-actions{ display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap; margin-top: var(--space-3); }

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid var(--glass-border);
  padding-block: var(--space-5);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
}
.footer h4{ font-size:.95rem; margin-bottom: var(--space-2); color: var(--text); }
.footer li{ margin-bottom:.55rem; }
.footer a{ color: var(--text-dim); transition:color .25s var(--ease); }
.footer a:hover{ color: var(--text); }
.footer-bottom{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--glass-border);
  display:flex; justify-content:space-between; align-items:center;
  color: var(--text-faint); font-size:.88rem; flex-wrap:wrap; gap:var(--space-2);
}
.social-links{ display:flex; gap: var(--space-2); }
.social-links a{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color: var(--text-dim);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.social-links a:hover{ color: var(--text); border-color: var(--glass-border-strong); }
.social-links svg{ width:16px; height:16px; }

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items:stretch;
}
.price-card{ display:flex; flex-direction:column; position:relative; }
.price-card.is-featured{
  transform: translateY(-10px);
}
.price-tag{
  position:absolute; top:-14px; inset-inline-end: var(--space-3);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#04140d; font-size:.78rem; font-weight:700;
  padding:.35em .9em; border-radius:999px;
}
.price-amount{ font-size:2.6rem; font-weight:800; margin-block: var(--space-2) .2rem; }
.price-amount span{ font-size:1rem; font-weight:500; color: var(--text-faint); }
.price-card ul{ display:flex; flex-direction:column; gap:.7rem; margin-block: var(--space-3); flex-grow:1; }
.price-card li{ display:flex; gap:.6em; align-items:flex-start; color: var(--text-dim); font-size:.95rem; }
.price-card li svg{ width:18px; height:18px; flex-shrink:0; margin-top:.15em; color: var(--teal-ink); }

@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .price-card.is-featured{ transform:none; }
}

.compare{
  width:100%; border-collapse:collapse;
  overflow-x:auto; display:block;
}
.compare table{ width:100%; min-width:640px; border-collapse:collapse; }
.compare th, .compare td{
  padding: .9rem 1rem; text-align:start;
  border-bottom:1px solid var(--glass-border);
  font-size:.94rem;
}
.compare th{ color: var(--text-faint); font-weight:600; }
.compare td:not(:first-child), .compare th:not(:first-child){ text-align:center; }

/* ---------- Price configurator ---------- */
.configurator{
  display:grid;
  grid-template-columns: 1.3fr .95fr;
  gap: var(--space-4);
  align-items:start;
}
@media (max-width: 960px){
  .configurator{ grid-template-columns: 1fr; }
}
.config-panel{ padding: var(--space-4); }
.config-group{ margin-bottom: var(--space-4); }
.config-group:last-child{ margin-bottom:0; }
.config-group-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap: var(--space-2); margin-bottom:.6rem;
}
.config-group-head h3{ font-size:1rem; font-weight:700; }
.config-group-head .config-value{
  font-weight:800; color: var(--gold-ink); font-size:.98rem; white-space:nowrap;
}
.config-hint{ color: var(--text-faint); font-size:.86rem; margin-bottom:.8rem; }

.range-row{ display:flex; align-items:center; gap: var(--space-2); }
.range-row input[type="range"]{
  flex:1;
  -webkit-appearance:none; appearance:none;
  height:6px; border-radius:999px;
  background: var(--glass-strong);
  outline:none;
}
.range-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px hsl(var(--h) 70% 56% / .5);
  cursor:pointer;
}
.range-row input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border: 2px solid var(--bg);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 0 1px hsl(var(--h) 70% 56% / .5);
  cursor:pointer;
}

.option-pills{ display:flex; flex-wrap:wrap; gap:.6rem; }
.option-pill{
  cursor:pointer;
  padding:.65em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-size:.88rem; font-weight:600; color: var(--text-dim);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.option-pill input{ position:absolute; inset-inline-start:-999px; }
.option-pill:has(input:checked){
  border-color: var(--gold-ink);
  background: hsl(var(--h) 70% 56% / .12);
  color: var(--text);
}
.option-pill .pill-sub{ display:block; font-weight:500; color: var(--text-faint); font-size:.78rem; margin-top:.1rem; }

.config-summary{
  position:sticky; top: 110px;
  padding: var(--space-4);
  text-align:start;
}
.config-summary .eyebrow{ display:block; margin-bottom:.4rem; }
.config-total{
  font-size:2.5rem; font-weight:800; line-height:1.2; margin-block:.3rem .1rem;
}
.config-total small{ display:block; font-size:.95rem; font-weight:500; color: var(--text-faint); margin-top:.2rem; }
.config-breakdown{ display:flex; flex-direction:column; gap:.55rem; margin-block: var(--space-3); }
.config-breakdown-row{
  display:flex; justify-content:space-between; gap: var(--space-2);
  font-size:.9rem; color: var(--text-dim);
  padding-bottom:.55rem; border-bottom:1px solid var(--glass-border);
}
.config-breakdown-row span:last-child{ color: var(--text); font-weight:600; white-space:nowrap; }
.config-breakdown-row.is-fee span:last-child{ color: var(--gold-ink); }
.config-note{ color: var(--text-faint); font-size:.82rem; margin-top: var(--space-2); }

/* ---------- FAQ ---------- */
.faq-item{
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.faq-item summary{
  cursor:pointer; font-weight:700; display:flex; justify-content:space-between; gap:1rem;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-size:1.4rem; font-weight:400; color: var(--gold-ink); flex-shrink:0;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top: var(--space-2); color: var(--text-dim); }

/* ---------- About page ---------- */
.value-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3);
}
@media (max-width: 860px){ .value-grid{ grid-template-columns:1fr; } }

.timeline{ display:flex; flex-direction:column; gap: var(--space-4); }
.timeline-row{ display:grid; grid-template-columns: 120px 1fr; gap: var(--space-3); align-items:baseline; }
.timeline-row b{ color: var(--gold-ink); font-weight:800; }
@media (max-width: 640px){ .timeline-row{ grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5);
  align-items:start;
}
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom: var(--space-3); }
.field label{ display:block; margin-bottom:.5rem; font-weight:600; font-size:.92rem; }
.field input, .field textarea{
  width:100%; padding: .85em 1.1em;
  background: var(--field-bg);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color:var(--text);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }
.field input:focus, .field textarea:focus{
  border-color: var(--gold-ink);
  background: var(--field-bg-focus);
  outline:none;
}
.field textarea{ resize:vertical; min-height:130px; }

.contact-info-item{ display:flex; gap: var(--space-2); align-items:flex-start; margin-bottom: var(--space-3); }
.contact-info-item .feature-icon{ margin-bottom:0; flex-shrink:0; }
.contact-info-item h4{ margin-bottom:.2rem; }

.form-note{
  display:none; margin-top: var(--space-2);
  padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  background: hsl(var(--h3) 85% 53% / .1); border:1px solid hsl(var(--h3) 85% 53% / .35);
  color: var(--teal-ink); font-size:.92rem;
}
.form-note.is-visible{ display:block; }

/* ---------- utilities ---------- */
.mt-6{ margin-top: var(--space-6); }
.mb-0{ margin-bottom:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}


/* ==========================================================================
   Theme — حالت روز / شب (فقط متغیرهایی که بین دو حالت فرق می‌کنند)
   ========================================================================== */
:root{
  color-scheme: dark;
  --gold-ink: var(--gold-soft);   /* طلایی برای متن و آیکن (روی روشن تیره‌تر می‌شود) */
  --teal-ink: var(--teal);
  --ok: #34D399;
  --glow-1: hsl(var(--h2) 100% 59% / .16);
  --glow-2: hsl(var(--h3) 85% 53% / .10);
  --orb-opacity: .55;
  --field-bg: rgba(255,255,255,.04);
  --field-bg-focus: rgba(255,255,255,.06);
  --panel-card: rgba(255,255,255,.04);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg: hsl(var(--h) 31% 96%);
  --bg-soft: hsl(var(--h) 24% 92%);
  --bg-elevated: #FFFFFF;
  --text: hsl(var(--h) 50% 11%);
  --text-dim: hsl(var(--h) 50% 11% / .70);
  --text-faint: hsl(var(--h) 50% 11% / .50);
  --glass: rgba(255,255,255,.62);
  --glass-strong: rgba(255,255,255,.90);
  --glass-border: hsl(var(--h) 60% 17% / .11);
  --glass-border-strong: hsl(var(--h) 60% 17% / .22);
  --shadow-glass: 0 8px 30px hsl(var(--h) 60% 17% / .10);
  --shadow-glow-gold: 0 0 0 1px hsl(var(--h) 78% 26% / .35), 0 8px 24px hsl(var(--h) 78% 26% / .18);
  --gold-ink: hsl(var(--h) 78% 26%);
  --teal-ink: hsl(var(--h3) 82% 31%);
  --ok: #059669;
  --glow-1: hsl(var(--h2) 100% 59% / .14);
  --glow-2: hsl(var(--h3) 85% 53% / .16);
  --orb-opacity: .28;
  --field-bg: rgba(255,255,255,.75);
  --field-bg-focus: #FFFFFF;
  --panel-card: rgba(255,255,255,.78);
}

.theme-toggle{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle:hover{ color: var(--text); border-color: var(--glass-border-strong); }
.theme-toggle svg{ width:19px; height:19px; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:none; }
:root:not([data-theme="light"]) .theme-toggle .i-moon{ display:none; }
@media (max-width: 480px){ .nav-actions .btn{ display:none; } }

/* ==========================================================================
   Live dashboard preview (hero)
   ========================================================================== */
.hero-grid{ grid-template-columns: minmax(0,1fr); }
.lp{
  position:relative; z-index:1;
  width:100%; max-width:1000px; margin-inline:auto; margin-top: var(--space-6);
  border-radius: var(--radius-lg); overflow:hidden; text-align:start;
  box-shadow: var(--shadow-glass), 0 40px 80px -30px hsl(var(--h2) 100% 59% / .35);
}
.lp em, .lp small{ direction:ltr; unicode-bidi:isolate; font-style:normal; }

.lp-bar{
  display:flex; align-items:center; gap: var(--space-2);
  padding:.7rem 1rem; background: var(--glass);
  border-bottom:1px solid var(--glass-border);
}
.lp-dots{ display:flex; gap:6px; }
.lp-dots i{ width:10px; height:10px; border-radius:50%; background: var(--glass-border-strong); }
.lp-url{
  flex:1; min-width:0; text-align:center; direction:ltr;
  font-size:.8rem; color: var(--text-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lp-url em{ color: var(--text-dim); }
.lp-live{ display:inline-flex; align-items:center; gap:.45em; font-size:.78rem; font-weight:600; color: var(--ok); }
.lp-live b{ width:8px; height:8px; border-radius:50%; background: var(--ok); }
@media (prefers-reduced-motion: no-preference){
  .lp-live b{ animation: lpPulse 1.8s ease-out infinite; }
}
@keyframes lpPulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); }
  100%{ box-shadow:0 0 0 8px rgba(52,211,153,0); }
}

.lp-body{ display:grid; grid-template-columns: 56px minmax(0,1fr); }
.lp-side{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1rem 0; border-inline-end:1px solid var(--glass-border);
}
.lp-side svg{ width:36px; height:36px; padding:8px; border-radius:10px; color: var(--text-faint); }
.lp-side svg:first-child{ color: var(--gold-ink); background: var(--glass-strong); }

.lp-main{ padding: var(--space-3); display:grid; gap: var(--space-2); min-width:0; }
.lp-head{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-2); flex-wrap:wrap; }
.lp-head h3{ font-size:1.05rem; }
.lp-head p{ font-size:.8rem; color: var(--text-faint); }
.lp-chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:600; color: var(--text-dim);
  padding:.3em .85em; border-radius:999px; border:1px solid var(--glass-border);
}
.lp-chip i{ width:7px; height:7px; border-radius:50%; background: var(--ok); }

.lp-card{
  background: var(--panel-card); border:1px solid var(--glass-border);
  border-radius:14px; padding:.85rem 1rem; min-width:0;
}
.lp-label{ font-size:.78rem; font-weight:500; color: var(--text-faint); }
.lp-card-head{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.5rem; flex-wrap:wrap; }

.lp-kpis{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2); }
.lp-kpi b{ display:flex; align-items:baseline; gap:.35em; font-size:1.55rem; font-weight:800; line-height:1.35; font-variant-numeric: tabular-nums; }
.lp-kpi small{ font-size:.75rem; font-weight:500; color: var(--text-faint); }
.lp-spark{ width:100%; height:28px; margin-top:.3rem; }
.lp-spark path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.k-lat .lp-spark{ color: var(--teal-ink); }
.k-rps .lp-spark{ color: var(--violet); }
.k-up  .lp-spark{ color: var(--ok); }
.k-err .lp-spark{ color: var(--gold-ink); }

.lp-row{ display:grid; grid-template-columns: 1.9fr 1fr; gap: var(--space-2); }
.lp-legend{ display:flex; align-items:center; gap:.4rem; font-size:.72rem; color: var(--text-faint); }
.lp-legend i{ width:8px; height:8px; border-radius:2px; margin-inline-start:.4rem; }
.lp-legend i:first-child{ margin-inline-start:0; background: var(--violet); }
.lp-legend i:nth-of-type(2){ background: var(--teal-ink); }
.lp-plot{ width:100%; height:150px; display:block; }
.lp-grid path{ fill:none; stroke: var(--glass-border); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.lp-line, .lp-line2{ fill:none; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.lp-line{ stroke: var(--violet); stroke-width:2; }
.lp-line2{ stroke: var(--teal-ink); stroke-width:1.5; opacity:.9; }
.lp-axis{ display:flex; justify-content:space-between; direction:ltr; margin-top:.3rem; font-size:.7rem; color: var(--text-faint); }

.lp-svc ul{ margin-top:.3rem; }
.lp-svc li{
  display:flex; align-items:center; gap:.6rem; padding:.5rem 0;
  font-size:.85rem; color: var(--text-dim); border-bottom:1px solid var(--glass-border);
}
.lp-svc li:last-child{ border-bottom:0; }
.lp-svc i{ width:8px; height:8px; border-radius:50%; background: var(--ok); flex-shrink:0; }
.lp-svc i.scale{ background: var(--violet); }
.lp-svc li > em{ margin-inline-start:auto; font-size:.76rem; color: var(--text-faint); white-space:nowrap; }

.lp-feed ul{ height:9rem; overflow:hidden; }
.ev{
  display:grid; grid-template-columns: auto auto minmax(0,1fr); align-items:center; gap:.7rem;
  padding:.42rem 0; font-size:.83rem; color: var(--text-dim); border-bottom:1px solid var(--glass-border);
}
.ev time{ font-size:.75rem; color: var(--text-faint); direction:ltr; font-variant-numeric: tabular-nums; }
.ev i{ width:7px; height:7px; border-radius:50%; background: var(--ok); }
.ev-info i{ background: var(--teal-ink); }
.ev-scale i{ background: var(--violet); }
.ev-warn i{ background: var(--gold); }
.ev span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (prefers-reduced-motion: no-preference){
  .ev.is-new{ animation: evIn .7s var(--ease); }
}
@keyframes evIn{
  from{ opacity:0; transform: translateY(-10px); background: hsl(var(--h2) 100% 59% / .16); }
  to{ opacity:1; transform:none; background: transparent; }
}

@media (max-width: 860px){
  .lp-kpis{ grid-template-columns: repeat(2,1fr); }
  .lp-row{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .lp-body{ grid-template-columns: minmax(0,1fr); }
  .lp-side{ display:none; }
  .lp-main{ padding: var(--space-2); }
}


/* ---------- لوگوی KAHOD ---------- */
img.brand-mark{ width:42px; height:42px; object-fit:contain; flex-shrink:0; display:block; }
:root[data-theme="dark"] img.brand-mark{ background:hsl(var(--h) 25% 96%); border-radius:10px; padding:3px; box-sizing:border-box; }