/* تم شیشه‌ای کل اپ بیمار (index.html و تب‌های assets/html/tabs.html)
   توکن‌ها همان glass.css پنل‌هاست؛ مقدارها را با آن یکی نگه دارید. خود glass.css به index.html اضافه نمی‌شود
   چون قاعده‌های عمومی پنل‌ها (body، [hidden]، …) را دارد.
   کلاس‌های رنگی تیلویند اپ نسخه‌ی تیره و کارت شیشه‌ای را خودکار می‌گیرند (tools/build.py → theme_shim، index.html در THEMED).
   تم تیره با کلاس dark روی <html> (دکمه‌ی ماه و خورشید سربرگ). */
:root {
  color-scheme: light;
  --base: #edf5f2;
  --ink-1: #0c231f; --ink-2: #3b544f; --ink-3: #667c77;
  --line: rgba(12, 35, 31, .08); --line-2: rgba(12, 35, 31, .14);
  --glass: rgba(255, 255, 255, .55); --glass-edge: rgba(255, 255, 255, .78); --glass-hi: rgba(255, 255, 255, .92);
  --solid: rgba(255, 255, 255, .84); --solid-2: rgba(255, 255, 255, .55); --solid-strong: rgba(250, 253, 252, .96);
  --field: rgba(255, 255, 255, .94); --field-edge: rgba(12, 35, 31, .16);
  --brand: #059669; --brand-ink: #065f46; --brand-soft: rgba(5, 150, 105, .11); --brand-glow: rgba(16, 185, 129, .45);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 50px -26px rgba(4, 52, 44, .32);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 26px -18px rgba(4, 52, 44, .35);
  --scrim: rgba(3, 26, 22, .32);
  --a1: rgba(110, 231, 183, .55); --a2: rgba(125, 211, 252, .42); --a3: rgba(196, 181, 253, .32);
}
.dark {
  color-scheme: dark;
  --base: #031210;
  --ink-1: #e5f3ef; --ink-2: #a2b9b3; --ink-3: #748b85;
  --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13);
  --glass: rgba(7, 23, 20, .52); --glass-edge: rgba(255, 255, 255, .08); --glass-hi: rgba(255, 255, 255, .1);
  --solid: rgba(9, 26, 23, .82); --solid-2: rgba(255, 255, 255, .045); --solid-strong: rgba(8, 24, 21, .96);
  --field: rgba(255, 255, 255, .05); --field-edge: rgba(255, 255, 255, .15);
  --brand: #34d399; --brand-ink: #a7f3d0; --brand-soft: rgba(52, 211, 153, .13); --brand-glow: rgba(16, 185, 129, .4);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 26px 60px -26px rgba(0, 0, 0, .75);
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 30px -18px rgba(0, 0, 0, .7);
  --scrim: rgba(0, 0, 0, .55);
}

/* ================= پس‌زمینه و پوسته ================= */
html, body { background: var(--base); }
body { color: var(--ink-1); }
/* گرادیان پشت کل اپ؛ رنگ‌ها با ساعت تهران عوض می‌شوند (index.html → setAppAurora) */
#appAurora {
  position: fixed; inset: -12%; z-index: 0; pointer-events: none; transition: background 2s ease;
  background:
    radial-gradient(38% 42% at 88% 8%, var(--a1), transparent 70%),
    radial-gradient(42% 40% at 8% 34%, var(--a2), transparent 70%),
    radial-gradient(52% 48% at 62% 100%, var(--a3), transparent 72%);
}
.dark #appAurora { opacity: .5; }
#appContainer { position: relative; z-index: 1; background: transparent; }
/* تب پروفایل گرادیان جدا نمی‌خواهد؛ همین گرادیان کل اپ پشتش است */
.up-aurora { display: none; }

.app-header, .app-bottom-nav {
  background: var(--glass); border-color: var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
}
.app-header { border-bottom: 1px solid var(--line); }
.app-bottom-nav { border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -22px rgba(4, 52, 44, .35); }
/* دکمه‌های گرد سربرگ (۴۴ پیکسل) */
.app-icon-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: var(--solid-2); border: 1px solid var(--line);
  transition: background-color .15s, transform .15s;
}
.app-icon-btn:hover { background: var(--brand-soft); color: var(--ink-1); }
.app-icon-btn:active { transform: scale(.94); }
.dark #themeToggleBtn { color: #fcd34d; }
/* لوگو پس‌زمینه‌ی سفید دارد؛ در قاب سفید گرد تا در تم تیره هم مرتب باشد */
.app-logo { display: inline-flex; align-items: center; background: #fff; border-radius: .9rem; padding: .2rem .55rem; box-shadow: var(--shadow-sm); transition: transform .15s; }
.app-logo:active { transform: scale(.96); }

/* نوار پایین: برچسب ثابت، رنگ فعال برند */
.app-bottom-nav .nav-btn { min-height: 3.25rem; color: var(--ink-2); border-radius: 1rem; }
.app-bottom-nav .nav-btn .nav-label { font-size: .75rem; font-weight: 700; }
.app-bottom-nav .nav-btn[aria-current='page'] { color: var(--brand-ink); }
.app-bottom-nav .nav-btn[aria-current='page'] .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
#navLimelight { background: var(--brand); }

/* اعلان کوتاه بالای همه‌ی پنجره‌ها */
#toastNotification { z-index: 10050; }
#toastNotification > div { background: rgba(8, 24, 21, .92); }

/* فیلدهای جستجوی داخل قاب‌های گرد تب‌ها (bg-transparent) کادر پیش‌فرض افزونه‌ی فرم تیلویند را نگیرند */
input.bg-transparent:not([class*='border']), input.bg-transparent:not([class*='border']):focus { border: 0; box-shadow: none; }

/* ================= خوانایی ================= */
/* کوچک‌ترین متن‌ها (۷.۵ تا ۱۰.۵ پیکسل در تب‌های قدیمی و کارت‌ها) بزرگ‌تر می‌شوند؛ فقط اندازه عوض می‌شود */
.text-\[7px\], .text-\[7\.5px\], .text-\[8px\], .text-\[8\.5px\], .text-\[9px\], .text-\[9\.5px\] { font-size: 11px; }
.text-\[10px\], .text-\[10\.5px\] { font-size: 12px; }
/* فیلدها روی گوشی دست‌کم ۱۶ پیکسل تا iOS هنگام تایپ زوم نکند (زوم با دو انگشت آزاد است) */
@media (hover: none) and (pointer: coarse) {
  input:not([type='radio']):not([type='checkbox']):not([type='range']), select, textarea { font-size: 16px !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-header, .app-bottom-nav { background: var(--solid-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  #appAurora { display: none; }
  .app-header, .app-bottom-nav { background: var(--solid-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-content.active { animation: none; }
  #appAurora { transition: none; }
}
@media print { #appAurora { display: none; } }