/* ═══════════════════════════════════════════════════════════════
   app_native.css — اسکین اختصاصی اپ اندروید TenK Pulse
   فقط داخل WebView فعال می‌شود (html.is-app که index.html ست می‌کند).
   سایت وب کاملاً دست‌نخورده می‌ماند.
   الهام: Binance (bottom nav، کارت‌های شناور) و TradingView.

   ⚠️ نکته مهم: این فایل هیچ متغیر رنگی (--bg، --accent، ...) را
   override نمی‌کند تا «تم‌سوییچ» سایت داخل اپ هم درست کار کند.
   همه‌ی رنگ‌ها از تم فعلی (data-theme) ارث می‌رسند و عناصر این
   فایل با var() و color-mix() تم‌محور نوشته شده‌اند.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. پایه ───────────────────────────────────────────────── */
html.is-app {
  --radius:14px;
  --radius-lg:18px;
}

html.is-app body {
  font-size:15px;
  -webkit-tap-highlight-color:transparent;
}

/* ── 2. حذف عناصر وب‌سایتی — اپ نباید «سایت» به نظر برسد ── */
html.is-app .tk-hero,
html.is-app .tk-cat-grid,
html.is-app .tk-tools,
html.is-app .tk-dark-section,
html.is-app .tk-cta,
html.is-app .tk-footer { display:none !important; }

html.is-app .sidebar { display:none !important; }
html.is-app #menuBtn { display:none !important; }

html.is-app .app-download-banner,
html.is-app .pwa-install-prompt { display:none !important; }

/* ── 3. تاپ‌بار فشرده و چسبان (تم‌محور) ────────────────────── */
html.is-app .topbar {
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding-top:calc(env(safe-area-inset-top, 0px) + 6px);
  padding-bottom:8px;
}
html.is-app .topbar h2 { font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }

/* ── 4. Bottom Nav — امضای اصلی اپ ─────────────────────────── */
html.is-app .tk-bottom-nav {
  display:block !important;
  background:color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 18px rgba(0,0,0,.12);
}
html.is-app .tk-bn-item {
  padding:8px 10px; gap:3px; flex:1; max-width:96px;
  color:var(--muted); border-radius:12px;
}
html.is-app .tk-bn-item .tk-bn-ic {
  font-size:1.35rem; line-height:1;
  transition:transform .18s var(--ease);
}
html.is-app .tk-bn-item.active .tk-bn-ic { transform:translateY(-1px) scale(1.08); }
html.is-app .tk-bn-item .tk-bn-label { font-size:.66rem; }
html.is-app .tk-bn-item.active { color:var(--accent); }
html.is-app .tk-bn-item.active::before {
  width:26px; top:-6px; height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
html.is-app .tk-bn-badge {
  border:2px solid var(--surface);   /* جدا شدن بج از آیکون در هر تم */
}
/* فضای ناوبری پایین برای محتوایی که زیرش نمی‌رود */
html.is-app .main,
html.is-app .content { padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important; }

/* ── 5. کارت‌ها و فرم‌ها ────────────────────────────────────── */
html.is-app .card {
  border-radius:var(--radius);
  overflow:hidden;
}
html.is-app .btn { min-height:44px; border-radius:11px; font-weight:600; }
html.is-app input, html.is-app select, html.is-app textarea {
  min-height:44px; border-radius:11px;
}
html.is-app input:focus, html.is-app textarea:focus, html.is-app select:focus {
  border-color:var(--accent2);
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent2) 16%, transparent);
}

html.is-app table { font-size:.85rem; }
html.is-app th {
  font-size:.72rem;
  letter-spacing:.04em; color:var(--muted);
}
html.is-app td, html.is-app th { padding:10px 8px; }

html.is-app .num, html.is-app .mono,
html.is-app td[class*="num"] { font-family:var(--font-data); font-variant-numeric:tabular-nums; }

/* ── 6. استوری ردیف + سرچ نماد ─────────────────────────────── */
html.is-app .tk-story-row {
  padding-top:calc(env(safe-area-inset-top,0px) + 8px);
}
html.is-app .tk-story-item[data-route] .tk-story-ring {
  border-color:color-mix(in srgb,var(--accent) 55%, transparent);
}
html.is-app .tk-story-label { color:var(--muted); }

html.is-app .tk-search-row {
  position:sticky; top:calc(env(safe-area-inset-top,0px) + 52px); z-index:29;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(14px); padding:8px 12px;
}
html.is-app .tk-search-input { border-radius:12px; min-height:42px; }
html.is-app .tk-search-btn { border-radius:12px; }

/* ── 7. لاگین ──────────────────────────────────────────────── */
html.is-app .login-card { border-radius:20px; }
html.is-app .brand h1 {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── 8. جزئیات لمسی ────────────────────────────────────────── */
html.is-app .content { padding-inline:12px; }
html.is-app .grid { gap:10px; }

html.is-app ::-webkit-scrollbar { width:0; height:0; }

html.is-app body { user-select:none; }
html.is-app input, html.is-app textarea { user-select:text; }

/* انیمیشن ورود ویوها (کلاس را app_native.js می‌زند) */
html.is-app .view-enter { animation:tkAppFade .22s var(--ease) both; }
@keyframes tkAppFade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* احترام به prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  html.is-app .view-enter { animation:none; }
}