/* زبان بصری مشترک پاپ‌آپ و تنظیمات: سالن سینمای تاریک، متن گرم، یک رنگ تأکیدی */
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: dark;
  /* سطوح: از تاریکی سالن به سمت پرده */
  --hall: #131211;
  --panel: #1b1a18;
  --panel-2: #22201d;
  --panel-3: #2a2724;
  --well: #0f0e0d;              /* ورودی‌ها: فرورفته و تیره‌تر */
  /* متن: چهار سطح */
  --ink: #f4f0ea;
  --ink-2: rgba(244, 240, 234, 0.72);
  --ink-3: rgba(244, 240, 234, 0.5);
  --ink-4: rgba(244, 240, 234, 0.32);
  /* خط‌ها: کم‌رنگ، فقط وقتی دنبالشان بگردی */
  --hair: rgba(255, 255, 255, 0.07);
  --hair-2: rgba(255, 255, 255, 0.11);
  --hair-3: rgba(255, 255, 255, 0.18);
  /* یک رنگ تأکیدی (پردهٔ قرمز) و دو چراغ وضعیت */
  --curtain: #0d6bff;
  --curtain-hover: #2f83ff;
  --curtain-soft: rgba(13, 107, 255, 0.16);
  --brand-lite: #06b9fc;
  --danger: #ff5c66;
  --danger-soft: rgba(255, 92, 102, 0.14);
  --lamp: #4cc38a;
  --lamp-soft: rgba(76, 195, 138, 0.14);
  --glow: #f2b544;
  --glow-soft: rgba(242, 181, 68, 0.14);
  --ring: 0 0 0 3px rgba(13, 107, 255, 0.32);
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--hall); color: var(--ink); font-family: Vazirmatn, 'Segoe UI', Tahoma, sans-serif; font-size: 14px; line-height: 1.75; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
.num, output, .tabular { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.hidden { display: none !important; }

/* دکمه‌ها */
.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: var(--r-s);
  border: 1px solid var(--hair-2); background: var(--panel-2); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: var(--panel-3); border-color: var(--hair-3); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn.primary { background: var(--curtain); border-color: transparent; color: #fff; }
.btn.primary:hover { background: var(--curtain-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--panel-2); color: var(--ink); }
.btn.danger { color: #ff8d94; }
.btn.danger:hover { background: var(--danger-soft); border-color: rgba(255, 92, 102, 0.35); }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.icon { width: 30px; min-height: 30px; padding: 0; font-size: 15px; font-weight: 500; }

/* ورودی‌ها */
.input, input[type=text], input[type=password], input:not([type]), select.input, select {
  width: 100%; min-height: 38px; background: var(--well); color: var(--ink);
  border: 1px solid var(--hair-2); border-radius: var(--r-s); padding: 7px 12px;
  font: inherit; font-size: 14px; outline: none;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
input::placeholder { color: var(--ink-4); }
input:focus, select:focus { border-color: rgba(13, 107, 255, 0.65); box-shadow: var(--ring); }
select { appearance: none; -webkit-appearance: none; padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23a8a29b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; }

/* سوییچ (به‌جای چک‌باکس) */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .knob { position: absolute; inset: 0; border-radius: 22px; background: var(--panel-3); border: 1px solid var(--hair-2); transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.switch .knob::before { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); transition: transform 180ms var(--ease), background 160ms var(--ease); }
.switch input:checked + .knob { background: var(--curtain); border-color: transparent; }
.switch input:checked + .knob::before { transform: translateX(-18px); background: #fff; }
.switch input:focus-visible + .knob { box-shadow: var(--ring); }

/* نشانه‌ها */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--hair); white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.pill.on { color: var(--lamp); background: var(--lamp-soft); border-color: transparent; }
.pill.on .dot { background: var(--lamp); }
.pill.warn { color: var(--glow); background: var(--glow-soft); border-color: transparent; }
.pill.warn .dot { background: var(--glow); }
.pill.err { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.pill.err .dot { background: var(--danger); }
kbd { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--hair-2); box-shadow: inset 0 -1px 0 var(--hair); font: inherit; font-size: 11.5px; font-weight: 600; line-height: 20px; color: var(--ink-2); direction: ltr; text-align: center; }
::selection { background: rgba(255, 92, 102, 0.35); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }