/* ============================================================
   Amir BTC Assistant - Premium Dark Theme v3.4
   با استایل‌های جدید برای سرتیترها، نوتیفیکیشن، پاپ‌آپ جوین و تنظیمات
   ============================================================ */

/* #region پایه و متغیرهای سراسری */
/* ============================================================================ */
/* این بخش متغیرهای طراحی، ریست اولیه و رفتارهای عمومی رابط را تعریف می‌کند. */
/* ============================================================================ */
:root {
    --bg-primary: #0B0F14;
    --bg-secondary: #11161D;
    --bg-card: #151C24;
    --bg-card-hover: #1A2330;
    --border: rgba(255,255,255,0.06);
    --text: #FFFFFF;
    --text-secondary: #AEB7C2;
    --text-dim: #AEB7C2;
    --text-sub: #6B7A8D;
    --accent: #FF8A00;
    --accent-hover: #FFA726;
    --accent-glow: rgba(255,138,0,0.35);
    --green: #00c896;
    --red: #ff4d4d;
    --radius: 18px;
    --shadow: 0 8px 24px rgba(0,0,0,0.25);
    --transition: 0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg-primary); color: var(--text); padding-bottom: 90px; overflow-x: hidden; font-size: 14px; line-height: 1.5; padding-top: env(safe-area-inset-top, 0px); background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,138,0,0.03) 0%, transparent 60%); }

/* ── Admin Flash Prevention (CSS-level defense) ── */
body:not(.admin-ready) .adp-admin-btns,
body:not(.admin-ready) .analysis-fab,
body:not(.admin-ready) .acv-edit-btn,
body:not(.admin-ready) .acv-delete-btn {
    display: none !important;
}

body.user-loading .profile-loading-target.skeleton-text {
    color: transparent !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 6px;
    min-width: 80px;
    display: inline-block;
}
@keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,138,0,0.4); border-radius: 4px; }

/* #endregion */

/* ============================================================================ */
/* #region Icon Fallback Gradient Presets */
/* ============================================================================ */
.coin-icon-fallback {
    border: none !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.coin-icon-fallback[data-grad="0"] { background: linear-gradient(135deg, #f7931a, #e07c0f) !important; }
.coin-icon-fallback[data-grad="1"] { background: linear-gradient(135deg, #627eea, #4a67d6) !important; }
.coin-icon-fallback[data-grad="2"] { background: linear-gradient(135deg, #00c896, #00a87a) !important; }
.coin-icon-fallback[data-grad="3"] { background: linear-gradient(135deg, #ff4d4d, #e03c3c) !important; }
.coin-icon-fallback[data-grad="4"] { background: linear-gradient(135deg, #f5a623, #d4901e) !important; }
.coin-icon-fallback[data-grad="5"] { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; }
.coin-icon-fallback[data-grad="6"] { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }
.coin-icon-fallback[data-grad="7"] { background: linear-gradient(135deg, #ec4899, #db2777) !important; }
.coin-icon-fallback[data-grad="8"] { background: linear-gradient(135deg, #84cc16, #65a30d) !important; }
.coin-icon-fallback[data-grad="9"] { background: linear-gradient(135deg, #64748b, #475569) !important; }

/* #endregion */

/* ============================================================================ */
/* #region Price Flash Animations */
/* ============================================================================ */
@keyframes priceFlashGreen {
    0% { color: var(--green); text-shadow: 0 0 8px rgba(0,200,150,0.5); }
    100% { color: var(--text); text-shadow: none; }
}
@keyframes priceFlashRed {
    0% { color: var(--red); text-shadow: 0 0 8px rgba(255,77,77,0.5); }
    100% { color: var(--text); text-shadow: none; }
}
.coin-price.flash-up { animation: priceFlashGreen 0.7s ease-out; }
.coin-price.flash-down { animation: priceFlashRed 0.7s ease-out; }

/* #endregion */

/* ============================================================================ */
/* #region هدر */
/* این بخش استایل‌های مرتبط با "هدر" را در خود نگه می‌دارد. */
/* ============================================================================ */
/* ── Header ────────────────────────────────────────────── */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  height: 56px;
  background: rgba(11,15,20,0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-side {
  display: flex;
  align-items: center;
  min-width: 100px;
  max-width: 140px;
}
.header-left { justify-content: flex-start; }
.header-right { justify-content: flex-end; }

/* ── Brand (center) ─────────────────────────────────────── */
.header-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.brand-text {
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
}
.brand-main-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.brand-amirbtc {
  position: relative;
  z-index: 1;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(to bottom,
    #C4A24A 0%,
    #A89848 25%,
    #5A9A8A 35%,
    #2D8E7E 45%,
    #2D8E7E 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-tagline {
  position: relative;
  z-index: 1;
  font-size: 7px;
  letter-spacing: 2.5px;
  color: rgba(201,165,50,0.45);
  margin-top: 0px;
  font-family: serif;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Live indicator (left) ──────────────────────────────── */
.live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,200,150,0.06);
  border: 1px solid rgba(0,200,150,0.15);
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
}

.live-person-icon {
  color: var(--green);
  flex-shrink: 0;
  opacity: 0.7;
}
.live-count {
  font-size: 13px;
  font-weight: 700;
  color: #00c896;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.live-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1;
}

/* ── Notification button (right) ────────────────────────── */
.notif-btn { background: rgba(21,28,36,0.9); border: 1px solid rgba(255,255,255,0.08); width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; position: relative; backdrop-filter: blur(8px); }
.notif-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* #endregion */

/* ============================================================================ */
/* #region صفحات */
/* این بخش استایل‌های مرتبط با "صفحات" را در خود نگه می‌دارد. */
/* ============================================================================ */
.page { display: none; padding: 12px 0 20px; animation: fadeSlide 0.3s ease; }
.page.active { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* #endregion */

/* ============================================================================ */
/* #region بخش‌ها و سرتیترها (زیباسازی شده) */
/* این بخش استایل‌های مرتبط با "بخش‌ها و سرتیترها (زیباسازی شده)" را در خود نگه می‌دارد. */
/* ============================================================================ */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 15px;  /* فاصله بیشتر */
}
.section-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); stroke: var(--accent); }
.page-title-with-icon { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.modal-title-with-icon { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.modal-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); stroke: var(--accent); }
.modal-close-btn { background: rgba(16,23,34,0.8); border: 1px solid rgba(255,255,255,0.08); width: 32px; height: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; backdrop-filter: blur(8px); }
.section-more {
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
}
.add-watch-btn {
    background: #FF8A00;
    border: 1px solid rgba(255,138,0,0.3);
    color: #000;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(255,138,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.add-watch-btn:hover { box-shadow: 0 0 24px rgba(255,138,0,0.4); }
.add-watch-btn:active { transform: scale(0.92); }

/* #endregion */

/* ============================================================================ */
/* #region Hero Banner (legacy — superseded by Dashboard Polish section below) */
/* All hero styles now live in the DASHBOARD POLISH block at the end of file.   */
/* Kept as a marker for git history. No rules here.                            */
/* ============================================================================ */

/* #endregion */

/* ============================================================================ */
/* #region اسلایدر */
/* این بخش استایل‌های مرتبط با "اسلایدر" را در خود نگه می‌دارد. */
/* ============================================================================ */
.slider-container { margin: 0 20px 20px; border-radius: var(--radius); overflow: hidden; height: 170px; background: var(--bg-card); border: 1px solid var(--border); position: relative; }
.slider-track { width: 100%; height: 100%; position: relative; }
.slide-item { width: 100%; height: 100%; position: relative; cursor: pointer; }
.slide-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.slide-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent); }
.slide-overlay h4 { font-size: 15px; font-weight: 700; color: var(--accent); }
.slide-overlay p { font-size: 12px; color: var(--text-dim); margin: 4px 0; }
.slide-author { font-size: 11px; color: rgba(255,255,255,0.4); }
.slider-dots { position: absolute; bottom: 8px; left: 16px; display: flex; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.dot.active { background: var(--accent); width: 18px; border-radius: 4px; }
.slide-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); }

/* #endregion */

/* ============================================================================ */
/* #region واچ‌لیست */
/* این بخش استایل‌های مرتبط با "واچ‌لیست" را در خود نگه می‌دارد. */
/* ============================================================================ */
.watchlist-grid {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0 20px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.watchlist-grid::-webkit-scrollbar { display: none; }
.watch-item {
    flex: 0 0 118px;
    scroll-snap-align: start;
    border-radius: 18px;
    padding: 12px 8px;
    text-align: center;
    position: relative;
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.watch-item .watch-icon { width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; }
.watch-sym { display: block; font-weight: 700; font-size: 12px; }
.watch-price { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.watch-change { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.watch-change.up { color: var(--green); }
.watch-change.down { color: var(--red); }
.remove-watch { position: absolute; top: 4px; inset-inline-end: 6px; color: var(--text-dim); cursor: pointer; padding: 6px; margin: -6px; }
.watchlist-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px; width: 100%; }
.watchlist-empty-title { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.watchlist-empty-desc { font-size: 12px; color: var(--text-sub); }
.watchlist-empty-btn { margin-top: 4px; padding: 8px 20px; background: #FF8A00; color: #000; border: none; border-radius: 14px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 0 20px rgba(255,138,0,0.25); }

/* #endregion */

/* ============================================================================ */
/* #region اخبار مهم */
/* این بخش استایل‌های مرتبط با "اخبار مهم" را در خود نگه می‌دارد. */
/* ============================================================================ */
.important-news-list { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.important-news-item { display: flex; gap: 10px; border-radius: 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.06); border-left: 2px solid var(--accent); padding: 14px; cursor: pointer; background: var(--bg-card); box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; animation: newsFadeIn 0.4s ease both; }
.important-news-item:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.12); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.important-news-img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.important-news-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.important-news-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.important-news-source { font-size: 11px; color: var(--text-sub); }

/* #endregion */

/* ============================================================================ */
/* #region صفحه مارکت */
/* این بخش استایل‌های مرتبط با "صفحه مارکت" را در خود نگه می‌دارد. */
/* ============================================================================ */

@keyframes spin { to { transform: rotate(360deg); } }
.search-bar { padding: 0 16px 12px; position: relative; }
.search-input { width: 100%; padding: 14px 14px 14px 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(21,28,36,0.9); color: var(--text); font-size: 14px; outline: none; transition: border-color var(--transition), box-shadow var(--transition); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.search-input:focus { border-color: #FF8A00; box-shadow: 0 0 0 3px rgba(255,138,0,0.12), 0 0 24px rgba(255,138,0,0.06); }
.search-input::placeholder { color: var(--text-sub); }
.search-icon { position: absolute; left: 30px; top: 50%; transform: translateY(calc(-50% + 6px)); color: var(--text-sub); pointer-events: none; transition: color var(--transition); }
.search-input:focus ~ .search-icon { color: var(--accent); }

/* ===== Main Tabs: Crypto / Forex / Watchlist ===== */
.market-main-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 12px; }
.main-tab-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 0;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.main-tab-btn svg { flex-shrink: 0; opacity: 0.5; transition: opacity 0.25s; }
.main-tab-btn:not(.active):hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.main-tab-btn:not(.active):active { transform: scale(0.97); }
.main-tab-btn.active {
  background: linear-gradient(135deg, rgba(255,138,0,0.15), rgba(255,138,0,0.05));
  border-color: rgba(255,138,0,0.4);
  color: var(--accent);
  box-shadow: 0 2px 12px rgba(255,138,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.main-tab-btn.active svg { opacity: 1; }
.main-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* ===== Crypto Sub-Tabs: Top Market / Gainers / Losers ===== */
.market-sub-tabs {
  display: flex; gap: 4px;
  padding: 0 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  transition: opacity 0.2s, max-height 0.3s ease, padding 0.3s ease;
  max-height: 50px;
  opacity: 1;
}
.market-sub-tabs::-webkit-scrollbar { display: none; }
.market-sub-tabs.hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  overflow: hidden;
}
.sub-tab-btn {
  flex: 1;
  padding: 7px 0;
  border: none;
  background: transparent;
  color: #8C97A8;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 200ms;
  position: relative;
}
.sub-tab-btn.active {
  color: #000;
  background: #FF8A00;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255,138,0,0.2);
}
.coin-list { padding: 0 16px; position: relative; }
.coin-list-info { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px 6px; font-size: 10px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 2px; }
.coin-list-count { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.coin-list-time { font-size: 10px; opacity: 0.7; }
.coin-list-scroll-shadow { position: sticky; top: 0; z-index: 5; height: 12px; background: linear-gradient(to bottom, var(--bg-primary) 0%, rgba(5,7,10,0.8) 40%, transparent 100%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; margin: -12px -16px 0; border-radius: 0; }
.coin-list-scroll-shadow.visible { opacity: 1; }
.coin-list.fade-out { animation: coinFadeOut 0.12s ease forwards; }
.coin-list.fade-in { animation: coinFadeIn 0.18s ease forwards; }
@keyframes coinFadeOut { to { opacity: 0; transform: translateY(6px); } }
@keyframes coinFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.coin-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0%; }
.coin-identity { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.coin-rank { font-size: 10px; color: var(--text-sub); width: 20px; flex-shrink: 0; text-align: center; font-variant-numeric: tabular-nums; opacity: 0.35; font-weight: 500; }
.coin-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.coin-icon-placeholder { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, rgba(255,138,0,0.15), rgba(255,255,255,0.05)); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.coin-sym { font-weight: 800; font-size: 14.5px; white-space: nowrap; direction: ltr; display: inline-block; letter-spacing: 0.3px; }
.coin-name { font-size: 11px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100px; letter-spacing: 0.1px; }
.coin-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.coin-price-data { display: flex; flex-direction: column; align-items: flex-end; direction: ltr; }
.coin-price { font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; letter-spacing: -0.3px; transition: color 0.3s ease, text-shadow 0.3s ease; }

strong.up { color: var(--green); }
strong.down { color: var(--red); }
.watch-star { cursor: pointer; opacity: 0.3; transition: opacity 0.25s, transform 0.2s, background 0.25s, filter 0.25s; display: inline-flex; padding: 5px; margin: -5px; align-items: center; justify-content: center; color: var(--text-secondary); border-radius: 8px; background: rgba(16,23,34,0.8); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(8px); }
.watch-star:hover { opacity: 0.75; background: rgba(255,255,255,0.06); }
.watch-star.active { opacity: 1; color: var(--accent); filter: drop-shadow(0 0 3px rgba(255,138,0,0.35)); }
.watch-star:active { transform: scale(1.15); }
.star-filled { color: var(--accent); display: inline-flex; }
.star-empty { color: var(--text-sub); display: inline-flex; }

/* Forex pair styles */
.forex-icon-wrap { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; }
.forex-pair-icon { font-size: 10px; font-weight: 700; letter-spacing: -0.5px; }
.coin-item[data-forex="true"] { border-inline-start: 3px solid rgba(0,200,150,0.3); padding-inline-start: 5px; }

/* Mini Toast for watchlist toggle */
#mini-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#mini-toast.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* #endregion */

/* ============================================================================ */
/* #region صفحه تحلیل */
/* این بخش استایل‌های مرتبط با "صفحه تحلیل" را در خود نگه می‌دارد. */
/* ============================================================================ */
.analysis-header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px 14px; }
.analysis-header h2 { font-size: 18px; }
.analysis-admin-btn {
    background: #FF8A00;
    border: 1px solid rgba(255,138,0,0.3);
    color: #000;
    padding: 8px 16px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 0 16px rgba(255,138,0,0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.analysis-grid { padding: 0 20px; }
.analysis-card { display: flex; gap: 14px; border-radius: 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.06); padding: 14px; margin-bottom: 12px; cursor: pointer; background: var(--bg-card); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.analysis-cover { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.analysis-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.analysis-body h4 { font-size: 14px; }
.tf-badge { font-size: 11px; background: rgba(255,138,0,0.1); color: var(--accent); padding: 1px 8px; border-radius: 4px; }
.analysis-body p { font-size: 12px; color: var(--text-dim); margin: 4px 0; }
.analysis-meta { font-size: 11px; color: var(--text-sub); }
.delete-analysis-btn { background: rgba(255,77,77,0.12); border: 1px solid rgba(255,77,77,0.2); color: var(--red); padding: 4px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-top: 6px; align-self: flex-start; display: flex; align-items: center; gap: 4px; transition: 0.2s; }
.delete-analysis-btn:hover { background: rgba(255,77,77,0.2); }
.analysis-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.edit-analysis-btn { background: rgba(255,138,0,0.12); border: 1px solid rgba(255,138,0,0.25); color: var(--accent); padding: 4px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: 0.2s; }
.edit-analysis-btn:hover { background: rgba(255,138,0,0.2); }
.analysis-detail-box { max-width: 480px; }
.analysis-detail-img { width: 100%; border-radius: 14px; margin: 8px 0 12px; max-height: 260px; object-fit: cover; }
.analysis-detail-text { color: var(--text-dim); line-height: 1.7; font-size: 14px; white-space: pre-wrap; margin-bottom: 16px; }

/* ============================================================================
   #region Analysis Bottom Sheet
   ============================================================================ */
.bs-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5,7,10,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 9999; display: none; align-items: flex-end; justify-content: center; }
.bs-overlay.bs-open { display: flex; animation: bs-fade-in 0.2s ease forwards; }
.bs-sheet { background: linear-gradient(165deg, #151C24, #11161D); border: 1px solid rgba(255,255,255,0.08); border-bottom: none; border-radius: 24px 24px 0 0; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; padding: 0 0 env(safe-area-inset-bottom, 0); box-shadow: 0 -16px 60px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); -webkit-overflow-scrolling: touch; }
.bs-open .bs-sheet { transform: translateY(0); }
.bs-handle-bar { display: flex; justify-content: center; padding: 12px 0 6px; position: sticky; top: 0; z-index: 2; background: linear-gradient(165deg, #151C24, #151C24); }
.bs-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); }
.bs-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 14px; position: sticky; top: 22px; z-index: 1; background: linear-gradient(165deg, #151C24 80%, transparent); }
.bs-header-info { display: flex; align-items: center; gap: 8px; }
.bs-coin-badge { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.bs-tf-badge { font-size: 12px; font-weight: 600; color: var(--accent); background: rgba(255,138,0,0.12); border: 1px solid rgba(255,138,0,0.25); padding: 3px 10px; border-radius: 8px; }
.bs-image-wrap { padding: 0 20px 12px; }
.bs-image { width: 100%; border-radius: 16px; max-height: 280px; object-fit: cover; display: block; }
.bs-body { padding: 0 20px 16px; }
.bs-meta-row { display: flex; align-items: center; gap: 6px; color: var(--text-sub); font-size: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.bs-meta-row svg { flex-shrink: 0; opacity: 0.6; }
.bs-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-sub); opacity: 0.4; flex-shrink: 0; }
.bs-text { color: var(--text); line-height: 1.8; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.bs-footer { padding: 8px 20px 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.bs-share-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: rgba(255,138,0,0.1); border: 1px solid rgba(255,138,0,0.2); border-radius: 14px; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: inherit; }
.bs-share-btn:hover { background: rgba(255,138,0,0.18); }
.bs-share-btn:active { transform: scale(0.98); }
@keyframes bs-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* #endregion */

/* ============================================================================ */
/* #region صفحه اخبار */
/* این بخش استایل‌های مرتبط با "صفحه اخبار" را در خود نگه می‌دارد. */
/* ============================================================================ */

/* ========== NEWS PAGE REDESIGN ========== */

/* Category Tabs */
.news-tabs-wrapper {
    position: sticky;
    top: 56px;
    z-index: 10;
    background: var(--bg-primary);
    padding: 12px 0 8px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.news-tabs {
    display: flex;
    gap: 8px;
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.news-tabs::-webkit-scrollbar { display: none; }
.news-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.news-tab:active { transform: scale(0.96); }
.news-tab.active {
    background: linear-gradient(135deg, rgba(255,138,0,0.2), rgba(255,138,0,0.08));
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 16px rgba(255,138,0,0.15);
}
.news-badge {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    color: var(--text-dim);
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
}
.news-tab.active .news-badge {
    background: rgba(255,138,0,0.25);
    color: var(--accent);
}

/* Feed Container */
.news-feed-container {
    padding: 0 20px 100px;
}

/* Hero News Card */
.news-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    cursor: pointer;
    animation: newsFadeIn 0.5s ease both;
}
.news-hero-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.news-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 16px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
.news-hero-sentiment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.sentiment-bullish { background: rgba(0,200,150,0.2); color: var(--green); }
.sentiment-bearish { background: rgba(255,77,77,0.2); color: var(--red); }
.sentiment-macro { background: rgba(255,200,0,0.2); color: #ffc800; }
.sentiment-neutral { background: rgba(255,255,255,0.1); color: var(--text-dim); }
.sentiment-breaking { background: rgba(255,60,60,0.3); color: #ff6b6b; }
.news-hero-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}
.news-hero-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

/* News Card */
.news-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    animation: newsFadeIn 0.4s ease both;
}
.news-card:active { transform: scale(0.98); }
.news-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.1); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.news-card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.news-card-sentiment {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
    width: fit-content;
}
.news-card-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}
.news-card-summary {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.news-card-meta {
    font-size: 11px;
    color: var(--text-sub);
}
.news-card-thumb {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

/* Load More / Infinite Scroll Trigger */
.news-load-trigger {
    text-align: center;
    padding: 20px 0;
    color: var(--text-sub);
    font-size: 13px;
}

/* ========== SKELETON LOADING ========== */
.skeleton-hero {
    border-radius: 20px;
    height: 220px;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    margin-bottom: 16px;
}
.skeleton-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.skeleton-card-thumb {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.skeleton-card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-30 { width: 30%; height: 28px; border-radius: 8px; }

/* ========== CALENDAR REDESIGN ========== */
.cal-nav {
    display: flex;
    gap: 6px;
    padding: 0 20px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cal-nav::-webkit-scrollbar { display: none; }
.cal-nav-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.cal-nav-btn:active { transform: scale(0.96); }
.cal-nav-btn.active {
    background: linear-gradient(135deg, rgba(255,138,0,0.2), rgba(255,138,0,0.08));
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px rgba(255,138,0,0.12);
}

/* Country Filter */
.cal-country-filter {
    display: flex;
    gap: 6px;
    padding: 0 20px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cal-country-filter::-webkit-scrollbar { display: none; }
.cal-country-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.cal-country-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255,138,0,0.1);
}

/* Time Group */
.cal-time-group-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    padding: 12px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Calendar Event Card */
.cal-event {
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
}
.cal-event:active { transform: scale(0.98); }
.cal-event-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.cal-event-impact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
}
.impact-high { background: rgba(255,77,77,0.15); color: #ff6b6b; }
.impact-medium { background: rgba(255,200,0,0.15); color: #ffc800; }
.impact-low { background: rgba(0,200,150,0.15); color: var(--green); }
.cal-event-major {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    background: rgba(255,100,0,0.2);
    color: #ff8c42;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}
.cal-event-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.cal-event-country {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 10px;
}
.cal-event-details {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cal-event-stat {
    font-size: 12px;
    color: var(--text-dim);
}
.cal-event-stat strong { color: var(--text-sub); font-weight: 600; }
.cal-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.cal-event-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.cal-event-countdown {
    font-size: 12px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.cal-event-actual {
    font-size: 12px;
    font-weight: 600;
}
.cal-event-surprise { font-size: 11px; font-weight: 600; }
.surprise-better { color: var(--green); }
.surprise-worse { color: var(--red); }
.surprise-expected { color: var(--text-dim); }
.cal-event-reminder {
    font-size: 11px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    transition: all 0.2s ease;
}
.cal-event-reminder:active { background: rgba(255,255,255,0.05); }
.cal-event-reminder.active { color: var(--accent); border-color: var(--accent); }
.cal-event.past { opacity: 0.45; }
.cal-event.live { border-color: var(--green); box-shadow: 0 0 12px rgba(0,200,150,0.15); }
.eco-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.eco-status-past { background: rgba(255,255,255,0.06); color: var(--text-sub); }
.eco-status-live { background: rgba(0,200,150,0.15); color: var(--green); }
.eco-status-upcoming { background: rgba(255,138,0,0.12); color: var(--accent); }

/* Keep the newsFadeIn animation */
@keyframes newsFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ════════════════════════════════════════════════════════════════════
   NEWS INTELLIGENCE REBUILD — Premium Dark Fintech Design
   All new classes use .ni- prefix (News Intelligence)
   ════════════════════════════════════════════════════════════════════ */

/* ── Premium Top Bar — REDESIGNED (two rows: tabs / tools) ── */
.ni-topbar {
    position: sticky; top: 56px; z-index: 15;
    background: rgba(2, 6, 17, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(245, 166, 35, 0.08);
    padding: 10px 16px 8px;
}
/* Legacy row container — kept for backward compat (used elsewhere). */
.ni-tabs-row {
    display: flex; align-items: center; gap: 8px;
}
/* Row 1: category tabs — equal width, full coverage, NO horizontal scroll.
   Each .ni-tab gets flex:1 1 0 so the 5 tabs share the row evenly. */
.ni-tabs {
    display: flex; gap: 6px;
    width: 100%;
}
.ni-tabs::-webkit-scrollbar { display: none; }
.ni-tab {
    flex: 1 1 0;          /* equal-width distribution across the row */
    min-width: 0;          /* allow shrinking below content width if needed */
    height: 44px;
    padding: 0 6px;        /* compact horizontal padding so all 5 fit */
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(11, 18, 32, 0.6);
    color: #A5B4C7; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.ni-tab:active { transform: scale(0.96); }
.ni-tab.active {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.06));
    border-color: rgba(245, 166, 35, 0.4);
    color: #F5A623;
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.15), inset 0 1px 0 rgba(245, 166, 35, 0.1);
}
/* Row 2: tools (search + filter) — separated from tabs, 50/50 split, larger
   touch targets with icon + Persian label for clarity. */
.ni-tools-row {
    display: flex; gap: 8px;
    margin-top: 8px;
    width: 100%;
}
.ni-tool-btn {
    flex: 1 1 0;            /* equal-width: 50/50 split between search & filter */
    min-width: 0;
    height: 44px;           /* same height as the tabs above for visual rhythm */
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A5B4C7; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; font-weight: 600; font-family: inherit;
    transition: all 0.2s ease;
    position: relative;
}
.ni-tool-btn:active { transform: scale(0.96); }
.ni-tool-btn:hover { background: rgba(245, 166, 35, 0.1); color: #F5A623; border-color: rgba(245, 166, 35, 0.2); }
.ni-tool-btn svg { flex-shrink: 0; }
/* Legacy icon button — kept for the news-search close button (line ~716). */
.ni-icon-btn {
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(11, 18, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A5B4C7; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s ease;
    position: relative;
}
.ni-icon-btn:active { transform: scale(0.94); }
.ni-icon-btn:hover { background: rgba(245, 166, 35, 0.1); color: #F5A623; border-color: rgba(245, 166, 35, 0.2); }
.ni-filter-dot {
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #F5A623; box-shadow: 0 0 8px rgba(245, 166, 35, 0.6);
}

/* ── Feed Container ── */
.ni-feed-container { padding: 0 16px 100px; }
.ni-list { display: flex; flex-direction: column; gap: 12px; }

/* ── Featured News Hero Slider ── */
.ni-hero-slider {
    /* ROOT CAUSE FIX: force LTR so flex items lay out left-to-right.
       The slider math (translateX(-index * 100%)) assumes slide 0 is at
       the left edge, slide 1 to its right, etc. Under inherited RTL
       (the page is dir="rtl"), flex-direction:row reverses the main axis,
       placing slide 0 at the RIGHT and subsequent slides to the LEFT —
       so translateX(-100%) moves the track in the wrong direction and
       only slide 0 is ever visible. Setting direction:ltr on the slider
       + track restores the left-to-right layout the transform expects,
       without affecting the RTL text inside each slide (headlines stay
       right-aligned because .ni-hero-slide-content is position:absolute
       with left:0;right:0 and inherits its own text direction from body). */
    direction: ltr;
    position: relative; border-radius: 24px; overflow: hidden;
    margin-bottom: 16px; height: 240px;
    background: #0B1220; cursor: grab;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ni-hero-slider:active { cursor: grabbing; }
/* BUG #1 FIX: Single slide mode — no grab cursor, no transition */
.ni-hero-single { cursor: default; }
.ni-hero-single .ni-hero-track { transition: none; }
.ni-hero-track {
    /* direction:ltr inherited from .ni-hero-slider — slides lay out LTR. */
    display: flex; height: 100%;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.ni-hero-slide {
    flex-shrink: 0; width: 100%; height: 100%;
    position: relative; overflow: hidden;
}
.ni-hero-slide-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; background: #0B1220;
}
.ni-hero-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 17, 0.3) 0%, rgba(2, 6, 17, 0.7) 50%, rgba(2, 6, 17, 0.95) 100%);
}
.ni-hero-slide-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 16px; z-index: 2;
    /* Restore RTL for Persian headline text — the parent .ni-hero-slider
       is forced LTR for correct slide layout, but the text inside each
       slide must remain right-aligned for Persian readability. */
    direction: rtl;
}
.ni-hero-badges {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.ni-hero-headline {
    font-size: 17px; font-weight: 800; line-height: 1.35; color: #FFFFFF;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.ni-hero-summary {
    font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.75);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 10px;
}
.ni-hero-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ni-hero-source {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: rgba(255, 255, 255, 0.6); font-weight: 500;
}
.ni-hero-actions { display: flex; gap: 6px; }
.ni-hero-action-btn {
    width: 32px; height: 32px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.ni-hero-action-btn:active { transform: scale(0.92); }
.ni-hero-action-btn:hover { background: rgba(255, 255, 255, 0.2); }
.ni-hero-action-btn.saved { background: rgba(245, 166, 35, 0.3); border-color: rgba(245, 166, 35, 0.5); color: #F5A623; }

/* Hero pagination dots */
.ni-hero-dots {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 5px; z-index: 3;
}
.ni-hero-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease; cursor: pointer;
}
.ni-hero-dot.active { width: 18px; border-radius: 3px; background: #F5A623; }

/* ── Premium News Badges ── */
.ni-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
}
.ni-badge svg { width: 12px; height: 12px; }
.ni-badge-bullish {
    background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22C55E; box-shadow: 0 0 8px rgba(34, 197, 94, 0.1);
}
.ni-badge-bearish {
    background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3);
    color: #EF4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.1);
}
.ni-badge-breaking {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.4); color: #FF6B6B;
    animation: niBadgePulse 2s ease-in-out infinite;
}
@keyframes niBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
.ni-badge-trending {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(245, 166, 35, 0.08));
    border: 1px solid rgba(245, 166, 35, 0.35); color: #F5A623;
}
.ni-badge-etf {
    background: rgba(96, 165, 250, 0.15); border: 1px solid rgba(96, 165, 250, 0.3);
    color: #60A5FA;
}
.ni-badge-macro {
    background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.3);
    color: #A78BFA;
}
.ni-badge-regulation {
    background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94A3B8;
}
.ni-badge-neutral {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
    color: #A5B4C7;
}

/* ── Impact Score Indicators ── */
.ni-impact {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 700;
}
.ni-impact-dot { width: 6px; height: 6px; border-radius: 50%; }
.ni-impact-high { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.ni-impact-high .ni-impact-dot { background: #EF4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.ni-impact-medium { background: rgba(245, 166, 35, 0.12); color: #F5A623; }
.ni-impact-medium .ni-impact-dot { background: #F5A623; box-shadow: 0 0 6px rgba(245, 166, 35, 0.5); }
.ni-impact-low { background: rgba(34, 197, 94, 0.12); color: #22C55E; }
.ni-impact-low .ni-impact-dot { background: #22C55E; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }

/* ── Premium News Card ── */
.ni-card {
    background: rgba(11, 18, 32, 0.8);
    border: 1px solid rgba(245, 166, 35, 0.08);
    border-radius: 20px; padding: 16px;
    cursor: pointer; transition: all 0.2s ease;
    animation: newsFadeIn 0.4s ease both;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; flex-direction: column; gap: 12px;
}
.ni-card:active { transform: scale(0.99); }
.ni-card:hover { border-color: rgba(245, 166, 35, 0.18); transform: scale(1.02); }

.ni-card-top { display: flex; gap: 12px; }
.ni-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ni-card-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.ni-card-title {
    font-size: 14.5px; font-weight: 700; line-height: 1.4; color: #FFFFFF;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ni-card-summary {
    font-size: 12.5px; line-height: 1.45; color: #A5B4C7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ni-card-ai-summary {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 10px; border-radius: 10px;
    background: rgba(245, 166, 35, 0.06);
    border: 1px solid rgba(245, 166, 35, 0.1);
    font-size: 11.5px; line-height: 1.4; color: #F5A623;
    margin-top: 2px;
}
.ni-card-ai-summary svg { flex-shrink: 0; margin-top: 1px; }
.ni-card-thumb {
    width: 84px; height: 84px; border-radius: 14px;
    object-fit: cover; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
}
.ni-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding-top: 4px;
}
.ni-card-source {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: #6B7A8D; font-weight: 500;
    min-width: 0; flex: 1;
}
.ni-card-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ni-card-action {
    width: 32px; height: 32px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A5B4C7; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.ni-card-action:active { transform: scale(0.92); }
.ni-card-action:hover { background: rgba(245, 166, 35, 0.1); color: #F5A623; }
.ni-card-action.saved {
    background: rgba(245, 166, 35, 0.15); border-color: rgba(245, 166, 35, 0.3); color: #F5A623;
}

/* ── Empty State ── */
.ni-empty {
    text-align: center; padding: 60px 20px;
    color: #6B7A8D; font-size: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ni-empty svg { opacity: 0.4; }

/* ── Skeleton Loading ── */
.ni-skeleton-hero {
    border-radius: 24px; height: 240px; margin-bottom: 16px;
    background: linear-gradient(90deg, rgba(11,18,32,0.6) 25%, rgba(20,30,50,0.8) 50%, rgba(11,18,32,0.6) 75%);
    background-size: 200% 100%; animation: niSkeleton 1.5s ease-in-out infinite;
}
.ni-skeleton-card {
    border-radius: 20px; height: 130px; margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(11,18,32,0.6) 25%, rgba(20,30,50,0.8) 50%, rgba(11,18,32,0.6) 75%);
    background-size: 200% 100%; animation: niSkeleton 1.5s ease-in-out infinite;
}
@keyframes niSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Bottom Sheet (shared) ── */
.ni-sheet-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
    animation: niFadeIn 0.2s ease;
}
@keyframes niFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ni-sheet {
    width: 100%; max-width: 480px;
    background: #0B1220; border-radius: 24px 24px 0 0;
    border: 1px solid rgba(245, 166, 35, 0.1);
    max-height: 85vh; display: flex; flex-direction: column;
    animation: niSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes niSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ni-sheet-handle {
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin: 10px auto 0;
}
.ni-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 8px;
}
.ni-sheet-title { font-size: 17px; font-weight: 700; color: #FFFFFF; }
.ni-sheet-close {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.05); border: none;
    color: #A5B4C7; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ni-sheet-body {
    flex: 1; overflow-y: auto; padding: 8px 20px 16px;
    -webkit-overflow-scrolling: touch;
}
.ni-sheet-actions {
    display: flex; gap: 10px; padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ── Filter Chips ── */
.ni-filter-section { margin-bottom: 20px; }
.ni-filter-label {
    font-size: 12px; font-weight: 700; color: #6B7A8D;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 10px;
}
.ni-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ni-chip {
    padding: 8px 14px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A5B4C7; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
    font-family: inherit;
}
.ni-chip:hover { background: rgba(255, 255, 255, 0.07); }
.ni-chip.active {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(245, 166, 35, 0.08));
    border-color: rgba(245, 166, 35, 0.4); color: #F5A623;
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.1);
}

/* ── Buttons ── */
.ni-btn {
    padding: 12px 20px; border-radius: 12px; border: none;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ni-btn:active { transform: scale(0.97); }
.ni-btn-primary {
    flex: 1; background: linear-gradient(135deg, #F5A623, #E0941A); color: #0B1220;
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.25);
}
.ni-btn-ghost {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
    color: #A5B4C7;
}
.ni-btn-block { width: 100%; }

/* ── Search Panel ── */
.ni-search-panel {
    width: 100%; max-width: 480px; height: 100vh;
    background: #0B1220; display: flex; flex-direction: column;
    animation: niSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ni-search-header {
    display: flex; align-items: center; gap: 10px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ni-search-input-wrap { position: relative; flex: 1; }
.ni-search-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: #6B7A8D; pointer-events: none;
}
.ni-search-input {
    width: 100%; height: 44px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #FFFFFF; font-size: 14px; outline: none;
    padding: 0 42px 0 14px; font-family: inherit;
}
.ni-search-input:focus { border-color: rgba(245, 166, 35, 0.3); }
.ni-search-input::placeholder { color: #6B7A8D; }
.ni-search-results {
    flex: 1; overflow-y: auto; padding: 12px 16px 100px;
    -webkit-overflow-scrolling: touch;
}

/* ── Calendar Redesign ── */
.ni-cal-segments {
    display: flex; gap: 4px; padding: 4px;
    background: rgba(11, 18, 32, 0.6); border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 14px;
}
.ni-cal-segment {
    flex: 1; height: 40px; border-radius: 10px; border: none;
    background: transparent; color: #A5B4C7;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; font-family: inherit;
}
.ni-cal-segment.active {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.06));
    color: #F5A623; box-shadow: 0 0 12px rgba(245, 166, 35, 0.1);
}

/* Country filter chips */
.ni-cal-countries {
    display: flex; gap: 7px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-bottom: 14px; padding-bottom: 2px;
}
.ni-cal-countries::-webkit-scrollbar { display: none; }
.ni-cal-country {
    flex-shrink: 0; height: 36px; padding: 0 14px;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(11, 18, 32, 0.6); color: #A5B4C7;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; font-family: inherit;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.ni-cal-country.active {
    border-color: rgba(245, 166, 35, 0.4);
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.15), rgba(245, 166, 35, 0.05));
    color: #F5A623; box-shadow: 0 0 12px rgba(245, 166, 35, 0.1);
}

/* Calendar Event Card */
.ni-cal-event {
    background: rgba(11, 18, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px; padding: 14px;
    margin-bottom: 10px; transition: all 0.2s ease;
    display: flex; flex-direction: column; gap: 10px;
    position: relative; overflow: hidden;
}
.ni-cal-event::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cal-accent, transparent);
}
.ni-cal-event.impact-high::before { background: #EF4444; }
.ni-cal-event.impact-medium::before { background: #F5A623; }
.ni-cal-event.impact-low::before { background: #22C55E; }
.ni-cal-event.past { opacity: 0.5; }
.ni-cal-event.live { border-color: rgba(34, 197, 94, 0.3); box-shadow: 0 0 16px rgba(34, 197, 94, 0.1); }

.ni-cal-event-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ni-cal-event-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ni-cal-event-flag {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}
.ni-cal-event-currency {
    font-size: 12px; font-weight: 700; color: #A5B4C7;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.ni-cal-event-time {
    font-size: 13px; font-weight: 700; color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}
.ni-cal-event-title {
    font-size: 14px; font-weight: 700; color: #FFFFFF; line-height: 1.35;
}
.ni-cal-event-stats {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ni-cal-stat { display: flex; flex-direction: column; gap: 2px; }
.ni-cal-stat-label { font-size: 10px; color: #6B7A8D; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ni-cal-stat-value { font-size: 13px; font-weight: 700; color: #FFFFFF; }
.ni-cal-stat-value.actual { color: #F5A623; }
.ni-cal-event-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ni-cal-event-reminder {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A5B4C7; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease; font-family: inherit;
}
.ni-cal-event-reminder:hover { background: rgba(245, 166, 35, 0.1); color: #F5A623; }
.ni-cal-event-reminder.active {
    background: rgba(245, 166, 35, 0.15); border-color: rgba(245, 166, 35, 0.3); color: #F5A623;
}
.ni-cal-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 700;
}
.ni-cal-status-past { background: rgba(255, 255, 255, 0.06); color: #6B7A8D; }
.ni-cal-status-live { background: rgba(34, 197, 94, 0.15); color: #22C55E; }
.ni-cal-status-upcoming { background: rgba(245, 166, 35, 0.12); color: #F5A623; }
.ni-cal-countdown {
    font-size: 12px; font-weight: 700; color: #F5A623;
    font-variant-numeric: tabular-nums;
}
.ni-cal-time-group {
    font-size: 11px; font-weight: 700; color: #6B7A8D;
    text-transform: uppercase; letter-spacing: 0.8px;
    padding: 14px 0 6px;
}
.ni-cal-time-group:first-child { padding-top: 0; }

/* ── Reminder Sheet ── */
.ni-reminder-event-info {
    padding: 14px; border-radius: 14px;
    background: rgba(245, 166, 35, 0.06);
    border: 1px solid rgba(245, 166, 35, 0.1);
    margin-bottom: 16px;
}
.ni-reminder-event-info-title { font-size: 14px; font-weight: 700; color: #FFFFFF; margin-bottom: 4px; }
.ni-reminder-event-info-meta { font-size: 12px; color: #A5B4C7; }
.ni-reminder-options { display: flex; flex-direction: column; gap: 8px; }
.ni-reminder-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #FFFFFF; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease; font-family: inherit;
}
.ni-reminder-option:hover { background: rgba(245, 166, 35, 0.08); border-color: rgba(245, 166, 35, 0.2); }
.ni-reminder-option svg { color: #F5A623; }
.ni-reminder-option.active {
    background: rgba(245, 166, 35, 0.12); border-color: rgba(245, 166, 35, 0.3); color: #F5A623;
}

/* ── Share Sheet ── */
.ni-share-options {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.ni-share-option {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A5B4C7; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease; font-family: inherit;
}
.ni-share-option:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }
.ni-share-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.ni-share-telegram { background: linear-gradient(135deg, #2AABEE, #229ED9); }
.ni-share-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
.ni-share-x { background: linear-gradient(135deg, #1d1d1d, #000); border: 1px solid rgba(255,255,255,0.1); }
.ni-share-copy { background: linear-gradient(135deg, #6B7A8D, #475569); }

/* ── Load More Trigger ── */
.ni-load-trigger {
    text-align: center; padding: 20px 0; color: #6B7A8D; font-size: 13px;
}

/* ── Responsive Tweaks ── */
@media (max-width: 360px) {
    .ni-tab { padding: 0 14px; font-size: 13px; }
    .ni-card { padding: 14px; }
    .ni-card-thumb { width: 72px; height: 72px; }
    .ni-hero-headline { font-size: 16px; }
    .ni-share-options { grid-template-columns: repeat(2, 1fr); }
}

/* #endregion */

/* ============================================================================ */
/* #region پروفایل */
/* این بخش استایل‌های مرتبط با "پروفایل" را در خود نگه می‌دارد. */
/* ============================================================================ */
.profile-card { border-radius: 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.06); padding: 24px 20px 20px; margin: 0 20px 16px; text-align: center; position: relative; background: var(--bg-card); box-shadow: 0 8px 24px rgba(0,0,0,0.25); min-height: 240px; display: flex; flex-direction: column; align-items: center; }
.profile-settings { position: absolute; top: 16px; right: 16px; cursor: pointer; }
.profile-avatar { width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid var(--accent); overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 18px; font-weight: 700; }
.profile-username { display: block; font-size: 13px; color: var(--text-dim); }
.profile-id { font-size: 12px; color: var(--text-sub); margin-top: 4px; }

/* #endregion */

/* ============================================================================ */
/* #region رفرال */
/* این بخش استایل‌های لینک دعوت، آمار ارجاع و پاداش‌ها را مشخص می‌کند. */
/* ============================================================================ */
/* NOTE: .referral-card (old base class) removed — replaced by .referral-entry-card below. */

/* Referral Entry Card — premium CTA that opens ReferralApp.openReferral() */
.referral-entry-card {
    position: relative; overflow: hidden; cursor: pointer;
    border-radius: 22px; padding: 20px 18px;
    margin: 0 20px 16px;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(245,166,35,0.10), transparent 55%),
        linear-gradient(145deg, #0B1220 0%, #0F1828 55%, #0B1220 100%);
    border: 1px solid rgba(245,166,35,0.20);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 40px rgba(245,166,35,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
    animation: walletCardEntry 0.55s cubic-bezier(0.16,1,0.3,1) both;
}
.referral-entry-card:hover {
    transform: translateY(-2px);
    border-color: rgba(245,166,35,0.35);
    box-shadow: 0 14px 36px rgba(0,0,0,0.40), 0 0 50px rgba(245,166,35,0.10), inset 0 1px 0 rgba(255,255,255,0.07);
}
.referral-entry-card:active { transform: scale(0.985); }
.rec-glow {
    position: absolute; top: -40px; inset-inline-end: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,166,35,0.14), transparent 70%);
    pointer-events: none;
}
.rec-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.rec-icon-wrap { position: relative; flex-shrink: 0; }
.rec-icon-glow {
    position: absolute; inset: -4px; border-radius: 14px;
    background: radial-gradient(circle, rgba(245,166,35,0.25), transparent 70%);
    filter: blur(8px);
}
.rec-icon {
    position: relative; z-index: 1;
    width: 46px; height: 46px; border-radius: 13px;
    background: linear-gradient(135deg, rgba(245,166,35,0.20), rgba(245,166,35,0.08));
    border: 1.5px solid rgba(245,166,35,0.35);
    display: flex; align-items: center; justify-content: center;
    color: #F5A623;
    box-shadow: 0 4px 14px rgba(245,166,35,0.20);
}
.rec-info { flex: 1; min-width: 0; }
.rec-info h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.2px; }
.rec-info p { font-size: 12px; color: #8B96A8; margin: 3px 0 0; line-height: 1.4; }
.rec-arrow { color: #F5A623; flex-shrink: 0; opacity: 0.8; transition: transform 0.3s ease; }
[dir="rtl"] .rec-arrow svg { transform: scaleX(-1); }
.referral-entry-card:hover .rec-arrow { transform: translateX(3px); }
[dir="rtl"] .referral-entry-card:hover .rec-arrow { transform: scaleX(-1) translateX(3px); }
.rec-stats {
    display: flex; align-items: stretch; gap: 0;
    margin-top: 16px; padding: 12px 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px; position: relative; z-index: 1;
}
.rec-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 6px; }
.rec-stat-num { font-size: 18px; font-weight: 800; color: #F5A623; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.rec-stat-label { font-size: 10px; color: #6B7A8D; font-weight: 600; text-align: center; }
.rec-stat-divider { width: 1px; background: rgba(255,255,255,0.05); margin: 4px 0; }
.rec-cta {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 14px;
    padding: 11px; border-radius: 13px; border: none;
    background: linear-gradient(135deg, #F5A623, #FFCC4D);
    color: #020611; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; position: relative; z-index: 1;
    box-shadow: 0 4px 14px rgba(245,166,35,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}
.rec-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(245,166,35,0.40), inset 0 1px 0 rgba(255,255,255,0.3); }
.rec-cta:active { transform: scale(0.97); }
[dir="rtl"] .rec-cta svg { transform: scaleX(-1); }
@media (max-width: 360px) {
    .referral-entry-card { padding: 16px 14px; margin: 0 14px 14px; }
    .rec-stat-num { font-size: 15px; }
    .rec-stat-label { font-size: 9px; }
}
/* NOTE: .ref-header / .ref-input / .ref-share-btn / .ref-stats / .ref-rewards-soon /
   .soon-badge / .wheel-preview* classes were removed — the old referral card
   was replaced by .referral-entry-card (premium CTA) and ReferralApp.full-page.
   The Lucky Wheel now lives inside Referral Center with its own .rc-wheel-* styles. */

/* #endregion */

/* ============================================================================ */
/* #region تنظیمات و زبان */
/* این بخش استایل‌های مودال تنظیمات، انتخاب زبان و ظرف‌های تمام‌صفحه را تعریف می‌کند. */
/* ============================================================================ */
.settings-modal-box { max-width: 400px; }
.settings-menu { display: flex; flex-direction: column; gap: 4px; }
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
.setting-item:active { background: rgba(255,138,0,0.08); }
.setting-arrow { color: var(--text-sub); font-size: 18px; }

.lang-options { display: flex; flex-direction: column; gap: 8px; }
.lang-option { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; background: rgba(255,255,255,0.02); }
.lang-label { display: flex; align-items: center; gap: 10px; }
.lang-flag { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; }
.lang-flag-fa { background: linear-gradient(180deg, #239f40 33%, #fff 33%, #fff 66%, #da0000 66%); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.lang-flag-en { background: linear-gradient(135deg, #012169 40%, #fff 40%, #fff 55%, #c8102e 55%); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.lang-option:active { border-color: var(--accent); background: rgba(255,138,0,0.06); }
.lang-check { color: var(--green); font-weight: 700; display: inline-flex; min-width: 20px; }

.full-modal { align-items: flex-end; padding: 0; }
.full-modal .modal-box-wide { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; margin: 0; }
.modal-box-wide { max-width: 480px; }

/* #endregion */

/* ============================================================================ */
/* #region Notification Settings */
/* ============================================================================ */

.full-modal-box { max-width: 420px; max-height: 88vh; overflow-y: auto; }

/* ============================================================================
   NOTIFICATION SETTINGS — Premium Crypto Mini App (Optimized)
   Performance: no backdrop-filter blur, lightweight shadows, GPU transforms only
   ============================================================================ */

/* ── Status Card (top of page) ── */
.ns-status-card {
    background: linear-gradient(135deg, rgba(15,24,40,0.95), rgba(11,18,32,0.92));
    border: 1px solid rgba(245,166,35,0.12);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ns-status-icon-wrap {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ns-status-icon-wrap.active {
    background: rgba(0,200,150,0.12); border: 1px solid rgba(0,200,150,0.20);
}
.ns-status-icon-wrap.partial {
    background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.20);
}
.ns-status-icon-wrap.inactive {
    background: rgba(255,77,77,0.10); border: 1px solid rgba(255,77,77,0.15);
}
.ns-status-icon-wrap svg { width: 20px; height: 20px; }
.ns-status-icon-wrap.active svg { color: #00C896; }
.ns-status-icon-wrap.partial svg { color: #F5A623; }
.ns-status-icon-wrap.inactive svg { color: #FF4D4D; }

.ns-status-info { flex: 1; min-width: 0; }
.ns-status-title { font-size: 13px; font-weight: 800; line-height: 1.3; }
.ns-status-title.active { color: #00C896; }
.ns-status-title.partial { color: #F5A623; }
.ns-status-title.inactive { color: #FF4D4D; }
.ns-status-desc { font-size: 11px; color: #6B7A8D; font-weight: 500; line-height: 1.4; margin-top: 2px; }

/* ── Group Labels ── */
.ns-group-label {
    font-size: 10px; font-weight: 800; color: #6B7A8D;
    text-transform: uppercase; letter-spacing: 0.6px;
    padding: 0 2px; margin: 14px 0 8px;
    display: flex; align-items: center; gap: 8px;
}
.ns-group-label::after { content: ''; flex: 1; height: 1px; background: rgba(107,122,141,0.10); }
.ns-group-label:first-child { margin-top: 4px; }

/* ── Premium Category Cards ── */
.ns-card-list { display: flex; flex-direction: column; gap: 8px; }

.ns-prem-card {
    display: flex; flex-direction: column;
    gap: 10px; padding: 12px 14px;
    min-height: 0;
    background: rgba(15,24,40,0.70);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: border-color 0.18s ease;
}
.ns-prem-card:hover { border-color: rgba(245,166,35,0.10); }
.ns-prem-card:active { transform: scale(0.998); }

/* Row 1: Icon + Title + Description (left side) */
.ns-prem-left { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; }

/* Row 2: Channel Selector (full width) */
.ns-capsule { width: 100%; justify-content: space-between; }

/* Premium Icon Container */
.ns-prem-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.ns-prem-icon svg { width: 17px; height: 17px; }

/* Gradient icon backgrounds per category */
.ic-price { background: linear-gradient(135deg, rgba(255,77,77,0.18), rgba(255,77,77,0.06)); border: 1px solid rgba(255,77,77,0.12); }
.ic-price svg { color: #FF6B6B; }
.ic-analysis { background: linear-gradient(135deg, rgba(255,138,0,0.18), rgba(255,138,0,0.06)); border: 1px solid rgba(255,138,0,0.12); }
.ic-analysis svg { color: #FF8A00; }
.ic-news { background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(56,189,248,0.06)); border: 1px solid rgba(56,189,248,0.12); }
.ic-news svg { color: #38BDF8; }
.ic-calendar { background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(168,85,247,0.06)); border: 1px solid rgba(168,85,247,0.12); }
.ic-calendar svg { color: #A855F7; }
.ic-security { background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(239,68,68,0.06)); border: 1px solid rgba(239,68,68,0.12); }
.ic-security svg { color: #EF4444; }
.ic-ticket { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.06)); border: 1px solid rgba(34,197,94,0.12); }
.ic-ticket svg { color: #22C55E; }
.ic-announce { background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(245,166,35,0.06)); border: 1px solid rgba(245,166,35,0.12); }
.ic-announce svg { color: #F5A623; }
.ic-wheel { background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.06)); border: 1px solid rgba(251,191,36,0.12); }
.ic-wheel svg { color: #FBBF24; }
.ic-referral { background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.06)); border: 1px solid rgba(99,102,241,0.12); }
.ic-referral svg { color: #6366F1; }
.ic-wallet { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06)); border: 1px solid rgba(16,185,129,0.12); }
.ic-wallet svg { color: #10B981; }
.ic-challenge { background: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(236,72,153,0.06)); border: 1px solid rgba(236,72,153,0.12); }
.ic-challenge svg { color: #EC4899; }
.ic-promo { background: linear-gradient(135deg, rgba(34,211,238,0.16), rgba(34,211,238,0.04)); border: 1px solid rgba(34,211,238,0.10); }
.ic-promo svg { color: #22D3EE; }

.ns-prem-text { min-width: 0; flex: 1; overflow: hidden; }
.ns-prem-title {
    font-size: 12.5px; font-weight: 800; color: #E8EDF2;
    letter-spacing: -0.1px; line-height: 1.25;
    white-space: normal; word-break: break-word;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.ns-prem-desc {
    font-size: 11px; color: #6B7A8D; font-weight: 500;
    line-height: 1.3; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}

/* ── Capsule Segmented Control ── */
.ns-capsule {
    display: flex; gap: 0;
    width: 100%;
    background: rgba(0,0,0,0.30); border-radius: 11px; padding: 3px;
    border: 1px solid rgba(255,255,255,0.03);
    justify-content: space-between;
}
.ns-cap-btn {
    padding: 6px 8px; border: none; border-radius: 8px;
    background: transparent; color: #6B7A8D;
    font-size: 10px; font-weight: 800; cursor: pointer;
    font-family: inherit; white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
    display: flex; align-items: center; justify-content: center; gap: 2px;
    flex: 1;
    letter-spacing: 0.1px;
    -webkit-tap-highlight-color: transparent;
}
.ns-cap-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.ns-cap-btn span { font-size: 10px; }
.ns-cap-btn:hover { color: #AEB7C2; }
.ns-cap-btn:active { transform: scale(0.95); }

.ns-cap-btn.active.off { background: linear-gradient(135deg, rgba(255,77,77,0.6), rgba(239,68,68,0.4)); color: #FFF; }
.ns-cap-btn.active.app { background: linear-gradient(135deg, #22C55E, #16A34A); color: #FFF; }
.ns-cap-btn.active.bot { background: linear-gradient(135deg, #38BDF8, #0EA5E9); color: #FFF; }
.ns-cap-btn.active.both { background: linear-gradient(135deg, #F5A623, #FFCC4D); color: #0B1220; }

/* ── Responsive ── */
@media (max-width: 320px) {
    .ns-cap-btn span { display: none; }
    .ns-cap-btn { padding: 6px 4px; }
    .ns-cap-btn svg { width: 13px; height: 13px; }
    .ns-prem-title { font-size: 12px; }
    .ns-prem-desc { font-size: 10.5px; }
}

/* #endregion */

/* ============================================================================ */
/* #region تیکت‌ها */
/* این بخش استایل‌های فرم تیکت، لیست پیام‌ها و پاسخ‌های پشتیبانی را نگه می‌دارد. */
/* ============================================================================ */
.ticket-form { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ticket-section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 10px; }
.ticket-list { max-height: 45vh; overflow-y: auto; }
.ticket-item { border-radius: 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.06); padding: 14px; margin-bottom: 10px; background: var(--bg-card); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.ticket-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.ticket-item-header strong { font-size: 14px; flex: 1; }
.ticket-user { font-size: 11px; color: var(--text-sub); margin-bottom: 6px; }
.ticket-body-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
.ticket-status { font-size: 10px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.ticket-status.open { background: rgba(255,77,77,0.15); color: var(--red); }
.ticket-status.answered { background: rgba(0,200,150,0.15); color: var(--green); }
.ticket-thread { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ticket-reply { background: rgba(0,200,150,0.06); border-inline-start: 3px solid var(--green); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text); line-height: 1.5; }
.ticket-reply.admin { border-inline-start-color: var(--accent); background: rgba(255,138,0,0.06); }
.ticket-reply-meta { font-size: 10px; color: var(--text-sub); margin-top: 4px; }
.ticket-actions { display: flex; gap: 8px; margin-top: 10px; }
.ticket-delete-btn { background: rgba(255,77,77,0.1); border: 1px solid rgba(255,77,77,0.2); color: var(--red); padding: 6px 12px; border-radius: 8px; font-size: 11px; cursor: pointer; }
.ticket-reply-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ticket-reply-input { min-height: 60px; resize: vertical; }
.ticket-reply-btn { padding: 10px; font-size: 13px; }
.ticket-date { font-size: 10px; color: var(--text-sub); text-align: left; margin-top: 6px; }

/* #endregion */

/* ============================================================================ */
/* #region هشدار قیمت */
/* این بخش استایل‌های فرم ثبت هشدار و لیست هشدارهای فعال را مشخص می‌کند. */
/* ============================================================================ */
.alert-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.alert-section-header h4 { font-size: 15px; margin: 0; font-weight: 700; }
.alert-hint { font-size: 10px; color: var(--accent); background: rgba(255,138,0,0.1); padding: 3px 8px; border-radius: 6px; }
.alert-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

/* Alert direction row — scrollable horizontal pill buttons */
.alert-direction-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.alert-direction-row::-webkit-scrollbar { display: none; }
.alert-dir-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
}
.alert-dir-btn svg { flex-shrink: 0; opacity: 0.6; transition: opacity 0.25s; }
.alert-dir-btn.active {
    background: #FF8A00;
    color: #000;
    border-color: #FF8A00;
    box-shadow: 0 0 16px rgba(255,138,0,0.25);
    font-weight: 600;
}
.alert-dir-btn.active svg { opacity: 1; }

/* Alert price input with $ prefix */
.alert-price-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.alert-price-prefix {
    position: absolute;
    right: 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    pointer-events: none;
    z-index: 1;
}
.alert-price-input {
    flex: 1;
    margin-bottom: 0 !important;
    padding: 14px 14px 14px 14px !important;
    padding-right: 32px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: left;
    direction: ltr;
    letter-spacing: 0.5px;
}
.alert-submit-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    white-space: nowrap;
    background: #FF8A00 !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    transition: transform 0.15s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 16px rgba(255,138,0,0.25);
}
.alert-submit-btn:active {
    transform: scale(0.97);
    box-shadow: 0 0 0 rgba(255,138,0,0);
}

/* Active alerts list */
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 18px;
    padding: 12px 14px;
    font-size: 13px;
    transition: border-color 0.2s;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.06);
    background: var(--bg-card);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.alert-item:active { border-color: rgba(255,255,255,0.12); }
.alert-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.alert-item-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0,200,150,0.5);
}
.alert-item-status-dot.paused { background: var(--text-sub); box-shadow: none; }
.alert-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.alert-item-top { display: flex; align-items: center; gap: 6px; }
.alert-item-symbol { font-weight: 700; color: var(--accent); font-size: 13px; }
.alert-item-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.6;
}
.alert-item-badge.bullish { background: rgba(0,200,150,0.15); color: var(--green); }
.alert-item-badge.bearish { background: rgba(255,77,77,0.15); color: var(--red); }
.alert-item-badge.neutral { background: rgba(100,150,255,0.15); color: #6496ff; }
.alert-item-target { font-size: 12px; color: var(--text-dim); direction: ltr; text-align: right; }
.alert-remove-btn {
    background: rgba(255,77,77,0.1);
    border: 1px solid rgba(255,77,77,0.15);
    color: var(--red);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert-remove-btn:active { background: rgba(255,77,77,0.25); }
.alert-empty { font-size: 12px; color: var(--text-dim); text-align: center; padding: 12px 8px; }

/* Trend Strength Indicator */
.trend-strength-section {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.trend-strength-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
}
.trend-strength-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: visible;
}
.trend-strength-fill {
    height: 100%;
    border-radius: 3px;
    width: 50%;
    background: var(--text-sub);
    transition: width 0.5s ease, background 0.5s ease;
}
.trend-strength-fill.bullish {
    background: linear-gradient(90deg, rgba(0,200,150,0.6), var(--green));
}
.trend-strength-fill.bearish {
    background: linear-gradient(90deg, var(--red), rgba(255,77,77,0.6));
}
.trend-strength-label {
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 11px;
    font-weight: 700;
    transition: color 0.5s ease;
    color: var(--text-dim);
}
.trend-strength-label.bullish { color: var(--green); }
.trend-strength-label.bearish { color: var(--red); }

.input-field { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text); margin-bottom: 10px; outline: none; box-sizing: border-box; }
.analysis-form-fields .input-field { margin-bottom: 0; height: 44px; }
.analysis-form-fields textarea.input-field { height: auto; min-height: 100px; resize: vertical; }
.submit-btn { width: 100%; padding: 12px; background: #FF8A00; border: none; color: #000; font-weight: 700; border-radius: 14px; cursor: pointer; box-shadow: 0 0 16px rgba(255,138,0,0.25); }

/* #endregion */

/* ============================================================================ */
/* #region درباره */
/* این بخش استایل‌های پنجره معرفی برنامه و لینک کانال رسمی را ارائه می‌کند. */
/* ============================================================================ */
.about-content { border-radius: 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.06); padding: 20px; background: var(--bg-card); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.about-content h3 { margin-bottom: 10px; }
.about-content p { color: var(--text-dim); margin-bottom: 6px; }
.about-content a { color: var(--accent); text-decoration: none; }

/* #endregion */

/* ============================================================================ */
/* #region مودال‌ها */
/* این بخش استایل‌های مرتبط با "مودال‌ها" را در خود نگه می‌دارد. */
/* ============================================================================ */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5,7,10,0.85); backdrop-filter: blur(20px); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.modal-box { background: linear-gradient(165deg, #151C24, #11161D); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; max-width: 420px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 20px; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
.join-box { max-width: 380px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h3 { font-size: 16px; display: flex; align-items: center; gap: 6px; }
.modal-header button { background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; }
.modal-header .modal-close-btn { background: rgba(16,23,34,0.8); border: 1px solid rgba(255,255,255,0.08); width: 32px; height: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: inherit; color: var(--text-secondary); backdrop-filter: blur(8px); }
.modal-list { max-height: 200px; overflow-y: auto; }
.modal-coin-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.modal-coin-item.disabled { opacity: 0.4; cursor: not-allowed; }
.modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.cancel-btn { flex: 1; padding: 12px; background: rgba(21,28,36,0.9); border: 1px solid rgba(255,255,255,0.08); color: var(--text-secondary); border-radius: 14px; cursor: pointer; backdrop-filter: blur(8px); }

/* #endregion */

/* ============================================================================ */
/* #region جزئیات کوین — Full Screen */
/* این بخش استایل‌های نمودار، آمار کوین و ناحیه هشدار قیمت را نگه می‌دارد. */
/* ============================================================================ */
@keyframes detailSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes detailSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }

.coin-detail-fullscreen {
    position: fixed; inset: 0; z-index: 1001;
    background: var(--bg-primary);
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    max-width: 430px;
    margin: 0 auto;
    height: 100dvh;
}
.coin-detail-fullscreen.slide-up {
    animation: detailSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.coin-detail-fullscreen.slide-down {
    animation: detailSlideDown 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* Top Bar — compact */
.detail-top-bar {
    display: flex; align-items: center; padding: 8px 12px; gap: 10px;
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    background: rgba(11,15,20,0.92);
    border-bottom: 1px solid var(--border);
}
.detail-back-btn {
    width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08); background: rgba(21,28,36,0.9);
    color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.25s; backdrop-filter: blur(8px);
}
.detail-back-btn:active { transform: scale(0.9); }
.detail-modal-identity { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.detail-coin-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.detail-identity-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.detail-modal-identity h3 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.detail-price-row { display: flex; align-items: center; gap: 8px; }
.detail-coin-price { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; }
.detail-coin-change { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.detail-coin-change.up { color: var(--green); background: rgba(0,200,150,0.1); }
.detail-coin-change.down { color: var(--red); background: rgba(255,77,77,0.1); }
.detail-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.detail-watch-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-sub); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.detail-watch-btn:active { transform: scale(0.9); }
.detail-watch-btn.active { color: var(--accent); border-color: rgba(255,138,0,0.4); background: rgba(255,138,0,0.1); }
.detail-close-btn {
    width: 32px; height: 32px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08); background: rgba(21,28,36,0.9);
    color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.25s; backdrop-filter: blur(8px);
}
.detail-close-btn:active { transform: scale(0.9); }

/* Extra Info — compact row at bottom */
.detail-extra-info {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    padding: 10px 16px 20px;
    border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-sub); direction: ltr;
}
.detail-extra-info .info-item { display: flex; align-items: baseline; gap: 4px; }
.detail-extra-info .info-label { color: var(--text-sub); }
.detail-extra-info .info-value { color: var(--text-dim); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Timeframe Bar */
.tv-tf-bar { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; direction: ltr; flex-shrink: 0; }
.tv-tf-bar::-webkit-scrollbar { display: none; }
.tv-tf-btn {
    flex-shrink: 0; padding: 6px 14px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-dim); font-size: 12px; font-weight: 600;
    border-radius: 20px; cursor: pointer; transition: all 0.2s;
}
.tv-tf-btn.active {
    background: #FF8A00; color: #000; border-color: #FF8A00;
    box-shadow: 0 0 20px var(--accent-glow);
}

/* Chart — flex fills remaining space, min 180px */
.detail-chart { flex: 1; min-height: 180px; overflow: hidden; margin-bottom: 0; }

/* Alert Section — simplified */
.alert-section { border-top: 1px solid var(--border); padding: 12px 16px 16px; margin-top: 0; flex-shrink: 0; }
.alert-section h4 { font-size: 14px; margin: 0; font-weight: 700; }
.alert-current-price {
    font-size: 11px; color: var(--text-sub);
    background: rgba(255,255,255,0.03); padding: 3px 8px; border-radius: 6px;
    direction: ltr;
}
.alert-current-price strong {
    color: var(--accent); font-weight: 700; margin-left: 2px;
}

/* #endregion */

/* ============================================================================ */
/* #region نوتیفیکیشن‌ها (دکمه‌های کوچک و شیک) */
/* این بخش استایل‌های مرتبط با "نوتیفیکیشن‌ها (دکمه‌های کوچک و شیک)" را در خود نگه می‌دارد. */
/* ============================================================================ */
.notif-list { max-height: 300px; overflow-y: auto; }
.notif-item { padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; transition: background 0.15s; }
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-item.unread { background: rgba(255,138,0,0.04); border-inline-start: 3px solid var(--accent); }
.notif-title { font-weight: 600; }
.notif-body { font-size: 12px; color: var(--text-dim); }
.notif-date { font-size: 10px; color: var(--text-sub); text-align: right; }
.notif-delete-btn {
    position: absolute; top: 8px; inset-inline-end: 8px;
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.05); color: var(--text-dim);
    font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.notif-delete-btn:hover { background: rgba(239,68,68,0.2); color: #ef4444; }

.mark-all-read-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0, 200, 150, 0.08);
    border: 1px solid rgba(0,200,150,0.2);
    color: var(--green);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    backdrop-filter: blur(8px);
}
.mark-all-read-btn:hover { background: rgba(0,200,150,0.15); }

.clear-notif-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px;
    background: rgba(255, 77, 77, 0.05);
    border: 1px solid rgba(255, 77, 77, 0.2);
    border-radius: 10px;
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.clear-notif-btn:hover { background: rgba(255, 77, 77, 0.15); }

/* #endregion */

/* ============================================================================ */
/* #region منوی پایینی */
/* این بخش استایل‌های مرتبط با "منوی پایینی" را در خود نگه می‌دارد. */
/* ============================================================================ */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 72px; margin: 0 12px 10px; border-radius: 22px 22px 18px 18px; background: rgba(17,22,29,0.92); box-shadow: 0 -8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-around; align-items: center; z-index: 1000; padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.nav-item { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-sub); cursor: pointer; transition: color var(--transition), transform 0.15s; padding: 6px 12px 4px; position: relative; }
.nav-item:active { transform: scale(0.9); }
.nav-item svg { width: 22px; height: 22px; transition: transform 0.2s; }
.nav-item span { font-size: 10px; font-weight: 500; transition: color var(--transition); }
.nav-item.active { color: #FF8A00; }
.nav-item.active svg { transform: scale(1.1); }
.nav-item.active::after { content: ''; position: absolute; bottom: 0px; left: 20%; right: 20%; height: 2.5px; background: #FF8A00; border-radius: 2px; box-shadow: 0 0 10px rgba(255,138,0,0.5); opacity: 1; transition: left 0.3s ease, right 0.3s ease; }

/* #endregion */

/* ============================================================================ */
/* #region Scroll-to-top button */
/* ============================================================================ */
.scroll-top-btn {
  position: fixed; bottom: 90px; left: 20px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(21,28,36,0.9); backdrop-filter: blur(12px);
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 999; opacity: 0; pointer-events: none;
  transform: translateY(10px); transition: opacity 0.25s, transform 0.25s, background 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top-btn:active { background: rgba(255,138,0,0.15); color: var(--accent); }

/* ============================================================================ */
/* #region وضعیت خالی */
/* این بخش استایل‌های مرتبط با "وضعیت خالی" را در خود نگه می‌دارد. */
/* ============================================================================ */
.empty-state { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 13px; }
.empty-state svg { margin-bottom: 12px; opacity: 0.4; }
.chart-loading-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 20px; color: var(--text-dim); font-size: 13px;
}
.chart-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Loading skeleton for news list — moved to #region صفحه اخبار */

/* Loading skeleton for market coin list (P0-1) */
.market-skeleton { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.market-skeleton-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.market-skeleton-icon { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.market-skeleton-text { display: flex; flex-direction: column; gap: 6px; }
.market-skeleton-line { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.market-skeleton-line:nth-child(1) { width: 44px; height: 12px; }
.market-skeleton-line:nth-child(2) { width: 70px; height: 10px; }
.market-skeleton-right { display: flex; align-items: center; gap: 6px; }
.market-skeleton-block { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.market-skeleton-block:nth-child(1) { width: 65px; }
.market-skeleton-block:nth-child(2) { width: 45px; height: 12px; border-radius: 6px; }

/* Loading skeleton for dashboard analysis slider (race-condition fix) */
.slider-skeleton { display: flex; gap: 12px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); min-height: 140px; }
.slider-skeleton-img { width: 100px; height: 100px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.slider-skeleton-text { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; }
.slider-skeleton-line { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.slider-skeleton-line:nth-child(1) { width: 60%; height: 16px; }
.slider-skeleton-line:nth-child(2) { width: 90%; height: 11px; }
.slider-skeleton-line:nth-child(3) { width: 40%; height: 10px; }

/* Loading skeleton for dashboard watchlist (race-condition fix) */
.watchlist-skeleton { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.watchlist-skeleton-item { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.watchlist-skeleton-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.watchlist-skeleton-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.watchlist-skeleton-line { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.watchlist-skeleton-line:nth-child(1) { width: 40px; }
.watchlist-skeleton-line:nth-child(2) { width: 60px; height: 9px; }

/* Loading skeleton for dashboard important-news (race-condition fix) */
.important-news-skeleton { display: flex; flex-direction: column; gap: 10px; }
.important-news-skeleton-item { display: flex; gap: 12px; align-items: center; padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; }
.important-news-skeleton-img { width: 50px; height: 50px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.important-news-skeleton-text { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.important-news-skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.important-news-skeleton-line:nth-child(1) { width: 85%; }
.important-news-skeleton-line:nth-child(2) { width: 50%; height: 10px; }

/* Market Summary Bar (P2-1) */
.market-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin: 0 16px 10px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  gap: 8px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.summary-label {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  letter-spacing: -0.3px;
}
.summary-value.loading {
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 4px;
  min-width: 48px;
  min-height: 16px;
  display: inline-block;
}
.summary-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* Load More button (Phase 7) */
.load-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 32px); margin: 8px auto; padding: 12px;
  border: 1px solid rgba(255,138,0,0.3); border-radius: 14px;
  background: rgba(255,138,0,0.04); color: var(--accent);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.load-more-btn:active { background: rgba(255,138,0,0.12); border-color: rgba(255,138,0,0.5); }

/* FAB: Quick Add to Watchlist (P2-3) */
.fab-add-watch {
  position: fixed;
  bottom: 84px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FF8A00;
  color: #000;
  border: 1px solid rgba(255,138,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255,138,0,0.25);
  z-index: 999;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.25s;
}
.fab-add-watch:hover { box-shadow: 0 6px 24px rgba(255,138,0,0.45); }
.fab-add-watch:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(255,138,0,0.3); }
.fab-add-watch.fab-hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* #endregion */

/* ============================================================================ */
/* #region Premium Market Header */
/* ============================================================================ */
.market-premium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 12px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(11,15,20,0.92);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mph-content { display: flex; align-items: center; gap: 12px; }
.mph-icon-wrap {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,138,0,0.18), rgba(255,138,0,0.06));
    border: 1px solid rgba(255,138,0,0.2);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(255,138,0,0.1);
}
.mph-icon { display: block; }
.mph-text { display: flex; flex-direction: column; gap: 1px; }
.mph-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; margin: 0; line-height: 1.2; }
.mph-refresh {
    width: 38px; height: 38px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(21,28,36,0.9);
    color: var(--text-dim); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.25s;
}
.mph-refresh:active { transform: scale(0.9); background: rgba(255,255,255,0.08); }
.mph-refresh.spinning svg { animation: spin 0.8s linear infinite; }

/* ============================================================================ */
/* #region Market Stats Row */
/* ============================================================================ */
.market-stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 10px 16px 6px;
}
.stat-glass-card {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 10px; border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: var(--transition);
    box-shadow: var(--shadow);
}
.stat-glass-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.1);
}
.sgc-icon-wrap {
    width: 30px; height: 30px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sgc-icon-wrap svg { width: 16px; height: 16px; }
.sgc-mcap { background: rgba(255,138,0,0.1); color: #FF8A00; }
.sgc-vol { background: rgba(0,200,150,0.1); color: #00c896; }
.sgc-btc { background: rgba(255,138,0,0.12); color: #FF8A00; }
.sgc-content { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sgc-label { font-size: 9.5px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sgc-value {
    font-size: 12.5px; font-weight: 700; color: var(--text);
    white-space: nowrap; direction: ltr;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
.sgc-value.loading {
    color: transparent !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 4px; min-width: 48px; min-height: 16px; display: inline-block;
}

/* ============================================================================ */
/* #region Market Insights */
/* ============================================================================ */
.market-insights-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 4px 16px 8px;
}
.insight-card {
    border-radius: 18px; padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    max-height: 120px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.ic-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-shrink: 0; }
.ic-title { font-size: 11px; color: var(--text-sub); font-weight: 600; letter-spacing: 0.2px; }

/* Sentiment */
.sentiment-badge {
    font-size: 9px; font-weight: 700; padding: 2px 8px;
    border-radius: 6px; letter-spacing: 0.3px; text-transform: uppercase;
}
.sentiment-badge.bullish { background: rgba(0,200,150,0.12); color: #00c896; box-shadow: 0 0 14px rgba(0,200,150,0.2); }
.sentiment-badge.neutral { background: rgba(255,138,0,0.12); color: #FF8A00; box-shadow: 0 0 12px rgba(255,138,0,0.15); }
.sentiment-badge.bearish { background: rgba(255,77,77,0.12); color: #ff4d4d; box-shadow: 0 0 14px rgba(255,77,77,0.2); }
.sentiment-body { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; }
.sc2-gradient-bar {
    height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.sc2-gradient-fill {
    height: 100%; width: 50%;
    background: linear-gradient(90deg, #ff4d4d 0%, #f59e0b 35%, #00c896 70%, #00e6a8 100%);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sentiment-labels { display: flex; justify-content: space-between; align-items: center; }
.sl-count { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; }
.sl-up { color: var(--green); }
.sl-down { color: var(--red); }

/* Fear & Greed */
.fg-index-num {
    font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}
.fg-gauge-wrap { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; }
.fg-gauge { width: 120px; height: auto; display: block; }
#fg-arc { transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* Very small screens: stack vertically */
@media (max-width: 320px) {
    .market-insights-row { grid-template-columns: 1fr; }
}

/* ============================================================================ */
/* #region Segmented Control Tabs */
/* ============================================================================ */
.market-seg-control {
    display: flex; position: relative;
    padding: 3px; margin: 0 16px 8px;
    background: rgba(17,22,29,0.8);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    direction: ltr;
}
.seg-indicator {
    position: absolute; top: 3px; bottom: 3px;
    left: 3px; width: calc(33.333% - 2px);
    background: #FF8A00;
    border: none;
    border-radius: 11px;
    transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 16px rgba(255,138,0,0.3);
    z-index: 0;
}
.seg-indicator.pos-0 { left: 3px; }
.seg-indicator.pos-1 { left: calc(33.333% + 1px); }
.seg-indicator.pos-2 { left: calc(66.666% - 1px); }
.seg-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 0; border: none !important; background: transparent !important;
    color: #AEB7C2; font-size: 12.5px; font-weight: 600;
    cursor: pointer; border-radius: 11px; position: relative; z-index: 1;
    transition: color 200ms;
    font-family: inherit;
    box-shadow: none !important;
    -webkit-user-select: none; user-select: none;
    direction: ltr;
}
.seg-btn svg { flex-shrink: 0; opacity: 0.5; transition: opacity 200ms; }
.seg-btn.active { color: #fff; font-weight: 700; }
.seg-btn.active svg { opacity: 1; }
.seg-btn:not(.active):hover { color: #ccc; }

/* ============================================================================ */
/* #region Enhanced Coin Item */
/* ============================================================================ */
.coin-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 10px; cursor: pointer; transition: background var(--transition), transform 0.12s ease, box-shadow var(--transition); border-radius: 18px; position: relative; margin-bottom: 1px; }
.coin-item:hover { background: rgba(21,28,36,0.7); box-shadow: 0 0 20px rgba(0,0,0,0.15); }
.coin-item:active { background: rgba(21,28,36,0.8); transform: scale(0.99); }
.coin-center { flex-shrink: 0; padding: 0 6px; display: flex; align-items: center; }
.coin-sparkline { width: 56px; height: 24px; display: block; }
.coin-sparkline polyline { transition: stroke 0.3s; }

/* ============================================================================ */
/* #region Enhanced Change Badge */
/* ============================================================================ */
.coin-change { font-size: 10.5px; font-weight: 800; padding: 2.5px 7px; border-radius: 8px; font-variant-numeric: tabular-nums; min-width: 58px; text-align: center; white-space: nowrap; letter-spacing: 0.2px; }
.coin-change.up { color: #fff; background: linear-gradient(135deg, rgba(0,200,150,0.85), rgba(0,168,122,0.85)); box-shadow: 0 0 8px rgba(0,200,150,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.coin-change.down { color: #fff; background: linear-gradient(135deg, rgba(255,77,77,0.85), rgba(224,60,60,0.85)); box-shadow: 0 0 8px rgba(255,77,77,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }

/* ============================================================================ */
/* #region واکنش‌گرایی */
/* این بخش استایل‌های مرتبط با "واکنش‌گرایی" را در خود نگه می‌دارد. */
/* ============================================================================ */
@media (max-width: 400px) {
    /* 360px Market page optimization */
    .section-header { padding: 16px 14px 12px; }
    .market-page-header { padding: 14px 14px 10px; }
    .market-page-header h2 { font-size: 18px; }
    .coin-list { padding: 0 14px; }
    .market-summary-bar { margin: 0 12px 8px; padding: 8px 10px; }
    .market-main-tabs { padding: 0 12px 10px; gap: 6px; }
    .main-tab-btn { padding: 9px 0; font-size: 12px; border-radius: 10px; }
    .main-tab-btn svg { width: 14px; height: 14px; }
    .market-sub-tabs { padding: 0 12px 12px; }
    .sub-tab-btn { font-size: 11px; padding: 6px 0; }
    .search-bar { padding: 0 12px 10px; }
    .search-input { padding: 10px 12px 10px 36px; font-size: 13px; }
    .search-icon { left: 26px; }
    .coin-rank { width: 22px; font-size: 10px; }
    .coin-icon { width: 28px; height: 28px; }
    .coin-sym { font-size: 13px; }
    .coin-name { max-width: 70px; }
    .coin-price { font-size: 12px; }
    .coin-change { min-width: 60px; font-size: 11px; padding: 2px 4px; }
    /* 360px Modal optimization */
    .modal-box { padding: 16px; border-radius: 20px; }
    .detail-extra-info { gap: 4px 12px; font-size: 10px; padding: 8px 12px 16px; }
    /* 360px Watchlist card */
    .watch-item { flex: 0 0 105px; padding: 10px 6px; }
}

/* #endregion */

/* ============================================================================ */
/* #region Online users badge */
/* این بخش استایل‌های مرتبط با "Online users badge" را در خود نگه می‌دارد. */
/* ============================================================================ */
.online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--green);
    background: rgba(0, 200, 150, 0.08);
    border: 1px solid rgba(0, 200, 150, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 8px;
}
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* #endregion */

/* ============================================================================ */
/* Economic calendar enhancements — moved to #region صفحه اخبار */
.chart-exchange-badge { font-size: 10px; color: var(--text-sub); text-align: center; margin-bottom: 6px; }

/* #endregion */

/* ============================================================================ */
/* #region AI Assistant */
/* این بخش استایل‌های مرتبط با "AI Assistant" را در خود نگه می‌دارد. */
/* ============================================================================ */
.ai-assistant-root {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px);
    inset-inline-end: 12px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    width: auto;
    max-width: min(280px, calc(100vw - 24px));
}

.ai-assistant-root > * {
    pointer-events: auto;
}

.ai-speech-bubble {
    position: relative;
    max-width: min(260px, calc(100vw - 88px));
    padding: 12px 14px 12px 12px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(30, 27, 75, 0.72));
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 2px 12px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: ai-bubble-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    flex-shrink: 0;
}

.ai-speech-bubble.ai-speech-hidden {
    display: none;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
}

.ai-speech-bubble .ai-speech-text {
    margin: 0;
    padding: 8px 4px 0 24px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ai-bubble-close {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    z-index: 2;
}

.ai-bubble-close:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.ai-bubble-close:active {
    transform: scale(0.9);
}

.ai-bubble-tail {
    position: absolute;
    bottom: -6px;
    inset-inline-end: 22px;
    width: 14px;
    height: 14px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(30, 27, 75, 0.72));
    border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ai-fab {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(139, 92, 246, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 16px rgba(99, 102, 241, 0.35),
        0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: box-shadow 0.25s ease, opacity 0.3s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.ai-fab:active {
    cursor: grabbing;
}

.ai-fab-glow {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(236, 72, 153, 0.15));
    filter: blur(6px);
    opacity: 0.5;
    z-index: -1;
    animation: ai-glow-pulse 3s ease-in-out infinite;
}

.ai-fab-icon {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    width: 24px;
    height: 24px;
}

.ai-fab:hover {
    box-shadow:
        0 6px 24px rgba(99, 102, 241, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.25);
}

.ai-fab-hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes ai-fab-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes ai-glow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.05); }
}

@keyframes ai-bubble-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-panel {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 5%;
    right: 5%;
    height: min(70vh, calc(100vh - 120px));
    max-height: min(70vh, calc(100vh - 120px));
    background: linear-gradient(165deg, #151C24, #11161D);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 12px 12px;
    display: flex;
    flex-direction: column;
    z-index: 1101;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.ai-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(90deg, rgba(255,138,0,0.08), rgba(255,138,0,0.04));
}
.ai-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s infinite; }
.ai-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dim);
    transition: background 0.2s, color 0.2s;
}
.ai-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}
.ai-limits { font-size: 10px; color: var(--text-sub); padding: 4px 16px; text-align: center; }
.ai-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; }
.ai-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(255, 138, 0, 0.2), rgba(255, 138, 0, 0.1));
    border: 1px solid rgba(255, 138, 0, 0.25);
    border-bottom-right-radius: 4px;
}
.ai-bubble-assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px;
    backdrop-filter: blur(8px);
}
.ai-msg-text { margin: 0; line-height: 1.5; }
.ai-bubble-img { max-width: 100%; border-radius: 8px; margin-bottom: 6px; max-height: 120px; object-fit: cover; }
.ai-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
}
.ai-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 12px; color: var(--text); font-size: 13px; resize: none; max-height: 80px; font-family: inherit; }
.ai-attach-btn, .ai-send-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim); flex-shrink: 0; }
.ai-send-btn { background: #FF8A00; border-color: #FF8A00; color: #000; box-shadow: 0 0 12px rgba(255,138,0,0.2); }

@media (max-width: 400px) {
    .ai-assistant-root {
        inset-inline-end: 8px;
        max-width: calc(100vw - 16px);
    }
    .ai-panel {
        left: 3%;
        right: 3%;
        height: min(65vh, calc(100vh - 100px));
    }
}

/* ============================================================================ */
/* R4: Admin Panel Styles */
/* ============================================================================ */

/* Admin Entry Button (inside profile card) */
/* Admin entry button — inside the profile card, directly BELOW the Telegram ID.
   In-flow flex child (no absolute). 42px height, 128px width, 12px from ID,
   20px from card bottom. Centered via parent's align-items:center. */
.admin-entry-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 12px 0 20px; padding: 0 18px; height: 42px;
    width: 128px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
    color: #020611;
    background: #F5A623;
    border: none;
    border-radius: 12px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.3);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}
.admin-entry-btn:hover { background: #E8941A; box-shadow: 0 6px 18px rgba(245, 166, 35, 0.4); }
.admin-entry-btn:active { background: #D4881A; transform: scale(0.96); box-shadow: 0 2px 8px rgba(245, 166, 35, 0.25); }
.admin-entry-btn svg { opacity: 0.8; }

/* Admin Panel Overlay */
.admin-panel {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000; display: flex;
}
.admin-panel-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: adminFadeIn 0.2s ease;
}
.admin-panel-container {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 480px;
    background: var(--bg-primary);
    display: flex; flex-direction: column;
    animation: adminSlideIn 0.3s ease;
    overflow: hidden;
}
@keyframes adminFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes adminSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Admin Header */
.admin-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border-bottom: 1px solid var(--border);
    background: var(--bg-secondary); flex-shrink: 0;
}
.admin-header h2 { font-size: 17px; font-weight: 700; }
.admin-back-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: none;
    color: var(--text); cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}

/* Admin Sidebar (horizontal scroll on mobile) */
.admin-sidebar {
    display: flex; overflow-x: auto; gap: 4px;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
    background: var(--bg-secondary); flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.admin-sidebar::-webkit-scrollbar { display: none; }
.admin-nav-item {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; border: none;
    background: transparent; color: var(--text-secondary);
    font-size: 12px; font-weight: 500; cursor: pointer;
    white-space: nowrap; transition: all 0.2s ease;
    flex-shrink: 0;
}
.admin-nav-item.active {
    background: rgba(255,138,0,0.15); color: var(--accent);
}
.admin-nav-item svg { flex-shrink: 0; }

/* Admin Content */
.admin-content {
    flex: 1; overflow-y: auto; padding: 16px;
    -webkit-overflow-scrolling: touch;
}
.admin-section { display: none; }
.admin-section.active { display: block; animation: adminFadeIn 0.2s ease; }
.admin-section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.admin-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.admin-subtitle { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 20px 0 12px; }

/* Admin Stats Grid */
.admin-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-stat-card {
    background: var(--bg-card); border-radius: 14px; padding: 14px;
    border: 1px solid var(--border);
}
.admin-stat-value { font-size: 22px; font-weight: 800; color: var(--accent); }
.admin-stat-label { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* Admin List Items */
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-list-item {
    background: var(--bg-card); border-radius: 12px; padding: 14px;
    border: 1px solid var(--border);
}
.admin-list-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.admin-list-item-title { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-list-item-meta { font-size: 12px; color: var(--text-sub); }

/* Admin Forms */
.admin-form-card {
    background: var(--bg-card); border-radius: 14px; padding: 16px;
    border: 1px solid var(--border); margin-bottom: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.admin-input {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px; color: var(--text);
    font-size: 14px; outline: none; transition: border-color 0.2s;
}
.admin-input:focus { border-color: var(--accent); }
.admin-input::placeholder { color: var(--text-sub); }
.admin-textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.admin-form-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Admin Buttons */
.admin-btn {
    padding: 10px 20px; border-radius: 10px; border: none;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.admin-btn:active { transform: scale(0.97); }
.admin-btn-accent { background: var(--accent); color: #fff; }
.admin-btn-accent:hover { background: var(--accent-hover); }
.admin-btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.admin-btn-red { background: rgba(255,77,77,0.15); color: var(--red); }
.admin-btn-green { background: rgba(0,200,150,0.15); color: var(--green); }
.admin-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* Admin Badges */
.admin-badge {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.admin-badge-green { background: rgba(0,200,150,0.15); color: var(--green); }
.admin-badge-red { background: rgba(255,77,77,0.15); color: var(--red); }
.admin-badge-orange { background: rgba(255,138,0,0.15); color: var(--accent); }
.admin-badge-blue { background: rgba(59,130,246,0.15); color: #60a5fa; }
.admin-badge-gray { background: rgba(255,255,255,0.06); color: var(--text-sub); }

/* Admin Filters */
.admin-filters { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.admin-filters::-webkit-scrollbar { display: none; }
.admin-filter-btn {
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary); font-size: 12px;
    font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.admin-filter-btn.active { background: rgba(255,138,0,0.15); color: var(--accent); border-color: rgba(255,138,0,0.3); }

.admin-filters-row { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-search-input { margin-bottom: 12px; }

/* Admin Permission Checks */
.admin-perm-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-perm-checks label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }

/* Admin Pagination */
.admin-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.admin-pagination button {
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text); font-size: 13px;
    cursor: pointer;
}
.admin-pagination button:disabled { opacity: 0.3; cursor: default; }

/* Admin Activity */
.admin-activity-list { display: flex; flex-direction: column; gap: 8px; }
.admin-activity-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--bg-card);
    border-radius: 10px; border: 1px solid var(--border);
    font-size: 13px;
}
.admin-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-activity-dot.orange { background: var(--accent); }
.admin-activity-dot.green { background: var(--green); }
.admin-activity-dot.red { background: var(--red); }
.admin-activity-dot.blue { background: #60a5fa; }
.admin-activity-time { margin-left: auto; font-size: 11px; color: var(--text-sub); white-space: nowrap; }

/* Admin Empty State */
.admin-empty { text-align: center; padding: 40px 20px; color: var(--text-sub); font-size: 14px; }

/* Admin Toast */
.admin-toast {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    padding: 10px 24px; border-radius: 10px; font-size: 13px; font-weight: 600;
    z-index: 10001; animation: adminToastIn 0.3s ease;
    pointer-events: none;
}
.admin-toast-success { background: var(--green); color: #fff; }
.admin-toast-error { background: var(--red); color: #fff; }
@keyframes adminToastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ════════════════════════════════════════════════════════════════════
   ADMIN PANEL REBUILD — Premium Dark Glassmorphism (Binance/Linear level)
   All new classes use .adm- prefix to avoid collision with legacy .admin-
   ════════════════════════════════════════════════════════════════════ */
/* #region Admin Panel Rebuild */

/* Container & backdrop — keep using .admin-panel/.admin-panel-backdrop for compat */
.admin-panel-container {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 480px;
    background: #0a0e1a;
    background: linear-gradient(180deg, #0b1020 0%, #0a0e1a 100%);
    display: flex; flex-direction: column;
    animation: adminSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    color: #e4e9f2;
    font-family: inherit;
}

/* ── Premium Header ── */
.adm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: rgba(15, 20, 35, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0; z-index: 10;
}
.adm-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-header-right { display: flex; align-items: center; gap: 8px; }
.adm-icon-btn {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    color: #c8d1e0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s ease;
}
.adm-icon-btn:hover { background: rgba(255,255,255,0.09); color: #fff; transform: translateY(-1px); }
.adm-icon-btn:active { transform: scale(0.94); }
.adm-back-btn {
    background: linear-gradient(135deg, rgba(247,147,26,0.18), rgba(247,147,26,0.06));
    border-color: rgba(247,147,26,0.25);
    color: #f7b950;
}
.adm-back-btn:hover { background: linear-gradient(135deg, rgba(247,147,26,0.28), rgba(247,147,26,0.12)); color: #ffc870; }
.adm-header-title { min-width: 0; }
.adm-header-brand {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 700; color: #fff;
    letter-spacing: 0.2px;
}
.adm-header-crown {
    color: #f7b950; font-size: 13px;
    text-shadow: 0 0 12px rgba(247,147,26,0.6);
}
.adm-header-sub {
    font-size: 11px; color: #7a8499; margin-top: 2px;
    font-weight: 500;
}

/* ── Sidebar ── */
.adm-sidebar {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 280px; max-width: 85vw;
    background: rgba(12, 17, 30, 0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-left: 1px solid rgba(255,255,255,0.07);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.adm-sidebar::-webkit-scrollbar { width: 5px; }
.adm-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.adm-sidebar.open { transform: translateX(0); box-shadow: -20px 0 60px rgba(0,0,0,0.5); }
.adm-sidebar-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 19;
}
.adm-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

.adm-sidebar-inner {
    padding: 20px 14px;
    padding-top: max(20px, env(safe-area-inset-top));
    display: flex; flex-direction: column; min-height: 100%;
}
.adm-sidebar-section { margin-bottom: 18px; }
.adm-sidebar-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: #5a6378;
    padding: 0 10px; margin-bottom: 6px;
}
.adm-nav-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 11px 12px;
    border-radius: 11px; border: none;
    background: transparent; color: #a8b2c5;
    font-size: 14px; font-weight: 500; cursor: pointer;
    transition: all 0.18s ease;
    text-align: right; position: relative;
}
.adm-nav-item svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.85; }
.adm-nav-item span:first-of-type { flex: 1; min-width: 0; }
.adm-nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: #e4e9f2;
}
.adm-nav-item.active {
    background: linear-gradient(135deg, rgba(247,147,26,0.16), rgba(247,147,26,0.05));
    color: #f7b950;
    box-shadow: inset 0 0 0 1px rgba(247,147,26,0.18);
}
.adm-nav-item.active svg { opacity: 1; color: #f7b950; }
.adm-nav-item.active::before {
    content: ''; position: absolute; right: -14px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 3px;
    background: linear-gradient(180deg, #f7b950, #f7931a);
    box-shadow: 0 0 10px rgba(247,147,26,0.6);
}
.adm-nav-badge {
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
    min-width: 18px; text-align: center;
    flex-shrink: 0;
}

.adm-sidebar-footer {
    margin-top: auto; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.adm-sidebar-user {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.03);
}
.adm-sidebar-avatar {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, #f7b950, #f7931a);
    color: #1a1200; font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(247,147,26,0.3);
}
.adm-sidebar-userinfo { min-width: 0; }
.adm-sidebar-username { font-size: 13px; font-weight: 600; color: #e4e9f2; }
.adm-sidebar-userrole { font-size: 11px; color: #7a8499; margin-top: 2px; }

/* ── Content Area ── */
.adm-content {
    flex: 1; overflow-y: auto;
    padding: 20px 16px 40px;
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.adm-content::-webkit-scrollbar { width: 5px; }
.adm-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.adm-section { display: none; }
.adm-section.active {
    display: block;
    animation: admFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes admFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.adm-section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 20px;
}
.adm-section-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0; }
.adm-section-desc { font-size: 12px; color: #7a8499; margin: 4px 0 0; font-weight: 500; }

/* ── Cards ── */
.adm-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 16px;
    margin-top: 14px;
}
.adm-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.adm-card-title { font-size: 14px; font-weight: 700; color: #e4e9f2; margin: 0; }

/* ── Stats Grid ── */
.adm-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.adm-stat-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 14px;
    transition: all 0.2s ease;
}
.adm-stat-card:hover { border-color: rgba(247,147,26,0.2); transform: translateY(-2px); }
.adm-stat-value { font-size: 24px; font-weight: 800; color: #f7b950; line-height: 1.1; }
.adm-stat-label { font-size: 11px; color: #7a8499; margin-top: 5px; font-weight: 500; }

.adm-stat-mini {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 12px; text-align: center;
}
.adm-stat-mini-value { font-size: 16px; font-weight: 800; color: #fff; }
.adm-stat-mini-label { font-size: 10px; color: #7a8499; margin-top: 4px; font-weight: 500; }

/* ── List Items ── */
.adm-list { display: flex; flex-direction: column; gap: 9px; }
.adm-list-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 13px; padding: 13px;
    transition: all 0.18s ease;
}
.adm-list-item:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); }
.adm-list-item-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px; gap: 8px;
}
.adm-list-item-title {
    font-size: 14px; font-weight: 600; color: #e4e9f2;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-list-item-meta { font-size: 12px; color: #7a8499; line-height: 1.5; }

/* ── Forms ── */
.adm-form-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; padding: 16px;
    margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 13px;
}
.adm-form-row { display: flex; gap: 10px; }
.adm-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adm-form-label {
    font-size: 12px; font-weight: 600; color: #a8b2c5;
    display: flex; align-items: center; justify-content: space-between;
}
.adm-input {
    width: 100%;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 11px; padding: 11px 14px;
    color: #e4e9f2; font-size: 14px; outline: none;
    transition: all 0.18s ease;
    font-family: inherit;
}
.adm-input:focus {
    border-color: rgba(247,147,26,0.5);
    background: rgba(0,0,0,0.35);
    box-shadow: 0 0 0 3px rgba(247,147,26,0.1);
}
.adm-input::placeholder { color: #5a6378; }
.adm-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.adm-form-actions { display: flex; gap: 8px; }

/* ── Search Bar ── */
.adm-search-bar {
    position: relative; margin-bottom: 14px;
}
.adm-search-icon {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    color: #5a6378; pointer-events: none;
}
.adm-search-input { padding-right: 42px; }

/* ── Buttons ── */
.adm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 20px; border-radius: 11px; border: none;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.18s ease; white-space: nowrap;
    font-family: inherit;
}
.adm-btn:active { transform: scale(0.97); }
.adm-btn-primary {
    background: linear-gradient(135deg, #f7b950 0%, #f7931a 100%);
    color: #1a1200;
    box-shadow: 0 4px 14px rgba(247,147,26,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.adm-btn-primary:hover { box-shadow: 0 6px 20px rgba(247,147,26,0.45), inset 0 1px 0 rgba(255,255,255,0.3); transform: translateY(-1px); }
.adm-btn-ghost {
    background: rgba(255,255,255,0.05);
    color: #a8b2c5;
    border: 1px solid rgba(255,255,255,0.08);
}
.adm-btn-ghost:hover { background: rgba(255,255,255,0.09); color: #fff; }
.adm-btn-block { width: 100%; }

/* ── Badges (reuse .admin-badge-* but adapt colors) ── */
.adm-badge {
    display: inline-block; padding: 3px 9px; border-radius: 7px;
    font-size: 11px; font-weight: 600; flex-shrink: 0;
}

/* ── Filters ── */
.adm-filters {
    display: flex; gap: 7px; margin-bottom: 14px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.adm-filters::-webkit-scrollbar { display: none; }
.adm-filter-btn {
    padding: 7px 15px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #a8b2c5; font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: all 0.18s ease;
}
.adm-filter-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.adm-filter-btn.active {
    background: rgba(247,147,26,0.16);
    color: #f7b950;
    border-color: rgba(247,147,26,0.3);
}
.adm-filters-row { display: flex; gap: 9px; margin-bottom: 14px; }

/* ── Permission Chips ── */
.adm-perm-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.adm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 13px; color: #a8b2c5; cursor: pointer;
    transition: all 0.15s ease;
}
.adm-chip:hover { background: rgba(255,255,255,0.07); }
.adm-chip input { accent-color: #f7931a; width: 14px; height: 14px; }

/* ── Maintenance Mode Card ── */
.adm-maintenance-card {
    background: linear-gradient(135deg, rgba(247,147,26,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(247,147,26,0.12);
}
.adm-maint-head {
    display: flex; align-items: center; gap: 13px;
}
.adm-maint-icon-wrap {
    width: 50px; height: 50px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(247,147,26,0.2), rgba(247,147,26,0.08));
    border: 1px solid rgba(247,147,26,0.2);
    color: #f7b950;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.adm-maint-info { flex: 1; min-width: 0; }
.adm-maint-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.adm-maint-desc { font-size: 12px; color: #7a8499; margin: 3px 0 0; line-height: 1.4; }
.adm-maint-body {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column; gap: 13px;
    animation: admFadeIn 0.3s ease;
}
.adm-maint-status {
    font-size: 12px; padding: 10px 12px; border-radius: 10px;
    display: none;
}
.adm-maint-status.success { display: block; background: rgba(0,200,150,0.12); color: #4ade80; border: 1px solid rgba(0,200,150,0.2); }
.adm-maint-status.error { display: block; background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* ── Toggle Switch ── */
.adm-switch {
    position: relative; display: inline-block;
    width: 50px; height: 28px; flex-shrink: 0;
    cursor: pointer;
}
.adm-switch input { opacity: 0; width: 0; height: 0; }
.adm-switch-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 28px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.adm-switch-slider::before {
    content: ''; position: absolute;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff;
    top: 3px; right: 3px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.adm-switch input:checked + .adm-switch-slider {
    background: linear-gradient(135deg, #f7b950, #f7931a);
    border-color: rgba(247,147,26,0.5);
    box-shadow: 0 0 14px rgba(247,147,26,0.35);
}
.adm-switch input:checked + .adm-switch-slider::before {
    transform: translateX(-22px);
}

/* ── Progress Slider ── */
.adm-progress-val {
    font-size: 13px; font-weight: 800; color: #f7b950;
    font-variant-numeric: tabular-nums;
}
.adm-progress-slider-wrap { position: relative; }
.adm-range {
    width: 100%; height: 6px; border-radius: 6px;
    background: rgba(255,255,255,0.08);
    appearance: none; -webkit-appearance: none;
    outline: none; cursor: pointer;
    margin-bottom: 8px;
}
.adm-range::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #f7b950, #f7931a);
    border: 2px solid #1a1200;
    box-shadow: 0 2px 10px rgba(247,147,26,0.4);
    cursor: pointer;
}
.adm-range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #f7b950, #f7931a);
    border: 2px solid #1a1200;
    cursor: pointer;
}
.adm-progress-bar-bg {
    width: 100%; height: 8px; border-radius: 8px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.adm-progress-bar-fill {
    height: 100%; border-radius: 8px;
    background: linear-gradient(90deg, #f7b950, #f7931a);
    box-shadow: 0 0 10px rgba(247,147,26,0.4);
    transition: width 0.3s ease;
}

/* ── Maintenance Status Banner (admin dashboard) ── */
.adm-maint-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px;
    margin-bottom: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.25s ease;
    position: relative; overflow: hidden;
}
.adm-maint-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,200,150,0.05), transparent 60%);
    opacity: 1; transition: opacity 0.3s;
}
.adm-maint-banner.is-active {
    background: linear-gradient(135deg, rgba(247,147,26,0.12), rgba(247,147,26,0.04));
    border-color: rgba(247,147,26,0.3);
    box-shadow: 0 4px 20px rgba(247,147,26,0.1);
}
.adm-maint-banner.is-active::before {
    background: linear-gradient(135deg, rgba(247,147,26,0.08), transparent 60%);
}
.adm-maint-banner:hover { transform: translateY(-1px); }
.adm-maint-banner-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(0,200,150,0.15);
    border: 1px solid rgba(0,200,150,0.3);
    color: #4ade80;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1;
    transition: all 0.3s ease;
}
.adm-maint-banner.is-active .adm-maint-banner-icon {
    background: rgba(247,147,26,0.2);
    border-color: rgba(247,147,26,0.4);
    color: #f7b950;
    animation: admMaintBannerPulse 2s ease-in-out infinite;
}
@keyframes admMaintBannerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247,147,26,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(247,147,26,0); }
}
.adm-maint-banner-content { flex: 1; min-width: 0; z-index: 1; }
.adm-maint-banner-title { font-size: 14px; font-weight: 700; color: #e4e9f2; }
.adm-maint-banner.is-active .adm-maint-banner-title { color: #f7b950; }
.adm-maint-banner-sub { font-size: 12px; color: #7a8499; margin-top: 2px; }
.adm-maint-banner-arrow { color: #5a6378; flex-shrink: 0; z-index: 1; }
.adm-maint-banner:hover .adm-maint-banner-arrow { color: #a8b2c5; transform: translateX(-3px); }

/* ── Quick Actions Row ── */
.adm-quick-actions {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-bottom: 16px;
}
.adm-quick-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px; border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    color: #a8b2c5; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    font-family: inherit;
}
.adm-quick-btn svg { color: #7a8499; transition: all 0.2s ease; }
.adm-quick-btn:hover {
    background: rgba(247,147,26,0.08);
    border-color: rgba(247,147,26,0.2);
    color: #f7b950;
    transform: translateY(-2px);
}
.adm-quick-btn:hover svg { color: #f7b950; }
.adm-quick-btn:active { transform: scale(0.96); }

/* ── Enhanced Stat Cards (with icon + color) ── */
.adm-stat-card-v2 {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 14px;
    transition: all 0.2s ease;
    display: flex; flex-direction: column; gap: 8px;
    position: relative; overflow: hidden;
}
.adm-stat-card-v2::before {
    content: ''; position: absolute; top: 0; right: 0;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--stat-glow, rgba(247,147,26,0.08));
    transform: translate(20px, -20px);
    transition: transform 0.3s ease;
}
.adm-stat-card-v2:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); }
.adm-stat-card-v2:hover::before { transform: translate(15px, -15px) scale(1.2); }
.adm-stat-card-v2-icon {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--stat-bg, rgba(247,147,26,0.12));
    color: var(--stat-color, #f7b950);
    position: relative; z-index: 1;
}
.adm-stat-card-v2-value {
    font-size: 24px; font-weight: 800; color: #fff;
    line-height: 1.1; position: relative; z-index: 1;
    font-variant-numeric: tabular-nums;
}
.adm-stat-card-v2-label {
    font-size: 11px; color: #7a8499; font-weight: 500;
    position: relative; z-index: 1;
}

/* ── Quick Presets Card (System Controls) ── */
.adm-presets-card { margin-top: 14px; }
.adm-presets-hint {
    font-size: 11px; color: #7a8499; font-weight: 500;
}
.adm-presets-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.adm-preset-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 12px; border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer; transition: all 0.2s ease;
    font-family: inherit; text-align: right;
}
.adm-preset-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}
.adm-preset-btn:active { transform: scale(0.97); }
.adm-preset-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.adm-preset-icon-blue { background: rgba(96,165,250,0.15); color: #60a5fa; }
.adm-preset-icon-orange { background: rgba(247,147,26,0.15); color: #f7b950; }
.adm-preset-icon-purple { background: rgba(167,139,250,0.15); color: #a78bfa; }
.adm-preset-icon-red { background: rgba(239,68,68,0.15); color: #f87171; }
.adm-preset-icon-green { background: rgba(0,200,150,0.15); color: #4ade80; }
.adm-preset-text { min-width: 0; flex: 1; }
.adm-preset-name { font-size: 13px; font-weight: 600; color: #e4e9f2; }
.adm-preset-desc { font-size: 11px; color: #7a8499; margin-top: 2px; }
.adm-preset-btn-end {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(0,200,150,0.08), rgba(0,200,150,0.02));
    border-color: rgba(0,200,150,0.2);
}
.adm-preset-btn-end:hover {
    background: linear-gradient(135deg, rgba(0,200,150,0.14), rgba(0,200,150,0.04));
    border-color: rgba(0,200,150,0.35);
}
.adm-preset-btn-end .adm-preset-name { color: #4ade80; }

/* ── Desktop: show sidebar inline, hide hamburger ── */
@media (min-width: 900px) {
    .admin-panel-container { max-width: 760px; }
    .adm-sidebar {
        position: relative; transform: translateX(0);
        width: 240px; border-left: 1px solid rgba(255,255,255,0.06);
        box-shadow: none;
    }
    .adm-sidebar-backdrop { display: none !important; }
    #adm-hamburger { display: none; }
    .admin-panel-container { flex-direction: row; }
    .adm-content { flex: 1; }
    .adm-header { display: none; }
    .adm-sidebar-inner { padding-top: 20px; }
    /* Re-add a compact top bar on desktop inside content */
    .adm-content::before {
        content: 'پنل مدیریت'; display: block;
        font-size: 18px; font-weight: 800; color: #fff;
        padding: 4px 0 14px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        margin-bottom: 16px;
    }
}

/* #endregion Admin Panel Rebuild */

/* ════════════════════════════════════════════════════════════════════
   MAINTENANCE MODE — Full-screen popup with animated repair robot
   ════════════════════════════════════════════════════════════════════ */
/* #region Maintenance Mode */

/* ============================================================================
   MAINTENANCE MODE — Premium Dark+Gold FinTech redesign
   Professional duotone gear+wrench icon, balanced layout, subtle animations.
   ============================================================================ */
.maint-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: radial-gradient(ellipse at center, #0d1326 0%, #050810 70%, #02050b 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    animation: maintFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@keyframes maintFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Floating particles background */
.maint-particles {
    position: absolute; inset: 0; pointer-events: none;
    overflow: hidden;
}
.maint-particle {
    position: absolute; border-radius: 50%;
    background: rgba(245, 166, 35, 0.35);
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.5);
    animation: maintFloatUp linear infinite;
}
@keyframes maintFloatUp {
    0% { transform: translateY(110vh) translateX(0) scale(0); opacity: 0; }
    10% { opacity: 1; transform: translateY(100vh) translateX(0) scale(1); }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) translateX(20px) scale(0.5); opacity: 0; }
}

.maint-content {
    position: relative; z-index: 2;
    max-width: 380px; width: 100%;
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(180deg, rgba(14, 22, 35, 0.85) 0%, rgba(11, 18, 32, 0.9) 100%);
    border: 1px solid rgba(245, 166, 35, 0.15);
    border-radius: 24px;
    padding: 40px 28px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 166, 35, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: maintCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes maintCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Premium duotone gear + wrench icon ── */
.maint-icon-scene {
    position: relative;
    width: 110px; height: 110px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
}
.maint-icon-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.22) 0%, transparent 65%);
    border-radius: 50%;
    animation: maintGlowPulse 3.5s ease-in-out infinite;
    z-index: 0;
}
.maint-icon-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 96px; height: 96px;
    border: 1.5px solid rgba(245, 166, 35, 0.2);
    border-radius: 50%;
    animation: maintRingPulse 3s ease-in-out infinite;
}
@keyframes maintRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.2; }
}
@keyframes maintGlowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.12); }
}
.maint-icon-gear {
    position: relative; z-index: 2;
    width: 72px; height: 72px;
    animation: maintGearSpin 8s linear infinite;
    filter: drop-shadow(0 0 12px rgba(245, 166, 35, 0.35));
}
@keyframes maintGearSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── Premium badge ── */
.maint-badge {
    font-size: 10px; font-weight: 800; color: #F5A623;
    letter-spacing: 2.5px; text-transform: uppercase;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.2);
    padding: 4px 14px; border-radius: 20px;
    margin-bottom: 16px;
}

/* ── Text Content ── */
.maint-title {
    font-size: 21px; font-weight: 800; color: #FFFFFF;
    margin: 0 0 12px;
    line-height: 1.35;
    letter-spacing: -0.3px;
}
.maint-desc {
    font-size: 13.5px; color: #8B96A8; line-height: 1.65;
    margin: 0 0 28px;
    max-width: 300px;
}

/* ── Progress Bar ── */
.maint-progress-wrap {
    width: 100%; max-width: 300px; margin-bottom: 24px;
}
.maint-progress-label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.maint-progress-text { font-size: 11px; color: #6B7A8D; font-weight: 600; letter-spacing: 0.3px; }
.maint-progress-percent { font-size: 17px; font-weight: 800; color: #F5A623; font-variant-numeric: tabular-nums; }
.maint-progress-track {
    width: 100%; height: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px; overflow: hidden;
    position: relative;
}
.maint-progress-fill {
    height: 100%; border-radius: 10px;
    background: linear-gradient(90deg, #F5A623, #FFCC4D);
    box-shadow: 0 0 14px rgba(245, 166, 35, 0.5);
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.maint-progress-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: maintProgressShine 2.5s linear infinite;
}
@keyframes maintProgressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Admin bypass button ── */
.maint-admin-bypass {
    display: none;
    align-items: center; justify-content: center; gap: 8px;
    margin-top: 4px;
    padding: 12px 24px;
    height: 44px;
    background: linear-gradient(135deg, #F5A623, #FFCC4D);
    border: none;
    border-radius: 12px;
    color: #020611;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.3);
}
.maint-admin-bypass:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.45);
    filter: brightness(1.05);
}
.maint-admin-bypass:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3);
}

/* #endregion Maintenance Mode */

/* #endregion */

/* ============================================================
   Analysis Module — Premium Dark Styles
   ============================================================ */

/* #region 1. Analysis Page Layout */

/* Pull to refresh indicator */
.ptr-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 0;
    overflow: hidden;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    transition: height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    opacity: 0;
}

.ptr-indicator.active {
    height: 60px;
    opacity: 1;
}

.ptr-indicator.refreshing {
    height: 60px;
    opacity: 1;
}

.ptr-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ptr-indicator.active .ptr-icon {
    transform: rotate(180deg);
}

.ptr-indicator.refreshing .ptr-icon {
    animation: ptr-spin 0.8s linear infinite;
    transform: none;
}

.ptr-spinner {
    animation: ptr-spin 0.8s linear infinite;
}

.ptr-indicator:not(.refreshing) .ptr-spinner {
    animation: none;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

.ptr-text {
    color: var(--text-sub);
    font-size: 11px;
}

.analysis-page-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px 6px;
}

/* ── Tabs Row: category tabs + search ── */
.analysis-tabs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 10px;
    position: sticky;
    top: 56px;
    z-index: 5;
    background: var(--bg-primary);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.at-tabs {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Search wrap (compact, in tabs row) ── */
.at-search-wrap {
    position: relative;
    flex: 1;
    max-width: 200px;
    display: flex;
    align-items: center;
    margin-right: 0;
    margin-left: auto;
}

.at-search-icon {
    position: absolute;
    right: 10px;
    color: var(--text-dim);
    pointer-events: none;
    z-index: 1;
}

.at-search-input {
    width: 100%;
    height: 44px;
    padding: 0 34px 0 14px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-appearance: none;
}

.at-search-input::placeholder {
    color: var(--text-dim);
    transition: color 0.2s ease;
}

.at-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12), 0 2px 8px rgba(255, 138, 0, 0.08), 0 0 20px rgba(255, 138, 0, 0.04);
    background: rgba(255, 138, 0, 0.03);
}

.at-search-input:focus::placeholder {
    color: var(--text-sub);
}

.at-search-wrap:focus-within .at-search-icon {
    color: var(--text-sub);
}

.at-search-clear {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}

.at-search-clear:active {
    background: var(--border);
}

/* ── Timeframe/Category Filter Chips ── */
.analysis-tf-chips {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.analysis-tf-chips::-webkit-scrollbar {
    display: none;
}

.tf-chip {
    flex-shrink: 0;
    height: 32px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.tf-chip:active {
    transform: scale(0.95);
}

.tf-chip.active {
    background: linear-gradient(135deg, var(--accent), #ff7a00);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(255, 138, 0, 0.4), 0 0 0 1px rgba(255, 138, 0, 0.2);
}

/* Bottom indicator line for active chip */
.tf-chip.active::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255,255,255,0.7);
    z-index: 1;
}

/* Glow effect for active tab */
.tf-chip.active::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(255, 138, 0, 0.3), transparent 70%);
    z-index: -1;
    animation: chip-glow 2s ease-in-out infinite;
}

@keyframes chip-glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ── Skeleton Loading ── */
.analysis-skeleton-container {
    padding: 0 16px;
}

.skel-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 18px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    overflow: hidden;
}

.skel-img {
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, rgba(255,255,255,0.06) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.6s ease-in-out infinite;
}

.skel-body {
    flex: 1;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, rgba(255,255,255,0.06) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.6s ease-in-out infinite;
}

.skel-line.short { width: 35%; height: 14px; }
.skel-line.medium { width: 75%; }
.skel-line.long { width: 92%; }
.skel-line.xshort { width: 25%; height: 10px; }

@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.analysis-list-container {
    padding: 0 16px 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,138,0,0.3) transparent;
}

.analysis-list-container::-webkit-scrollbar {
    width: 4px;
}

.analysis-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.analysis-list-container::-webkit-scrollbar-thumb {
    background: rgba(255,138,0,0.3);
    border-radius: 4px;
}

.analysis-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255,138,0,0.45);
}

.analysis-load-trigger {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

/* ── Analysis Floating Action Button ──
   Outside .page so no ancestor `transform` can hijack position:fixed.
   Sized 48px (≈17% smaller than original 58px) — still above the 44px
   touch-target minimum. z-index 1001 stays above bottom-nav (1000). */
.analysis-fab {
    position: fixed;
    bottom: 88px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(255, 138, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    cursor: pointer;
    border: none;
    padding: 0;
    /* Only transition active-press feedback — NO position/transform transitions
       so the button never animates from a wrong spot. */
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    /* Prevent any inherited transform from creating a containing block. */
    will-change: transform;
    contain: layout style;
}

.analysis-fab:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px rgba(255, 138, 0, 0.28);
}

/* ── Analysis Empty State — professional, Binance/TradingView-grade ── */
.analysis-empty-state {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Stay within analysis-page content area — 28px below tab bar */
    min-height: 280px;
    margin-top: 28px;
    padding: 20px 16px 24px;
    z-index: 5;
    pointer-events: none;
}

.analysis-empty-state .aes-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 24px 20px 22px;
    border-radius: 18px;
    background: linear-gradient(168deg, rgba(255, 255, 255, 0.04), rgba(255, 138, 0, 0.015), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 138, 0, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    pointer-events: auto;
}

.analysis-empty-state .aes-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 110px;
    background: radial-gradient(ellipse at center, rgba(255, 138, 0, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.analysis-empty-state .aes-icon {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 138, 0, 0.2), rgba(255, 138, 0, 0.05));
    border: 1.5px solid rgba(255, 138, 0, 0.3);
    color: var(--accent);
    box-shadow: 0 0 24px rgba(255, 138, 0, 0.1);
}

.analysis-empty-state .aes-brand {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--text-dim);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.analysis-empty-state .aes-brand span {
    color: var(--accent);
}

.analysis-empty-state .aes-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.4;
}

.analysis-empty-state .aes-desc {
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.5;
    margin: 0;
}

.analysis-empty-state .aes-shimmer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.4;
}

/* ── Filtered "No Results" state (when search/filter returns nothing) ── */
.analysis-no-results {
    text-align: center;
    padding: 48px 20px 32px;
    color: var(--text-dim);
}

.analysis-no-results .anr-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
}

.analysis-no-results .anr-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 6px;
}

.analysis-no-results .anr-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 16px;
}

.analysis-no-results .anr-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: 17px;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.analysis-no-results .anr-reset-btn:active {
    transform: scale(0.95);
}

/* #endregion */

/* #region 2. Featured Slider */

.featured-slider-section {
    margin: 0 16px 12px;
    position: relative;
}

/* Subtle divider between featured slider and stats bar */
#analysis-featured-section + #analysis-stats-bar {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.featured-slides-container {
    overflow: hidden;
    border-radius: 20px;
}

/* Premium shimmer animation for featured card border */
@keyframes premiumGlow {
    0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 15px rgba(255, 193, 7, 0.15), inset 0 1px 0 rgba(255,215,0,0.15); }
    50% { box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 25px rgba(255, 193, 7, 0.25), inset 0 1px 0 rgba(255,215,0,0.25); }
}

@keyframes premiumShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes goldenBorderRotate {
    0% { --golden-angle: 0deg; }
    100% { --golden-angle: 360deg; }
}

.featured-slide {
    display: none;
    cursor: pointer;
}
.featured-slide.active {
    display: block;
    animation: featuredSlideIn 0.5s ease;
}

@keyframes featuredSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.featured-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 4px;
}

.featured-slider-dots .fs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    opacity: 0.4;
    transition: all 0.3s ease;
    cursor: pointer;
}

.featured-slider-dots .fs-dot.active {
    background: var(--accent);
    opacity: 1;
    width: 18px;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(255, 138, 0, 0.4);
}

/* Individual featured slide card — PREMIUM GOLDEN look */
.fs-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, #1a160e 0%, rgba(255, 193, 7, 0.08) 50%, #0d0b08 100%);
    border-radius: 16px;
    cursor: pointer;
    border: 1.5px solid rgba(255, 193, 7, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
    animation: premiumGlow 4s ease-in-out infinite;
}

/* Inner gradient border via pseudo-element for more premium look */
.fs-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255,215,0,0.3), transparent 40%, rgba(255,193,7,0.15) 80%, rgba(255,215,0,0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

.fs-card:active {
    transform: scale(0.985);
    border-color: rgba(255, 193, 7, 0.6);
}

.fs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,193,7,0.06), transparent);
    animation: premiumShimmer 5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.fs-card-image-wrap {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: var(--bg-primary);
}

.fs-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fs-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.92) 100%);
}

.fs-card-image-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-card-no-image {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 138, 0, 0.08), rgba(255, 138, 0, 0.02));
    border-radius: 14px 14px 0 0;
}

.fs-card-no-image-text {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(255, 138, 0, 0.2);
    letter-spacing: 2px;
}

.fs-coin-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-coin-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.3), rgba(255, 152, 0, 0.1));
    border: 1.5px solid rgba(255, 193, 7, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.4);
    flex-shrink: 0;
}

.fs-coin-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-coin-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.fs-tf-badge {
    font-size: 10px;
    background: rgba(255, 193, 7, 0.25);
    color: #fbbf24;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    width: fit-content;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,193,7,0.2);
}

.fs-sentiment-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.2px;
}

.fs-sentiment-badge.bullish {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
    box-shadow: 0 1px 6px rgba(34, 197, 94, 0.15);
}

.fs-sentiment-badge.bearish {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    box-shadow: 0 1px 6px rgba(239, 68, 68, 0.15);
}

.fs-sentiment-badge.neutral {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.fs-sentiment-badge.decision {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 1px 6px rgba(168, 85, 247, 0.15);
}

.fs-featured-badge {
    position: absolute;
    top: 8px;
    left: auto;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 152, 0, 0.15));
    color: #fbbf24;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 193, 7, 0.35);
    z-index: 3;
    text-shadow: 0 0 6px rgba(255,193,7,0.3);
}

.fs-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.fs-card-content {
    padding: 8px 12px 10px;
    position: relative;
}

.fs-card-snippet {
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: var(--text-dim);
}

.fs-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.fs-meta-item svg {
    opacity: 0.6;
    flex-shrink: 0;
}

.fs-card-cta {
    margin-right: 0;
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.85;
    background: rgba(255, 138, 0, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 138, 0, 0.15);
}

/* Price Boxes (shared across featured slides and detail page) */
.fs-price-boxes {
    display: flex;
    gap: 8px;
}

.price-box {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
}

.price-box-label {
    display: block;
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.price-box-value {
    display: block;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.price-box-resistance {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
}
.price-box-resistance .price-box-value { color: #ef4444; }

.price-box-current {
    background: rgba(255, 138, 0, 0.06);
    border-color: rgba(255, 138, 0, 0.15);
}
.price-box-current .price-box-value { color: #f7931a; }

.price-box-support {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.15);
}
.price-box-support .price-box-value { color: #22c55e; }

/* Price boxes inside featured slide (slightly more padding) */
.fs-price-boxes {
    margin-bottom: 10px;
}

/* #endregion */

/* #region 3. Stats Bar — Minimal */

.stats-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255,138,0,0.03) 50%, var(--bg-card) 100%);
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    margin: 0 16px 10px;
}

.stat-item {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 4px;
}

.stat-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-item.active .stat-icon {
    background: rgba(255, 138, 0, 0.12);
    color: var(--accent);
}

.stat-item.today .stat-icon {
    background: rgba(34, 197, 94, 0.12);
    color: var(--green);
}

.stat-item.total .stat-icon {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
}

.stat-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.stat-item.active .stat-value { color: var(--accent); text-shadow: 0 0 12px rgba(255,138,0,0.25); }
.stat-item.today .stat-value { color: var(--green); text-shadow: 0 0 12px rgba(34,197,94,0.25); }
.stat-item.total .stat-value { color: #818cf8; text-shadow: 0 0 12px rgba(129,140,248,0.25); }

.stat-label {
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
}

.stat-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
}

/* #endregion */

/* #region 4. Analysis Card V2 */

@keyframes analysisFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.analysis-card-v2 {
    display: flex;
    flex-direction: column;
    background: linear-gradient(168deg, #171d27 0%, rgba(255, 138, 0, 0.035) 40%, rgba(255, 100, 50, 0.015) 100%);
    border-radius: 18px;
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: analysisFadeIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Gradient border via pseudo-element */
.analysis-card-v2::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(168deg, rgba(255,255,255,0.08), rgba(255,138,0,0.04), rgba(255,255,255,0.03));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    transition: background 0.25s ease;
}

.analysis-card-v2 > * {
    position: relative;
    z-index: 1;
}

.analysis-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent), rgba(255,138,0,0.1));
    opacity: 0;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
    border-radius: 0 2px 2px 0;
}

.analysis-card-v2:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 138, 0, 0.1);
    transform: translateY(-1px);
}

.analysis-card-v2:hover::after {
    background: linear-gradient(168deg, rgba(255,138,0,0.15), rgba(255,100,50,0.08), rgba(255,255,255,0.05));
}

.analysis-card-v2:hover::before {
    opacity: 1;
    box-shadow: 2px 0 12px rgba(255, 138, 0, 0.2);
}

.analysis-card-v2:active {
    transform: scale(0.985);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Stagger children animation */
.analysis-card-v2:nth-child(1) { animation-delay: 0s; }
.analysis-card-v2:nth-child(2) { animation-delay: 0.04s; }
.analysis-card-v2:nth-child(3) { animation-delay: 0.08s; }
.analysis-card-v2:nth-child(4) { animation-delay: 0.12s; }
.analysis-card-v2:nth-child(5) { animation-delay: 0.16s; }
.analysis-card-v2:nth-child(n+6) { animation-delay: 0.2s; }

/* Image section - TOP of card */
.acv-image-section {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--bg-primary);
    box-shadow: inset 0 -20px 30px -10px rgba(0,0,0,0.3);
}

.acv-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.acv-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 12px;
}

.acv-coin-badge {
    align-self: flex-start;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.acv-tf-badge {
    position: absolute;
    top: 10px;
    left: 12px;
    background: rgba(255, 138, 0, 0.85);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.acv-featured-star {
    position: absolute;
    top: 10px;
    left: auto;
    right: 56px;
    font-size: 14px;
}

/* When no image, show a placeholder */
.acv-no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 138, 0, 0.15), rgba(255, 138, 0, 0.03));
    font-size: 28px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 1px;
}

/* Content section */
.acv-content-section {
    padding: 14px 16px 10px;
}

.acv-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.acv-coin-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
}

.acv-timeframe {
    font-size: 10px;
    background: rgba(255, 138, 0, 0.15);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
}

.acv-sentiment {
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 7px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.2px;
}

.acv-sentiment-bullish {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
    box-shadow: 0 0 8px rgba(34,197,94,0.12);
}

.acv-sentiment-bearish {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    box-shadow: 0 0 8px rgba(239,68,68,0.12);
}

.acv-sentiment-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.acv-sentiment-decision {
    background: rgba(168, 85, 247, 0.18);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 8px rgba(168,85,247,0.12);
}

.acv-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    margin: 2px 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-orient: vertical;
    overflow: hidden;
}

.acv-card-snippet {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Price boxes removed from cards — only in hero slider + detail page */

/* Footer */
.acv-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
    gap: 8px;
}

.acv-meta-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.acv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: #64748b;
    white-space: nowrap;
}

.acv-meta-item svg {
    opacity: 0.7;
    flex-shrink: 0;
}

.acv-action-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Icon-only action buttons (bookmark, edit, delete, share) */
.acv-bookmark-btn,
.acv-edit-btn,
.acv-delete-btn,
.acv-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.acv-bookmark-btn:hover,
.acv-edit-btn:hover,
.acv-share-btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

.acv-bookmark-btn:active,
.acv-edit-btn:active,
.acv-share-btn:active {
    background: rgba(255, 255, 255, 0.07);
    transform: scale(0.92);
}

.acv-bookmark-btn.saved {
    color: var(--accent);
    border-color: rgba(255, 138, 0, 0.3);
    background: rgba(255, 138, 0, 0.08);
}

.acv-delete-btn {
    color: var(--red);
    border-color: rgba(239, 68, 68, 0.3);
}

.acv-delete-btn:active {
    background: rgba(239, 68, 68, 0.1);
    transform: scale(0.92);
}

.acv-share-btn:active {
    background: rgba(255, 138, 0, 0.1);
}

/* Bookmarked card accent */
.analysis-card-v2.acv-bookmarked {
    border-color: rgba(255, 138, 0, 0.25);
}

.analysis-card-v2.acv-bookmarked::before {
    opacity: 0.5;
}

/* #endregion */

/* #region 5. Analysis Detail Page (adp-*) */

/* Reading progress bar — fixed at very top of viewport */
.adp-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #ff7a00);
    z-index: 100;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(255, 138, 0, 0.5);
}

.adp-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(11, 15, 20, 0.82);
    z-index: 10;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
}

.adp-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
    color: var(--text);
}

.adp-back-btn:active {
    background: var(--bg-card-hover, #1A2330);
}

.adp-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.adp-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Coin avatar badge — gradient circle with coin symbol */
.adp-coin-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(255, 138, 0, 0.2), rgba(255, 138, 0, 0.05));
    border: 1.5px solid rgba(255, 138, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(255, 138, 0, 0.4);
    overflow: hidden;
}

.adp-coin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.adp-coin-badge {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}

.adp-tf-badge {
    font-size: 11px;
    background: rgba(255, 138, 0, 0.15);
    color: var(--accent);
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.adp-views-badge {
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
}

.adp-admin-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.adp-admin-btns button {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-sub);
    transition: background 0.2s ease;
}

.adp-admin-btns button:active {
    background: var(--bg-card-hover, #1A2330);
}

.adp-body {
    padding: 16px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
}

.adp-image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #0a0a0a;
}

.adp-image {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    object-fit: contain;
    background: #0a0a0a;
    display: block;
}

.adp-image-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
}

.adp-image-zoom-hint:active {
    background: rgba(0, 0, 0, 0.8);
}

.adp-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.4;
}

.adp-levels {
    display: flex;
    gap: 6px;
    margin-top: 20px;
    margin-bottom: 16px;
}

/* ── Price Range Visualizer — REMOVED ── */
.adp-price-range {
    margin: 0 16px 16px;
    padding: 14px 16px 10px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.adp-pr-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.adp-pr-support {
    color: var(--green);
}

.adp-pr-resistance {
    color: var(--red);
}

.adp-pr-bar {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
}

.adp-pr-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(255, 138, 0, 0.2), rgba(239, 68, 68, 0.2));
}

.adp-pr-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(90deg, var(--green), var(--accent));
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.adp-pr-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.adp-pr-marker-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.adp-pr-marker-label {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 138, 0, 0.3);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.adp-level {
    flex: 1;
    padding: 6px 6px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid transparent;
}

.adp-resistance {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.04) 100%);
    border-color: rgba(239, 68, 68, 0.12);
}

.adp-current {
    background: linear-gradient(135deg, rgba(255, 138, 0, 0.12) 0%, rgba(255, 138, 0, 0.04) 100%);
    border-color: rgba(255, 138, 0, 0.12);
}

.adp-support {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.04) 100%);
    border-color: rgba(34, 197, 94, 0.12);
}

.adp-level-label {
    display: block;
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 1px;
    font-weight: 600;
}

.adp-level-value {
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.adp-resistance .adp-level-value {
    color: var(--red);
}

.adp-current .adp-level-value {
    color: var(--accent);
}

.adp-support .adp-level-value {
    color: var(--green);
}

.adp-content {
    /* Reading card — professional financial-app panel for long-form analysis.
       Elevated surface, subtle border, comfortable padding, accent edge. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.014) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 18px 18px 20px;
    margin-bottom: 18px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Accent edge — thin gradient strip on the inline-start side (right in RTL). */
.adp-content::after {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 20px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(255, 138, 0, 0.15) 100%);
    opacity: 0.65;
    pointer-events: none;
}

/* Section label — "متن تحلیل" header inside the card for visual hierarchy. */
.adp-content::before {
    content: 'متن تحلیل';
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.3px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    padding-inline-start: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0.92;
}

/* Paragraph — comfortable Persian/RTL long-form reading typography. */
.adp-content-p {
    font-size: 15px;
    color: #D7DDE4;
    line-height: 1.95;
    letter-spacing: 0.1px;
    margin: 0 0 14px 0;
    padding-inline-start: 4px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.adp-content-p:last-child {
    margin-bottom: 0;
}

/* Empty state — single centered dash when the analysis body is blank. */
.adp-content-p.adp-content-empty {
    color: var(--text-sub);
    text-align: center;
    font-size: 14px;
    margin: 0;
    padding: 8px 0;
}

.adp-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.adp-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-dim);
    flex-shrink: 0;
}

.adp-footer {
    padding: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Icon action buttons (bookmark, copy) */
.adp-action-btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.adp-action-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.05);
}

.adp-bookmark-btn.saved {
    color: var(--accent);
    border-color: rgba(255, 138, 0, 0.3);
    background: rgba(255, 138, 0, 0.08);
}

.adp-share-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.adp-share-btn:active {
    background: var(--accent-hover, #FFA726);
    transform: scale(0.98);
}

/* Sentiment badge on detail page title */
.adp-sentiment {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    margin-right: 8px;
    letter-spacing: 0.2px;
}

.adp-sentiment-bullish {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 10px rgba(34,197,94,0.15);
}

.adp-sentiment-bearish {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 10px rgba(239,68,68,0.15);
}

.adp-sentiment-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.adp-sentiment-decision {
    background: rgba(168, 85, 247, 0.18);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 10px rgba(168,85,247,0.15);
}

/* ── Related Analyses section ── */
.adp-related {
    padding: 0 16px 8px;
    margin-top: 8px;
}

.adp-related-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.adp-related-header svg {
    color: var(--accent);
}

.adp-related-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adp-related-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.adp-related-item:active {
    transform: scale(0.98);
    border-color: rgba(255, 138, 0, 0.3);
}

.adp-related-coin {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 138, 0, 0.18), rgba(255, 138, 0, 0.04));
    border: 1px solid rgba(255, 138, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    flex-shrink: 0;
}

.adp-related-info {
    flex: 1;
    min-width: 0;
}

.adp-related-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.adp-related-meta {
    font-size: 10px;
    color: var(--text-dim);
    display: flex;
    gap: 8px;
}

.adp-related-arrow {
    color: var(--text-dim);
    flex-shrink: 0;
}

/* #endregion */

/* #region 6. Image Viewer Overlay (iv-*) */

.iv-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.iv-header {
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.iv-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    transition: background 0.2s ease;
}

.iv-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.iv-viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.iv-viewport img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
    transform-origin: center;
    pointer-events: none;
}

.iv-controls {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}

.iv-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    transition: background 0.2s ease;
}

.iv-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

/* #endregion */

/* #region 7. Admin Form Modal */

.analysis-form-modal {
    max-width: 480px;
    max-height: 90vh;
}

.analysis-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 65vh;
    overflow-y: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}

.analysis-form-fields::-webkit-scrollbar {
    width: 4px;
}

.analysis-form-fields::-webkit-scrollbar-track {
    background: transparent;
}

.analysis-form-fields::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.af-row {
    display: flex;
    gap: 10px;
}

.analysis-form-fields .af-row + .af-row {
    margin-top: 0;
}

.af-row-3col {
    flex-wrap: nowrap;
}

.af-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.af-field-half {
    max-width: 50%;
}

.af-field-third {
    max-width: 33.33%;
}

.af-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-sub);
    padding-right: 2px;
}

.af-field-checkbox {
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

.af-char-counter {
    text-align: left;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s;
}

.af-char-counter.warn {
    color: #f59e0b;
}

.af-char-counter.danger {
    color: #ef4444;
}

.af-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.af-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* Responsive: stack 3-col rows on small screens */
@media (max-width: 400px) {
    .af-row-3col {
        flex-wrap: wrap;
    }
    .af-row-3col .af-field-third {
        max-width: 100%;
        flex-basis: 100%;
    }
    .acv-image-section {
        height: 140px;
    }
    .adp-levels {
        flex-direction: column;
        gap: 6px;
    }
}

/* #endregion */

/* ============================================================================
   DASHBOARD POLISH (Task: DASHBOARD-UI-POLISH)
   Premium dark crypto UI — image hero, F&G + Trend, watchlist with sparkline,
   market analysis cards (regular + VIP), breaking news, structured calendar.
   Palette: bg #020611, cards #0B1220, primary #F5A623, success #22C55E, danger #EF4444
   Spacing: 16px screen padding, 24px between sections, 16px card padding, 12px internal gap
   ========================================================================== */

/* ---- Dashboard root container: aligns sections with proper RTL spacing ---- */
#dashboard-page {
    padding: 12px 16px 24px;
    overflow-x: hidden;
}
#dashboard-page .section-header {
    padding: 20px 0 14px; /* 14px gap from header to cards below */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
/* First section-header after ticker: tighter top padding for balanced rhythm */
#dashboard-page .market-ticker + .section-header {
    padding-top: 14px; /* 14px gap from ticker to section title (overrides 20px) */
}
#dashboard-page .section-title {
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#dashboard-page .section-icon {
    color: #F5A623;
    stroke: #F5A623;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
#dashboard-page .section-more {
    font-size: 12px;
    color: #A5B4C7;
    cursor: pointer;
    transition: color 0.2s;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}
#dashboard-page .section-more:active { color: #F5A623; }

.dashboard-bottom-spacer { height: 24px; }

/* ============================================================================
   1. HERO SLIDER — image-based banner slides, aspect-ratio for CLS=0
   ========================================================================== */
.hero-banner-slider {
    margin: 0 0 22px; /* 22px gap to ticker (was 8px → 14px → 22px) */
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 1px solid rgba(245, 166, 35, 0.12);
    background: #0B1220;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 16px 10px; /* moved CTA up: 6px → 10px from bottom */
    box-sizing: border-box;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.hero-slide-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 17, 0) 55%, rgba(2, 6, 17, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Banner 2 (Bitunix): stronger bottom-right shade so the CTA in the bottom-right
   safe area has guaranteed contrast over the gift-box coins. */
.hero-slide-shade--right {
    background:
        linear-gradient(180deg, rgba(2, 6, 17, 0) 50%, rgba(2, 6, 17, 0.7) 100%),
        linear-gradient(270deg, rgba(2, 6, 17, 0.6) 0%, rgba(2, 6, 17, 0) 45%);
}
/* Premium CTA — flex child of .hero-slide (NO absolute positioning).
   Positioned via the parent's flex layout + per-banner align-self/margin.
   Safe areas verified via VLM image-composition analysis. */
.hero-cta {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #F5A623, #FFCC4D);
    border: none;
    color: #020611;
    font-weight: 700;
    padding: 0 8px; /* tighter horizontal padding */
    height: 34px; /* refined: 36px → 34px */
    width: auto;
    min-width: 105px;
    border-radius: 9px; /* refined: 10px → 9px */
    cursor: pointer;
    font-size: 11px; /* refined: 12px → 11px */
    line-height: 1;
    pointer-events: auto;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.28);
    white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-cta:active {
    transform: scale(0.95);
    box-shadow: 0 3px 10px rgba(245, 166, 35, 0.3);
    filter: brightness(0.95);
}
/* Banner 1 (AMIRBTC channel): position UNCHANGED (bottom-left safe zone).
   Only size reduced: 130→122px width, 44→40px height, padding tuned to 14px. */
.hero-cta--channel {
    margin-right: auto;
    margin-left: 4%;
    margin-bottom: 3px; /* move 3px higher than bitunix */
}
.hero-cta--bitunix {
    margin-left: auto;
    margin-right: -10px;
    margin-top: 3px; /* move 3px lower than channel */
}
.hero-slider-dots {
    position: absolute;
    top: 12px;
    right: 14px; /* moved to TOP-right so they NEVER collide with bottom CTAs
                    (channel CTA = bottom-center, Bitunix CTA = bottom-right) */
    display: flex;
    gap: 6px;
    z-index: 3;
}
.hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.3s;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hero-dot.active {
    background: #F5A623;
    width: 18px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.5);
}

/* ============================================================================
   1b. MARKET TICKER — Pro exchange-style horizontal price strip
   Single horizontal row, infinite loop, GPU-friendly transform: translateX.
   Each item: logo + symbol + price + 24h change% with colored arrow.
   ========================================================================== */
.market-ticker {
    overflow: hidden;
    margin: 0 0 0; /* gap handled by section-header padding-top */
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(13, 20, 35, 0.85), rgba(9, 14, 26, 0.78));
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 46px;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    /* ROOT-CAUSE FIX (Task 38 follow-up): Force LTR on the ticker container.
       When the page is RTL (Persian), `direction: rtl` on a flex container
       makes the wide track (width: max-content) start from the RIGHT edge of
       the parent and overflow to the LEFT — giving the track a negative
       offsetLeft of ~-7596px. Combined with `animation-direction: reverse`
       (which starts the animation at translateX(-50%) = -3976px), the track
       ends up at x = -7596 + (-3976) = -11572px — completely outside the
       viewport, so NO items are visible even though the DOM has 40 nodes.
       Forcing `direction: ltr` here keeps the track anchored to the LEFT edge
       of the parent (offsetLeft = 0), so the animation works correctly in
       both LTR and RTL pages. The RTL `animation-direction: reverse` below
       still makes the ticker scroll right-to-left for Persian readers. */
    direction: ltr;
}

/* Edge fade mask — premium ticker feel (icons fade softly at the edges) */
.market-ticker::before,
.market-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 2;
    pointer-events: none;
}
.market-ticker::before {
    left: 0;
    background: linear-gradient(90deg, rgba(13, 20, 35, 0.95), rgba(13, 20, 35, 0));
}
.market-ticker::after {
    right: 0;
    background: linear-gradient(270deg, rgba(13, 20, 35, 0.95), rgba(13, 20, 35, 0));
}

.market-ticker-mask {
    overflow: hidden;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    /* Clip the track so the duplicated content scrolls out cleanly */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.market-ticker-track {
    display: flex;
    align-items: center;
    /* CSS animation on `transform` only — GPU friendly, 60fps on mobile */
    animation: ticker-scroll 48s linear infinite;
    white-space: nowrap;
    width: max-content;
    padding: 0 14px;
    will-change: transform;
    /* Hardware acceleration hint — promotes to its own compositor layer */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.market-ticker:hover .market-ticker-track {
    animation-play-state: paused;
}

/* Each ticker item — single horizontal flex row.
   Logo + symbol + price + change% with arrow. */
.market-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: 30px;
    flex-shrink: 0;
    /* Subtle separator between items (kept inside padding so spacing is consistent) */
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    font-variant-numeric: tabular-nums;
}
.market-ticker-item:last-child {
    border-right: none;
}

.market-ticker-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    /* Subtle ring around the icon for premium feel */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.market-ticker-symbol {
    color: #E8EDF2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.market-ticker-price {
    color: #B8C3D2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.1px;
    /* Allow natural line break of thousands separators on very narrow phones */
    min-width: 0;
}

.market-ticker-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
}
.market-ticker-change svg {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}
/* Up (positive): green */
.market-ticker-change.up {
    color: #16C784;
    background: rgba(22, 199, 132, 0.10);
}
/* Down (negative): red */
.market-ticker-change.down {
    color: #EA3943;
    background: rgba(234, 57, 67, 0.10);
}
/* Flat (≈0%): neutral grey/blue */
.market-ticker-change.flat {
    color: #8E9AAE;
    background: rgba(142, 154, 174, 0.10);
}

/* Skeleton placeholder — shown on cold open until JS hydrates with real data */
.market-ticker-skeleton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    width: max-content;
}
.mtsk-pill {
    width: 96px;
    height: 18px;
    border-radius: 8px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: mtsk-shimmer 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes mtsk-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes ticker-scroll {
    /* translateX(-50%) — track is duplicated 2x in JS, so -50% lands exactly
       on the start of the second copy = seamless infinite loop. */
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* RTL — reverse scroll direction so motion matches reading direction */
html[dir="rtl"] .market-ticker-track {
    animation-direction: reverse;
}

/* Reduced motion — keep content visible but static */
@media (prefers-reduced-motion: reduce) {
    .market-ticker-track { animation: none; }
    .mtsk-pill { animation: none; background: rgba(255, 255, 255, 0.05); }
}

/* Small phones — slightly tighter spacing, smaller fonts */
@media (max-width: 380px) {
    .market-ticker { height: 42px; }
    .market-ticker-item { padding: 0 10px; gap: 5px; }
    .market-ticker-icon { width: 18px; height: 18px; }
    .market-ticker-symbol,
    .market-ticker-price { font-size: 11px; }
    .market-ticker-change { font-size: 10px; padding: 2px 5px; }
    .mtsk-pill { width: 80px; }
}

/* ============================================================================
   2. MARKET STATUS — Fear & Greed (left) + Market Trend (right), equal columns
   ========================================================================== */
.dashboard-market-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
.dms-card {
    background: linear-gradient(180deg, #0E1626 0%, #0B1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 14px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.dms-card::before {
    content: '';
    position: absolute;
    top: -30px;
    inset-inline-end: -30px;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.06), transparent 70%);
    pointer-events: none;
}
.dms-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #A5B4C7;
    letter-spacing: 0.3px;
}
.dms-card-header svg {
    width: 14px;
    height: 14px;
    color: #F5A623;
    stroke: #F5A623;
    flex-shrink: 0;
}

/* Fear & Greed card */
.dms-fg-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}
.dms-fg-gauge {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.dms-fg-gauge svg {
    width: 90px;
    height: 50px;
    display: block;
}
.dms-fg-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 1px;
}
.dms-fg-score-num {
    font-size: 24px;
    font-weight: 900;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.dms-fg-score-label {
    font-size: 8px;
    color: #A5B4C7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
}
.dms-fg-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
}
.dms-fg-class {
    font-size: 14px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    text-align: center;
}
.dms-fg-class.fg-extreme-fear { color: #EF4444; }
.dms-fg-class.fg-fear { color: #F97316; }
.dms-fg-class.fg-neutral { color: #A5B4C7; }
.dms-fg-class.fg-greed { color: #84CC16; }
.dms-fg-class.fg-extreme-greed { color: #22C55E; }
.dms-fg-source { display: none; }

/* Market Trend card — Bull/Bear graphic indicator */
.dms-trend-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.dms-trend-graphic {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto 2px;
}
.dms-trend-graphic svg.trend-bull-bear {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.dms-trend-graphic::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06);
}
.dms-trend-graphic.bullish svg.trend-bull-bear {
    filter: drop-shadow(0 0 8px rgba(34,197,94,0.5));
}
.dms-trend-graphic.bullish::before {
    background: rgba(34,197,94,0.06);
    border-color: rgba(34,197,94,0.15);
}
.dms-trend-graphic.bearish svg.trend-bull-bear {
    filter: drop-shadow(0 0 8px rgba(239,68,68,0.5));
}
.dms-trend-graphic.bearish::before {
    background: rgba(239,68,68,0.06);
    border-color: rgba(239,68,68,0.15);
}
.dms-trend-graphic.neutral svg.trend-bull-bear {
    filter: drop-shadow(0 0 6px rgba(245,166,35,0.4));
}
.dms-trend-graphic.neutral::before {
    background: rgba(245,166,35,0.06);
    border-color: rgba(245,166,35,0.15);
}
.dms-trend-label-big {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}
.dms-trend-label-big.bullish { color: #22C55E; }
.dms-trend-label-big.bearish { color: #EF4444; }
.dms-trend-label-big.neutral { color: #F5A623; }
.dms-trend-sub {
    font-size: 10px;
    color: #6B7A8D;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dms-trend-sub .up { color: #22C55E; font-weight: 700; }
.dms-trend-sub .down { color: #EF4444; font-weight: 700; }

/* Market status skeleton */
.dms-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.dms-skel-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #0B1220 25%, rgba(255, 255, 255, 0.08) 50%, #0B1220 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.dms-skel-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.dms-skel-line {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #0B1220 25%, rgba(255, 255, 255, 0.08) 50%, #0B1220 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.dms-skel-line.w-60 { width: 60%; }
.dms-skel-line.w-40 { width: 40%; height: 9px; }

/* ============================================================================
   3. WATCHLIST — Max 5 coins + Add Coin card, horizontal scroll, sparkline
   ========================================================================== */
#dashboard-page .watchlist-grid {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    margin: 0 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#dashboard-page .watchlist-grid::-webkit-scrollbar { display: none; }

.watch-card {
    flex: 0 0 120px;
    scroll-snap-align: start;
    background: linear-gradient(180deg, #0E1626 0%, #0B1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, border-color 0.2s ease;
    min-height: 130px;
    overflow: hidden;
}
.watch-card:active {
    transform: scale(0.97);
    border-color: rgba(245, 166, 35, 0.3);
}
.watch-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 2px;
    width: 100%;
}
.watch-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.watch-card-remove {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    z-index: 2;
}
.watch-card-remove:hover { background: rgba(239, 68, 68, 0.25); }
.watch-card-remove svg { width: 10px; height: 10px; }
.watch-card-symbol {
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.watch-card-name {
    font-size: 9px;
    color: #6B7A8D;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.watch-card-price {
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    line-height: 1.2;
}
.watch-card-change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 8px;
    width: fit-content;
    margin: 2px auto 0;
    line-height: 1.2;
}
.watch-card-change.up { color: #22C55E; background: rgba(34, 197, 94, 0.1); }
.watch-card-change.down { color: #EF4444; background: rgba(239, 68, 68, 0.1); }
.watch-card-change svg { width: 9px; height: 9px; }

/* Mini trend sparkline (SVG) */
.watch-card-trend {
    height: 28px;
    width: 100%;
    margin-top: auto;
    display: flex;
    align-items: flex-end;
}
.watch-card-trend svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Add Coin card */
.watch-card-add {
    flex: 0 0 92px;
    scroll-snap-align: start;
    background: transparent;
    border: 1.5px dashed rgba(245, 166, 35, 0.3);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: #F5A623;
    transition: all 0.2s ease;
    min-height: 138px;
}
.watch-card-add:active { transform: scale(0.97); }
.watch-card-add:hover {
    background: rgba(245, 166, 35, 0.05);
    border-color: rgba(245, 166, 35, 0.5);
}
.watch-card-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.watch-card-add-icon svg { width: 16px; height: 16px; }
.watch-card-add-text {
    font-size: 10px;
    font-weight: 700;
    color: #F5A623;
    text-align: center;
    line-height: 1.2;
}

/* Watchlist skeleton */
#dashboard-page .watchlist-skeleton {
    display: flex;
    gap: 10px;
    padding: 0;
    grid-template-columns: none;
}
#dashboard-page .watchlist-skeleton-item {
    flex: 0 0 122px;
    min-height: 138px;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    background: #0B1220;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
}

/* ============================================================================
   4. MARKET ANALYSIS — horizontal scrollable cards (max 5), regular + VIP
   ========================================================================== */
.dashboard-featured-analysis-wrap {
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}
.dashboard-featured-analysis-wrap::-webkit-scrollbar { display: none; }
.dma-row {
    display: flex;
    gap: 12px;
    scroll-snap-align: start;
}
.dma-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    background: #0B1220;
    border: 1px solid rgba(255, 255, 255, 0.06);
    height: 200px;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease;
}
.dma-card:active { transform: scale(0.98); }
.dma-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.dma-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 17, 0) 0%, rgba(2, 6, 17, 0.4) 45%, rgba(2, 6, 17, 0.92) 88%, rgba(2, 6, 17, 0.98) 100%);
    z-index: 2;
}
.dma-card-content {
    position: relative;
    z-index: 3;
    margin-top: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dma-card-top-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dma-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #F5A623, #FFD700);
    color: #020611;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(245, 166, 35, 0.35);
    line-height: 1;
}
.dma-vip-badge svg { width: 9px; height: 9px; }
.dma-coin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1;
}
.dma-tf-badge {
    font-size: 9px;
    color: #A5B4C7;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1;
}
.dma-title {
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.dma-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9px;
    color: #A5B4C7;
}
.dma-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dma-meta-item svg { width: 9px; height: 9px; }

/* Market Analysis skeleton */
.dfa-skeleton-row {
    display: flex;
    gap: 12px;
    overflow: hidden;
}
.dfa-skel-card {
    flex: 0 0 220px;
    height: 200px;
    border-radius: 18px;
    background: #0B1220;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dfa-skel-img {
    height: 110px;
    background: linear-gradient(90deg, #0B1220 25%, rgba(255, 255, 255, 0.06) 50%, #0B1220 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.dfa-skel-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.dfa-skel-line {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #0B1220 25%, rgba(255, 255, 255, 0.06) 50%, #0B1220 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.dfa-skel-line.w-60 { width: 60%; }
.dfa-skel-line.w-90 { width: 90%; height: 12px; }

/* Empty state for Market Analysis */
.dfa-empty {
    border-radius: 18px;
    background: #0B1220;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    padding: 28px 16px;
    text-align: center;
    color: #6B7A8D;
    font-size: 12px;
}

/* ============================================================================
   5. BREAKING NEWS — Max 3 items, priority sort, 64x64 thumbnails, 2-line clamp
   ========================================================================== */
.important-news-list {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.important-news-item {
    display: flex;
    gap: 12px;
    align-items: center;
    border-radius: 16px;
    background: linear-gradient(180deg, #0E1626 0%, #0B1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-inline-start: 3px solid #F5A623;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease;
    animation: newsFadeIn 0.4s ease both;
    min-height: 88px;
}
.important-news-item:active { transform: scale(0.99); }
.important-news-item.priority-urgent { border-inline-start-color: #EF4444; }
.important-news-item.priority-important { border-inline-start-color: #F5A623; }
.important-news-item.priority-latest { border-inline-start-color: #6B7A8D; }
.important-news-img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: #0B1220;
}
.important-news-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.important-news-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}
.important-news-priority.priority-urgent {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}
.important-news-priority.priority-important {
    background: rgba(245, 166, 35, 0.15);
    color: #F5A623;
}
.important-news-priority.priority-latest {
    background: rgba(255, 255, 255, 0.06);
    color: #A5B4C7;
}
.important-news-priority svg { width: 9px; height: 9px; }
.important-news-title {
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-height: 33px;
}
.important-news-source {
    font-size: 10px;
    color: #6B7A8D;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.important-news-source svg { width: 10px; height: 10px; flex-shrink: 0; }

@keyframes newsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* News skeleton */
.important-news-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.important-news-skeleton-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #0B1220;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    min-height: 88px;
}
.important-news-skeleton-img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(90deg, #0B1220 25%, rgba(255, 255, 255, 0.06) 50%, #0B1220 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.important-news-skeleton-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.important-news-skeleton-line {
    height: 11px;
    border-radius: 5px;
    background: linear-gradient(90deg, #0B1220 25%, rgba(255, 255, 255, 0.06) 50%, #0B1220 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.important-news-skeleton-line:nth-child(1) { width: 85%; }
.important-news-skeleton-line:nth-child(2) { width: 50%; height: 9px; }

/* ============================================================================
   6. ECONOMIC CALENDAR — Next 3 upcoming, structured top/middle/bottom cards
   ========================================================================== */
.dashboard-calendar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}
.dashboard-calendar::-webkit-scrollbar { display: none; }
.dc-card {
    flex: 0 0 210px;
    scroll-snap-align: start;
    background: linear-gradient(180deg, #0E1626 0%, #0B1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-inline-start: 3px solid #F5A623;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 134px;
    position: relative;
}
.dc-card.impact-high { border-inline-start-color: #EF4444; }
.dc-card.impact-medium { border-inline-start-color: #F5A623; }
.dc-card.impact-low { border-inline-start-color: #22C55E; }
.dc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dc-card-country {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    overflow: hidden;
}
.dc-card-flag {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.dc-card-country-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dc-card-impact {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    flex-shrink: 0;
}
.dc-card-impact.impact-high { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.dc-card-impact.impact-medium { background: rgba(245, 166, 35, 0.15); color: #F5A623; }
.dc-card-impact.impact-low { background: rgba(34, 197, 94, 0.15); color: #22C55E; }
.dc-card-impact svg { width: 9px; height: 9px; }
.dc-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    word-break: break-word;
}
.dc-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #A5B4C7;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.dc-card-bottom svg {
    width: 11px;
    height: 11px;
    color: #F5A623;
    stroke: #F5A623;
    flex-shrink: 0;
}
.dc-card-time-day {
    font-weight: 700;
    color: #FFFFFF;
}
.dc-card-time-sep {
    color: #6B7A8D;
}

/* Calendar skeleton */
.dc-skeleton {
    display: flex;
    gap: 10px;
    overflow: hidden;
}
.dc-skel-card {
    flex: 0 0 210px;
    height: 134px;
    border-radius: 16px;
    background: linear-gradient(90deg, #0B1220 25%, rgba(255, 255, 255, 0.06) 50%, #0B1220 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.dc-empty {
    padding: 24px 16px;
    text-align: center;
    color: #6B7A8D;
    font-size: 12px;
    border-radius: 16px;
    background: #0B1220;
    border: 1px dashed rgba(255, 255, 255, 0.06);
}

/* Dashboard calendar skeleton — shown while calendar data is loading */
.dc-skeleton-calendar {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    overflow: hidden;
}
.dc-skeleton-item {
    flex: 0 0 140px;
    height: 80px;
    border-radius: 14px;
    background: linear-gradient(90deg, #0B1220 0%, #131E2E 50%, #0B1220 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ============================================================================
   RESPONSIVE — 320 / 360 / 390 / 412 / 430
   ========================================================================== */
@media (max-width: 360px) {
    #dashboard-page { padding: 10px 12px 20px; }
    .hero-banner-slider { border-radius: 18px; }
    .hero-cta { font-size: 11px; height: 36px; padding: 0 12px; width: 112px; }
    .hero-cta--channel { margin-left: 4%; }
    .hero-cta--bitunix { width: 122px; margin-right: -10px; }
    .hero-slider-dots { top: 8px; right: 10px; }
    .dms-card { padding: 12px; min-height: 124px; border-radius: 18px; }
    .dms-fg-gauge { width: 64px; }
    .dms-fg-gauge svg { width: 64px; height: 36px; }
    .dms-fg-score-num { font-size: 15px; }
    .dms-fg-class { font-size: 12px; }
    .dms-trend-arrow { width: 38px; height: 38px; }
    .dms-trend-arrow svg { width: 19px; height: 19px; }
    .dms-trend-label-big { font-size: 13px; }
    .watch-card-add { flex: 0 0 80px; min-height: 130px; }
    .dma-card { flex: 0 0 190px; height: 184px; }
    .dfa-skel-card { flex: 0 0 190px; height: 184px; }
    .important-news-img { width: 56px; height: 56px; }
    .important-news-skeleton-img { width: 56px; height: 56px; }
    .important-news-title { font-size: 11px; }
    .dc-card { flex: 0 0 188px; padding: 10px; min-height: 128px; }
    .dc-skel-card { flex: 0 0 188px; height: 128px; }
}

@media (min-width: 412px) {
    .hero-cta { font-size: 12px; height: 40px; }
    .dma-card { flex: 0 0 240px; height: 210px; }
    .dfa-skel-card { flex: 0 0 240px; height: 210px; }
    .dc-card { flex: 0 0 224px; min-height: 140px; }
    .dc-skel-card { flex: 0 0 224px; height: 140px; }
}

@media (min-width: 430px) {
    .watch-card { flex: 0 0 134px; }
    .dma-card { flex: 0 0 252px; }
    .dfa-skel-card { flex: 0 0 252px; }
}

/* RTL safety — ensure dashboard respects RTL on icon-first rows */
html[dir="rtl"] #dashboard-page,
body[dir="rtl"] #dashboard-page {
    direction: rtl;
}
html[dir="rtl"] .important-news-item { border-inline-start: 3px solid #F5A623; }
html[dir="rtl"] .important-news-item.priority-urgent { border-inline-start-color: #EF4444; }
html[dir="rtl"] .important-news-item.priority-important { border-inline-start-color: #F5A623; }
html[dir="rtl"] .important-news-item.priority-latest { border-inline-start-color: #6B7A8D; }
html[dir="rtl"] .dc-card { border-inline-start: 3px solid #F5A623; }
html[dir="rtl"] .dc-card.impact-high { border-inline-start-color: #EF4444; }
html[dir="rtl"] .dc-card.impact-medium { border-inline-start-color: #F5A623; }
html[dir="rtl"] .dc-card.impact-low { border-inline-start-color: #22C55E; }

/* #endregion Dashboard Polish */

/* ============================================================
   Dashboard Polish — Bull/Bear Graphics, Sparkline Glow, Watchlist Alignment
   ============================================================ */

/* ── Market Trend: Bull/Bear Graphics ── */
/* ── Market Trend: Image-based Bull/Bear graphics ── */
.dms-trend-graphic img.trend-bull-bear-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    border-radius: 50%;
}
.dms-trend-graphic.bullish img.trend-bull-bear-img {
    filter: drop-shadow(0 0 10px rgba(34,197,94,0.5));
}
.dms-trend-graphic.bearish img.trend-bull-bear-img {
    filter: drop-shadow(0 0 10px rgba(239,68,68,0.5));
}
.dms-trend-graphic.neutral img.trend-bull-bear-img {
    filter: drop-shadow(0 0 8px rgba(245,166,35,0.4));
}
@media (max-width: 430px) {
    .dms-trend-graphic img.trend-bull-bear-img {
        width: 72px;
        height: 72px;
    }
    .dms-trend-graphic {
        width: 72px;
        height: 72px;
    }
}

/* ── Trend image fallback emoji ── */
.trend-fallback {
    font-size: 48px;
    line-height: 90px;
    display: block;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════════
   MKT — Market Page Rebuild (Premium Dark Crypto Interface)
   All new classes use .mkt- prefix
   Colors: bg #020611, cards #0B1220, accent #F5A623
   ════════════════════════════════════════════════════════════════════ */

/* ── Header (REDESIGNED — icon + title + subtitle) ── */
.mkt-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
    background: #020611;
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: blur(20px);
}
.mkt-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mkt-header-icon {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(245,166,35,0.06));
    border: 1px solid rgba(245,166,35,0.25);
    color: #F5A623;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(245,166,35,0.15);
}
.mkt-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-title { font-size: 20px; font-weight: 800; color: #FFFFFF; margin: 0; line-height: 1.2; }
.mkt-subtitle {
    font-size: 11px; font-weight: 500; color: #6B7A8D; margin: 0;
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-refresh-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06);
    color: #A5B4C7; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; flex-shrink: 0;
}
.mkt-refresh-btn:hover { background: rgba(245,166,35,0.1); color: #F5A623; }
.mkt-refresh-btn:active { transform: scale(0.92); }
.mkt-refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── Overview Grid (3 compact equal stat cards — exchange style) ── */
.mkt-overview-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 0 16px 10px;
}
.mkt-stat-card {
    background: linear-gradient(180deg, #0E1623 0%, #0B1220 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex; align-items: center; gap: 8px;
    transition: border-color 0.2s ease, transform 0.15s ease;
    position: relative; overflow: hidden;
    min-height: 56px;
}
.mkt-stat-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at top right, rgba(245,166,35,0.04), transparent 60%);
    pointer-events: none;
}
.mkt-stat-card:active { transform: scale(0.98); }
.mkt-stat-icon-wrap {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mkt-stat-icon-orange {
    background: rgba(245,166,35,0.12); color: #F5A623;
    border: 1px solid rgba(245,166,35,0.2);
}
.mkt-stat-icon-blue {
    background: rgba(59,130,246,0.12); color: #3B82F6;
    border: 1px solid rgba(59,130,246,0.2);
}
.mkt-stat-icon-green {
    background: rgba(34,197,94,0.12); color: #22C55E;
    border: 1px solid rgba(34,197,94,0.2);
}
.mkt-stat-content {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.mkt-stat-label {
    font-size: 9px; font-weight: 600; color: #6B7A8D;
    text-transform: uppercase; letter-spacing: 0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkt-stat-value {
    font-size: 14px; font-weight: 800; color: #FFFFFF;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.1;
}

/* ── Overview Meta (source indicator + last update) ── */
.mkt-overview-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px 8px; font-size: 10px; color: #6B7A8D;
}
.mkt-overview-source {
    display: flex; align-items: center; gap: 5px; font-weight: 600;
}
.mkt-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22C55E; box-shadow: 0 0 6px #22C55E;
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}
.mkt-overview-meta.error .mkt-live-dot {
    background: #EF4444; box-shadow: 0 0 6px #EF4444;
}
.mkt-overview-updated { font-weight: 500; }

/* ── Premium Market Status Card (Glassmorphism) ── */
.mkt-status-premium {
    position: relative; margin: 0 16px 10px; border-radius: 16px;
    overflow: hidden; border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(145deg, rgba(14,22,35,0.8) 0%, rgba(11,18,32,0.9) 100%);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.mkt-status-premium-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 100% 0%, rgba(245,166,35,0.08), transparent 50%),
                radial-gradient(100% 60% at 0% 100%, rgba(34,197,94,0.06), transparent 50%);
}
.mkt-status-premium-content {
    position: relative; padding: 14px 14px 12px; z-index: 1;
    display: flex; flex-direction: column; gap: 10px;
}
.mkt-status-premium-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px;
}
.mkt-status-premium-title-row {
    display: flex; align-items: center; gap: 7px;
}
.mkt-status-premium-icon {
    width: 24px; height: 24px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245,166,35,0.12); color: #F5A623;
    border: 1px solid rgba(245,166,35,0.2);
}
.mkt-status-premium-title {
    font-size: 13px; font-weight: 700; color: #FFFFFF;
}
.mkt-status-premium-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    border: 1px solid; transition: all 0.3s ease;
}

/* Market Trend (صعودی/نزولی/خنثی) — shown next to the F&G badge */
.mkt-status-premium-trend {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600;
}
.mkt-trend-label {
    color: #6B7A8D; text-transform: uppercase; letter-spacing: 0.3px;
}
.mkt-trend-value {
    font-weight: 700; padding: 2px 7px; border-radius: 5px;
    border: 1px solid; transition: all 0.3s ease;
}
.mkt-trend-value.trend-up { color: #22C55E; background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25); }
.mkt-trend-value.trend-down { color: #EF4444; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); }
.mkt-trend-value.trend-neutral { color: #F5A623; background: rgba(245,166,35,0.1); border-color: rgba(245,166,35,0.25); }

.mkt-status-premium-total {
    font-size: 10px; font-weight: 600; color: #6B7A8D;
}

/* F&G score display + gradient bar */
.mkt-status-premium-fg {
    display: flex; align-items: center; gap: 14px;
}
.mkt-fg-score-display {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; min-width: 60px;
}
.mkt-fg-score-num {
    font-size: 28px; font-weight: 800; color: #FFFFFF;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.mkt-fg-score-label {
    font-size: 10px; font-weight: 600; color: #A5B4C7;
    margin-top: 2px; white-space: nowrap;
}
.mkt-fg-gradient-bar-wrap {
    flex: 1; display: flex; flex-direction: column; gap: 4px;
    /* Force LTR so FEAR is always on the left, GREED always on the right,
       regardless of the page's RTL direction. Without this, RTL flips the
       labels and gradient, making Fear appear on the right (bug). */
    direction: ltr;
}
.mkt-fg-gradient-bar {
    position: relative; height: 10px; border-radius: 5px;
    overflow: visible;
}
.mkt-fg-gradient-fill {
    position: absolute; inset: 0; border-radius: 5px;
    background: linear-gradient(90deg,
        #EF4444 0%, #F97316 25%, #F5A623 50%, #84CC16 75%, #22C55E 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.mkt-fg-indicator {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 16px; height: 16px; border-radius: 50%;
    background: #FFFFFF; border: 3px solid #0B1220;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}
.mkt-fg-gradient-labels {
    display: flex; justify-content: space-between;
    font-size: 8px; font-weight: 600; color: #6B7A8D;
    text-transform: uppercase; letter-spacing: 0.3px;
}

/* Sentiment bar (gainers/neutral/losers) */
.mkt-status-premium-bar {
    display: flex; flex-direction: column; gap: 5px;
}
.mkt-status-bar {
    display: flex; height: 7px; border-radius: 4px; overflow: hidden;
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.mkt-status-fill-green { background: linear-gradient(90deg, #16a34a, #22C55E); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.mkt-status-fill-neutral { background: linear-gradient(90deg, #475569, #6B7A8D); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.mkt-status-fill-red { background: linear-gradient(90deg, #EF4444, #dc2626); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.mkt-status-labels {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; font-weight: 600;
}
.mkt-status-up { display: flex; align-items: center; gap: 3px; color: #22C55E; }
.mkt-status-neutral-label { display: flex; align-items: center; gap: 3px; color: #6B7A8D; }
.mkt-status-down { display: flex; align-items: center; gap: 3px; color: #EF4444; }

/* Analytical insight text */
.mkt-status-premium-insight {
    font-size: 11px; font-weight: 500; color: #A5B4C7;
    line-height: 1.5; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
[dir="rtl"] .mkt-status-premium-insight { text-align: right; }
.mkt-status-neutral { display: flex; align-items: center; gap: 3px; color: #6B7A8D; }
.mkt-status-labels b { font-size: 12px; font-weight: 800; }
.mkt-status-labels small { font-size: 9px; font-weight: 500; opacity: 0.85; }
.mkt-status-sentiment {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 4px; margin-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.mkt-status-sentiment-label { font-size: 9px; color: #6B7A8D; font-weight: 500; }
.mkt-status-sentiment-value {
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
}
.mkt-status-sentiment-value.bullish {
    color: #22C55E; background: rgba(34,197,94,0.1);
}
.mkt-status-sentiment-value.bearish {
    color: #EF4444; background: rgba(239,68,68,0.1);
}
.mkt-status-sentiment-value.neutral {
    color: #A5B4C7; background: rgba(255,255,255,0.04);
}

/* ── Search Bar ── */
.mkt-search-bar {
    position: relative; padding: 0 16px 8px;
}
.mkt-search-icon {
    position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
    color: #6B7A8D; pointer-events: none;
}
.mkt-search-input {
    width: 100%; height: 40px; border-radius: 12px;
    background: #0B1220; border: 1px solid rgba(255,255,255,0.06);
    color: #FFFFFF; font-size: 14px; outline: none;
    padding: 0 42px 0 14px; font-family: inherit;
    transition: border-color 0.2s ease;
}
.mkt-search-input:focus { border-color: rgba(245,166,35,0.3); }
.mkt-search-input::placeholder { color: #6B7A8D; }

/* ── Tabs (Segmented — EQUAL WIDTH variant) ── */
.mkt-tabs {
    display: flex; gap: 4px; padding: 0 16px 8px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mkt-tabs::-webkit-scrollbar { display: none; }
.mkt-tabs-equal {
    display: grid; grid-template-columns: repeat(3, 1fr);
    overflow: visible;
}
.mkt-tab {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: #0B1220; color: #6B7A8D;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; font-family: inherit;
    width: 100%; min-width: 0;
}
.mkt-tabs-equal .mkt-tab { width: auto; }
.mkt-tab:active { transform: scale(0.96); }
.mkt-tab.active {
    background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(245,166,35,0.06));
    border-color: rgba(245,166,35,0.4);
    color: #F5A623;
    box-shadow: 0 0 12px rgba(245,166,35,0.12);
}

/* ── BTC Pairs Section (only shown when btcpairs filter active) ── */
.mkt-btc-pairs-section {
    padding: 0 16px 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.mkt-btc-pair-group {
    background: #0B1220; border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.mkt-btc-pair-header {
    display: flex; align-items: center; justify-content: space-between;
}
.mkt-btc-pair-header-left { display: flex; align-items: center; gap: 8px; }
.mkt-btc-pair-badge {
    width: 22px; height: 22px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
}
.mkt-btc-pair-bull {
    background: rgba(34,197,94,0.12); color: #22C55E;
    border: 1px solid rgba(34,197,94,0.2);
}
.mkt-btc-pair-bear {
    background: rgba(239,68,68,0.12); color: #EF4444;
    border: 1px solid rgba(239,68,68,0.2);
}
.mkt-btc-pair-title { font-size: 13px; font-weight: 700; color: #FFFFFF; }
.mkt-btc-pair-count {
    font-size: 11px; font-weight: 700; color: #A5B4C7;
    background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 6px;
}
.mkt-btc-pair-list {
    display: flex; flex-direction: column; gap: 6px;
}
.mkt-btc-pair-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: all 0.2s ease;
}
.mkt-btc-pair-item:hover {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08);
}
.mkt-btc-pair-item:active { transform: scale(0.98); }
.mkt-btc-pair-symbol { font-size: 13px; font-weight: 700; color: #FFFFFF; flex: 1; }
.mkt-btc-pair-price {
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mkt-btc-pair-price.up { color: #22C55E; }
.mkt-btc-pair-price.down { color: #EF4444; }
.mkt-btc-pair-empty {
    text-align: center; padding: 12px;
    color: #6B7A8D; font-size: 12px; font-weight: 500;
}

/* ── Filter Chips ── */
.mkt-filters {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
    padding: 0 16px 8px;
}
.mkt-filter-chip {
    padding: 7px 4px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03); color: #6B7A8D;
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; font-family: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center; min-width: 0;
}
.mkt-filter-chip:active { transform: scale(0.96); }
.mkt-filter-chip.active {
    background: rgba(245,166,35,0.12);
    border-color: rgba(245,166,35,0.3);
    color: #F5A623;
}

/* ── Sticky Column Header — Grid MUST match .mkt-coin-row exactly ──
   Both use the SAME grid-template-columns so columns align perfectly.
   The horizontal padding is provided by the parent container:
   - .mkt-coin-list has padding-x: 16px (wraps the rows)
   - .mkt-list-header has padding-x: 16px (matches the list)

   The row itself has padding-x: 12px (for internal card spacing),
   but this does NOT affect column alignment because the grid starts
   at the same x-position relative to the parent's content box.

   Actually, the row's padding-x IS part of the grid track — so we
   MUST use the SAME padding-x for both header and row to keep
   columns aligned. We use --mkt-grid-pad-x for both.
*/
.mkt-list-header,
.mkt-coin-row {
    /* Shared grid definition — single source of truth */
    --mkt-grid-cols: 28px 36px minmax(0, 1fr) 92px 64px 28px;
    --mkt-grid-gap: 8px;
    --mkt-grid-pad-x: 12px;
}

.mkt-list-header {
    display: grid;
    grid-template-columns: var(--mkt-grid-cols);
    gap: var(--mkt-grid-gap);
    align-items: center;
    /* padding-x MUST match .mkt-coin-row padding-x (--mkt-grid-pad-x = 12px)
       so the grid columns start at the same x-position. Both header and row
       are inside .mkt-coin-list (which has 16px padding-x), so they share
       the same parent context. */
    padding: 8px var(--mkt-grid-pad-x);
    margin: 0;
    background: rgba(11, 18, 32, 0.96);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    /* Invisible 1px border to MATCH the row's 1px border — keeps grid
       columns perfectly aligned (box-sizing: border-box means the border
       eats into the content area; without this, header content area is
       2px wider than row content area, causing column drift). */
    border: 1px solid transparent;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 56px; /* sits right under the sticky app-header */
    z-index: 20;
    font-size: 10px; font-weight: 700; color: #6B7A8D;
    text-transform: uppercase; letter-spacing: 0.5px;
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0; /* prevent flex parent from squishing the sticky header */
    border-radius: 10px; /* match the card-style of rows */
}
.mkt-lh-rank { text-align: center; }
.mkt-lh-logo { } /* empty cell — aligns with the logo column */
.mkt-lh-coin { padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-lh-price { text-align: right; padding-right: 2px; }
.mkt-lh-change { text-align: right; padding-right: 2px; }
.mkt-lh-star { text-align: center; }

/* ── Coin List (virtualized via content-visibility: auto) ──
   .mkt-coin-list is the parent container with padding-x: 16px.
   .mkt-list-header is INSIDE the list (sticky) and uses the same
   --mkt-grid-pad-x (12px) as rows, so grid columns align perfectly.
   .mkt-coin-list-rows holds the actual coin rows (rendered by JS).
*/
.mkt-coin-list {
    padding: 6px 16px 100px;
    display: flex; flex-direction: column; gap: 6px;
}
.mkt-coin-list-rows {
    display: flex; flex-direction: column; gap: 6px;
}

/* ── Forex Grouped List (Major / Cross / Metals / Indices / Commodities) ── */
.mkt-forex-group {
    margin-bottom: 16px;
}
.mkt-forex-group-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 4px 8px;
}
.mkt-forex-group-left { display: flex; align-items: center; gap: 8px; }
.mkt-forex-group-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}
.mkt-forex-group-title {
    font-size: 12px; font-weight: 700; color: #A5B4C7;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.mkt-forex-group-count {
    font-size: 10px; font-weight: 700; color: #6B7A8D;
    background: rgba(255,255,255,0.04); padding: 2px 8px; border-radius: 6px;
}
.mkt-forex-group-items {
    display: flex; flex-direction: column; gap: 6px;
}

/* ── Coin Row (Standalone Card — Binance/Bybit style) ──
   Uses the SAME grid variables as .mkt-list-header to guarantee
   column alignment. Only horizontal padding matches; vertical padding
   and visual style differ (card vs header).
*/
.mkt-coin-row {
    display: grid;
    grid-template-columns: var(--mkt-grid-cols);
    gap: var(--mkt-grid-gap);
    align-items: center;
    padding: 10px var(--mkt-grid-pad-x);
    background: #0B1220;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    /* Virtualization: skip rendering cost for off-screen rows */
    content-visibility: auto;
    contain-intrinsic-size: 56px;
    min-height: 56px;
    box-sizing: border-box;
    width: 100%;
    animation: mktFadeIn 0.25s ease both;
}
.mkt-coin-row:hover {
    background: #0E1623;
    border-color: rgba(255,255,255,0.08);
}
.mkt-coin-row:active {
    background: #11192A;
    transform: scale(0.99);
}
@keyframes mktFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.mkt-coin-rank {
    font-size: 11px; font-weight: 700; color: #6B7A8D;
    text-align: center;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.mkt-coin-star {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #4A5668;
    transition: color 0.2s ease, transform 0.15s ease;
    border-radius: 6px;
}
.mkt-coin-star:hover { color: #F5A623; background: rgba(245,166,35,0.08); }
.mkt-coin-star:active { transform: scale(0.85); }
.mkt-coin-star.active { color: #F5A623; }

.mkt-coin-logo {
    width: 32px; height: 32px; border-radius: 50%;
    flex-shrink: 0; object-fit: cover;
    background: #131C2A;
    border: 1px solid rgba(255,255,255,0.06);
    /* Center the logo within its grid cell so it aligns with the header cell */
    justify-self: center;
    display: block;
}

.mkt-coin-info {
    min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.mkt-coin-symbol {
    font-size: 14px; font-weight: 700; color: #FFFFFF;
    letter-spacing: 0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
/* Hide full coin name — user spec: only symbol shown */
.mkt-coin-name {
    display: none !important;
}
/* For BTC pair rows, we show pair name (SYM/BTC) in the symbol slot
   and a small pair-price caption underneath as the "name" */
.mkt-coin-pair-caption {
    font-size: 10px; font-weight: 500; color: #6B7A8D;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.1;
}

.mkt-coin-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    min-width: 0;
}
.mkt-coin-price {
    font-size: 13px; font-weight: 700; color: #FFFFFF;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
}
.mkt-coin-change {
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
}
.mkt-coin-change.up { color: #22C55E; }
.mkt-coin-change.down { color: #EF4444; }

/* ── Forex Row (matches coin row card design) ── */
.mkt-forex-row {
    grid-template-columns: 24px 36px minmax(0, 1fr) 88px 60px 28px;
}
.mkt-forex-icon {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.mkt-forex-icon-text {
    font-size: 12px; font-weight: 800; letter-spacing: -0.5px;
    line-height: 1; text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.mkt-forex-icon-text:lang(fa) {
    font-size: 13px;
}
.mkt-forex-row .mkt-coin-info { flex: 1; min-width: 0; gap: 0; }
.mkt-forex-row .mkt-coin-symbol {
    font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkt-forex-row .mkt-coin-pair-caption {
    font-size: 10px; font-weight: 500; color: #6B7A8D;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2; margin-top: 1px;
}
.mkt-forex-row .mkt-coin-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}

/* Responsive: on very narrow screens, hide rank column and tighten price column */
@media (max-width: 380px) {
    .mkt-forex-row {
        grid-template-columns: 34px minmax(0, 1fr) 80px 56px 24px;
    }
    .mkt-forex-row .mkt-coin-rank { display: none; }
    .mkt-forex-row .mkt-coin-price { font-size: 12px; }
    .mkt-forex-row .mkt-coin-change { font-size: 11px; }
}
.mkt-coin-category-tag {
    font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.3px;
}

/* ── Load More ── */
.mkt-load-more {
    text-align: center; padding: 16px 0;
    color: #6B7A8D; font-size: 13px;
}
.mkt-load-more-btn {
    padding: 8px 20px; border-radius: 10px;
    background: rgba(245,166,35,0.1);
    border: 1px solid rgba(245,166,35,0.2);
    color: #F5A623; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease; font-family: inherit;
}
.mkt-load-more-btn:active { transform: scale(0.96); }

/* ── Empty State ── */
.mkt-empty {
    text-align: center; padding: 40px 20px;
    color: #6B7A8D; font-size: 14px;
}

/* ── Market Pulse Bar — REMOVED from HTML; CSS kept disabled for safety ── */
.mkt-pulse-bar { display: none !important; }

/* ── Trend-strength heat bar — disabled in compact card design ── */
.mkt-heat-bar { display: none !important; }

/* ── Price flash on poll update (real-time feedback) ── */
.mkt-coin-price.flash-up {
    animation: mktPriceFlashUp 0.9s ease-out;
}
.mkt-coin-price.flash-down {
    animation: mktPriceFlashDown 0.9s ease-out;
}
@keyframes mktPriceFlashUp {
    0% { color: #22C55E; text-shadow: 0 0 6px rgba(34,197,94,0.6); }
    100% { color: #FFFFFF; text-shadow: none; }
}
@keyframes mktPriceFlashDown {
    0% { color: #EF4444; text-shadow: 0 0 6px rgba(239,68,68,0.6); }
    100% { color: #FFFFFF; text-shadow: none; }
}

/* ── Skeleton ── */
.mkt-skeleton-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mkt-skel-logo {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.mkt-skel-line {
    height: 12px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
}
.mkt-skel-line.w-30 { width: 30%; }
.mkt-skel-line.w-50 { width: 50%; }
.mkt-skel-line.w-20 { width: 20%; }

/* ── Responsive ──
   On narrow screens, we override the SHARED grid variables so header
   and rows automatically stay in sync. This is the single source of truth —
   changing the variables here updates BOTH header and rows.
*/
@media (max-width: 380px) {
    .mkt-overview-grid { gap: 6px; }
    .mkt-stat-card { padding: 7px 8px; min-height: 50px; }
    .mkt-stat-icon-wrap { width: 24px; height: 24px; border-radius: 6px; }
    .mkt-stat-label { font-size: 8px; }
    .mkt-stat-value { font-size: 12px; }
    /* Override shared grid variables — applies to both header and rows */
    .mkt-list-header,
    .mkt-coin-row {
        --mkt-grid-cols: 22px 30px minmax(0, 1fr) 80px 56px 24px;
        --mkt-grid-gap: 6px;
        --mkt-grid-pad-x: 10px;
    }
    .mkt-list-header { padding-top: 7px; padding-bottom: 7px; }
    .mkt-coin-row { padding-top: 8px; padding-bottom: 8px; }
    .mkt-coin-logo { width: 28px; height: 28px; }
    .mkt-coin-symbol { font-size: 13px; }
    .mkt-coin-price { font-size: 12px; }
    .mkt-coin-change { font-size: 11px; }
    .mkt-coin-rank { font-size: 10px; }
}
@media (max-width: 320px) {
    .mkt-list-header,
    .mkt-coin-row {
        --mkt-grid-cols: 20px 28px minmax(0, 1fr) 70px 50px 22px;
        --mkt-grid-gap: 5px;
        --mkt-grid-pad-x: 8px;
    }
    .mkt-list-header { padding-top: 6px; padding-bottom: 6px; }
    .mkt-coin-row { padding-top: 7px; padding-bottom: 7px; }
    .mkt-coin-logo { width: 26px; height: 26px; }
    .mkt-coin-symbol { font-size: 12px; }
    .mkt-coin-price { font-size: 11px; }
    .mkt-coin-change { font-size: 10px; }
    .mkt-coin-rank { font-size: 9px; }
}

/* ════════════════════════════════════════════════════════════════════
   CD — Coin Detail Page (Premium Rebuild)
   Colors: bg #020611, cards #0B1220, accent #F5A623
   ════════════════════════════════════════════════════════════════════ */

.cd-fullscreen {
    position: fixed; inset: 0; z-index: 10000;
    background: #020611; display: flex; flex-direction: column;
    overflow: hidden; /* BUG 2 fix: prevent content bleed/overlap on small screens */
    animation: cdSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cd-fullscreen.slide-up {
    animation: cdSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cd-fullscreen.slide-down {
    animation: cdSlideOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes cdSlideIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cdSlideOut { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ── Top Bar (Premium Exchange-Style Header) ── */
.cd-top-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    background: #0B1220;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* Left column: logo + (title row + price row) */
.cd-identity {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.cd-coin-logo {
    width: 40px; height: 40px; border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
    background: #131C2A;
    object-fit: cover;
}

/* Text column: title row on top, price row below — both aligned to grid */
.cd-identity-text {
    display: grid;
    grid-template-rows: auto auto;
    gap: 4px;
    min-width: 0;
}
.cd-identity-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cd-title {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}
.cd-rank-badge {
    font-size: 10px;
    font-weight: 700;
    color: #F5A623;
    background: rgba(245,166,35,0.12);
    border: 1px solid rgba(245,166,35,0.2);
    padding: 2px 7px;
    border-radius: 6px;
    flex-shrink: 0;
    line-height: 1.1;
}

.cd-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.cd-price {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    line-height: 1.2;
    /* min-width prevents layout shift when price changes from $100 to $100000 */
    min-width: 0;
    white-space: nowrap;
}
.cd-change {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}
.cd-change.up { color: #22C55E; }
.cd-change.down { color: #EF4444; }

/* Right column: action buttons */
.cd-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}
.cd-action-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    color: #A5B4C7;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.cd-action-btn:hover { background: rgba(245,166,35,0.1); color: #F5A623; }
.cd-action-btn:active { transform: scale(0.92); }

/* Responsive: tighter spacing on very narrow screens */
@media (max-width: 360px) {
    .cd-top-bar { gap: 8px; padding: 10px 12px; }
    .cd-identity { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
    .cd-coin-logo { width: 32px; height: 32px; }
    .cd-title { font-size: 14px; }
    .cd-price { font-size: 16px; }
    .cd-change { font-size: 11px; }
    .cd-action-btn { width: 32px; height: 32px; }
    .cd-actions { gap: 4px; }
}
.cd-action-btn.active { color: #F5A623; background: rgba(245,166,35,0.12); }

/* ── Scrollable Content ── */
.cd-content {
    flex: 1;
    min-height: 0; /* BUG 2 fix: critical — without this iOS Safari flexbox refuses to scroll and the alert/stats sections get clipped/overlapped */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* prevent scroll-chaining to background */
    padding: 16px 16px 28px; /* BUG 2 fix: was 80px bottom — wasted space & pushed content off-screen on short viewports */
}

/* ── Chart Section ── */
.cd-chart-section { margin-bottom: 18px; }
.cd-tf-bar {
    display: flex; gap: 4px; margin-bottom: 8px;
    overflow-x: auto; scrollbar-width: none;
}
.cd-tf-bar::-webkit-scrollbar { display: none; }
.cd-tf-btn {
    flex: 1; min-width: 0; padding: 7px 4px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06); background: #0B1220;
    color: #6B7A8D; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; font-family: inherit;
    text-align: center;
}
.cd-tf-btn:active { transform: scale(0.94); }
.cd-tf-btn.active {
    background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.3);
    color: #F5A623;
}
.cd-chart {
    background: #0B1220; border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; height: 340px !important; overflow: hidden;
    /* !important locks the height against TradingView's inline height:100% (autosize),
       which otherwise expands the container to fill the parent and causes the chart
       to overlap the alert/stats sections on mobile. */
}
.cd-chart-section { margin-bottom: 18px; height: auto !important; /* override TradingView's inline height:100% on the section wrapper */ }

/* ── Chart Loading States (Bug 5: skeleton loader + fallback card) ── */
.cd-chart-skeleton {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px; height: 100%; box-sizing: border-box;
}
.cd-chart-skeleton-bar {
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: cdChartShimmer 1.4s ease-in-out infinite;
}
.cd-chart-skeleton-bar:nth-child(1) { width: 40%; height: 16px; margin-bottom: 4px; }
.cd-chart-skeleton-bar:nth-child(2) { width: 100%; }
.cd-chart-skeleton-bar:nth-child(3) { width: 75%; }
.cd-chart-skeleton-canvas {
    flex: 1; margin-top: 8px; border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: cdChartShimmer 1.4s ease-in-out infinite;
    position: relative;
}
.cd-chart-skeleton-canvas::after {
    content: ''; position: absolute; left: 10%; right: 10%; bottom: 20%; height: 45%;
    background: linear-gradient(90deg, transparent, rgba(245,166,35,0.08), transparent);
    background-size: 200% 100%;
    animation: cdChartShimmer 1.8s ease-in-out infinite;
    border-radius: 4px;
    clip-path: polygon(0% 60%, 10% 45%, 20% 55%, 30% 30%, 40% 40%, 50% 20%, 60% 35%, 70% 15%, 80% 25%, 90% 10%, 100% 30%, 100% 100%, 0% 100%);
}
@keyframes cdChartShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.cd-chart-status {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 30px 20px; height: 100%; box-sizing: border-box; text-align: center;
}
.cd-chart-status-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.18);
    color: #F5A623;
}
.cd-chart-status-icon.error {
    background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.18); color: #EF4444;
}
.cd-chart-status-title { font-size: 14px; font-weight: 700; color: #FFFFFF; }
.cd-chart-status-sub { font-size: 12px; color: #6B7A8D; max-width: 240px; line-height: 1.5; }
.cd-chart-fallback-search {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: #F5A623; font-weight: 600;
    background: rgba(245,166,35,0.08); padding: 6px 12px; border-radius: 8px;
    border: 1px solid rgba(245,166,35,0.15);
}
.cd-chart-fallback-search .cd-chart-mini-spinner {
    width: 12px; height: 12px; border: 2px solid rgba(245,166,35,0.2);
    border-top-color: #F5A623; border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Section ── */
.cd-section { margin-bottom: 16px; }
.cd-section-title {
    font-size: 14px; font-weight: 700; color: #FFFFFF;
    margin: 0 0 10px;
}

/* ── Market Stats Grid ── */
.cd-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cd-stat-item {
    background: #0B1220; border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.cd-stat-label { font-size: 11px; color: #6B7A8D; font-weight: 600; }
.cd-stat-value { font-size: 16px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; transition: color 0.3s ease; }
/* Daily-change stat value colors (used by forex/metals detail Daily Change card) */
.cd-stat-value-up { color: #22C55E !important; }
.cd-stat-value-down { color: #EF4444 !important; }
/* Subtle pulse highlight when a stat value updates in real-time (live price refresh) */
.cd-stat-value.pulse-up { animation: cdStatPulseUp 0.8s ease-out; }
.cd-stat-value.pulse-down { animation: cdStatPulseDown 0.8s ease-out; }
@keyframes cdStatPulseUp {
    0% { color: #22C55E; text-shadow: 0 0 8px rgba(34,197,94,0.5); }
    100% { color: #FFFFFF; text-shadow: none; }
}
@keyframes cdStatPulseDown {
    0% { color: #EF4444; text-shadow: 0 0 8px rgba(239,68,68,0.5); }
    100% { color: #FFFFFF; text-shadow: none; }
}

/* ── Alert Card (PREMIUM REDESIGN) ── */
.cd-alert-card {
    background: linear-gradient(180deg, #0E1623 0%, #0B1220 100%);
    border: 1px solid rgba(245,166,35,0.12);
    border-radius: 18px; padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
}
.cd-alert-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cd-alert-status { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cd-alert-status-icon {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.18);
    color: #F5A623; display: flex; align-items: center; justify-content: center;
    transition: all 0.25s ease;
}
.cd-alert-status-icon.active {
    background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25);
    color: #22C55E;
    animation: cdAlertPulse 2s ease-in-out infinite;
}
@keyframes cdAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.cd-alert-status-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-alert-status-label {
    font-size: 10px; color: #6B7A8D; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.cd-alert-status-value {
    font-size: 13px; font-weight: 700; color: #A5B4C7;
    transition: color 0.25s ease;
}
.cd-alert-status-value.active { color: #22C55E; }
.cd-alert-count-badge {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 6px 12px; min-width: 56px;
    transition: all 0.25s ease;
}
.cd-alert-count-badge.has-alerts {
    background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.25);
}
.cd-alert-count-num {
    font-size: 18px; font-weight: 800; color: #FFFFFF;
    font-variant-numeric: tabular-nums; line-height: 1;
}
.cd-alert-count-badge.has-alerts .cd-alert-count-num { color: #F5A623; }
.cd-alert-count-label {
    font-size: 9px; color: #6B7A8D; font-weight: 600;
    margin-top: 3px; white-space: nowrap;
}

.cd-alert-current {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px; padding: 10px 14px;
}
.cd-alert-current-label {
    font-size: 11px; color: #6B7A8D; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.cd-alert-current-value {
    font-size: 16px; font-weight: 800; color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

.cd-alert-direction-group {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.cd-alert-dir-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 8px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    color: #6B7A8D; font-size: 11px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all 0.2s ease;
}
.cd-alert-dir-btn:hover { background: rgba(255,255,255,0.05); color: #A5B4C7; }
.cd-alert-dir-btn:active { transform: scale(0.97); }
.cd-alert-dir-btn.active[data-direction="above"] {
    background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #22C55E;
}
.cd-alert-dir-btn.active[data-direction="below"] {
    background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #EF4444;
}

.cd-alert-form { display: flex; gap: 8px; }
.cd-alert-input-wrap { position: relative; flex: 1; }
.cd-alert-prefix {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: #6B7A8D; font-weight: 700; pointer-events: none;
}
.cd-alert-input {
    width: 100%; height: 44px; border-radius: 12px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08);
    color: #FFFFFF; font-size: 15px; font-weight: 600; outline: none;
    padding: 0 28px 0 14px; font-family: inherit;
    transition: all 0.2s ease;
}
.cd-alert-input::placeholder { color: #4A5468; font-weight: 500; }
.cd-alert-input:focus {
    border-color: rgba(245,166,35,0.4);
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 3px rgba(245,166,35,0.08);
}
.cd-alert-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 18px; height: 44px; border-radius: 12px; border: none;
    background: linear-gradient(135deg, #F5A623, #E0941A);
    color: #0B1220; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(245,166,35,0.25);
    white-space: nowrap;
}
.cd-alert-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245,166,35,0.35);
}
.cd-alert-btn:active { transform: scale(0.97); }

.cd-alert-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 4px;
}
.cd-alert-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 10px 12px;
    transition: all 0.2s ease;
}
.cd-alert-item:hover { background: rgba(255,255,255,0.05); }
.cd-alert-item-dir {
    width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.cd-alert-item-dir.above {
    background: rgba(34,197,94,0.1); color: #22C55E;
}
.cd-alert-item-dir.below {
    background: rgba(239,68,68,0.1); color: #EF4444;
}
.cd-alert-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-alert-item-price {
    font-size: 14px; font-weight: 700; color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}
.cd-alert-item-meta { font-size: 10px; color: #6B7A8D; font-weight: 500; }
.cd-alert-item-delete {
    width: 28px; height: 28px; border-radius: 8px; border: none;
    background: rgba(239,68,68,0.08); color: #EF4444;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease; flex-shrink: 0;
}
.cd-alert-item-delete:hover {
    background: rgba(239,68,68,0.18); transform: scale(1.05);
}
.cd-alert-item-delete:active { transform: scale(0.92); }
.cd-alert-empty {
    text-align: center; padding: 16px 12px;
    color: #6B7A8D; font-size: 12px; font-weight: 500;
}
.cd-alert-empty-icon {
    margin: 0 auto 6px; width: 32px; height: 32px; opacity: 0.4;
}

/* ── AI Card ── */
.cd-ai-card {
    background: linear-gradient(135deg, rgba(245,166,35,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(245,166,35,0.12);
    border-radius: 14px; padding: 14px;
    font-size: 13px; line-height: 1.6; color: #A5B4C7;
}

/* ── Close Button (Back to Market) ── */
.cd-close-btn {
    background: rgba(245,166,35,0.1) !important;
    border-color: rgba(245,166,35,0.25) !important;
    color: #F5A623 !important;
}
.cd-close-btn:hover {
    background: rgba(245,166,35,0.18) !important;
}

/* ── Responsive ── */
/* BUG 2 fix: chart heights tuned per breakpoint so chart + alert + stats all fit
   without overlap on 320/360/390/412/430px viewports. Combined with min-height:0
   on .cd-content (which enables proper flex scrolling) nothing is clipped. */
@media (max-width: 360px) {
    .cd-chart { height: 280px !important; }
    .cd-stats-grid { gap: 8px; }
    .cd-stat-item { padding: 12px; }
    .cd-stat-value { font-size: 15px; }
    .cd-tf-btn { font-size: 11px; padding: 6px 2px; }
    .cd-content { padding: 12px 12px 24px; }
    .cd-alert-card { padding: 14px; gap: 12px; }
    .cd-section { margin-bottom: 14px; }
}
@media (min-width: 361px) and (max-width: 411px) {
    .cd-chart { height: 320px !important; }
}
@media (min-width: 412px) {
    .cd-chart { height: 380px !important; }
    .cd-stat-item { padding: 16px; }
}

/* ============================================================================
   TICKET BOTTOM SHEET — Premium Dark+Gold full-height redesign
   ============================================================================ */
.tk-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(2, 6, 17, 0.75);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none; align-items: flex-end; justify-content: center;
    animation: tkFadeIn 0.3s ease;
}
@keyframes tkFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tk-sheet {
    width: 100%; max-width: 480px;
    max-height: 92vh;
    background: linear-gradient(180deg, #0E1623 0%, #0B1220 100%);
    border-radius: 24px 24px 0 0;
    border: 1px solid rgba(245, 166, 35, 0.12);
    border-bottom: none;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 166, 35, 0.04);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: tkSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tkSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.tk-handle {
    width: 40px; height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    margin: 10px auto 6px;
    flex-shrink: 0;
}

/* Header */
.tk-header {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.tk-header-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid rgba(245, 166, 35, 0.2);
    color: #F5A623;
}
.tk-header-text { flex: 1; min-width: 0; }
.tk-header-text h3 {
    font-size: 16px; font-weight: 800; color: #FFFFFF;
    margin: 0; line-height: 1.2;
}
.tk-header-text span {
    font-size: 11px; color: #6B7A8D; font-weight: 500;
}
.tk-close {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A5B4C7; cursor: pointer;
    transition: all 0.2s ease;
}
.tk-close:hover { background: rgba(239, 68, 68, 0.1); color: #EF4444; border-color: rgba(239, 68, 68, 0.2); }
.tk-close:active { transform: scale(0.92); }

/* Body (scrollable) */
.tk-body {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 18px 20px 24px;
    min-height: 0;
}

/* Form card */
.tk-form-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
}
.tk-form-card-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #F5A623;
    margin-bottom: 14px;
}

/* Field group */
.tk-field-group { margin-bottom: 14px; }
.tk-label {
    display: block; font-size: 12px; font-weight: 600;
    color: #8B96A8; margin-bottom: 6px;
    letter-spacing: 0.2px;
}

/* Input + textarea — states: normal/focus/error/success/disabled */
.tk-input, .tk-textarea {
    width: 100%; box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    color: #FFFFFF; font-size: 14px; font-weight: 500;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    outline: none;
}
.tk-input::placeholder, .tk-textarea::placeholder { color: #4A5468; font-weight: 400; }
.tk-input:focus, .tk-textarea:focus {
    border-color: rgba(245, 166, 35, 0.4);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.08);
}
.tk-input.tk-error-state, .tk-textarea.tk-error-state {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}
.tk-input.tk-success-state, .tk-textarea.tk-success-state {
    border-color: rgba(34, 197, 94, 0.4);
}
.tk-input:disabled, .tk-textarea:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.tk-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.tk-textarea-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px;
}
.tk-error {
    font-size: 11px; color: #EF4444; font-weight: 500;
    min-height: 14px; transition: opacity 0.2s ease;
}
.tk-char-counter {
    font-size: 11px; color: #6B7A8D; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tk-char-counter.tk-limit { color: #EF4444; }

/* Submit button */
.tk-submit-btn {
    width: 100%; height: 46px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #F5A623, #FFCC4D);
    border: none; border-radius: 12px;
    color: #020611; font-size: 14px; font-weight: 700;
    font-family: inherit; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.3);
}
.tk-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245, 166, 35, 0.4); filter: brightness(1.05); }
.tk-submit-btn:active { transform: scale(0.98); }
.tk-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; filter: grayscale(0.3); }

/* My tickets header */
.tk-my-tickets-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #F5A623;
    margin-bottom: 12px;
}

/* Ticket list items */
.tk-list { display: flex; flex-direction: column; gap: 10px; }
.tk-list .ticket-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 14px;
    transition: border-color 0.2s ease;
}
.tk-list .ticket-item:hover { border-color: rgba(245, 166, 35, 0.15); }
.tk-list .ticket-item-header {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.tk-list .ticket-item-header strong { font-size: 14px; color: #FFFFFF; font-weight: 700; }
.tk-list .ticket-status {
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tk-list .ticket-status.open { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.tk-list .ticket-status.answered { background: rgba(34, 197, 94, 0.12); color: #22C55E; }
.tk-list .ticket-status.closed { background: rgba(107, 122, 141, 0.12); color: #6B7A8D; }
.tk-list .ticket-body-text { font-size: 13px; color: #A5B4C7; line-height: 1.5; margin-bottom: 8px; }
.tk-list .ticket-date { font-size: 11px; color: #6B7A8D; margin-top: 6px; }
.tk-list .ticket-thread { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.tk-list .ticket-reply {
    background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 10px 12px;
    font-size: 12px; color: #A5B4C7;
}
.tk-list .ticket-reply.admin { background: rgba(245, 166, 35, 0.06); border: 1px solid rgba(245, 166, 35, 0.12); }
.tk-list .ticket-reply-meta { font-size: 10px; color: #6B7A8D; margin-top: 4px; }
.tk-list .ticket-actions { margin-top: 10px; }
.tk-list .ticket-delete-btn {
    font-size: 11px; color: #EF4444; background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15); border-radius: 8px;
    padding: 6px 12px; cursor: pointer; font-family: inherit;
    transition: all 0.2s ease;
}
.tk-list .ticket-delete-btn:hover { background: rgba(239, 68, 68, 0.15); }
.tk-list .empty-state { text-align: center; padding: 24px 12px; color: #6B7A8D; font-size: 13px; }

/* Responsive */
@media (max-width: 360px) {
    .tk-sheet { max-height: 95vh; border-radius: 20px 20px 0 0; }
    .tk-body { padding: 14px 16px 20px; }
    .tk-form-card { padding: 14px; }
    .tk-submit-btn { height: 42px; font-size: 13px; }
}

/* Mini spinner for ticket submit button loading state */
.tk-mini-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(2, 6, 17, 0.3);
    border-top-color: #020611;
    border-radius: 50%;
    animation: tkSpin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes tkSpin { to { transform: rotate(360deg); } }

/* ============================================================================
   MEMBERSHIP LOCK — Premium Dark+Gold full-page gate
   Backend-verified. CSS hides app content until verified (security layer).
   ============================================================================ */
/* Security: hide ALL app content until membership is verified.
   The JS removes this class only after backend confirms channel_joined=true. */
body.jl-locked #app-root,
body.jl-locked .app-header,
body.jl-locked .bottom-nav,
body.jl-locked .page,
body.jl-locked .hero-banner-slider,
body.jl-locked .market-ticker,
body.jl-locked .modal,
body.jl-locked .cd-fullscreen {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ────────────────────────────────────────────────────────────
   FLOATING MEMBERSHIP STATUS CARD (Task 37 redesign)
   Bottom-anchored floating glassmorphism card.
   Sits ABOVE the bottom-nav. Centered, max-width 340px, ~75% viewport
   width, height 44-52px, fully rounded 20px.
   States: checking / verified / required / error
   GPU-friendly: animates transform + opacity only (no layout shift).
   ──────────────────────────────────────────────────────────── */

/* CSS custom property: distance from viewport bottom to top of bottom-nav.
   The bottom-nav is `position: fixed; bottom: 0; margin: 0 12px 10px;
   height: 72px; padding-bottom: env(safe-area-inset-bottom)`.
   So the top of the bottom-nav sits at:
     10px (margin-bottom) + 72px (height) + env(safe-area-inset-bottom)
   We add 12px breathing room above the nav for the floating card. */
:root {
    --jsb-bottom-offset: calc(12px + 10px + 72px + env(safe-area-inset-bottom, 0px));
}

.join-status-bar {
    position: fixed;
    /* Centered horizontally with max-width 340px and ~75% viewport width */
    left: 50%;
    right: auto;
    bottom: var(--jsb-bottom-offset);
    width: 75%;
    max-width: 340px;
    /* Hidden by default — driven by .visible class */
    z-index: 10003;
    transform: translate(-50%, 24px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    /* Smooth enter/exit — transform + opacity only (GPU friendly, no layout shift) */
    transition:
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.26s ease;
    will-change: transform, opacity;
    /* Glassmorphism + blur + soft shadow + subtle border */
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    background: linear-gradient(180deg, rgba(15, 22, 36, 0.78), rgba(11, 17, 28, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    /* Cap height to 44-52px range via inner padding + min-height */
    overflow: hidden;
}

/* Enter state — card slides up + fades in */
.join-status-bar.visible {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* State-tinted glows — keep them subtle so the card stays premium */
.join-status-bar[data-state="verified"] {
    border-color: rgba(0, 200, 150, 0.30);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(0, 200, 150, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.join-status-bar[data-state="required"] {
    border-color: rgba(249, 115, 22, 0.32);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(249, 115, 22, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.join-status-bar[data-state="error"] {
    border-color: rgba(255, 77, 77, 0.32);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(255, 77, 77, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.jsb-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-height: 44px;
    max-height: 52px;
}

.jsb-icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.jsb-icon svg { width: 20px; height: 20px; }
.join-status-bar[data-state="checking"]  .jsb-icon { color: #F5A623; }
.join-status-bar[data-state="verified"]  .jsb-icon { color: #00C896; }
.join-status-bar[data-state="required"]  .jsb-icon { color: #F97316; }
.join-status-bar[data-state="error"]     .jsb-icon { color: #FF4D4D; }

.jsb-spinner {
    animation: jsbSpin 0.9s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes jsbSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.jsb-text {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.1px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.join-status-bar[data-state="verified"] .jsb-text { color: #00C896; }
.join-status-bar[data-state="required"] .jsb-text { color: #FB923C; }
.join-status-bar[data-state="error"]    .jsb-text { color: #FCA5A5; }

.jsb-action {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #F5A623, #FFCC4D);
    color: #0B1220;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.30);
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;
}
.jsb-action svg { width: 13px; height: 13px; }
.jsb-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.42);
}
.jsb-action:active { transform: scale(0.96); }

/* Error-state action button takes a softer red-tinted style */
.join-status-bar[data-state="error"] .jsb-action {
    background: linear-gradient(135deg, #EF4444, #F87171);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
.join-status-bar[data-state="error"] .jsb-action:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
}

/* RTL adjustments — keep icon on the leading edge */
[dir="rtl"] .jsb-inner { flex-direction: row-reverse; }
[dir="rtl"] .jsb-text { text-align: right; }

/* Small phones — keep card readable, never narrower than 240px */
@media (max-width: 360px) {
    .join-status-bar { width: 82%; }
    .jsb-inner { padding: 10px 12px; gap: 8px; }
    .jsb-text { font-size: 12px; }
    .jsb-action { padding: 5px 10px; font-size: 11px; }
}

/* Extra-tall iOS safe-area (e.g. iPhone with home indicator) — card stays above nav */
@supports (padding: env(safe-area-inset-bottom)) {
    .join-status-bar {
        /* Keep the floating card clear of the home indicator + bottom-nav */
        bottom: calc(12px + 10px + 72px + env(safe-area-inset-bottom, 0px));
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .join-status-bar,
    .join-status-bar.visible {
        transition: opacity 0.2s ease;
        transform: translate(-50%, 0);
    }
    .jsb-spinner { animation: none; }
}



.join-lock-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: radial-gradient(ellipse at center, #0d1326 0%, #050810 70%, #02050b 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: jlFadeIn 0.3s ease;
}
@keyframes jlFadeIn { from { opacity: 0; } to { opacity: 1; } }

.join-lock-card {
    position: relative; z-index: 2;
    max-width: 380px; width: 100%;
    background: linear-gradient(180deg, rgba(14, 22, 35, 0.9) 0%, rgba(11, 18, 32, 0.92) 100%);
    border: 1px solid rgba(245, 166, 35, 0.15);
    border-radius: 24px;
    padding: 40px 28px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 166, 35, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: jlCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
@keyframes jlCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Icon scene */
.join-lock-icon-scene {
    position: relative;
    width: 90px; height: 90px;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
}
.join-lock-icon-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.22) 0%, transparent 65%);
    border-radius: 50%;
    animation: jlGlowPulse 3.5s ease-in-out infinite;
    z-index: 0;
}
.join-lock-icon-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border: 1.5px solid rgba(245, 166, 35, 0.2);
    border-radius: 50%;
    animation: jlRingPulse 3s ease-in-out infinite;
}
@keyframes jlRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.15; }
}
@keyframes jlGlowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.15); }
}
.join-lock-icon {
    position: relative; z-index: 2;
    width: 56px; height: 56px;
    filter: drop-shadow(0 0 10px rgba(245, 166, 35, 0.35));
    animation: jlIconFloat 4s ease-in-out infinite;
}
@keyframes jlIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Badge */
.join-lock-badge {
    font-size: 10px; font-weight: 800; color: #F5A623;
    letter-spacing: 2.5px; text-transform: uppercase;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.2);
    padding: 4px 14px; border-radius: 20px;
    margin-bottom: 16px;
    display: inline-block;
}

.join-lock-title {
    font-size: 19px; font-weight: 800; color: #FFFFFF;
    margin: 0 0 10px; line-height: 1.35; letter-spacing: -0.3px;
}
.join-lock-desc {
    font-size: 13.5px; color: #8B96A8; line-height: 1.65;
    margin: 0 0 24px; max-width: 300px; margin-left: auto; margin-right: auto;
}

/* Action buttons */
.join-lock-actions {
    display: flex; flex-direction: column; gap: 10px;
}
.join-lock-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 46px;
    border-radius: 12px; font-size: 14px; font-weight: 700;
    border: none; cursor: pointer; text-decoration: none;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.join-lock-btn:active { transform: scale(0.97); }
.join-lock-btn-primary {
    background: linear-gradient(135deg, #F5A623, #FFCC4D);
    color: #020611;
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.3);
}
.join-lock-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245, 166, 35, 0.4); filter: brightness(1.05); }
.join-lock-btn-secondary {
    background: rgba(245, 166, 35, 0.1);
    color: #F5A623;
    border: 1px solid rgba(245, 166, 35, 0.25);
}
.join-lock-btn-secondary:hover { background: rgba(245, 166, 35, 0.15); border-color: rgba(245, 166, 35, 0.4); }
.join-lock-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; filter: grayscale(0.3); }

/* Loading spinner */
.join-lock-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 12px 0;
}
.join-lock-spinner {
    width: 28px; height: 28px;
    border: 3px solid rgba(245, 166, 35, 0.15);
    border-top-color: #F5A623;
    border-radius: 50%;
    animation: jlSpin 0.8s linear infinite;
}
@keyframes jlSpin { to { transform: rotate(360deg); } }

/* Error message */
.join-lock-error {
    font-size: 13px; color: #EF4444; font-weight: 500;
    margin-top: 12px; line-height: 1.5;
    animation: jlShake 0.4s ease;
}
@keyframes jlShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Responsive */
@media (max-width: 360px) {
    .join-lock-card { padding: 32px 22px 28px; border-radius: 20px; }
    .join-lock-title { font-size: 18px; }
    .join-lock-desc { font-size: 13px; }
    .join-lock-btn { height: 42px; font-size: 13px; }
}

/* ============================================================================
   REWARD CENTER — Premium admin reward management UI
   ============================================================================ */
.rc-tabs {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 8px 0 12px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    scrollbar-width: none;
}
.rc-tabs::-webkit-scrollbar { display: none; }
.rc-tab {
    flex-shrink: 0;
    padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02); color: var(--admin-text-dim, #AEB7C2);
    font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all 0.2s ease; white-space: nowrap;
}
.rc-tab:hover { background: rgba(245,166,35,0.08); color: #F5A623; }
.rc-tab.active {
    background: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(255,204,77,0.10));
    border-color: rgba(245,166,35,0.35); color: #F5A623;
}

.rc-overview-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.rc-stat-card {
    background: linear-gradient(145deg, rgba(15,24,40,0.9), rgba(11,18,32,0.95));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px; padding: 14px;
    display: flex; flex-direction: column; gap: 4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.rc-stat-card:hover { transform: translateY(-2px); border-color: rgba(245,166,35,0.20); }
.rc-stat-icon {
    font-size: 16px; margin-bottom: 2px;
}
.rc-stat-icon.green { color: #22C55E; }
.rc-stat-val {
    font-size: 20px; font-weight: 800; color: #F5A623;
    font-variant-numeric: tabular-nums; letter-spacing: -0.3px; line-height: 1.2;
}
.rc-stat-lbl {
    font-size: 11px; font-weight: 600; color: var(--admin-text-dim, #6B7A8D);
    text-transform: uppercase; letter-spacing: 0.3px;
}

.rc-card {
    background: linear-gradient(145deg, rgba(15,24,40,0.9), rgba(11,18,32,0.95));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px; padding: 16px; margin-bottom: 16px;
}
.rc-card-title {
    font-size: 14px; font-weight: 800; color: #FFF;
    margin: 0 0 12px; letter-spacing: -0.2px;
    display: flex; align-items: center; gap: 6px;
}

.rc-form-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.rc-field { display: flex; flex-direction: column; gap: 4px; }
.rc-field label {
    font-size: 11px; font-weight: 600; color: var(--admin-text-dim, #6B7A8D);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.rc-field input, .rc-field select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px; padding: 8px 10px;
    color: #FFF; font-size: 13px; font-family: inherit;
    transition: border-color 0.2s ease;
}
.rc-field input:focus, .rc-field select:focus {
    outline: none; border-color: rgba(245,166,35,0.40);
}

.rc-toggle-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 9px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer; transition: all 0.2s ease;
}
.rc-toggle-row:hover { background: rgba(245,166,35,0.06); }
.rc-toggle-row input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #F5A623;
    cursor: pointer;
}
.rc-toggle-row span {
    font-size: 13px; font-weight: 600; color: #E8EDF2;
}

.adm-table-wrap {
    overflow-x: auto; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}
.adm-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.adm-table thead { background: rgba(255,255,255,0.03); }
.adm-table th {
    padding: 10px 12px; text-align: right; font-weight: 700;
    color: var(--admin-text-dim, #6B7A8D);
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap;
}
.adm-table td {
    padding: 10px 12px; color: #E8EDF2;
    border-bottom: 1px solid rgba(255,255,255,0.03); white-space: nowrap;
}
.adm-table tbody tr:hover { background: rgba(245,166,35,0.04); }
.adm-table tbody tr:last-child td { border-bottom: none; }

.adm-btn-sm {
    padding: 4px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04); color: #E8EDF2;
    font-size: 11px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all 0.18s ease;
    margin-inline-end: 4px;
}
.adm-btn-sm:hover { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.25); }
.adm-btn-sm:active { transform: scale(0.96); }
.adm-btn-danger { color: #FF6B6B; }
.adm-btn-danger:hover { background: rgba(255,77,77,0.12); border-color: rgba(255,77,77,0.25); }

@media (max-width: 600px) {
    .rc-overview-grid { grid-template-columns: 1fr 1fr; }
    .rc-form-grid { grid-template-columns: 1fr; }
}

/* (Old notification channel CSS removed — replaced by premium redesign above) */

/* ============================================================================
   ADMIN PANEL — SKELETON LOADING + RETRY BUTTON (non-conflicting additions)
   These are NEW classes that don't override any pre-existing styles.
   ============================================================================ */

/* ─── Loading Skeleton (shimmer animation) ─── */
.adm-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: adm-skeleton-shimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes adm-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.adm-skeleton-card {
    height: 90px;
    border-radius: 14px;
}

/* ─── Retry Button (for error states) ─── */
.adm-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(245,166,35,0.12);
    color: #f7b950;
    border: 1px solid rgba(245,166,35,0.25);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 12px;
}
.adm-retry-btn:hover {
    background: rgba(245,166,35,0.20);
    border-color: rgba(245,166,35,0.40);
}


/* ════════════════════════════════════════════════════════════════════
   TELEGRAM PUBLISHER — Minimal Professional Dashboard (Binance/Linear)
   ════════════════════════════════════════════════════════════════════ */

/* ── Header (compact) ── */
.pub-header { margin-bottom: 14px; }
.pub-header-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.pub-header-info { min-width: 0; flex: 1; }
.pub-header-title { font-size: 18px; font-weight: 800; color: #fff; margin: 0; line-height: 1.2; }
.pub-header-desc { font-size: 11px; color: #7a8499; margin: 2px 0 0; font-weight: 500; }
.pub-header-status { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 20px;
    font-size: 10px; font-weight: 600; color: #a8b2c5; white-space: nowrap;
    transition: all 0.2s ease;
}
.pub-status-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.pub-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pub-status-dot-active { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.6); animation: pubPulse 2s ease-in-out infinite; }
@keyframes pubPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
#pub-status-system { color: #4ade80; }
#pub-status-ai { color: #f7b950; }
#pub-status-sync { color: #7a8499; }

/* ── Stats Row (compact, single row) ── */
.pub-stats-row {
    display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.pub-stats-row::-webkit-scrollbar { display: none; }
.pub-stat-card {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
    transition: all 0.2s ease; box-sizing: border-box;
    flex-shrink: 0; min-width: 0;
}
.pub-stat-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.pub-stat-pending:hover { border-color: rgba(247,147,26,0.2); }
.pub-stat-sent:hover { border-color: rgba(34,197,94,0.2); }
.pub-stat-failed:hover { border-color: rgba(239,68,68,0.2); }
.pub-stat-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pub-stat-icon svg { width: 14px; height: 14px; }
.pub-stat-pending .pub-stat-icon { background: rgba(247,147,26,0.12); color: #f7b950; }
.pub-stat-sent .pub-stat-icon { background: rgba(34,197,94,0.12); color: #22c55e; }
.pub-stat-failed .pub-stat-icon { background: rgba(239,68,68,0.12); color: #ef4444; }
.pub-stat-body { min-width: 0; }
.pub-stat-value { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.1; font-family: 'Vazirmatn', system-ui; }
.pub-stat-pending .pub-stat-value { color: #f7b950; }
.pub-stat-sent .pub-stat-value { color: #22c55e; }
.pub-stat-failed .pub-stat-value { color: #ef4444; }
.pub-stat-label { font-size: 9px; color: #7a8499; margin-top: 1px; font-weight: 500; white-space: nowrap; }

/* ── Tabs (horizontal scroll, no wrap, 52px) ── */
.pub-tabs {
    display: flex; gap: 4px; height: 52px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-bottom: 14px; padding: 4px;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; box-sizing: border-box;
}
.pub-tabs::-webkit-scrollbar { display: none; }
.pub-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 0 14px; height: 42px; border-radius: 9px;
    border: none; background: transparent; color: #7a8499;
    font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: all 0.2s ease;
    font-family: inherit; flex-shrink: 0;
}
.pub-tab svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s ease; }
.pub-tab span { overflow: hidden; text-overflow: ellipsis; }
.pub-tab:hover { background: rgba(255,255,255,0.04); color: #e4e9f2; }
.pub-tab:hover svg { transform: scale(1.1); }
.pub-tab:focus-visible { outline: 2px solid #f7b950; outline-offset: 2px; }
.pub-tab.active {
    background: linear-gradient(135deg, #f7b950 0%, #f7931a 100%);
    color: #1a1200; box-shadow: 0 2px 8px rgba(247,147,26,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pub-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: rgba(239,68,68,0.15); color: #f87171;
    font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.pub-tab.active .pub-tab-badge { background: rgba(26,18,0,0.2); color: #1a1200; }

/* ── Panel ── */
.tgpub-panel { display: none; }
.tgpub-panel.active { display: block; animation: pubFadeIn 0.2s ease; }
@keyframes pubFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Toolbar ── */
.pub-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; box-sizing: border-box; }
.pub-info-text { font-size: 11px; color: #7a8499; font-weight: 500; margin-left: auto; white-space: nowrap; }

/* ── Search (lower height, rounded) ── */
.pub-search-wrap { position: relative; flex: 1; min-width: 160px; max-width: 300px; }
.pub-search-icon {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: #5a6378; pointer-events: none; transition: color 0.2s ease;
}
.pub-search-input {
    width: 100%; padding: 8px 36px 8px 12px;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; color: #e4e9f2; font-size: 12px; outline: none;
    transition: all 0.2s ease; font-family: inherit; box-sizing: border-box;
}
.pub-search-input:focus { border-color: rgba(247,147,26,0.4); background: rgba(0,0,0,0.3); box-shadow: 0 0 0 2px rgba(247,147,26,0.08); }
.pub-search-input::placeholder { color: #5a6378; }
.pub-search-clear {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: none; color: #7a8499;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; padding: 0;
}
.pub-search-clear svg { width: 11px; height: 11px; }
.pub-search-clear:hover { background: rgba(239,68,68,0.15); color: #f87171; }

/* ── Icon Button (reload, 44x44) ── */
.pub-icon-btn {
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    color: #a8b2c5; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; flex-shrink: 0; padding: 0;
}
.pub-icon-btn svg { width: 17px; height: 17px; transition: transform 0.3s ease; }
.pub-icon-btn:hover { background: rgba(247,147,26,0.08); color: #f7b950; border-color: rgba(247,147,26,0.2); box-shadow: 0 4px 10px rgba(247,147,26,0.1); }
.pub-icon-btn:hover svg { transform: rotate(180deg); }
.pub-icon-btn.loading svg { animation: pubSpin 0.8s linear infinite; }
@keyframes pubSpin { to { transform: rotate(360deg); } }

/* ── Select ── */
.pub-select {
    min-width: 100px; max-width: 140px;
    padding: 8px 12px 8px 26px;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; color: #e4e9f2; font-size: 12px; outline: none;
    font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: left 8px center; background-size: 12px;
    transition: all 0.2s ease; flex-shrink: 0;
}
.pub-select:focus { border-color: rgba(247,147,26,0.4); box-shadow: 0 0 0 2px rgba(247,147,26,0.08); }
.pub-select option { background: #1a2234; color: #e4e9f2; }

/* ── Filter Chips (38px height, horizontal scroll on mobile) ── */
.pub-filters {
    display: flex; gap: 5px; margin-bottom: 10px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; box-sizing: border-box;
}
.pub-filters::-webkit-scrollbar { display: none; }
.pub-filter-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 10px; height: 32px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
    color: #a8b2c5; font-size: 11px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: all 0.2s ease; font-family: inherit; flex-shrink: 0;
}
.pub-filter-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.pub-filter-chip:hover { background: rgba(255,255,255,0.06); color: #e4e9f2; border-color: rgba(255,255,255,0.1); }
.pub-filter-chip.active {
    background: linear-gradient(135deg, rgba(247,147,26,0.15), rgba(247,147,26,0.05));
    color: #f7b950; border-color: rgba(247,147,26,0.3);
}
.pub-filter-count {
    min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
    background: rgba(239,68,68,0.15); color: #f87171;
    font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pub-filter-chip.active .pub-filter-count { background: rgba(26,18,0,0.2); color: #1a1200; }

/* ── Bulk Bar (54px, compact) ── */
.pub-bulk-bar {
    display: none; align-items: center; justify-content: space-between;
    gap: 8px; padding: 8px 12px; height: 54px;
    background: linear-gradient(135deg, rgba(247,147,26,0.08), rgba(247,147,26,0.03));
    border: 1px solid rgba(247,147,26,0.2); border-radius: 10px;
    margin-bottom: 10px; box-sizing: border-box; animation: pubSlideDown 0.2s ease;
}
@keyframes pubSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pub-bulk-bar-active { display: flex; }
.pub-bulk-info { flex-shrink: 0; }
.pub-bulk-count { font-size: 12px; font-weight: 700; color: #f7b950; }
.pub-bulk-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* ── Checkbox Pill ── */
.pub-check-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 8px;
    cursor: pointer; font-size: 11px; font-weight: 600; color: #a8b2c5;
    white-space: nowrap; transition: all 0.2s ease; flex-shrink: 0;
}
.pub-check-pill:hover { background: rgba(255,255,255,0.06); color: #e4e9f2; }
.pub-check-pill input[type=checkbox] { width: 14px; height: 14px; accent-color: #f7b950; cursor: pointer; margin: 0; }
.pub-check-pill input[type=checkbox]:checked + span { color: #f7b950; }

/* ── Buttons (compact, 36-40px) ── */
.pub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 12px; border-radius: 9px; border: none;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; white-space: nowrap; font-family: inherit;
    min-height: 36px; box-sizing: border-box;
}
.pub-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pub-btn:active { transform: scale(0.97); }
.pub-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pub-btn-primary {
    background: linear-gradient(135deg, #f7b950 0%, #f7931a 100%); color: #1a1200;
    box-shadow: 0 2px 8px rgba(247,147,26,0.2);
}
.pub-btn-primary:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(247,147,26,0.35); transform: translateY(-1px); }
.pub-btn-ghost {
    background: rgba(255,255,255,0.03); color: #a8b2c5; border: 1px solid rgba(255,255,255,0.07);
}
.pub-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: #fff; }
.pub-btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff;
    box-shadow: 0 2px 8px rgba(34,197,94,0.2);
}
.pub-btn-success:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(34,197,94,0.35); transform: translateY(-1px); }

/* ── List ── */
.pub-list { display: flex; flex-direction: column; gap: 8px; }
.pub-list:not([style*="display: none"]) ~ .pub-empty { display: none !important; }

/* ── Card (compact, professional) ── */
.pub-card {
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; padding: 12px; box-sizing: border-box;
    transition: all 0.2s ease; display: flex; gap: 12px;
}
.pub-card:hover {
    border-color: rgba(247,147,26,0.12); background: rgba(255,255,255,0.04);
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.pub-card-selected {
    border-color: rgba(34,197,94,0.3) !important;
    background: linear-gradient(135deg, rgba(34,197,94,0.04), rgba(34,197,94,0.01)) !important;
}

/* ── Card Layout: [media + body] [actions] ── */
.pub-card-header { display: none; } /* merged into card-top for compact layout */
.pub-card-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-width: 0; }
.pub-card-checkbox {
    display: flex; align-items: center; cursor: pointer; flex-shrink: 0; padding: 2px; position: relative;
}
.pub-card-checkbox input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.pub-card-checkbox-box {
    width: 18px; height: 18px; border-radius: 5px;
    border: 2px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; position: relative;
}
.pub-card-checkbox-box::after {
    content: ''; position: absolute; width: 9px; height: 5px;
    border-left: 2px solid #1a1200; border-bottom: 2px solid #1a1200;
    transform: rotate(-45deg) scale(0); transition: transform 0.2s ease; margin-top: -2px;
}
.pub-card-checkbox input:checked + .pub-card-checkbox-box {
    background: linear-gradient(135deg, #22c55e, #16a34a); border-color: #22c55e;
}
.pub-card-checkbox input:checked + .pub-card-checkbox-box::after { transform: rotate(-45deg) scale(1); }
.pub-card-checkbox:hover .pub-card-checkbox-box { border-color: rgba(34,197,94,0.5); }

/* ── Card Content: media left + body right ── */
.pub-card-content { display: flex; gap: 10px; align-items: flex-start; min-width: 0; flex: 1; }
.pub-card-media {
    width: 90px; height: 90px; border-radius: 10px; overflow: hidden;
    flex-shrink: 0; background: rgba(0,0,0,0.3); box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.pub-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pub-card-media-placeholder { display: flex; align-items: center; justify-content: center; color: #3a4258; }
.pub-card-media-placeholder svg { width: 24px; height: 24px; }
.pub-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pub-card-title {
    font-size: 14px; font-weight: 700; color: #e4e9f2; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pub-card-summary {
    font-size: 12px; color: #a8b2c5; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pub-card-meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.pub-card-time { font-size: 10px; color: #5a6378; font-weight: 500; }
.pub-card-error {
    display: flex; align-items: flex-start; gap: 5px; padding: 6px 8px;
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.12);
    border-radius: 6px; font-size: 10px; color: #f87171; line-height: 1.4; word-break: break-word;
}
.pub-card-error svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }

/* ── Card Actions (stacked right, 36px) ── */
.pub-card-actions {
    display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; width: 90px;
}
.pub-card-actions .pub-btn {
    padding: 6px 8px; font-size: 11px; gap: 4px; min-height: 36px; width: 100%;
}
.pub-card-actions .pub-btn svg { width: 12px; height: 12px; }
.pub-card-actions .pub-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── Badges ── */
.pub-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 600; flex-shrink: 0; line-height: 1.3;
}
.pub-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.pub-badge-type { background: rgba(247,147,26,0.1); color: #f7b950; border: 1px solid rgba(247,147,26,0.12); }
.pub-badge-ai { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.12); }
.pub-badge-pending { background: rgba(245,166,35,0.08); color: #f5a623; border: 1px solid rgba(245,166,35,0.12); }
.pub-badge-src { background: rgba(99,102,241,0.08); color: #818cf8; border: 1px solid rgba(99,102,241,0.12); }
.pub-badge-ref {
    background: rgba(255,255,255,0.04); color: #7a8499; font-family: 'Courier New', monospace;
    font-size: 9px; border: 1px solid rgba(255,255,255,0.05);
}
.pub-badge-forecast {
    background: rgba(255,255,255,0.03); color: #a8b2c5; border: 1px solid rgba(255,255,255,0.05);
    font-family: 'Courier New', monospace; font-size: 9px;
}
.pub-badge-attempts { background: rgba(239,68,68,0.08); color: #f87171; border: 1px solid rgba(239,68,68,0.12); }
.pub-badge-impact-high { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.12); }
.pub-badge-impact-medium { background: rgba(245,166,35,0.1); color: #fbbf24; border: 1px solid rgba(245,166,35,0.12); }
.pub-badge-impact-low { background: rgba(34,197,94,0.08); color: #4ade80; border: 1px solid rgba(34,197,94,0.12); }
.pub-impact-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pub-badge-status-pending { background: rgba(245,166,35,0.1); color: #fbbf24; border: 1px solid rgba(245,166,35,0.12); }
.pub-badge-status-sent { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.12); }
.pub-badge-status-failed { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.12); }
.pub-badge-status-cancelled { background: rgba(148,163,184,0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.1); }
.pub-badge-status-processing { background: rgba(59,130,246,0.1); color: #60a5fa; border: 1px solid rgba(59,130,246,0.12); animation: pubPulse 1.4s ease-in-out infinite; }
.pub-badge-status-skipped_dedup { background: rgba(148,163,184,0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.1); }
.pub-badge-priority-urgent { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.pub-badge-priority-high { background: rgba(245,166,35,0.12); color: #fbbf24; border: 1px solid rgba(245,166,35,0.2); }
.pub-badge-priority-normal { background: rgba(99,102,241,0.08); color: #818cf8; border: 1px solid rgba(99,102,241,0.12); }
.pub-badge-priority-low { background: rgba(148,163,184,0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.1); }
.pub-badge-scheduled { background: rgba(59,130,246,0.08); color: #60a5fa; border: 1px solid rgba(59,130,246,0.12); font-family: 'Courier New', monospace; font-size: 9px; }

/* ── Empty State ── */
.pub-empty {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    padding: 36px 16px; text-align: center; color: #5a6378;
}
.tgpub-panel.active .pub-empty { display: flex; }
.pub-list:not([style*="display: none"]) ~ .pub-empty { display: none !important; }
.pub-empty-icon {
    width: 60px; height: 60px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(247,147,26,0.05), rgba(247,147,26,0.02));
    border: 1px solid rgba(247,147,26,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.pub-empty-icon svg { width: 28px; height: 28px; color: rgba(247,147,26,0.35); }
.pub-empty h4 { font-size: 14px; font-weight: 700; color: #a8b2c5; margin: 0 0 4px; }
.pub-empty p { font-size: 11px; color: #7a8499; margin: 0 0 12px; max-width: 280px; line-height: 1.5; }
.pub-empty-inline { display: flex !important; }
.pub-empty-inline .pub-empty-icon { background: linear-gradient(135deg, rgba(239,68,68,0.05), rgba(239,68,68,0.02)); border-color: rgba(239,68,68,0.08); }
.pub-empty-inline .pub-empty-icon svg { color: rgba(239,68,68,0.35); }

/* ── Skeleton ── */
.pub-skeleton { pointer-events: none; border-color: rgba(255,255,255,0.03) !important; }
.pub-sk-media { width: 90px; height: 90px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: pubShimmer 1.6s ease-in-out infinite; }
.pub-sk-line { height: 10px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: pubShimmer 1.6s ease-in-out infinite; }
.pub-sk-btn { height: 36px; border-radius: 9px; background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: pubShimmer 1.6s ease-in-out infinite; }
@keyframes pubShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Logs ── */
.pub-logs {
    background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px; padding: 6px; max-height: 56vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.pub-logs::-webkit-scrollbar { width: 4px; }
.pub-logs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.pub-log-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 10px; flex-wrap: wrap; transition: background 0.2s ease; }
.pub-log-row:last-child { border-bottom: none; }
.pub-log-row:hover { background: rgba(255,255,255,0.02); border-radius: 5px; }
.pub-log-time { color: #5a6378; font-family: 'Courier New', monospace; font-size: 9px; min-width: 100px; flex-shrink: 0; }
.pub-log-type { display: flex; align-items: center; flex-shrink: 0; }
.pub-log-type svg { width: 12px; height: 12px; color: #7a8499; }
.pub-log-ref { color: #7a8499; flex: 1; min-width: 100px; word-break: break-all; font-family: 'Courier New', monospace; font-size: 9px; }
.pub-log-dur { color: #f7b950; font-size: 9px; font-weight: 600; flex-shrink: 0; }
.pub-log-err { color: #f87171; font-size: 9px; width: 100%; margin-top: 3px; padding: 3px 6px; background: rgba(239,68,68,0.05); border-radius: 3px; word-break: break-word; }

/* ── Preview Tab ── */
.pub-preview-grid { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: flex-start; }
.pub-preview-editor, .pub-preview-render {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; padding: 14px;
}
.pub-preview-render { position: sticky; top: 0; }
.pub-card-section-title { font-size: 13px; font-weight: 700; color: #e4e9f2; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pub-form { display: flex; flex-direction: column; gap: 10px; }
.pub-form-field { display: flex; flex-direction: column; gap: 4px; }
.pub-form-field label { font-size: 11px; font-weight: 600; color: #a8b2c5; }
.pub-input {
    width: 100%; padding: 8px 12px; background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; color: #e4e9f2;
    font-size: 12px; outline: none; transition: all 0.2s ease; font-family: inherit; box-sizing: border-box;
}
.pub-input:focus { border-color: rgba(247,147,26,0.4); background: rgba(0,0,0,0.3); box-shadow: 0 0 0 2px rgba(247,147,26,0.08); }
.pub-input::placeholder { color: #5a6378; }
.pub-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.pub-form-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Phone Mockup ── */
.pub-phone {
    width: 100%; max-width: 300px; margin: 0 auto;
    background: linear-gradient(180deg, #0e1626 0%, #0a1220 100%);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.pub-phone-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.05); }
.pub-phone-back svg, .pub-phone-menu svg { width: 18px; height: 18px; color: #7a8499; }
.pub-phone-title { font-size: 13px; font-weight: 700; color: #e4e9f2; }
.pub-phone-body { padding: 12px; min-height: 260px; background: radial-gradient(ellipse at top, rgba(99,102,241,0.05) 0%, transparent 50%), rgba(0,0,0,0.15); }
.pub-bubble { background: linear-gradient(135deg, #1e3a5f 0%, #1a2f4a 100%); border-radius: 0 12px 12px 12px; padding: 10px 12px; color: #e4e9f2; font-size: 12px; line-height: 1.6; word-wrap: break-word; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.pub-bubble-empty { color: #5a6378; font-size: 11px; text-align: center; padding: 36px 10px; }
.pub-tg-img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.pub-tg-text strong { font-weight: 700; color: #fff; }
.pub-tg-code { background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 11px; color: #f7b950; }
.pub-tg-buttons { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.pub-tg-btn { display: block; text-align: center; padding: 9px 11px; background: rgba(247,147,26,0.12); color: #f7b950; border: 1px solid rgba(247,147,26,0.25); border-radius: 9px; text-decoration: none; font-size: 11px; font-weight: 700; transition: all 0.2s ease; }
.pub-tg-btn:hover { background: rgba(247,147,26,0.2); }
.pub-tg-meta { font-size: 9px; color: #5a6378; margin-top: 6px; text-align: left; }

/* ── Validation ── */
.pub-valid, .pub-invalid, .pub-warn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; margin-top: 8px; }
.pub-valid svg, .pub-invalid svg, .pub-warn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pub-valid { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.15); color: #4ade80; }
.pub-invalid { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15); color: #f87171; border-radius: 8px 8px 0 0; margin-bottom: 0; }
.pub-warn { background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.15); color: #fbbf24; }
.pub-issues { background: rgba(239,68,68,0.04); border: 1px solid rgba(239,68,68,0.12); border-top: none; color: #fca5a5; padding: 6px 12px 8px 24px; border-radius: 0 0 8px 8px; font-size: 10px; margin: 0 0 8px; }
.pub-issues li { margin: 3px 0; }

/* ── Settings ── */
.pub-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pub-settings-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pub-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 4px; }

/* ── Connection Test ── */
.pub-conn-success, .pub-conn-warn, .pub-conn-error { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 9px; margin-top: 10px; animation: pubFadeIn 0.2s ease; }
.pub-conn-icon { flex-shrink: 0; }
.pub-conn-icon svg { width: 20px; height: 20px; }
.pub-conn-success { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.15); }
.pub-conn-success .pub-conn-icon { color: #4ade80; }
.pub-conn-warn { background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.15); }
.pub-conn-warn .pub-conn-icon { color: #fbbf24; }
.pub-conn-error { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15); }
.pub-conn-error .pub-conn-icon { color: #f87171; }
.pub-conn-title { font-size: 12px; font-weight: 700; color: #e4e9f2; margin-bottom: 3px; }
.pub-conn-detail { font-size: 10px; color: #a8b2c5; line-height: 1.5; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
    .pub-preview-grid { grid-template-columns: 1fr; }
    .pub-preview-render { position: static; }
}
@media (max-width: 768px) {
    .pub-header-top { flex-direction: column; align-items: stretch; gap: 8px; }
    .pub-header-status { width: 100%; }
    .pub-toolbar { flex-direction: column; align-items: stretch; }
    .pub-search-wrap { max-width: 100%; width: 100%; }
    .pub-select { max-width: 100%; width: 100%; }
    .pub-info-text { margin-left: 0; text-align: center; }
    .pub-bulk-bar { flex-direction: column; align-items: stretch; gap: 6px; height: auto; padding: 10px 12px; }
    .pub-bulk-actions { justify-content: center; }
    .pub-card { flex-direction: column; gap: 10px; }
    .pub-card-content { gap: 8px; }
    .pub-card-media { width: 72px; height: 72px; }
    .pub-card-actions { flex-direction: row; width: 100%; }
    .pub-card-actions .pub-btn { flex: 1; }
    .pub-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .pub-card-actions { grid-template-columns: 1fr 1fr; }
    .pub-card-actions .pub-btn { font-size: 10px; padding: 6px 4px; }
    .pub-stat-card { padding: 6px 10px; gap: 6px; }
    .pub-stat-icon { width: 24px; height: 24px; }
    .pub-stat-icon svg { width: 12px; height: 12px; }
    .pub-stat-value { font-size: 14px; }
    .pub-stat-label { font-size: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   NEWS MODAL — ISOLATED CSS (Binance/CoinMarketCap style)
   IMPORTANT: This CSS is scoped to #news-modal.news-modal-pro only.
   No publisher CSS affects this modal. All selectors are prefixed.
   ════════════════════════════════════════════════════════════════════ */

#news-modal.news-modal-pro {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    padding: 16px;
    box-sizing: border-box;
}
#news-modal.news-modal-pro[style*="display: flex"],
#news-modal.news-modal-pro[style*="display:flex"] {
    display: flex !important;
}

#news-modal.news-modal-pro .news-modal-container {
    background: linear-gradient(180deg, #0f1729 0%, #0a1120 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    box-sizing: border-box;
}
#news-modal.news-modal-pro .news-modal-container::-webkit-scrollbar { width: 5px; }
#news-modal.news-modal-pro .news-modal-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

#news-modal.news-modal-pro .news-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: sticky;
    top: 0;
    background: rgba(15,23,41,0.95);
    backdrop-filter: blur(8px);
    z-index: 2;
    border-radius: 20px 20px 0 0;
}
#news-modal.news-modal-pro .news-modal-title {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    flex: 1;
    min-width: 0;
}
#news-modal.news-modal-pro .news-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #a8b2c5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
#news-modal.news-modal-pro .news-modal-close:hover {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border-color: rgba(239,68,68,0.25);
}

#news-modal.news-modal-pro .news-modal-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
#news-modal.news-modal-pro .news-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: #a8b2c5;
}
#news-modal.news-modal-pro .news-meta-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
#news-modal.news-modal-pro .news-meta-time { color: #7a8499; }
#news-modal.news-modal-pro .news-meta-source {
    color: #818cf8;
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.12);
}
#news-modal.news-modal-pro .news-meta-category {
    color: #f7b950;
    background: rgba(247,147,26,0.10);
    border-color: rgba(247,147,26,0.15);
}

/* CRITICAL: Hero Image — always fixed, 16:9, max-height 240px */
#news-modal.news-modal-pro .news-modal-hero-wrap {
    padding: 0 20px;
    margin-top: 14px;
}
#news-modal.news-modal-pro .news-modal-hero,
#news-modal.news-modal-pro #news-modal-image {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: 240px !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(247,147,26,0.08), rgba(99,102,241,0.08)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
    display: block !important;
    margin: 0 auto !important;
}

#news-modal.news-modal-pro .news-modal-body {
    padding: 18px 20px 8px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.8;
}

#news-modal.news-modal-pro .news-modal-summary-box {
    background: linear-gradient(135deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02));
    border: 1px solid rgba(34,197,94,0.18);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
#news-modal.news-modal-pro .news-modal-summary-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4ade80;
}
#news-modal.news-modal-pro .news-modal-ai-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
#news-modal.news-modal-pro .news-modal-summary-text {
    font-size: 13px;
    line-height: 1.8;
    color: #e4e9f2;
}

#news-modal.news-modal-pro .news-modal-fulltext {
    font-size: 14px;
    line-height: 1.9;
    color: #cbd5e1;
    word-wrap: break-word;
}

#news-modal.news-modal-pro .news-modal-footer {
    padding: 14px 20px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: sticky;
    bottom: 0;
    background: rgba(15,23,41,0.95);
    backdrop-filter: blur(8px);
    border-radius: 0 0 20px 20px;
}
#news-modal.news-modal-pro .news-modal-source-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(247,147,26,0.15), rgba(247,147,26,0.08));
    border: 1px solid rgba(247,147,26,0.30);
    border-radius: 12px;
    color: #f7b950;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}
#news-modal.news-modal-pro .news-modal-source-btn:hover {
    background: linear-gradient(135deg, rgba(247,147,26,0.25), rgba(247,147,26,0.12));
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(247,147,26,0.20);
}
#news-modal.news-modal-pro .news-modal-source-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Mobile responsive — bottom sheet style */
@media (max-width: 640px) {
    #news-modal.news-modal-pro {
        padding: 0;
        align-items: flex-end;
    }
    #news-modal.news-modal-pro .news-modal-container {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
    }
    #news-modal.news-modal-pro .news-modal-header {
        padding: 16px 14px 12px;
        border-radius: 16px 16px 0 0;
    }
    #news-modal.news-modal-pro .news-modal-title { font-size: 17px; }
    #news-modal.news-modal-pro .news-modal-meta {
        padding: 10px 14px;
        gap: 6px;
    }
    #news-modal.news-modal-pro .news-meta-badge {
        padding: 4px 8px;
        font-size: 10px;
    }
    #news-modal.news-modal-pro .news-modal-hero-wrap {
        padding: 0 14px;
        margin-top: 10px;
    }
    #news-modal.news-modal-pro .news-modal-hero,
    #news-modal.news-modal-pro #news-modal-image {
        max-height: 220px !important;
        border-radius: 11px !important;
    }
    #news-modal.news-modal-pro .news-modal-body {
        padding: 14px 14px 6px;
        font-size: 13px;
    }
    #news-modal.news-modal-pro .news-modal-footer {
        padding: 12px 14px 16px;
        border-radius: 0 0 16px 16px;
    }
}

/* ═══ Daily Mission Reward Popup ═══ */
#mission-reward-popup {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(11, 18, 32, 0.97), rgba(20, 30, 48, 0.97));
    border: 1px solid rgba(255, 138, 0, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 138, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    max-width: 340px;
}

#mission-reward-popup.mrp-show {
    top: 12px;
    opacity: 1;
}

#mission-reward-popup .mrp-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}

#mission-reward-popup .mrp-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#mission-reward-popup .mrp-title {
    font-size: 14px;
    font-weight: 800;
    color: #FF8A00;
    line-height: 1.3;
}

#mission-reward-popup .mrp-desc {
    font-size: 12px;
    color: #D7DDE4;
    line-height: 1.4;
}

#mission-reward-popup .mrp-desc b {
    color: #22C55E;
    font-weight: 700;
}

/* Mission reward amount */
#mission-reward-popup .mrp-reward {
    font-size: 18px;
    font-weight: 900;
    color: #22C55E;
    line-height: 1.2;
    margin-top: 2px;
}

/* Coin burst animation */
#mission-reward-popup .mrp-coin-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

#mission-reward-popup .mrp-coin {
    position: absolute;
    font-size: 16px;
    opacity: 0;
    top: 0;
    left: 0;
}

#mission-reward-popup .mrp-coin.mrp-coin-fly {
    animation: mrpCoinFly 0.8s ease-out forwards;
}

@keyframes mrpCoinFly {
    0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(var(--tx, 30px), var(--ty, -40px)) scale(1.2); }
    100% { opacity: 0; transform: translate(var(--tx, 60px), var(--ty, -80px)) scale(0.3); }
}

/* Mission completed card state */
.wallet-earn-card.mission-completed {
    opacity: 0.5;
    border-color: rgba(34, 197, 94, 0.2);
}

.wallet-earn-card.mission-completed .earn-reward {
    color: #22C55E;
}

.wallet-earn-card.mission-completed .earn-title {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

/* Mission checkmark badge */
.mission-checkmark {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.2);
    border: 1.5px solid rgba(34, 197, 94, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22C55E;
}

.wallet-earn-card {
    position: relative;
}

/* Mission progress text (e.g. "1/3") */
.mission-progress-text {
    font-size: 11px;
    font-weight: 700;
    color: #F5A623;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================ */
/* Support Tickets — Professional Admin Panel Design                            */
/* ============================================================================ */

/* ── Ticket Card ── */
.tk-card {
    background: linear-gradient(180deg, #0E1623 0%, #0B1220 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.tk-card:hover {
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.tk-card.tk-expanded {
    border-color: rgba(245,166,35,0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* ── Ticket Card Header ── */
.tk-card-header {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; gap: 10px;
}
.tk-card-header-left {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.tk-card-icon {
    width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.tk-card-icon.tk-status-open { background: rgba(59,130,246,0.12); }
.tk-card-icon.tk-status-answered { background: rgba(245,166,35,0.12); }
.tk-card-icon.tk-status-closed { background: rgba(107,122,141,0.12); }
.tk-card-header-text {
    display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.tk-card-subject {
    font-size: 14px; font-weight: 700; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-card-user {
    font-size: 11px; color: #6B7A8D; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-card-header-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* ── Status Badges ── */
.tk-badge {
    font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
    border: 1px solid;
}
.tk-badge.tk-status-open {
    color: #3B82F6; background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25);
}
.tk-badge.tk-status-answered {
    color: #F5A623; background: rgba(245,166,35,0.1); border-color: rgba(245,166,35,0.25);
}
.tk-badge.tk-status-closed {
    color: #6B7A8D; background: rgba(107,122,141,0.1); border-color: rgba(107,122,141,0.25);
}

/* ── Card Arrow (expand/collapse indicator) ── */
.tk-card-arrow {
    color: #6B7A8D; transition: transform 0.2s ease;
    display: flex; align-items: center;
}
.tk-card-arrow.tk-arrow-open { transform: rotate(180deg); }

/* ── Card Preview Text ── */
.tk-card-preview {
    font-size: 12px; color: #8896A8; line-height: 1.5;
    margin-top: 8px; padding-left: 42px;
    white-space: pre-wrap; overflow: hidden; max-height: 40px;
    text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ── Card Footer ── */
.tk-card-footer {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; padding-left: 42px;
    font-size: 10px; color: #4A5668; font-weight: 500;
}
.tk-card-updated { color: #4A5668; }
.tk-card-replies { color: #F5A623; margin-left: auto; }

/* ── Ticket Detail (expanded) ── */
.tk-detail {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Conversation Thread ── */
.tk-thread {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
    max-height: 300px; overflow-y: auto; padding-right: 4px;
}
.tk-thread::-webkit-scrollbar { width: 4px; }
.tk-thread::-webkit-scrollbar-track { background: transparent; }
.tk-thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Individual Message ── */
.tk-msg {
    border-radius: 12px; padding: 10px 14px;
    max-width: 85%;
}
.tk-msg-user {
    background: rgba(255,255,255,0.04);
    align-self: flex-start;
}
.tk-msg-admin {
    background: rgba(245,166,35,0.08);
    border: 1px solid rgba(245,166,35,0.15);
    align-self: flex-end;
}
.tk-msg-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.tk-msg-author {
    font-size: 11px; font-weight: 700;
}
.tk-msg-user .tk-msg-author { color: #6B7A8D; }
.tk-msg-admin .tk-msg-author { color: #F5A623; }
.tk-msg-time {
    font-size: 10px; color: #4A5668; font-weight: 500;
}
.tk-msg-body {
    font-size: 13px; color: #C5D0E0; line-height: 1.6;
    white-space: pre-wrap; word-break: break-word;
}

/* ── Reply Form ── */
.tk-reply-form {
    margin-bottom: 12px;
}
.tk-reply-input {
    width: 100%; min-height: 72px;
    font-size: 13px; padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    color: #FFFFFF; font-family: inherit;
    resize: vertical; box-sizing: border-box;
    transition: border-color 0.2s ease;
}
.tk-reply-input:focus {
    outline: none; border-color: rgba(245,166,35,0.3);
}
.tk-reply-input::placeholder { color: #4A5668; }

/* ── Action Buttons ── */
.tk-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.tk-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 8px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04); color: #A5B4C7;
    transition: all 0.15s ease; font-family: inherit;
}
.tk-btn:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; }
.tk-btn:active { transform: scale(0.97); }
.tk-btn-primary {
    background: linear-gradient(135deg, #F5A623, #D97706);
    border: none; color: #0B0F14; font-weight: 700;
    padding: 8px 18px; font-size: 12px;
    margin-top: 6px;
}
.tk-btn-primary:hover { background: linear-gradient(135deg, #FFB840, #E89006); color: #0B0F14; }
.tk-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.1); }
.tk-btn-danger { color: #EF4444; border-color: rgba(239,68,68,0.15); background: rgba(239,68,68,0.05); }
.tk-btn-danger:hover { background: rgba(239,68,68,0.12); color: #EF4444; }